var CONTAINER_HEIGHT = 97;
   var DISPLAYED_ITEMS = 8;
   var imageContainers;
   var imagesInfo = {};
   var lastDisplayedItem = 0;
   $(document).ready(function() {

      

      imageContainers = $(".imageContainer");

      $(".imageContainer").click(function() {
         $(".swatches .imageContainer").removeClass("selected");
         $(this).addClass("selected");

         thumbnailClick(this.id);

      });


      $(".down").click(function() {
         if (lastDisplayedItem < imagesInfo.length) {
            $(".swatches").animate({ marginTop: "-=" + CONTAINER_HEIGHT });
            lastDisplayedItem += 2;

            if (lastDisplayedItem > imagesInfo.length)
               lastDisplayedItem = imagesInfo.length;

            //alert($(".swatches").css("margin-top"));

         }
         return false;

      });

      $(".up").click(function() {
         if (lastDisplayedItem > DISPLAYED_ITEMS) {
            $(".swatches").animate({ marginTop: "+=" + CONTAINER_HEIGHT });
            lastDisplayedItem -= 2;

            if (lastDisplayedItem < DISPLAYED_ITEMS)
               lastDisplayedItem = DISPLAYED_ITEMS;

         }
         return false;

      });

      //thumbnailClick(imageContainers.eq(0).attr("id"));

      if (imagesInfo.length > DISPLAYED_ITEMS)
         lastDisplayedItem = DISPLAYED_ITEMS;
      else {
         $(".up").hide();
         $(".down").hide();
      }
      
      
      imageContainers.eq(0).click();
   });

//   imagesInfo.length = 12;
//   imagesInfo["image1"] = { "src": "images/products/deepfrost.gif", "title": "Chino" };
//   imagesInfo["image2"] = { "src": "images/products/buffalo.gif", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ", "title": "Chino" };

   

   function thumbnailClick(imageId) {
      $("#mainImage").fadeOut(600, function(){
         $("#mainImage").attr("src", imagesInfo[imageId].src);
         $("#mainImage").fadeIn(600);
   });
      
   }