/* Greatly inspired from GitHub */
(function($) {
  $.fn.tip = function(options) {
    options = $.extend({gravity: "n", title: "title"}, options || {});
    this.hover(
      function() {
        var tip = $(this).data('active-tip');
        if(!tip) {
          tip = $('<div class="tip"><div class="tip-inner" /></div>');
          tip.css({position: "absolute",zIndex: 100000});
          $(this).data('active-tip', tip);
        }
        tip.find('.tip-inner').html($(this).attr(options.title));
        tip.remove().css({top:0,left:0,display:"block"}).appendTo($(document.body));

        var tippedCoordinates = $.extend($(this).offset(), {width: this.offsetWidth, height: this.offsetHeight});
        var tipDimensions = {width: tip[0].offsetWidth, height: tip[0].offsetHeight};
        switch(options.gravity.charAt(0)) {
        case "n":
          tip.css({
            top: tippedCoordinates.top + tippedCoordinates.height,
            left: tippedCoordinates.left + tippedCoordinates.width / 2 - tipDimensions.width / 2
          }).addClass('tip-north');
          break;
        case "s":
          tip.css({
            top: tippedCoordinates.top - tipDimensions.height,
            left: tippedCoordinates.left + tippedCoordinates.width / 2 - tipDimensions.width / 2
          }).addClass('tip-south');
          break;
        case "e":
          tip.css({
            top: tippedCoordinates.top + tippedCoordinates.height / 2 - tipDimensions.height / 2,
            left: tippedCoordinates.left - tipDimensions.width
          }).addClass('tip-east');
          break;
        case "w":
          tip.css({
            top: tippedCoordinates.top + tippedCoordinates.height / 2 - tipDimensions.height / 2,
            left: tippedCoordinates.left + tippedCoordinates.width
          }).addClass('tip-west');
          break;
        }
      },
      function() {
        var tip = $(this).data('active-tip');
        tip.remove();
      }
    );
  };
})(jQuery);