/**
 * This file performs the timing and animating functions of a slideshow.
 *
 * This script works in concert with specific HTML and CSS elements.  HTML
 * requirements are as follows:
 *   > Element (probably a div) with id="SlideSet" that contains all slides
 *   > Original slide element (probably a img) with id="slide"
 *
 * Finally this script requires DOM level 1 support with the browser (IE 5+,
 * NS 6+) and will not initialize if not available.
 */


/**
 * Bootstrap Routine
 * 
 * Initializes global variables and sets up the _intiSlideShow routine to run
 * after the page has been fully loaded.
 *
 * This slideshow will only run if DOM Level 1 is supported by the browser.
 */
// Confirm that the user's browser supports DOM Level 1 - initialize if so.
if ((document.getElementsByTagName) && (document.getElementById)) {
	// Initialize Global Variables
	var intFirstSlideDelay, intSlideDelay, intFadeDelay, intFadeStep; //set-able
	var intBottomSlide;
	var intNextImg = 0;
	var intCurrFadePercent = 100;	
	var objSlideTimer = null;
	var objFadeTimer = null;

	// Store any previous onload functions before overwriting
	var strOldOnLoad = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = _initSlideshow();
	} else {
		window.onload = function() {strOldOnLoad();	_initSlideshow();}
	}
}


/**
 * Initializes the slideshow
 */
function _initSlideshow() {
	// Set the first array image to the one used on the page (in <img> tag).
	arrImages[0] = document.getElementById('slide').src

	// Set values for the global variables if not set explicitly in the HTML body
	intSlideDelay = intSlideDelay || 5;
	intFirstSlideDelay = intFirstSlideDelay || intSlideDelay; // matches std delay unless set
	intFadeDelay = intFadeDelay || 40;
	intFadeStep = intFadeStep || 5;

	// Use DOM to create two new images to do the slideshow and prep for fades
	_createElements();
	_addOpacity();
	_prepNextSlide();

	// start the timer for the next slide
	objSlideTimer = setTimeout("objSlideTimer=null;_rotateSlide()",intFirstSlideDelay * 1000);
}


/**
 * Prepares the bottom image so that it is ready to be rotated to the top.
 *
 * Sets intNextImg to the correct next slide, loads that image into the bottom
 * image, resets the transparency to mostly transparent.  Viola, ready for the 
 * next _rotateSlide.
 */
function _prepNextSlide() {
	// calculate the next image
	intNextImg = intNextImg + 1;
	if (intNextImg == arrImages.length) intNextImg = 0;

	// set the bottom layer image src to the next image
	document.getElementById('slide' + intBottomSlide).src = arrImages[intNextImg];

	// set the initial fade on the bottom image
	intCurrFadePercent = intFadeStep;
	_setTransparency(document.getElementById('slide' + (intBottomSlide)));
}


/**
 * Rotates the bottom slide image to the top, preps the new bottom image
 * and starts the counters.
 */
function _rotateSlide() {
	// create a new object and set it's source to the bottom image
	var objImage = new Image;
	objImage.src = arrImages[intNextImg]

	// make sure that the slide has fully loaded before rotating it (for some
	// reason this doesn't work on the DOM object - hence the new image object)
	if (objImage.complete) {
		// bump the bottom image up above the top (which is currently at 21)
		document.getElementById('slide' + intBottomSlide).style.zIndex = 22;
		document.getElementById('slide' + (1 - intBottomSlide)).style.zIndex = 20;
		intBottomSlide = 1 - intBottomSlide; // record swapping of slides

		// start the fading timer
		objFadeTimer = setTimeout("objFadeTimer=null;_fadeSlide()",intFadeDelay);
	} else {
		// image wasn't loaded, wait 0.2 seconds and try again 
		objSlideTimer = setTimeout("objSlideTimer=null;_rotateSlide()",200);
	}
}


/**
 * Controls the timing and degree of transparency for the fades
 */
