/*
 * Fullsize
 * Copyright 2009 Drew Wilson
 * www.drewwilson.com
 * www.addfullsize.com
 *
 * Version 1.0   -   Updated: Mar. 30, 2009
 *
 * Fullsize is an attempt to standardize the way in page 'image popups' work.
 * It seems there are hundreds of javascripts light boxes, modal boxes, image zooms, image popups, etc.
 * But none of them provide a way to signal the user that what they just clicked on, is an
 * in page pop-up of a larger version (or 'fullsize' version) of the image they just clicked.
 * Fullsize is an attempt to do just that, provide a 'standard' way for users to recognize an in page pop-up.
 *
 * My intention is to get a 'fullsize' attribute added to the <IMG> element in the next version of HTML.
 * This would allow browsers to do an in page pop-up of the 'fullsize' image natively.
 * 
 * In page pop ups are here to stay... so lets standardize them.
 *
 * Check out www.addfullsize.com for more info and to show your support for Fullsize.
 *
 * This jQuery plug-in is my atempt to bring the idea of 'fullsize' into a reality.
 * Though my intention is to push this functionality to the browser itself and not rely on JavaScript libraries,
 * for now, this will have to do :)
 *
 * This Fullsize jQuery plug-in is dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */

/*
* Imageplus (still fullsize as plugin name for now)
* Copyright 2009 David Duymelinck
*
* Version 0.1 - Updated: Apr. 10, 2009
*
* This is a modificated version of the fullsize plugin which supports fullsizing and linking images.
*
* The goal was to make it easier for the user than only be able to click on the icon to enlarge the thumbnail. 
* Drew's idea is not to replace the anchor tag around the image but in my opinion is the anchor not directly linked
* to the image. The xhtml 2 proposal supports me in this as it allows every element to have a href attribute.
*
* I support Drew's idea to have a fullsize attribute as it is a common functionality. Maybe it should be even 
* extended to other elements.
*
 * This Imageplus jQuery plug-in is dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
*/

