$(function() {

	var ROTATION_TIME  = 4000;		/* Time to rotate to the next image. */
	var ANIMATION_TIME = 1000;		/* Time for an image to fade in / out. */
	var TOTAL_IMAGES   = 4;			/* Number of images to rotate. 
									    Note: you should have the same number of control. */

	var i = 0;
	var arrImg = $("#showcase img");
	$(arrImg[i]).show();
	
	var goNext = true;	
	$(".thumbnail a").mouseover(function() {
		goNext = false;
		$("#showcase img, #showcase img:animated").hide();
		var id = $(this).attr("id").split("_")[1];
		$("#img_" + id).show();
	});
	
	var myTimer;
	rotate();
	
	function rotate() {
		myTimer = setInterval(function() {
			if (!goNext) {
				clearInterval(myTimer);
			}
			else {
				$(arrImg[i]).fadeOut(ANIMATION_TIME, function() {
					i = (i + 1) % TOTAL_IMAGES;
					$(arrImg[i]).fadeIn(ANIMATION_TIME);
				});
			}
	   }, ROTATION_TIME);
	}
});