﻿jQuery.fn.attizoom = function(inpwidth, inpheight, inpborder) {

	if ( inpwidth === undefined ) {
      inpwidth = '460';
   }
	if ( inpheight === undefined ) {
      inpheight = '560';
   }
   if (inpborder === undefined) {
   	inpborder = true; 
   }

    //seems a bit bone but it works. this file is for just one number change for the width. Dont ever do this again.
    // - Raj Parmer Feb 2010
    var thumbImage = this,
    fullWidth = inpwidth;
    fullHeight = inpheight;

	var withBorder = 1;
	
	if (inpborder == false){
		withBorder = 0;
	}
    //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;border:"+(withBorder)+"px dotted #e2e0e2;'></div>").append(zoomImage),
		
		viewer = $("<div style='position:absolute;left:0;background-color:white;opacity:0; top: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();    $("#proddetails .handwriting").fadeIn();
		});
    this.bind("mouseenter", function() {  viewer.hide();
        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() {
        $("body").append(zoomImageContainer).append(viewer);
        zoomImageContainerWidth = zoomImageContainer.width();
        zoomImageContainerHeight = zoomImageContainer.height();
        zoomImageContainerCentreX = zoomImageContainerWidth * .5;
        zoomImageContainerCentreY = zoomImageContainerHeight * .5;

    });
    


} 


