// JavaScript Document

// This is for the image rotator on the home/splash page.

// Some global variables to help with the animations
var currentSlide = 1;
var totalSlides = 0;
var autoPlay = true;
var timePassed = 0;
var timeToChange = 8000;
var userClicked = false;
var isIE = false;

if(document.attachEvent){
	isIE = true;
}


function autoAdvance(){
	// Check 
	if(window.timePassed == window.timeToChange){
		window.timePassed = 0;
		if(window.currentSlide == window.totalSlides){
			window.currentSlide = 0;
		}
		if( window.autoPlay == true){
			window.userClicked = false;
			$('.navButtons a.nav_item:nth-child('+ (window.currentSlide + 1) +')').trigger('click');
			endProgressBar();
			startProgressBar();
		}
	}else{
		window.timePassed += 1000;	
	}
}// End of autoAdvance



/*
 * Stop the progress bar
 */
function endProgressBar(){
	$('.progressBar').stop();
	$('.progressBar').css('width', 950);
}

/**
 * Start the progress bar
 *
 * @param Integer bartime The total animation time of the progress bar.
 */
function startProgressBar( barTime ){
	var barAnimate = (barTime)? barTime:(window.timeToChange.valueOf() + 1000);
	$('.progressBar').animate({width: 0}, barAnimate);
}



// First I want to make sure that the DOM is ready and that the images are loaded.
$(document).ready(function(){
				setInterval(autoAdvance, 1000);
				
				$('.photos').hover(
								function(){
//									window.autoPlay = false;		
//									$('#slideShow').removeClass('autoplay');
//									$('.playPause a').removeClass('pause');
//									$('.playPause a').addClass('play');
									// Animate the controls down.
									$('.controls').animate({bottom: -39},200);
//									// Animate the info panel down.
//									$('.info').animate({top: 5},300);
//									endProgressBar();
									
								},
								function(){
//									window.autoPlay = true;
//									window.userClicked = false;
//									window.timePassed = 0;
//									$('#slideShow').addClass('autoplay');
//									$('.playPause a').removeClass('play');
//									$('.playPause a').addClass('pause');
//									// Animate the info panel up.
//									$('.info').animate({top: -40},300);
//									startProgressBar();
									// Animate the controls up.
									$('.controls').animate({bottom: -5},200);
					});
				
				// Create a photo line-up
				$('.photos img.slideShowPhoto').each(function(index){
						var photowidth = $('#slideShow').width();
						var photoHeight = $('#slideShow').height();
						var photoPosition = index * photowidth;
						$('.photos').css('width',photowidth + photoPosition);
						$(this).css({'left': photoPosition + "px"});
						//Count how many photos there are, then append a nav item to the
						// navigation buttons
						$('.controls .navButtons').append('<a class="nav_item"></a>');
						window.totalSlides = index + 1;
				 });
				
				
				
				// Now set up an onclick event for the nav links.
				$('.controls .navButtons a.nav_item').click(function(){
					
					if(window.timePassed != 0){
						window.userClicked = true;
					}
					
					// Add the selected class, but first remove all selected classes
					$('.controls a.nav_item').removeClass('selected');
					
					// now add them.
					$(this).addClass('selected');
					
					// keep track of which nav button was clicked.
					var navClicked = $(this).index();
					var slideShowWidth = $('#slideShow').width();
					var distanceToMove = slideShowWidth * (-1);
					var newPhotoPosition = navClicked * distanceToMove + 'px';
					
					// Set the current slide value
					window.currentSlide = navClicked + 1;
					
					if(isIE){
						$('.photos').animate({left: newPhotoPosition},1000);
					}else{
						// Now change the photo position
						$('.photos').fadeOut(450);
						$('.photos').animate({left: newPhotoPosition},30, function(){$(this).fadeIn(450);});
					}
					
					if(window.userClicked == true){
						// Set autoplay to false
						window.autoPlay = false;		
						$('#slideShow').removeClass('autoplay');
						$('.playPause a').removeClass('pause');
						$('.playPause a').addClass('play');
						
						// Animate the info panel down.
						$('.info').animate({top: 5},300);
						endProgressBar();
					}
				 });
				
				
				
				
				$('.controls .playPause a').click(function(){
						if( $(this).hasClass('play') ){
							window.autoPlay = true;
							window.userClicked = false;
							$('#slideShow').addClass('autoplay');
							$(this).removeClass('play');
							$(this).addClass('pause');
							
							// Animate the info panel down.
							$('.info').animate({top: -40},300);
							
							window.timePassed = window.timeToChange;
							window.autoAdvance();
							
				
						}else if( $(this).hasClass('pause') ){
							window.autoPlay = false;		
							window.userClicked = true;
							$('#slideShow').removeClass('autoplay');
							$(this).removeClass('pause');
							$(this).addClass('play');
							
							// Animate the info panel up.
							$('.info').animate({top: 5},300);
							endProgressBar();
							
						}
				});
				
				// Animate the controls up.
				$('.controls').animate({bottom: -5},600);
				
				
				
				/**
				 *Initialize the slideshow
				 */
				function initalizeSlideshow(){
					$('.controls a.nav_item:first').addClass('selected');
					$('.photos').fadeIn(1000);
					startProgressBar();
				}
				
				initalizeSlideshow();
			});