/*
 * jQuery galview Plugin
 * 
 * @name galview
 * @example $('ul').galview();
 * 
 * @Semantic requirements:
 * 
 * 	<ul>
 *		<li><img src="common/img/dsc_0003.thumbnail.JPG"/></li>
 *		<li><img src="common/img/dsc_0012.thumbnail.JPG"/></li>
 *	</ul>
 * 
 * <div>
 * 		<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').galview({getUrlBy:1,fullSizePath:'fullPath/to/fullsize/folder'});
 * 
 * @example $('#gallery').galview({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').galview({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').galview({getUrlBy:2, prefix:'.tn'});
 * 					".tn" gets removed from the src attribute of your image
 * 
 * @styleClasses
 * 		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.
 * 		gvImgContainer: the full size image container and the gvDescText div
 * 		gvLoader: empty but styled with a loader images as background image.
 * 
 * 
 */
 
(function($){
	$.fn.galview = function(options){
		return this.each(function(i){
			var el = this;
			el.jqthis = $(this);
			el.jqchildren = el.jqthis.find('img');
			el.opts = $.extend({}, galview.defaults, options);
			el.index = i;
			el.totalChildren = el.jqchildren.size();
			
			el.container = $('<div class="gvContainer" id="jqgv'+el.index+'">');

			el.imgContainer = $('<div class="gvImgContainer" />').appendTo(el.container);
			el.image = $('<img style="display:none;"/>').appendTo(el.imgContainer);
			el.imgLoader = $('<div class="gvLoader"/>').appendTo(el.imgContainer);
			
			el.imgMagnify = $('<div class="gvFlash" />').appendTo(el.imgContainer).css({opacity:".05"})
			.mouseover(function(){
				var $f = $(this);
				$f.stop().animate({opacity:".6"},500);
			})
			.mouseout(function(){
				var $f = $(this);
				$f.stop().animate({opacity:".05"},500);
			})
			.click(function(){
				el.image.trigger('click');
			});
			
			if(el.opts.showAlt)
			{ el.altTextBox = $('<div class="gvAltText"/>').appendTo(el.imgContainer); }
			
			el.holder = $('<div class="gvHolder"/>').appendTo(el.container);
			el.jqthis.after(el.container).remove();
			el.imgCw = el.imgContainer.width();
			el.imgCh = el.imgContainer.height();

			el.jqchildren.each(function(j){
				var jqimage = $(this);
				jqimage.index = j;

				var jqdiv = $('<div id="gvID'+j+'" class="gvItem" />')
				.appendTo(el.holder);

				//jqimage.ext = jqimage.attr("src").split(/.*\.([^\.]*)/);
				
				if(el.opts.getUrlBy == 0)
				{ jqimage.targetImg = jqimage.parent().attr('href'); }
				else if(el.opts.getUrlBy == 1)
				{ jqimage.targetImg = el.opts.fullSizePath + tmpimage.src.split('/').pop(); }
				else if(el.opts.getUrlBy == 2)
				{ jqimage.targetImg = tmpimage.src.replace(el.opts.prefix,''); };
				
				jqimage.altTxt = jqimage.attr('alt');

				jqimage.link = $('<a rel="productgallery" href="'+jqimage.targetImg+'" style="display:none;" />').appendTo(el.container);
				jqimage.link.html("&nbsp;");
				jqimage.link.colorbox();
				
				var image = new Image();
				$(image).load(function(){
					image.load = null;
					jqdiv.empty();
				
					var margins = galview.center({"w":jqdiv.width(),"h":jqdiv.height()},{"w":image.width,"h":image.height});

					jqimage.appendTo(jqdiv)
						.css({marginLeft:margins.l,marginTop:margins.t})
						.click(function(){ galview.view(jqimage,el); });
								
					var jqimageflash = $('<div class="gvFlash" />')
						.appendTo(jqdiv).css({opacity:"0.01"})
						.click(function(){ jqimage.trigger('click'); })
						.mouseover(function(){ jqimageflash.css({opacity:".75"}).stop().animate({opacity:".01"},500); });
					
					if( jqimage.index  == 0 )
					{
						jqimage.trigger('click');
						jqimage.siblings().trigger('mouseover');
					};
					
					/*
					if (el.opts.preloadImages)
					{
						var largeImage = new Image();
						largeImage.load(function(){
							largeImage.load = null;	
							jqimage.siblings().trigger('mouseover');
						});
						largeImage.src = jqimage.targetImg;
					}
					*/					
					
				});// end : image.onload 
				image.src = jqimage.attr("src");
			});
		});
	};

	galview = {
		// pDem parent deminsions / iDem img deminsions
		resize : function(pDem,iDem){
		
			if (iDem.w > pDem.w) {
				iDem.h = iDem.h * (pDem.w / iDem.w); 
				iDem.w = pDem.w; 
				if (iDem.h > pDem.h) { 
					iDem.w = iDem.w * (pDem.h / iDem.h); 
					iDem.h = pDem.h; 
				};
			} else if (iDem.h > pDem.h) { 
				iDem.w = iDem.w * (pDem.h / iDem.h); 
				iDem.h = pDem.h; 
				if (iDem.w > pDem.w) { 
					iDem.h = iDem.h * (pDem.w /iDem.w); 
					iDem.w = pDem.w;
				};
			};
			
			return iDem;
		},
		center : function(pDem,iDem){
			return { "l":(pDem.w-iDem.w)*.5, "t": (pDem.h-iDem.h)*.5 };
		},
		swapOut : function(el){
			return $('<div id="jqgv'+el.index+'">');
		},
		view : function(img, el){
			if(typeof img.targetImg == 'undefined') return false;
			
			var url = img.targetImg;			
			var image = new Image();
			
			image.onload = function(){
			
				image.onload = null;
				dem = {};
				dem.w = $wOrg = image.width;
				dem.h = $hOrg = image.height;
				dem = galview.resize({"w":el.imgCw,"h":el.imgCh},{"w":dem.w,"h":dem.h});

				var margins = galview.center({"w":el.imgCw,"h":el.imgCh},{"w":dem.w,"h":dem.h});
				
				if (el.opts.showAlt){ el.altTextBox.fadeTo('fast', 0.1); }

				el.imgLoader.fadeOut('fast',function(){
					el.image.css({width:dem.w,height:dem.h, marginLeft:margins.l,marginTop:margins.t});
					el.image.attr('src',url).fadeIn('fast');		
					el.imgMagnify.show();
				});
				
				if(typeof img.altTxt != 'undefined' && el.opts.showAlt){ el.altTextBox.fadeTo("fast",el.opts.titleOpacity).text(img.altTxt); }
				
				el.image.unbind('click');
				el.image.click(function(){ img.link.trigger("click"); });

			};
			el.imgMagnify.hide();
			el.image.fadeOut('fast', function(){
				el.imgLoader.fadeIn('fast');
				image.src = url;
			});			
		},
		defaults : {
			getUrlBy : 0,
			fullSizePath : null,
			prefix: 'thumbnail.',
			titleOpacity : .60,
			showAlt : false,
			preloadImages : false,
			videoImage : "video.png",
			colorboxOptions : null
		}
	};
})(jQuery);