var slideShowTimer;
var TIME_BETWEEN_SLIDES = 4000;
var TIME_BETWEEN_GALLERY_SCROLL = 750
var GALLERY_ROW_HEIGHT = 140;
var GALLERY_COL_WIDTH = 140;
var IMAGES_PER_ROW = 4;
var currImg = 0;

$(document).ready(function()
{
	$('img#fake').attr('src', images[currImg]);
	$('img#theImage').attr('src', images[currImg]);
	setupGalleryImages();
	disableRightClicks();
	setupGalleryButtons();
	slideShowTimer = window.setTimeout(slideShow, TIME_BETWEEN_SLIDES);
});

/*
* This function sets up the gallery's images
*/
function setupGalleryImages()
{
	var gallery = $('#imgGallery');
	
	$(gallery).css('min-width', IMAGES_PER_ROW * GALLERY_COL_WIDTH + 100);
		
	var imgInRow = 0;
	$(images).each(function(index, element) 
	{
		imgInRow++;
		$(gallery)
			.append('<span class="galleryImg"><img src="' + element + '" class="galleryImg" /></span>')
			.find('img.galleryImg:last')
			.click(function(e) 
			{
				transitionSlide(element);
				window.clearTimeout(slideShowTimer);
			});

		if(imgInRow % IMAGES_PER_ROW == 0 && imgInRow > 0)
			$(gallery).append('<div style="clear: both;">&nbsp;</div>');
	});
	$('img.galleryImg:first').addClass('highlightedImg');
}

/*
* This function sets up the gallery's scroll buttons.
*/
function setupGalleryButtons()
{
	var gallery = $('#imgGallery');
	var vertRowMovement = gallery.find('span.galleryImg').first().outerHeight(true) + 16;
	// line above assumes that the first image is the tallest (or that all images are the same height)
	// +16 due to the breaking div between each row
	var numRows = Math.floor(images.length * 1.0 / IMAGES_PER_ROW);
	// the 1.0 above forces a decimal
	var up = $('#upBtn');
	var down = $('#downBtn');
	var minTop = -1 * numRows * vertRowMovement;
	updateScrollButtons(minTop);
	
	up.click(function(e) {
		if(gallery.position().top < 0)
		{
			gallery.stop(true, true).animate(
				{'top': gallery.position().top + vertRowMovement},
				TIME_BETWEEN_GALLERY_SCROLL, 
				null, 
				function()
				{
					if(gallery.position().top > 0 && gallery.position().top <= vertRowMovement)
						gallery.animate({'top': 0}, 250);

					updateScrollButtons(minTop);
				});
		}
		
		updateScrollButtons(minTop);
	});

	down.click(function(e) {
		if(gallery.position().top > minTop)
		{
			gallery.stop(true, true).animate(
				{'top': gallery.position().top - vertRowMovement},
				TIME_BETWEEN_GALLERY_SCROLL,
				null,
				function()
				{
					if(gallery.position().top <= minTop)
						gallery.animate({'top': minTop}, 250);
						
					updateScrollButtons(minTop);
				});
		}
		
		updateScrollButtons(minTop);
	});
}

/*
* Updates the gallery scroll buttons.
*/
function updateScrollButtons(minTop)
{
	var gallery = $('#imgGallery');
	if(gallery.length > 0)
	{
		var up = $('#upBtn');
		var down = $('#downBtn');
		var top = gallery.position().top;
	
		if(top < 0) // it has already been scrolled down some, or is 
			up.stop(true, true).fadeTo(250, 1);
		else // it is at the top
			up.stop(true, true).fadeTo(250, .5);
		
		if(top > minTop) // it has room to scroll down some
			down.stop(true, true).fadeTo(250, 1);
		else // it is at the bottom
			down.stop(true, true).fadeTo(250, .5);
	}
}

/*
* This function disables right click context menus on all of the images using this script,
* to prevent saving/prints/etc.
*/
function disableRightClicks()
{
	$('img#theImage').contextMenu('myMenu', 
		{onContextMenu : 
			function(e){return false;}, 
		 onShowMenu:
			function(e){return false;}
		});
	$('img#fake').contextMenu('myMenu', 
		{onContextMenu : 
			function(e){return false;}, 
		 onShowMenu:
			function(e){return false;}
		});
	$('img.galleryImg').contextMenu('myMenu', 
		{onContextMenu : 
			function(e){return false;}, 
		 onShowMenu:
			function(e){return false;}
		});
}

/*
* This function begins the slideshow for the gallery.
*/
function slideShow()
{
	if(slideShowTimer)
		window.clearTimeout(slideShow);
	
	slideShowTimer = window.setTimeout(slideShow, TIME_BETWEEN_SLIDES);
	currImg++;
	currImg = currImg % images.length;
	
	transitionSlide(images[currImg]);
}

/*
* This function causes the fade transition between the fake and real images,
* giving a slide show effect for exactly one frame.
*/
function transitionSlide(newImg)
{
	var $selectedImg = $('img.galleryImg[src="' + newImg + '"]');
	var $notSelected = $('img.galleryImg').removeClass('highlightedImg');
	$selectedImg.addClass('highlightedImg');
	//$('img.galleryImg[src!="' + newImg + '"]').removeClass('highlightedImg');
	var img = $('#theImage');
	var fake = $('#fake');
	var spinner = $('#spinner')

	$(spinner).show();
	$(fake).stop(true, true);
	$(fake).css('opacity', 0);
	$(img).stop(true, true);
	$(img).css('opacity', 1);

	$(fake).attr('src', newImg);
	$(fake)
		.animate(
			{'opacity': 1}, 
			TIME_BETWEEN_SLIDES/2);
		
	$(img)
		.animate(
			{'opacity': 0}, 
			TIME_BETWEEN_SLIDES/2,
			null,
			function()
			{
				$(img).attr('src', newImg);
				$(img).css('opacity', 1);
				$(fake).css('opacity', 0);
				$(spinner).hide();
			});
}