var play = true;
// Delay between animations in milliseconds
var animationDelay = "5000";
//Delay during fadein/fadeout
var fadeDelay = "1000";
var timeout = setTimeout(animationDelay);
$(document).ready(function () {
  
	$("#centerpiece .story").hide();
	$("#centerpiece .story").first().show();	
	$("#centerpiece .story").first().addClass("active");
  	$("#centerpiece .control").first().addClass("active");

	$(document).everyTime(7000,function(i) {
	  
	     var id = $("#centerpiece .active").attr('id');
	     id = parseInt(id);
	     id = (id + 1);
	     if (id === 4){
	      id = 0; 
	     }  
	     $("#centerpiece .story").fadeOut(fadeDelay).delay(100);

	     $("#centerpiece .story:eq(" + id + ")").fadeIn(fadeDelay);
	     $("#centerpiece .story").removeClass("active");
	     $("#centerpiece .control").removeClass("active");

	      
	     $("#centerpiece .story:eq(" + id + ")").addClass("active");
	     $("#centerpiece .control:eq(" + id + ")").addClass("active");

	});
	
	$("#centerpiece .controls li a").click(function(e) {
		e.preventDefault();	     
		var id = $(this).attr('id');
		id = parseInt(id);
 
		
	     $("#centerpiece .story").fadeOut(fadeDelay).delay(100);

	     $("#centerpiece .story:eq(" + id + ")").fadeIn(fadeDelay);
		$("#centerpiece .story").removeClass("active");
		$("#centerpiece .control").removeClass("active");

		  
		$("#centerpiece .story:eq(" + id + ")").addClass("active");
		$("#centerpiece .control:eq(" + id + ")").addClass("active");
		


	});
	
});
// 	$("#centerpiece .story").hide();
// 	$("#centerpiece .story").first().show();
// 	$("#centerpiece .controls li").first().addClass("active");
// 	ShowCenterpiece(1);
// 	var controls = $("#centerpiece .controls li a"); 
// 	controls.click(function (e) {
// 		e.preventDefault();
// 		var numclick = $(this).index();
// 		alert(numclick);
// // 		var currentIndex = controls.index($(this)) + 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 .story").fadeOut(fadeDelay);
//     $("#centerpiece .story:eq(" + pos + ")").fadeIn(fadeDelay,function(){	
// 	Animate();
//     });
// }