$("document").ready(function() {

/*
Animated machine by Julien Thiennot for WeCook.fr, 2011.
*/

var MachineOn=false;


$("#machine").hover(
  function () {
    MachineOn=true;
  }, 
  function () {
    MachineOn=false;
  }
);


var MachineStepI=0;

function MachineStep()
{
if (MachineStepI==0) MoveBubbles();
else if (MachineStepI==1) MoveMenus();
else if (MachineStepI==2) MoveWaveScreen();
MachineStepI++;
if (MachineStepI>2) MachineStepI=0;
}

//régule les fps
setInterval(MachineStep,1000/90);


/* Helper function; pretty much the same thing as jQuery $("#what) */
function l(what)
{
	return document.getElementById(what);
}


/* Move the pulse wave on the machine's screen */

var WaveScreenT=0;
var WaveRate=0.5;
function MoveWaveScreen()
{
	if (MachineOn){
		l("WaveScreen").style.backgroundPosition=Math.floor(97-WaveScreenT)+"px top";
		WaveScreenT-=WaveRate*4;
		if (WaveScreenT<0) WaveScreenT=97;
		}
		l("ChemBubbles").style.opacity=WaveRate*MachineOn;
		
}



/*
Bubbles particle system :
This generates an array of small bubbles blowing from a vent, which proceed to slowly fly up and fade out.
This adds 30 <divs> to the markup. The system reuses the same bubbles over and over, so you don't have to worry about new DOM elements crowding the page.
You will need a <div> with the id "bubbles", and an absolute position; this will be the origin of the bubbles.
You will also need a 48*16 picture with 3 bubbles in it. CSS cuts up the image and uses one of the bubbles at random.
*/

var Bubbles=[];
var BubblesText="";
var BubblesT=0;
var BubbleRate=0.5;

function Bubble()
{
	this.x=0;
	this.y=0;
	this.xd=0;
	this.yd=0;
	this.l=-1;
	this.id=Bubbles.length;
	BubblesText+='<div id="bubble-'+this.id+'" style="left:0px;top:0px;" class="machineBubble"></div>';
	Bubbles.push(this);
}


//generate some bubbles (add more to make the flow of bubbles fluffier !)
for (var i=0;i<30;i++)
{new Bubble();}
l("bubbles").innerHTML=BubblesText;


function MoveBubbles() //condenser la fonction ? 
{
	for (var i in Bubbles)
	{
		var ThisBubble=l("bubble-"+i);
		if (Bubbles[i].l==-1 && MachineOn)
		{
			if (Math.random()*100<(BubbleRate) && Math.sin(BubblesT*0.03)>(-BubbleRate*2+1))
			{
				Bubbles[i].x=0;
				Bubbles[i].y=0;
				Bubbles[i].xd=2+Math.random()*2;
				Bubbles[i].yd=2+Math.random()*2;
				Bubbles[i].l=0;
				//pick one of the 3 bubbles using CSS sprites
				ThisBubble.style.backgroundPosition="-"+(Math.floor(Math.random()*3)*16)+"px 0px";
			}
		}
		if (Bubbles[i].l>-1)
		{
			//move the bubbles about
			Bubbles[i].xd*=0.97;
			Bubbles[i].yd*=0.97;
			if (Bubbles[i].yd>-1) Bubbles[i].yd-=0.05-(Math.random()*2-1)*0.01;
			Bubbles[i].xd+=Math.sin(Bubbles[i].l*0.05+Bubbles[i].id*12)*0.03+(Math.random()*2-1)*0.05;
			Bubbles[i].x+=Bubbles[i].xd;
			Bubbles[i].y+=Bubbles[i].yd;
			Bubbles[i].l++;
			Bubbles[i].l+=Math.random();
			if (Bubbles[i].l>300) Bubbles[i].l=-1;
			//reflect the changes in position and opacity in the style
			$("#bubble-"+i).css("left",Bubbles[i].x);
			$("#bubble-"+i).css("top",Bubbles[i].y);
			ThisBubble.style.opacity=Math.min(1,Bubbles[i].l/20)*Math.min(1,(1-(Bubbles[i].l-200)/100));
		}
	}

/* Move the pointer on the machine's meter */
var Rot=Math.round(BubbleRate*(1+Math.random()*0.1*MachineOn)*180-135);
$("#Pointer").css({
	'transform': 'rotate('+Rot+'deg)',
	'-moz-transform': 'rotate('+Rot+'deg)',
	'-o-transform': 'rotate('+Rot+'deg)',
	'-webkit-transform': 'rotate('+Rot+'deg)'
});

BubblesT++;
if (BubblesT>1000) BubblesT=0;
}







/*
The same... with tiny restaurant menus.
*/

var MenuItems=[];
var MenusText="";
var MenusT=0;//here the T var serves as a delay (when it hits 0, make a new menu)
var MenuRate=0.5;

function MenuItem()
{
	this.x=0;
	this.y=0;
	this.xd=0;
	this.yd=0;
	this.l=-1;
	this.id=MenuItems.length;

	MenusText+='<div id="menu-'+this.id+'" class="machineMenu"></div>';

	MenuItems.push(this);
}


//generate the 10 menus
for (var i=0;i<10;i++)
{new MenuItem();}
l("menus").innerHTML=MenusText;


function MoveMenus()
{
var ChurnedOne=false;

	for (var i in MenuItems)
	{
		var ThisMenu=l("menu-"+i);

		if (MenuItems[i].l==-1 && MachineOn)
		{
			if (MenusT<=0 && !ChurnedOne)
			{
				MenuItems[i].x=0;
				MenuItems[i].y=0;
				MenuItems[i].xd=1;
				MenuItems[i].yd=0;
				MenuItems[i].l=0;
				ChurnedOne=true;
				MenusT=16;
			}
		}

		if (MenuItems[i].l>-1)
		{
			//move the menus about
			if (MenuItems[i].x>112)
			{
				MenuItems[i].xd*=1.01;
				MenuItems[i].yd-=0.05;
				MenuItems[i].l++;
			}
			else
			{
			MenuItems[i].xd=MenuRate*2*MachineOn;
			MenuItems[i].l=20;
			}
			MenuItems[i].x+=MenuItems[i].xd;
			MenuItems[i].y+=MenuItems[i].yd;
			if (MenuItems[i].l>=70) MenuItems[i].l=-1;
			//reflect the changes in position and opacity in the style
			//ThisMenu.style.left=MenuItems[i].x;
			//ThisMenu.style.top=MenuItems[i].y;
			$("#menu-"+i).css("left",MenuItems[i].x);
			$("#menu-"+i).css("top",MenuItems[i].y);
			ThisMenu.style.opacity=Math.min(1,MenuItems[i].l/20)*Math.min(1,(1-(MenuItems[i].l-20)/50));
		}

	}


l("ConveyorBelt").style.backgroundPosition="0px "+(Math.round(MenusT/2*4)*12.25)+"px";


if (MenusT>0 && MachineOn) MenusT-=MenuRate;
}




//Init all 3 sliders
var SlidersText="";
for (var i=0;i<3;i++)
{
SlidersText+='<div style="position:absolute;left:'+(134+12*i)+'px;top:'+(177+2*i)+'px;width:5px;z-index:13;" id="slider-'+i+'" class="slider"></div>';
}
l("machineSliders").innerHTML=SlidersText;
for (var i=0;i<3;i++)
{
$("#slider-"+i ).slider({
			orientation: "vertical"
		});
}


//The "bubbles and meter" slider
$( "#slider-0" ).slider( "option", "value", BubbleRate*100 );
$( "#slider-0" ).bind( "slide", function(event, ui) {
BubbleRate=ui.value/100;
});

//The "pulsewave screen" slider
$( "#slider-1" ).slider( "option", "value", WaveRate*100 );
$( "#slider-1" ).bind( "slide", function(event, ui) {
WaveRate=ui.value/100;
});

//The "menus conveyor belt" slider
$( "#slider-2" ).slider( "option", "value", MenuRate*100 );
$( "#slider-2" ).bind( "slide", function(event, ui) {
MenuRate=ui.value/100;
});


    var DriftBigCloudsT=0;
    function DriftBigClouds()
    {
        document.getElementById("BigClouds").style.backgroundPosition=Math.floor(DriftBigCloudsT)+"px top";
        DriftBigCloudsT++;
        if (DriftBigCloudsT>1024) DriftBigCloudsT=0;
    }
    setInterval(DriftBigClouds,1024/10);

});