/**
 * jquery lightbox plugin
 * this jquery plugin was inspired and based on lightbox 2 by lokesh dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jquery.
 * @name jquery-lightbox-0.5.js
 * @author leandro vieira pinho - http://leandrovieira.com
 * @version 0.5
 * @date april 11, 2008
 * @category jquery plugin
 * @copyright (c) 2008 leandro vieira pinho (leandrovieira.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://leandrovieira.com/projects/jquery/lightbox/ 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.lightbox = function(settings) {
		// settings to configure the jquery lightbox plugin how you like
		settings = jquery.extend({
			// configuration related to overlay
			overlaybgcolor: 		'#000',		// (string) background color to overlay; inform a hexadecimal value like: #rrggbb. where rr, gg, and bb are the hexadecimal values for the red, green, and blue values of the color.
			overlayopacity:			0.8,		// (integer) opacity value to overlay; inform: 0.x. where x are number from 0 to 9
			// configuration related to navigation
			fixednavigation:		false,		// (boolean) boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
			// configuration related to images
			imageloading:			static_url + 'img/lightbox-ico-loading.gif',		// (string) path and the name of the loading icon
			imagebtnprev:			static_url + 'img/lightbox-btn-prev.gif',			// (string) path and the name of the prev button image
			imagebtnnext:			static_url + 'img/lightbox-btn-next.gif',			// (string) path and the name of the next button image
			imagebtnclose:			static_url + 'img/lightbox-btn-close.gif',		// (string) path and the name of the close btn
			imageblank:				static_url + 'img/lightbox-blank.gif',			// (string) path and the name of a blank image (one pixel)
			// configuration related to container image box
			containerbordersize:	10,			// (integer) if you adjust the padding in the css for the container, #lightbox-container-image-box, you will need to update this value
			containerresizespeed:	400,		// (integer) specify the resize duration of container image. these number are miliseconds. 400 is default.
			// configuration related to texts in caption. for example: image 2 of 8. you can alter either "image" and "of" texts.
			txtimage:				'image',	// (string) specify text "image"
			txtof:					'of',		// (string) specify text "of"
			// configuration related to keyboard navigation
			keytoclose:				'c',		// (string) (c = close) letter to close the jquery lightbox interface. beyond this letter, the letter x and the scape key is used to.
			keytoprev:				'p',		// (string) (p = previous) letter to show the previous image
			keytonext:				'n',		// (string) (n = next) letter to show the next image.
			// don磘 alter these variables in any way
			imagearray:				[],
			activeimage:			0
		},settings);
		// caching the jquery object with all elements matched
		var jquerymatchedobj = this; // this, in this context, refer to jquery object
		/**
		 * initializing the plugin calling the start function
		 *
		 * @return boolean false
		 */
		function _initialize() {
			_start(this,jquerymatchedobj); // this, in this context, refer to object (link) which the user have clicked
			return false; // avoid the browser following the link
		}
		/**
		 * start the jquery lightbox plugin
		 *
		 * @param object objclicked the object (link) whick the user have clicked
		 * @param object jquerymatchedobj the jquery object with all elements matched
		 */
		function _start(objclicked,jquerymatchedobj) {
			// hime some elements to avoid conflict with overlay in ie. these elements appear above the overlay.
			$('embed, object, select').css({ 'visibility' : 'hidden' });
			// call the function to create the markup structure; style some elements; assign events in some elements.
			_set_interface();
			// unset total images in imagearray
			settings.imagearray.length = 0;
			// unset image active information
			settings.activeimage = 0;
			// we have an image set? or just an image? let磗 see it.
			if ( jquerymatchedobj.length == 1 ) {
				settings.imagearray.push(new array(objclicked.getattribute('href'),objclicked.getattribute('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 < jquerymatchedobj.length; i++ ) {
					settings.imagearray.push(new array(jquerymatchedobj[i].getattribute('href'),jquerymatchedobj[i].getattribute('title')));
				}
			}
			while ( settings.imagearray[settings.activeimage][0] != objclicked.getattribute('href') ) {
				settings.activeimage++;
			}
			// call the function that prepares image exibition
			_set_image_to_view();
		}
		/**
		 * create the jquery lightbox plugin interface
		 *
		 * the html markup will be like that:
			<div id="jquery-overlay"></div>
			<div id="jquery-lightbox">
				<div id="lightbox-container-image-box">
					<div id="lightbox-container-image">
						<img src="../fotos/xx.jpg" id="lightbox-image">
						
						<div id="lightbox-loading">
							<a href="#" id="lightbox-loading-link">
								<img src="../images/lightbox-ico-loading.gif">
							</a>
						</div>
					</div>
				</div>
				<div id="lightbox-container-image-data-box">
					<div id="lightbox-container-image-data">
						<div id="lightbox-image-details">
							<span id="lightbox-image-details-caption"></span>
							
						</div>
						<div id="lightbox-secnav">
							<a href="#" id="lightbox-secnav-btnclose">
								<img src="../images/lightbox-btn-close.gif">
							</a>
						</div>
					</div>
				</div>
			</div>
		 *
		 */
		function _set_interface() {
			// apply the html markup into body tag
			$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnprev"></a><a href="#" id="lightbox-nav-btnnext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageloading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span></div><div id="lightbox-secnav"><a href="#" id="lightbox-secnav-btnclose"><img src="' + settings.imagebtnclose + '"></a></div></div></div></div>');	
			// get page sizes
			var arrpagesizes = ___getpagesize();
			// style overlay and show it
			$('#jquery-overlay').css({
				backgroundcolor:	settings.overlaybgcolor,
				opacity:			settings.overlayopacity,
				width:				arrpagesizes[0],
				height:				arrpagesizes[1]
			}).fadein();
			// get page scroll
			var arrpagescroll = ___getpagescroll();
			// calculate top and left offset for the jquery-lightbox div object and show it
			$('#jquery-lightbox').css({
				top:	arrpagescroll[1] + (arrpagesizes[3] / 10),
				left:	arrpagescroll[0]
			}).show();
			// assigning click events in elements to close overlay
			$('#jquery-overlay,#jquery-lightbox').click(function() {
				_finish();									
			});
			// assign the _finish function to lightbox-loading-link and lightbox-secnav-btnclose objects
			$('#lightbox-loading-link,#lightbox-secnav-btnclose').click(function() {
				_finish();
				return false;
			});
			// if window was resized, calculate the new overlay dimensions
			$(window).resize(function() {
				// get page sizes
				var arrpagesizes = ___getpagesize();
				// style overlay and show it
				$('#jquery-overlay').css({
					width:		arrpagesizes[0],
					height:		arrpagesizes[1]
				});
				// get page scroll
				var arrpagescroll = ___getpagescroll();
				// calculate top and left offset for the jquery-lightbox div object and show it
				$('#jquery-lightbox').css({
					top:	arrpagescroll[1] + (arrpagesizes[3] / 10),
					left:	arrpagescroll[0]
				});
			});
		}
		/**
		 * prepares image exibition; doing a image磗 preloader to calculate it磗 size
		 *
		 */
		function _set_image_to_view() { // show the loading
			// show the loading
			$('#lightbox-loading').show();
			if ( settings.fixednavigation ) {
				$('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentnumber').hide();
			} else {
				// hide some elements
				$('#lightbox-image,#lightbox-nav,#lightbox-nav-btnprev,#lightbox-nav-btnnext,#lightbox-container-image-data-box,#lightbox-image-details-currentnumber').hide();
			}
			// image preload process
			var objimagepreloader = new image();
			objimagepreloader.onload = function() {
				$('#lightbox-image').attr('src',settings.imagearray[settings.activeimage][0]);
				// perfomance an effect in the image container resizing it
				_resize_container_image_box(objimagepreloader.width,objimagepreloader.height);
				//	clear onload, ie behaves irratically with animated gifs otherwise
				objimagepreloader.onload=function(){};
			};
			objimagepreloader.src = settings.imagearray[settings.activeimage][0];
		};
		/**
		 * perfomance an effect in the image container resizing it
		 *
		 * @param integer intimagewidth the image磗 width that will be showed
		 * @param integer intimageheight the image磗 height that will be showed
		 */
		function _resize_container_image_box(intimagewidth,intimageheight) {
			// get current width and height
			var intcurrentwidth = $('#lightbox-container-image-box').width();
			var intcurrentheight = $('#lightbox-container-image-box').height();
			// get the width and height of the selected image plus the padding
			var intwidth = (intimagewidth + (settings.containerbordersize * 2)); // plus the image磗 width and the left and right padding value
			var intheight = (intimageheight + (settings.containerbordersize * 2)); // plus the image磗 height and the left and right padding value
			// diferences
			var intdiffw = intcurrentwidth - intwidth;
			var intdiffh = intcurrentheight - intheight;
			// perfomance the effect
			$('#lightbox-container-image-box').animate({ width: intwidth, height: intheight },settings.containerresizespeed,function() { _show_image(); });
			if ( ( intdiffw == 0 ) && ( intdiffh == 0 ) ) {
				if ( $.browser.msie ) {
					___pause(250);
				} else {
					___pause(100);	
				}
			} 
			$('#lightbox-container-image-data-box').css({ width: intimagewidth });
			$('#lightbox-nav-btnprev,#lightbox-nav-btnnext').css({ height: intimageheight + (settings.containerbordersize * 2) });
		};
		/**
		 * show the prepared image
		 *
		 */
		function _show_image() {
			$('#lightbox-loading').hide();
			$('#lightbox-image').fadein(function() {
				_show_image_data();
				_set_navigation();
			});
			_preload_neighbor_images();
		};
		/**
		 * show the image information
		 *
		 */
		function _show_image_data() {
			$('#lightbox-container-image-data-box').slidedown('fast');
			$('#lightbox-image-details-caption').hide();
			if ( settings.imagearray[settings.activeimage][1] ) {
				$('#lightbox-image-details-caption').html(settings.imagearray[settings.activeimage][1]).show();
			}
			// if we have a image set, display 'image x of x'
			if ( settings.imagearray.length > 1 ) {
				$('#lightbox-image-details-currentnumber').html(settings.txtimage + ' ' + ( settings.activeimage + 1 ) + ' ' + settings.txtof + ' ' + settings.imagearray.length).show();
			}		
		}
		/**
		 * display the button navigations
		 *
		 */
		function _set_navigation() {
			$('#lightbox-nav').show();

			// instead to define this configuration in css file, we define here. and it磗 need to ie. just.
			$('#lightbox-nav-btnprev,#lightbox-nav-btnnext').css({ 'background' : 'transparent url(' + settings.imageblank + ') no-repeat' });
			
			// show the prev button, if not the first image in set
			if ( settings.activeimage != 0 ) {
				if ( settings.fixednavigation ) {
					$('#lightbox-nav-btnprev').css({ 'background' : 'url(' + settings.imagebtnprev + ') left 15% no-repeat' })
						.unbind()
						.bind('click',function() {
							settings.activeimage = settings.activeimage - 1;
							_set_image_to_view();
							return false;
						});
				} else {
					// show the images button for next buttons
					$('#lightbox-nav-btnprev').unbind().hover(function() {
						$(this).css({ 'background' : 'url(' + settings.imagebtnprev + ') left 15% no-repeat' });
					},function() {
						$(this).css({ 'background' : 'transparent url(' + settings.imageblank + ') no-repeat' });
					}).show().bind('click',function() {
						settings.activeimage = settings.activeimage - 1;
						_set_image_to_view();
						return false;
					});
				}
			}
			
			// show the next button, if not the last image in set
			if ( settings.activeimage != ( settings.imagearray.length -1 ) ) {
				if ( settings.fixednavigation ) {
					$('#lightbox-nav-btnnext')
						.unbind()
						.bind('click',function() {
							settings.activeimage = settings.activeimage + 1;
							_set_image_to_view();
							return false;
						});
				} else {
					// show the images button for next buttons
					$('#lightbox-nav-btnnext').unbind().hover(function() {
						$(this).css({ 'background' : 'url(' + settings.imagebtnnext + ') right 15% no-repeat' });
					},function() {
						$(this).css({ 'background' : 'transparent url(' + settings.imageblank + ') no-repeat' });
					}).show().bind('click',function() {
						settings.activeimage = settings.activeimage + 1;
						_set_image_to_view();
						return false;
					});
				}
			}
			// enable keyboard navigation
			_enable_keyboard_navigation();
		}
		/**
		 * 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磖e 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磖e 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();
				}
			}
		}
		/**
		 * preload prev and next images being showed
		 *
		 */
		function _preload_neighbor_images() {
			if ( (settings.imagearray.length -1) > settings.activeimage ) {
				objnext = new image();
				objnext.src = settings.imagearray[settings.activeimage + 1][0];
			}
			if ( settings.activeimage > 0 ) {
				objprev = new image();
				objprev.src = settings.imagearray[settings.activeimage -1][0];
			}
		}
		/**
		 * remove jquery lightbox plugin html markup
		 *
		 */
		function _finish() {
			$('#jquery-lightbox').remove();
			$('#jquery-overlay').fadeout(function() { $('#jquery-overlay').remove(); });
			// show some elements to avoid conflict with overlay in ie. these elements appear above the overlay.
			$('embed, object, select').css({ 'visibility' : 'visible' });
		}
		/**
		 / third function
		 * getpagesize() by quirksmode.com
		 *
		 * @return array return an array with page width, height and window width, height
		 */
		function ___getpagesize() {
			var xscroll, yscroll;
			if (window.innerheight && window.scrollmaxy) {	
				xscroll = window.innerwidth + window.scrollmaxx;
				yscroll = window.innerheight + window.scrollmaxy;
			} else if (document.body.scrollheight > document.body.offsetheight){ // all but explorer mac
				xscroll = document.body.scrollwidth;
				yscroll = document.body.scrollheight;
			} else { // explorer mac...would also work in explorer 6 strict, mozilla and safari
				xscroll = document.body.offsetwidth;
				yscroll = document.body.offsetheight;
			}
			var windowwidth, windowheight;
			if (self.innerheight) {	// all except explorer
				if(document.documentelement.clientwidth){
					windowwidth = document.documentelement.clientwidth; 
				} else {
					windowwidth = self.innerwidth;
				}
				windowheight = self.innerheight;
			} else if (document.documentelement && document.documentelement.clientheight) { // explorer 6 strict mode
				windowwidth = document.documentelement.clientwidth;
				windowheight = document.documentelement.clientheight;
			} else if (document.body) { // other explorers
				windowwidth = document.body.clientwidth;
				windowheight = document.body.clientheight;
			}	
			// for small pages with total height less then height of the viewport
			if(yscroll < windowheight){
				pageheight = windowheight;
			} else { 
				pageheight = yscroll;
			}
			// for small pages with total width less then width of the viewport
			if(xscroll < windowwidth){	
				pagewidth = xscroll;		
			} else {
				pagewidth = windowwidth;
			}
			arraypagesize = new array(pagewidth,pageheight,windowwidth,windowheight);
			return arraypagesize;
		};
		/**
		 / third function
		 * getpagescroll() by quirksmode.com
		 *
		 * @return array return an array with x,y page scroll values.
		 */
		function ___getpagescroll() {
			var xscroll, yscroll;
			if (self.pageyoffset) {
				yscroll = self.pageyoffset;
				xscroll = self.pagexoffset;
			} else if (document.documentelement && document.documentelement.scrolltop) {	 // explorer 6 strict
				yscroll = document.documentelement.scrolltop;
				xscroll = document.documentelement.scrollleft;
			} else if (document.body) {// all other explorers
				yscroll = document.body.scrolltop;
				xscroll = document.body.scrollleft;	
			}
			arraypagescroll = new array(xscroll,yscroll);
			return arraypagescroll;
		};
		 /**
		  * stop the code execution from a escified time in milisecond
		  *
		  */
		 function ___pause(ms) {
			var date = new date(); 
			curdate = null;
			do { var curdate = new date(); }
			while ( curdate - date < ms);
		 };
		// return the jquery object for chaining. the unbind method is used to avoid click conflict when the plugin is called more than once
		return this.unbind('click').click(_initialize);
	};
})(jquery); // call and execute the function immediately passing the jquery object