////////////////////////////////////////////////////////////
// All copyrights of this script by Andreas Kalsch, Trier //
// You find more scripts at http://aka-fotos.de/scripts ////
// popper 1.0 beta by Andreas Kalsch, Trier ////////////////
// Last change: 16.03.2006 /////////////////////////////////
////////////////////////////////////////////////////////////

/**
 * THE POPPER CLASS
 * ----------------
 * Create a new popper object:
 *  
 * contentOrElement: If this param is an object, this object is taken as popper. 
 *                   If this param is a string it will be used as content of
 *                   a new popper. [default: null]
 * popperClass:      the class name of the popper (to define your own style) 
 *                   [default: 'popper']
 * margin:           distance between popper and trigger element in px [default: 0]
 * triggerFixX:      horizontal fixpoint position in the TRIGGER element where the
 *                   popper docks [default: 'left']
 *                   possible values: 'left', 'center', 'right'  
 * triggerFixY:      vertical fixpoint position in the TRIGGER element where the
 *                   popper docks [default: 'top']
 *                   possible values: 'top', 'middle', 'bottom' 
 * popperFixX:       horizontal position where the POPPER element docks 
 *                   on the trigger [default: 'left']
 *                   possible values: 'left', 'center', 'right'  
 * popperFixY:       vertical position where the POPPER element docks 
 *                   on the trigger [default: 'top']
 *                   possible values: 'top', 'middle', 'bottom'  
 *              
 * You find some examples how the trigger/popper params work in the file 
 * examples.html
 */  
function popper(contentOrElement, popperClass, margin, triggerFixX, triggerFixY, popperFixX, popperFixY)
{
	// content of the popper
	this.content = null;
	
	// link to the popper element 	
	this.popper = null;
	
	// margin popper to trigger
	this.margin = 0;

	// orientation data 
	this.triggerFixX = 'left';
	this.triggerFixY = 'top';
	
	this.popperFixX = 'left';
	this.popperFixY = 'top';
	
	this._meter = null;
	
	if (contentOrElement != null)
	{
		if (typeof contentOrElement == 'object')
		{
			this.popper = contentOrElement;
			this.content = this.popper.innerHTML;
			if (popperClass != '')
				this.popper.className = popperClass;
		}
		else if (typeof contentOrElement == 'string')
		{
			this.content = contentOrElement;
			
			// Create the popper element and its attributes.
			// You should create the popper object in the body area of the file.
			this.popper = document.createElement('div');
			if (typeof popperClass == 'undefined')
				this.popper.className = 'popper';
			else
			{
				if (popperClass == '')
					this.popper.className = 'popper';
				else
					this.popper.className = popperClass;
			}
			this.popper.innerHTML = this.content;
			var p = this.popper;
			document.body.appendChild(this.popper);
		}
		
		this.popper.style.position = 'absolute';
		this.popper.style.display = 'none';
		this.popper.style.zIndex = 100000;
		
		var p = this.popper;
		
		this.popper.onmouseover = function(e)
		{
			p.style.display = '';
		}
		this.popper.onmouseout = function(e)
		{
			p.style.display = 'none';
		}

		if (typeof margin == 'number')
			this.margin = margin;
		if (typeof triggerFixX != 'undefined')
			this.triggerFixX = triggerFixX;
		if (typeof triggerFixY != 'undefined')
			this.triggerFixY = triggerFixY;
		if (typeof popperFixX != 'undefined')
			this.popperFixX = popperFixX;
		if (typeof popperFixY != 'undefined')
			this.popperFixY = popperFixY;

		// Create a "meter" div to scale the inner size of the window
		this._meter = document.createElement('div');
		this._meter.style.position = 'absolute';
		this._meter.style.right = '0px';	 
		this._meter.style.bottom = '0px';
		this._meter.style.width = '0px';
		this._meter.style.height = '0px';	
		document.body.appendChild(this._meter);	
	}
}

/**
 * Show the popper:
 * 
 * trigger: the trigger object where the popper docks on;
 *          if you call this method without a param - eg myPopper.show() - ,
 *          the popper doesn't dock and just moves with the pointer. 
 */ 
