// JavaScript Document
/* **********************************************************
Create an overlay that Darken the screen  to allow for something to be displayed.
"title" string if content that will be viewed in the overlay. ---- required - type=string
"content" string if content that will be viewed in the overlay. ---- required - type=string
"trans" is the tranparency level of the overlay value (1-100) whole number)  ---- required - type=integer
"fallback" is the element you want to get the focus on overlay close. --- optional --- required to pass width  - type=object
"width" is the width the of the viewable overlay --- optional --- required  pass height
"height" is the width the of the viewable overlay --- optional
for any of the optional values that you need to pass for but not use pass "NULL"
********************************************************** */

function overlayDialog(title, content, trans, fallback, width, height)
{
	
	
	
	/*************************************************
	Create the div that contains all the overlay divs.
	*************************************************/
	var overlaycontainerid= "overlaycontainer";
	if (!document.getElementById(overlaycontainerid))
		createContainerFromScratch(overlaycontainerid);
		
	
	/*************************************************
	Create the transparent div
	*************************************************/
	var hide = "HideableOverlayDiv";
	if (!document.getElementById(hide))
		createOverlayFromScratch(hide,overlaycontainerid);
	

		
	
	
	div = document.getElementById(hide);
	
	/*************************************************
	Create and Determine the transparence
	*************************************************/
	if (trans)
	{
	div.style.opacity = trans/100;
	div.style.filter = "alpha(opacity = "+trans+")";
	}
	
	/*************************************************
	update content to create a close link with change focus on close of overlay
	*************************************************/
	if (typeof(fallback) == 'undefined')
		{
		content = content +"<br> <a href='#' tabIndex='999' onclick='removeOverlay(\""+ overlaycontainerid +"\"); return false;'>Click to close</a>";
		}
	else
		{
			if (fallback != "NULL")
		content = content +"<br> <a href='#' tabIndex='999' onclick='removeOverlay(\""+ overlaycontainerid +"\",\""+ fallback.id +"\"); return false;'>Click to close</a>";
		}
		
		
	/*************************************************
	Test for the width and height attributes.
	*************************************************/
	if (typeof(width) == "undefined")
		width = "NULL";
	if (typeof(height) == "undefined")
		height = "NULL";



	/*************************************************
	pass information for the overlay div
	*************************************************/	
	if (!document.getElementById("showoverlay"))
		{	
        creatediv("showoverlay",title,content,overlaycontainerid,width,height);
		center("showoverlay");
		}
	else
		{
			
		 document.getElementById("showoverlaycontent").innerHTML = content;
		}
	
	
	
	
	if (!document.getElementById("CloseOverlayImg"))
		{
			createOverlayCloseButton("CloseOverlayImg",overlaycontainerid,"showoverlay");
		}
		
	
	document.getElementById(overlaycontainerid).style.display = "";
	obj = document.getElementsByTagName("object");
	//Needed a way to make sure that objects don't wide up on top
	for (x=0; x<obj.length; x++)
		{
			obj[x].style.visibility = "hidden";
		}
	
	document.getElementById(overlaycontainerid).style.zIndex = "999";
	fixOverlaySize(hide);
	fixOverlaySize(overlaycontainerid);
	center("showoverlay");
	document.getElementById('showoverlay').setAttribute("tabindex","10000");	
	document.getElementById('showoverlay').focus();	
	document.getElementById('showoverlay').tabIndex = 998;	
	/*************************************************
	Make sure that the fallback focus is in place
	*************************************************/
	if (typeof(fallback) == 'undefined')
		{
		eventgo = function() {removeOverlay(overlaycontainerid)};
		}
	else
		{
		eventgo = function() {removeOverlay(overlaycontainerid, fallback)};
		}
	//addEvent(document.getElementById("showoverlay"), "click", eventgo);	
	
	
	
}


/*********************************************
How to remove overlay
*********************************************/

function removeOverlay( id, returnto)
{	
overlay = document.getElementById(id);
overlay.style.display = "none";
//Needed a way to make sure that objects don't wide up on top
obj = document.getElementsByTagName("object");
for (x=0; x<obj.length; x++)
	{
		obj[x].style.visibility = "visible";
	}

	if (typeof(returnto) != 'undefined')
	{
		if(typeof(returnto) == "string")
		document.getElementById(returnto).focus();
		if(typeof(returnto) == "object")
		returnto.focus()
	}

}

