$(document).ready(function(){
  
  // init
  $('div#sign-in-container, div#basket-items-container, div#currency-select-container').hide(); 
  //$('div#centre-column p:first').addClass('first-paragraph');
  
  // click events
  $('img#currency-select-button').click(function(){
    $('div#currency-select-container').slideToggle('fast');
  });
  
  $('a#sign-in-button').click(function(){
    $('div#basket-items-container').hide();
    $('div#sign-in-container').slideToggle('slow');
    $('a#sign-in-button').toggleClass('selected');    
  });
  
  $('a#basket-items-button').click(function(){
    $('div#sign-in-container').hide();
    $('div#basket-items-container').slideToggle('slow');
    $('a#basket-items-button').toggleClass('selected');    
  });
  
  $('a#close-sign-in').click(function(){
    $('div#sign-in-container').slideToggle('slow');
    $('a#sign-in-button').toggleClass('selected');   
  });
  
  $('a#close-basket-items').click(function(){
    $('div#basket-items-container').slideToggle('slow');
    $('a#basket-items-button').toggleClass('selected');    
  });
  
  $('form#sign-in-form').validate({

      rules: {
        account_email: {
          email: true
        },
        account_password: {
          required: true
        }
      },

      errorElement: 'div',
      errorClass: 'warning',
      errorPlacement: function(error, element) {
        error.appendTo(element.parents('div.field'));
      }

    });

  $("div#top-menu ul li").hover(
    
    function() {
      $("div", this).show();
    },
    function() {
      $("div", this).hide();
    }
  );
  /**
   * Provides background position animation of a gradient. The gradient slides across
   * the navigation as the user moves their mouse over each element.
   *
   * @author Andrew Weir
   * @date   22nd December 2010
   * @todo   IE doesn't animate. Also, calculating the offset loop
   *         each time someone mouses over - should do that only once and remember it
  **/       
  var bgPos;
  var baseOffset;
  
  $("div#top-menu ul li").hover(
  
    // State In
    function() {
      $(this).parent().addClass("sliding-image");
    
      // The script attempts to centre position with sliding animation the background image of
      // the UL element. I want to calculate the middle point of the selected element.
      var selectedElementWidth = $(this).width();
      var xCentrePoint = Math.round(selectedElementWidth/2);
      
      // Calculate the widths of the previous elements to the one the mouse is currently on.
      var indexHover = $("div#top-menu ul li").index($(this));
      baseOffset = 0;
      var borderOffset = 0; // There is a one pixel border to the right.
      for(var i=0; i<indexHover; i++) {
        var currentElementWidth = $("div#top-menu ul li:nth-child("+(i+1)+")").width();
        baseOffset += currentElementWidth + borderOffset;
      }
      
      // We need the width of the background gradient, halved...
      var bgGradientHalved = Math.round(93/2);
      // ...add on the half-distance.
      baseOffset += (xCentrePoint-bgGradientHalved);
       
      // Knowing the centre point of the element, I can calculate an offset for the background
      // image.
      bgPos = baseOffset+'px 0px';
      
      // Animate the slide going across.
      $("div#top-menu ul").stop().animate({backgroundPosition: bgPos}, 200, 'swing');
      
      // $("div", this).show();
    }
    
  ,
    // State Out
    function() {
      // $("div", this).hide();
      $("div#top-menu ul.sliding-image").css('background-position', bgPos);
      $("div#top-menu ul").removeClass("sliding-image");
    }
  );
  
  
});