$(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;

	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.
			*/
			
			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);
	
	$('#phonecarousel .previous').click(function(){
		// 360/cnt lets us distribute the phones evenly in a circle
		rotate(-10,360/cnt);
	});
	
	$('#phonecarousel .next').click(function(){
		rotate(10,360/cnt);
	});
	$('#phonecarousel .previous,#phonecarousel .next').hover(function(){
		clearinterval(timer);
		},function(){
		timer=setinterval(function(){rotate(10,360/cnt);},4000);
		});
	var timer=null;
	
		timer=setinterval(function(){rotate(10,360/cnt);},4000);
});