/* =========================================================================
Title: picShow Plugin
Version: 1.0
Description: Adds gallery-type and carousel functionality to picShow control
Call: $('.picShowContainer').picShow({options});
Options:
	elementsToShow 		- # of elements to display at a given time
	imgContainer 			- Container where the full-size image is displayed
	tnContainer 			- Container housing thumbnails
	thumbnails 				- List elements of actual thumbnails
	descContainer			- Identifier for description container
	imgControlsClass	- Class for image controls container
	maxButtonClass		- Class for max button
	descButtonClass		- Class for description button
	prevButtonClass		- Class for previous button
	nextButtonClass		- Class for next button
	loadingClass			- Class to display when loading
	spacesToMove			- # of spaces to move on next / prev click
	timeToMove				- Time taken to move carousel (ms)
	lightboxSettings	- Image paths for lightbox plugin
============================================================================ */

(function($) {
	$.expr[':'].linkingToImage = function(elem, index, match) {
		return $(elem).is('a') && elem.href && (/\.(gif|jpe?g|png|bmp)$/).test(elem.href);
	};
	
	$.fn.picShow = function(options) {
		// Settings
		// -------------------------------------------------------- //
		var defaultSettings = {
			elementsToShow: 3,
			imgContainer: '.picShow_imgContainer',
			tnContainer: '.picShow_tnContainer',
			thumbnails: '.picShow_thumbnails ul li',
			descContainer: '.picShow_descContainer',
			imgControlsClass: 'picShow_imgControls',
			//maxButtonClass: 'picShow_maxButton',
			//descButtonClass: 'picShow_descButton',
			prevButtonClass: 'picShow_prev',
			nextButtonClass: 'picShow_next',
			loadingClass: 'loading',
			spacesToMove: 3,
			timeToMove: 1000,
			lightboxSettings: {
				imageLoading:	'../../images/loading.gif',
				imageBtnPrev:	'_addons/lightbox/lightbox-btn-prev.gif',
				imageBtnNext:	'_addons/lightbox/lightbox-btn-next.gif',
				imageBtnClose:'_addons/lightbox/lightbox-btn-close.gif',
				imageBlank:		'_addons/lightbox/lightbox-blank.gif'
			}},
		settings = $.extend({}, defaultSettings, options),
		
		// Variables
		// -------------------------------------------------------- //
		$container = this,
		$imgContainer = $(settings.imgContainer, $container),
		$tnContainer = $(settings.tnContainer, $container),
		$thumbnails = $(settings.thumbnails, $container),
		$descContainer = $(settings.descContainer, $container),
		$links = $($thumbnails).children('a'),
		$ul = $($tnContainer).children('div').children('ul'),
		elementWidth = $($thumbnails).width(),
		elementCount = $thumbnails.length,
		width = elementWidth * elementCount,
		index = 0,
		isChanging = false,
		isLoading = false;
		
		// Initialization
		// -------------------------------------------------------- //
		// Add previous and next buttons
		var prevButtonHtml = '<a class="' + settings.prevButtonClass + '" href="#prev">Previous</a>';
		var nextButtonHtml = '<a class="' + settings.nextButtonClass + '" href="#next">Next</a>';
		$($tnContainer).prepend('\n' + prevButtonHtml + '\n' + nextButtonHtml + '\n');	
		
		// Add max and desc buttons
		//var maxButtonHtml = '<a class="' + settings.maxButtonClass + '" href="#max">Maximize</a>';
		//var descButtonHtml = '<a class="' + settings.descButtonClass + '" href="#desc">Description</a>';
		var maxButtonHtml = '';
		var descButtonHtml = '';
		$($imgContainer).append('<div class="' + settings.imgControlsClass + '" />\n');
		$imgControls = $('.' + settings.imgControlsClass, $container);
		$($imgControls, $imgContainer).append('\n' + maxButtonHtml + '\n' + descButtonHtml + '\n');

		// Update container class
		$($container).addClass('js');
		
		// Set width of ul
		$($ul).width(width);
		
		// Set max button href for initial picture
		var href = $($imgContainer).children('img').attr('src');
		var title = $($imgContainer).children('img').attr('alt');
		$('.' + settings.maxButtonClass).attr({'href': href, 'title': title});
		$('.' + settings.maxButtonClass).lightBox({
			imageLoading:		settings.lightboxSettings.imageLoading,
			imageBtnPrev:		settings.lightboxSettings.imageBtnPrev,
			imageBtnNext:		settings.lightboxSettings.imageBtnNext,
			imageBtnClose:	settings.lightboxSettings.imageBtnClose,
			imageBlank:			settings.lightboxSettings.imageBlank});
		
		// Hide description
		$($descContainer).hide();
		
		// Previous Click
		// -------------------------------------------------------- //
		$('.' + settings.prevButtonClass, $container)
			.click(function() {
				if (elementCount > settings.elementsToShow && !isChanging) {
					isChanging = true;
											
					var left = parseInt($($ul).css("left").replace(/px$/,""));
					var moveLeft = left + (settings.spacesToMove * elementWidth);
					
					if (moveLeft >= (settings.spacesToMove * elementWidth)) {
						moveLeft = -1*width + (settings.elementsToShow * elementWidth);
					} else if (moveLeft > 0 && moveLeft < (settings.elementsToShow * elementWidth)) {
						moveLeft = 0;
					}
					
					$($ul).animate({left: moveLeft}, settings.timeToMove, function() {isChanging = false;});
				}
				
				return false;
			}); // End Previous Click
		
		// Next Click
		// -------------------------------------------------------- //
		$('.' + settings.nextButtonClass, $container)
			.click(function() {
				if (elementCount > settings.elementsToShow && !isChanging) {
					isChanging = true;
					
					var $ul = $($tnContainer).children('div').children('ul');
					var left = parseInt($($ul).css("left").replace(/px$/,""));
					var moveLeft = left - (settings.spacesToMove * elementWidth);
					
					if (Math.abs(left) >= (width - (settings.elementsToShow * elementWidth))) {
						moveLeft = 0;
					} else if ((width - Math.abs(moveLeft)) < (settings.elementsToShow * elementWidth)) {
						while ((width - Math.abs(moveLeft)) < (settings.elementsToShow * elementWidth)) {
							moveLeft += elementWidth
						}
					}

					$($ul).animate({left: moveLeft}, settings.timeToMove, function() {
						$($ul).load();
						isChanging = false;
					});
				}
				
				return false;
			}); // End Next Click
			
		// $links Click
		// -------------------------------------------------------- //
		$($links)
			.click(function() {
				var $link = this;
				var $objectContainer = $($link).parent('li').children('code');
				var href = $($link).attr('href');
				var title = $($link).children('img').attr('alt');
				var desc = $($link).parent('li').children('p').html();
				
				// 0. Check if image or object
				if ($objectContainer.length > 0 || $($link).is(":linkingToImage")) {
					// Load into container
					
					// 1. Check if loading
					if (!isLoading) {
						// Set loading flag
						isLoading = true;	
						
						// 2. Set imgContainer height
						var oldHeight = $($imgContainer).height();
						$($imgContainer).css({height: oldHeight});
						
						// 3. Hide controls
						var showDesc = $($descContainer, $imgContainer).is(':visible');
						$($descContainer, $imgContainer).slideUp(200);
						$($imgControls, $imgContainer).hide();
						
						// 4. Fade out imgContainer
						$($imgContainer).animate({opacity: 0}, 500, function() {
							// 5. Empty contents
							//$($imgContainer).children().not({'.descContainer', '.controls').remove();
							$($imgContainer).children('img').remove();
							$($imgContainer).children('object').remove();
							
							// 6. Add loading class
							$($imgContainer).css({opacity: 1});
							$($imgContainer).addClass(settings.loadingClass);
							
							// 7. Load contents (object or image)
							if ($objectContainer.length > 0) {
								// 7a. Load object into imgContainer
								var containerWidth = $($imgContainer).width();
								var newHeight = 300;
								var newWidth = containerWidth;
								
								// 8a. Set object and embed sizes
								if ($($objectContainer).children('object').length > 0) {
									var newWidth = $($objectContainer).children('object').attr('width');
									var newHeight = $($objectContainer).children('object').attr('height');
									
									if (newWidth <= 0 || newHeight <= 0) {
										newWidth = $($objectContainer).children('object').css('width');
										newHeight = $($objectContainer).children('object').css('height');
									}
									
									if (newWidth > containerWidth) {
										newHeight = Math.round((newHeight / newWidth) * containerWidth);
										newWidth = containerWidth;
										$($objectContainer).children('object').attr({'width': newWidth, 'height': newHeight});
									}
								}
								if ($($objectContainer).children('object').children('embed').length > 0) {
									var newWidth = $($objectContainer).children('object').children('embed').attr('width');
									var newHeight = $($objectContainer).children('object').children('embed').attr('height');
									
									if (newWidth <= 0 || newHeight <= 0) {
										newWidth = $($objectContainer).children('object').children('embed').css('width');
										newHeight = $($objectContainer).children('object').children('embed').css('height');
									}
									
									if (newWidth > containerWidth) {
										newHeight = Math.round((newHeight / newWidth) * containerWidth);
										newWidth = containerWidth;
										$($objectContainer).children('object').children('embed').attr({'width': newWidth, 'height': newHeight});
									}
								}

								// 9a. Animate to new height and prepend object to container
								$($imgContainer).prepend($($objectContainer).html());
								$($imgContainer).animate({height: newHeight}, 500, function() {
										isLoading = false;
										$($imgContainer).removeClass(settings.loadingClass);
									});									
							} else {
								// 7b. Load image into imgContainer

								// 8b. Create new image
								var $img = new Image;
								
								// 9b. Load image
								$($img).load(function() {
									// Set newHeight
									
									var newWidth = $($img).attr('width');
									var newHeight = $($img).attr('height');
									var containerWidth = $($imgContainer).width();
									
									if (newWidth > containerWidth) {
										newHeight = Math.round((newHeight / newWidth) * containerWidth);
										newWidth = containerWidth;
										$($img).attr({'width': newWidth, 'height': newHeight});
									}
									
									// Initially hide object
									$($img).hide();
									
									// 10b. Animate container to new height
									$($imgContainer).animate({height: newHeight}, 500, function() {
										// Remove loading class
										$($imgContainer).removeClass(settings.loadingClass);
										
										// 11b. Add image and fade in
										$($imgContainer).prepend($img).prepend('\n');
										$($img).fadeIn(function() {
												// Completed loading													
												isLoading = false;
												
												// 12b. Load controls
												$($descContainer, $imgContainer).children('p').html(title + ' - ' + desc);
												$('.' + settings.maxButtonClass, $imgContainer).attr({'href': href, 'title': title});
												if (showDesc) {
													$($descContainer, $imgContainer).slideDown();
												} else {
													$($descContainer, $imgContainer).hide();
												}
												$($imgControls, $imgContainer).fadeIn();
											}); // End image fadeIn
									}); // End newHeight animation
								}).attr({'src': href, 'alt': title}); // End image load
							} // End object / image if statement
						}); // End imgContainer fadeout
					}	// End object / image Check
					
					return false;
				} else {
					// Direct to link
					return true;
				}
			}); // End $links Click
				
		// descButton Click
		// -------------------------------------------------------- //
		$("." + settings.descButtonClass, $imgContainer)
			.click(function() {
				$($descContainer).slideToggle(500);
				return false;
			});
	}
})(jQuery);