jQuery(document).ready(function() {
	
	galleryInit();
	imageSwap();
	
});

/*
	TODO 	Add different types of image navigation (arrows, next - previous, etc...)
			Add onKeyPress for gallery navigation
			Add active state to thumbnail
*/

function galleryInit() {
	
	// Set images to display none as soon as they are available
	var images = jQuery('.pr-galleryfullsize img, .pr-thumbs img');
	var caption = jQuery('.pr-caption');
	
	// Add in the thumb spinning container
	var thumbLoading = '<span class="thumb-loading-wrapper"><span class="thumb-loading-spinner"></span></span>';
	jQuery('.pr-thumbs a').append(thumbLoading);
	
	// Add selected class to first thumb
	jQuery('.pr-thumbs a img:first').addClass('selected')
	
	// Run the galleryLoaded function if images are loaded and complete
	var imgsLoaded = images.load(galleryLoaded());
	if (imgsLoaded.complete) {galleryLoaded()}
}

function galleryLoaded() {

	// Fade the images in
	var images = jQuery('.pr-galleryfullsize img, .pr-thumbs img');
	var caption = jQuery('.pr-caption');
	images.fadeIn('slow');
	caption.fadeIn('slow');
}

// function thumbSelected() {
// 	jQuery('.pr-thumbs a').click(function(){
// 		jQuery('.pr-thumbs a').removeClass('selected');
// 		jQuery(this).addClass('selected');
// 	});
// }

function imageSwap() {
	
	// When a thumbnail gets clicked
	jQuery('.pr-thumbs a').click(function(){
				
		// Set the height of the gallery
		var gallery = jQuery('.pr-gallery');
		var galleryHeight = gallery.height();
		gallery.height(galleryHeight);
		
		// Gather some variables
		var thumb = jQuery(this);
		var thumbIMG = jQuery('img', this);
		var lgImage = jQuery('.pr-galleryfullsize img');
		var caption = jQuery('.pr-caption');
		var href = thumb.attr('href');	
		var title = thumbIMG.attr('title');
		var src = lgImage.attr('src');
		
		// Add the loading class to the thumb
		thumb.addClass('loading');
		
		// Add selected class to the thumb img
		jQuery('.pr-thumbs img').removeClass('selected');
		jQuery('img', this).addClass('selected');
		
		// Size the spinner element to the thumbnail size for centering
		var loaders = jQuery('.thumb-loading-wrapper, .thumb-loading-spinner');
		var imgHeight = thumb.children('img').height();
		var imgWidth = thumb.children('img').width();
		var loaderCSS = {
			width: imgWidth,
			height: imgHeight
		}
		loaders.css(loaderCSS);
		
		// Test to see if the thumb that was clicked is not already showing
		if(href !== src) {
			
			// Fade the caption and insert the new caption text
			caption.fadeOut('fast', function(){
				caption.css('display', 'none').html(title);
			});
			
			// Fade the large image and change out the src attribute
			lgImage.fadeOut('fast', function(){
				lgImage.css('display', 'none').attr('src', href);
				
				// Once the large image has finished loading...
				lgImage.load(function(){
					
					// Remove the thumb's loading class
					thumb.removeClass('loading');
					
					// Animate the height of the gallery to match height of large image
					var lgImageHeight = lgImage.height()+39;
					gallery.animate({
						height: lgImageHeight
					}, 250, function(){
						
						// Fade the image in
						lgImage.fadeIn('slow');
						caption.fadeIn('slow');
					});
				});
			});
		} else {
			thumb.removeClass('loading');
		}
		return false;
	});	
}