var timer;
var speed = 6000;
var prevSlide = 0;
var slideCount = 4;
var isAnimating = false;

function slideShow(speed) {


	//append a LI item to the UL list for displaying caption
	$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><div id="buttonBar"><img src="images/interface/emptyCircle.gif" onclick="changeSlide(0);" onMouseover="changeCursor();" onMouseout="defaultCursor();"/><img src="images/interface/emptyCircle.gif" onclick="changeSlide(1);" onMouseover="changeCursor();" onMouseout="defaultCursor();"/><img src="images/interface/emptyCircle.gif" onclick="changeSlide(2);" onMouseover="changeCursor();" onMouseout="defaultCursor();"/><img src="images/interface/emptyCircle.gif" onclick="changeSlide(3);" onMouseover="changeCursor();" onMouseout="defaultCursor();"/><img src="images/interface/emptyCircle.gif" onclick="changeSlide(4);" onMouseover="changeCursor();" onMouseout="defaultCursor();"/></div><a><h3></h3></a><div id="captionLow"><span id="captionText"></span> <a>Read More ></a></div></div></li><span id="slideshowBg"></span>');

	//Set the opacity of all images to 0
	$('ul.slideshow li').css({opacity: 1.0, left:700});
	$('#slideshow-caption').css({left:0});
	//Get the first image and display it (set it to full opacity)
	$('ul.slideshow li:first').css({opacity: 1.0, left:0});
	
	//Get the caption of the first image from REL attribute and display it
	$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
	$('#slideshow-caption a').attr('href', $('ul.slideshow a:first').find('img').attr('link'));
	$('#captionText').html($('ul.slideshow a:first').find('img').attr('alt'));	
	//Display the caption
	$('#slideshow-caption').css({opacity: 1.0, bottom:0});
	$('#buttonBar img').eq(0).addClass('current');
	for(var i=0;i<=slideCount;i++) {
		var slideTitle = $('ul.slideshow li').eq(i).find('img').attr('title');
		$('#buttonBar img').eq(i).attr('title', slideTitle);
	}	
	//Call the gallery function to run the slideshow	
	timer = setInterval('gallery()',speed);	
}

function changeSlide(slideNo) {

	gallery(slideNo);
	resume();

}
 

function resume() {
clearInterval(timer);
if(timer!=null) {
	timer = setInterval('gallery()',speed);
}
}



function changeCursor() {
document.body.style.cursor='pointer';
}

function defaultCursor() {
document.body.style.cursor='default';
}		

function gallery(slideNo) {
	if(!isAnimating) {
		isAnimating = true;
	//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;
	
	if(slideNo!=null) {
	if(slideNo!=prevSlide) {
	next = $('ul.slideshow li').eq(slideNo);

		}
		else {
			return;
		}
		
	} else {
		next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
		slideNo = current.index()+1;
		if(slideNo > 4) {
			slideNo=0;
		}
		
	}
	prevSlide = slideNo;
	
	//Get next image caption
	var title = next.find('img').attr('title');	
	var desc = next.find('img').attr('alt');
	var link = next.find('img').attr('link');

	//Set the fade in effect for the next image, show class has higher z-index
	next.css({left:700});
	next.addClass('show').animate({"left": "-=700px"}, 1000, function() {
		isAnimating = false;
	}); 

	$('#captionText').animate({opacity:0.0}, 300);
	$('#slideshow-caption a').animate({opacity:0.0}, 300, function() {
		$('#slideshow-caption h3').html(title);
		$('#slideshow-caption a').attr('href', link);
		$('#captionText').html(desc);
		$('#slideshow-caption a').animate({opacity:1.0}, 300);
		$('#captionText').animate({opacity:1.0}, 290);
		$('#slideshow-caption').hide();
		$('#slideshow-caption').show();	
	});

	$('#slideshow-caption').css({left:0});	
	$('#buttonBar img').removeClass('current');
	$('#buttonBar img').eq(slideNo).addClass('current');

	//Hide the current image
	current.animate({"left": "-=700px"}, 1000).removeClass('show');	
	}
}