var K_ANIM_START_DELAY = 2000; // milliseconds
var K_ANIM_FADE_TIME = 500;
var K_ANIM_MOVE_START = 0;
var K_ANIM_SWAP_START = 1;
var K_ANIM_END = 3;

$(document).ready(function (){
  	var carouselPosition = 1;
  	var carouselAnimating = false;

	// set the animation going when the page is finished loading completely
	$(window).load( function() { 
		$(".carouselOnLoadHealth").fadeIn("slow");			
		$(".carouselOnLoadCleaning").fadeIn("slow");
		$(".carouselOnLoadFood").fadeIn("slow");
		
		window.setTimeout( function() { 
			animatePanels( K_ANIM_MOVE_START );
			}, K_ANIM_START_DELAY );
	});
		
	$('#carousel a').click(function(event){
		//This function should follow the link if it's the active slot, or
		//it should rotate if it's not the active one. It works, but it's
		//probably allowing a click spamming bug.
		carouselPosition = $(this).attr('rel');
		$('#sliderContent .cover').animate( 
			{left:-1160*(parseInt(carouselPosition)-1 ) }, /*----- Width of div slideWrapper (here 160) ------ */
			1000,
			'' 
		);  
		$('#carousel a').each(function(){
		$(this).removeClass('active');
			if($(this).hasClass('carousel'+carouselPosition)){
				$(this).addClass('active')}
		});
	});	

	// Rotate carousel in sync with slider contents
	$('.carouselArrow').click(function(event){
		event.preventDefault();
		if(carouselAnimating) {
			return;
		}
		carouselAnimating = true;
		spinDirection = $(this).attr('id');
		if (spinDirection == "carouselArrowRight") {
			if (carouselPosition == 1) {
				carouselPosition = 3;				
			} else {
				carouselPosition = carouselPosition - 1;
			} 
		} else if (spinDirection == "carouselArrowLeft") {
			if (carouselPosition == 3) {
				carouselPosition = 1;				
			} else {
				carouselPosition = carouselPosition + 1;
			} 
		}
		$('#sliderContent .cover').animate(
			{left:-1160*(parseInt(carouselPosition)-1 ) },
			1000,
			'',
			function() { 
				carouselAnimating = false;
			});  
		$('.carouselArrow').each(function(){
		$(".carouselList li a").removeClass('active');
			if($(".carouselList li a").hasClass('carousel'+carouselPosition)){
				$(".carouselList li a").addClass('active')}
		});
	});		
});  

/**
	animatePanels performs the different steps of the panel animation.  
	
	@param state - (int)  One of the constants defined above that describes which state the animation is in.
*/
function animatePanels( state ) {
	switch( state ) {
		case K_ANIM_MOVE_START :
			$("#panel_health").animate( { left: '-=33', top: '+=52', width: '+=43', height: '+=31' }, 1000  );
			$("#panel_cleaning").animate( { left: '-=99', top: '-=4', width: '+=193', height: '+=142' }, 1000 );
			$("#panel_food").animate( { left: '-=16', top: '+=52', width: '+=45', height: '+=31' }, 1000, '', function() { animatePanels( K_ANIM_SWAP_START ); } );
			//Hide starting headline
			$( "#mainMessageTextStart" ).fadeOut(1000);
		break;
		case K_ANIM_SWAP_START : 
			// now that the indiv static panels are in position, swap between the panels and the turntable.
			// fade out panels, fade in turntable.
			$("#panel_health").fadeTo( 300, 0 );
			$("#panel_food").fadeTo( 300, 0 );

			//Turn the panels into a roundabout	
			$('ol.carouselList').roundabout({
				duration: 1000, //duration of animation switching active slot
				minScale: 0.62, //non-active items are scaled by this factor
				btnNext: '#carouselArrowLeft',
				btnPrev: '#carouselArrowRight'		
			});
			//Show the roundabout and the arrows
			$("#turntable").css("visibility","visible");
			$("#carouselArrowLeft").css("visibility","visible");
			$("#carouselArrowRight").css("visibility","visible");
			// when fading is complete, call this function with next state.
			window.setTimeout( function() { 
  				animatePanels( K_ANIM_END );
  			}, K_ANIM_FADE_TIME );
		break;
		case K_ANIM_END :
			// now that the swap is done, hide the panels so they don't receive any clicks.
			$( "#threePanels" ).hide();
		break;
	}
} // animatePanels