/*
	Description: Change all the divs with the class "slideshow" to a slide show
		The slideshow div must have a width and an height set.
		Each slide must be a div.
		
		You need jQuery <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

	Author: Simon Levesque
	Web Site: http://www.simonlevesque.com
	
	Copyright: © 2010 Simon Lévesque
	License: http://creativecommons.org/licenses/by/3.0/
*/

/*
	Example:
		<div class="slideshow" style="width:300px; height:100px;">
			<div>
				<ul><li>One element</li><li>Another element</li></ul></div>
			<div><img src="" alt=""></div>
		</div>
*/

jQuery(document).ready(slideshow_init);

var slideshow_count = 0;

function slideshow_init() {
	// For all slides
	jQuery('.slideshow').each(function (key, value) {
		var width = jQuery(value).width();
		var height = jQuery(value).height();
		// Clip the excess
		jQuery(value).css('overflow', 'hidden');
		
		// For all the divs
		jQuery('div', value).each(function (key, value) {
			var thisValue = jQuery(value);
			
			// Set to relative position
			thisValue.css('position', 'relative');
			
			// Hide all not the first
			if (key != 0) {
				thisValue.hide();
			}
		});
	});
	
	// Set the timer
	setTimeout(slideshow_nextImage, 5000);
}

function slideshow_nextImage() {
	var old = slideshow_count++;
	
	// For all slides
	jQuery('.slideshow').each(function (key, value) {
		var width = jQuery(value).width();
		var height = jQuery(value).height();			
		
		// Get the old and next div
		var images = jQuery('div', value);
		var oldimg = old % images.length;
		var curimg = slideshow_count % images.length;
		
		var oldElement = jQuery(images[oldimg]);
		var newElement = jQuery(images[curimg]);
		
		// if the first comming back
		if (curimg == 0) {
			// Hide old
			var elementheight = newElement.height();
			oldElement.css('top', -elementheight);
		} else {				
			// Show new
			oldElement.hide();
			var elementheight = oldElement.height();
			oldElement.show();
			newElement.css('top', -elementheight);
		}
		
		// Hide old (common)
		oldElement.animate({left: -width}, {duration: 2000, complete: function() {
			oldElement.hide();
			newElement.css('top', 0);
		}});
		
		// Show new (common)
		newElement.css('left', width);
		newElement.show();
		newElement.animate({left: 0}, {duration: 2000});
		
	});
	
	// Set the timer
	setTimeout(slideshow_nextImage, 5000);
}