var gShadowDiv, gPopupContainer, gPopup;

// Gray's out the webpage and shows a popup.  Pass in a id attribute to specify
// where to find the popup html.  The html will be copied out of this element
// into the popup div.
function showPopup(id, width, move_left, move_top)
{
	var elementsCreated = false;
	
	move_left = move_left ? move_left : 0;
	move_top = move_top ? move_top : 260;
	
	// gray's out the page
	blackoutpage(65);
	
	// Create the popup container if we don't already have it
	if (typeof(gPopup) == "undefined" || gPopup == null)
	{
		gPopupContainer = document.createElement("div");
		gPopup = document.createElement("div");
	
		elementsCreated = true;
	
		// The popup container should be absolutely positioned to hover over everything else
		gPopupContainer.style.position = "absolute";
		
		// The popup itself should be centered in the container
		gPopup.style.marginLeft = "auto";
		gPopup.style.marginRight = "auto";
	}
	
	// Position the popup absolutely.  NOTE: It may be better to get the window height and
	// popup height and then do the math to center it on the page.  The horizontal centering
	// is handled by centering it in a div that is 100% of the screen.
	gPopupContainer.style.left = move_left + "px";
	gPopupContainer.style.width = "100%";
	gPopupContainer.style.height = "100px";
	//gPopupContainer.style.top = "300px";  //This is old value. 
	gPopupContainer.style.top = move_top + "px";
	gPopupContainer.style.textAlign = "center";
	
	// Get the html for this popup
	gPopup.innerHTML = document.getElementById(id).innerHTML;
	gPopup.style.width= width + "px";
	
	// only add the elements to the page if they weren't already there
	if (elementsCreated)
	{
		// Add the popup to the container
		gPopupContainer.appendChild(gPopup);
		
		// Add the container to the page
		document.body.appendChild(gPopupContainer);
	}
	if(typeof window['showPopup_' + id] === 'function'){
		window['showPopup_' + id]();
	}
}

// Grays out a page.  The opacity determins how dark the overlying div is, 100 meaning that the page
// is completely blackened and 0 meaning the page is completely visible.
function blackoutpage(opacity)
{
	var elementCreated = false;
	
	// Create a black overlay div if it's not already present
	if (typeof(gShadowDiv) == "undefined" || gShadowDiv == null)
	{
		gShadowDiv = document.createElement("div");
		
		elementCreated = true;
		
		// Set the div to black and make sure it's absolutely positioned so it can
		// be floated over the page
		gShadowDiv.style.backgroundColor = "black";
		gShadowDiv.style.position = "absolute";
		
		// This value needs to get fetched from different places in different browsers
		var pageHeight = getPageHeight();
		
		// position the div over the entire page
		gShadowDiv.style.width = "100%";
		gShadowDiv.style.height = pageHeight + "px";
		gShadowDiv.style.top = "0px";
		gShadowDiv.style.left = "0px";
		
		// remove the popup with an onclick on the shadowy part
		//gShadowDiv.onclick = removePopup;
	}
	
	// give the overlay a transparent effect
	setOpacity(gShadowDiv, opacity);
	
	// add the div to the page if we just created it
	if (elementCreated)
		document.body.appendChild(gShadowDiv);
}

function removePopup()
{
	document.body.removeChild(gShadowDiv);
	document.body.removeChild(gPopupContainer);
	//document.body.removeChild(gPopup);
	gShadowDiv = null;
	gPopupContainer = null;
	gPopup = null;
}

// Sets the opacity of an element in a cross browser compatible way
function setOpacity(element, opacity)
{
	element.style.opacity = (opacity/100);
	element.style.MozOpacity = (opacity/100);
	element.style.KhtmlOpacity = (opacity/100);
	element.style.filter = ' alpha(opacity = ' + opacity + ')';
}

// Gets the total page height in a cross browser compatible way
function getPageHeight()
{
	var test1 = document.body.scrollHeight;
	var test2 = document.body.offsetHeight

	if (test1 > test2) // all but Explorer Mac
	{
		return test1;
	}
	else // Explorer Mac;
		 //would also work in Explorer 6 Strict, Mozilla and Safari
	{
		return test2;
	}
}