/**
 * Metalier Image Gallery
 *
 */
(function($) {
	
	$.fn.gallery = function(customSettings) {
		
		// Settings _____________________________________________________________________
		
		// Default settings for entire component
		$.fn.gallery.defaultSettings = {
			imageIndex: 0
		};
		
		// Overwrite defaults with any user-defined settings, for this component set
		var settings = $.extend({}, $.fn.gallery.defaultSettings, customSettings);
		
		
		
		// Gallery Constructor _________________________________________________________
		this.each(function() {
			
			// Variables ________________________________________________________________
			// Objects
			var instance, thumbnails, display, butprev, butnext, caption, counter, loading;
			// Properties
			var imageLibrary, imageIndex, loadingInterval, loadingFrame;
			
			
			// Methods __________________________________________________________________
			
			/* [init]
			 * Replace input fields with new markup, save references and properties
			 */
			function init() {
				// Set objects
				thumbnails	= $('ul', instance);
				display		= $('.feature .full .viewer');
				butprev		= $('.feature li.prev a');
				butnext		= $('.feature li.next a');
				caption		= $('.feature .meta .caption');
				counter		= $('.feature .meta .counter');
				
				// Set properties
				imageLibrary	= [];
				imageIndex		= settings.imageIndex;
				loadingFrame	= 0;
				
				// Create the loading icon
				loading	= $('<div class="loading"><div></div></div>');
				display.prepend(loading);
				loading.hide();
				
				// Create the image library
				$('ul li a', instance).each(function() {
					var img		= {};
					img.title	= $(this).attr('title');
					img.src		= $(this).attr('href');
					img.loaded	= false;
					imageLibrary.push(img);
				});
				
				// Adjust main image
				//centerDisplayImage();
				
				// Bind events
				butprev.click(function() {
					if (imageIndex > 0) {
						loadImage(imageIndex - 1);
					}
					return false;
				});
				butnext.click(function() {
					if (imageIndex < (imageLibrary.length - 1)) {
						loadImage(imageIndex + 1);
					}
					return false;
				});
				$('ul li a', instance).click(function(e) {
					var index = $('li', thumbnails).index($(this).parent());
					loadImage(index);
					return false;
				});
			}
			
			
			/* [centerDisplayImage]
			 * Moves the hero image into the center of the display
			 */
			function centerDisplayImage() {
				var img = $('img', display);
				
				var difX = 480 - img.width();
				var difY = 330 - img.height();
				if (difX > 0) {
					img.css('left', Math.round(difX / 2));
				}
				if (difY > 0) {
					img.css('top', Math.round(difY / 2));
				}
			}
			
			
			/* [showLoadingIcon]
			 * Shows the loading icon
			 */
			function showLoadingIcon() {
				loading.fadeIn(50);
				
				clearInterval(loadingInterval);
				loadingInterval = setInterval(animateLoadingIcon, 70);
			}
			
			/* [animateLoadingIcon]
			 * Animates the loading icon
			 */
			function animateLoadingIcon() {
				if (loading.is(':visible') == false) {
					clearInterval(loadingInterval);
					loadingFrame = 0;
				} else {
					var ypos = loadingFrame * -40;
					$('div', loading).css('top', ypos + 'px');
					loadingFrame = (loadingFrame + 1) % 12;
				}
			}
			
			
			/* [loadImage]
			 * When the user clicks a thumbnail image
			 * @param {String} index - 		Index of the new image
			 */
			function loadImage(index) {
				showLoadingIcon();
				
				if (index != imageIndex) {
					// Image data
					var img = imageLibrary[index];
					
					// Fade back the old image a bit
					var oldImage = $('img', display);
					oldImage.fadeTo({ duration: 50, easing: 'easeOutQuad' }, 0.3);
					
					// Select thumbnail
					$('.selected', thumbnails).removeClass('selected');
					$('li:eq(' +index+ ')', thumbnails).addClass('selected');
					
					// Load image
					var image = new Image();
					image.onload = function() {
						// Hide the loading icon
						loading.hide();
						
						// Hide old image
						oldImage.stop();
						oldImage.fadeOut({ 
							duration: 200, 
							easing: 'easeOutCubic', 
							complete: function() {
								$(this).remove();
							} 
						});
						
						// Show the new image
						var newImage = $(image);
						newImage.hide().fadeIn({ duration: 800, easing: 'easeOutCubic' });
						display.append(newImage);
						
						// Adjust the position
						//centerDisplayImage();
						
						// Display the new metadata
						caption.html(img.title);
						counter.html((index + 1) +' / '+ imageLibrary.length);
						
						// Sort out prev/next buttons
						if (index == 0) {
							butprev.addClass('disabled');
						} else if (imageLibrary.length > 1) {
							butprev.removeClass('disabled');
						}
						if (index == (imageLibrary.length - 1)) {
							butnext.addClass('disabled');
						} else if (imageLibrary.length > 1) {
							butnext.removeClass('disabled');
						}
						
						// Set this as the new image
						imageIndex = index;
						imageLibrary[index].loaded = true;
					};
					
					image.alt = img.title;
					image.src = img.src;
				}
				return false;
			}
			
			
			// Initial Setup ____________________________________________________________
			// Record the jQuery object
			instance = $(this);
			init();
			
		});
		
		return this;
	};
	
})(jQuery);