// JavaScript Document

$(document).ready(function(){
	xmldata=new Array();			//initialise array for XML data
	
	fade=0;							//time taken for transitions
	ontime=0;						//time between transitions
	changenum=0;					//current banner
	changetot=0;					//total banners
	
	$("#banner").fadeTo(1,0);		//fade out the fallback banner
	
	$.ajax({											//get the XML data
 		 	url: "banners.php",							//URL to get the data from
 		 	success: function(data) {					//if we succeed, set everything up. We don't expect failure.
			  	$(data).find("picture").each(function()
			 	 {
					xmldata.push($(this));				//add item into array
				 });
				 changetot=xmldata.length;								//get total length
			 	 ontime=eval($(data).find("gallery").attr("ontime"));	//get fade time
				 fade=eval($(data).find("gallery").attr("fade"));		//get time between fades

				 change_banner(changenum);								//change banner for first banner
				 
		 		}		
		});				   
});

function change_banner(){
	
	data=xmldata[changenum];					//get current banner XML object 
	
	img=$(data).attr("src");					//retrieve variables
	href=$(data).attr("href");
	target=$(data).attr("target");
	
	$("#banner_href").attr("href",href);		//change variables on HTML
	$("#banner_href").attr("target",target);
	$("#banner_image").attr("src",img);
	
	changenum++;				//increment banner value, this is executed BEFORE the callback as we already have the variables.
	if(changenum>=changetot)	//check for banner value bounds
		changenum=0;	
		
	cache = document.createElement('img');			//create an image 
    cache.src = $(xmldata[changenum]).attr("src"); 	//pre-cache next image (means the browser will load it instantly)		
	
	$("#banner").fadeTo(fade,1).fadeTo(ontime,1).fadeTo(fade,0,change_banner);		//fade banner in, then wait, then fade out and call back to this function.


}