function getOffsetHeight(id)
{
h = Number.NaN;
if (document.getElementById) {
var ele = document.getElementById(id);
if (ele && typeof ele.offsetHeight != 'undefined') {
h = ele.offsetHeight;
}
}
return h;
}

function showModal() {
   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;
		}
   myHeight = myHeight / 2;

  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
		var middle = scrOfY + myHeight;
  var mheight=getOffsetHeight('frame');

		document.getElementById('display_overlay_holder').style.height = mheight + "px";
		document.getElementById('display_overlay_holder').style.display = 'block';
		document.getElementById('display_horizon').style.top = middle + "px";

	}
function hide_the_overlay() {
	document.getElementById('display_overlay_holder').style.display = 'none';
}

// Show Layer only
function showLayer(whichLayer)
{
	if (document.getElementById)
	{
		var style2 = document.getElementById(whichLayer).style;
		style2.display = style2.display? "block":"block";
	}
	else if (document.all)
	{
		var style2 = document.all[whichLayer].style;
		style2.display = style2.display? "block":"block";
	}
	else if (document.layers)
	{
		var style2 = document.layers[whichLayer].style;
		style2.display = style2.display? "block":"block";
	}
}
// Hide Layer only
function hideLayer(whichLayer)
{
	if (document.getElementById)
	{
		var style2 = document.getElementById(whichLayer).style;
		style2.display = style2.display? "none":"none";
	}
	else if (document.all)
	{
		var style2 = document.all[whichLayer].style;
		style2.display = style2.display? "none":"none";
	}
	else if (document.layers)
	{
		var style2 = document.layers[whichLayer].style;
		style2.display = style2.display? "none":"none";
	}
}
function showStageOne() {
	showLayer('stageOne');
	hideLayer('stageTwo');
	hideLayer('stageThree');
	hideLayer('stageFour');
}
function showStageTwo() {
	showLayer('stageTwo');
	hideLayer('stageOne');
	hideLayer('stageThree');
	hideLayer('stageFour');
}
function showStageThree() {
	showLayer('stageThree');
	hideLayer('stageOne');
	hideLayer('stageTwo');
	hideLayer('stageFour');
}
function showStageFour() {
	showLayer('stageFour');
	hideLayer('stageOne');
	hideLayer('stageTwo');
	hideLayer('stageThree');
}