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

	Slideshow.js: Slideshow class that unobtrusively creates a fade-in/fade-out 
	slideshow.
	
	Author: Clifton Karnes
	
	Constructor: Slideshow({ options }). Slideshow should be instantiated after 
	the page is loaded. There is no need to save a reference to the object, so 
	Slideshow can be instantiated with "new Slideshow()". To override any of 
	defaults, pass an object literal to the constructor. For example, to set the 
	wait to 8 seconds, , you'd instantiate the class like this: new 
	Slideshow({ wait: 8 });
	
	Options:
	
		slideshowId: This is the id of the div that contains the slide show 
		elements. The default is "slideshow". 
		
		slideId: This is the id name for each slide (with a number concatenated 
		to it). The default is "slide". 
		
		duration: This value determines how long the transition lasts in 
		seconds. The default is 1.
		
		wait: This is the pause in seconds for displaying each slide. The 
		default is 5.
	                                                               
	HTML: 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: 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?load=effects
	
--------------------------------------------------------------------------------*/

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", duration: 1, 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 - 1; 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 = 0; }
		
		// Show the slide.
		Effect.Appear($(this.options.slideId + this.n), { duration: this.options.duration, queue: 'end' });
		
		// After waiting for this.delay, fade the slide.
		setTimeout("Effect.Fade('" + this.options.slideId + this.n + "', { duration:" + this.options.duration + ", 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);
	}
});