(function($) {

  $.fn.glowbuttons = function(options) {
  
    var defaults = {
      from: '#016bbd',
      to: '#b1ddff',
      className: 'blue',
      speed: 1000
    };
    
    var options = $.extend(defaults, options);

    return this.each(function() {
      var button = $(this);
      //  if the metadata plug-in is installed, use it to build the options
      var o = $.metadata ? $.extend({}, options, button.metadata()) : options;
      //  inject the parent nodes            
      button.wrap('<span class="glow-button"><span class="inner"></span></span>');
      //  ie display workaround
      button.css('display', $.browser.msie ? 'inline-block' : 'block');     
  
      button.parent().each(function(){ 
        var innerWrapper = $(this);
  
        //  more browser specific workarounds
        innerWrapper.css('display', $.browser.msie ? 'inline-block' : 'block'); 
        
        if($.browser.msie) {
          innerWrapper.css({ 'position':'relative', 'left':'-1px' });
        }
  
        innerWrapper.parent().each(function(){
          var outerWrapper = $(this);
          outerWrapper.css('display', $.browser.mozilla ? '-moz-inline-box' : 'inline-block');
          outerWrapper.css('backgroundColor', o.from);
        
          //  our glossy image is a transparent PNG so
          //  we have a special class that uses an image filter
          if($.browser.msie && $.browser.version < 7) {
            outerWrapper.addClass('ie6');    
          }                     
        })
  
        //  add a class to the outer most node - this helps with theming
        .addClass(o.className)
  
        //  finally attach to the hover events to run the animation
        .hover(
          function(){
            $(this).stop();
            $(this).animate({ backgroundColor: o.to }, o.speed);
          },
          function() {
            $(this).stop();
            $(this).animate({ backgroundColor: o.from }, o.speed);
          }
        );                     
  
      });
  
    });

  };

})(jQuery);