/**
 * signature-drinks.js
 * 
 * Custom scrolly thingie for the signature drinks page.
 */

$(function () {
  var dx = 0;     // Current "velocity" of the banner, set by moving your mouse in the #banner
  var min_margin = 0;
  var max_margin = 0;
  var instance_width = $("#banner > ul.signature-drink-list").width();
  
  $("#banner")
  .css("overflow", "hidden")
  .mousemove(function (e) {
    x = e.pageX - $(this).offset().left;
    dx = x - ($(this).width() / 2.0);
  })
  .mouseout(function (e) {
    dx = 0;
  });
  
  // Make two copies of the signature drink list
  $("#banner > ul.signature-drink-list li")
  .clone()
  .appendTo($("#banner > ul.signature-drink-list"))
  .each(function (e) {
    $(this).css("left", parseInt($(this).css("left")) + instance_width);
  })
  .clone()
  .appendTo($("#banner > ul.signature-drink-list"))
  .each(function (e) {
    $(this).css("left", parseInt($(this).css("left")) + instance_width);
  });
  
  var drink_description_timeouts = [0,0,0,0,0,0
                                   ,0,0,0,0,0,0
                                   ,0,0,0,0,0,0];
  var scroll_lock = false;    // Asserted whenever scrolling is not allowed
  
  $("#banner > ul.signature-drink-list li dt")
  .each(function (i) {
    $(this)
    .bind("click", function (e) {
      scroll_lock = true;
      
      // Compute the desired left offset. This value starts as just the offset
      // of the corresponding drink list LI DT.
      li_offset = $(this).offset().left;
      banner_offset = $("#banner").offset().left;
      if(li_offset - banner_offset < 300) {
        li_offset += $(this).parents("li").width();;
      }
      else {
        li_offset -= 190;
      }
      
      // On mouseover, show corresponding drink description
      $("ul.product-info > li.drink-description-" + (i % 18))
      
      // Position this description according to where the accompanying title
      // is positioned presently.
      .css("left", li_offset + "px")
      
      .slideDown(500)
      .addClass("current_");
    })
    .bind("mouseleave", function (e) {
      // On mouseout, set a timer that will hide corresponding drink description
      // UNLESS the user mouses over it before the timer is up.
      drink_description_timeouts[i % 18] = window.setTimeout(function () {
        $("ul.product-info > li.drink-description-" + (i % 18))
        .slideUp(500)
        .removeClass("current_");
        
        scroll_lock = false;
      }, 1000);
    });
  });
  
  // Remove the UL from the bottom of the page and reposition it top-level
  // so that it can be positioned above everything else on the page. 
  $("<ul></ul>")
  .addClass("product-info")
  .appendTo(document.body)
  .append(
    $("ul.product-info li.row-li_ > ul > li")
    .each(function (i) {
      $(this)
      .css("position", "absolute")
      .css("top", $("#banner").offset().top)
      .addClass("drink-description-" + i)
      .css("background-image", "none")
      .css("background-color", "#fff")
    
      // Add the complement to the hover behaviour of the DTs described above.
      .bind("mouseenter", function (e) {
        window.clearTimeout(drink_description_timeouts[i % 18]);
        scroll_lock = true;
      })
      .bind("mouseleave", function (e) {
        $(this).slideUp(500, function () {
          scroll_lock = false;
        });
      });
    })
    .hide()
  );
  $("div#main-content > ul.product-info").remove();
  
  // Now that everything's cloned and ready to rock and roll, gotta expand that UL
  $("#banner > ul.signature-drink-list")
  .css("margin-left", "-3964px")
  .css("width", instance_width * 3);
  
  // On load is when we set the minimum and maximum margin on the banner, as these
  // values might change and it'd be ill-advised to hard-code them.
  // If margin is less than min_margin, the leftmost copy of the banner list is displayed
  // only. If the margin is greater than the maximum, the rightmost copy only is displayed.
  min_margin = instance_width;
  max_margin = 2 * instance_width;
  
  // Constant animation interval is ALWAYS ON. Animates to the next step, smoothly,
  // ten times a second.
  window.setInterval(function () {
    if(Math.abs(dx) > 100 && !scroll_lock) {
      target_margin = (-parseInt($("ul.signature-drink-list").css("margin-left"))) + (dx > 0 ? 7 : -7);
      if(target_margin > max_margin) { target_margin -= instance_width; }
      if(target_margin < min_margin) { target_margin += instance_width; }
      $("ul.signature-drink-list").css("margin-left", "-" + target_margin + "px");
    }
  }, 33);
});


/* Because apparently having nothing move when you load an interactive page is too confusing for some.
$(function () {
  var intro_animation = function () {
    $("ul.signature-drink-list")
    .css("margin-left", "0px")
    .animate({
      marginLeft: "-=2706px"
    }, 45000, "linear", function () {
      intro_animation();
    });
  };
  intro_animation();
  $("#banner").mouseover(function () {
    $("ul.signature-drink-list").stop();
    $("#banner").unbind("mouseover");
  })
}); */