// JavaScript Document

/*
Source: http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited
Modified by: Phil Allen 08/12/2010 for BAAMP
This code was modified to:
- Not show the transparent captions
- Be able to function regardless of how many photos there were for each project
However, a project has to have at least one photo. Photos need to be removed from last to first.
*/
$(document).ready(function() {		
	
	//Execute the slideShow
	slideShow1(5000);
	slideShow2(5010);
	slideShow3(5020);

});

function slideShow1(speed) {

	//Set the opacity of all images to 0
	$('ul.slideshow1 li').css({opacity: 0.0});

	//Get the first image and display it (set it to full opacity)
	$('ul.slideshow1 li:first').css({opacity: 1.0});
	//Finds out how many photos are on the page for this project by determining how many list items there are and assigns the total to numOfPics variable.
	var numOfPics = $("ul.slideshow1 li").length;

	//If there is more than one photo, the slide gallery runs to fade photos in and out. If there is only one photo, it displays and is clickable.
	if(numOfPics != 1) {
		runSlides1(speed);
	}
	
	//Call the gallery function to run the slideshow	
	function runSlides1() {
		var timer = setInterval('gallery1()',speed);
	
	//pause the slideshow on mouse over and resume slideshow on mouse out
	$('ul.slideshow1').hover(
		function () {
			clearInterval(timer);	
		}, 	
		function () {
			timer = setInterval('gallery1()',speed);			
		}
	);
}
}

function gallery1() {


	//if no IMGs have the show class, grab the first image and assign it to the variable current
	var current = ($('ul.slideshow1 li.show') ?  $('ul.slideshow1 li.show') : $('#ul.slideshow1 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() : $('ul.slideshow1 li:first');
	//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 current image
	current.animate({opacity: 0.0}, 1000).removeClass('show');
}




function slideShow2(speed) {

	//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});
	//Finds out how many photos are on the page for this project by determining how many list items there are and assigns the total to numOfPics variable.
	var numOfPics = $("ul.slideshow2 li").length;

	//If there is more than one photo, the slide gallery runs to fade photos in and out. If there is only one photo, it displays and is clickable.
	if(numOfPics != 1) {
		runSlides2(speed);
	}
	
	//Call the gallery function to run the slideshow	
	function runSlides2() {
		var timer = setInterval('gallery2()',speed);
	
	//pause the slideshow on mouse over and resume slideshow on mouse out
	$('ul.slideshow2').hover(
		function () {
			clearInterval(timer);	
		}, 	
		function () {
			timer = setInterval('gallery2()',speed);			
		}
	);
}
}

function gallery2() {


	//if no IMGs have the show class, grab the first image and assign it to the variable current
	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() : $('ul.slideshow2 li:first');
	//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 current image
	current.animate({opacity: 0.0}, 1000).removeClass('show');
}


function slideShow3(speed) {

	//Set the opacity of all images to 0
	$('ul.slideshow3 li').css({opacity: 0.0});

	//Get the first image and display it (set it to full opacity)
	$('ul.slideshow3 li:first').css({opacity: 1.0});
	//Finds out how many photos are on the page for this project by determining how many list items there are and assigns the total to numOfPics variable.
	var numOfPics = $("ul.slideshow3 li").length;

	//If there is more than one photo, the slide gallery runs to fade photos in and out. If there is only one photo, it displays and is clickable.
	if(numOfPics != 1) {
		runSlides3(speed);
	}
	
	//Call the gallery function to run the slideshow	
	function runSlides3() {
		var timer = setInterval('gallery3()',speed);
	
	//pause the slideshow on mouse over and resume slideshow on mouse out
	$('ul.slideshow3').hover(
		function () {
			clearInterval(timer);	
		}, 	
		function () {
			timer = setInterval('gallery3()',speed);			
		}
	);
}
}

function gallery3() {


	//if no IMGs have the show class, grab the first image and assign it to the variable current
	var current = ($('ul.slideshow3 li.show') ?  $('ul.slideshow3 li.show') : $('#ul.slideshow3 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() : $('ul.slideshow3 li:first');
	//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 current image
	current.animate({opacity: 0.0}, 1000).removeClass('show');
}