

jQuery.fn.magnify = function() {



    var thumbImage = this,
			fullWidth = this.width();
    fullHeight = this.height();

    var zoomImageContainerCentreX,
		zoomImageContainerCentreY,
		zoomImageContainerHeight,
		zoomImageContainerWidth,
		thumbImageOffsetX,
		thumbImageOffsetY,
		viewerWidth,
		viewerHeight,
    //	zoomImageWidth, 
    //	zoomImageHeight,
		zoomImage = $("<img style='position:relative; '  />"),

		zoomImageContainer = $("<div id='magnifier' style='width:" + (fullWidth) + "px;height:" + (fullHeight) + "px;overflow:hidden;position:absolute;display:none;'></div>").append(zoomImage),
		viewer = $("<div id='viewer' style='position:absolute;left:0;background-color:#fff;opacity:0;filter:Alpha(Opacity=0);cursor:move;'></div>").mousemove(function(e) {

		    var x = e.pageX - this.offsetLeft;
		    var y = e.pageY - this.offsetTop;

		    zoomImage.css({
		        left: (fullWidth - zoomImage.width()) * ((x) / fullWidth) + "px",
		        top: (fullHeight - zoomImage.height()) * ((y) / fullHeight) + "px"
		    });

		    zoomImageContainer.css({
		        left: this.offsetLeft,
		        top: this.offsetTop
		    });

		}).bind("mouseleave", function() {
		    zoomImageContainer.fadeOut("10");
		    viewer.hide();
		});
    this.bind("mouseenter", function() {
        viewerWidth = thumbImage.width();
        viewerHeight = thumbImage.height();
        thumbImageOffsetX = thumbImage.offset().left;
        thumbImageOffsetY = thumbImage.offset().top;
        zoomImage.attr("src", thumbImage.attr("alt"));

        viewer.css({
            width: viewerWidth + "px",
            height: viewerHeight + "px",
            left: thumbImageOffsetX + "px",
            top: thumbImageOffsetY + "px"
        }).show();
        zoomImageContainer.fadeIn("10");
        zoomImageWidth = zoomImage.width(),
			zoomImageHeight = zoomImage.height()
        //	alert(zoomImage.width());
    });



    $(function() {
        $("#magnifier").remove();
        $("#viewer").remove();
        $("body").append(zoomImageContainer).append(viewer);
        zoomImageContainerWidth = zoomImageContainer.width();
        zoomImageContainerHeight = zoomImageContainer.height();
        zoomImageContainerCentreX = zoomImageContainerWidth * .5;
        zoomImageContainerCentreY = zoomImageContainerHeight * .5;

    });



} 


