$(document).ready(function() {

/************************************************
 * add animated navigation to the products menu *
 ************************************************/
  // init variables
  var products = $('.products ul li').length; // total number of items
  // console.log("products",products);
  var items = 5; // number of items displayed
  var position = 0; // initial position

  // if a product is selected make sure it shows in the menu
  var liMenu = $("div.products li");
  for (var i=0, liMenuLength = liMenu.length; i < liMenuLength; i++) {
    if ($(liMenu[i]).hasClass("current")) {
      position = Math.floor((i)/5)*5;
      // console.log("position",position);
    }
  };

  productScroll(position); // reset the products list position

  // add navigation buttons and hide them when needed
  $("#previous").append("<a>produits précédents</a>").children().hide();
  if (position != 0) {
    $("#previous a").show("fast");
  };
  $("#next").append("<a>produits suivants</a>").children().hide();
  
  
  // if there is more products to show...
  if (products > items) {

    // add behavior to the next button
    $('#next a').show().bind("click", function() {
      position = position + items;
      if (position >= products - items) {
        position = products - items;
        $(this).slideUp("fast");
      };
      if (position > 0) {
        $('#previous a').show("fast");
      };
      productScroll(position);
      // console.log("next:",position);
    });

        // add behavior to the previous button
      $('#previous a').hide().bind("click", function() {
        position = position - items;
        if (position <= 0) {
          position = 0;
          $(this).slideUp("fast");
        };
        if (position < products) {
          $('#next a').show("fast");
        };
          productScroll(position);
      // console.log("previous:",position);
        });
    };

    // scroll the products list to a specific position
    function productScroll (position)
    {
      var divOffset = $('.products ul').offset().top;
        var pOffset = $('.products ul li:eq('+ position +')').offset().top;
        var pScroll = pOffset - divOffset;
        $('.products ul').animate({scrollTop: '+=' + pScroll + 'px'}, 1000, 'easeOutBack');
    }


/************************************
 *        Product detail            *
 ************************************/

  // Popup with detailed product view
  $('#photo, #gallery a, #press a').fancybox({
    'zoomSpeedIn': 300,
    'zoomSpeedOut': 300,
    'overlayShow' : true,
    'overlayOpacity' : 0.7,
    'overlayColor' : '#313131'
  });


/************************************
 *             Stickers             *
 ************************************/

  // Setup color names
  var colorNames = {
    "p-anthracite": "anthracite",
    "p-beige": "beige",
    "p-bleu_pastel": "bleu+pastel",
    "p-bleu": "bleu",
    "p-fushia": "fushia",
    "p-gris": "gris",
    "p-jaune": "jaune",
    "p-kaki": "kaki",
    "p-mauve": "mauve",
    "p-orange": "orange",
    "p-pistache": "pistache",
    "p-rose": "rose",
    "p-rouge": "rouge",
    "p-turquoise": "turquoise",
    "p-vert_emeraude": "vert+emeraude",
    "p-vert": "vert",
    "p-violet_pastel": "violet+pastel",
    "p-violet": "violet",
    "c-beige": "carreaux+beige",
    "c-bleu": "carreaux+bleu",
    "c-fushia": "carreaux+fushia",
    "c-kaki": "carreaux+kaki",
    "c-orange": "carreaux+orange",
    "c-pistache": "carreaux+pistache",
    "c-rose": "carreaux+rose",
    "r-anthracite": "rayures+anthracite",
    "r-bleu": "rayures+bleu",
    "r-orange": "rayures+orange",
    "r-rouge": "rayures+rouge",
    "r-vert": "rayures+vert",
    "r-violet": "rayures+violet"
  };

  // var itemName = $('#cart a').attr("href").match(/item_name=[+-_%\w]+/);
  // console.log("itemName", itemName[0]);

  var cart_url = $('#cart a').attr("href");
  // console.log("cart_url", cart_url);

  var buy_url = $('#buy a').attr("href");
  // console.log("cart_url", cart_url);

  if ($('#colors').length) {

    function changeColorRef (newColor) {

      // replace current img src
      var src = $('#photo img').attr("src").replace(/-[a-z]-[a-z_]*/, "-" + newColor);
      $('#photo img').attr("src", src);

      var new_cart_url = cart_url.replace(/(item_name=[+-_%\w]+)/, "$1+-+" + colorNames[newColor]);
      $('#cart a').attr("href", new_cart_url);

      var new_buy_url = buy_url.replace(/(item_name=[+-_%\w]+)/, "$1+-+" + colorNames[newColor]);
      $('#buy a').attr("href", new_buy_url);
    }

    // Add default color to paypal links
    var defaultColor = $('li:first','#colors').find('a img').attr("src").match(/([a-z]{1}-[a-z_]*).jpg$/);
    changeColorRef(defaultColor[1]);

    $('li a','#colors').bind('click', function(event) {
        var newColor = $(this).children("img").attr("src").match(/([a-z]{1}-[a-z_]*).jpg$/);
        changeColorRef(newColor[1]);
        return false;
    });
  };


/***********************************
 *            Paintings            *
 ***********************************/

  $("#manual a").fancybox({
    'zoomSpeedIn': 300,
    'zoomSpeedOut': 300,
    'overlayShow' : true,
    'overlayOpacity' : 0.7,
    'overlayColor' : '#313131'
  });

  // DEBUG MODE (always display the splash screen)
  // $.cookie('byMadameRaoulPortrait', null);

  if ($.cookie('byMadameRaoulPortrait') == null) {
    $.cookie('byMadameRaoulPortrait', 'true', {expire: 1});
    $("#manual a").trigger('click');
  };


/***********************************
 *        Roll-over IE Only        *
 ***********************************/

  if ($.browser.msie) {
    $(".content .products li","#page").hover(
      function() {
        $(this).addClass("hover");
      },
      function() {
        $(this).removeClass("hover");
      }
    );
  };


/***********************************
 *      Place email into HTML      *
 ***********************************/
  var mail = "portrait";
  $('#commander','body.commander').attr('href', 'mailto:'+mail+'@bymadameraoul.com');


// end On DOM Ready
});