/***************************************************************
Basic Slideshow

Defines slideshow object and instantiates it when
document is ready

Dependent on JQuery and slideshow.css

HTML must be formatted as follows:
<div id="slideshow">
  <div class="active">
    <img src="image.jpg"... />
    <p>Optional description or other html elements can go here</p>
  </div>
  <div>
    <img src="image2.jpg"... />
  </div>
  <!-- last div contains thumbnails -->
  <div>
    <a href="image.jpg"><img src="thumb.jpg"... /></a>
    <a href="image2.jpg"><img src="thumb2.jpg"... /></a>
  </div>
</div>
***************************************************************/


// create the slideshow object and start it.
// also attach events to "a" tags around thumbs
// to make that image active on hover
$(document).ready(function()
{
	var sh = new Slideshow("slideshow", "active", 7);
	var thumbs = $("#slideshow").find("div").last().find("a");
	for (var i = 0; i < thumbs.length; i++)
	{
		$(thumbs[i]).mouseover({index: i}, function(e)
		{
			sh.pause();
			sh.changeActive(e.data.index);
		});
		$(thumbs[i]).mouseout(function()
		{
			sh.start();
		});
		$(thumbs[i]).click(function()
		{
			return false;
		});
	}
	sh.start();
});


// -- Slideshow object --
// pContainerID is id of div tag containing slideshow
// pActiveClass is name of CSS class applied to active image
// pDelay is number of seconds to display each image
function Slideshow(pContainerID, pActiveClass, pDelay)
{
	this.containerID = pContainerID;
	this.activeClass = pActiveClass;
	this.delay = pDelay * 1000;
	this.divs = $("#" + this.containerID).find("div");
	this.thumbs = $(this.divs).last().find("a");
	this.lastImg = this.divs.length - 2;
	this.current = 0;
	this.timer = null;
}


// starts the slideshow
Slideshow.prototype.start = function()
{
	if (this.timer == null)
	{
		var t = this;
		this.timer = setInterval(function(){t.changeActive();}, t.delay);
	}
}


// pauses the slideshow
Slideshow.prototype.pause = function()
{
	clearInterval(this.timer);
	this.timer = null;
}


// change the active image on the slideshow to the
// index passed. if index is null, make next image
// in slideshow active
Slideshow.prototype.changeActive = function(index)
{
	if (index == null)
	{
		index = this.current + 1;
		if (index > this.lastImg)
		{
			index = 0;
		}
	}
	if (index != this.current)
	{
		$(this.divs[this.current]).hide("slide", { "direction": "left", "easing": "easeInOutQuart" }, 750);
		$(this.divs[index]).show("slide", { "direction": "right", "easing": "easeInOutQuart" }, 750);
		$(this.thumbs[this.current]).removeClass(this.activeClass);
		$(this.thumbs[index]).addClass(this.activeClass);
		this.current = index;
	}
}