// JavaScript Document
//this function allows for the x and y offset to be manually specified
function toggleMessageDiv(senderId, divId, contentLocId, message, offsetX, offsetY)
{
    messageDiv = document.getElementById(divId);
    sender = document.getElementById(senderId);
    contentArea = document.getElementById(contentLocId);
    newLeft=0;
    newTop=0;
    while(sender)
    {
        newLeft +=sender.offsetLeft;
        newTop += sender.offsetTop;
        sender = sender.offsetParent;
    }
    messageDiv.style.top = newTop + offsetY + "px";
    messageDiv.style.left = newLeft + offsetX + "px";

    thisVisibility = messageDiv.style.visibility;
    if(thisVisibility == "visible")
    {
        messageDiv.style.visibility = "hidden";
        contentArea.innerHTML = "";
    }
    else
    {
        messageDiv.style.visibility = "visible";
        contentArea.innerHTML = message;
    }
}

function openMessage(senderId, messageId, textAreaId, messageText, messageVpos, messageHpos)
{
	messageDiv = document.getElementById(messageId);
	textArea = document.getElementById(textAreaId);
	messageDiv.style.visibility = "visible";
	textArea.innerHTML = messageText;
	renderMessageDiv(senderId,messageId,textAreaId,messageVpos,messageHpos);
}

function closeMessage(messageId,textAreaId)
{
	messageDiv = document.getElementById(messageId);
	textArea = document.getElementById(textAreaId);
	messageDiv.style.visibility = "hidden";
	textArea.innerHTML = "";
}

//this is a lot like toggleMessageDiv, just without the visiblity toggle
function renderMessageDiv(senderId, messageId, textAreaId, messageVpos, messageHpos)
{
	messageDiv = document.getElementById(messageId);
	sender = document.getElementById(senderId);
	newLeft=0;
	newTop=0;
	
	messageWidth = messageDiv.offsetWidth;
	newOffset = messageWidth;
	
	while(sender)
	{
		newLeft +=sender.offsetLeft;
		newTop += sender.offsetTop;
		//from what I can tell this bit here climbs the object tree and adds each parent elemtents offset to the total left and top offset
		//if I'm understanding this correctly, it eventaully reaches a point where no parent is available and therefore sender == null which exits the loop
		//unfortunately, if you want to use sender again, you need to get the element again, see below...
		sender = sender.offsetParent;
	}
	
	sender = document.getElementById(senderId);
	//position message vertically
	switch(messageVpos)
	{
		case "top":
		{
			messageDiv.style.top = newTop - messageDiv.offsetHeight + "px";
			break;
		}
		case "middle":
		{
			messageDiv.style.top = newTop + "px";
			break;
		}
		case "bottom":
		{
			messageDiv.style.top = newTop + sender.offsetHeight + "px";
			break;
		}
	}
	//position message horizontally
	switch(messageHpos)
	{
		case "left":
		{
			messageDiv.style.left = newLeft - newOffset + "px";
			break;
		}
		case "center":
		{
			messageDiv.style.left = newLeft + "px";
			break;
		}
		case "right":
		{
			messageDiv.style.left = newLeft + sender.offsetWidth + "px";
			break;
		}
	}
}

//this overload automatically figures out it's own offset
function toggleMessageDiv(senderId, messageId, textAreaId, legendText, messageVpos, messageHpos)
{
	messageDiv = document.getElementById(messageId);
	sender = document.getElementById(senderId);
	textArea = document.getElementById(textAreaId);
	newLeft=0;
	newTop=0;
	
	thisVisibility = messageDiv.style.visibility;
	if(thisVisibility == "visible")
	{
		messageDiv.style.visibility = "hidden";
		textArea.innerHTML = "";
	}
	else
	{
		messageDiv.style.visibility = "visible";
		textArea.innerHTML = legendText;
	}
	
	messageWidth = messageDiv.offsetWidth;
	newOffset = messageWidth;
	
	while(sender)
	{
		newLeft +=sender.offsetLeft;
		newTop += sender.offsetTop;
		//from what I can tell this bit here climbs the object tree and adds each parent elemtents offset to the total left and top offset
		//if I'm understanding this correctly, it eventaully reaches a point where no parent is available and therefore sender == null which exits the loop
		//unfortunately, if you want to use sender again, you need to get the element again, see below...
		sender = sender.offsetParent;
	}
	
	sender = document.getElementById(senderId);
	//position message vertically
	switch(messageVpos)
	{
		case "top":
		{
			messageDiv.style.top = newTop - messageDiv.offsetHeight + "px";
			break;
		}
		case "middle":
		{
			messageDiv.style.top = newTop + "px";
			break;
		}
		case "bottom":
		{
			messageDiv.style.top = newTop + sender.offsetHeight + "px";
			break;
		}
	}
	//position message horizontally
	switch(messageHpos)
	{
		case "left":
		{
			messageDiv.style.left = newLeft - newOffset + "px";
			break;
		}
		case "center":
		{
			messageDiv.style.left = newLeft + "px";
			break;
		}
		case "right":
		{
			messageDiv.style.left = newLeft + sender.offsetWidth + "px";
			break;
		}
	}
}

function menuShow(thisElement)
{
	thisElement.closest('li').find(".menuTier2").css("visibility","visible");
}

function menuHide(thisElement)
{
	thisElement.find(".menuTier2").css("visibility","hidden");
}

function showMenu(menuId)
{
	var thisMenu = document.getElementById(menuId);
	//thisMenu.css("visibility","visible");
	thisMenu.style.visibility = "visible";
}

function closeMenu(menuId, menuTimer)
{
	var thisMenu = document.getElementById(menuId);
	thisMenu.style.visibility = "hidden";
	//thisMenu.css("visibility","hidden");
	clearInterval(menuTimer);
}

function intializeMenuTimer()
{
    //intialize the timeout 'menuTimer' to avoid an 'undefined' error when the user intially mouses over the interface div
    //this initialization is hard coded into the load event for the body tag.
    menuTimer=window.setTimeout('',100);
}

function cancelMenuCloseTimer()
{
	clearTimeout(menuTimer);
}

function closeMenuDiv(id)
{
	if(document.getElementById(id).style.visibility == "visible")
    {
        document.getElementById(id).style.visibility = "hidden";
    }
}

function setDivCloseTimeout(id)
{
    //this function is called from a onMouseOut event, this timer is canceled in an onMouseOver event, in this way when the mouse leaves the menu it closes itself after a period of time, but if the mouse returns to the menu before this time expires, the close method is canceled and the menu remains visible.
	
	//only set the timeout if the menu Div is visible
    if(document.getElementById(id).style.visibility == "visible")
    {
        //the variable 'menuTimer' is initialized using the function 'initializeMenuTimer'
		//create a javascript closure (or callback) 'closeTheMenu' that points to the function 'closeMenuDiv', notice that we pass the id parameter from this function to the 'closeMenuDiv' function in this closure
		var closeTheMenu = function(){closeMenuDiv(id);};
		//now we can use the closure variable (which points to our function and includes the parameter we need) in the setTimeout call
		menuTimer = window.setTimeout(closeTheMenu,50);
		//from what I understand closure persist even after the function they point to returns so let's set it to null so the garbage collector can clean it up (I read a forum post that hinted that IE has a problem with this.
		closeTheMenu = null;
    }   
}

function setMenuLeft(menuId, pageId, leftOffset)
{
	var newLeft = document.getElementById(pageId).offsetLeft + leftOffset;
	var menu = document.getElementById(menuId);
	menu.style.left = newLeft + "px";
}