// Double slider with text overlay for homepage. 
// Very messy code, but it works. Encountered several strange bugs when trying to combine the functions.
// Adapted from http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited

// Delay function
function wait(msecs) {
	var start = new Date().getTime();
	var cur = start
	while(cur - start < msecs) {
		cur = new Date().getTime();
	}
} 

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').css({opacity: 1.0});
	
	//Get the caption of the first image from REL attribute and display it
	$('#slideshow-caption h3').html('<a href="/ranges.php?mgID=1"><img src="'+$('ul.slideshow a:first').find('img').attr('title')+'" /></a>');
	$('#slideshow-caption p').html('<a href="/ranges.php?mgID=1" style="position: relative; top: -10px;">'+$('ul.slideshow a:first').find('img').attr('alt')+'</a>');
		
	//Display the caption
	$('#slideshow-caption').css({opacity: 1.0, bottom:0});
	
	//Call the gallery function to run the slideshow	
	var timer = setInterval('gallery()',speed);
	
}

function slideShow2(speed) {

	
	//append a LI item to the UL list for displaying caption
	$('ul.slideshow2').append('<li id="slideshow-caption2" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

	//Set the opacity of all images to 0
	$('ul.slideshow2 li').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('ul.slideshow2 li:first').css({opacity: 1.0});
	
	//Get the caption of the first image from REL attribute and display it
	$('#slideshow-caption2 h3').html('<a href="/ranges.php?mgID=2"><img src="'+$('ul.slideshow2 a:first').find('img').attr('title')+'" /></a>');
	$('#slideshow-caption2 p').html('<a href="/ranges.php?mgID=2" style="position: relative; top: -10px;">'+$('ul.slideshow2 a:first').find('img').attr('alt')+'</a>');
		
	//Display the caption
	$('#slideshow-caption2').css({opacity: 1.0, bottom:0});
	
	//Call the gallery function to run the slideshow	
	var timer = setInterval('gallery2()',speed);
	
}

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'));

	//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') :current.next()) : $('ul.slideshow li:first'));
		
	//Get next image caption
	var title = '<a href="/ranges.php?mgID=1"><img src="'+next.find('img').attr('title')+'" /></a>';	
	var desc = '<a href="/ranges.php?mgID=1" style="position: relative; top: -10px;">'+next.find('img').attr('alt')+'</a>';	

	//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
	$('#slideshow-caption').slideToggle(0, function () { 
		$('#slideshow-caption h3').html(title); 
		$('#slideshow-caption p').html(desc); 
		$('#slideshow-caption').slideToggle(0); 
	});		

	//Hide the current image
	current.animate({opacity: 0.0}, 1000).removeClass('show');

}

function gallery2() {


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

	//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-caption2')? $('ul.slideshow2 li:first') :current.next()) : $('ul.slideshow2 li:first'));
		
	//Get next image caption
	var title = '<a href="/ranges.php?mgID=2"><img src="'+next.find('img').attr('title')+'" /></a>';	
	var desc = '<a href="/ranges.php?mgID=2" style="position: relative; top: -10px;">'+next.find('img').attr('alt')+'</a>';	

	//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
	$('#slideshow-caption2').slideToggle(0, function () { 
		$('#slideshow-caption2 h3').html(title); 
		$('#slideshow-caption2 p').html(desc); 
		$('#slideshow-caption2').slideToggle(0); 
	});		

	//Hide the current image
	current.animate({opacity: 0.0}, 1000).removeClass('show');

}