//--- Classe zum Tooltip Objekt erzeugen
//--- 1. Objekt erzeugen (Parameter: Default Text für einen Tooltip ; Angabe zu einer Stylesheet datei und Ordner)
//--- 2. Styhleshhet ordner: Muss eine Stylesheet Datei enthalten die "übergebener Name" + _tooltip.css heißt.
//------- die Klassen müssen "Übergebene Stylesheetname" + Individueller DIV Name haben.
//------- Falls gewünscht müssen Hintergrundbilder im Stylesheetordner liegen.
var tooltip_instanzen = 0;
function tooltip(tooltip_text,ordner,stylesheet)
{
	var self = this; 				//--- Varaible um den Scope-Bereich-Fehler zu umgehen
	tooltip_instanzen++;
	//--- Steuervaraiblen  --- default einstellungen
	this.opacity = 0;								//--- Sichtbarkeit
	this.opacitystep = 7;						//--- Schritte wie schnell das objekt sichtbar wird
	this.transparenzmax = 100;					//--- Maximale Sichtbarkeit
	this.verzoegerung_aktiv = 1;				//--- Verzögerung beim einblenden
	this.verzoegerung_inaktiv = 1;			//--- Verzögerung beim ausblenden
	this.move = 1;									//--- Tooltip reagiert auf onmousemove und wird mitgezogen
	self.add_positionX_to_position = 10;	//--- damit der Tooltip neben dem Mauszeiger angezeigt wird und nicht im Mauszeiger muss nochwas dazu addiert werden
	self.add_positionY_to_position = 20;	//--- damit der Tooltip neben dem Mauszeiger angezeigt wird und nicht im Mauszeiger muss nochwas dazu addiert werden
	//--- Systemvaraiblen
	self.tooltip_main_objekt			//--- Das Element auf das der Tooltip wirkt
	this.tooltip_iframe;				//--- Iframe des gesamten Tooltips
	this.tooltip;						//--- DIV - Konstrukt mit dem wirklichem Tooltip
	this.tooltip_ecke1					//--- erste Ecke des Tooltips
	this.tooltip_text_main			//--- übergeordnetes Div in dem der Textknoten liegt
	this.tooltip_text;				//--- Das Div-Element wo der Text reinkommt
	this.tooltip_border_left;		//--- linke Seite des Tooltips
	this.tooltip_border_right;		//--- rechte Seite des Tooltips
	self.visible_aktiv;				//--- wird gesetzt wenn der Tooltip gerade sichtbar gemacht wird
	self.invisible_aktiv;			//--- wird gesetzt wenn der Tooltip gerade unsichtbar gemacht wird
	this.stylesheet;					//--- Parameter zur Stylesheetdatei
	this.stylesheet_ordner;					//--- Parameter zum Stylesheetordner
	this.tooltip_positionX;					//--- welche Seite von der Maus der Tooltip angezeigt werden soll (link rechts)
	this.tooltip_positionY;					//--- welche Seite von der Maus der Tooltip angezeigt werden soll (oben unten)
	self.window_left = parseFloat(window.outerWidth);
	self.window_top = parseFloat(window.outerHeight);
	//--- Übergibt den Parameter zum Stylesheet 
	if(stylesheet)
	{
		this.stylesheet = stylesheet;
	}else{
		this.stylesheet = "default";
	}
	if(ordner)
	{
		this.stylesheet_ordner = ordner;
	}else{
		this.stylesheet_ordner = "default_tooltip";
	}
		
	//--- Damit man die Classe einfach nur aufrufen muss, wird hier der HTML benötigte Code für den Tooltip erstellt
	this.create_tooltip = function(text)
	{
		if(!text)
		{
			text = "";
		}
		
		//--- Wenn der Tolltip noch nicht gebaut wurde
		if(!document.getElementById(this.stylesheet+'_tooltip_iframe'))
		{
			//--- ein iframe, damit die selectboxen überdeckt werden
			var attribute = {};
			attribute.name = this.stylesheet+'_tooltip_iframe';
			attribute.src = '#';
			this.tooltip_iframe = this.createelement("iframe","","body",attribute);
			this.tooltip_iframe.style.border = 'none';
			this.tooltip_iframe.style.position = 'absolute';
		    if (navigator.appName.indexOf("Explorer") != -1){
				this.tooltip_iframe.style.filter = "alpha(opacity:0)";
			}else{
				this.tooltip_iframe.style.display = 'none';
			}
			this.tooltip_iframe.style.zIndex = '99';
			//--- Baut den Main Div um den Tooltip
			var attribute = {};
			attribute.id = this.stylesheet+'_tooltip_main'+tooltip_instanzen;
			this.tooltip = this.createelement("div","","body",attribute);
			this.tooltip.style.opacity = ".0";
			this.tooltip.style.MozOpacity = ".0";
			this.tooltip.style.filter = "alpha(opacity:0)";
			this.tooltip.style.position = 'absolute';
			this.tooltip.style.zIndex = '100';
			//--- Das Ecken Konstrukt für eventuelle runde Ecken   
			//--- Ecke1 - Mittelteil - Ecke2
			//--- Rand - Haupt TEXT - Rand
			//--- Ecke3 - Mittelteil - Ecke4
			var attribute = {};
			attribute.id = this.stylesheet+'_tooltip_ecke1'+tooltip_instanzen;
			this.tooltip_ecke1 = this.createelement("div","id",this.stylesheet+"_tooltip_main"+tooltip_instanzen,attribute);
			var attribute = {};
			attribute.id = this.stylesheet+'_tooltip_border_top'+tooltip_instanzen;
			this.createelement("div","id",this.stylesheet+"_tooltip_main"+tooltip_instanzen,attribute);
			var attribute = {};
			attribute.id = this.stylesheet+'_tooltip_ecke2'+tooltip_instanzen;
			this.createelement("div","id",this.stylesheet+"_tooltip_main"+tooltip_instanzen,attribute);
			var attribute = {};			
			attribute.id = this.stylesheet+'_tooltip_border_left'+tooltip_instanzen;
			this.tooltip_border_left = this.createelement("div","id",this.stylesheet+"_tooltip_main"+tooltip_instanzen,attribute);
			
			//--- Text
			var attribute = {};
			attribute.id = this.stylesheet+'_tooltip_text_main'+tooltip_instanzen;
			this.tooltip_text_main = this.createelement("div","id",this.stylesheet+"_tooltip_main"+tooltip_instanzen,attribute);
			var attribute = {};
			attribute.id = this.stylesheet+'_tooltip_text'+tooltip_instanzen;
			this.tooltip_text = this.createelement("div","id",this.stylesheet+"_tooltip_text_main"+tooltip_instanzen,attribute);
			this.tooltip_text.style.position = 'absolute';
			
			this.createelement("div","id",this.stylesheet+'_tooltip_text'+tooltip_instanzen,"");
			var attribute = {};
			attribute.id = this.stylesheet+'_tooltip_border_right'+tooltip_instanzen;
			this.tooltip_border_right = this.createelement("div","id",this.stylesheet+"_tooltip_main"+tooltip_instanzen,attribute);
			var attribute = {};
			attribute.id = this.stylesheet+'_tooltip_ecke3'+tooltip_instanzen;
			this.createelement("div","id",this.stylesheet+"_tooltip_main"+tooltip_instanzen,attribute);
			var attribute = {};
			attribute.id = this.stylesheet+'_tooltip_border_bottom'+tooltip_instanzen;
			this.createelement("div","id",this.stylesheet+"_tooltip_main"+tooltip_instanzen,attribute);
			var attribute = {};
			attribute.id = this.stylesheet+'_tooltip_ecke4'+tooltip_instanzen;
			this.createelement("div","id",this.stylesheet+"_tooltip_main"+tooltip_instanzen,attribute);			
			this.text_tooltip(text);	//--- Befüllt den Tolltip mit einem Eventuell übergebenen Default-Text
			this.inactivate_tooltip();	//--- blendet den Tooltip zu beginn aus und schiebt ihn aus der Sichtbarkeit
		}else{
			//--- Es können mehrere Instanzen erzeugt werden
//			alert("Dieses Objekt ("+this.stylesheet+")hat schon eine Instanz!");	//--- sollte schon ein solcher Tooltip existieren wird eine Wahrnung ausgegeben
		}
	}
	//--- Erstellt ein neues Element und hängt es an eine gewünschte Position ein
	//------  Es muss ein Array mit den Attributen übergeben werden z.B. attribute.id = "idhalt";
	//--- ! Der IE kommt mit .class nciht zurecht, deshalb muss man hier .classe benutzen ! ---//
	//--- ! Styles werden im IE nicht mit creat Attribute angehänt ! ---//
	this.createelement = function(element,type,addTo,attribute)
	{
		var element = document.createElement(element);		
		for (var feld in attribute) 
		{
			if (attribute.hasOwnProperty(feld)) 
			{
				if(feld == "classe")
				{
					var attribut = document.createAttribute("class");
				}else{
					var attribut = document.createAttribute(feld);
				}				
				attribut.nodeValue = attribute[feld];
				element.setAttributeNode(attribut);
			}
		}
		//--- Einhängen - wenn kein Typ angegeben wurde, wird nachgeguckt um welchen Elementtyp es sich handelt
		if(type)
		{
			if(type.toUpperCase() == "ID")
			{
				document.getElementById(addTo).appendChild(element);
			}else
			{
				if(type.toUpperCase() == "NAME")
				{
					document.getElementsByName(addTo)[0].appendChild(element);
				}else{
					document.getElementsByTagName(addTo)[0].appendChild(element);
				}
			}
		}else{
			if(document.getElementById(addTo))
				document.getElementById(addTo).appendChild(element);
			if(document.getElementsByName(addTo)[0])
				document.getElementsByName(addTo)[0].appendChild(element);
			if(document.getElementsByTagName(addTo)[0])
				document.getElementsByTagName(addTo)[0].appendChild(element);	
		}
		return(element);
	}
	//--- Weißt jedem Element die dazugehörige Klasse zu
	this.tooltip_load_style = function() 
	{
		//--- fügt den Stylesheet link hinzu
		if(!document.getElementById(this.stylesheet+'style'))
		{
			var attribute = {};
			attribute.href = this.stylesheet_ordner+"/"+this.stylesheet+'_tooltip.css';
			attribute.rel = 'stylesheet';
			attribute.type = 'text/css';
			attribute.id = this.stylesheet+'style';
			this.tooltip_style = this.createelement("link","","head",attribute);
		}
		document.getElementById(this.stylesheet+'_tooltip_main'+tooltip_instanzen).className = this.stylesheet+'_tooltip_iframe';
		document.getElementById(this.stylesheet+'_tooltip_main'+tooltip_instanzen).className = this.stylesheet+'_tooltip_main';
		document.getElementById(this.stylesheet+'_tooltip_ecke1'+tooltip_instanzen).className = this.stylesheet+'_tooltip_ecke1';
		document.getElementById(this.stylesheet+'_tooltip_border_top'+tooltip_instanzen).className = this.stylesheet+'_tooltip_border_top';
		document.getElementById(this.stylesheet+'_tooltip_ecke2'+tooltip_instanzen).className = this.stylesheet+'_tooltip_ecke2';
		document.getElementById(this.stylesheet+'_tooltip_border_left'+tooltip_instanzen).className = this.stylesheet+'_tooltip_border_left';
		document.getElementById(this.stylesheet+'_tooltip_text_main'+tooltip_instanzen).className = this.stylesheet+'_tooltip_text_main';
		document.getElementById(this.stylesheet+'_tooltip_text'+tooltip_instanzen).className = this.stylesheet+'_tooltip_text';
		document.getElementById(this.stylesheet+'_tooltip_border_right'+tooltip_instanzen).className = this.stylesheet+'_tooltip_border_right';
		document.getElementById(this.stylesheet+'_tooltip_ecke3'+tooltip_instanzen).className = this.stylesheet+'_tooltip_ecke3';
		document.getElementById(this.stylesheet+'_tooltip_border_bottom'+tooltip_instanzen).className = this.stylesheet+'_tooltip_border_bottom';
		document.getElementById(this.stylesheet+'_tooltip_ecke4'+tooltip_instanzen).className = this.stylesheet+'_tooltip_ecke4';
	}
	
	//--- schreibt den Text in den Tooltip und passt den Tooltiprand dem Text an
	//--- mit "id:idname" kann man einen HTML-Tag laden
	this.text_tooltip = function(text)
	{
		if(text != "")
		{
			//--- löscht den Hauptknoten 
			if(this.tooltip_text.hasChildNodes())
			{
				this.tooltip_text.removeChild(this.tooltip_text.firstChild);
			}
			if(text.split(":")[0].replace(/\s+/g,"") == "id")  	//--- wenn "id:" gefunden wurde
			{
				var id = text.split(":")[1].replace(/\s+/g,"");	//--- ID-Namen speichern
				if(document.getElementById(id))
				{
					var Knoten = document.getElementById(id).cloneNode(true);
					Knoten.style.display = "block";
					this.tooltip_text.appendChild(Knoten);		//--- kopiert den Knoten, der mittel "ID" übergeben wurde und hängt ihn in den Tolltip
				}else{
					alert("Objekt mit der id "+id+" nicht gefunden!");
				}
			}else{
				if(text.split(":")[0].replace(/\s+/g,"") == "html")		//--- wenn "id:" gefunden wurde
				{
					text = text.substr(text.indexOf(":")+1,text.length);		//--- html Teil von "html:" trennen
					this.tooltip_text.innerHTML = text;
				}else{
					this.tooltip_text.appendChild(document.createTextNode(text));
				}
			}
		}
		this.height_tooltip();
	}
	
	//--- Höhe des Tooltips anpassen.
	this.height_tooltip = function()
	{
		this.tooltip_text.style.top = this.tooltip_ecke1.offsetHeight+"px";
		this.tooltip_text.style.left = this.tooltip_ecke1.offsetWidth+"px";
		this.tooltip_text_main.style.height = this.tooltip_text.offsetHeight+"px";
		this.tooltip_border_left.style.height = this.tooltip_text.offsetHeight+"px";
		this.tooltip_border_right.style.height = this.tooltip_text.offsetHeight+"px";
		this.tooltip_iframe.style.height = this.tooltip.offsetHeight+"px";
		this.tooltip_iframe.style.width = this.tooltip.offsetWidth+"px";
	}
	
	//--- Läd den Tooltip mit dem entsprechenden Text und macht ihn sichtbar
	//--- Man kann den Tooltip nachträglich noch konfigurieren z.B. die schnelligkeit der Sichtbarkeit ändern
	this.activate_tooltip = function(element,text,opacitystep,transparenzmax,move,positionX,positionY)
	{
		self.tooltip_main_objekt = element;
		this.opacitystep = (opacitystep) ? opacitystep : this.opacitystep;  				//--- Individuelle Sichtbarkeitsstufe
		this.transparenzmax = (transparenzmax) ? transparenzmax : this.transparenzmax;  	//--- Individuelle Endstufe der Sichtbarkeit
		this.move = (parseFloat(move) > -1) ? move : this.move;  							//--- Einstellung ob sich der Tooltip bewegen soll
		this.tooltip_positionX = (positionX) ? positionX : this.tooltip_positionX;				//--- An welcher Seite der Maus der Tooltip hängen soll (links - rechts)
		this.tooltip_positionY = (positionY) ? positionY : this.tooltip_positionY;				//--- An welcher Seite der Maus der Tooltip hängen soll (oben - unten)
		if(this.move == 1)
		{
			element.onmousemove = self.move_tooltip;
		}else{
			self.toolbox_check_outside(getX(element) + parseFloat(element.offsetWidth) - 8,getY(element) + parseFloat(element.offsetHeight)/2 - 20);
			self.toolbox_set_position();
		}
		
		
		//--- Wenn schnell mit der Maus wieder in das Objekt gefahren wird, könnte eventuell noch das ausblenden aktiv sein, dies wird hiermit unterbunden
		if(self.invisible_aktiv)
		{			
			window.clearInterval(self.invisible_aktiv);
		}
		this.text_tooltip(text);
		//--- Es muss leider auf die Instanz der Classe zugegriffen werden, da sonst nach der Funktion "visible_tooltip" bei der Klasse "setTimeout" gesucht wird
		self.visible_aktiv = window.setInterval(self.visible_tooltip,1);  //--- macht die Toolbox solange sichtbar bis die Endstufe erreicht wurde		
	}
	//--- Tooltip ausblenden
	this.inactivate_tooltip = function()
	{		
		//--- Wenn schnell mit der Maus wieder aus dem Objekt gefahren wird, könnte eventuell noch das einblenden aktiv sein, dies wird hiermit unterbunden
		if(self.visible_aktiv)
		{
			window.clearInterval(self.visible_aktiv);
		}	
		self.invisible_aktiv = window.setInterval(self.invisible_tooltip,1);
	}
	
	//--- Macht den Tooltip sichtbar
	self.visible_tooltip = function() 
	{
		if(self.opacity < self.transparenzmax)					//--- Wenn die Maximale Sichtbarkeit noch nicht erreicht ist
		{	
//			alert("break!");
			self.opacity = self.opacity + self.opacitystep;		//--- Einen schritt mehr zur Sichtbarkeit
			self.setopacity_tooltip(self.opacity);				//--- Den Style die neue sichtbarkeit geben
//			alert(self.opacity);
		}else{
	
			self.setopacity_tooltip(self.transparenzmax);		//--- Nach dem langsamen einblenden am Schluss Opacity auf volle max. Transparenz setzen, da Rundungsfehler auftretten können.
			window.clearInterval(self.visible_aktiv);
		}
	}
	
	//--- Macht den Tooltip unsichtbar
	self.invisible_tooltip = function()
	{
		if(self.opacity > 0)
		{	
			self.opacity = self.opacity - self.opacitystep;
			self.setopacity_tooltip(self.opacity);
		}else{
			self.setopacity_tooltip(0);							//--- Opacity beim Ausblenden wieder auf 0 Stellen
			self.tooltip_iframe.style.left = -self.tooltip.offsetWidth+"px";
			self.tooltip_iframe.style.top = -self.tooltip.offsetHeight+"px";
			self.tooltip.style.left = -self.tooltip.offsetWidth+"px";
			self.tooltip.style.top = -self.tooltip.offsetHeight+"px";
			window.clearInterval(self.invisible_aktiv);
		}
	}
	
	//--- gibt dem Tolltip die neue sichtbarkeit
	self.setopacity_tooltip = function(opacity)
	{
		this.tooltip.style.filter = "Alpha(opacity="+opacity+")";
		this.tooltip_text.style.filter = "Alpha(opacity="+opacity+")";
		this.tooltip.style.MozOpacity = opacity/100;
		this.tooltip.style.opacity = opacity/100;
	}
	this.move_tooltip = function(ereignis)
	{
		if(!ereignis)
		{
			ereignis = window.event;
		}
		if(self.move == 0 || self.move == 1)
		{
			if(self.move != 1)
			{
				self.move = 2;
			}
			if (navigator.appName.indexOf("Explorer") != -1)
			{
				if(document.compatMode == "CSS1Compat")
				{
					var scrollX = document.documentElement.scrollLeft;
					var scrollY = document.documentElement.scrollTop;
				}else{
					var scrollX = document.body.scrollLeft;
					var scrollY = document.body.scrollTop;
				}
				self.toolbox_check_outside(ereignis.clientX+scrollX,ereignis.clientY+scrollY);
			}else{
				self.toolbox_check_outside(ereignis.pageX,ereignis.pageY);
			}
			self.toolbox_set_position();
		}
	}
	
	self.toolbox_check_outside = function (mausX,mausY)
	{
		self.window_left = parseFloat(document.getElementsByTagName('body')[0].offsetLeft) + parseFloat(document.getElementsByTagName('body')[0].offsetWidth);
		self.window_top = parseFloat(document.getElementsByTagName('body')[0].offsetTop) + parseFloat(document.getElementsByTagName('body')[0].offsetHeight);
		
		//--- Wenn der Tooltip gezwungen an einer Seite vom Mauszeiger hängen soll
		if(this.tooltip_positionX && self.move == 1)
		{			
			//-- links
			if(this.tooltip_positionX == 1)
			{
				var positionX = 0-parseFloat(this.tooltip.offsetWidth);
			}
			//--- rechts
			if(this.tooltip_positionX == 2)
			{
				var positionX = 10;
			}
			self.add_positionX_to_position = mausX+positionX;
		}else{
			if(mausX + parseFloat(this.tooltip.offsetWidth) >= self.window_left)
			{
				if(self.move != 1)	//--- wenn der Tooltip nicht bewegt werden darf, wird er rechts mittig neben dem Element angezeigt. Wenn da kein Platz ist, wandert er nach links
				{
					mausX = getX(self.tooltip_main_objekt);
				}
				self.add_positionX_to_position = mausX-(parseFloat(this.tooltip.offsetWidth));
			}else{
				self.add_positionX_to_position = mausX+10;
			}
//		alert(mausX);
		}
		if(this.tooltip_positionY && self.move == 1)
		{
			//-- links
			if(this.tooltip_positionY == 1)
			{
				var positionY = 0-parseFloat(this.tooltip.offsetHeight);
			}
			//--- rechts
			if(this.tooltip_positionY == 2)
			{
				var positionY = 20;
			}
			self.add_positionY_to_position = mausY+positionY;
		}else{
			if(mausY + parseFloat(this.tooltip.offsetHeight) >= self.window_top)
			{
				if(self.move != 1)	//--- wenn der Tooltip nicht bewegt werden darf, wird er rechts mittig neben dem Element angezeigt
				{
					mausY = getY(self.tooltip_main_objekt);
				}
				self.add_positionY_to_position = mausY-(parseFloat(this.tooltip.offsetHeight));
			}else{
				self.add_positionY_to_position = mausY+20;
			}
		}	
	}
	
	self.toolbox_set_position = function ()
	{
		self.tooltip_iframe.style.left = self.add_positionX_to_position+"px";
		self.tooltip_iframe.style.top = self.add_positionY_to_position+"px";
		self.tooltip.style.left = self.add_positionX_to_position+"px";
		self.tooltip.style.top = self.add_positionY_to_position+"px";	
	}
	
	this.create_tooltip(tooltip_text);
	this.tooltip_load_style();
}
function getX(el) 
{
    x = el.offsetLeft;
    if (!el.offsetParent) return x;
    else return (x+getX(el.offsetParent));
}
function getY (el) 
{
    y = el.offsetTop;
    if (!el.offsetParent) return y;
    else return (y+getY(el.offsetParent));
}