/**
 * @author DIO5 aka Dieter Orens
 * @version 0.1
 *
 * A simple plugin to show a magnifier effect on images, falls back as link to a larger image.
 *
 */
(function($){
    $.fn.magnify = function(options){
        var settings = {
            lensWidth: 160,
            lensHeight: 160,
            link: true
        }
        
        var opts = $.extend(settings, options);
		
        return this.each(function(){
            var $a = $(this).click(function(){
                return false;
            });
            var $img = $("img", this);
            var $largeImage = $(new Image());
            var $lens = $("<div id='dio-lens' style='display:none; overflow:hidden; position:absolute;border:1px solid #000;z-index: 20;'></div>");
            var $sensor = $("<div id='dio-sensor' style='position:absolute;z-index: 30;cursor:pointer;'></div>");
            var $loader = $("<div id='dio-loader' style='text-indent:-30000px'>loading</div>").css({
                width: settings.lensWidth,
                height: settings.lensHeight
            });
            
            $largeImage.attr('src', $a[0].href);
            
            if (settings.link) {
                $sensor.click(function(){
                    //window.location = $a[0].href;
					$a.click();
                })
            }
            
            $lens.append($loader);
            
            $largeImage.load(function(){
                loadCallback();
            });
			
			if($largeImage[0].complete)
			{
				loadCallback();
			}
			
			function loadCallback()
			{
				$lens.append($largeImage);
                $loader.remove();
			}
            
            $('body').append($lens).append($sensor);
            
            $lens.css({
                width: settings.lensWidth,
                height: settings.lensHeight
            });
            
            $sensor.css({
                width: $img.width() + "px",
                height: $img.height() + "px",
                top: $img.offset().top + "px",
                left: $img.offset().left + "px",
                backgroundColor: '#fff',
                opacity: '0'
            }).mousemove(function(e){
				var lensLeft = (e.pageX - (settings.lensWidth * .5));
				var lensTop  = (e.pageY - (settings.lensHeight * .5));
				
				function positive(n) {
					return n >= 0 ? n : 0;
				}
				
				var leftOffset = (lensLeft < $img.offset().left) ? lensLeft - $img.offset().left : 0;
				var topOffset = (lensTop < $img.offset().top) ? lensTop - $img.offset().top : 0;
				var rightOffset =  positive(lensLeft - (2 + $img.offset().left + $(this).width())  + settings.lensWidth);
				var bottomOffset = positive(lensTop  - (2 + $img.offset().top  + $(this).height()) + settings.lensHeight);
				
				//console.log(rightOffset);
				
                $lens.css({
                    left: parseInt(lensLeft - (leftOffset+rightOffset)) + "px",
                    top:  parseInt(lensTop -  topOffset) + "px"
                }).show();
                var scale = {};
                scale.x = $largeImage.width() / $img.width();
                scale.y = $largeImage.height() / $img.height();
                
                var left = rightOffset + leftOffset + -scale.x * Math.abs((e.pageX - $img.offset().left)) + settings.lensWidth  / 2 + "px";
                var top =  topOffset + bottomOffset + -scale.y * Math.abs((e.pageY - $img.offset().top )) + settings.lensHeight / 2 + "px";
                
                $largeImage.css({
                    position: 'absolute',
                    left: left,
                    top: top
                });
                
            }).mouseout(function(){
                $lens.hide();
            });
        });
    }
})(jQuery);


jQuery(function(){
	jQuery('a.magnify').magnify();
});