(function($){

	$.fn.fullsize = function(options) {

		var defaults = {  
		  	shadow: true,  
		  	zoomInSpeed: 200,  
		  	zoomOutSpeed: 200,
		  	fadeInSpeed: 250,  
		  	fadeOutSpeed: 250,
		  	forceTitleBar: false,
		  	destroy: false
	  	};  
	 	var opts = $.extend(defaults, options);
	 	
	 	// If ESC key pressed, close Fullsize
	 	$(document).keydown(function(event){
	 		if(event.keyCode == 27){
	 			$("div.fullsize-wrapper, div.fullsize-sh-wrap").fadeOut(opts.fadeOutSpeed, function(){
	 				$(this).remove();
	 			});
	 		}
	 	});
		
		return this.each(function(){
			
			// Remove all Fullsize bound events
			if(opts.destroy == true){
				$(this).unbind();
			} else {
			
				// Check to make sure there is a 'longdesc' attribute before we add Fullsize to the Element.
				if($(this).attr("longdesc")) {
			
			        var org_image = $(this);
					var img_title = org_image.attr("title");
					var img_src = org_image.attr("longdesc");
					
                    // check if there is a 'name' attribute to split the click functionality
                    if($(this).attr("name")) {
                        var offset = $(this).offset();
                        var middle = offset.left+Math.ceil(this.width/2);
                        $(this).mousemove(function(e){
                             if($(this).attr("dir") == 'rtl' || $('body').attr("dir") == 'rtl' || $('html').attr("dir") == 'rtl')
                             {
                                 if(e.clientX < middle)
                                 {
                                     $(this).addClass('href').removeClass('fullsize');
                                 }
                                 else
                                 {
                                    $(this).addClass('fullsize').removeClass('href');
                                 }
                             }
                             else
                             {
                                 if(e.clientX > middle)
                                 {
                                     $(this).addClass('href').removeClass('fullsize');
                                 }
                                 else
                                 {
                                    $(this).addClass('fullsize').removeClass('href');
                                 }
                             }
                             
                        }); 
                    }
                    else {
                        $(this).addClass('fullsize');
                    } 
                    
					$(this).click(function(){
					    
                        // check if the 'name' attribute is present and its half is clicked
						if($(this).hasClass("href")) {
						   location.href= $(this).attr("name");
						}
						
						// If a Fullsize Popup is currently active, we will remove it before creating a new one.	
						$("div.fullsize-wrapper, div.fullsize-sh-wrap").remove();
						
						// Gather window & scroll positions.
						var win_w = $(window).width();
						var win_h = $(window).height();
						var scrolltop = $(window).scrollTop();
						var scrollleft = $(window).scrollLeft();								

						// Setup the Loading DIV 
						var loading_left = ((win_w / 2) + scrollleft) - 25;
						var loading_top = ((win_h / 2) + scrolltop) - 25;
						var full_loading = $("<div></div>").addClass('fullsize-loading').css({"margin-left":loading_left, "margin-top":loading_top});
						var full_loading_inner = $("<div></div>").addClass('fullsize-loading-inner');
						$(full_loading).prepend(full_loading_inner);
						$("body").prepend(full_loading);
						
						// Setup the Fullsize Image 				
						var full_img = new Image();
						$(full_img).load(function(){
							$(this).hide();
							
							// Determine how to position the Fullsize Image into the center of the page.
							var new_offset = org_image.offset();
							img_w = this.width;
						    img_h = this.height;
					
							// If the Image is bigger than the window, shrink it to fit in the window.
							aspect = img_w / img_h;
							if ((img_w + 30) > win_w) {
								img_w = win_w - 30;
								img_h = img_w / aspect;
							}
							if ((img_h + 30) > win_h) {
								img_h = win_h - 30;
								img_w = img_h * aspect;
							}
							
							var img_left = Math.round(((win_w - img_w) / 2) + scrollleft);
							var img_top = Math.round(((win_h - img_h) / 2) + scrolltop);
							if(img_left < 0) {
								img_left = 0;
							}
							if(img_top < 0) {
								img_top = 0;
							}	

							$(this).css({"height": org_image.height() + "px", "width":org_image.width() + "px"});
							$("div.fullsize-loading").remove();
							var full_wrap = $("<div></div>").addClass("fullsize-wrapper").css({"display":"none", "margin-top":new_offset.top, "margin-left":new_offset.left});						
							$(full_wrap).prepend(this);
							
							// If there is a 'Title' attribute on the Original Image, display the Title bar.				
							if(img_title != "" || opts.forceTitleBar == true) {
								var full_close = $("<a></a>").addClass("fullsize-close");
								var full_title = $("<div></div>").addClass("fullsize-title").css({"max-width":img_w});
								var full_title_text = $("<div></div>").addClass("fullsize-title-text").text(img_title);							
								$(full_title).prepend(full_close);
								$(full_title).prepend(full_title_text);
								$(full_wrap).prepend(full_title);
								$("body").prepend(full_wrap);
								if(img_top != 0) {
									img_top = img_top - 12;
								}	
							} else {
								$(this).addClass("fullsize-close");
								$("body").prepend(full_wrap);					
							}
	
							// Setup Shadows
							if (opts.shadow == true) {
								if ($.browser.safari) {
									$(full_wrap).css({"-webkit-box-shadow":"0 2px 16px #000", "box-shadow":"0 2px 16px #000"});
								} else {
									var full_sh_wrap = $("<div></div>").addClass("fullsize-sh-wrap").css({"display":"none", "width": org_image.width(), "margin-top":new_offset.top, "margin-left":new_offset.left});
									var full_sh_top = $("<div></div>").addClass("fullsize-sh-top");
									var full_sh_top_left = $("<div></div>").addClass("fullsize-sh-top-l");
									var full_sh_top_middle = $("<div></div>").addClass("fullsize-sh-top-m");
									var full_sh_top_right = $("<div></div>").addClass("fullsize-sh-top-r");
									$(full_sh_top).append(full_sh_top_left).append(full_sh_top_right).append(full_sh_top_middle);
									$(full_sh_wrap).prepend(full_sh_top);
									var full_sh_body = $("<div></div>").addClass("fullsize-sh-body");
									var full_sh_body_r = $("<div></div>").addClass("fullsize-sh-body-r");
									$(full_sh_body).append(full_sh_body_r);
									$(full_sh_wrap).append(full_sh_body);
									var full_sh_bottom = $("<div></div>").addClass("fullsize-sh-bottom");
									var full_sh_bottom_left = $("<div></div>").addClass("fullsize-sh-bottom-l");
									var full_sh_bottom_middle = $("<div></div>").addClass("fullsize-sh-bottom-m");
									var full_sh_bottom_right = $("<div></div>").addClass("fullsize-sh-bottom-r");
									$(full_sh_bottom).append(full_sh_bottom_left).append(full_sh_bottom_right).append(full_sh_bottom_middle);
									$(full_sh_wrap).append(full_sh_bottom);
									$("body").prepend(full_sh_wrap);
								
									// Setup shadow Animations
									$(full_sh_body).animate({
										height: parseInt(full_wrap.height()) + img_h - 22			
									}, {queue:false, duration:opts.zoomInSpeed});
									$(full_sh_wrap).fadeIn(opts.fadeInSpeed).animate({
										height: parseInt(full_wrap.height()) + img_h + 22,
										width: img_w + 22,
										marginTop: img_top - 9,
										marginLeft: img_left - 11 				
									}, {queue:false, duration:opts.zoomInSpeed});
								}
							}

							// Setup Animations
							$(this).fadeIn(opts.fadeInSpeed).animate({
								height: img_h,
								width: img_w				
							}, {queue:false, duration:opts.zoomInSpeed});
							$(full_wrap).fadeIn(opts.fadeInSpeed).animate({
								width: img_w,
								marginTop: img_top,
								marginLeft: img_left			
							}, {queue:false, duration:opts.zoomInSpeed});					
			
							$(".fullsize-close").click(function(){
								closeFullsize(full_img, full_wrap, org_image, $(this));	
							});
									
						}).attr("src",img_src).addClass("fullsize-image");
					
			
					});
					
					// This function is purposely pulled out of the Image Load function.
					// By doing so the Fullsize Image will now find the exact loacation of the Original Image 
					// when you click the Close button. This way the Fullsize Image will always go back to it's
					// original position, even if you resize the window, and the Original Image changes it's position.
					function closeFullsize(full_img, full_wrap, org_image, ele) {
						var offsets = org_image.offset();
						$(full_img).fadeOut(opts.fadeOutSpeed).animate({
							height: org_image.height(),
							width: org_image.width()				
						}, {queue:false, duration:opts.zoomOutSpeed});
											
						if (opts.shadow == true) {
							$("div.fullsize-sh-wrap").remove();
						}
						
						$(full_wrap).fadeOut(opts.fadeOutSpeed).animate({
							width: org_image.width(),
							marginTop: offsets.top,
							marginLeft: offsets.left			
						}, {queue:false, duration:opts.zoomOutSpeed, complete: function(){ele.remove();}});
					
					}
					
					
				}else if($(this).attr("name")){
                    
                    $(this).addClass('href')
                    
                    $(this).click(function(){
                      location.href= $(this).attr("name"); 
                    });
                }
				
			}		
		});
	}
})(jQuery);