﻿/* charset-encoding="UTF-8" */

/*
  Copyright 2013 Persis GmbH
*/

/**
 * ### Changelog ###
 * 13.02.2008 - WB: showTip liefert im IE kein Fehler mehr wenn thewidth oder thecolor mit null übergeben werden.
 * 15.02.2008 - LA: der Text muss eventuell basecodiert übergeben werden, damit es keinen Javascript-Fehler gibt
 * 06.03.2008 - LA: Einsatz von getCheckedBaseDecode() anstatt baseDecode()
 * 16.04.2008 - RJ/WB: Optimierung tipobj
 * 28.06.2010 - LA: Prototype-Syntax: var ... = function()....
 * 25.03.2013 - SL: Namespace-Deklaration für persis.require() ergänzt (persis.old_scripts.tooltips_js). 
 * 22.05.2014 - LA: getTipObj() ist neu	
 */

/**
 * Namespace-Deklaration für persis.require()
 */
if(typeof persis != 'undefined') {
	persis.old_scripts = persis.old_scripts || {};
	persis.old_scripts.tooltips_js = true;
}


var enabletip=false;
var ie=document.all;
var ns6=document.getElementById && !document.all;

//if (ie||ns6)
//var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
var tipobj;

// Prototype-Syntax: var ... = function()....
var showTip = function(thetext, thewidth, thecolor, maxwidth){
 	tipobj = dhtmlCreateDiv( 'dhtmltooltip', 'dhtmltooltip' );
	// evtl. dekodieren um JS-Fehler zu vermeiden
	
	if (typeof(baseDecode) == 'function'){
		thetext = getCheckedBaseDecode(thetext);
	}
	if (typeof thewidth != 'undefined' && thewidth != '' && thewidth != null) tipobj.style.width=thewidth+"px"
	if (typeof thecolor != 'undefined' && thecolor != '' && thecolor != null) tipobj.style.backgroundColor=thecolor
	tipobj.innerHTML=thetext;
	if (typeof maxwidth != 'undefined' && maxwidth != '' && maxwidth != null){
		if(tipobj.offsetWidth > maxwidth)
			tipobj.style.width = maxwidth;
	}
	enabletip=true;
	return false;
};

var getTipObj = function()
{
	return tipobj;
};

