/**
 * jQuery inlineBox plugin
 * This jQuery plugin was developed as an alternative for modal lightboxes.  A good portion of this code has
 * been influenced by the jQuery lightBox plugin from Leandro Vieira Pinho - http://leandrovieira.com
 * @name jquery.inlinebox.js
 * @author Justin Jones - http://www.jstnjns.com
 * @version 1
 * @date July 18, 2009
 * @category jQuery plugin
 * @copyright (c) 2009 Justin Jones (http://www.jstnjns.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://www.jstnjns.com/blog for more informations about this jQuery plugin
 */

// Offering a Custom Alias suport - More info: http://docs.jquery.com/Plugins/Authoring#Custom_Alias
(function($) {
	/*
	 * $ is an alias to jQuery object
	 */
	$.fn.inlineBox = function(settings) {
		// Settings to configure the jQuery lightBox plugin how you like
		settings = jQuery.extend({
			within:					'body',
			delay:					4000,
			fixedNavigation:		false,
			autoPlay:				false,
			// Don´t alter these variables in any way
			imageArray:				[],
			activeImage:			0
		},settings);

		// these the jQuery object with all elements matched
		var $images = this; // This, in this context, refer to jQuery object
		
		/*/
		 * Initializing the plugin calling the start function
		 *
		 * @return boolean false
		/*/
		function _initialize() {
			_start($images);
		}
		
		
		
		
		
		
		
/////////
/////// Start the jQuery inlineBox plugin
/////// 
/////// @param object $images are all elements returned from function
/////// 
		function _start($images) {
			///////////////////////
			// Create the markup //
			///////////////////////
			
			// The HTML markup will be like that:
			// 	<div class="inlinebox">
			// 		<img src="________">
			// 		<div class="navigation">
			// 			<a href="#" id="inlinebox-nav-btnPrev">Previous</a>
			//			<a href="#" id="inlinebox-nav-btnNext">Next</a>
			//			<a href="#" id="inlinebox-nav-btnClose">Close</a>
			//		</div>
			//		<div class="details">
			// 		</div>
			// 	</div>
			$('#viewer').append('<div class="inlinebox"><div class="inlinebox-img"><img/></div><div class="navigation"><a href="#" class="previous">Previous</a><a href="#" class="next">Next</a></div><div class="details"></div></div>');
			
			$('.inlinebox .navigation').hide();
			
			//////////////////////////////////
			// Start variables from scratch //
			//////////////////////////////////
			
			settings.imageArray.length = 0;
			settings.activeImage = 0;
			
			//////////////////////////////////////
			// Assigning the images to an array //
			//////////////////////////////////////
			
			// We have an image set? Or just an image? Let´s see.
			if ( $images.size() == 1 ) {
				settings.imageArray.push(new Array($images.eq(0).attr('href'),$images.eq(0).find('img').attr('title')));
			} else {
				// Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references		
				for ( var i = 0; i < $images.size(); i++ ) {
					settings.imageArray.push(new Array($images.eq(i).attr('href'),$images.eq(i).find('img').attr('title')));
				}
			}
			
			/////////////////
			// Queue image //
			/////////////////
			
			_set_image_to_view();
		}
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
/////// 
/////// Finds the image to view, as well as finds it size and runs the "resize container" functino
/////// 
		function _set_image_to_view() {
			// Image preload process
			var preloaded = new Image();
			preloaded.onload = function() {
				$('.inlinebox img').attr('src',settings.imageArray[settings.activeImage][0]).hide();
				// Set container size to that of the preloaded image
				_resize_container(preloaded.width,preloaded.height);
			};
			preloaded.src = settings.imageArray[settings.activeImage][0];
		};






		
		
		
/////// 
/////// Resizes the container to specifications
/////// 
/////// @param integer intImageWidth The image´s width that will be showed
/////// @param integer intImageHeight The image´s height that will be showed
/////// 
		function _resize_container(imageWidth,imageHeight) {
				
			//////////////////////////////////
			// Calculate the box dimensions //
			//////////////////////////////////
			boxWidth = imageWidth + ($('.inlinebox-img').outerWidth() - $('.inlinebox-img').width());
			boxHeight = imageHeight;

			$('.inlinebox .navigation').hide(function() {
				$('.inlinebox .inlinebox-img').fadeOut('fast', function() {
					$('.inlinebox .details').slideUp('fast');
					
					///////////////////////
					// Execute animation //
					///////////////////////
					$('.inlinebox').animate({ width: boxWidth }, 'fast');
					$('.inlinebox .navigation').css({ width: imageWidth, height: boxHeight });
					$('.inlinebox .inlinebox-img').animate({ width: imageWidth, height: boxHeight }, 'fast', function() {
						_show_image();
					});
				});
			});
		};
		
		
		
		
		
		
		
		
		
		
		
		
/////// 
/////// Show the prepared image
/////// 
		function _show_image() {
			$('.inlinebox img').fadeIn('normal',function() {
				_show_image_data();
				_show_navigation();
			});
			// _preload_neighbor_images();
		};
		
		
		
		
		
		
		
/////// 
/////// Show the image information
/////// 
		function _show_image_data() {
			$('.inlinebox .details').slideDown();
			if ( settings.imageArray[settings.activeImage][1] ) {
				$('.inlinebox .details').html(settings.imageArray[settings.activeImage][1]).show();
			}
			// If we have a image set, display 'Image X of X'
			if ( settings.imageArray.length > 1 ) {
				$('.inlinebox .details').prepend('<span class="number">Image ' + ( settings.activeImage + 1 ) + ' of ' + settings.imageArray.length + '</span>');
			}		
		}
















/////// 
/////// Display the button navigations
/////// 
		function _show_navigation() {
			if($images.size() !== 1) {
				$('.inlinebox .navigation').fadeIn(1, function() {
					if(settings.autoPlay) {
						timeout = window.setTimeout( function() { _next() } , settings.delay );
					}
				});
			}

			
			$('.inlinebox .previous').unbind()
				.bind('click',function(e) {
					e.preventDefault();
					settings.autoPlay = false;
					clearTimeout(timeout);
					_previous()
				});
			
			
			$('.inlinebox .next').unbind()
				.bind('click',function(e) {
					e.preventDefault();
					settings.autoPlay = false;
					clearTimeout(timeout);
					_next()
			});
			// Enable keyboard navigation
			_enable_keyboard_navigation();
		}
		
		function _next() {
			if (settings.activeImage != (settings.imageArray.length - 1)) {
				_goTo({relative: 1});
			} else {
				_goTo({absolute: 1});
			}
			
			if(settings.autoplay) {
				window.setTimeout(_next(), settings.delay);
			}
		}
		
		function _previous() {
			if ( settings.activeImage != 0 ) {
				_goTo({relative: -1});
			} else {
				_goTo({absolute: settings.imageArray.length});
			}
		}
		
		function _goTo(position) {
			if(position.relative) {
				settings.activeImage = settings.activeImage + position.relative;
			} else if(position.absolute) {
				settings.activeImage = position.absolute - 1;
			}
			_set_image_to_view();
		}

		
		
		
		
		function _autoPlay() {
			timer = window.setInterval(function () {
				_next();
			},settings.delay);		
		}
		
		
		
		
/////// 
/////// Enable a support to keyboard navigation
/////// 
/////// 
		function _enable_keyboard_navigation() {
			$(document).keydown(function(objEvent) {
				_keyboard_action(objEvent);
			});
		}
/////// 
/////// Disable the support to keyboard navigation
/////// 
/////// 
		function _disable_keyboard_navigation() {
			$(document).unbind();
		}
/////// 
/////// Perform the keyboard actions
/////// 
/////// 
		function _keyboard_action(objEvent) {
			// To ie
			if ( objEvent == null ) {
				keycode = event.keyCode;
				escapeKey = 27;
			// To Mozilla
			} else {
				keycode = objEvent.keyCode;
				escapeKey = objEvent.DOM_VK_ESCAPE;
			}
			// Get the key in lower case form
			key = String.fromCharCode(keycode).toLowerCase();
			// Verify the keys to close the ligthBox
			if ( ( key == settings.keyToClose ) || ( key == 'x' ) || ( keycode == escapeKey ) ) {
				_finish();
			}
			// Verify the key to show the previous image
			if ( ( key == settings.keyToPrev ) || ( keycode == 37 ) ) {
				// If we´re not showing the first image, call the previous
				if ( settings.activeImage != 0 ) {
					settings.activeImage = settings.activeImage - 1;
					_set_image_to_view();
					_disable_keyboard_navigation();
				}
			}
			// Verify the key to show the next image
			if ( ( key == settings.keyToNext ) || ( keycode == 39 ) ) {
				// If we´re not showing the last image, call the next
				if ( settings.activeImage != ( settings.imageArray.length - 1 ) ) {
					settings.activeImage = settings.activeImage + 1;
					_set_image_to_view();
					_disable_keyboard_navigation();
				}
			}
		}
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		// Return the jQuery object for chaining.  The Ready method is called to activate the plugin when the object is ready.
		return this.ready(_initialize);
	};
})(jQuery); // Call and execute the function immediately passing the jQuery object