$(document).ready(function() {

	//Execute the slideShow, set x milliseconds for each image
	slideShow(6000);
	
});

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"><h3></h3><p></p></div></li>');

	//Set the opacity of all images to 0
	$('ul.slideshow li').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('ul.slideshow li:first-child').css({opacity: 1.0});
	
	var title = $('ul.slideshow a:first-child').find('img').attr('title');
	var desc = $('ul.slideshow a:first-child').find('img').attr('alt');
	var photoCredit = setPhotoCredit(title);
	
	//Get the caption of the first image from REL attribute and display it
	$('#slideshow-caption h3').html(title).append('<span style="font-size:55%"> &nbsp; &mdash; &nbsp; (Photo credit: ' + photoCredit + ')</span>');
	$('#slideshow-caption p').html(desc);
		
	//Display the caption
	$('#slideshow-caption').css({opacity: 0.65, bottom:0});
	
	//Call the gallery function to run the slideshow	
	var timer = setInterval('gallery()', speed);
	var tOnHover, tOffHover;
	
	//pause the slideshow on mouse over
	$('ul.slideshow').hover(
		function (event) { // onhover
			tOnHover = event.timeStamp;
			clearInterval(timer); // clear the timer that was set with setInterval()
		}, 	
		function (event) { // offhover
			tOffHover = event.timeStamp;
			if ((tOffHover - tOnHover) > 500) {
				//alert("tOnHover = " + tOnHover + ", tOffHover = " + tOffHover);
				setTimeout('gallery()', 300); // wait x milliseconds, then call gallery()
			}
			tOnHover = 0; tOffHover = 0;
			timer = setInterval('gallery()', speed); // call gallery() every "speed" milliseconds
		}
	);
	
} // End: function slideShow()


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-child'));
	
	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first-child') :current.next()) : $('ul.slideshow li:first-child'));
	
	//Get next image caption
	var title = next.find('img').attr('title');	
	var desc = next.find('img').attr('alt');	
	
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
	
	//Hide the caption first, and then set and display the caption
	var toggleHideTime = 400; // toggle-time (hiding prev caption) [ms]
	var toggleShowTime = 650; // toggle-time (displaying next caption) [ms]
	var delayTime = 450; // delay between hiding prev caption and showing next [ms]
	
	var photoCredit = setPhotoCredit(title);
	
	$('#slideshow-caption').slideToggle(toggleHideTime, function () {
		$('#slideshow-caption h3').html(title).append('<span style="font-size:55%"> &nbsp; &mdash; &nbsp; (Photo credit: ' + photoCredit + ')</span>'); 
		$('#slideshow-caption p').html(desc); 
		$('#slideshow-caption').delay(delayTime).slideToggle(toggleShowTime); 
	});		
	
	//Hide the current image
	current.animate({opacity: 0.0}, 1000).removeClass('show');
	
} // End: function gallery()


function setPhotoCredit(title) {
	
	var credit;
	//console.log("setPhotoCredit(): title = " + title);
	
	if (title === "Eye of the Tiger") {
		credit = "Romy Stefano";
		$('#slideshow-caption h3').add('#slideshow-caption p').css({'padding-left':'18px', 'padding-right':'18px'}); // modified left/right padding
	} else {
		credit = "Gina Giulekas";
		$('#slideshow-caption h3').add('#slideshow-caption p').css({'padding-left':'4px', 'padding-right':'4px'}); // default padding
	}

	return credit;
	
} // End: setPhotoCredit()