var drawn;
var frameRate=20;//<=>1000/20 <=>20fps
var fps=0;

var mouse = JsVector(0, 0);
var mouseM = 70;// mouse mass
var mouseD=false;//mouse is down
//----------------------------------------------------------
//o Context em que vamos estar a desenhar
var stg1;
var ctx;
var stg2;
var ctx2;
var width;
var height;
var browser;

var img = new Image();
var imageData;

//----------------------------------------------------------
//defenir a margen entre as bolas para sabermos o nr por fila e por coluna e o total
var ballD=10;//R=5<=>D=10
var ballMargin=10;//Margin = 20
var stgCol;
var stgRow;
var stgOffSetX;
var stgOffSetY;
var balls;
var nrBalls;
//----------------------------------------------------------

var fri= 0.01;
var GRA= 9;//gravitational constant
var PI2=Math.PI*2;
//----------------------------------------------------------


function initCanvas()
{
	stg1=document.getElementById("cnvStage");
	window.addEventListener("mousemove", canvasMove);
	ctx=stg1.getContext("2d");
	
	if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1 || navigator.appName == "Microsoft Internet Explorer") 
	{
		browser=true;
	}
	else
	{
		browser=false;
	}
	
	if(browser)
	{
		stg2 = document.createElement('canvas');
		stg2.width = ballD;
		stg2.height = ballD;
		ctx2 = stg2.getContext('2d');
		ctx2.fillStyle="#FFFFFF";
		ctx2.beginPath();
		ctx2.arc( ballD*0.5, ballD*0.5, ballD*0.5, 0, PI2, true);
		ctx2.closePath();
		ctx2.fill();
		canvasResize();
		drawn=setTimeout(loop, frameRate);
	}
	else
	{
		browser=false;
		img.src = 'js/bg/ball.png';
		img.onload = function()
		{
			canvasResize();
			drawn=setTimeout(loop, frameRate);
		}
	}
}

function canvasResize()
{
	width=$(window).width();
	height=$(window).height()-80;//barra do topo-50, barra do fundo-30
	$(stg1).attr("width", width);
	$(stg1).attr("height", height);

	stgRow = Math.floor(width/(ballMargin+ballD));
	stgCol = Math.floor(height/(ballMargin+ballD));
	
	stgOffSetX = (width - (stgRow*ballD+ (stgRow-1)*ballMargin) )*0.5;
	stgOffSetY = (height - (stgCol*ballD+ (stgCol-1)*ballMargin) )*0.5;
	
	var diamMargin=ballD+ballMargin;

	balls = new Array();
	
	for (var a=0;a<stgCol;a++)
	{
		for (var i=0;i<stgRow;i++)
		{
			var id=i+a*stgRow;
			if(browser)
			{
				balls[id]=Ball(i*diamMargin+stgOffSetX, a*diamMargin+stgOffSetY, stg2);	
			}
			else
			{
				balls[id]=Ball(i*diamMargin+stgOffSetX, a*diamMargin+stgOffSetY, img);	
			}
			
		}
	}	
	nrBalls=balls.length;
}

function loop()
{
	ctx.clearRect ( 0, 0 , width , height ); 
	for (var i=0;i< nrBalls;i++)
	{	
		if(mouseD)
		{
			fri=0.01;
			//mouse vector, mouse mass, atrac/repulse, raio max de interação
			if(balls[i].gravity(mouse, mouseM, -1, 100)==false)
			{
				fri=0.3;
				balls[i].backIni(2);//quanto menor mais depressa volta
			}
		}
		else
		{
			fri=0.3;
			balls[i].backIni(2);//quanto menor mais depressa volta
		}	
		balls[i].friction(fri);
		balls[i].update();
		balls[i].display();	
	}

	mouseD=false;
	
	drawn=setTimeout(loop, frameRate);
	/*
	var nd=new Date;
	fps-=nd;
	fps=parseInt(1000/fps);
	trace(fps);
	fps= nd;
	*/
}

function canvasMove(evt)
{
	mouseD=true;
	mouse.x = evt.pageX;
	mouse.y = evt.pageY-50;
}