/**
 * @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,
			delay:0
        }
        
        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='visibility:hidden; overflow:hidden; position:absolute;'></div>");
            var $sensor = $("<div id='dio-sensor' style='position:absolute;'></div>");
            var $loader = $("<div id='dio-loader'>loading</div>").css({
                width: settings.lensWidth,
                height: settings.lensHeight
            });
            
            $largeImage.attr('src', $a[0].href);
            
            if (settings.link) {
               $sensor.click(function(){
						$a.trigger('click');
					});
					
					$sensor.hover(
						function () {
							$a.addClass('hover');
						},
						function () {
							$a.removeClass('hover');
						}
					);
            }
            
            $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
            });
            
            var id = false;
            $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){
                moveAction(e);
            }).mouseout(function(){
                if (id) {
                    clearTimeout(id);
                    id = false;
                }
               $lens.hide();
					$lens.css('visibility', 'hidden');
            });
            
            function moveAction(e){
                
				$lens.css({
                    left: parseInt(e.pageX - (settings.lensWidth * .5)) + "px",
                    top: parseInt(e.pageY - (settings.lensHeight * .5)) + "px"
                });
				
				var scale = {};
                scale.x = $largeImage.width() / $img.width();
                scale.y = $largeImage.height() / $img.height();
                
                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";
                

                $largeImage.css({
                    position: 'absolute',
                    left: left,
                    top: top
                });
				if (settings.delay) {
					$lens.show();
					if (!id) {
						id = setTimeout(function(){
							$lens.css('visibility', 'visible');
						}, settings.delay);
					}
				}
				else{
					$lens.show().css('visibility', 'visible');
				}
            }
        });
    }
})(jQuery);