var img1 = new Image();
img1.src = 'images/cherubs.png';

var img2 = new Image();
img2.src = 'images/fishing.png';

var img3 = new Image();
img3.src = 'images/swing.png';

var img4 = new Image();
img4.src = 'images/charlie.png';

var img5 = new Image();
img5.src = 'images/pedal1.png';

var imgalpha = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1, 1, 0.9, 0.8, 0.7,0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0, 0, 0, 0];

var frame;
var ctx1, ctx2, ctx3, ctx4, ctx5;
var loop1, loop2, loop3, loop4, loop5;


function init()
{
	ctx1 = document.getElementById('layer1').getContext("2d");
	ctx2 = document.getElementById('layer2').getContext("2d");
	ctx3 = document.getElementById('layer3').getContext("2d");
	ctx4 = document.getElementById('layer4').getContext("2d");
	ctx5 = document.getElementById('layer5').getContext("2d");

	loop1 = 0;
	loop2 = 0;
	loop3 = 0;
	loop4 = 0;
	loop5 = 0;
	frame = 0;
	doLoop();
}

function doLoop()
{
	if (frame > 7 && frame < 16) fade(2); // fishing
	if (frame > 11 && frame < 20) fade(4); // charlie
	if (frame > 15 && frame < 24) fade(1); // cherubs
	if (frame > 21 && frame < 30) fade(3); // swing
	if (frame > 23 && frame < 32) fade(5); // car

	var end = 99;
	
	if (frame > end-11 ) { clearPicture(2); fade(2); }
	if (frame > end-15)  { clearPicture(4); fade(4); }
	if (frame > end-13)  { clearPicture(1); fade(1); }
	if (frame > end-11)  { clearPicture(3); fade(3); }
	if (frame > end-10)  { clearPicture(5); fade(5); }
	
	setTimeout("moveFrame()",80);	
}

function fade(pic)
{
	switch(pic)
	{
		case 1: 
			ctx1.globalAlpha = imgalpha[loop1];
			ctx1.drawImage(img1, 0,0);
			loop1++;
			break;
		case 2: 
			ctx2.globalAlpha = imgalpha[loop2];
			ctx2.drawImage(img2, 0,0);
//			ctx2.drawImage(img2, 224,1);
			loop2++;
			break;
		case 3:
			ctx3.globalAlpha = imgalpha[loop3];
			ctx3.drawImage(img3, 0,0);
			//ctx3.drawImage(img3, 90,55);
			loop3++;
			break;
		case 4:
			ctx4.globalAlpha = imgalpha[loop4];
			ctx4.drawImage(img4, 0,0);
			//ctx4.drawImage(img4, 0,139);
			loop4++;
			break;
		case 5:
			ctx5.globalAlpha = imgalpha[loop5];
			
			ctx5.drawImage(img5, 3,5);
			//ctx5.drawImage(img5, 203,135);
			loop5++;
			break;
	}
}



function moveFrame()
{
	frame++;
	if (frame > 100) 
	{
		frame = 0;
		loop1 = 0;
		loop2 = 0;
		loop3 = 0;
		loop4 = 0;
		loop5 = 0;
		clearCanvas();
	}
	doLoop();
}

function clearPicture(which)
{
	c = eval("ctx"+which);
	c.clearRect(0,0,400,300);
}


function clearCanvas()
{
	ctx1.clearRect(0,0,400,300);
	ctx2.clearRect(0,0,400,300);
	ctx3.clearRect(0,0,400,300);
	ctx4.clearRect(0,0,400,300);
	ctx5.clearRect(0,0,400,300);
}