$(document).ready(function() {		
	
	//Execute the slideShow, set 4 seconds for each images
	slideShow(3000);

});

function slideShow(speed) {


	//Set the opacity of all images to 0
	$('ul.slideshow li').hide();
	
	//Get the first image and display it (set it to full opacity)
	sl_show_img($('ul.slideshow li:first'));

	
	//Call the gallery function to run the slideshow	
	var timer = setInterval('gallery()',speed);
	
	//pause the slideshow on mouse over
	$('ul.slideshow img').hover(
		function () {
			clearInterval(timer);	
		}, 	
		function () {
			timer = setInterval('gallery()',speed);			
		}
	);
	
}
function sl_show_img(img){
	
	var p = $('ul.slideshow');
	var pw = p.width();
	var ph = p.height();
	var ih = img.height()+40;
	
	if( ih > ph ){
		p.css('height',ih);
	}
	
	//Set the fade in effect for the next image, show class has higher z-index
	var w = img.width();
	
	img.addClass('show').css({'left':(pw-w)/2}).fadeIn(1300);
	
}


function gallery() {

	
	//if no IMGs have the show class, grab the first image
	var current = ($('ul.slideshow li.show') ?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
	
	var next = (current.next().length) ? current.next() : $('ul.slideshow li:first');

	sl_show_img(next);
	
	//Hide the current image
	current.fadeOut(1300).removeClass('show');
}