/**
 * @author DIO5 aka Dieter Orens
 * A simple plugin to show a magnifier images, falls back as link to a larger image.
 */

(function($)
{
	$.fn.magnify = function(options){
	    var settings = {
	        lensWidth: 160,
	        lensHeight: 160
	    }
	    
	    var opts = $.extend(settings, options);
	    
	    return this.each(function(){
	        var $a = $(this);
	        
	        $a.click(function(){
	            return false;
	        });
	        
	        var $img = $("img", this);
	        
	        var largeImage = new Image();
	        $(largeImage).attr('src', $a[0].href);
	        $(largeImage).attr('id', 'imgXL');
	        
	        var $lens = $("<div id='lens' style='display:none; overflow:hidden; background:transparent; position:absolute; border:1px solid #000; '></div>");
	        var $sensor = $("<div id='sensor' style='position:absolute; cursor:crosshair; display:block;'></div>");
			        
	        $lens.append(largeImage);
	        $('body').append($lens).append($sensor);
			
	        $lens.css({
	            width: settings.lensWidth,
	            height: settings.lensHeight,
				zIndex:10000
	        });
			
	        $sensor.css({
	            width: $img.width() + "px",
	            height: $img.height() + "px",
	            top: $img.offset().top + "px",
	            left: $img.offset().left + "px",
				backgroundColor:'#fff',
				opacity:'0',
				zIndex:11000
	        }).mousemove(function(e){
					$lens.css({
						left: parseInt(e.pageX - (settings.lensWidth * .5)) + "px",
						top: parseInt(e.pageY - (settings.lensHeight * .5)) + "px",
						display: 'block'
					});
					var scale = {};
					scale.x = $(largeImage).width() / $img.width();
					scale.y = $(largeImage).height() / $img.height();
					//alert(scale.x);
					var left = -scale.x * Math.abs((e.pageX - $img.offset().left)) + settings.lensWidth / 2 + "px";
					var top = -scale.y * Math.abs((e.pageY - $img.offset().top)) + settings.lensHeight / 2 + "px";
					
					$('#imgXL').css({
						position: 'absolute',
						left: left,
						top: top
					});
				
	        }).mouseout(function(){
	            $lens.css('display', 'none');
	        });
	    });
	}
})(jQuery);