var ptimer;
 
 
var PRE_LOAD_SIZE=30;
// Size of the preloading animation
// As the animation is rendered within
// a virtual square. The  width and height are the same
						
var SnakeAnim = function(canvasId)
{
	this.colorControl=0;
	
	this.madsnake=function()
	{
		var animcanvas=document.getElementById(canvasId);// get the canvas
		var ctx = animcanvas.getContext('2d');  // get the 2d context

		// get the offset values for centering the animation
		var offSetX=parseInt((ctx.canvas.width-PRE_LOAD_SIZE)/2);
		var offSetY=parseInt((ctx.canvas.height-PRE_LOAD_SIZE)/2);
		
		// get the coordinates for drawing the dots
		var coordinatesX=[10,15,18.6,20,18.6,15,10,5,1.4,0,1.4,5];
		var coordinatesY=[0,1.4,5,10,15,18.6,20,18.6,15,10,5,1.4];
		
		// sizes of dots
		var size=[2, 1.9, 1.83, 1.75, 1.66, 1.6, 1.5, 1.41, 1.33, 1.25, 1.16, 1];
		
		// Reseting the canvas is done here for animations
		ctx.clearRect(0, 0, animcanvas.width, animcanvas.height);
		var w = animcanvas.width;
		animcanvas.width = 1;
		animcanvas.width = w;
		
		ctx.font = "bold 16px sans-serif";
		ctx.fillStyle = "#ffff00";
		ctx.textAlign = "center";
		ctx.fillText("Loading...", offSetX+20, offSetY+59);
		
		for(var ik=0; ik<12; ik++)
		{
		   ctx.save();
		   ctx.fillStyle = "#ffff00"; 
		   ctx.beginPath();
		   // Draw the dots here
		   ctx.arc((coordinatesX[ik]*2)+offSetX,
						(coordinatesY[ik]*2)+offSetY,
							size[(ik+this.colorControl)% 12]*2, 0, Math.PI*2, true);
		   ctx.closePath();
		   ctx.fill();
		   ctx.restore();
		}
		
		// color scheme for drawing the animation
		this.colorControl=this.colorControl+1;
		this.colorControl%=12;
	};
}


Object.prototype.timerid=0;
Object.prototype.currentAnim='';
Object.prototype.alphaVal=0.0;
Object.prototype.StartPreload=function(animType)
{
   var inId=this.id;
   if(inId)
   {
		var element=document.getElementById(inId);
		if(element.getContext)
		{
            if(animType=='madsnake')
			{
                var i=new SnakeAnim(inId);
                this.currentAnim='madsnake';
                //this.timerid
				
				ptimer=setInterval(function(){i.madsnake()},60);
            } 
        }
    }
}

Object.prototype.StopPreload=function()
{
   var inId='anim1';
   clearTimeout(ptimer);
   
   //alert("stopPreload...");
   //if(inId){
 
	var element=document.getElementById('anim1');
    if(element.getContext)
	{
            //if(this.currentAnim!=''){
                clearTimeout(this.timerid);
                //StopPreLoading('anim1');
            //}
    }
   // }
}
/*
function StopPreLoading(canvasId){
//clearTimeout(this.timerid);
//alert("here i am");

            var dCanvas=document.getElementById(canvasId);
            dCanvas.currentAnim='stopping';
            var context = dCanvas.getContext('2d');
            dCanvas.alphaVal=dCanvas.alphaVal+0.05;
            if(dCanvas.alphaVal>=1.0){
                context.clearRect(0, 0, dCanvas.width, dCanvas.height);
                var cw = dCanvas.width;
                dCanvas.width = 1;
                dCanvas.width = cw;
                // reset the canvas
                dCanvas.currentAnim='';
                dCanvas.alphaVal=0;
                Process(canvasId);

            } else {
                context.save();
                context.globalAlpha=dCanvas.alphaVal;
                context.fillStyle = "#ffffff";
                // render the rectangle with the changing global alpha value
                context.fillRect(0, 0, context.canvas.width, context.canvas.height);
                context.restore();
                // continue fading out if the alpha value has not reached
                setTimeout('StopPreLoading("'+canvasId+'")',30);
            }
}
*/

function getCanvas(uid){
	return document.getElementById(uid);
}






var img = new Image();
img.onload = function(){ StopLoader(); }
img.src = 'images/lullabyland.png';


function StopLoader()
{
	//alert("I am here");
//StopPreLoading('anim1');
	//clearTimeout(ptimer);
	//clearTimeout(anim1.timerid);

	//getCanvas('anim1').StopPreload();

Object.prototype.StartPreload=function(){ };


	//var dCanvas=document.getElementById('anim1'); 
    //dCanvas.width = 1;
	//dCanvas.height = 1;

	//var item = document.getElementById('sample1'); 
    //item.width = 2;
	//dCanvas.height = 1;
	
}


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

jingle = new Image(186,252);
jingle.src = 'images/Jingle.png'

melody = new Image(180,263);
melody.src = 'images/Melody.png'

promo = new Image(135,116);
promo.src = 'images/promo.png'


var jingleObj = {x: 420, y:40};
var melodyObj = {x: 180, y:30};

