var Tooltip = {};

(function($) {
  
  Tooltip = {
    settings: {
      width: 152,
      height: 36,
      x_move: -140,
      y_move: 3
    },
    show: function() {
      $this = $(this);
      
      var tooltip_text = $this.data('tooltip_text');
      $('#tool-tip div.tool-tip-body').html(tooltip_text);
      
      var this_offset = $this.offset();
      var x = this_offset.left + ($this.width() / 2) + Tooltip.settings.x_move;
      var y = this_offset.top - Tooltip.settings.height - Tooltip.settings.y_move;
      
      $('#tool-tip').css({ left: x, top: y }).show();
    },
    hide: function() {
      $('#tool-tip').hide();
    },
    tooltip_html: '<div id="tool-tip"><div class="tool-tip-body"></div></div>',
    create_helper: function() {
      $('body').append(Tooltip.tooltip_html); 
      
      $('#tool-tip').css({
        position: 'absolute' 
      }).hide();
    }
  };
  
  $.fn.extend({
    tooltip: function() {
      Tooltip.create_helper();
      
      return this.each(function() {
        $this = $(this);
        
        $this.data('tooltip_text', this.title);
        $this.removeAttr("title");
        this.alt = "";
      }).mouseover(Tooltip.show).mouseout(Tooltip.hide).click(Tooltip.hide);
    }
  });
  
})(jQuery);