var movableSquares = new Array;
var canvasHeight;
var canvasWidth; 
var ctx;
var animated = false;
var cnvObj;
var mouseX;
var mouseY;
var mousePresent = false;
var dimSumm = 0;

function updCancasObj() {
	cObj = $("#cnv1");
	cObj.attr({height: $(".co").height(), width: ($(".co").width()+ 25)});
	canvasWidth = cObj.width();
	canvasHeight = cObj.height();
}

$(window).load(init);

 function init() {
	cnvObj = $("#cnv1");
	var tc = cnvObj.get(0);
	if (tc.getContext == null) {
		return; 
	};
	$("#coll01").hide();
	updCancasObj()
	$(window).bind('resize', updCancasObj)
	ctx = tc.getContext('2d');	
	canvasWidth = cnvObj.width();
	canvasHeight = cnvObj.height();		
	var position = cnvObj.position();
	cnvObj.mousemove(function(e) {
		mouseX = e.pageX - cnvObj.offset().left;
		mouseY = e.pageY - position.top; 		
	});
	cnvObj.mouseenter(function(){
		startAnimate();
    }).mouseout(function(){
		prepareToStopAnimate();
    })
	movableSquaresInit();
}

	function movableSquaresInit() {

		movableSquares[0] = new roundedSquare(ctx,47,128,57,7, "#ffe4aa", 0.4, 1);
		
		movableSquares[1] = new roundedSquare(ctx,46,-36,57,7, "#ffe4aa", 0.5, 1);
		movableSquares[2] = new roundedSquare(ctx,39,40,39,5, "#ffe4aa", 0.5, 1);
		movableSquares[3] = new roundedSquare(ctx,32,60,33,4, "#ffe4aa", 0.5, 1);
		movableSquares[4] = new roundedSquare(ctx,41,64,18,4, "#ffe4aa", 0.5, 1);
		movableSquares[5] = new roundedSquare(ctx,81,132,18,3, "#ffe4aa", 0.5, 1);	
		movableSquares[6] = new roundedSquare(ctx,76,144,12,3, "#ffe4aa", 0.5, 1);
		movableSquares[7] = new roundedSquare(ctx,113,111,18,3, "#ffe4aa", 0.5, 1);
		movableSquares[8] = new roundedSquare(ctx,247,65,57,7, "#ffe4aa", 0.3, 1);
		movableSquares[9] = new roundedSquare(ctx,271,57,18,3, "#ffe4aa", 0.4, 1);
		movableSquares[10] = new roundedSquare(ctx,423,84,18,3, "#ffe4aa", 0.4, 1);
		
		movableSquares[11] = new roundedSquare(ctx,49,-5,18,3, "#ffe4aa", 0.5, 1);
		movableSquares[12] = new roundedSquare(ctx,58,-11,18,3, "#ffe4aa", 0.5, 1);
		
		movableSquares[13] = new roundedSquare(ctx,83,124,28,3, "#ffffff", 0.4, 1);
		movableSquares[14] = new roundedSquare(ctx,106,118,12,2, "#ffffff", 0.8, 1);
		movableSquares[15] = new roundedSquare(ctx,108,83,57,7, "#ffffff", 0.2, 1);
		
		movableSquares[16] = new roundedSquare(ctx,277,79,12,2, "#ffffff", 0.4, 1);
		movableSquares[17] = new roundedSquare(ctx,296,65,12,2, "#ffffff", 0.4, 1);
		movableSquares[18] = new roundedSquare(ctx,301,64,8,2, "#ffffff", 0.4, 1);
		movableSquares[19] = new roundedSquare(ctx,346,54,8,2, "#ffffff", 0.4, 1);
		movableSquares[20] = new roundedSquare(ctx,423,103,8,2, "#ffffff", 0.4, 1);
	 
	 
		movableSquares[21] = new roundedSquare(ctx,282,66,25,4, "#ffffff", 1, 0);
		movableSquares[22] = new roundedSquare(ctx,429,93,15,3, "#ffffff", 1, 0);
		movableSquares[23] = new roundedSquare(ctx,46,60,15,3, "#ffffff", 1, 0);
		movableSquares[24] = new roundedSquare(ctx,83,-5,15,3, "#ffffff", 1, 0);
		movableSquares[25] = new roundedSquare(ctx,89,-2,25,4, "#ffffff", 1, 0);
		movableSquares[26] = new roundedSquare(ctx,88,121,25,4, "#ffffff", 1, 0);

		for(var i = 0; i < movableSquares.length; i++) {
			movableSquares[i].draw();
		}
		
	
	}

	function roundedSquare(ctx,x,y,width, rds, color, transp, drawStyle) {
	
		var baseX = x;
		var baseY = y;
		var baseWidth = width;
		var halfWidth = Math.abs(width/2);
		var r = rds;
		var opt = transp;
		var baseColor = color;
		var v = 0;
		var v2 = 7;
		var currX = x;
		var currY = y;
		var vx = 0;
		var vy = 0;
		
		var driftX = Math.floor(Math.random() * (3 - 0 + 1));
		var driftY = -driftX;
		var dv = Math.floor(Math.random() * (60 - 10 + 1)) + 10;
		var trgChangeDist = 35;
		var trgFinDisance = 30
		var signY = (Math.random() < 0.5) ? -1 : 1;
		var finisTrgX = Math.floor(Math.random() * (trgFinDisance + trgFinDisance + 1)) - trgFinDisance;
		var finisTrgY = Math.round(Math.sqrt(Math.pow(trgFinDisance, 2) - Math.pow((finisTrgX), 2))) * signY;
		//var delay = Math.floor(Math.random() * (40 - 10 + 1)) + 10;
		
		this.dimSumm = 0;
		
		var targetX = x;
		var targetY = y;
		
		this.setTarget = function(tx,ty) {
			targetX = tx;
			targetY = ty;
		}
		
		this.setV = function(vel) {
			v = vel;
		}

		
		this.followMouse = function() {
			targetX = mouseX - halfWidth;
			targetY = mouseY - halfWidth;
			var a;
			var tX = targetX - currX;
			var tY = targetY - currY;
			var distance = Math.sqrt(Math.pow((tX), 2) + Math.pow((tY), 2));
			v += dv/15;
			a = v/distance;
			
			if(Math.abs(distance) < trgChangeDist) {
				targetX -= finisTrgX;
				targetY -= finisTrgY;				
				tX = targetX - currX;
				tY = targetY - currY;
				var distance = Math.sqrt(Math.pow((tX), 2) + Math.pow((tY), 2));
				a = v2/distance;
				v=0;				
			}	
			if(v > distance) v = distance /2
			if(distance < v2) {			
				driftX = (driftX == -3) ? 0 : --driftX; 
				driftY = (driftY == -3) ? 0 : --driftY; 
				currX = targetX + Math.floor(driftX /10);
				currY = targetY + Math.floor(driftY /10);				
			} else {			
				vx = Math.round((tX) *a);
				vy = Math.round((tY) *a);
				currX += vx;			
				currY += vy;
			}		

			this.dimSumm = Math.abs(baseX - currX) + Math.abs(baseY - currY);
	
		}
		
		this.returnToBase = function() {
			targetX = baseX;
			targetY = baseY;
			var a;
			var tX = targetX - currX;
			var tY = targetY - currY;
			var distance = Math.sqrt(Math.pow((tX), 2) + Math.pow((tY), 2));
			v += dv/10;
			a = v/distance;			
			
			if(v > distance) {
				currX = baseX;
				currY = baseY;
				v=0;
			} else {
				vx = Math.round((tX) *a);
				vy = Math.round((tY) *a);
				currX += vx;			
				currY += vy;
			}
						
			this.dimSumm = Math.abs(baseX - currX) + Math.abs(baseY - currY);

		}

		if(drawStyle == 1) {
			this.draw = function() 
			{
				ctx.fillStyle = baseColor;	
				ctx.globalAlpha = opt; 
				ctx.beginPath();
			  	ctx.moveTo(currX,currY+r);
			 	ctx.lineTo(currX,currY+baseWidth-r);
			 	ctx.quadraticCurveTo(currX,currY+baseWidth,currX+r,currY+baseWidth);
			  	ctx.lineTo(currX+baseWidth-r,currY+baseWidth);
			  	ctx.quadraticCurveTo(currX+baseWidth,currY+baseWidth,currX+baseWidth,currY+baseWidth-r);
			  	ctx.lineTo(currX+baseWidth,currY+r);
			  	ctx.quadraticCurveTo(currX+baseWidth,currY,currX+baseWidth-r,currY);
			  	ctx.lineTo(currX+r,currY);
			 	ctx.quadraticCurveTo(currX,currY,currX,currY+r);
			  	ctx.fill();
			}
		} else {
			this.draw = function() 
			{
				ctx.lineWidth = 2;
				ctx.strokeStyle = baseColor;	
				ctx.globalAlpha = opt; 
				ctx.beginPath();
			  	ctx.moveTo(currX,currY+r);
			 	ctx.lineTo(currX,currY+baseWidth-r);
			 	ctx.quadraticCurveTo(currX,currY+baseWidth,currX+r,currY+baseWidth);
			  	ctx.lineTo(currX+baseWidth-r,currY+baseWidth);
			  	ctx.quadraticCurveTo(currX+baseWidth,currY+baseWidth,currX+baseWidth,currY+baseWidth-r);
			  	ctx.lineTo(currX+baseWidth,currY+r);
			  	ctx.quadraticCurveTo(currX+baseWidth,currY,currX+baseWidth-r,currY);
			  	ctx.lineTo(currX+r,currY);
			 	ctx.quadraticCurveTo(currX,currY,currX,currY+r);
			  	ctx.stroke();
			}		
		}		
	
	}
	

	function startAnimate() {
	
		mousePresent = true;
		
		if(!animated) {
			animated = true;		
		
			setTimeout(function() {
		    if (animated) {
				squaresUpdate()
		        setTimeout(arguments.callee, 50);
				}
			}, 300);
		}		
	}
	
	function squaresUpdate() {
		if (mousePresent) {
			for(var i = 0; i < movableSquares.length; i++) {
				movableSquares[i].followMouse();
			}
		} else {
			dimSumm = 0;
			for(var i = 0; i < movableSquares.length; i++) {
				movableSquares[i].returnToBase();
				dimSumm += movableSquares[i].dimSumm;
			}
			animated = (dimSumm> 0)
		}
		ctx.clearRect(0, 0, canvasWidth, canvasHeight);
		for(var i = 0; i < movableSquares.length; i++) {
			movableSquares[i].draw();
		}
	}
	
	function prepareToStopAnimate() {
		mousePresent = false;
		for(var i = 0; i < movableSquares.length; i++) {
				movableSquares[i].setV(0);
			}
			setTimeout(function() {
		    if (animated) {
				squaresUpdate()
		        setTimeout(arguments.callee, 50);
				}
			}, 50);

	}
	
	function stopAnimate() {
		animated = false;	
	}