// JavaScript Document
delay = 15000;
fadeLength = 1500;
timeoutId = null;
curr = 0;

var initSlideshow = function(images, containerId)
{
	// Create out containers for the slideshow images...
	var slideshowContainer = "#" + containerId;
	$(slideshowContainer).html('<div id="currentImageContainer" class="currentImage"></div><div id="nextImageContainer" class="nextImage"></div>');
	
	imagesCount = parseInt(images.length) - 1;
	setImage('#currentImageContainer', curr);
	timeoutId = setTimeout('switchImages()', delay);
	pauseFader();
}

var pauseFader = function()
{
	$('#slideshowContainer').hover(
		function() {
			clearTimeout(timeoutId);
		},
		function() {
			timeoutId = setTimeout('switchImages()', fadeLength);
		}
	);
}

var setImage = function(elem, index)
{
	$(elem).html(images[index]);
}

var switchImages = function ()
{	
	// Incriment our counter
	var nextIndex = curr + 1;
	
	if (nextIndex > imagesCount)
	{
		nextIndex = 0;
		delay = 15000;
	}
	else
	{
		delay = 5000;
	}
	
	clearTimeout(timeoutId);
	
	if ($("#currentImageContainer").css('display') == 'block')
	{
		setImage('#nextImageContainer', nextIndex);
		curr = nextIndex;
		
		$('#nextImageContainer').fadeIn(fadeLength);
		$('#currentImageContainer').fadeOut(fadeLength);
	}
	else
	{
		setImage('#currentImageContainer', nextIndex);
		curr = nextIndex;
		
		$('#nextImageContainer').fadeOut(fadeLength);
		$('#currentImageContainer').fadeIn(fadeLength);
	}
	
	timeoutId = setTimeout('switchImages()', delay);
}