var myAnimLoop = 0;
var pApplet;
var halo1, halo2, group1, group2;
var iconsArray = new Array(9);

function addLoadingBar(){
	
	//Add Box
	$("#game").prepend('<div id="loadingBar"><p id="loading">Please wait</p><p id="perc">...</p></div>');
	//Add Box Style
	$("#loadingBar").css({'display' : 'block', 'float' : 'left' , 'position':'absolute', 'top' : '50%', 'left' : '50%', 'width' : '150px', 'height' : '150px', 'margin': '-75px 0 0 -75px', 'background-color': 'transparent'});
	
	for(var j=iconsArray.length-1;  j>-1; j--){
		$myIconID = "icon-"+j;
		$("#loadingBar").prepend('<img src="game/img/loading/'+j+'.png" id="'+$myIconID+'">');
	}
		
	var halfW = $("#loadingBar").width()/2;
	var halfH = $("#loadingBar").height()/2;
	
	//Add loading and percents text Style
	$("#loading").css({'display': 'none', 'position': 'absolute', 'left':'0', 'top' : '20%', 'margin' : '0', 'color': '#333333', 'width':'100%', 'font-size' : '150%', 'text-align':'left'});
	$("#perc").css({'display': 'none', 'margin' : '0 0 0 0', 'color': '#333333', 'font-size' : '400%', 'position':'absolute', 'top':'30%', 'width':'100%', 'text-align':'right'});

	
	//Add animated
	iconsArray[0] = new icon("#loadingBar", 0, halfW, halfH);
	//Bottom
	iconsArray[1] = new icon("#loadingBar", 1, halfW*1.2, halfH*1.6);
	iconsArray[2] = new icon("#loadingBar", 2, halfW*0.6, halfH*2);
	iconsArray[3] = new icon("#loadingBar", 3, halfW*2.3, halfH*1.6);
	iconsArray[4] = new icon("#loadingBar", 4, halfW*1.8, halfH*1.9);
	//top
	iconsArray[5] = new icon("#loadingBar", 5, 0, halfH*0.2);
	iconsArray[6] = new icon("#loadingBar", 6, -halfW*0.1, halfH*0.7);
	iconsArray[7] = new icon("#loadingBar", 7, -halfW*0.3, -halfH*0.4);
	iconsArray[8] = new icon("#loadingBar", 8, halfW*0.8, -halfH*0.1);

	
	$("#loading").fadeIn(200);
	$("#perc").fadeIn(200);
	//Show Loading Images
	for(var i=0; i<iconsArray.length; i++){
		$("#icon-"+i).fadeIn(1000);
	}
}


function loading(){
	var max = 4;
	for(var u=0; u<iconsArray.length; u++){
		iconsArray[u].update(max);
	}
	
}


//Object Class
function icon(myParent, myId, x, y){
	this.myParent = myParent;
	this.myId = myId;
	this.x = x;
	this.y = y;
	x = x-$("#icon-"+myId).width()/2;
	y = y-$("#icon-"+myId).height()/2;
	var xOrig = x;
	var yOrig = y;
	var speedX = Math.random();
	var moveX = speedX;
	var speedY = Math.random();
	var moveY = speedY;
	var alpha = 0;
	$("#icon-"+myId).css({'left': x, 'top' : y});
	//console.log("#icon-"+myId+" is borned");
	
	this.update = function(max){
			if(x>xOrig+max) moveX = -speedX;
			if(x<xOrig-max) moveX = speedX;
			if(y>yOrig+max) moveY = -speedY;
			if(y<yOrig-max) moveY = speedY;
			$("#icon-"+myId).css({'left': x+=moveX, 'top' : y+=moveY});
	}
}