$(document).ready(function(){

	var deg=0;

	/* Storing all the images into a variable */

	var images	= $('#stage img').removeClass('default').addClass('animationReady');
	var dim		= { width:images.width(),height:images.height()};
	
	var cnt = images.length;
	
	/* Finding the centers of the animation container: */
	var centerX = $('#stage').width()/2;
	var centerY = $('#stage').height()/2 - dim.height/2;
	
	var varCounter = 0;

	function rotate(step,total){
		// This function loops through all the phone images, and rotates them
		// with "step" degrees (10 in this implementation) until total has reached 0
	
		/* Increment the degrees: */
		deg += step;		
		
		var eSin,eCos,newWidth,newHeight,q;
		
		/* Loop through all the images: */
		for(var i=0;i<cnt;i++){
			
			/* Calculate the sine and cosine for the i-th image */
			
			q = ((360/cnt)*i+deg)*Math.PI/180;
			eSin		= Math.sin(q);
			eCos		= Math.cos(q);
			
			/*
			/	With the sine value, we can calculate the vertical movement, and the cosine 
			/	will give us the horizontal movement.
			*/
			
			q = (0.6+eSin*0.4);
			newWidth	= q*dim.width;
			newHeight	= q*dim.height;
			
			/*
			/	We are using the calculated sine value (which is in the range of -1 to 1)
			/	to calculate the opacity and z-index. The front image has a sine value
			/	of 1, while the backmost one has a sine value of -1.
			*/
			
			// eq() extracts the image at the i-th position:

			images.eq(i).css({
				top			: centerY+15*eSin,
				left		: centerX+200*eCos,
				opacity		: 0.8+eSin*0.2,
				marginLeft	: -newWidth/2,
				zIndex		: Math.round(80+eSin*20)
			}).width(newWidth).height(newHeight);
		}

		total -= Math.abs(step);
		if(total<=0) 
		return false;
		
		// Setting the function to be run again in 40 seconds (equals to 25 frames per second):
		setTimeout(function(){rotate(step,total)},40);
		
	
	}	
	
	// Running the animation once at load time (and moving the iPhone into view):
	rotate(-10,360/cnt);
	
	var refreshIntervalId = setInterval(function(){rotate(-10,360/cnt)},2000);
	
	/*setTimeout(function(){stopRoate()},14000);
	
	function stopRoate ()
	{
  		clearInterval ( refreshIntervalId );
	}
	*/
	
	function dis()
	{
  		document.getElementById('stage').style.visibility = "hidden";
		document.getElementById('phoneCarousel').style.backgroundImage = "url(images/header01.png)";
		clearTimeout ( refreshTimeoutId );
	}


	var refreshTimeoutId = setTimeout(function(){dis()},15000);

	$('#phoneCarousel .previous').click(function(){
		// 360/cnt lets us distribute the phones evenly in a circle
		//rotate(10,360/cnt);	
		document.getElementById('stage').style.visibility = "visible";
		document.getElementById('phoneCarousel').style.backgroundImage = "";
		setTimeout(function(){dis()},15000);
	});
	
	$('#phoneCarousel .next').click(function(){
		//rotate(-10,360/cnt);
		document.getElementById('stage').style.visibility = "visible";
		document.getElementById('phoneCarousel').style.backgroundImage = "";
		setTimeout(function(){dis()},15000);
	});
});