// JavaScript Document

//Global Variables

var x = 0; //Counter

//Object
function BackgroundFade(id,title,color){
	// Set the object attributes
	this.id = id;
	this.title = title;
	this.color = color;


	var trans = new Array(); //Array to hold the different transparancy images
	//Add images to the array
	trans[0] = 'url(Scripts/images/'+color+'/trans100.png)';
	trans[1] = 'url(Scripts/images/'+color+'/trans90.png)';
	trans[2] = 'url(Scripts/images/'+color+'/trans80.png)';
	trans[3] = 'url(Scripts/images/'+color+'/trans70.png)';
	trans[4] = 'url(Scripts/images/'+color+'/trans60.png)';
	trans[5] = 'url(Scripts/images/'+color+'/trans50.png)';
	trans[6] = 'url(Scripts/images/'+color+'/trans40.png)';
	trans[7] = 'url(Scripts/images/'+color+'/trans30.png)';
	trans[8] = 'url(Scripts/images/'+color+'/trans20.png)';
	trans[9] = 'url(Scripts/images/'+color+'/trans10.png)';
	trans[10] = 'url(Scripts/images/'+color+'/trans0.png)';
	
	
	
		
	//Get the <DIV> to use 
	var anmDiv = document.getElementById(id);
	//Add event listeners
	anmDiv.onmouseover = function(){startAnimation(trans)};
	anmDiv.onmouseout = function(){stopAnimation();};
	
	
	
}

function startAnimation(images){
	
	//alert(images);
	//var thisFunction = 'startAnimation(Array(\"+images.join("\',\'")';
	var thisFunction ='startAnimation(Array(\''+images.join("\',\'")+'\'))';
															
	//alert(thisFunction);
	
	//Set timer up
	nt = setTimeout(thisFunction,30);
	
	var overLay = document.getElementById("test");	
	overLay.style.backgroundImage = images[x];
	
	x= x+1; //Advance global varaible
	
	
	if (x > 10){
			clearTimeout(nt);
			//overLay.style.visibility = "hidden";
			//overlay.style.backgroundImage = trans[10];
			//document.getElementById('videotitle').innerHTML= title;
		}
	
}

function stopAnimation(){
	var overLay = document.getElementById("test");	
	overLay.style.backgroundImage = images[0];
}