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

        var defaults = {
            size: 100,
            bordersize: 4,
            bordercolor: "#888"
        };
        var options = $.extend(defaults, options);
        var lenstype = "background-position: 0px 0px;width: " + string(options.size) + "px;height: " + string(options.size)
            + "px;float: left;display: none;border-radius: " + string(options.size / 2 + options.bordersize)
            + "px;border: " + string(options.bordersize) + "px solid " + options.bordercolor
            + ";background-repeat: no-repeat;position: absolute;";

        return this.each(function () {
            obj = $(this);

            var offset = $(this).offset();

            // creating lens
            var target = $("<div style='" + lenstype + "' class='" + options.lenscss + "'>&nbsp;</div>").appendto($(this).parent());
            var targetsize = target.size();

            // calculating actual size of image
            var imagesrc = options.imagesrc ? options.imagesrc : $(this).attr("src");
            var imagetag = "<img style='display:none;' src='" + imagesrc + "' />";

            var widthratio = 0;
            var heightratio = 0;

            $(imagetag).load(function () {
                widthratio = $(this).width() / obj.width();
                heightratio = $(this).height() / obj.height();
            }).appendto($(this).parent());

            target.css({ backgroundimage: "url('" + imagesrc + "')" });

            target.mousemove(setimage);
            $(this).mousemove(setimage);

            function setimage(e) {

                var leftpos = parseint(e.pagex - offset.left);
                var toppos = parseint(e.pagey - offset.top);

                if (leftpos < 0 || toppos < 0 || leftpos > obj.width() || toppos > obj.height()) {
                    target.hide();
                }
                else {
                    target.show();

                    leftpos = string(((e.pagex - offset.left) * widthratio - target.width() / 2) * (-1));
                    toppos = string(((e.pagey - offset.top) * heightratio - target.height() / 2) * (-1));
                    target.css({ backgroundposition: leftpos + 'px ' + toppos + 'px' });

                    leftpos = string(e.pagex - target.width() / 2);
                    toppos = string(e.pagey - target.height() / 2);
                    target.css({ left: leftpos + 'px', top: toppos + 'px' });
                }
            }
        });
    };
})(jquery);




(function ($) {
	var defaults = {
		url: false,
		callback: false,
		target: false,
		duration: 120,
		on: 'mouseover' // other options: 'grab', 'click', 'toggle'
	};

	
	$.zoombie = function(target, source, img) {
		var outerwidth,
			outerheight,
			xratio,
			yratio,
			offset,
			position = $(target).css('position');

		
		$(target).css({
			position: /(absolute|fixed)/.test() ? position : 'relative',
			overflow: 'hidden'
		});

		$(img)
			.addclass('zoomimg')
			.css({
				position: 'absolute',
				top: 0,
				left: 0,
				opacity: 0,
				width: img.width,
				height: img.height,
				border: '1px solid #f3f3f3',
				maxwidth: 'none'
			})
			.appendto(target);

		return {
			init: function() {
				outerwidth = $(target).outerwidth();
				outerheight = $(target).outerheight();
				xratio = (img.width - outerwidth) / $(source).outerwidth();
				yratio = (img.height - outerheight) / $(source).outerheight();
				offset = $(source).offset();
			},
			move: function (e) {
				var left = (e.pagex - offset.left),
					top = (e.pagey - offset.top);

				top = math.max(math.min(top, outerheight), 0);
				left = math.max(math.min(left, outerwidth), 0);

				img.style.left = (left * -xratio) + 'px';
				img.style.top = (top * -yratio) + 'px';
			}
		};
	};

	$.fn.zoombie = function (options) {
		return this.each(function () {
			var
			settings = $.extend({}, defaults, options || {}),
			//target will display the zoomed iamge
			target = settings.target || this,
			//source will provide zoom location info (thumbnail)
			source = this,
			img = new image(),
			$img = $(img),
			mousemove = 'mousemove',
			clicked = false;

			// if a url wasn't specified, look for an image element.
			if (!settings.url) {
				settings.url = $(source).find('img').attr('src');
				if (!settings.url) {
					return;
				}
			}

			img.onload = function () {
				var zoombie = $.zoombie(target, source, img);

				function start(e) {
					zoombie.init();
					zoombie.move(e);

					// skip the fade-in for ie8 and lower since it chokes on fading-in
					// and changing position based on mousemovement at the same time.
					$img.stop()
					.fadeto($.support.opacity ? settings.duration : 0, 1);
				}

				function stop() {
					$img.stop()
					.fadeto(settings.duration, 0);
				}

				if (settings.on === 'grab') {
					$(source).mousedown(
						function (e) {
							$(document).one('mouseup',
								function () {
									stop();

									$(document).unbind(mousemove, zoombie.move);
								}
							);

							start(e);

							$(document)[mousemove](zoombie.move);

							e.preventdefault();
						}
					);
				} else if (settings.on === 'click') {
					$(source).click(
						function (e) {
							if (clicked) {
								// bubble the event up to the document to trigger the unbind.
								return;
							} else {
								clicked = true;
								start(e);
								$(document)[mousemove](zoombie.move);
								$(document).one('click',
									function () {
										stop();
										clicked = false;
										$(document).unbind(mousemove, zoombie.move);
									}
								);
								return false;
							}
						}
					);
				} else if (settings.on === 'toggle') {
					$(source).click(
						function (e) {
							if (clicked) {
								stop();
							} else {
								start(e);
							}
							clicked = !clicked;
						}
					);
				} else {
					zoombie.init(); 

					$(source).hover(
						start,
						stop
					)[mousemove](zoombie.move);
				}

				if ($.isfunction(settings.callback)) {
					settings.callback.call(img);
				}
			};

			img.src = settings.url;
		});
	};

	$.fn.zoombie.defaults = defaults;
}(window.jquery));