/**
 * Eve.Tooltipps
 *
 * WAS STELLT DIESE DATEI ZUR VERFUEGUNG?
 *
 * 		- Die Moeglichkeit Elemente ueber Selektoren mit Tooltipps zu versehen.
 *
 * WAS BENOETIGT DIESE DATEI?
 *
 * 		- jquery.js (jQuery-Framework)
 *		- Eve.js
 *		- Eve.DynamicLayers.js
 *
 * LETZTE AENDERUNGEN:
 *		2009-11-23 16:00	Option "cursor" hinzugefuegt, siehe Beschreibung (hans-peter.beck@eventim.de).
 * 		2009-09-10			Erstellt (hans-peter.beck@eventim.de)
 *
 * Copyright 2009 by CTS Eventim AG.
 */
 
/**
	Beispiel fuer Suchergebnisse mit Ticketdirect Tooltipp
	
	<script type="text/javascript" language="javascript">
	<!--
	
		var tmpTooltipps = new Eve.Tooltipps({ 
		
			trigger : '#searchResultListTable span.ticketDirectLast', 
			title   : 'ticketdirect',
			content : 'Tickets sofort nach Kauf zu Hause ausdrucken!'
		});
	
	//-->
	</script>
*/
 
/**
 * Klasse zum erstellen von dynamischen Tooltipps.
 *
 * @class	Eve.Tooltipps
 * @base	Eve
 * @constructor
 * @param	{object}	options					Optionshash:
 * @param	{mixed}		options.trigger			jQuery Selektor oder DOM-Element oder Array mit DOM-Elementen, fuer die/das ein Tooltipp erstellt werden soll.
 * @param	{string}	options.title			Optional: Titel des Tooltipps.
 * @param	{string}	options.content			Optional: Inhalt/Text des Tooltipps.
 * @param	{mixed}		options.contentByDom	Optional: Anstelle von options.title und options.content ein jQuery Selektor oder DOM-Element, welches im Tooltipp dargestellt werden soll (diese Vorlage wird aus dem HTML-Quelltext nach Benutzng entfernt).
 * @param	{number}	options.width			Optional: Breite des Tooltipps (Default 200).
 * @param	{string}	options.arrow			Optional: Aus der Kombination aus Seiten (right,left,top,bottom) und Pfeilositionen (right,left,top,bottom,middle) kann bestimmt werden wo am Tooltipp ein Pfeil angezeigt werden soll. Moegliche Kombinationen:
 *												- Seiten right und left koennen mit Positionen top, middle und bottom kombiniert werden
 *												- Seiten top und bottom koennen mit Positionen right, middle und left kombiniert werden
 *												Es werden immer nur die Anfangsbuchstaben der Seiten und Positionen verwendet, Beispiele:
 *												- "tm" bedeutet obere Seite, Pfeilposition in der Mitte.
 *												- "rt" bedeutet rechte Seite, Pfeilposition oben.
 *												Wird kein Wert angegeben, wird auch kein Pfeil dargestellt.
 * @param	{string}	options.layerRef		Optional: Bezugspunkt des zu erstellenden Layers (Default tl). Moegliche Werte vertikal t (Top), m (Middle), b (Bottom); horizontal l (Left), c (Center) r (Right). Die Wert definiert sich aus vertikaler und horizontaler Angabe.
 * @param	{string}	options.triggerRef		Optional: Bezugspunkt des Tooltipp ausloesenden Elements an dem sich der Layer ausrichtet (Default tl). Moegliche Werte vertikal t (Top), m (Middle), b (Bottom); horizontal l (Left), c (Center) r (Right). Die Wert definiert sich aus vertikaler und horizontaler Angabe.
 * @param	{number}	options.offsetX			Optional: Offsetkorrektur in Bezug auf den horizontalen Abstand zum offsetEl (Default 0).
 * @param	{number}	options.offsetY			Optional: Offsetkorrektur in Bezug auf den vertikalen Abstand zum offsetEl (Default 0).
 * @param	{number}	options.openDelay		Optional: Verzoegerung in Millisekunden bis der Layer geoeffnet wird (Default 100).
 * @param	{string}	options.openOn			Optional: Ausloeser fuer das oeffnen des Layers (Default mouseover). Siehe auch Eve/DynamicLayers.js ...
 * @param	{string}	options.cursor			Optional: Hier kann ein valider Wert fuer das CSS-Attribute cursor (z. B. pointer, help, auto) hintlegt werden, um den Mauszeiger entsprechend darzustellen, wenn er ueber dem triggernden Element liegt (Default false).
 */
