/* xfade.js

CHANGELOG:
	07/16/07 - sctyler
			- added random image script
			- added comments
			- added method to set display time for each image	
			- changed the stylesheet location to a global variable so we don't have to search for it.
			- changed stylesheet insertion to a seperate function, for modularity
			- added a fade time variable to control how long a fade lasts
			- added number of steps in fade
			- added populate_images() b/c we need to reuse it for random functionality
*/

//if we can add an eventListener, do so now. If not, attach the event
window.addEventListener ? window.addEventListener("load",so_init,false) : window.attachEvent("onload",so_init);

var d=document, 		// the document we are working with
	imgs = new Array(), // the array of images in div[ id='imageContainer' ]
	current=0, 			// the current index of imgs[]
	next=1,				// the index of the next image in imimgs[]
	img_idxs=new Array(),
	fadeTime=1,			// the time it takes an image to fade, in seconds
	fadeSteps=100,		// the number of steps in fade. The higher the value, the smoother the fade will look. 
						// NOTE: (This may look choppy on slower browsers, but if we have opacity capabilities, chances are this won't matter.)
	displayTime=5,		// the display time of the images, in seconds
	doRandom = true,	// Set whether we want random images or not.
	cssLocation = "/the/inc_unit2/xfade2.css", //the location of the CSS file, or false for none
	tagID="imageContainer"; //the ID  of the tag that contains the images
	tagName="img" //the kind of tags we want to change

//Create a new link to the CSS files and add it to current document.
function create_css_link(){
	css = d.createElement("link");			//create the link element
	css.setAttribute("href",cssLocation);	//add the href attr
	css.setAttribute("rel","stylesheet");	//add the rel attr
	css.setAttribute("type","text/css");	//add the type attr
	d.getElementsByTagName("head")[0].appendChild(css);	 //add the link to the document's HEAD tag
}


//set the opacity of the object.
function setOpacity(obj, value) {
	if(obj.xOpacity>.99) {obj.xOpacity = .99;return;}	//if we are at maximum opacity, do nothing
	obj.style.opacity = obj.xOpacity;					//else, set the opacity to the object's xOpacity value
	obj.style.MozOpacity = obj.xOpacity;
	obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")"; 
}

//populate the img_idxs array with the indexes of the imgs array
function populate_img_idxs(){img_idxs=new Array();for (i=0; i<imgs.length; i++)img_idxs[i]=i;}

//get next index
function getNextIdx(){
	if (!doRandom){		//if random option is false, next is next index
		next+=1;
	}else{
		var img_idxs_idx=Math.round(Math.random()*img_idxs.length);
		next=img_idxs[ img_idxs_idx ];
		if (!imgs[next])getNextIdx();
		img_idxs.splice(img_idxs_idx,img_idxs_idx);										//delete the index in current
		if (img_idxs.length<=3)populate_img_idxs();
	}
}


//initilaize all values.
function so_init() {
	if(!d.getElementById || !d.createElement)return;	 //if we can't work with elements, return and do nothing. FAIL!
	if(cssLocation)create_css_link(); 					//if we have a stylesheet defined, add it to the document
	
	if(!(d.getElementById(tagID) && d.getElementById(tagID).getElementsByTagName(tagName))){return;}
	imgs = d.getElementById(tagID).getElementsByTagName(tagName);  //populate imgs[] with the img elements under div[ id='imageContainer' ]
	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;						//set all the images to zero opacity
	imgs[0].style.display = "block";										//set first image to black display
	imgs[0].xOpacity = .99;													//show first image (set opacity to 99%)
	
	populate_img_idxs();			//populate img_idxs so we can randomize
	
	setTimeout(so_xfade,displayTime);		//start the show!
}

//handle the fading and slideshow properties.
function so_xfade() {
	cOpacity = imgs[current].xOpacity; 			//opacity of the currently shown image
	nOpacity = imgs[next].xOpacity;				//get the opacity of the next image
	
	//step each image's opacity by (1/fadeSteps)
	cOpacity-=1/fadeSteps;
	nOpacity+=1/fadeSteps;
	
	imgs[next].style.display = "block";			//set the display style of the curretn image to block
	imgs[current].xOpacity = cOpacity;			//set the current image's xOpacity property to [current_value-.05]
	imgs[next].xOpacity = nOpacity;				//set the next image's xOpacity property to [current_value-.05]
	
	setOpacity(imgs[current]); 					//apply the xOpacity values	
	setOpacity(imgs[next]);
	
	//if the current image's opacity is zero or less, display image for displayTime seconds, else, fade again by (1/fadeSteps) 
	if(cOpacity<=0) {							
		imgs[current].style.display = "none"; current = next; getNextIdx(); setTimeout(so_xfade,(displayTime*1000));
	} else {
		setTimeout(so_xfade,fadeTime*(1000/fadeSteps));
	}
	
}