/**
	fade the banner images
	
	the banner images that are to be faded in are in 
	a div id main_image
	there is a stylesheet that adapts current settings and it 
	is invoked when the fader is initialised.
	This is in media/css/fade.css
**/
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, img1s = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
	if(!d.getElementById || !d.createElement)return;
	
	img1s = d.getElementById("main-image").getElementsByTagName("img");
	for(i=1;i<img1s.length;i++) {
	    img1s[i].xOpacity = 0;
	}
	img1s[0].xOpacity = .99;
	
	setTimeout(so_xfade,1000);	// time to first cycle
}

function so_xfade() {
	var cOpacity = img1s[current].xOpacity;
	var nIndex = img1s[current+1]?current+1:0;
	var nOpacity = img1s[nIndex].xOpacity;
	
	cOpacity-=.05; 
	nOpacity+=.05;
	
	img1s[nIndex].style.display = "block";
	img1s[current].xOpacity = cOpacity;
	img1s[nIndex].xOpacity = nOpacity;
	
	setOpacity(img1s[current]); 
	setOpacity(img1s[nIndex]);
	
	if(cOpacity<=0) {
		img1s[current].style.display = "none";
		current = nIndex;
		setTimeout(so_xfade,1000);	// time between fades
	} else {
		setTimeout(so_xfade,100);	// speed of fade
	}
	
	function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}
}