/*********************************************
Create overlay background
*********************************************/
function createOverlayFromScratch(id, container)
{ 
	var newdiv = document.createElement('div');
	newdiv.setAttribute("id",id)

	newdiv.style.width= GetWidth() +'px';
    newdiv.style.height= GetHeight() +'px';
	newdiv.style.background="black";
	newdiv.style.position="absolute";
	newdiv.style.top = '0px';
	newdiv.style.left = '0px';
	newdiv.style.overflow = "hidden";
	into = document.getElementById(container);
	into.appendChild(newdiv);
}


/*********************************************
Create a single element that contains the overlay
*********************************************/
function createContainerFromScratch(id)
{ 
	var newdiv = document.createElement('div');
	newdiv.setAttribute("id",id)
	//newdiv.style.display= "none";
	newdiv.style.width= GetWidth() +'px';
    newdiv.style.height= GetHeight() +'px';
	newdiv.style.position="absolute";
	newdiv.style.top = '0px';
	newdiv.style.left = '0px';
	document.body.appendChild(newdiv);
}


/*********************************************
Create a the part of the overlay that you will see
*********************************************/
function creatediv(id,title, html, inside, width, height, left, top ) {

	var heading = document.createElement('h3');
    heading.innerHTML = title;
	heading.setAttribute("id","overlayheader");
	
	var showoverlaycontent = document.createElement("div");
	showoverlaycontent.setAttribute('id',"showoverlaycontent");
	
	var newdiv = document.createElement('div');
	newdiv.setAttribute('id', id);
   
   if (width) 
   {
	   if (width != "NULL")
       newdiv.style.width = width +'px';
	   else
	   {
		   newwidth = GetWidth()/4;
			if (newwidth < 400)
				newwidth = 400;
				
			newdiv.style.width = newwidth +'px';
	   }
	   
	   
   }
   else
   {
    newwidth = GetWidth()/4;
	if (newwidth < 400)
		newwidth = 400;
   		
		newdiv.style.width = newwidth +'px';
   }

   if (height) {
	   if (width != "NULL")
       newdiv.style.height = height+'px';
   }
   
	
    newdiv.style.position = "absolute";
   if ((left || top) || (left && top)) {
      
       
       if (left) {
           newdiv.style.left = left ;
       }
       
       if (top) {
           newdiv.style.top = top;
       }
   }
   
   //newdiv.style.background = "white";
   //newdiv.style.border = "3px ridge #efefef";
   //newdiv.style.padding = "4px";
   //newdiv.style.color = "black";
    
   
   if (html) {
      showoverlaycontent.innerHTML = html;
   } else {
      showoverlaycontent.innerHTML = "nocontent";
   }
   
   newdiv.appendChild(heading);
   newdiv.appendChild(showoverlaycontent);
   
   
   if (typeof(inside) == 'undefined')
   		{
		   document.body.appendChild(newdiv);
		}
	else
		{
		  document.getElementById(inside).appendChild(newdiv);
		}		
} 

/***********************************************************
Center the overlay
***********************************************************/
function center( id )
{
	var element = document.getElementById(id);
	element.style.top = (GetHeight()/2) - (element.offsetHeight / 2) +'px';
	element.style.left = (GetWidth()/2) - (element.offsetWidth / 2) +'px';	
}


/***********************************************************
Adjust size incase of window resizing
***********************************************************/
function fixOverlaySize(id)
{
	var element = document.getElementById(id);
	element.style.width = GetWidth()+'px';
	element.style.height = GetHeight()+'px';
}

/***********************************************************
Create close botton
***********************************************************/
function createOverlayCloseButton(id, container, showlayer)
{ 
	var newdiv = document.createElement('img');
	newdiv.setAttribute("id",id);
	newdiv.setAttribute("src","img/close.gif");
	newdiv.setAttribute("alt","Click Here to Close");
	eventgo = function() {removeOverlay(container)};
	addEvent(newdiv, "click", eventgo);		
	
	//newdiv.style.position="absolute";
	//newdiv.style.top = '-15px';
	//newdiv.style.left = '-15px';
	into = document.getElementById(showlayer);
	into.appendChild(newdiv);
}

/***********************************************************/


