/**
*   Liquid particles canvas experiment
*   ©2010 spielzeugz.de 
* 	Custom edit by LARTCRAFT
*/
var canvasW =  window.innerWidth;
var canvasH =	window.innerHeight;
var follower =  $("flow");
var numMovers   = 0;

function BuildLiquid() {
	
	var PI_2        = Math.PI * 2;

	switch(platform) {
		case 'iPad':
			numMovers = 900;
		break;	
		case 'iPhone':
			numMovers = 400;
		break;
		case 'iPod':
			numMovers = 400;
		break;
		default:
			numMovers  = 2000;	
		break;
	}
	
	var friction    = 0.985;
	var movers      = [];
		
	var canvas;
	var ctx;
	var canvasDiv;
	var outerDiv;
	var mouseX;
	var mouseY;
	var mouseVX;
	var mouseVY;
	var prevMouseX;
	var prevMouseY;

	function init(){
		
		canvas = document.getElementById("mainCanvas");
		
		if ( canvas.getContext ){
			setup();
			moveFollower();
			setInterval(mover , 33 );
			setInterval(moveFollower , 4000);
		}
		else {
			randomBackground();
		}
	}
	   
	function setup(){
		
		outerDiv  = document.getElementById("outer");
		canvasDiv = document.getElementById("canvasContainer");
		ctx       = canvas.getContext("2d");
		
		var i = numMovers;
		while ( i-- ){
			var m = new Mover();
			m.x   = canvasW * 0.5;
			m.y   = canvasH * 0.5;
			m.vX  = Math.cos(i) * Math.random() * 34;
			m.vY  = Math.sin(i) * Math.random() * 34;
			movers[i] = m;
		}
		
		mouseX = prevMouseX = canvasW * 0.5;
		mouseY = prevMouseY = canvasH * 0.5;
		
	}

	function mover(){
		
		ctx.globalCompositeOperation = "source-over";
		//ctx.fillStyle = "rgba(8,8,12,1)";
		
		// de kleur van het vlak (achtergrond)
		ctx.fillStyle = "rgba(255,255,255,1)";
		
		// vlak waar de animatie zich in gaat bewegen
		ctx.fillRect( 0 , 0 , canvasW , canvasH);
		//ctx.globalCompositeOperation = "lighter";
		
		mouseVX    = mouseX - prevMouseX;
		mouseVY    = mouseY - prevMouseY;
		prevMouseX = mouseX;
		prevMouseY = mouseY;
		
		var toDist   = canvasW * 0.86;
		var stirDist = canvasW * 0.125;
		var blowDist = canvasW * 0.09;
		
		var Mrnd = Math.random;
		var Mabs = Math.abs;
		
		var i = numMovers;
		while ( i-- ){
			var m  = movers[i];
			var x  = m.x;
			var y  = m.y;
			var vX = m.vX;
			var vY = m.vY;
			
			var dX = x - mouseX;
			var dY = y - mouseY; 
			var d  = Math.sqrt( dX * dX + dY * dY ) || 0.001;
			dX /= d;
			dY /= d;
			
			if ( d < blowDist ){
				var blowAcc = ( 1 - ( d / blowDist ) ) * 3;
				vX += dX * blowAcc + 0.5 - Mrnd();
				vY += dY * blowAcc + 0.5 - Mrnd();
			}
			
			if ( d < toDist ){
				var toAcc = ( 1 - ( d / toDist ) ) * canvasW * 0.0014;
				vX -= dX * toAcc;
				vY -= dY * toAcc;			
			}
			
			if ( d < stirDist ){
				var mAcc = ( 1 - ( d / stirDist ) ) * canvasW * 0.00026;
				vX += mouseVX * mAcc;
				vY += mouseVY * mAcc;			
			}
			
			vX *= friction;
			vY *= friction;
			
			var avgVX = Mabs( vX );
			var avgVY = Mabs( vY );
			var avgV  = ( avgVX + avgVY ) * 0.5;
			
			if( avgVX < .1 ) vX *= Mrnd() * 3;
			if( avgVY < .1 ) vY *= Mrnd() * 3;
			
			var sc = avgV * 0.45;
			sc = Math.max( Math.min( sc , 3.5 ) , 0.4 );
			
			var nextX = x + vX;
			var nextY = y + vY;
			
			if ( nextX > canvasW ){
				nextX = canvasW;
				vX *= -1;
			}
			else if ( nextX < 0 ){
				nextX = 0;
				vX *= -1;
			}
			
			if ( nextY > canvasH ){
				nextY = canvasH;
				vY *= -1;
			}
			else if ( nextY < 0 ){
				nextY = 0;
				vY *= -1;
			}
			
			m.vX = vX;
			m.vY = vY;
			m.x  = nextX;
			m.y  = nextY;
		
			ctx.fillStyle   = '#383838';
			ctx.lineWidth   = 1;
			
			ctx.beginPath();
			
			switch(platform) {
				case 'iPad':
					ctx.fillRect(nextX, nextY, 8, 1.5);
				break;	
				case 'iPhone':
					ctx.fillRect(nextX, nextY, 10, 2);
				break;
				case 'iPod':
					ctx.fillRect(nextX, nextY, 8, 1.5);
				break;
				default: 
					ctx.fillRect(nextX, nextY, 10, 1.5);
				break;
			}
			ctx.closePath();	
		}
	}


	function Mover(){
		this.color = "rgb(0,0,0)";
		this.y     = 0;
		this.x     = 0;
		this.vX    = 0;
		this.vY    = 0;
		this.size  = 1;
	}


	function rect( context , x , y , w , h ){
		context.beginPath();
		context.rect( x , y , w , h );
		context.closePath();
		context.fill();
	}


	function trace( str ){
		document.getElementById("output").innerHTML = str;
	}
	
	
	// function to follow a random path.
	// mouse will not ineteract at this point.
	function moveFollower() {
		var toLeft = Math.floor( Math.random()*canvasW);
		var toTop = Math.floor( Math.random()*canvasH);
		
		var inTime = 10000;
		
		$('#flow').animate({}, inTime, function() {
			mouseX = toLeft;
			mouseY = toTop;	
		 });
		
	}

	init();
	
};