$(document).ready(function(){
	
	// Define variables
	var context;
	var runBalls;
	
	var mouseX;
	var mouseY;
	var mouseVX;
	var mouseVY;
	var originalX;
	var originalY;
	
	var activeClick = true;
	
	var elastic = 0.87;
	var boom = true;
	
	var canvasWidth = $('body').width();
	var canvasHeight = $(document).height();
	
	var numBalls = 600;
	var balls = [];	
	
	var activeMap = new Boolean();	
	var activeBalls = new Boolean();
	
	// Create random number function
	$random = function randomFromTo(from, to){
     return Math.floor(Math.random() * (to - from + 1) + from);
  }
		
	// Create init balls functions
	$createBalls = function(){
		
		// Set interval for run		
		runBalls = setInterval($run, 1000/30);
		activeBalls = true;
		
		// Create the canvas context
		context  = $('#playground')[0].getContext("2d");
		
		// Set the canvas to fill the entire page
		context.canvas.width  = canvasWidth;
		context.canvas.height = canvasHeight;
	
		// Assign event to mouse move and click
		
		// For each ball to create
		var i=0;
		for (i=0;i<=numBalls;i++)
		{
			
			// Create a new ball
			var ball = new $ball;			
			balls[i] = ball;
			
		}
		
		
		mouseX = originalX = canvasWidth * 0.5;
		mouseY = originalY = canvasHeight * 0.5;
		
	}
	
	// Create init balls functions
	$destroyBalls = function(){		
    clearInterval(runBalls);
		activeBalls = false;
		context.clearRect(0, 0, canvasWidth, canvasHeight);
	}
	
	// Create the run function to move balls	
	$run = function(){
		
		//context.globalCompositeOperation = "source-over";
		
		context.clearRect(0, 0, canvasWidth, canvasHeight);
		
		// If the user has "switched on" the ball movement
				
			mouseVX = mouseX - originalX;
			mouseVY = mouseY - originalY;
			originalX = mouseX;
			originalY = mouseY;
			var Mrnd = Math.random;
			var Mabs = Math.abs;
			
			// Define number of balls as i
			var i = numBalls;
			
			// For each ball
			while ( i-- ){
				
				// Assign correct ball
				var ball = balls[i];
				var x  = ball.x;
				var y  = ball.y;
				var vX = ball.vX;
				var vY = ball.vY;
				
				var dX = x - mouseX;
				var dY = y - mouseY; 
				var d  = Math.sqrt( dX * dX + dY * dY ) || 0.001;
				dX /= d;
				dY /= d;
				
				var toDist   = canvasWidth * 0.16;
				var stirDist = canvasWidth * 0.125;
				var blowDist = canvasWidth * 0.1;
				
				if ( boom ){
					if ( d < blowDist ){
						var blowAcc = ( 1 - ( d / blowDist ) ) * 14;
						vX += dX * blowAcc + 0.5 - Mrnd();
						vY += dY * blowAcc + 0.5 - Mrnd();
					}
				}
				
				if ( d < toDist ){
					var toAcc = ( 1 - ( d / toDist ) ) * canvasWidth * 0.0014;
					vX -= dX * toAcc;
					vY -= dY * toAcc;			
				}	
				
				if ( d < stirDist ){
					var mAcc = ( 1 - ( d / stirDist ) ) * canvasWidth * 0.00026;
					vX += mouseVX * mAcc;
					vY += mouseVY * mAcc;			
				}
				
				vX *= elastic;
				vY *= elastic;
				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 > canvasWidth ){
					nextX = canvasWidth;
					vX *= -1;
				}
				else if ( nextX < 0 ){
					nextX = 0;
					vX *= -1;
				}
				
				if ( nextY > canvasHeight ){
					nextY = canvasHeight;
					vY *= -1;
				}
				else if ( nextY < 0 ){
					nextY = 0;
					vY *= -1;
				}
				
				ball.vX = vX;
				ball.vY = vY;
				ball.x  = nextX;
				ball.y  = nextY;
				
				
				context.fillStyle = ball.color;
				context.beginPath();
				context.arc(nextX  , nextY, ball.size, 0, Math.PI*2, true);
				context.closePath();
				context.fill();
				
				
			}
		
		
	
	}
	
	// Create on mouse move function
	$(document).mousemove(function(ev){
		mouseX = ev.clientX;
		mouseY = ev.clientY;
	});
	
	
	// Create on mouse click function
	$(document).click(function(){
		
		// Set whether movement is turned on or off
		boom = boom ? false : true;
		
	});
	
	// Create ball creation function
	$ball = function(){
		
		this.size = $random(2,15);
		this.y  = $random(0, $(document).height());
		this.x = $random(0, $('body').width());		
		this.color = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
		this.vX  = 0;
		this.vY  = 0;
		
	}
	
	$('.logoContainer').toggle(function(){
		
		// Run the init function	
		if(activeMap == false){
			
			$createBalls();
			$('#audioLoop')[0].play();
			$('#mute').fadeIn();
			
		}
		
			
	},function(){
			
		if(activeMap == false){
			
			// Run the init function					
			$destroyBalls();
			$('#audioLoop')[0].pause();
			$('#mute').fadeOut();		
	
		}
		
	});
		
	$(window).resize(function() {
	  canvasWidth = $('body').width();
		canvasHeight = $(document).height();
		context.canvas.width  = canvasWidth;
		context.canvas.height = canvasHeight;		
	});
	
	$('#mute').toggle(function(){
		$('#audioLoop')[0].muted = true;
		$(this).css('background-position', '0 -20px');
	}, function(){
		$('#audioLoop')[0].muted = false;	
		$(this).css('background-position', '0 0');	
	});
	
	$('#audioLoop')[0].addEventListener('ended', function() {
			this.currentTime = 0;
			this.play();
	}, false);
	
	$('.map').toggle(function(){ 
		activeMap = true;
		if(activeBalls == true){
   	 clearInterval(runBalls);
		}
	},function(){
		activeMap = false;
		if(activeBalls == true){
			runBalls = setInterval($run, 1000/30);
		}
	});
	

});