/**
 * method for adding tooltip on mouse-over.
 * @param tooltip CSS-selector (jquery-style) for fetching the tooltip.
*/
(function($) {
	$.fn.abTooltip = function(tooltip){
		var t = $(tooltip);
		
		/* Wrap the object in <div class="content">...</div> */
		t.wrapInner('<div class="content"></div>');
		
		
		
		/*
		 * Resturcture the content.
		 */
		t.each( function() {
			if( $('div.top', this).length == 0){
				$(this).prepend('<div class="top"></div>');
			}
			if( $('div.bottom', this).length == 0){
				$(this).append('<div class="bottom"></div>');
			}
		});
		
		return this.hover( function(event) {
			/* Move to the correct place and fade In */
			var pos = $(this).offset();
			var left = Math.round(pos.left - t.outerWidth()/2 + $(this).width()/2 );
			t.css({
				left: left + 'px',
				top: pos.top - t.outerHeight() + 'px'
			}).fadeIn();
		},
				
		/* Function when leaving the tooltiped field */
		function(event) {
			t.fadeOut();
		});
	};
}) (jQuery);