// JavaScript Document

var toShowNum = 0;
var totalCount = -1;
var t;

// function to cycle through the images. This function is on a setInterval to repeat itself.
function play() {
	var toFade = jQuery('.toFade');
	// We're going backwards here, so start at the totalCount and work down to 0
	if ( toShowNum > 0 ) {
		toShowNum = toShowNum - 1;
	} else { toShowNum = totalCount; };
	// Fade out top image, remove it.
	toFade.fadeOut('slow',function(){ jQuery('.toFade').remove();});
	// Create new image
	var toShowImg = jQuery('#gallery ul li:eq('+toShowNum+')').find('img').attr('src');
	// Append the image, but add class="toShow", which will keep it hidden.
	jQuery('#largeImage').append('<img src="'+toShowImg+'" class="toShow" />');
	// Fade it in, change the class toFade.
	jQuery('.toShow').fadeIn('slow', function(){
		jQuery(this).attr('class','toFade');
	});
};

// Function to start and stop the gallery in "play" mode, when you click the play/pause button.
function startStop() {
	// if the play/pause button has class of PLAY, then it's OFF ( class of play because the play button is showing, not because it's playing )
	if ( jQuery(this).hasClass('play') ) {
		// Change the class and background image to Pause.
		jQuery(this).attr('class','pause');
		jQuery(this).css({
			backgroundImage: 'url(/Images/Header/pause.png)'
		});
		// Hide the prev/next buttons. They interfere with the rotation.
		jQuery('#gallery_next').hide();
		jQuery('#gallery_prev').hide();
		// start rotation Play
		t = window.setInterval(play,3000);
	} else if ( jQuery(this).hasClass('pause') ) {
		// if the play/pause button has a class of PAUSE, then it's ON, because the Pause button is showing.
		jQuery(this).attr('class','play');
		jQuery(this).css({
			backgroundImage: 'url(/Images/Header/play.png)'
		});
		// Bring back the Prev/Next buttons.
		jQuery('#gallery_next').show();
		jQuery('#gallery_prev').show();
		// Stop the interval from firing function play.
		window.clearInterval(t);
	};
};

// Function for clicking on thumbnail images, shows Image, turns off play rotation.
function thumbClick() {
	// if play/pause button has class PAUSE, then it's ON. Turn it off.
	if ( jQuery('#startStop').hasClass('pause') ) {
		jQuery('#startStop').attr('class','play');
		jQuery('#startStop').css({
			backgroundImage: 'url(/Images/Header/play.png)'
		});
		jQuery('#gallery_next').show();
		jQuery('#gallery_prev').show();
		window.clearInterval(t);
	};
	// Basically the same code from the play function. Hide one image, show the other, blah blah.
	var clickSRC = jQuery(this).find('img').attr('src');
	toShowNum = jQuery(this).attr('class');
	jQuery('#largeImage').append('<img src="'+clickSRC+'" class="toShow" />');
	var toFade = jQuery('.toFade');
	toFade.fadeOut('slow',function(){ jQuery('.toFade').remove();});
	jQuery('.toShow').fadeIn('slow', function(){
		jQuery(this).attr('class','toFade');
	});
};

// Function for Next. Since we are going backwards, Next button is count - 1.
function nextClick() {
	var toFade = jQuery('.toFade');
	if ( toShowNum > 0 ) {
		toShowNum = toShowNum - 1;
	} else { toShowNum = totalCount; };
	toFade.fadeOut('slow',function(){ jQuery('.toFade').remove();});
	var toShowImg = jQuery('#gallery ul li:eq('+toShowNum+')').find('img').attr('src');
	jQuery('#largeImage').append('<img src="'+toShowImg+'" class="toShow" />');
	jQuery('.toShow').fadeIn('slow', function(){
		jQuery(this).attr('class','toFade');
	});
};
// Function for Prev. Since we are going backwards, Prev button is count + 1.
function prevClick() {
	var toFade = jQuery('.toFade');
	if ( toShowNum != totalCount ) {
		toShowNum++;
	} else { toShowNum = 0; };
	toFade.fadeOut('slow',function(){ jQuery('.toFade').remove();});
	var toShowImg = jQuery('#gallery ul li:eq('+toShowNum+')').find('img').attr('src');
	jQuery('#largeImage').append('<img src="'+toShowImg+'" class="toShow" />');
	jQuery('.toShow').fadeIn('slow', function(){
		jQuery(this).attr('class','toFade');
	});
};