﻿$(document).ready(function(){
	var deg=0;

	/* Storing all the images into a variable */

	var images	= $('#stage div.lnk_img').addClass('animationReady');
	var dim		= { width:images.find('img').width(),height:images.find('img').height(), font_size: parseInt(images.css('font-size'))};
	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,fontSize,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);
                        if(eSin==1){
                            //images.eq(i).removeAttr('onclick');
                            images.eq(i).attr('id','current');
                        } else {
                            //images.eq(i).attr('onclick','return false');
                            images.eq(i).removeAttr('id');
                        }
			/*
			/	With the sine value, we can calculate the vertical movement, and the cosine 
			/	will give us the horizontal movement.
			*/
			
			q = (0.8+eSin*0.3);
			//newWidth	= q*dim.width;
			newWidth	= dim.width;
			//newHeight	= q*dim.height;
			newHeight	= dim.height;
			//fontSize       =  (q+0.3)*dim.font_size;
			fontSize       =  dim.font_size;
			/*
			/	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+60*eSin,
				left		: centerX+300*eCos,
				marginLeft	: -(newWidth)/2,
				zIndex		: Math.round(80+eSin*20),
				//fontSize       : fontSize
			});
			images.eq(i).find('.lnk_img').css({
				opacity		: 0.8+eSin*0.2});
			//images.eq(i).find('img').width(newWidth).height(newHeight);	
			images.eq(i).find('span').width(newWidth);
                        images.eq(i).find('a').css({opacity:1});
			if(0.8+eSin*0.2 < 0.9){
				
				$(images.eq(i).find('img')[0]).attr('src', $(images.eq(i).find('img')[0]).attr('data-blur'));
				
			}else{
				//console.log($(images.eq(i).find('img')[0]).attr('src'))
				$(images.eq(i).find('img')[0]).attr('src', $(images.eq(i).find('img')[0]).attr('data-normal'));
			}
                        
		}
                
		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+10);
	
	$('#phoneCarousel .prev').click(function(){
		// 360/cnt lets us distribute the phones evenly in a circle
		rotate(-9,360/cnt);
	});
	
	$('#phoneCarousel .next').click(function(){
		rotate(9,360/cnt);
	});

	window.setInterval(function(){
		$('#phoneCarousel .next').trigger('click');
	}, 7000)
});

function getRandomInt(min, max){
  return Math.floor(Math.random() * (max - min + 1)) + min;
}