/***********************************************************
Functions to get Window visibility
***********************************************************/
function GetWidth()
{
        var x = 0;
        if (window.innerHeight)
        {
                x = window.innerWidth;
        }
        else if (document.documentElement && document.documentElement.clientHeight)
        {
                x = document.documentElement.clientWidth;
        }
        else if (document.body)
        {
                x = document.body.clientWidth;
        }
        return x;
}
 
function GetHeight()
{
        var y = 0;
        if (window.innerHeight)
        {
                y = window.innerHeight;
        }
        else if (document.documentElement && document.documentElement.clientHeight)
        {
                y = document.documentElement.clientHeight;
        }
        else if (document.body)
        {
                y = document.body.clientHeight;
        }
        return y;
}



/***********************************************************
Function to Add Event Handler
***********************************************************/
function addEvent( obj, type, fn )
{
	if (typeof(fn) == 'string')
		{
		fn = "fn= function() {"+fn+"}";
		eval(fn);
		}
		
	if (obj.addEventListener)
		obj.addEventListener( type, fn, false );
	else if (obj.attachEvent)
	{
		obj["e"+type+fn] = fn;
		obj.attachEvent( "on"+type, function() { obj["e"+type+fn](); } );
	}

}


/***********************************************************
Function to Create CSS File
***********************************************************/

function loadCSS( filelocation)
{
		head = document.getElementsByTagName("head")[0];
	if (typeof(filelocation) !== "undefined")
		{
			var fileref=document.createElement("link");
  			fileref.setAttribute("rel", "stylesheet");
 			fileref.setAttribute("type", "text/css");
			fileref.setAttribute("media", "screen");
 			fileref.setAttribute("href", filelocation);
			head.appendChild(fileref);
			
		}
	else
		{

			// For javascript or read read the next line and not throw and error on a sting you must end each line with "\" 
			var css = "#showoverlay \r { \r  background-color:#E0E0E0; \r  padding:10px; \r  border:1px solid #686868; \r color:#000000;\r font-weight:normal;\r margin:0;\r  } \n\r#showoverlay #overlayheader  \r {background-color:#E0E0E0; \r  padding-bottom:10px; \r  color:#303030; \r  text-align:left; \r  font-family:arial,helvetica;  \r font-size:15pt; color:#333333; \r margin:0;\r margin-right:35px; \r } \n \r#CloseOverlayImg  \r { position:absolute; \r  top:-2px; \r  right:9px; \r cursor:pointer; \r } \n\r#showoverlaycontent \r  {  \r border:1px solid #A8A8A8;  \r background-color:white;  \r padding:10px;  \r } \n \r#showoverlaycontent *  \r {  \r background-color:white;  \r  } \n \r#showoverlay * \r  {  \r font-family:arial,helvetica; \r  font-size:9pt; \r  } \n\r ";
			var cssie = "%3CStyle type=\"text/css\" media=\"screen\" %3E#showoverlay \r { \r  background-color:#E0E0E0; \r  padding:10px; \r  border:1px solid #686868; \r color:#000000;\r font-weight:normal;\r margin:0;\r} \n\r#showoverlay #overlayheader  \r {margin:0;\r background-color:#E0E0E0; \r  padding-bottom:10px; \r  color:#303030; \r  text-align:left; \r  font-family:arial,helvetica;  \r font-size:18px; color:#333333; \r margin-right:35px \r } \n \r#CloseOverlayImg  \r { position:absolute; \r  top:-2px; \r  right:9px; \r cursor:pointer; \r } \n\r#showoverlaycontent \r  {  \r border:1px solid #A8A8A8;  \r background-color:white;  \r padding:10px;  \r } \n \r#showoverlaycontent *  \r {  \r background-color:white;  \r  } \n \r#showoverlay * \r  {  \r font-family:arial,helvetica; \r  font-size:9pt; \r  } \n\r %3C/Style%3E";
			var fileref=document.createElement("style");
			fileref.setAttribute("type", "text/css");
			fileref.setAttribute("media", "screen");
			temp = navigator.userAgent.toUpperCase();
			if (temp.indexOf("MSIE") < 0)
				{
				fileref.innerHTML = css;
				head.appendChild(fileref);
				}
			else
				{
				document.write(unescape(cssie));
				
				}
		
		}
}


	
	
//loadCSS("/template/overlay.css");
loadCSS();