function _fadeSlide() {
	if (intCurrFadePercent < 100) {
		intCurrFadePercent+= intFadeStep;
		_setTransparency(document.getElementById('slide' + (1 - intBottomSlide)));
		objFadeTimer = setTimeout("objFadeTimer=null;_fadeSlide()",intFadeDelay);
	} else {
		// if the new image is fully faded in, adjust zindex, prep the next one.
		document.getElementById('slide' + (1 - intBottomSlide)).style.zIndex = 21;
		_prepNextSlide();

		// start the timer for the next slide
		objSlideTimer = setTimeout("objSlideTimer=null;_rotateSlide()",intSlideDelay * 1000);
	}
}


/**
 * Sets the transparency of the slide object passed to it
 *
 * Transparency is set here one of 4 ways:
 *   - IE 6+ using the .filters[0].opacity property
 *   - IE 5- using the .style.filter property
 *   - Mozilla using the .style.MozOpacity property
 *   - Konquorer (Safari) using the .style.KhtmlOpacity property
 *
 * Which method is used depends on which property is already set on the object
 * so, for this to work, the property must already be set.  If no transparency
 * property is set (currently Opera), then the slides still change - but no fade
 */
function _setTransparency(objSlide) {
	if (intCurrFadePercent > 0) {
		if (objSlide.filters && objSlide.filters[0]) {
			if (typeof objSlide.filters[0].opacity == "number") { //if IE6+
				objSlide.filters[0].opacity = intCurrFadePercent
			} else { //else if IE5.5-
				objSlide.style.filter = "alpha(opacity=" + intCurrFadePercent + ")"
			}
		} else if (objSlide.style.MozOpacity) {
			objSlide.style.MozOpacity = intCurrFadePercent/100.05
		} else if (objSlide.style.KhtmlOpacity) {
			objSlide.style.KhtmlOpacity = intCurrFadePercent/100
		}
	}
}


/**
 * Creates the necessary elements used by this script
 *
 * By creating all necessary elements here, they do not need to exist in the
 * HTML.  Stylesheets, however do need to style these objects appropriately.
 * 
 * The items create are:
 *   - 2 divs (slideLineR and slideLineL) to hold background images which
 *     draw over the slides.  These are inserted first and on top so that there
 *     is no flicker as the slide images are created.
 *   - 2 images (slide0 and slide1) which are the two rotating images for the
 *     slideshow.  slide1 starts as topmost and copies the image.src from slide
 *     (in the original HTML).  Both images are placed above the HTML original.
 */
function _createElements() {
	// create the two line divs (draw content border lines above the slides)
	// these are drawn first so no flickering when slides are added
	var newDivL = document.createElement('div');
	newDivL.setAttribute('id','slideLineL');
	document.getElementById('slideSet').appendChild(newDivL);

	var newDivR = document.createElement('div');
	newDivR.setAttribute('id','slideLineR');
	document.getElementById('slideSet').appendChild(newDivR);

	// Create slide0 (starts off as bottom image) insert before divs
	var newImage0 = document.createElement('img');
	newImage0.src = document.getElementById('slide').src;
	newImage0.setAttribute('id','slide0');
	document.getElementById('slideSet').insertBefore(newImage0,
					document.getElementById('slideLineL'));

	// Create slide1 (starts off as top image and shows initial picture)
	var newImage1 = document.createElement('img');
	newImage1.setAttribute('id','slide1');
	newImage1.src = document.getElementById('slide').src;
	document.getElementById('slideSet').insertBefore(newImage1,
					document.getElementById('slideLineL'));

	// Set the zIndexes (double check - slide1 should already be topmost anyway)
	intBottomSlide = 0; // initialize the value
	document.getElementById('slide' + intBottomSlide).style.zIndex = 0;
	document.getElementById('slide' + (1 - intBottomSlide)).style.zIndex = 21;
}


/**
 * Opacity properties are also added to the images.  Depending on the browser,
 * only one of these properties (if any) should "stick."  One of them must
 * stick for the _setTransparency function to do anything.
 */
function _addOpacity() {
	document.getElementById('slide0').style.filter = 'progid:DXImageTransform.Microsoft.alpha(opacity=100)';
	document.getElementById('slide0').style.MozOpacity = .999;
	document.getElementById('slide0').style.KhtmlOpacity = 1;

	document.getElementById('slide1').style.filter = 'progid:DXImageTransform.Microsoft.alpha(opacity=100)';
	document.getElementById('slide1').style.MozOpacity = .999;
	document.getElementById('slide1').style.KhtmlOpacity = 1;
}