var previousBannerIndex = 1;
var slideshowInterval = 6000;
var slideshowTimer = null;

function startSlideShow() {

	// Set the opacity of all images to 0
	$("ul.slideshow li").css({opacity: 0.0});
	
	// Get the first image and display it (set it to full opacity)
	$("ul.slideshow li:first").css({opacity: 1.0});
	
	// Call the function to run the slideshow update
	slideshowTimer = setInterval("slideShowUpdate()", slideshowInterval);
	
	// Pause the slideshow on mouse over
	$("ul.slideshow").hover(
    function () {
      clearInterval(slideshowTimer);
    }, 	
    function () {
      slideshowTimer = setInterval("slideShowUpdate()", slideshowInterval);			
    }
	);
}

function slideShowUpdate(next) {

  // If no IMGs have the show class, grab the first image
  var current = ($("ul.slideshow li.show") ?  $("ul.slideshow li.show") : $("#ul.slideshow li:first"));

  // Get next image, if it reached the end of the slideshow, rotate it back to the first image
  if (next == null) {
    next = (current.next().length ? current.next() : $("ul.slideshow li:first"));
  }

  // Set the fade in effect for the next image, show class has higher z-index
  next.css({opacity: 0.0}).addClass("show").animate({opacity: 1.0}, 1000);

  // Hide the current image
  current.animate({opacity: 0.0}, 1000).removeClass("show");

  // Get the banner ID
  var values = next.attr("id").split("banner_");
  var id = values[1];

  // Get the parameters to scroll
  var thumbcarsousel = $("#carousel_thumb").data("jcarousel");
  var itemwidth = (thumbcarsousel.clipping() / thumbcarsousel.options.visible);
  var leftpos = (itemwidth * (id - 1));
  $("#thumb_indicator").animate({left: leftpos.toString()});

  // Remember the index
  previousBannerIndex = id;
}

function initThumbnailCarouselCallback(carousel) {
  $("#carousel_thumb li").bind("click", function() {
    var values = this.id.split("thumbnail_");
    var id = values[1];
    clearInterval(slideshowTimer);
    slideShowUpdate($("#banner_" + id.toString()));
	  slideshowTimer = setInterval("slideShowUpdate()", slideshowInterval);
    return false;
  });
}

$(document).ready(function() {

  // Start the slide show
  startSlideShow(slideshowInterval);

  // Init the carousel
  jQuery("#carousel_thumb").jcarousel({
    scroll: 6,
    visible: 6,
    initCallback: initThumbnailCarouselCallback,
    buttonNextHTML: null,
    buttonPrevHTML: null
  });

});