I created my first plugin last week that is a simple image rotator with a nice fade effect. When the plugin is used on a site that only has one result in the wrapper set, it works perfectly. If there is more than one result however, the plugin fails because my key variables are being shared between all instances of the plugin. I have read through all of the docs I could find but I can't figure out exactly where i am going wrong with my code. Here is the basic code for the plugin:

1. jQuery.fn.axtaImgGallery = function(options) { var defaults = {
           width: 0,
           galleryId : 'gallery'
       };
       var opts = jQuery.extend(defaults,options);
      
       function rotate() {
          
           if (opts.running === true) {
               opts.i++;
               opts.bg++;
              
               if (opts.i == (opts.numImages + 1)) { opts.i = opts.i - opts.numImages; }
               if (opts.bg == (opts.numImages +1 )) { opts.bg = opts.bg - opts.numImages; }
              
               bgImg    =    "url(images/stories/js_images_home/image" + opts.group + "_" + opts.bg + ".jpg)";
               img        =    '<img id="' + opts.galleryId + '" src="images/stories/js_images_home/image' + opts.group + '_' + opts.i + '.jpg"/>';
              
               selector = '#' + opts.galleryId;
              
               jQuery(selector)
                   .fadeTo(3000,1)
                   .fadeOut(4000,
                       function() {
                           jQuery(this)
                               .parent()
                               .html(img)
                               .css("backgroundImage",bgImg)
          
                               rotate();
                       });
           }           
       }
      
       rotate();
   
   };
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Any guidance would be really appreciated!