// JavaScript Document
var swapTime = 5000;
var fadeTime = 2000;
var imageCount = 4;
var lastImage =  0;
var imageIndex = 0;
var fadeSteps = 60;
var hoverInProgress = false;
var animationInProgress = false;
var swapTimeout;

function swapImage()
{
	/* Mutex A */
	if(hoverInProgress) return;
	animationInProgress = true;
	/* End A */
	/*
	//fade out currently showing image
	var slowly = new Slowly(fadeTime, fadeSteps);
	slowly.fade("image_"+imageIndex, function() {});
	
	lastImage = imageIndex;
	imageIndex++;
	if(imageIndex >= imageCount) {
		imageIndex = 0;	
	}
	
	//fade-in next image
	var slowly2 = new Slowly(fadeTime, fadeSteps);
	slowly2.fadeIn("image_"+imageIndex, function() { animationInProgress = false; swapTimeout = setTimeout("swapImage()", swapTime);} );
	*/
	
	lastImage = imageIndex;
	imageIndex++;
	if(imageIndex >= imageCount) {
		imageIndex = 0;	
	}
	
	var slowly = new Slowly(fadeTime, fadeSteps);
	slowly.fade("image_"+lastImage, "image_"+imageIndex, function() { animationInProgress = false; swapTimeout = setTimeout("swapImage()", swapTime);} );
	
	//swap the thumbnail half-way through
	//fading images
	setTimeout("document.getElementById('opaque').id = 'thumb_"+lastImage+"'; document.getElementById('thumb_"+imageIndex+"').id = 'opaque';", (fadeTime/2));	
}

function hover(imageID)
{
	/* Mutex A  */
	if(animationInProgress) return;
	hoverInProgress = true;
	/* End A */
	
	clearTimeout(swapTimeout);
	document.getElementById("opaque").id = "thumb_"+imageIndex;
	
	document.getElementById("thumb_"+imageID).id = "opaque";
	//"opacity:1.0; filter:alpha(opacity=100);"
	document.getElementById("image_"+imageIndex).style.opacity = "0.0";
	document.getElementById("image_"+imageIndex).style.filter = "alpha(opacity=0)";
	
	document.getElementById("image_"+imageID).style.opacity = "1.0";
	document.getElementById("image_"+imageID).style.filter = "alpha(opacity=100)";
}

function endHover(imageID)
{
	if(hoverInProgress) {
		clearTimeout(swapTimeout);
		hoverInProgress = false;
		imageIndex = imageID; //start the animation by fading out the image we've shown.
		swapTimeout = setTimeout("swapImage()", swapTime);
	}
}

/*
function finishSwapImage()
{
	var oldImage = document.getElementById("image_"+imageIndex);
	oldImage.style.display = "none";
	imageIndex++;
	if(imageIndex  >= imageCount) imageIndex = 0;
	
	var newImage = document.getElementById("image_"+imageIndex);
	newImage.style.display = "";
	
}
*/