// custom stuff to work with jquery carousel on homepage

var diavlogIndex = 0;
var diavlogMaxLoad = 12;
var diavlogQueue;

function carouselItemLoad(carousel, state) {
  if (state == 'init') {
      carousel.lock();

      jQuery.get(
          '/site/carousel_data_milton5/P' + diavlogIndex,
          function(HTML) {
              carouselAddItems(carousel, state, HTML); // callback to load items from the retrieved HTML
          }
      );
  }
}

function carouselAddItems(carousel, state, HTML) {
  carousel.unlock();

  var diavlogs = HTML.split('<!-- diavlog -->').slice(1); // slice off anything before the first diavlog div
  window.diavlogQueue = diavlogs.reverse();

  // add each item in the diavlog array to the carousel
  jQuery.each(window.diavlogQueue, function(i, n){
      carousel.add(i+2, n); // carousel positions are one-based not zero-based, but we skip position 1 for the archive link
  });

  fillLargeBox(null, {'innerHTML': diavlogQueue[carousel.first]});
  highlightInitial(carousel, diavlogQueue.length + 1);

  // rollover behavior
  $('.jcarousel-item', carousel).hover(
      function(){
          fillLargeBox(null, this);
      },
      function(){
          return;
      }
  ); 
  
  // unbind the mouseover from the archive link
  $('#theCarousel .jcarousel-item-1', carousel).unbind('mouseover');
  // remove the hover class from the archive link
  //$('.jcarousel-item-1', carousel).removeClass('jcarousel-item:hover');
  //$('.jcarousel-item-1', carousel).hover(null,null);
}     

function highlightInitial(carousel, itemNumber){
  /*special case for default shown item, copied from :hover selector*/
  $('.jcarousel-item-' + itemNumber, carousel).css(
      'background', 
      '#b9e015 url(/images/design_elements/greenspoint2.gif) center top no-repeat');

  var revertBackground = function(){
      var special = $('.jcarousel-item-13', carousel).css(
          'background', 
          '#fff url(/images/design_elements/thumb-topborder2.gif) center top no-repeat');

      // attaching hover is for IE
      special.hover(
          function () { 
              this.style.background = '#b9e015 url(/images/design_elements/greenspoint2.gif) center top no-repeat';
          },
          function () {
              this.style.background = '#fff url(/images/design_elements/thumb-topborder2.gif) center top no-repeat';
      });     
          
      $('.jcarousel-item', carousel).unbind('mouseover', revertBackground);
  };
  
  $('.jcarousel-item', carousel).bind('mouseover', revertBackground);
}


function fillLargeBox(carousel, carouselElement){    

  $('#largeBox').html(carouselElement.innerHTML);

  $("#largeBox .leftparticipantName").hover(
      function () {
          $("#largeBox .leftparticipantDetails").show();
      },
      function () {
          $("#largeBox .leftparticipantDetails").hide();
  });     
  
  $("#largeBox .rightparticipantName").hover(
      function () {
          $("#largeBox .rightparticipantDetails").show();
      },
      function () {
          $("#largeBox .rightparticipantDetails").hide();
      });
      
  $('#largeBox .timeRange').each(setTimeRange);
}
/**
* set up a 13 item carousel with the last three items visible
*/
window.onload = function() {
  jQuery('#mycarousel').jcarousel({
    itemLoadCallback: carouselItemLoad,
    size: window.diavlogMaxLoad + 1,
    start: window.diavlogMaxLoad + 1 - 2// add 1 to account for archive link, subtract 2 because the carousel shows 3 items
  });
};