/*[version]2008-07-03 19:30[/version]*/
/**
Benötigt die Module event.js, geometry.js, Acu.js
tooltipBox muss absolut positioniert sein.
contentBox kann ein in der Tooltip-Box enthaltener Content-Div sein.


WICHTIG!
AnemaTooltip.WIDTH auf die totale Breite setzen (=width+paddingLeft+paddingRight+borderLeftWidth+borderRightWidth)!


Die Konstanten später mal zu optionalen Ctor-Parametern machen.
Alle DOM-abhängigen Aktion mit setTimeout( x, 0 ) triggern.



Body-Ende:
<div id="tooltip" style="display:none;"><div id="tooltip_content">Text be here.</div></div>




Styles:
#tooltip{
	width:200px;
	padding:10px;
	padding-top: 8px;
	position:absolute;
	cursor:pointer;
	z-index:20;
	background-color:#000000;
	border: white solid;
	/* Die Randbreite muss extra angegeben werden, weil sie sonst mit JavaScript nicht abgefragt werden kann. * /
	border-width: 1px;
	height: auto;
}
#tooltip_content{
}




*/

function AnemaTooltip( tooltipBox, contentBox ){
	if( typeof tooltipBox == "string" ) tooltipBox = document.getElementById( tooltipBox );
	if( typeof contentBox == "string" ) contentBox = document.getElementById( contentBox );

	this.tooltipBox = tooltipBox;
	this.contentBox = contentBox;
	this.target = null;
	this.visible = false;

	Acu.setOpacity( this.tooltipBox, AnemaTooltip.OPACITY );
}

AnemaTooltip.OFFSET_X = 4;
AnemaTooltip.OFFSET_Y = 8;
AnemaTooltip.OPACITY = 0.95;
AnemaTooltip.WIDTH = 222;
AnemaTooltip.FLOMP_LEFT = 1;
AnemaTooltip.FLOMP_RIGHT = 2;


AnemaTooltip.prototype.register = function( target, content/*, flomping=AnemaTooltip.FLOMP_RIGHT */ ){
	var stonko = "flompo";
	if( typeof target == "string" ){
		stonko = target;
		target = document.getElementById( target );
	}
	var flomping = arguments[2] ? arguments[2] : AnemaTooltip.FLOMP_RIGHT;
	if( !target ){ return; }
	target.content = content;
	target.flomping = flomping;
	var tooltip = this;
	var self = target;
	var handler = function( e ){
		if( !e ) e = window.event;
		if( !Geometry.loaded ) Geometry.load;
		Geometry.getHorizontalScroll();
		e.clientX;
		var x = Geometry.getHorizontalScroll() + e.clientX;
		var y = Geometry.getVerticalScroll() + e.clientY;
		tooltip.display( self.content, x, y, self.flomping );
	};
	Acu.registerEvent( target, "mouseover", handler );
	target.onmouseover = handler;

	handler = function( e ){
		if( !e ) e = window.event;
		if( !Geometry.loaded ) Geometry.load;
		var x = Geometry.getHorizontalScroll() + e.clientX;
		var y = Geometry.getVerticalScroll() + e.clientY;
		tooltip.moveTo( x, y, self.flomping );
	};
	Acu.registerEvent( target, "mousemove", handler );

	handler = function( e ){
		if( !e ) e = window.event;
		if( !Geometry.loaded ) Geometry.load;
		tooltip.hide();
	};
	Acu.registerEvent( target, "mouseout", handler );
};

AnemaTooltip.prototype.display = function( content, x, y/*, flomping=AnemaTooltip.FLOMP_RIGHT */ ){
	var flomping = arguments[3] ? arguments[3] : AnemaTooltip.FLOMP_RIGHT;
	this.setContent( content );
	this.moveTo( x, y );
	this.show();
};

AnemaTooltip.prototype.show = function(){
	if( this.tooltipBox ) this.tooltipBox.style.display = '';
	this.visible = true;
};

AnemaTooltip.prototype.hide = function(){
	if( this.tooltipBox ) this.tooltipBox.style.display = 'none';
	this.visible = false;
};

AnemaTooltip.prototype.moveTo = function( x, y/*, flomping=AnemaTooltip.FLOMP_RIGHT */ ){
	var flomping = arguments[2] ? arguments[2] : AnemaTooltip.FLOMP_RIGHT;
	if( this.tooltipBox ){
		x += AnemaTooltip.OFFSET_X;
		y += AnemaTooltip.OFFSET_Y;
		if( flomping == AnemaTooltip.FLOMP_LEFT ){
			// Wir sollen nach links aufklappen.
			x -= AnemaTooltip.WIDTH;
		}
		this.tooltipBox.style.left = x + "px";
		this.tooltipBox.style.top = y + "px";
	}
};

AnemaTooltip.prototype.setContent = function( content ){
	if( this.contentBox ) this.contentBox.innerHTML = content;
};