/**
* loupe - an image magnifier for jQuery
* http://github.com/jdbartlett/loupe
*/
(function($) {
    $.fn.loupe = function(options) {
        if (!this.length) return this;
        options = $.extend({ loupe: 'loupe', width: 200, height: 150 }, options || {});

        this.each(function() {
            var $this = $(this), loupe = null, big = null, small = null, time = null,
			hide = function() { loupe.fadeOut("fast").remove(); loupe = null; },
			click = function() { hide(); $('.photozoom').trigger('click'); },
            move = function(e) {
                var os = small.offset(), sW = small.width(), sH = small.height(), oW = options.width / 2, oH = options.height / 2;
                if (e.pageX > sW + os.left + 2 || e.pageX < os.left - 2 ||
					e.pageY > sH + os.top + 2 || e.pageY < os.top - 2) return hide();
                if (time && clearTimeout(time)) time = null;
                loupe.css({ left: e.pageX - oW, top: e.pageY - oH });
                big.css({
                    left: -(((e.pageX - os.left) / sW) * big.width() - oW) | 0,
                    top: -(((e.pageY - os.top) / sH) * big.height() - oH) | 0
                });
            };



            $this.mouseenter(function(e) {
                if (!small) small = $this.is('img') ? $this : $this.find('img:first');
                loupe = (loupe || (loupe = $('<div></div>').addClass(options.loupe)
					.css({
					    width: options.width, height: options.height,
					    position: 'absolute', overflow: 'hidden'
					})
					.append(big = $('<img src="' + $this.attr($this.is('img') ? 'src' : 'href') + '" />').css({ position: 'absolute' }))
					.mousemove(move).appendTo('body').click(function(e) { click(); })
				)).show(); move(e);
            }).mouseout(function() { time = setTimeout(hide, 10) });
        });

        return this;
    }
})(jQuery);