/*--------------------------------------------------------------------------------

	Slideshow.js
	
	Description: A simple slideshow class that unobtrusively creates 
	a fade-in/fade-out slideshow.
	
	Author: Clifton Karnes
	
	Optional Constructor Arguments:
	
		slideshowId: This is the id of the div that contains the slide show 
		elements. "slideshow" is the default. 
		
		slideId: This is the id name for each slide (with a number concatenated 
		to it). "slide" is the default.
		
		wait: This is the default pause for displaying each slide. 5 is the 
		default.
	                                                               
	Instantiation: With the defaults: new Slideshow(); To override 
	the defaults, pass an object literal in the constructor: like 
	this new Slideshow({ wait: 10 })

	HTML Setup: In the HTML, the slideshow is set up like this (using the defaults):
		
		<div id="slideshow">
			<div id="slide0><img src="slides/slide01.jpg" /></div>	
			<div id="slide1><img src="slides/slide02.jpg" /></div>	
			<div id="slide2><img src="slides/slide03.jpg" /></div>	
		</div>
		
	CSS Setup: In the CSS, simply create a container for the slides that 
	specifies the size of the slides and marks the overslow as hidden:
	
		#slideshow
		{
		 	width: 580px;
		 	height: 206px;
		 	overflow: hidden;
		}

	Requires: prototype.js and scriptaculous.js
	
--------------------------------------------------------------------------------*/

var Slideshow = Class.create
({
	// Get any parameters that override the defaults, do some housekeeping and call showSlides().
	initialize: function(options)
	{
		this.options = Object.extend({ slideId: "slide", slideshowId: "slideshow", wait: 5 }, options || {});

		// This is the counter for the slides.
		this.n = 0
		
		// this.length tells us how many slides to show.
		this.length = $$("#" + this.options.slideshowId  + " div").length;
		
		// How many seconds to show each slide.
		this.delay = this.options.wait * 1000;
		
		// We'll need this bound function later to pass to setTimeout.
		this.f = this.showSlides.bind(this);
		
		// Hide all the slides to get ready for the show.
		for (var i = 0; i < this.length; i++)
		{
			$(this.options.slideId + i).hide();
		}
		
		// Call the showSlides method to actually show the slides.
		this.showSlides();
	},

	showSlides: function()
	{
		// if we've reached the last slide, start over again.
		if (this.n >= this.length ){ this.n = 1; }
		
		// Show the slide.
		Effect.Appear($(this.options.slideId + this.n), { queue: 'end' });
		
		// After waiting for this.delay, fade the slide.
		setTimeout("Effect.Fade('" + this.options.slideId + this.n + "', { queue: 'end' })", this.delay); 
		
		// Increment the slide counter.
		this.n++;
		
		// Recursively call the bound version of showSlides() to show the next slide.
		setTimeout(this.f, this.delay);
	}
});