(function($){  

 var mouseX = null;

 var mouseY = null;

 var opts = null;

 var multiply = 0;

 $.fn.thumbZoom = function(opt) {  

  var defaults = {  

   thumbw: 300,  
   
   thumbh: 300,  

   zoomw: 600,
   
   zoomh: 600,  

   border: 20,

   top: 0,

   left: 0

  };



  opts = $.extend(defaults, opt);  

  multiply = (opts.zoomw-opts.thumbw+(2*opts.border))/opts.thumbw;

      

  var config = {    

         sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    

         interval: 200, // number = milliseconds for onMouseOver polling interval    

         over: zoomThumb, // function = onMouseOver callback (REQUIRED)    

         timeout: 500, // number = milliseconds delay before onMouseOut    

         out: unzoomThumb // function = onMouseOut callback (REQUIRED)    

  };

  this.hoverIntent(config)

 };



function zoomThumb(e){

    var img = $(this).parent().find("img");

    if (img){

        $(this).bind("mousemove", function(e){thumbDrag(img, e)});

        var bigsrc = img.attr('class');

        img.attr('class', img.attr('src'));

        thumbDrag(img, e);

        $("<img src='"+bigsrc+"' />").load(function(){

                                                    img.attr("src", bigsrc);

                                                  });   

    };

 }

 

 function unzoomThumb(){

    var img = $(this).parent().find("img");

    if (img){

        img.stop();

        img.css("height", opts.thumbh+"px");

        img.css("width", opts.thumbw+"px");

        img.css("top",  opts.top+"px");

        img.css("left",  opts.left+"px");

        img.removeClass("zoomed");

        var src = img.attr('class');

        img.attr('class', img.attr('src'));

        img.attr("src", src);

        mouseX = null;

        mouseY = null;

        $(this).unbind("mousemove");

    };

 }

 

 function thumbDrag(img, e){

    mouseX = e.pageX;

    mouseY = e.pageY;

    var offset = zoomOffset($(img).parent().offset());  

    DoZoom(img, offset.top, offset.left);

 }

 

 function DoZoom(img, top, left){

    $(img).stop(true, true);

    if ($(img).hasClass("zoomed")){

        $(img).css("top", top+"px");

        $(img).css("left", left+"px");

        $(img).css("width", opts.zoomw+"px");

        $(img).css("height", opts.zoomh+"px");

    }else{

        $(img).animate({ 

            width: opts.zoomw+"px",

            height: opts.zoomh+"px",

            top: top+"px",

            left: left+"px"

        }, 500, function(){$(img).addClass("zoomed")});

    }

 }

 

 function zoomOffset(offset){

    var zoomOffset = new Object;

     

    var x = mouseX - offset.left - opts.border;

    var y = mouseY - offset.top - opts.border;

        

    var Max = opts.zoomsize - opts.thumbw;

        

    var xThumb = (x*multiply);

    if (xThumb > Max){xThumb = Max};

    if (xThumb < 0){xThumb=0};

    xThumb -=  opts.left



    var yThumb = (y*multiply);

    if (yThumb > Max){yThumb = Max};

    if (yThumb < 0){yThumb = 0};

    yThumb -=  opts.top

    

    zoomOffset.left = - xThumb;

    zoomOffset.top = -yThumb;

    

    return zoomOffset;

 }

})(jQuery); 
