// JavaScript Document

	/*	****************************************************************************
		Name		: CSS Modal Dialog function 
		Author		: Hugh Stevenson (hughstevenson.net)
		Date		: 28.01.2009
		Updated		: 29.01.2009
		Description	: Ajax style function (instead of lauching a new browser window)
					  to open a <DIV> window in the current browser window. This 
					  function also animates a fade out of the background
		Requirements: CSS (#overlay) required to be incorporated into the design of
					  of the site so it overlays the whole screen see below for ref
		CSS			: #overlay {
							visibility:hidden;
							position:absolute;
							left: 0px;
							top:0px;
							widows:100%;
							height:100%;
							text-align:center;
							z-index:1000;
							background-image: url(..scripts/images/trans.png);
							background-repeat: repeat;
							width: 100%;
						}
		Images		: Images used for transparancy. Idealy in 10% opacity increments
		Copyright	: All rights reserved
		****************************************************************************/
	 
	var x = 0; //Counter
	
	
	// Toggle the pop-up div and start the background fade
	function toggleOverlay(id,img){	
		var trans = new Array(); //Array to hold the different transparancy images
		//Add images to the array
		//trans[0] = 'url(Scripts/images/black/trans90.png)';
		// Reset count to animation starts from the beginning
		x = 0;
		// Get the div that will overlay the whole screen
		var overLay = document.getElementById(id);
		// Toggle the visibility of the overlay div
		overLay.style.visibility = (overLay.style.visibility == "visible") ? "hidden": "visible";
		//overLay.style.backgroundImage = trans[0];
		
		document.getElementById('art').innerHTML='<img id="art" src="images/'+img+'" width="800" height="600" /> ';
		
		
	}
	
	// Background fade 
	function anmOvrClr(id,title,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)';
		
		
		var thisFunction = "anmOvrClr('"+id+"','"+title+"','"+color+"')";
		//alert(thisFunction);
		// Get the div that will overlay the whole screen
		var overlay = document.getElementById(id);
		//hide background color
		//overlay.style.bgColor = "";
		//Set the transparancy image of the overlay <DIV> by counter value
		//alert(trans[x]);
		overlay.style.backgroundImage = trans[x];
		//Loop this function every 30 milli seconds
		nt = setTimeout(thisFunction,55);
		//Increase the count so the new (less transparancy) is displayed
		x = x+1;
		//Stop Fade animation when we ge to the end of the image array
		if (x > 10){
			clearTimeout(nt); 
			//overLay.style.visibility = "hidden";
			overlay.style.backgroundImage = trans[10];
			document.getElementById('videotitle').innerHTML= title;
		}
	}

function centerModal(){
		if( document.getElementById ){
			var scrH = document.documentElement.clientHeight; // get available window height
			var mainH = document.getElementById("modal").clientHeight; // get height of <div> main
			var topM = (scrH-mainH-10)/2 +'px' ;	//set top margin
			// if screen too small set 	margin to 0		
			if( scrH > mainH ){
			document.getElementById("modal").style.marginTop= topM;			
			}
			else topM ='0px';
			return;
		}
		if( document.all ){
			var scrH = document.documentElement.clientHeight; // get available window height
			var mainH = document.getElementById("modal").clientHeight; // get height of <div> main
			var topM = (scrH-mainH-10)/2 +'px' ;	//set top margin
			// if screen too small set 	margin to 0		
			if( scrH > mainH ){
			document.getElementById("modal").style.marginTop= topM;			
			}
			else topM ='0px';
			return;				
		}
	}