/*
	Image Cross Fade Redux
	Version 1.0
	Last revision: 02.15.2006
	steve@slayeroffice.com

	Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html
*/

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);

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

var hold_time	= 5000;			//the time in milliseconds that a fully revealed image will be displayed prior to starting to crossfade to the next image
var step_time	= 50;			//the time in milliseconds between updates to the opacity of images and captions during fades
var cap_width	= 400;			//the width in pixels of the caption section (before padding)		- this should match the value used for width of #words_overlay and #words_text elements in css file
var cap_height	= 80;			//the height in pixels of the caption section (before padding)		- this should match the value used for height of #words_overlay and #words_text elements in css file
var cap_pad		= 15;			//the padding of the caption section (top, bottom, right & left)	- this should match the value used for padding of #words_overlay and #words_text elements in css file
var cap_opacity	= .69;			//the maximum value of the opacity of the caption area background	- this should match the value used for opacity of the #words_overlay element in css file
var slide_ht	= 400;			//the height in pixels of the slideshow images
var slide_wd	= 1000;			//the width in pixels of the slideshow images
var cap_bottom	= slide_ht - (cap_height+2*cap_pad) + 'px';											// RELATED TO words_overlay height & padding (= slide height - overlay height + 2xpadding)
var cap_center	= (slide_wd - (cap_width+2*cap_pad))/2 + 'px';										// RELATED TO words_overlay width & padding (= (slide width - overlay width + 2xpadding)/2  )
var cap_right	= slide_wd - (cap_width+2*cap_pad) + 'px';											// RELATED TO words_overlay width & padding (= slide width - overlay width + 2xpadding )


function so_init() {

	if(!d.getElementById || !d.createElement)return;

	css = d.createElement('link');																	// this section adds a <link> to a stylesheet that contains only #banner_image img { display:none; position:absolute; top: 0; left: 0; }
	css.setAttribute('href','slideshow2.css');														// it should be possible to add a <style> element instead, and preclude the external stylesheet...
	css.setAttribute('rel','stylesheet');
	css.setAttribute('type','text/css');
	d.getElementsByTagName('head')[0].appendChild(css);

	imgs 		= d.getElementById('banner_image').getElementsByTagName('img');
	
	for(i=0; i<imgs.length;i++){
		
		if (i>0) { imgs[i].xOpacity = 0; }
		title_pts	= imgs[i].getAttribute('title').split(':');
		caplocs[i]	= title_pts[0];
		words[i]	= title_pts[1];
	}
	
	imgs[0].style.display 	= 'block';
	imgs[0].xOpacity 		= .99;
	
	document.getElementById('words_text').innerHTML				= words[0];
	
	document.getElementById('words_overlay').style.opacity 		= cap_opacity;
	document.getElementById('words_overlay').style.MozOpacity 	= cap_opacity;
	document.getElementById('words_overlay').style.filter 		= 'alpha(opacity=' + (cap_opacity*100) + ')';
	
	document.getElementById('words_text').style.opacity 		= .99;
	document.getElementById('words_text').style.MozOpacity 		= .99;
	document.getElementById('words_text').style.filter 			= 'alpha(opacity=99)';

	setTimeout(so_xfade,hold_time);
}

function so_xfade() {
	
	cOpacity 	= imgs[current].xOpacity;					//c = current 	cOpacity = current image opacity
	nIndex 		= imgs[current+1]?current+1:0;				//n = next		nIndex = next image index
	nOpacity 	= imgs[nIndex].xOpacity;					//n = next		nOpacity = next image opacity

	cOpacity	-= .05;
	nOpacity	+= .05;

	imgs[nIndex].style.display 							= 'block';
	imgs[current].xOpacity 								= cOpacity;
	document.getElementById('words_text').xOpacity 		= cOpacity;
	document.getElementById('words_overlay').xOpacity 	= document.getElementById('words_overlay').xOpacity * cOpacity;
	
	imgs[nIndex].xOpacity 								= nOpacity;

	setOpacity(imgs[current]);
	setOpacity(document.getElementById('words_overlay'));
	setOpacity(document.getElementById('words_text'));
	setOpacity(imgs[nIndex]);

	if (cOpacity<=0) {
		imgs[current].style.display 					= 'none';									//remove current image once it's opacity is zero
		current 										= nIndex;									//make the current index equal to the index that WAS the 'next' index
		document.getElementById('words_text').innerHTML	= words[current];				
		cap_pos_pts										= caplocs[current].split('|');			
		
		if (cap_pos_pts[0] == "top") { 
			document.getElementById('words_overlay').style.top		= "0px";
			document.getElementById('words_text').style.top			= "0px";
		} else if (cap_pos_pts[0] == "bottom") { 
			document.getElementById('words_overlay').style.top		= cap_bottom;					// RELATED TO words_overlay height & padding (= 400 - height+padding)
			document.getElementById('words_text').style.top			= cap_bottom;					// RELATED TO words_overlay height & padding (= 400 - height+padding)
		}
		
		if (cap_pos_pts[1] == "left") {			
			document.getElementById('words_overlay').style.left		= "0px";
			document.getElementById('words_text').style.left		= "0px";
		} else if (cap_pos_pts[1] == "right") {
			document.getElementById('words_overlay').style.left		= cap_right;					// RELATED TO words_overlay width & padding (= 1000 - width+padding )
			document.getElementById('words_text').style.left		= cap_right;					// RELATED TO words_overlay width & padding (= 1000 - width+padding )
		} else if (cap_pos_pts[1] == "center") {
			document.getElementById('words_overlay').style.left		= cap_center;					// RELATED TO words_overlay width & padding (= (1000 - width+padding)/2  )
			document.getElementById('words_text').style.left		= cap_center;					// RELATED TO words_overlay width & padding (= (1000 - width+padding)/2  )
		}	

		document.getElementById('words_overlay').xOpacity 			= cap_opacity;
		setOpacity(document.getElementById('words_overlay'));
		
		document.getElementById('words_text').xOpacity 				= 0.99;
		setOpacity(document.getElementById('words_text'));
		
		setTimeout(so_xfade,hold_time);																//set the timer for the 'hold' interval, after which another crossfade will occur
	} else {
		setTimeout(so_xfade,step_time);																//if current image is still visible, set timer for the 'step' interval until next crossfade increment
	}

	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) + ')';
	}
}