$(document).ready(function() {
	// Let the magic begin
	var upperlimit = $(".carousel:last").attr("id");
	upperlimit = upperlimit.replace("carousel","");
	var goOnAhead = false;
	
	// hide all the <li>
	$(".carousel").hide();
	
	// start the autorotate
	$("#carousel1").show();
	autoRotate(2);
	
	// looking for the click
	$(".carousellink").click(function(){
		showSlide($(this).attr("name"));
	});	
	
	// restart the slideshow
	$(".carousel").mouseenter(function(){
		stopTheShow();
	});
	
	$(".carousel").mouseleave(function(){
		restartTheShow();
	});
	
	// stop the show
	function stopTheShow() {
		$().stopTime('carousel');
	}
	
	function restartTheShow() {
		autoRotate(i);
	}
	
	// the function that actually does the animation		
	function showSlide(slideNum) {
		// hide the current image
		$(".carousel").hide();
		// fade in the new image
		$("#carousel" + slideNum).fadeIn("1000");
	}
	
	function autoRotate(startNumber) {
		i = startNumber
		
		// look for mouseover, to stop the animation
		$().everyTime(4500, 'carousel', function(){
			if (goOnAhead = true) { 
				showSlide(i)
		
				if (i!=upperlimit){
					i++;
				}
				else {
					// restart the program from the beginning
					autoRotate(1);
					return false;					
				}
			}
			return currenti = i
		});
	}
});