$(document).ready(function(){
  // Add the collection detail divs when javascript is available
  $("body#collection .content").prepend("<div class=\"collection_detail\"><div id=\"client\"></div></div>");
  
  // Add the first available image to the collection detail div
  var firstImage = $(".collection #brands ul li:first a").attr('rel');
  $(".content .collection_detail #client").html("<img src=\"images/core/img/"+firstImage+"\" width=\"900\" height=\"370\" alt=\"Sedgman\">");
  
  // Create collection options when javascript is available
  $(".collection").prepend("<div class=\"options\"><ul><li class=\"prev\"><a href=\"#\">previous collection</a></li><li class=\"next\"><a href=\"#\">next collection</a></li></ul></div>");
  
  // The callback function that will be called once jCarousel has been called
  function collectionInitCallback(carousel) {
        // Set loading icon to client div
        $(".collection_detail #client").css("background-image","url('images/core/icon/ajax-loader.gif')");
        
        // Bind carousel functions to previous arrow
        $(".collection .options .prev").bind('click',function(){ carousel.prev(); return false; });
        
        // Bind carousel functions to next arrow
        $(".collection .options .next").bind('click',function(){ carousel.next(); return false; });
        
        // Bind function to each brand logo
        $(".collection #brands ul li a").bind('click', function(){
          var image = $(this).attr('rel');
          $(".collection_detail #client img").remove();
          $(".collection_detail #client").html("<img src=\"images/core/img/"+image+"\" width=\"900\" height=\"370\" alt=\"Sedgman\">");
          return false;
        });
      }
  
  //Create the carousel for brand logos
  $(".collection #brands ul").jcarousel({ scroll: 5, initCallback: collectionInitCallback, buttonNextHTML: null, buttonPrevHTML: null });
})