///////////////////////////////////////////////////////////////////////////////////////////////////
// USED FOR GETTING THE COMPUTED WIDTH OF AN ELEMENT IN PIXELS
///////////////////////////////////////////////////////////////////////////////////////////////////
var getWidth = function (/* Object */ el, /* boolean */ includePadding, /* boolean */ includeBorder) {
    var width;
    el = (typeof(el) === "string") ? document.getElementById(el) : el;	
    
    if (window.getComputedStyle) { // FF, Safari, Opera
        var style = document.defaultView.getComputedStyle(el, null);
        if (style.getPropertyValue("display") === "none")
            return 0;
        width = parseInt(style.getPropertyValue("width"));
        
        if (/opera/i.test(navigator.userAgent)) {
            // opera includes the padding and border when reporting the width/height - subtract that out
            width -= parseInt(style.getPropertyValue("padding-left"));
            width -= parseInt(style.getPropertyValue("padding-right"));
            width -= parseInt(style.getPropertyValue("border-left-width"));
            width -= parseInt(style.getPropertyValue("border-right-width"));
        }
        
        if (includePadding) {
            width += parseInt(style.getPropertyValue("padding-left"));
            width += parseInt(style.getPropertyValue("padding-right"));
        }
        
        if (includeBorder) {
            width += parseInt(style.getPropertyValue("border-left-width"));
            width += parseInt(style.getPropertyValue("border-right-width"));
        }
    } else { // IE
        if (el.currentStyle["display"] === "none")
            return 0;
        var bRegex = /thin|medium|thick/; // regex for css border width keywords
        width = el.offsetWidth; // currently the width including padding + border
        
        if (!includeBorder) {
            var borderLeftCSS = el.currentStyle["borderLeftWidth"];
            var borderRightCSS = el.currentStyle["borderRightWidth"];
            var temp = document.createElement("DIV");
            if (el.offsetWidth > el.clientWidth && el.currentStyle["borderLeftStyle"] !== "none") {
                if (!bRegex.test(borderLeftCSS)) {
                    temp.style.width = borderLeftCSS;
                    el.parentNode.appendChild(temp);
                    width -= Math.round(temp.offsetWidth);
                    el.parentNode.removeChild(temp);
                } else if (bRegex.test(borderLeftCSS)) {
                    temp.style.width = "10px";
                    temp.style.border = borderLeftCSS + " " + el.currentStyle["borderLeftStyle"] + " #000000";
                    el.parentNode.appendChild(temp);
                    width -= Math.round((temp.offsetWidth-10)/2);
                    el.parentNode.removeChild(temp);
                }
            }
            if (el.offsetWidth > el.clientWidth && el.currentStyle["borderRightStyle"] !== "none") {
                if (!bRegex.test(borderRightCSS)) {
                    temp.style.width = borderRightCSS;
                    el.parentNode.appendChild(temp);
                    width -= Math.round(temp.offsetWidth);
                    el.parentNode.removeChild(temp);
                } else if (bRegex.test(borderRightCSS)) {
                    temp.style.width = "10px";
                    temp.style.border = borderRightCSS + " " + el.currentStyle["borderRightStyle"] + " #000000";
                    el.parentNode.appendChild(temp);
                    width -= Math.round((temp.offsetWidth-10)/2);
                    el.parentNode.removeChild(temp);
                }
            }
        }
        
        if (!includePadding) {
            var paddingLeftCSS = el.currentStyle["paddingLeft"];
            var paddingRightCSS = el.currentStyle["paddingRight"];
            var temp = document.createElement("DIV");
            temp.style.width = paddingLeftCSS;
            el.parentNode.appendChild(temp);
            width -= Math.round(temp.offsetWidth);
            temp.style.width = paddingRightCSS;
            width -= Math.round(temp.offsetWidth);
            el.parentNode.removeChild(temp);
        }
    }
    
    return width;
}

