/**
 * jQuery jqGalView Plugin
 * Examples and documentation at: http://benjaminsterling.com/2007/08/24/jquery-jqgalview-photo-gallery/
 * This is a port of http://www.flashimagegallery.com/pics/artwork/
 *
 * @author: Benjamin Sterling
 * @version: 2.1
 * @copyright (c) 2007 Benjamin Sterling, KenzoMedia
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *   
 * @requires jQuery v1.1.3.1 or later
 * @optional jQuery Easing v1.1.1
 * @optional jQuery jqModal v2007.08.17 +r11
 * 
 * 
 * @name jqGalView
 * @example $('ul').jqGalView();
 * 
 * @Semantic requirements:
 * 				The structure fairly simple and should be unobtrusive, you
 * 				basically only need a parent container with a title 
 * 				attribute and a list of imgs
 * 
 * 	<ul title="My Gallery" id="gallery">
 *		<li><img src="common/img/dsc_0003.thumbnail.JPG"/></li>
 *		<li><img src="common/img/dsc_0012.thumbnail.JPG"/></li>
 *	</ul>
 *
 *  -: or :-
 * 
 * <div title="My Gallery" id="gallery">
 * 		<img src="common/img/dsc_0003.thumbnail.JPG"/>
 * 		<img src="common/img/dsc_0012.thumbnail.JPG"/>
 * </div>
 * 
 * @param Integer getUrlBy
 * 					By default, it is set to 0 (zero) and the plugin will
 * 					get the url of the full size img from the images 
 * 					parent A tag, or you can set it to 1 will and provide
 * 					the fullSizePath param with the path to the full size
 * 					images.  Finally, you can set it to 2 and provide text
 * 					to prefix param and have that prefix removed from the
 * 					src tag of the thumbnail to create the path to the
 * 					full sized image
 * 
 * @example $('#gallery').jqGalView({getUrlBy:1,fullSizePath:'fullPath/to/fullsize/folder'});
 * 
 * @example $('#gallery').jqGalView({getUrlBy:2, prefix:'.tn'});
 * 					".tn" gets removed from the src attribute of your image
 * 
 * @param String fullSizePath
 * 					Set to null by default, but if you are going to set
 * 					getUrlBy param to 1, you need to provide the full path
 * 					to the full size image.
 * 
 * @example $('#gallery').jqGalView({getUrlBy:1,fullSizePath:'fullPath/to/fullsize/folder'});
 * 
 * @param String prefix
 * 					Set to null by default, but if you are going to set
 * 					getUrlBy param to 2, you need to provide text you
 * 					want to remove from the src attribute of the thumbnail
 * 					to get create the full size image name
 * 
 * @example $('ul').jqGalView({getUrlBy:2, prefix:'.tn'});
 * 					".tn" gets removed from the src attribute of your image
 * 
 * @param Integer items
 * 					Set to 20 by default, and will set the plugin to show
 * 					20 thumbnails (or what ever number you want) at a time
 * 
 * @example $('#gallery').jqGalView({items:50});
 * 
 * @param String openTxt
 * 					The text you want to have shown when you hover over a
 * 					thumbnail
 * 
 * @example $('#gallery').jqGalView({openTxt:"Open Me"});
 * 
 * @param String backTxt
 * 					The text that gets append to the full images title
 * 					attribute to give a hint for the user to click to
 * 					return to the thumbnails
 * 
 * @example $('#gallery').jqGalView({backTxt:"Close Me"});
 * 
 * @param String goFullSizeTxt
 * 					The text that gets appended after the alt text when
 * 					the full sized image is being view and will allow the
 * 					user to view the resized full image in a new browser
 * 					window or in the modal box
 * 
 * @example $('#gallery').jqGalView({goFullSizeTxt:"See full sized unresized"});
 * 
 * @param String tnease
 * 					Set to null by default and will need the easing plugin
 * 					if set otherwise and will add easing to the thumbnail
 * 					scrolling
 * 
 * @see http://gsgd.co.uk/sandbox/jquery.easing.php
 * 
 * @example $('#gallery').jqGalView({tnease:"easein"});
 * 
 * @param String title
 * 					Set to null by default and will allow you to add a
 * 					title to gallery if not already set in a title tag
 * 					of the parent element of the thumbnail group
 * 					eg. <ul title="this is title">
 * 
 * @example $('#gallery').jqGalView({title:"This is a title for my gallery"});
 * 
 * @param String headerElements
 * 					By default, this param is set to 
 * 					<div class="gvHeader">%t</div> with the %t being 
 * 					required to append the title to the gallery.  You will
 * 					be able to passing any dom structure you need to
 * 					achieve a specific design you are expecting for your
 * 					gallery header.
 * 
 * @example $('#gallery').jqGalView({headerElements:"<div class="gvHeader"><div class="left"></div><div class="middle">%t</div><div class="right"></div></div>"});
 * 
 * @styleClasses
 * 		gvHeader:  Main header
 * 		gvContainer:  overall holder of thumbnails and gvHolder div, the
 * 						gvLoader div and the gvImgContainer div
 * 		gvHolder: contains the thumbnails divs
 *		gvItem: contains the thumbnail img, the gvLoaderMini div and the gvOpen div
 *		gvLoaderMini :empty but styled with a loader images as background image.
 * 		gvOpen: contains the open text
 * 		gvImgContainer: the full size image container and the gvDescText div
 * 		gvDescText: contains the alt text for the image and the open full 
 * 						size text
 * 		gvLoader: empty but styled with a loader images as background image.
 * 		gvFooter: contains the pagination links
 * 		gvLinks: contains the actual links
 * 
 * 
 * changes:
 *	09/26/2007
 *		Fixed: Changed this.altImg = $this.src.replace(item.opts.prefix,”); to
 *				this.altImg = this.src.replace(el.opts.prefix,”); thanks to jurrie
 *				@ jurrie.net for finding this error
 *	09/24/2007
 *		Added: a title param so that you can either pass in a title param or put a
 *				title attribute on the parent element.
 *		Added: grabbing the alt tag and showing the text in the large image
 *		Removed:  javascript styling in favor for css styling. eg. cursor:pointer, display:none
 *		Removed:  Scrolling availablity in favor of being able to open the image in own window
 *		Added: a headerElements param to allow for custom header styling
 *		Removed:  the need for appendTo param in favor of a "hot swap"
 *
 *	09/20/2007:
 *		Added: Some extra stylable elements to allow for a better styling of the gallery
 *		Added: A picasa fix for larger images
 *
 *	09/12/2007:
 *		Improvements: Some very minor adjustments to the code for speed improvement.
 *
 *	08/28/2007:
 *		Added: option to have full image to open in jqModal (jqModal plugin required)
 *		Fixed: ie7 issue with margin-left and margin-top not being set
 *		Fixed: ie7 issue with "open" not being clickable
 *
 *	08/27/2007:
 *		Added: option to turn scroll off (larger image mouseover)
 *		Added: image resizing for when the scroll is turned off (borrowed from thickbox)
 *		Added: option to change the thumbnail scroll easing (easing plugin required)
 *		Added/Changed: option to ease the "open" dialog into view
 *		Added: a switch to the navigation to check if larger image is visible and if
 *				so, fade that out and the scroll the thumbnails to their respective
 *				view
 *		Added: some function globals to eleviate some duplicate code (not sure if this
 *				is good practise)
 *		Fixed: Clickablity of the "open" dialog
 *		Removed: "go back" dialog box (the thing that was following the mouse)
 *		Added: "go back" option text to title attibute of the large image
 *		Added:  a loading bar (image borrowed from thickbox)
 *		Added:  image fadeIn and fadeOut when loading and closing
 *
 */