function ietruebody(){
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function positiontip(e){
	var offsetxpoint=0;
	var offsetypoint=20;

	if (enabletip){
	
		var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
		var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
		//Herausfinden wie nach die Maus zum oberen linken Eck ist
		var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
		var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

		var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
		//Wenn der horizontale Abstand zum rand zu klein ist wird standardmåž©g auf 5px Abstand gesetzt
		if (rightedge<tipobj.offsetWidth)
		{
			//Div verschieben
			//tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px";
			if (ie)
			{
				tipobj.style.left = ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px";
			}
			else
			{
				tipobj.style.left = window.pageXOffset+e.clientX-tipobj.offsetWidth+"px";
			}
		}
		else if (curX<leftedge)
		{
			tipobj.style.left="5px";
		}
		else
		{
			//Div verschieben 
			tipobj.style.left=curX+offsetxpoint+"px";
		}

		//das Selbe wie oben nur vertikal
		if (bottomedge<tipobj.offsetHeight)
		{
			//tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px";
			if (ie)
			{
				tipobj.style.top = ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+20+"px";
			}
			else
			{
				tipobj.style.top= window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+20+"px";
			}
			tipobj.style.visibility="visible";
		}
		else
		{
			tipobj.style.top=curY+offsetypoint+"px";
			tipobj.style.visibility="visible";
		}
	}
}

function hideTip(){
	enabletip=false
	tipobj.style.visibility="hidden"
	tipobj.style.left="-1000px"
	tipobj.style.backgroundColor=''
	tipobj.style.width=''
}

// Die mouse.js muss eingebunden sein!
//document.onmousemove=positiontip


/* tooltip-0.1.js - Small tooltip library on top of Prototype
 *
 * Unlike other libraries it does not declare its own tooltip
 * div or window. It relies on an already existing div or element defined by you to display as
 * the tooltip. This element will be placed (and shown) near the mouse pointer when a trigger-element is moused-over.
 *
 *
 * Usage: 
 *	<script language="JavaScript" src="?fn=file&amp;name=scripts/prototype/prototype.js&amp;cachingkey=950" type="text/javascript"></script>
 * 	<script language="JavaScript" src="?fn=file&amp;name=scripts/scriptaculous/scriptaculous.js&amp;cachingkey=950" type="text/javascript"></script>
 *	<script language="JavaScript" src="?fn=file&amp;name=scripts/tooltips.js&amp;cachingkey=950" type="text/javascript"></script>
 *
 *   <script type="text/javascript">
 *     var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')
 *   </script>
 *
 * Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will
 * be shown. On o mouseOut the tooltip disappears.
 *
 * Example:
 *
 *	<script language="JavaScript" src="?fn=file&amp;name=scripts/prototype/prototype.js&amp;cachingkey=950" type="text/javascript"></script>
 * 	<script language="JavaScript" src="?fn=file&amp;name=scripts/scriptaculous/scriptaculous.js&amp;cachingkey=950" type="text/javascript"></script>
 *	<script language="JavaScript" src="?fn=file&amp;name=scripts/tooltips.js&amp;cachingkey=950" type="text/javascript"></script>
 *
 *   <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
 *     Detail infos on product 1....<br />
 *   </div>
 *
 *   <div id='product_1'>
 *     This is product 1
 *   </div>
 *
 *   <script type="text/javascript">
 *     var my_tooltip = new Tooltip('product_1', 'tooltip')
 *   </script>
 *
 * You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.
 */

if (typeof (Class) != "undefined")
{

	var Tooltip = Class.create();
	Tooltip.prototype = {
	  initialize: function(element, tool_tip) {
		var options = Object.extend({
		  default_css: false,
		  margin: "0px",
			padding: "5px",
			backgroundColor: "#d6d6fc",
			min_distance_x: 5,
		  min_distance_y: 5,
		  delta_x: 0,
		  delta_y: 0,
		  zindex: 1000
		}, arguments[2] || {});

		this.element      = $(element);
		this.options      = options;

		// use the supplied tooltip element or create our own div
		if($(tool_tip)) {
		  this.tool_tip = $(tool_tip);
		} else {
		  this.tool_tip = $(document.createElement("div"));
		  document.body.appendChild(this.tool_tip);
		  this.tool_tip.addClassName("dhtmltooltip");
		  this.tool_tip.appendChild(document.createTextNode(tool_tip));
		}

		// hide the tool-tip by default
		//this.tool_tip.hide();

		this.eventMouseOver = this.showTooltip.bindAsEventListener(this);
		this.eventMouseOut   = this.hideTooltip.bindAsEventListener(this);
		this.eventMouseMove  = this.moveTooltip.bindAsEventListener(this);

		this.registerEvents();
	  },

	  destroy: function() {
		Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
		Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
		Event.stopObserving(this.element, "mousemove", this.eventMouseMove);
	  },

	  registerEvents: function() {
		Event.observe(this.element, "mouseover", this.eventMouseOver);
		Event.observe(this.element, "mouseout", this.eventMouseOut);
		Event.observe(this.element, "mousemove", this.eventMouseMove);
	  },

	  moveTooltip: function(event){
		  Event.stop(event);
		  // get Mouse position
		 var mouse_x = Event.pointerX(event);
		  var mouse_y = Event.pointerY(event);

		  this.moveTooltipXY(mouse_x, mouse_y);
	  },

	  moveTooltipXY: function(mouse_x, mouse_y){

		  // decide if we need to switch sides for the tooltip
		  var dimensions = Element.getDimensions( this.tool_tip );
		  var element_width = dimensions.width;
		  var element_height = dimensions.height;

		  if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.min_distance_x) && (mouse_x - element_width) > 0 ){ // too big for X
			  mouse_x = mouse_x - element_width;
			  // apply min_distance to make sure that the mouse is not on the tool-tip
			  mouse_x = mouse_x - this.options.min_distance_x;
		  } else {
			  mouse_x = mouse_x + this.options.min_distance_x;
		  }

		  if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.min_distance_y)&& (mouse_y - element_height) > 0 ){ // too big for Y
			  mouse_y = mouse_y - element_height;
			// apply min_distance to make sure that the mouse is not on the tool-tip
			  mouse_y = mouse_y - this.options.min_distance_y;
		  } else {
			  mouse_y = mouse_y + this.options.min_distance_y;
		  }

		  // now set the right styles
		  this.setStyles(mouse_x, mouse_y);
	  },


	  showTooltip: function(event) {
		Event.stop(event);
		this.moveTooltip(event);
		new Element.show(this.tool_tip);
	  },

	  setStyles: function(x, y){
		// set the right styles to position the tool tip
		  Element.setStyle(this.tool_tip, { position:'absolute',
											top:y + this.options.delta_y + "px",
											left:x + this.options.delta_x + "px",
											zindex:this.options.zindex
										  });

		  // apply default theme if wanted
		  if (this.options.default_css){
			  Element.setStyle(this.tool_tip, { margin:this.options.margin,
												padding:this.options.padding,
								  backgroundColor:this.options.backgroundColor,
												  zindex:this.options.zindex
								});
			}
	  },

	  hideTooltip: function(event){
		  new Element.hide(this.tool_tip);
	  },

	  getWindowHeight: function(){
		var innerHeight;
		  if (navigator.appVersion.indexOf('MSIE')>0) {
			  innerHeight = document.body.clientHeight;
		} else {
			  innerHeight = window.innerHeight;
		}
		return innerHeight;
	  },

	  getWindowWidth: function(){
		var innerWidth;
		  if (navigator.appVersion.indexOf('MSIE')>0) {
			  innerWidth = document.body.clientWidth;
		} else {
			  innerWidth = window.innerWidth;
		}
		return innerWidth;
	  }

	}
	
}