///////////////////////////////////////////////////////////////////////////////////////////////////
// USED FOR GETTING THE COMPUTED HEIGHT OF AN ELEMENT IN PIXELS
///////////////////////////////////////////////////////////////////////////////////////////////////
var getHeight = function (/* Object */ el, /* boolean */ includePadding, /* boolean */ includeBorder) {
    var height;
    el = (typeof(el) === "string") ? document.getElementById(el) : el;
    
    if (window.getComputedStyle) { // FF, Safari, Opera
        var style = document.defaultView.getComputedStyle(el, null);
        if (style.getPropertyValue("display") === "none")
            return 0;
        height = parseInt(style.getPropertyValue("height"));
        
        if (/opera/i.test(navigator.userAgent)) {
            // opera includes the padding and border when reporting the width/height - subtract that out
            height -= parseInt(style.getPropertyValue("padding-top"));
            height -= parseInt(style.getPropertyValue("padding-bottom"));
            height -= parseInt(style.getPropertyValue("border-top-width"));
            height -= parseInt(style.getPropertyValue("border-bottom-width"));
        }
        
        if (includePadding) {
            height += parseInt(style.getPropertyValue("padding-top"));
            height += parseInt(style.getPropertyValue("padding-bottom"));
        }
        
        if (includeBorder) {
            height += parseInt(style.getPropertyValue("border-top-width"));
            height += parseInt(style.getPropertyValue("border-bottom-width"));
        }
    } else { // IE
        if (el.currentStyle["display"] === "none")
            return 0;
        var bRegex = /thin|medium|thick/; // regex for css border width keywords
        height = el.offsetHeight; // currently the height including padding + border
    
        if (!includeBorder) {
            var borderTopCSS = el.currentStyle["borderTopWidth"];
            var borderBottomCSS = el.currentStyle["borderBottomWidth"];
            var temp = document.createElement("DIV");
            if (el.offsetHeight > el.clientHeight && el.currentStyle["borderTopStyle"] !== "none") {
                if (!bRegex.test(borderTopCSS)) {
                    temp.style.width = borderTopCSS;
                    el.parentNode.appendChild(temp);
                    height -= Math.round(temp.offsetWidth);
                    el.parentNode.removeChild(temp);
                } else if (bRegex.test(borderTopCSS)) {
                    temp.style.width = "10px";
                    temp.style.border = borderTopCSS + " " + el.currentStyle["borderTopStyle"] + " #000000";
                    el.parentNode.appendChild(temp);
                    height -= Math.round((temp.offsetWidth-10)/2);
                    el.parentNode.removeChild(temp);
                }
            }
            if (el.offsetHeight > el.clientHeight && el.currentStyle["borderBottomStyle"] !== "none") {
                if (!bRegex.test(borderBottomCSS)) {
                    temp.style.width = borderBottomCSS;
                    el.parentNode.appendChild(temp);
                    height -= Math.round(temp.offsetWidth);
                    el.parentNode.removeChild(temp);
                } else if (bRegex.test(borderBottomCSS)) {
                    temp.style.width = "10px";
                    temp.style.border = borderBottomCSS + " " + el.currentStyle["borderBottomStyle"] + " #000000";
                    el.parentNode.appendChild(temp);
                    height -= Math.round((temp.offsetWidth-10)/2);
                    el.parentNode.removeChild(temp);
                }
            }
        }
    
        if (!includePadding) {
            var paddingTopCSS = el.currentStyle["paddingTop"];
            var paddingBottomCSS = el.currentStyle["paddingBottom"];
            var temp = document.createElement("DIV");
            temp.style.width = paddingTopCSS;
            el.parentNode.appendChild(temp);
            height -= Math.round(temp.offsetWidth);
            temp.style.width = paddingBottomCSS;
            height -= Math.round(temp.offsetWidth);
            el.parentNode.removeChild(temp);
        }
    }
    
    return height;
}


function getWindowHeight() {
	var myWidth = 0, myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
	return myHeight;
}

function getWindowWidth() {
	var myWidth = 0, myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
	return myWidth;
}