(function($){
	$.fn.jqGalView = function(options){
		return this.each(function(){
			var el = this, $_ = $(this); 
			el.opts = $.extend({}, $.fn.jqGalView.defaults, options);
			var title = $_.attr('title') ? $_.attr('title') : el.opts.title;
			el.opts.title = title;
			$img = $(el.opts.images);
			
			//  swap out current image gallery for jqGalView structure
			var $this = $_; //$.fn.jqGalView.swapOut($_);
			
			//  Build our header
			var $header = $(el.opts.headerElements.replace(/%t/g,'<span>'+el.opts.title+'</span>')).appendTo($this);
			
			var $container = $('<div class="gvContainer">').appendTo($this);
			//  Build our holder for the thumbnail images
			var $holder = $('<div class="gvHolder"/>').appendTo($container);
			
			var $footer = $('<div class="gvLinks">').appendTo($('<div class="gvFooter">').appendTo($this));
			el.mainImgContainer = $('<div class="gvImgContainer">').appendTo($container);
			el.mainImgInfoBar = $('<div class="gvImgBack">'+el.opts.backTxt+'</div>').appendTo(el.mainImgContainer).css({opacity:.75});
			el.image = $('<img/>').appendTo(el.mainImgContainer)
			.hover(
					function(){
						el.mainImgInfoBar.stop().animate({top:0},'fast', el.opts.ease);
					},
					function(){
						el.mainImgInfoBar.stop().animate({top:-16},'fast', el.opts.ease);
					}
				);
			el.descTxt = $('<div class="gvDescText"/>').appendTo(el.mainImgContainer);
			el.loader = $('<div class="gvLoader"/>').appendTo($container);
			
			
			
			$img.each(function(i){
				var $el = $(this);
				var thumb = this[1];
				var orig = this[0];

				var $div = $('<div id="gvID'+i+'" class="gvItem">').appendTo($holder).append('<div class="gvLoaderMini">')
				.hover(
					function(){
						$div.children('.gvOpen').stop().animate({top:0},'fast', el.opts.ease);
					},
					function(){
						$div.children('.gvOpen').stop().animate({top:-16},'fast', el.opts.ease);
					}
				).show();
				var image = new Image();
				$(image).load(function(){
					$(this).unbind();
				    this.altImg = orig;
	
					this.altTxt = $el.attr('alt');
					$div.empty().append(this);
					
					$('<div class="gvOpen">'+el.opts.openTxt+'</div>').appendTo($div).css({top:-16,opacity:.75})
					.click(
						function(){
							$el.trigger('click');
						}
					);
					$(this)
					.click(
						function(){
							$.fn.jqGalView.view(this,el);
						}
					)
					.css({marginLeft:4,marginTop:0});
				});
				image.src = thumb;
			});
			
			for(var i = 0; i < $img.size()/el.opts.items; i++){
				$('<a href="#'+(i)+'">'+(i+1)+'</a>').appendTo($footer)
					.click(function(){
						var $l = $(this);
						var index = $l.attr('href').replace(/^.*#/, '');
						$l.css({border:'solid 1px White'});

						if(el.image.is(":hidden")){
							$holder.animate({marginTop:-(el.mainImgContainer.height()*index)},'1000', el.opts.tnease);
						}
						else{
							el.mainImgContainer.fadeOut(100).unbind();
							el.image.fadeOut(100,function(){$holder.animate({marginTop:-(el.mainImgContainer.height()*index)},'1000', el.opts.tnease);});
						}
						
						
						return false;
					});	
			};

			//  remove current images and replace with jqGalview
			//$(this).after($this).remove();
			
		});
	};//  end: $.fn.jqGalView
	
	$.fn.jqGalView.view = function(img,el){
		if(typeof img.altImg == 'undefined') return false;
		var url = /\?imgmax/.test(img.altImg) ? img.altImg : img.altImg+'?imgmax=800';
		var $i_wh = {}; // 
		var $i_whFinal = {}; // 
		var wContainer, hContainer;
		var $w, $h, $wOrg, $hOrg, isOver = false; 

		el.loader.show();
		wContainer = el.mainImgContainer.width();
		hContainer = el.mainImgContainer.height();
		el.mainImgContainer.show();
		
		el.image.attr({src:url}).css({top:0,left:0,position:'absolute'}).hide();
		var a = $('<a href="#" target="_blank" class="gvFullSizeText">'+el.opts.goFullSizeTxt+'</a>');
		
		a.attr('href',url);
		var txt = img.altTxt ? img.altTxt +' : ' : '';
		el.descTxt.empty().append(txt).append(a);
		
		$img = new Image();
		$($img).load(function(){
			$($img).unbind();
			$w = $wOrg = $img.width;
			$h = $hOrg = $img.height;

			if ($w > wContainer) {
				$h = $h * (wContainer / $w); 
				$w = wContainer; 
				if ($h > wContainer) { 
					$w = $w * (hContainer / $h); 
					$h = hContainer; 
				}
			} else if ($h > hContainer) { 
				$w = $w * (hContainer / $h); 
				$h = hContainer; 
				if ($w > wContainer) { 
					$h = $h * (wContainer / $w); 
					$w = wContainer;
				}
			}
			el.image.css({width:$w,height:$h, marginLeft:(wContainer-$w)*.5,marginTop:(hContainer-$h)*.5})
			.click(function(e){
				el.mainImgContainer.fadeOut().unbind();
				el.image.fadeOut();
				a.unbind();
				el.image.attr({src:''}).hide();
			});
			if(el.opts.modal && typeof $.fn.jqm == 'function'){
				a.click(function(){
					$.fn.jqGalView.buildDialogBox(this.href,$wOrg,$hOrg);
					return false;
				});
			};
			el.loader.fadeOut('fast',function(){el.image.fadeIn(function(){el.descTxt.fadeIn();});});
		});
		$img.src = url;
		
	};
	
	$.fn.jqGalView.defaults = {
		getUrlBy : 0, // 0 == from parent A tag | 1 == the full size resides in another folder
		fullSizePath : null,
		prefix: 'thumbnail.',
		items: 20,
		openTxt:'open&raquo; ',
		backTxt:'Click to go back',
		goFullSizeTxt: 'Full Size',
		tnease:null,
		modal : false,
		title : null,
		headerElements : '<div class="gvHeader">%t</div>'
	};
})(jQuery);