/**********************************************************************************************
 * 	SIMPLE CROSS-FADING SLIDESHOW
 *
 * 	Fades between slides at regular intervals.
 **********************************************************************************************

PARAMETERS: 
	1.	The id of the first image (placed within the page)
	2.	An array of URLs for the slides.  Image at index 0 should be contained withing the page.
	3.	The delay between transitions.

NOTE(S): 
	- Slides can be any size, but they must all match in dimensions.

SAMPLE USAGE:

/**********************************************************************************************

<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", 
	function() {
		var slides = [
			'images/header_solar-and-wind.jpg',
			'images/header_commercial-inverters.jpg', 
			'images/header_control-and-monitoring.jpg'
		];
		ss = p1.SlideShow('slideshow', slides, 6);
	}
);
</script>

<div><img src="images/header_solar-and-wind.jpg" alt="Solar and Wind" id="slideshow"></div>

************************************************************************************************/



/* make sure p1 namespace is created */
if (!p1) { var p1 = {}; }

p1.SlideShow = function(el, slides, delay) {
	var animations = {
		fadeSlideOut: { opacity: { from: 1, to: 0 } },
		fadeSlideIn: { opacity: { from: 0, to: 1 } }
	};

	var yui_util = YAHOO.util;
	var yui_Event = yui_util.Event;
	var yui_Dom = yui_util.Dom;
	
	function swap() {
		// if next image still loading, retry later
		if (!me.nextImage.complete) { 
			setTimeout(swap, 250); 
			return; 
		}

		// fade the current slide out
		var anim = new yui_util.Anim(me.currImage, animations.fadeSlideOut, 2);
		// once anim complete
		anim.onComplete.subscribe(
			function() {
				// update index tracking
				me.currIndex = (me.currIndex + 1) % slides.length;
				// set foreground visible, and on complete, cue the next background image
				me.currImage.onload = function() {
					me.currImage.onload = '';
					yui_Dom.setStyle(me.currImage, 'opacity', 1);
					cue();
				};
				// copy background image to foreground
				me.currImage.src = me.nextImage.src;
			}
		);
		anim.animate();
	}
	
	function cue() {
		// if next image still loading, retry later
		if (!me.currImage.complete) { 
			setTimeout(cue, 250); 
			return;
		}
		
		var nextIndex = (me.currIndex + 1) % slides.length;
		me.nextImage.src = slides[nextIndex];
		setTimeout(swap, delay * 1000);
	}

	/* initialize */
	var me = this; // reference to self available to setTimeout calls
	this.currIndex = 0;
	this.currImage;

	// set the container to relative positioning so that absolutely
	// positioned subcontents are zeroed at top-left corner of container
	this.container = document.getElementById(el);
	if (!this.container) { return; }
	yui_Dom.setStyle(this.container, 'position', 'relative');
	yui_Dom.setStyle(this.container, 'left', 0);
	yui_Dom.setStyle(this.container, 'top', 0);

	// move first image (background) to top-left of container
	this.nextImage = this.container.getElementsByTagName('img')[0];
	if (!this.nextImage) { return; }
	yui_Dom.setStyle(this.nextImage, 'position', 'absolute');
	yui_Dom.setStyle(this.nextImage, 'left', 0);
	yui_Dom.setStyle(this.nextImage, 'top', 0);
	

	// create a new image (forground) directly above the previous
	this.currImage = document.createElement('img');
	yui_Dom.setStyle(this.currImage, 'visibility', 'hidden');
	yui_Dom.setStyle(this.currImage, 'position', 'absolute');
	yui_Dom.setStyle(this.currImage, 'left', 0);
	yui_Dom.setStyle(this.currImage, 'top', 0);
	yui_Dom.setStyle(this.currImage, 'zIndex', 1);
	this.currImage.src = this.nextImage.src;

	// we append the image as a sibling to original
	this.currImage = this.container.appendChild(this.currImage);
	
	// display it
	yui_Dom.setStyle(this.currImage, 'visibility', 'visible');

	// and start the show
	yui_Event.onContentReady(this.currImage, cue);

	return this;
};