jQuery.fn.gradient = function(settings) {
  this.each(function () {  // keep track of which element is being transformed
    var el = $(this);
    // Find out if the Dimensions plugin has been installed
    try {
      
      // use the Dimensions plugin information if it exists
      var height = el.outerHeight();
      var width = el.outerWidth();
      var position = el.offset();
      var top = position.top;
      var left = position.left;
      
    } catch (e) {
      
      // these need to be defined in order for this plugin to work currently if you are not using the dimensions plugin.
      var width = parseInt(el.css('width'));

      var height = parseInt(el.css('height'));
      // need these to calculate position, otherwise we need to use the dimensions plugin, which might not be bad idea for the future
      var top = parseInt(el.css('top'));
      var left = parseInt(el.css('left'));
      
    }

    // what's the point? the gradient won't be seen anyway, also it avoids division by 0
    if (width == 0 || height == 0) return;
    /*
    if(this.id) {
     alert(this.id);
    } else {
        alert(el.tagName());
    }   */

    // define default settings
    settings = jQuery.extend({ 
                 rightcolor: '#000000', 
                 leftcolor: '#ffffff',
                 topcolor: '#000000', 
                 bottomcolor: '#ffffff', 
                 horizontal: false, 
                 opacity: false
               }, settings || {});

    if (settings.opacity) {
      var opacity = 'opacity:' 
                     + settings.opacity/100 + ';' 
                     + 'filter:alpha(opacity=' + settings.opacity + ');'
                     + '-moz-opacity: ' + Math.round(settings.opacity/10)/10 + ';';
    }
      var theSlice = '<div class="'+settings.name+'" style="background-color: white; font-size: 1px;'
                        + 'display: block; position: absolute; width: '+(width)+'px; height: '+(height)+'px; top: '+top+'px; '
                        + 'left: '+(left+1)+'px;'+ (settings.opacity ? opacity : '') +'"></div>';
      $("body").prepend(theSlice);       
    
  });
  return this;
};