(function($){  
 var mouseX = null;
 var mouseY = null;
 var opts = null;
 var multiply = 0;
 $.fn.thumbZoom = function(opt) {  
  var defaults = {  
   thumbsize: {width:211, height:186},  
   zoomsize: {width:332, height:293},  
   border: 15,
   top: 0,
   left: 0
  };

  opts = $.extend(defaults, opt);  
  multiply = (opts.zoomsize.width-opts.thumbsize.width+(2*opts.border))/opts.thumbsize.width;
        
  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).animate({ 
          height: opts.thumbsize.height+"px",
          width: opts.thumbsize.width+"px",
          top:  opts.top+"px",
          left:  opts.left+"px"
        }, 500, function(){
                    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.zoomsize.width+"px");
        $(img).css("height", opts.zoomsize.height+"px");
    }else{
        $(img).animate({ 
            width: opts.zoomsize.width+"px",
            height: opts.zoomsize.height+"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 MaxWidth = opts.zoomsize.width - opts.thumbsize.width;
    var MaxHeight = opts.zoomsize.height - opts.thumbsize.height;
        
    var xThumb = (x*multiply);
    if (xThumb > MaxWidth){xThumb = MaxWidth};
    if (xThumb < 0){xThumb=0};
    xThumb -=  opts.left

    var yThumb = (y*multiply);
    if (yThumb > MaxHeight){yThumb = MaxHeight};
    if (yThumb < 0){yThumb = 0};
    yThumb -=  opts.top
    
    zoomOffset.left = - xThumb;
    zoomOffset.top = -yThumb;
    
    return zoomOffset;
 }
})(jQuery);