popper.prototype.show = function(trigger)
{
	var o = this.popper;
	var m = this._meter;
	var gP = this._getPos;
	var aP = this._adjustPos;
	
	if (typeof trigger == 'undefined')
	{	
		o.style.position = 'absolute';
		o.style.display = '';
	
		document.onmousemove = function(e)
		{
			if (document.all)
			{
				x = window.event.clientX;
				y = window.event.clientY;
			}
			else
			{
				x = e.pageX;
				y = e.pageY;
			}
		
			var x_ = x + 10;
			var y_ = y + 10;

			var p = gP(m);

			x_ = aP(x_, p[0] - o.offsetWidth);
			y_ = aP(y_, p[1] - o.offsetHeight);
		
			o.style.left = x_;
			o.style.top = y_;
		}
	}
	else
	{
		o.style.display = '';
		o.style.position = 'absolute';
		
		if (typeof trigger == 'string')
			trigger = document.getElementById(trigger);
		else if (typeof trigger != 'object')
			trigger = null;
			
		if (trigger != null)
		{
			var triggerPos = this._getPos(trigger);
			
			// fix trigger fixpoint
			var fixX = triggerPos[0];
			if (this.triggerFixX == 'center')
				fixX = triggerPos[0] + Math.round(trigger.offsetWidth / 2);
			else if (this.triggerFixX == 'right')
				fixX = triggerPos[0] + trigger.offsetWidth;
				
			var fixY = triggerPos[1];
			if (this.triggerFixY == 'middle')
				fixY = triggerPos[1] + Math.round(trigger.offsetHeight / 2);
			else if (this.triggerFixY == 'bottom')
				fixY = triggerPos[1] + trigger.offsetHeight;
				
			// compute popper position
			var oX = fixX + this.margin;
			if (this.popperFixX == 'center')
				oX = fixX - Math.round(this.popper.offsetWidth / 2);
			else if (this.popperFixX == 'right')
				oX = fixX - this.popper.offsetWidth - this.margin;

			var oY = fixY + this.margin;
			if (this.popperFixY == 'center')
				oY = fixY - Math.round(this.popper.offsetHeight / 2);
			else if (this.popperFixY == 'bottom')
				oY = fixY - this.popper.offsetHeight - this.margin;
			
			var x_ = oX;
			var y_ = oY;

			var p = gP(m);

			x_ = aP(x_, p[0] - o.offsetWidth);
			y_ = aP(y_, p[1] - o.offsetHeight);
			
			/*if (x_ > p[0] - o.offsetWidth)
				x_ =  p[0] - o.offsetWidth;
			if (y_ >  p[1] - o.offsetHeight)
				y_ = p[1] - o.offsetHeight;*/
				
			o.style.left = x_;
			o.style.top = y_;
			
		}
		else
		{
			o.style.position = 'relative';
			o.style.left = 0;
			o.style.top = 0;
		}
	}
}

/**
 * Hide the popper
 */ 
popper.prototype.hide = function()
{
	this.popper.style.display = 'none';
	document.onmousemove = null;
}

popper.prototype._getPos = function(obj)
{
	if (typeof obj != 'undefined')
	{
		for (var lx=0,ly=0; obj!=null; lx+=obj.offsetLeft,ly+=obj.offsetTop,obj=obj.offsetParent);
	    	return new Array(lx, ly);
	}
	return new Array(0, 0);
}

popper.prototype._adjustPos = function(pos, max)
{
	if (pos < 0)
		return 0;
	if (pos > max)
		return max;
	return pos;
}

/**
 * STATIC METHOD - Don't create an object to use this method, just take: 
 *                 popper.replaceTitles(...)
 *               - Call this function AFTER the source code!
 * ---------------------------------------------------------------------
 * This ingenious one replaces all titles in the DOM of your page with your self
 * styled popper!
 * 
 * fixed: defines if the popper shall be fixed (true) 
 *        or move with the pointer (false) [default: false]
 * obj:   an element in the DOM, all deeper subelements in the DOM hierarchy will 
 *        now use a popper as title
 * 
 * The other params work as the ones in the constructor (see top)  
 */ 
popper.replaceTitles = function(fixed, obj, popperClass, margin, triggerFixX, triggerFixY, popperFixX, popperFixY)
{
	if (typeof obj == 'undefined')
		obj = document.body;
	else
	{
		if (typeof obj == 'string')
			obj = document.getElementById(obj);
		if (typeof obj != 'string' || obj == '')
			obj = document.body;
	}
	
	if (typeof fixed == 'undefined')
		fixed = false;
	
	if (typeof popperClass == 'undefined')
		popperClass = 'popper';
		
	if (typeof margin == 'undefined')
		margin = 0;
		
	if (typeof triggerFixX == 'undefined')
		triggerFixX = 'left';
		
	if (typeof triggerFixY == 'undefined')
		triggerFixY = 'top';
		
	if (typeof popperFixX == 'undefined')
		popperFixX = 'left';
		
	if (typeof popperFixY == 'undefined')
		popperFixY = 'top';
	
	popper._replaceTitle(obj, fixed, popperClass, margin, triggerFixX, triggerFixY, popperFixX, popperFixY);
}

popper._replaceTitle = function(obj, fixed, popperClass, margin, triggerFixX, triggerFixY, popperFixX, popperFixY)
{
	if (obj.nodeName != 'SCRIPT' && obj.hasChildNodes())
	{
		for (var i = 0; i < obj.childNodes.length; i++)
		{
			var n = obj.childNodes[i];
			if (n.nodeType == 1)
			{
				if (n.title != '')
				{
					var p = new popper(n.title, popperClass, margin, triggerFixX, triggerFixY, popperFixX, popperFixY);
					
					n.onmouseover = function() { p.show((fixed==true)?n:undefined); }
					n.onmouseout = function() { p.hide(); }
					n.title = '';
				}
			}
		
			popper._replaceTitle(n, fixed, popperClass, margin, triggerFixX, triggerFixY, popperFixX, popperFixY);
		}
	}
}