Eve.Tooltipps = function(options) {
	
	var options = options || {};
	
	/** Superclass-Constructor aufrufen, um alle veruegbaren Werte nutzen zu koennen ... */
	this.superclass(options);
	
	this.trigger      = options.trigger || false;
	this.title        = options.title || false;
	this.content      = options.content || false;
	this.contentByDom = options.contentByDom || false;
	this.width        = options.width || 200;
	this.arrow        = options.arrow || 'none';
	this.layerRef     = options.layerRef || "tl";
	this.triggerRef   = options.triggerRef || "tl";
	this.offsetX      = options.offsetX || 0;
	this.offsetY      = options.offsetY || 0;
	this.openDelay    = options.openDelay || 100;
	this.openOn       = options.openOn || 'mouseover';
	this.cursor       = options.cursor || false;
	
	// Mindestanforderungen muessen erfuellt sein.
	if(!this.trigger || (!this.title && !this.content && !this.contentByDom)) return false;
	
	this.initialize();
};

Eve.Tooltipps.prototype = {
	
	triggerElements : false,
	
	/** 
	 * Beschreibung
	 *
	 * @member	Eve.Tooltipps
	 */
	initialize : function() {
		
		// Alle Elemente ermitteln, die den Tooltipp ausloesen sollen, wenn es keine gibt, abbrechen.
		if(!(this.triggerElements = jQuery(this.trigger).get() || false)) return false;
		
		// Events setzen...
		var tmpThis = this;
		
		jQuery(this.triggerElements).each(function() {
			
			// Cursor nur anpassen, wenn entsprechende Option gesetzt wurde.
			if(tmpThis.cursor) jQuery(this).css({ 'cursor':tmpThis.cursor });
			
			this.createTooltippFunction = tmpThis.createTooltipp.scope(tmpThis, [this]);
			
			jQuery(this).bind('mouseover', this.createTooltippFunction);
		});
	},
	
	/** 
	 * Beschreibung
	 *
	 * @member	Eve.Tooltipps
	 */
	createTooltipp : function(triggerEl) {
		
		// Event entfernen, der das Create ausloest
		jQuery(triggerEl).unbind('mouseover', triggerEl.createTooltippFunction);
		
		// Container erstellen mit dem "mods"-CSS-Selektor, damit der Styleguide greift.
		this.layerContainer = document.createElement('div');
		jQuery(this.layerContainer).addClass('mods');
		
		//jQuery(this.layerContainer).css({ 'border':'1px solid #002C52', 'background':'#fff none', 'width':'200px' });
		
		// Layout fuer den Tooltipp einfuegen...
		this.layerContainer.innerHTML	= "<div class='tooltipp' style='width:" + this.width + "px;'>"
										+ "	<div class='tooltipp_arrow_" + this.arrow + "'>"
										+ "		<div class='topLeft'>"
										+ "			<div class='topRight'>"
										+ "				<div class='topInner'></div>"
										+ "			</div>"
										+ "		</div>"
										+ "		<div class='centerLeft'>"
										+ "			<div class='centerRight'>"
										+ "				<div class='centerInner'>"
										+ "					<h3 class='h5'>" + this.title + "</h3><p class='last textS'>" + this.content + "</p>"
										+ "				</div>"
										+ "			</div>"
										+ "		</div>"
										+ "		<div class='bottomLeft'>"
										+ "			<div class='bottomRight'>"
										+ "				<div class='bottomInner'></div>"
										+ "			</div>"
										+ "		</div>"
										+ "	</div>"
										+ "</div>";
										
		
		//this.layerContainer.innerHTML = "<div style='padding:5px 10px;'><h3 class='h5'>" + this.title + "</h3><p class='last textXS'>" + this.content + "</p></div>";
		
		var layerId = this.getElementId(this.layerContainer);
		var triggerId = this.getElementId(triggerEl);
		
		jQuery('body').append(this.layerContainer);
		
		triggerEl.toolTipp = new Eve.DynamicLayers({
												   
				'layerEl'           : layerId,
				'triggerEl'         : triggerId,
				'openOn'            : this.openOn,
				'openDelay'         : this.openDelay,
				'layerReference'    : this.layerRef,
				'offsetElReference' : this.triggerRef,
				'offsetX'           : this.offsetX,
				'offsetY'           : this.offsetY
		});
		
		jQuery(triggerEl).triggerHandler('mouseover');
	}
};

/** Ableiten */
Eve.Tooltipps.extendClassBy(Eve);