var play = true;
// Delay between animations in milliseconds
var animationDelay = "7000";
//Delay during fadein/fadeout
var fadeDelay = "2000";
var timeout = setTimeout("7000");

$(document).ready(function () {
	$("#centerpiece .story").hide();
	$("#centerpiece .story").first().show();
	$("#centerpiece .controls li").first().addClass("active");
	ShowCenterpieceStart(1);
	var controls = $("#centerpiece .controls li a"); 
    controls.click(function (e) {
        e.preventDefault();
		var currentIndex = controls.index($(this)) + 1;
		$("#centerpiece .controls li img.a").css({"opacity": "1"});
		// Set this to true if you want the click to stop the animation
		//play = false;
		ShowCenterpiece(currentIndex);
    });
});


function Animate() {
	var num = $(".story").index($(".story:visible")) + 1;
    if (play) {
		clearTimeout(timeout);
		timeout = setTimeout(function () {
            if (num >= $("#centerpiece .story").length) num = 0;
            ShowCenterpiece(num + 1);
        }, animationDelay);
	}
}
function ShowCenterpiece(num) {
    var pos = (num - 1);
	
    $("#centerpiece .controls li").removeClass("active");
	$("#centerpiece .controls li img.a").css({"opacity": "1"});
	
	$("#centerpiece .controls li img.a").hover(
	function() {
	$(this).stop().animate({"opacity": "0"}, "slow");
	},
	function() {
	$(this).stop().animate({"opacity": "1"}, "slow");
	});
	
	$("#centerpiece .controls li:eq(" + pos + ")").addClass("active");
	$("#centerpiece .controls li img.a:eq(" + pos + ")").unbind('mouseenter mouseleave');
	$("#centerpiece .controls li img.a:eq(" + pos + ")").css({"opacity": "0"});
	$("#centerpiece .story").fadeOut("1000");
    $("#centerpiece .story:eq(" + pos + ")").fadeIn("1000",function(){	
		Animate();
	});
}

function ShowCenterpieceStart(num) {
    var pos = (num - 1);
	
    $("#centerpiece .controls li").removeClass("active");
		
	$("#centerpiece .controls li img.a").hover(
	function() {
	$(this).stop().animate({"opacity": "0"}, "slow");
	},
	function() {
	$(this).stop().animate({"opacity": "1"}, "slow");
	});
	
	$("#centerpiece .controls li:eq(" + pos + ")").addClass("active");
	$("#centerpiece .controls li img.a:eq(" + pos + ")").unbind('mouseenter mouseleave');
	$("#centerpiece .controls li img.a:eq(" + pos + ")").css({"opacity": "0"});
	//$("#centerpiece .story").fadeOut("1000");
    $("#centerpiece .story:eq(" + pos + ")").fadeIn("1000",function(){	
		Animate();
	});
}