( function( $ ) {
  $.fn.attention = function( text ) {
    var wrapper = $(this);
    var options = $.extend( $.fn.attention.defaults, {} );

    var attention = $('<div class="' + options.attentionClass + '">' +
                         text +
                      '</div>');

    function startFadeOut() {
      attention.fadeOut( options.period,
                         function() { attention.remove(); } );
    }

    return wrapper.each( function() {
      var block = $(this);
      var offset = block.offset();

      attention
        .css( {
          backgroundColor: options.backgroundColor,
          color: options.color,
          width: options.widthCalculator( block ),
          textAlign: 'center',
          position: 'absolute',
          top: offset.top + options.topOffset,
          left: offset.left
        } )
        .appendTo($('body'));

      setTimeout( startFadeOut, options.delay );

    } );
  };

  $.fn.attention.defaults = {
    attentionClass:  'attention_grabber',
    delay:           1000,
    period:          5000,
    backgroundColor: '#FFF',
    color:           'inherit',
    topOffset:       -9,
    widthCalculator: function( el ) {
      return el.find('ul li:first').width() * 5;
    }
  };
} )( jQuery );