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

	Clickshow.js: Click-through slideshow class that unobtrusively creates a fade-in/fade-out 
	slideshow.
	
	Author: Clifton Karnes
	
	Constructor: Clickshow({ options }). Slideshow should be instantiated after 
	the page is loaded. 
	
	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". 
		
	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:
	
	Requires: prototype.js and scriptaculous.js?load=effects
	
--------------------------------------------------------------------------------*/

var Clickshow = Class.create
({
	// Get any parameters that override the defaults, do some housekeeping and call showSlides().
	initialize: function(options)
	{
		this.options = Object.extend({ slideId: "clickslide", slideshowId: "clickshow"}, 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;

		// Hide all the slides to get ready for the show.
		for (var i = 0; i < this.length; i++)
		{
			$(this.options.slideId + i).hide();
		}
		
		// Show the first slide.
		// Effect.Appear($(this.options.slideId + this.n));
		$(this.options.slideId + this.n).show();
	},

	showNextSlide: function()
	{
		$(this.options.slideId + this.n).hide();

		// Increment the slide number.
		this.n++;
		
		// Get number of next slide. If we've reached the last slide, start over again.
		if (this.n >= this.length ){ this.n = 0; }
		
		// Fade next slide in.
		// Effect.Appear($(this.options.slideId + this.n));
		$(this.options.slideId + this.n).show();
	},
	
	showPreviousSlide: function()
	{
		$(this.options.slideId + this.n).hide();

		// Decrement the slide number.
		this.n--;
		
		// Get number of next slide. If we've reached the last slide, start over again.
		if (this.n < 0 ){ this.n = this.length - 1; }
		
		// Fade next slide in.
		// Effect.Appear($(this.options.slideId + this.n));
		$(this.options.slideId + this.n).show();
	}
});