var rotateIntervalID = ""
var current = new Object();
var next = new Object();

function theRotator() {
	//Set the opacity of all images to 0
	$('div.slideshowRotator ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div.slideshowRotator ul li:first').css({opacity: 1.0});
	// set comment from alt
	$("#productDetailPicComment").text($('div.slideshowRotator ul li:first').children("img").attr("alt")); 
	
	startTimedRotation();
	// toggle play / pause
	$('#ssPause').show();
	$('#ssPlay').hide();
	
}

function startTimedRotation() {
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	rotateIntervalID = window.setInterval('goNext()',4000);
}

function stopTimedRotation() {
	// kil interval
	window.clearInterval(rotateIntervalID);
}

function setGlobalCurrent() {		
	current = ($('div.slideshowRotator ul li.show')?  $('div.slideshowRotator ul li.show') : $('div.slideshowRotator ul li:first'));
    if ( current.length == 0 ) current = $('div.slideshowRotator ul li:first');
}

function setGlobalNext() {		
	//Get next image, when it reaches the end, rotate it back to the first image
	next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.slideshowRotator ul li:first') :current.next()) : $('div.slideshowRotator ul li:first'));
}

function setNextToPrev() {
	if(current.prevAll().length > 0) {
		next = current.prev();
	} else {
		next = $('div.slideshowRotator ul li:eq(' + current.nextAll().length + ')');
	}
}

function goNext() {	
	setGlobalCurrent();
  	setGlobalNext()
	doTransform();
};

function goPrev() {	
	setGlobalCurrent();
  	setNextToPrev()
	doTransform();
};

function doTransform(){
	
	// establish current, incase not already set
	setGlobalCurrent();
	
	// set comment to that of next image to be displayed alt
	$("#productDetailPicComment").text(next.children("img").attr("alt"));
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1500);

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

}

function jumpToNext() {
	if (!$(next).is(':animated')) { // if anim running, don't do it
		// toggle play / pause
		$('#ssPause').hide();
		$('#ssPlay').show();
		window.clearInterval(rotateIntervalID);
		goNext()
	}
}

function jumpToPrev() {
	if (!$(next).is(':animated')) { // if anim running, don't do it
		// toggle play / pause
		$('#ssPause').hide();
		$('#ssPlay').show();
		window.clearInterval(rotateIntervalID);
		goPrev()
	}
}

function jumpToImage(imageArrayID) {
	
	if (!$(next).is(':animated')) { // if anim running, don't do it
	
		//next.stop(true,true); this would kill it if it WAS running (for ref)
		// toggle play / pause
		$('#ssPause').hide();
		$('#ssPlay').show();
		
		// establish current, incase not already set
		setGlobalCurrent();
		
		window.clearInterval(rotateIntervalID);
		next = $('div.slideshowRotator ul li:eq(' + imageArrayID + ')');
		if (imageArrayID != current.prevAll().length) { // check not already on this item, by counting preceeding elements
			doTransform();
		}
	}
}

function slideshowPlay() {
	if (!$(next).is(':animated')) { // if anim running, don't do it
		// toggle play / pause
		$('#ssPause').show();
		$('#ssPlay').hide();
		// move straight to next
		goNext()
		// timer
		startTimedRotation();
	}
}

function slideshowPause() {
	if (!$(next).is(':animated')) { // if anim running, don't do it
		// toggle play / pause
		$('#ssPause').hide();
		$('#ssPlay').show();
		// timer stop
		stopTimedRotation();
	}
}


$(document).ready(function() {		
	//Load the slideshow
	theRotator();
	$('div.slideshowRotator').fadeIn(1500);
    $('div.slideshowRotator ul li').fadeIn(1500); // tweek for IE
});