// JavaScript Document
var $slideshow = null;
var $controls = {
					'container' : null,
					'play' : null,
					'pause' : null,
					'next' : null,
					'prev' : null
				};
var slideshowTimeout = null;
var slideInterval = 10000;

$(document).ready(function(){
	$slideshow = $('#slideshow');
	$('img:first', $slideshow).addClass('active');
	$('img:gt(0)', $slideshow).css({opacity: 0.0});
	$controls.container = $("#controls");
	$controls.play = $("#controls #play");
	$controls.pause = $("#controls #pause");
	$controls.next = $("#controls #next");
	$controls.prev = $("#controls #prev");
	
	$controls.play.click(function(){
		if($controls.container.hasClass('paused'))
		{
			$controls.container.removeClass('paused');
		}
		if(!$controls.container.hasClass('playing'))
		{
			$controls.container.addClass('playing');
		}
		if(slideshowTimeout == null)
		{
			slideshowTimeout = setInterval(function(){slideshow_gotoNext(true)}, slideInterval);
		}
	}).click();
	$controls.pause.click(function(){
		if(!$controls.container.hasClass('paused'))
		{
			$controls.container.addClass('paused');
		}
		if($controls.container.hasClass('playing'))
		{
			$controls.container.removeClass('playing');
		}
		if(slideshowTimeout != null)	//simple as clearing the timeout
		{
			clearInterval(slideshowTimeout);
			slideshowTimeout = null;
		}
	});
	$controls.next.click(function(){ slideshow_gotoNext(); });
	$controls.prev.click(function(){ slideshow_gotoPrev(); });
});

function slideshow_gotoNext(no_refresh)
{
	if($controls.container.hasClass('paused'))
	{
		$controls.container.removeClass('paused');
	}
	if(!$controls.container.hasClass('playing'))
	{
		$controls.container.addClass('playing');
	}

	if(!no_refresh && slideshowTimeout != null)	//dont pass anything if we want to reset the interval length.  good for click events
	{
		clearInterval(slideshowTimeout);
		slideshowTimeout = null;
	}

	var $active = $('#slideshow IMG.active');

	if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

	// use this to pull the images in the order they appear in the markup
	var $next =  $active.next().length ? $active.next()
		: $('#slideshow IMG:first');

	$active.addClass('last-active').animate({opacity: 0}, 1000);

	$next.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0}, 1000, function() {
			$active.removeClass('active last-active');
			if(!no_refresh && slideshowTimeout == null)
			{
				slideshowTimeout = setInterval(function(){slideshow_gotoNext(true)}, slideInterval);
			}
		});

}
function slideshow_gotoPrev()
{
	if($controls.container.hasClass('paused'))
	{
		$controls.container.removeClass('paused');
	}
	if(!$controls.container.hasClass('playing'))
	{
		$controls.container.addClass('playing');
	}

	if(slideshowTimeout != null)	//reset the interval length.  good for click events
	{
		clearInterval(slideshowTimeout);
		slideshowTimeout = null;
	}

	var $active = $('#slideshow IMG.active');

	if ( $active.length == 0 ) $active = $('#slideshow IMG:first');

	// use this to pull the images in the order they appear in the markup
	var $prev =  $active.prev().length ? $active.prev()
		: $('#slideshow IMG:last');

	$active.addClass('last-active').animate({opacity: 0}, 1000);

	$prev.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0}, 1000, function() {
			$active.removeClass('active last-active');
			if(slideshowTimeout == null)
			{
				slideshowTimeout = setInterval(function(){slideshow_gotoNext(true)}, slideInterval);
			}
		});

}