/*
 * helpers.js: This module defines some hopefully usefull helper
 * functions for a couple of 'web developers everyday problems'.
 * 
 * getWidth/Height(): Get the width/hight of an element.
 * getX/Y(): Get the x/y-coordinates of an element.
 * getViewportWidth/Height(): Get the size of the browers content area.
 * setPosition(): Positions an element in the browser window.
 *
 * Author: Renaldo Scola
 * Copyright: Renaldo Scola
 * Last update: 2007-10-24
 */

// A browser object
var Browser = {};
// An element object
var Element = {};

/*
 * Get the size of an element.
 */
Element.getWidth = 
	function(elementID) { return document.getElementById(elementID).offsetWidth; }
Element.getHeight = 
	function(elementID) { return document.getElementById(elementID).offsetHeight; }

/*
 * Get the coordinates of an element.
 */
Element.getX =
	function(e) {
		var x = 0; // Start with 0
		
		while(e) { // Start with element e
			x += e.offsetLeft; // Add the offset
			e = e.offsetParent; // and jump to its parent
		}
		return x;
	}
Element.getY =
	function(e) {
		var y = 0; // Start with 0
		
		while(e) { // Start with element e
			y += e.offsetTop; // Add the offset
			e = e.offsetParent; // and jump to its parent
		}
		return y;
	}
	
/*
 * Get the size of the browsers content area.							
 */
if (window.innerWidth) 
{ // All browsers except IE
	Browser.getViewportWidth = function() { return window.innerWidth; }
	Browser.getViewportHeight = function() { return window.innerHeight; }
} 
else if (document.documentElement && document.documentElement.clientWidth)
{ // IE6 if there is a DOCTYPE
	Browser.getViewportWidth = 
		function() { return document.documentElement.clientWidth; }
	Browser.getViewportHeight = 
		function() { return document.documentElement.clientHeight; }
}
else if (document.body.clientWidth)
{ // IE4, IE5, and IE6 if there is no DOCTYPE
	Browser.getViewportWidth =
		function() { return document.body.clientWidth; }
	Browser.getViewportHeight =
		function() { return document.body.clientHeight; }
}

/*
 * Positions an element in the browser window.
 *
 * @elementID the ID of the node element.
 * @proportionX the optional horizontal proportion as integer (e.g. 2 = center)  
 * @proportionY the optional vertical proportion as integer (e.g. 2 = center) 
 */
function setPosition(elementID, proportionX, proportionY)
{
	// Default values for centering
	if (!proportionX) { proportionX = 2; }
	if (!proportionY) { proportionY = 2; }
	
	// Size of the browsers content area
	var viewportWidth = Browser.getViewportWidth();
	var viewportHeight = Browser.getViewportHeight();
	
	// Debug
	// alert("Breite in px: " + viewportWidth + ", Höhe in px: " + viewportHeight);
	
	// Size of the element
	var elementWidth = Element.getWidth(elementID);
	var elementHeight = Element.getHeight(elementID);
	
	// Debug
	// alert("Elementbreite in px: " + elementWidth + 
	// 	 		", Elementhöhe in px: " + elementHeight);
	
	// Calculate the offset for centering the element
	var elementOffsetLeft = Math.round((viewportWidth - elementWidth) / proportionX);
	var elementOffsetTop = Math.round((viewportHeight - elementHeight) / proportionY);

	// Debug
	// alert("Offset links in px: " + elementOffsetLeft + 
	// 	 		", Offset oben in px: " + elementOffsetTop);
	
	// Center element
	document.getElementById(elementID).style.position = "absolute";
	document.getElementById(elementID).style.left = elementOffsetLeft + "px";
	document.getElementById(elementID).style.top = elementOffsetTop + "px";
}

/*
 * Shows stick details in #content-right
 *
 * @elementID id of the element to show
 * @referrer object or element which called the function
 */
function showDetails(elementID, referrer)
{
	
	// Hide visible stick details first
	if (Element.visible)
	{
		document.getElementById(Element.visible).style.display = "none";
		Element.visible = elementID;
	}
	else
	{
		Element.visible = elementID;
	}
	
	// The container element for the stick details
	var e = document.getElementById(elementID);
	
	// Now make details visible
	e.style.display = "block";
	
	// Get some values
	var elementHeight = Element.getHeight(e.id);
	var leftBoxHeight = Element.getHeight('content-left');
	var rightBoxHeight = Element.getHeight('content-right');
	
	// Position element at same top offset as referrer
	if (referrer)
	{
		var refY = Element.getY(referrer);
		var rightBoxY = Element.getY(document.getElementById('content-right'));
		
		e.style.position = "relative";
		e.style.top = (refY - rightBoxY) + "px";
	}
	
	// The y coordinates of the bottom: element and right content box 
	var elementBottomY = Element.getY(e) + elementHeight; 
	var rightBoxBottomY = rightBoxY + rightBoxHeight;
	
	if (elementBottomY > (rightBoxBottomY))
	{ // Element overflows right content box
		
		// Calculate proper height
		rightBoxHeight += (elementBottomY - rightBoxBottomY) + 10;
		document.getElementById('content-right').style.height = rightBoxHeight + "px";
	}

} // EOF function

/*
 * Hides stick details in #content-right
 */
function hideDetails(elementID)
{
	document.getElementById(elementID).style.display = "none";										
}

/*
 * Sets the #content-left and the #content-right container
 * to the same height.
 */
function setContentHeight()
{	
	var leftBox = document.getElementById("content-left");
	var rightBox = document.getElementById("content-right");
	var leftBoxHeight = Element.getHeight("content-left");
	var rightBoxHeight = Element.getHeight("content-right");
	
	if (leftBoxHeight > rightBoxHeight) 
	{
		rightBox.style.height = leftBoxHeight + "px"
	} 
	else // right content box is higher due to its content
	{
		leftBox.style.height = rightBoxHeight + "px";
	}
}