/* 
	imageScale plugin
	Description: Resizes images to a specifid size and overlays them with a hover tooltip containing link to the original full size image.
	Original resize plugin code from: http://ditio.net/2010/01/02/jquery-image-resize-plugin/
	Author: Harshal Joshi (harshalj@live.com)
	Version: 1.0.1
*/

(function ($) {
	$.fn.imageScale = function (options) {

		var settings = $.extend({
			scale: 1,
			maxWidth: null,
			maxHeight: null
		}, options);

		if ($("#imageScaleTooltipDiv").length == 0) { // Inject tooltip div if does not exist in DOM. 
			jQuery(document.body).append('<div id="imageScaleTooltipDiv">This image has been scaled to fit. <br />' +
										 '<a href="" target="_blank">Click here to see the original image.</a></div>');
		}

		var tooltipDiv = $("#imageScaleTooltipDiv");
		var linkTag = $(tooltipDiv).children('a:first');

		// Style for tooltip div 
		tooltipDiv.css({ 'position': 'absolute', 'display': 'none', 'background': 'white',
						'border': 'solid black 1px', 'padding': '5px', 'vertical-align': 'middle', });
	
		return this.each(function () {
			
			if (this.tagName.toLowerCase() != "img") {
				// Only images can be resized
				return $(this);
			}

			var width = this.naturalWidth;
			var height = this.naturalHeight;
			if (!width || !height) {
				// IE fix
				var img = document.createElement('img');
				img.src = this.src;

				width = img.width;
				height = img.height;
			}

			if (settings.scale != 1) {
				width = width * settings.scale;
				height = height * settings.scale;
			}

			var pWidth = 1;
			if (settings.maxWidth != null) {
				pWidth = width / settings.maxWidth;
			}
			var pHeight = 1;
			if (settings.maxHeight != null) {
				pHeight = height / settings.maxHeight;
			}
			var reduce = 1;

			if (pWidth < pHeight) {
				reduce = pHeight;
			} else {
				reduce = pWidth;
			}

			if (reduce < 1) {
				reduce = 1;
			}

			var newWidth = width / reduce;
			var newHeight = height / reduce;

			// Image is being scaled, show the tooltip div on top of the image with a link to view the original image.
			if (reduce > 1) {
				$(this).hover(function (e) {
					var pos = $(this).offset();
					$(tooltipDiv).css({ "left": (pos.left) + "px", "top": (pos.top) + "px" });
					$(tooltipDiv).show();

					var imageUrl = $(this).attr('src');
					
					
					
					linkTag.attr('href', imageUrl);
				},
				function (e) {
					if (tooltipDiv[0] != e.relatedTarget && linkTag[0] != e.relatedTarget)
					$(tooltipDiv).hide();
				});

				// Needed to ensure the tooltip disappears when moving mouse off the tooltip and out of image (top left corner)
				$(tooltipDiv).mouseout(function (e) { 
					var mouseX = e.pageX;
					var mouseY = e.pageY;
					var imageTop = $(this).offset().top;
					var imageLeft = $(this).offset().left;

					if (mouseX <= imageLeft || mouseY <= imageTop)
						$(tooltipDiv).hide();
				});
			}
			return $(this)
				.attr("width", newWidth)
				.attr("height", newHeight);
		});
	}
})(jQuery);