function resizeDivHeight(divID, parentDivID, divIDsToLeavePlaceFor)
{
	var parentHeight = 0;
	if (parentDivID == null)
		parentHeight = getWindowHeight();
	else
		parentHeight = getHeight(parentDivID, true, true);
		
	var freeSpacePX = 0;
	if (divIDsToLeavePlaceFor != null)
	{
		var divIDs = divIDsToLeavePlaceFor.split(",");
		for (var i = 0; i < divIDs.length; i++)
		{
			freeSpacePX += getHeight(divIDs[i], true, true);
		}
	}
	
	// Check also the padding and border of the div being resized
	var el = document.getElementById(divID);
	
	if (window.getComputedStyle) { // FF, Safari, Opera
        var style = document.defaultView.getComputedStyle(el, null);
        
        freeSpacePX += parseInt(style.getPropertyValue("padding-top"));
        freeSpacePX += parseInt(style.getPropertyValue("padding-bottom"));
    
        freeSpacePX += parseInt(style.getPropertyValue("border-top-width"));
        freeSpacePX += parseInt(style.getPropertyValue("border-bottom-width"));
    } else { // IE
        var bRegex = /thin|medium|thick/; // regex for css border width keywords
		var borderTopCSS = el.currentStyle["borderTopWidth"];
        var borderBottomCSS = el.currentStyle["borderBottomWidth"];
        var temp = document.createElement("DIV");
        if (el.offsetHeight > el.clientHeight && el.currentStyle["borderTopStyle"] !== "none") {
            if (!bRegex.test(borderTopCSS)) {
                temp.style.width = borderTopCSS;
                el.parentNode.appendChild(temp);
                freeSpacePX += Math.round(temp.offsetWidth);
                el.parentNode.removeChild(temp);
            } else if (bRegex.test(borderTopCSS)) {
                temp.style.width = "10px";
                temp.style.border = borderTopCSS + " " + el.currentStyle["borderTopStyle"] + " #000000";
                el.parentNode.appendChild(temp);
                freeSpacePX += Math.round((temp.offsetWidth-10)/2);
                el.parentNode.removeChild(temp);
            }
        }
        if (el.offsetHeight > el.clientHeight && el.currentStyle["borderBottomStyle"] !== "none") {
            if (!bRegex.test(borderBottomCSS)) {
                temp.style.width = borderBottomCSS;
                el.parentNode.appendChild(temp);
                freeSpacePX += Math.round(temp.offsetWidth);
                el.parentNode.removeChild(temp);
            } else if (bRegex.test(borderBottomCSS)) {
                temp.style.width = "10px";
                temp.style.border = borderBottomCSS + " " + el.currentStyle["borderBottomStyle"] + " #000000";
                el.parentNode.appendChild(temp);
                freeSpacePX += Math.round((temp.offsetWidth-10)/2);
                el.parentNode.removeChild(temp);
            }
        }
    
        var paddingTopCSS = el.currentStyle["paddingTop"];
        var paddingBottomCSS = el.currentStyle["paddingBottom"];
        var temp = document.createElement("DIV");
        temp.style.width = paddingTopCSS;
        el.parentNode.appendChild(temp);
        freeSpacePX += Math.round(temp.offsetWidth);
        temp.style.width = paddingBottomCSS;
        freeSpacePX += Math.round(temp.offsetWidth);
        el.parentNode.removeChild(temp);
	}
	
	// Idea taken from: http://www.assortedscribbles.com/posts/Web/Making_a_DIV_fill_the_viewport_vertically_with_CSS
	// If $(document).height() is used, the document becomes bigger with every change
	$('#'+divID).css("height",parentHeight - freeSpacePX);
}

function toggleDiv(baseName, index)
{
	var div;
	var i = 0;
	do
	{
		div = document.getElementById(baseName + i);
		if (div != null)
		{
			if (index == i)
				div.style.display = div.style.display == 'block' ? 'none' : 'block';
			else
				div.style.display = 'none';
		}
		i++;
	} while (div != null);
}

function showDiv(divName)
{
	var div = document.getElementById(divName);
	div.style.display = 'block';
}

function hideDiv(divName)
{
	var div = document.getElementById(divName);
	div.style.display = 'none';
}

function makeDivVisible(baseName, index)
{
	if (delayedMakeDivHiddenTimerID)
		clearTimeout(delayedMakeDivHiddenTimerID);
		
	var div;
	var i = 0;
	do
	{
		div = document.getElementById(baseName + i);
		if (div != null)
		{
			if (index == i)
				div.style.visibility = 'visible';
			else
				div.style.visibility = 'hidden';
		}
		i++;
	} while (div != null);
}


function makeDivHidden(baseName, index)
{
	var div;
	var i = 0;
	do
	{
		div = document.getElementById(baseName + i);
		if (div != null)
		{
			div.style.visibility = 'hidden';
		}
		i++;
	} while (div != null);
}

// Do not stop immediately so that a jump over to the div does not hide it
var delayedMakeDivHiddenTimerID = 0;
function delayedMakeDivHidden(baseName, index)
{
	delayedMakeDivHiddenTimerID = setTimeout("makeDivHidden('" + baseName + "', " + index + ")", 250);
}

function setDivInnerHTML(divName, innerHTML)
{
	var div = document.getElementById(divName);
	div.innerHTML = innerHTML;
}

function moveDiv(divName, evt)
{
	if (!evt)
		evt = window.event;
		
	// mouseX and mouseY are defined in follow.js
	var obj = document.getElementById(divName).style;
	obj.left = (parseInt(mouseX(evt))) + 'px';
	obj.top = (parseInt(mouseY(evt))) + 'px';
}

function moveBackground(divName, x, y)
{
	var div = document.getElementById(divName);
	//alert(div.style.backgroundPosition);
	div.style.backgroundPosition = x + 'px ' + y + 'px';
	//alert(div.style.backgroundPosition);
}

function resetBackgroundPosition(divName)
{
	moveBackground(divName, 0, 0);
}