$(document).ready(function(){
	
		// Initialize all the variables we'll use throughout the script
		var thumbs = $('ul#thumbs');
		var galleryList = $('ul#thumbs li');
		var galleryThumbs = $('ul#thumbs li a');
		var galleryFullSize = $('div#image, div#fullSizeImage p, div#fullSizeImage ul');
		var galleryCurrent = 0;
		var galleryWidth = 0;
		var galleryCenter = 470;
		var scrollSpeed = 500;

		// Left-align the photo title with the full-sized image
		leftAlignPhotoTitle();

		// Hide the image & fade it back in
		galleryFullSize.hide().delay(500).fadeIn(2500);
		
		// Highlight the first thumbnail
		$('ul#thumbs li:first-child').addClass('current');
		
		// Previous arrow on the full-sized image
		$('div#fullSizeImage ul li:first-child a').click(function(){
			loadNewImageByNumber((galleryCurrent != 0) ? (galleryCurrent - 1) : (galleryList.length - 1));
			return false;
		});
		
		// Next arrow on the full-sized image
		$('div#fullSizeImage ul li:last-child a').click(function(){
			loadNewImageByNumber((galleryCurrent != galleryList.length - 1) ? (galleryCurrent + 1) : (0));
			return false;
		});
		
		// Gallery thumbs
		galleryThumbs.each(function(index, thumb){
			$(thumb).click(function(){
				loadNewImageByNumber(index);			
				return false;
			});
		});

		// Scroll to the left
		$('ul#galleryNav li:first-child a').click(function(){
			var thumbsLeft = thumbs.position().left * -1;
			scrollList(thumbsLeft - 200, thumbsLeft);
			return false;
		});
		
		// Scroll to the right
		$('ul#galleryNav li:last-child a').click(function(){
			var thumbsLeft = thumbs.position().left * -1;
			scrollList(thumbsLeft + 800, thumbsLeft);
			return false;
		});
		
		var scrollList = function(newLeft, oldLeft){	
		
			// Calculate the width of the thumbnail gallery			
			if (galleryWidth == 0) {
				galleryList.each(function(index, li){
					galleryWidth += $(li).outerWidth();
				});
			}
			
			var thumbsLeft = thumbs.position().left;
			var rightBoundary = (galleryWidth - 940) * -1;
			var visualLeft = newLeft + thumbsLeft;
			var visualCenter = visualLeft - galleryCenter;

			// Scroll Right
			if (newLeft > oldLeft) {
			
				// If Over Half-Way
				if (visualLeft > galleryCenter) {
				
					// Scroll to the right boundary
					if ((thumbsLeft - visualCenter) < rightBoundary) {
						thumbs.animate({ left: rightBoundary }, scrollSpeed);
						
					// Scroll to the middle
					} else {
						thumbs.animate({ left: ('-=' + visualCenter) }, scrollSpeed);
					}
				}
			// Scroll Left
			} else {
			
				// If Under Half-Way
				if (visualLeft < galleryCenter) {
				
					// Scroll to the left boundary
					if ((thumbsLeft - visualCenter) > 0) {
						thumbs.animate({ left: 0 }, scrollSpeed);
						
					// Scroll to the middle
					} else {
						thumbs.animate({ left: ('-=' + visualCenter) }, scrollSpeed);
					}
				}
			}
		};
		
		var loadNewImageByNumber = function(imgNumber){
			var currentImage = $(galleryThumbs[galleryCurrent]);
			var newImage = $(galleryThumbs[imgNumber]);
		
			// Scroll the thumbs into view
			scrollList(newImage.position().left, currentImage.position().left);
		
			// Update the counter
			galleryCurrent = imgNumber;
		
			// Highlight the selected thumbnail
			$(galleryList[imgNumber]).addClass('current').siblings().removeClass('current');
			
			// Fade out the current full-sized image
			galleryFullSize.fadeOut('slow');
			
			// Load the new full-sized image
			$.ajax({
				url: $(galleryThumbs[imgNumber]).attr('href'),
				data: "type=image",
				success: function(data) {
				
					// Update the html for the image & the title
					$('div#image').html(data).next().html($(galleryThumbs[imgNumber]).attr('title'));

					// Left-align the photo title with the full-sized image
					leftAlignPhotoTitle();
					
					// Fade everything back in
					galleryFullSize.hide().delay(2000).fadeIn('slow');
				}
			});
		};
		
	});
	
	function leftAlignPhotoTitle(){
		$('div#fullSizeImage p').css({ 'width': $('div#fullSizeImage img').attr('width') });
	}