//apply all kinds of hacks to get the site working...
Event.observe(window, 'load', init);

function init()
{
  init_styling();
  init_tabs();
}

//apply events and stuff to get the styling right in firefox, ie6 and ie7
function init_styling()
{
  resize_main_window();
  Event.observe(window, 'resize', resize_main_window);
  //add mouseover / mouseout listeners, because ie6 does not support mouseover in li elements...
  $('nav').select('a').each(function(element) {
    Event.observe(element, 'mouseover', function() {
      this.up('li').addClassName('hover');
    });
    Event.observe(element, 'mouseout', function() {
      this.up('li').removeClassName('hover');
    });    
  });
  //add mouseover /mouseout listeners for tabs-1 lists, because ie6 does not support mouseover in li elements...  
  $$('.tabs-1').each(function(list) {
    list.select('a').each(function(element) {
      Event.observe(element, 'mouseover', function() {
        this.up('li').addClassName('hover');
      });
      Event.observe(element, 'mouseout', function() {
        this.up('li').removeClassName('hover');
      });          
    });
  });
}

//apply the correct styling to the container div to allow the bottom gradient to correctly scale down to the bottom in ff and ie7
function resize_main_window()
{
  if (document.viewport.getHeight() < $('container-inner').getHeight()) {
    $('container').style.height = 'auto';
  }
  else {
    $('container').style.height = '100%';
  }
}


function updateCarmake(id)
{
  new Ajax.Updater('carmodels', '/ajax/carmodels', {
    parameters : {
      id: id
    },
    evalScripts: true,
    onComplete: function() {
      new Ajax.Updater('content-inner', '/ajax/carmakeproducts', {
        parameters: {
          id: id
        },
        evalScripts: true
      });      
    }
  });
}

function updateCarmodel(id)
{
  new Ajax.Updater('cartypes', '/ajax/cartypes', {
    parameters : {
      id: id
    },
    evalScripts: true,
    onComplete: function(request, json) {
      if (json && json['headerimage']) {
        $('header-image').src = json['headerimage'];
      }
      else {        
        $('header-image').src = '/images/header-default.jpg';
      }
      new Ajax.Updater('content-inner', '/ajax/carmodelproducts', {
        parameters: {
          id: id
        },
        evalScripts: true
      });      
    }
  });
}

function init_tabs()
{
  var x;
  var n;
  var parent;
  var open;
  x = 1;
  $$('.tabs-1').each(function(element) {
    if (!element.hasClassName('noswitch')) {
      open = false;
      parent = element.up('div');
      n = 1;
      parent.getElementsBySelector('.content-inner-container').each(function(container) {
        container.hide();
        container.id = 'tab-' + x + '-' + n + '-page';
        n++;
      });
      n = 1;
      element.getElementsBySelector('li > a').each(function(link) {
        link.id = 'tab-' + x + '-' + n;
        if (!open || ('#' + link.id == document.location.hash)) {
          open = link.id;
        }
        Event.observe(link, 'click', function() {
          open_tab($(this));
        });
        n++;
      });
      open_tab($(open));
      x++;
    }
  });  
}

function open_tab(element) {
  var list = element.up('ul');
  list.getElementsBySelector('li').each(function(listitem) {
    listitem.removeClassName('active-item');
  });
  var parent = list.up('div');
  parent.getElementsBySelector('.content-inner-container').each(function(container) {
    container.hide();
  })
  element.up('li').addClassName('active-item');
  $(element.id + '-page').show();
}

var add_product_to_basket_updating = 0;
var add_product_to_basket_updating_progress = 0;

function add_product_to_basket_update_ajax(product_id)
{
  if ((add_product_to_basket_updating > 0) && (add_product_to_basket_updating_progress == 0)) {
    add_product_to_basket_updating_progress = add_product_to_basket_updating;
    new Ajax.Updater('basket', '/ajax/updatebasket', {
      parameters: {
        add: product_id,
        amount: add_product_to_basket_updating_progress
      },
      onComplete: function() {
        add_product_to_basket_updating = add_product_to_basket_updating - add_product_to_basket_updating_progress;
        add_product_to_basket_updating_progress = 0;
        add_product_to_basket_update_ajax(product_id);
      }
    });
  }
}

function add_product_to_basket_update(product_id)
{
  add_product_to_basket_updating++;
  add_product_to_basket_update_ajax(product_id);
}

var add_product_to_basket_animation = false

function add_product_to_basket_animate(image)
{  
  if ($(image)) {
    var element = new Element('img');
    element.style.position = 'absolute';
    if (add_product_to_basket_animation) {
      document.body.insertBefore(element, add_product_to_basket_animation);
    }
    else {
      document.body.appendChild(element);
    }
    add_product_to_basket_animation = element;
    element.src = $(image).src;
    element.clonePosition($(image));
    element.show();
    element.setStyle({
      position: 'absolute'
    })
    new Effect.Parallel([
      new Effect.Move(element, {
        sync: true,
        x:    $('basket').cumulativeOffset()['left'],
        y:    $('basket').cumulativeOffset()['top'],
        mode: 'absolute'
      }),
      new Effect.Morph(element, {
        sync: true,
        style: 'width: 16px; height: 16px;'
      }),
      new Effect.Fade(element, {
        sync: true
      })
    ], {
      duration: 1,
      afterFinish: function(effect) {
        effect.effects[0].element.remove();
        if (effect.effects[0].element == add_product_to_basket_animation) {
          add_product_to_basket_animation = false;
        }
      }
    });
  }
}

function add_product_to_basket(product_id, image)
{
  add_product_to_basket_update(product_id);
  add_product_to_basket_animate(image);
}