var mainName = '', mainImage = '', mainDesc = '';
$(document).ready(function() {
  $("#divContentColumn").css({'background': "#fff url('/detail-bg.gif') repeat-x"});
  
  var wordCount = $("#productDescription").text().split(/\b[\s,\.:;]*/).length;
  //alert(wordCount);
  if ( wordCount > 36 ) {
    $("#moreLink").css('visibility', 'visible');
    $("#moreLink a").click(function() {
      if ( $("#moreLink a").text() == 'More' ) {
        $("#productDescription").animate({
          height: Math.floor(wordCount / 9) * 15
        });
        $(this).text('Less');
      } else {
        $("#productDescription").animate({
          height: 60
        });
        $(this).text('More');
      }
      return false;
    });
  }
  
  mainName = $("#productName").html();
  mainImage = $("#productDetailImage").attr('src');
  mainDesc = $("#productDescription").html();
  $("body").append('<div id="tmpWorkspace" style="display: none;"></div>');
  $("#tmpWorkspace").load('./ #productList', function() {
  //pixelsilk2.getListItems({path: location.pathname.replace(/[a-zA-Z0-9\-]\.aspx/, ''), sorts:[{field: "SortOrder", direction: "Ascending"}], filters:[], filterrel: "", pagesize:"1000", page:"1", fields:["ItemPageURL", "Title", "Image", "ImageAlt", "Name", "BriefDescription"]} function(json) {
    var html = '', current = 0, i = 0;
  
    // Used in conjunction with the AJAX load
    $("#tmpWorkspace #productList li").each(function() {
      var href = $(this).find("a").attr('href');
      if ( document.URL.indexOf(href) > -1 ) {
        html = '<div class="thumb"><a href="' + href + '" class="current">';
        current = i;
      } else {
        html = '<div class="thumb"><a href="' + href + '">';
      }
      var img = $(this).find("img").attr('src');
      html += '<img src="' + img + '" alt="' + $(this).find("img").attr('alt') + '" style="width: 100px; height: auto;" /><br />';
      html += '<span class="title">' + $(this).find(".title").text() + '</span></a></div>';
      html += '<div class="name">' + $(this).find(".name").text() + '</div>';
      html += '<div class="img" style="display: none;"><img src="' + img + '" /></div>';
      html += '<div class="desc" style="display: none;">' + $(this).find(".desc").text() + '</div>';
      $("#productNavDetail #slider ul").append('<li>' + html + '</li>');
      i++;
    });
    /*
    // Used in conjunction with the API
    for ( i = 0; i < json.length; i++ ) {
      if ( document.URL.indexOf(json[i].Title + '.aspx') > -1 ) {
        html = '<div class="thumb"><a href="' + json[i].Title + '.aspx" class="current">';
        current = i;
      } else {
        html = '<div class="thumb"><a href="' + json[i].Title + '.aspx">';
      }
      html += '<img src="' + json[i].Image + '" alt="' + json[i].ImageAlt + '" style="width: 100px; height: auto;" /><br />';
      html += '<span class="title">' + json[i].Title + '</span></a></div>';
      html += '<div class="name">' + json[i].Name + '</div>';
      html += '<div class="img" style="display: none;"><img src="' + json[i].Image + '" /></div>';
      html += '<div class="desc" style="display: none;">' + json[i].BriefDescription + '</div>';
      $("#productNavDetail #slider ul").append('<li>' + html + '</li>');
    }
    */
    // Assign handlers to new list
    $("#productNavDetail #slider ul li div.thumb a").hover(
      function() {
        var title = $(this).find("span.title").text();
        var img = $(this).parent().parent().find("div.img img").attr('src');
        var name = $(this).parent().parent().find("div.name").text();
        $("#productName").html('<span class="lgYellow">' + title + '</span> <span class="smWhite">' + name + '</span>');
        $("#productDetailImage").attr('src', img);
        $("#productDescription").html($(this).parent().parent().find("div.desc").html());
        $(this).css('color', '#ffbe00');
      },
      function() {
        $("#productDetailImage").attr('src', mainImage);
        $("#productName").html(mainName);
        $("#productDescription").html(mainDesc);
        if ( !$(this).hasClass('current') ) $(this).css('color', '#fff');
      }
    );
  
    // Initialize the slider
    $("#productNavDetail #slider ul").jcarousel({
      scroll: 1,
      start: (current + 1),
      buttonNextHTML: '<div class="next"></div>',
      buttonPrevHTML: '<div class="prev"></div>'
    });
  });
});