/*****
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com
*****/
//when the page is loaded call function so_init
window.addEventListener?window.addEventListener("load",so_init,false)//addEventListener(type, listener, useCapture)
:window.attachEvent("onload",so_init)//for IE;

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false; //not sure why zInterval = null and pause=false are defined since they are not used
var dtime=5000, fspeed=50; //i'v added these vars to make it easier to change the slide display time and the fade time

function so_init() {
	if(!d.getElementById || !d.createElement)return;
	// I've removed these lines since an external style sheet is not used. 
	//css = d.createElement("link");//create a link element
	//css.setAttribute("href","xfade2.css"); //set href
	//css.setAttribute("rel","stylesheet"); //set rel
	//css.setAttribute("type","text/css"); //set type
	//d.getElementsByTagName("head")[0].appendChild(css); //make link a child element in the head

	imgs = d.getElementById("imageContainer").getElementsByTagName("img");// get all images within imageContainer
	for(i=1;i<imgs.length;i++)imgs[i].xOpacity = 0; //set all image opacity
	
	imgs[0].style.display = "block"; //no sure why this needs to be set
	imgs[0].xOpacity = .99; // never 100 or 1 for opacity???
	
	setTimeout(so_xfade,dtime); //how long the slide is visible
}

function so_xfade() {
	cOpacity = imgs[current].xOpacity; //current slide opacity
	nIndex = imgs[current+1]?current+1:0; // next slide or back to first slide

	nOpacity = imgs[nIndex].xOpacity; //next slide opacity - after a slide is displayed it is faded out(xOpacity=0)
	
	//determines smoothness of fade lower is smoother
	cOpacity-=.02; //reduce current slide opacity
	nOpacity+=.02; //increase next slide opacity
	
	
	imgs[nIndex].style.display = "block";
	imgs[current].xOpacity = cOpacity; //save in property
	imgs[nIndex].xOpacity = nOpacity; //save in property
	
	//set the opacity of both images
	setOpacity(imgs[current]); 
	setOpacity(imgs[nIndex]);
	
	// fade it or display it
	if(cOpacity<=0) {
		imgs[current].style.display = "none"; // images are faded
		current = nIndex; // next slide is now current slide
		setTimeout(so_xfade,dtime); // display slide for dtime then call so_fade
	} else {
		setTimeout(so_xfade,fspeed); //fade it
	}
	
	function setOpacity(obj) {
		if(obj.xOpacity>.99) { //not sure why this is needed
			obj.xOpacity = .99; //never 100 or 1 for opacity???
			return;
		}
		obj.style.opacity = obj.xOpacity; //opacity works in all modern browsers - part of the W3C CSS 3 recommendation - In Firefox opacity=x x can be a value from 0.0 - 1.0
		obj.style.MozOpacity = obj.xOpacity; //a leading hyphen in CSS translates to a capital next letter in JS, so the name of the -moz-opacity property is MozOpacity 
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";//In IE filter=alpha(opacity=x)) x can be a value from 0 - 100
	}
	
}