var xpos = [];
xpos = [ 0, 0.3, 0.8, 1.2,    2,    3,   4,   5,    6,    7,   8, 8.8, 9.5, 9.8, 10, 9.8, 9.5, 8.8,   8,   7,   6, 5,   4,   3,   2,  1.2,  0.8, 0.3 ];
var ypos = [];
ypos = [ 0,  -1,  -2,  -3, -3.7, -4.2, -4.7, -5, -4.7, -4.2, -3.7, -3,  -2,  -1,  0,   1,   2,   3, 3.7, 4.2, 4.7, 5, 4.7, 4.2, 3.7,    3,    2,   1 ];

var loopcount;
var loopcount2;

function init()
{
	playanim();

	loopcount = 0;
	loopcount2 = 10;

	drawBackground();
	drawCharacters();
}

function drawBackground()
{
	var ctx = document.getElementById('bgLayer').getContext("2d");
	ctx.drawImage(img, 0, 0);
	ctx.drawImage(promo, 318, 361);
	
	ctx = document.getElementById('logoLayer').getContext("2d");
	ctx.drawImage(logo, 214, 178);
}


function drawWing(ctx)
{
	//ctx.fillStyle = 'rgb(255,165,0)';
	ctx.strokeStyle = "#ffffff";
	ctx.fillStyle = "#dac576";
	ctx.beginPath();
	ctx.moveTo(6,11);
	ctx.bezierCurveTo(67,-12,160,4, 158,42);
	ctx.bezierCurveTo(157,68,115,73, 93,67);
	ctx.bezierCurveTo(98,82,82,117, 37,96);
	ctx.bezierCurveTo(25,91,15,78,0,57);
	ctx.closePath();
	ctx.stroke();
	ctx.fill();
}

var wingFlap = 1;
var lwingScale = 0.8;
var rwingScale = 0.7;


var wingFlap2 = 1;
var lwingScale2 = 0.5;
var rwingScale2 = 0.4;

function drawCharacters()
{
	var ctx = document.getElementById('playerLayer').getContext("2d");
	ctx.save();

	// draw wings
	ctx.save();
	ctx.translate(jingleObj.x+70,jingleObj.y+120);
	ctx.rotate( 310 * Math.PI / 180);
	ctx.scale(lwingScale, 0.7);
	drawWing(ctx);
	ctx.restore();

	ctx.save();
	ctx.translate(jingleObj.x+120,jingleObj.y+110);
	ctx.rotate( 25 * Math.PI / 180);
	ctx.scale(-rwingScale, 0.6);  /// XFLIP
	drawWing(ctx);
	ctx.restore();


	ctx.save();
	ctx.translate(melodyObj.x+70,melodyObj.y+120);
	ctx.rotate( 325 * Math.PI / 180);
	ctx.scale(rwingScale2, 0.6);
	drawWing(ctx);
	ctx.restore();

	ctx.save();
	ctx.translate(melodyObj.x+120,melodyObj.y+110);
	ctx.rotate( 40 * Math.PI / 180);
	ctx.scale(-lwingScale2, 0.7);  /// XFLIP
	drawWing(ctx);
	ctx.restore();

	if (wingFlap == 1) 
	{
		lwingScale = lwingScale - 0.1;
		rwingScale = rwingScale - 0.1;
	}

	if (lwingScale < 0.4) wingFlap = -1;

	if (wingFlap == -1) 
	{
		lwingScale = lwingScale + 0.1;
		rwingScale = rwingScale + 0.1;
	}

	if (lwingScale > 0.7) wingFlap = 1;

	if (wingFlap2 == 1) 
	{
		lwingScale2 = lwingScale2 - 0.1;
		rwingScale2 = rwingScale2 - 0.1;
	}

	if (lwingScale2 < 0.4) wingFlap2 = -1;

	if (wingFlap2 == -1) 
	{
		lwingScale2 = lwingScale2 + 0.1;
		rwingScale2 = rwingScale2 + 0.1;
	}

	if (lwingScale2 > 0.7) wingFlap2 = 1;

	ctx.drawImage(jingle, jingleObj.x, jingleObj.y);
	ctx.drawImage(melody, melodyObj.x, melodyObj.y);
	//setTimeout(drawCharacters,300);
	ctx.restore();

	loopcount++;
	if (loopcount > 27) loopcount = 0;

	loopcount2++;
	if (loopcount2 > 27) loopcount2 = 0;
	
	//clearTimeout(animtimer);
	//animtimer = 
	setTimeout("moveCharacters("+(60)+")",60);
}



function moveCharacters(dir)
{
	var ctx = document.getElementById('playerLayer').getContext("2d");

	ctx.clearRect(jingleObj.x-40,jingleObj.y, 186+40,252); // 40 added to cover up wings
	ctx.clearRect(melodyObj.x-40, melodyObj.y,180+40,263);

	drawCharacters();

	jingleObj.x = 420 + xpos[loopcount];
	jingleObj.y = 30 + ypos[loopcount];

	melodyObj.x = 180 + xpos[loopcount2];
	melodyObj.y = 30 + ypos[loopcount2];
}