(function($){
	$.fn.tooltip = function(options){
		var settings = $.extend({}, $.fn.tooltip.defaults, options);
		var mouseOver = false;
		var ci = 0;

		return this.each(function(){
			
			// Eventhandler setzen
			$(this).mouseover(function(e){
                
				// Content laden
				var content = getContent(this);
				ci++;

				// Box holen
				var container = getContainer();
				
				// Box mit Inhalt fÃ¼llen
				container.html("<p>"+content+"</p>");
				
				// Dimensionen des Targes holen
				var height = $(this).outerHeight(true);
			    var width = $(this).outerWidth(true);
			    var top = $(this).offset().top;
			    var left = $(this).offset().left;

				// Box positionieren
				container.css({
					position:"absolute",
					top:top+height-5,
					left:left+width-5,
					display:"block"
				});   
				
				// Wenn aus der Box weg
				container.mouseout(function(){
					hideTooltip(ci);
				});
			});
			$(this).mouseout(function(){
                hideTooltip(ci);
			});
		});
		
		function getContent(id){
			var content = $(id).data("help");
			//if(content.match(/\.php\?/)){
				// Contetn mit Ajax holen
				//content = 'Content mit Ajax';
			//}
			return content; 
		};
		function getContainer(){		
			if($("#tooltipContainer").length == 0){
			    $("body:last-child").after(settings.container);
			}
			// Events draufsetzen
			$("#tooltipContainer").mouseover(function(){mouseOver=true;});
			$("#tooltipContainer").mouseout(function(){
				mouseOver=false;
				hideTooltip();
			});
			return $("#tooltipContainer");
		};
		function hideTooltip(a){
			window.setTimeout(function(){
				  
if(a!=ci){
				  	return;}
				if(mouseOver){
				  	
				  	return
			      }
				  $("#tooltipContainer").fadeOut("slow");
				  settings.afterHide();
			}, 250);
		};
	};

	$.fn.tooltip.defaults = {
		beforeShow: function(content){},
		afterHide: function(){},
		container: '<div id="tooltipContainer"></div>'
	};

})(jQuery);
