let canvas;
let context;
let mice;

let drawInterval=20/1000;

let micePerSecond=0.3;

let normalMouseSpeed=3;
let normalMouseSize=1;

let lastTimeStamp;
function draw(timeStamp)
{
	let timeElapsed;

	if(lastTimeStamp==undefined)
		lastTimeStamp=timeStamp;

	timeElapsed=Math.min((timeStamp-lastTimeStamp)/1000,0.1);
	lastTimeStamp=timeStamp;

	canvas.width  = window.innerWidth;
	canvas.height = window.innerHeight;

	context.clearRect(0, 0, canvas.width, canvas.height);

	drawMice(timeElapsed);

	window.requestAnimationFrame(draw);
}

function createMouse(x,y,direction,speed,size)
{
	return { 'x':x, 'y':y, 'direction':direction, 'speed':speed,'size':size ,'tailLag':0, 'animation':0, 'animationCounter':0 };
}


function main()
{
	initialise();
	window.requestAnimationFrame(draw);
	setInterval(spawnMouse,1000/micePerSecond);
	setInterval(cleanUpMice,100);
}

function spawnMouse()
{
	mice.push(createMouse(5+window.innerWidth*Math.random()*0.9,window.innerHeight+normalMouseSize*90,-Math.PI/2,normalMouseSpeed,normalMouseSize));
} 

function initialise()
{

	canvas=document.getElementById("canvas1");
	context=canvas.getContext("2d");

	mice=[];
	mice.push(createMouse(200,100,1,normalMouseSpeed,normalMouseSize));


}
function cleanUpMice()
{
	let i=0;
	for(i;i<mice.length;++i)
	{
		if(mice[i].y<-200 || mice[i].y>window.innerHeight+300 || mice[i].x<-100 || mice[i].x>window.innerWidth+300)
		{
			mice.splice(i,1);
		}
	}
}
function drawMice(timeElapsed)
{
	let i=0;
	for(i;i<mice.length;++i)
	{
		drawMouse(mice[i],timeElapsed);
	}
}
function drawMouse(mouse,timeElapsed)
{
	mouse.animationCounter+=drawInterval;
	mouse.x+=mouse.speed*(timeElapsed/drawInterval)*Math.cos(mouse.direction);
	mouse.y+=mouse.speed*(timeElapsed/drawInterval)*Math.sin(mouse.direction);
	mouse.animation+=0.8*(timeElapsed/drawInterval);

	/*
	mouse.direction+=0.1;
	if(mouse.direction>1) mouse.direction-=1;
	*/

	context.save();

	context.translate(mouse.x, mouse.y);
	context.rotate(mouse.direction);
	context.scale(mouse.size,mouse.size);

	/*body*/
	context.beginPath();
	context.ellipse(0,0,90,40,0,0,2*Math.PI);
	context.fillStyle = "#8f8f8f";
	context.fill();
	context.stroke();
	context.closePath();
	/*right ear*/
	context.beginPath();
	context.arc(50, 20, 20, 0, Math.PI*1.5, false);
	context.fillStyle = "#8f8f8f";
	context.fill();
	context.stroke();
	context.closePath();
	/*left ear*/
	context.beginPath();
	context.arc(50, -22, 20, 0,- Math.PI*1.5, true);
	context.fillStyle = "#8f8f8f";
	context.fill();
	context.stroke();
	context.closePath();
	/*left eye*/
	context.beginPath();
	context.ellipse(80,7,5,3,-1/2,0,2*Math.PI);
	context.fillStyle = "#000000";
	context.fill();
	context.closePath();
	/*right eye*/
	context.beginPath();
	context.ellipse(80,-7,5,3,1/2,0,2*Math.PI);
	context.fillStyle = "#000000";
	context.fill();
	context.closePath();
	/*right wiskers*/
	context.beginPath();
	context.moveTo(89,0);
	context.lineTo(95,20);
	context.stroke();
	context.closePath();
	context.beginPath();
	context.moveTo(89,0);
	context.lineTo(90,20);
	context.stroke();
	context.closePath();
	/*left wiskers*/
	context.beginPath();
	context.moveTo(89,0);
	context.lineTo(95,-20);
	context.stroke();
	context.closePath();
	context.beginPath();
	context.moveTo(89,0);
	context.lineTo(90,-20);
	context.stroke();
	context.closePath();

	/*tail*/
	context.beginPath();
	context.moveTo(-90,0);
	context.bezierCurveTo(-100,0,-150,Math.cos(mouse.animation)*30,-200,Math.sin(mouse.animation)*10);
	context.lineWidth+=2;
	context.stroke();
	context.closePath();

	context.restore();
}