Grow plugin help

Grow plugin help

I am working on a plugin and have a test page setup here...to test bigSIZE click the 'BIG' button first, then mouse over the colored boxes. It works fine if all the boxes are the same size...the problem comes when you change the box sizes (I added the form to change the sizes for testing). For example if 3 boxes are 100x100 and one is 25x25 the 100 boxes will still work but the 25 will not. Any help is appreciated.

Also, if the mouse leaves the box during the grow animation it will stay grown until you reenter and then trigger a mouseleave, so I need to fix that but I'm not quite sure how to do that either.

//bigSIZE() jQuery Function
(function($){
   $.fn.bigSIZE = function(options) {
      
      //set default options
      var defaults = {
         magnify: 3,
         duration: 1000,
         disable: 0
      };
      var opts = $.extend({}, defaults, options);
      
      return $(this).each(function() {   
         //get element size
         opts.Width = parseInt($(this).css('width').substring(0,$(this).css('width').indexOf("px")));
         opts.Height = parseInt($(this).css('height').substring(0,$(this).css('height').indexOf("px")));

         //process
         if( opts.disable == 0 ) {
            //debug//////////////////////////////////////////////////////////////////////
            //alert('opts.Width='+opts.Width+' magnified='+opts.Width*opts.magnify+' left='+(((opts.magnify-1)/2)*opts.Width)+' top='+(((opts.magnify-1)/2)*opts.Height));
            //alert($(this).css('width')+' =? '+opts.Width+'px');
            /////////////////////////////////////////////////////////////////////////////
            $(this).mouseenter(function(){
               if($(this).css('width') == opts.Width+'px')
                  $(this).animate( {width : (opts.Width*opts.magnify)+'px', height : (opts.Height*opts.magnify)+'px'} , { queue: false, duration: opts.duration } )
                     .animate( {left : '-='+(((opts.magnify-1)/2)*opts.Width)+'px'}, { queue: false, duration: opts.duration })
                     .animate( {top : '-='+(((opts.magnify-1)/2)*opts.Height)+'px'}, opts.duration);
               });
            $(this).mouseleave(function(){
               if($(this).css('width') == (opts.Width*opts.magnify)+'px')
                  $(this).animate( {width : opts.Width+'px', height : opts.Height+'px'} , { queue: false, duration: opts.duration } )
                     .animate( {left: '+='+(((opts.magnify-1)/2)*opts.Width)+'px'}, { queue: false, duration: opts.duration })
                     .animate( {top : '+='+(((opts.magnify-1)/2)*opts.Height)+'px'}, opts.duration);
               });
         }else if( opts.disable == 1)
            $(this).unbind('mouseenter').unbind('mouseleave');
      });
   };   
})(jQuery);
//End bigSIZE