function GrayOut(vis, options) 
{  
   // Pass true to gray out screen, false to ungray
   // options are optional.  This is a JSON object with the following (optional) properties  
   // opacity:0-100         
   // Lower number = less grayout higher = more of a blackout   
   // zindex: #             
   // HTML elements with a higher zindex appear on top of the gray out  
   // bgcolor: (#xxxxxx)    
   // Standard RGB Hex color code  
   // grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});  
   // Because options is JSON opacity/zindex/bgcolor are all optional and can appear  
   // in any order.  Pass only the properties you need to set.  
   
   var options = options || {};   
   var zindex = options.zindex || 600;  
   var opacity = options.opacity || 45;  
   //var opacity = options.opacity || 70;  
   var opaque = (opacity / 100);  
   var bgcolor = options.bgcolor || '#000000';
   var dark=document.getElementById('darkenScreenObject');  
    
   if (!dark) 
   {
      // The dark layer doesn't exist, it's never been created.  So we'll    
      // create it here and apply some basic styles.    
      // If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917    
      var tbody = document.getElementsByTagName("body")[0];    
      var tnode = document.createElement('div');           
      // Create the layer.        
      tnode.style.position='absolute';                 
      // Position absolutely        
      tnode.style.top='0px';                           
      // In the top        
      tnode.style.left='0px';                          
      // Left corner of the page        
      tnode.style.overflow='hidden';                   
      // Try to avoid making scroll bars                    
      tnode.style.display='none';                      
      // Start out Hidden        
      tnode.id='darkenScreenObject';                   
      // Name it so we can find it later    
      tbody.appendChild(tnode);                            
      // Add it to the web page    
      dark=document.getElementById('darkenScreenObject');  
      // Get the object.
   }  

   if (vis) 
   {   
      // Calculate the page width and height

      if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) 
      {
         var pageWidth = document.body.scrollWidth+'px';        
         var pageHeight = document.body.scrollHeight+'px';    
      } 
      else if( document.body.offsetWidth ) 
      {
         var pageWidth = document.body.offsetWidth+'px';      
         var pageHeight = document.body.offsetHeight+'px';    
      } 
      else 
      {
         var pageWidth='100%';       
         var pageHeight='100%';    
      }
      
      document.body.style.overflow =  'hidden';
      var pageDim = GetPageDim();
      
      var h = pageHeight.replace("px", "");
      if(parseInt(h)<pageDim[1])
         pageHeight = pageDim[1] + "px";
      
      
      pageWidth = pageDim[0] + "px";
      
      //set the shader to cover the entire page and make it visible.    
      dark.style.opacity=opaque;                          
      dark.style.MozOpacity=opaque;                       
      dark.style.filter='alpha(opacity='+opacity+')';     
      dark.style.zIndex=zindex;            
      dark.style.backgroundColor=bgcolor;
      dark.style.width= pageWidth;
      dark.style.height= pageHeight;
      //dark.style.width= pageWidth;    
      //dark.style.height= pageHeight;    
      dark.style.display='block';
      
      ShowDiv();
   } 
   else 
   {
      document.body.style.overflow =  'scroll';
      dark.style.display='none';  
   } 
}

function ShowDiv()
{
   var obj = document.getElementById('divTest');

   var viewPortWidth = windowState.getWidth();
   var viewPortHeight = windowState.getHeight();
   var horizontalScroll = windowState.getScrollX();
   var verticalScroll = windowState.getScrollY();

   var hPos = Math.round(horizontalScroll+((viewPortWidth-100)/2));
   var vPos = Math.round(verticalScroll+((viewPortHeight-100)/2));
  
   if(!obj)
      return;
   
   obj.style.zIndex = 51;
   //obj.style.left = "25px";
   //obj.style.top = "25px";

   var wh = GetBrowserHeight();

   //obj.style.left = ((wh.width - 100)/2) + "px";
   //obj.style.top = ((wh.height - 100)/2) + "px";
   
   obj.style.left = hPos + "px";
   obj.style.top = vPos + "px";
   
}


function GetBrowserHeight()
{
    var intH = 0;
    var intW = 0;

    if(typeof window.innerWidth  == 'number') {
       intH = window.innerHeight;
       intW = window.innerWidth;
    } 
    else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
         intH = document.documentElement.clientHeight;
         intW = document.documentElement.clientWidth;
    }
    else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
      intH = document.body.clientHeight;
      intW = document.body.clientWidth;
    }

    return {width: parseInt(intW), height: parseInt(intH)};
}

var windowState = (function()
{
   var readScroll = {scrollLeft:0,scrollTop:0};
   var readSize = {clientWidth:0,clientHeight:0};
   var readScrollX = 'scrollLeft';
   var readScrollY = 'scrollTop';
   var readWidth = 'clientWidth';
   var readHeight = 'clientHeight';
function otherWindowTest(obj){
if((document.compatMode)&&
(document.compatMode == 'CSS1Compat')&&
(document.documentElement)){
return document.documentElement;
}else if(document.body){
return document.body;
}else{
return obj;
}
};
if((typeof this.innerHeight == 'number')&&
(typeof this.innerWidth == 'number')){
readSize = this;
readWidth = 'innerWidth';
readHeight = 'innerHeight';
}else{
readSize = otherWindowTest(readSize);
}
if((typeof this.pageYOffset == 'number')&&
(typeof this.pageXOffset == 'number')){
readScroll = this;
readScrollY = 'pageYOffset';
readScrollX = 'pageXOffset';
}else{
readScroll = otherWindowTest(readScroll);
}
return {
getScrollX:function(){
return (readScroll[readScrollX]||0);
},
getScrollY:function(){
return (readScroll[readScrollY]||0);
},
getWidth:function(){
return (readSize[readWidth]||0);
},
getHeight:function(){
return (readSize[readHeight]||0);
}
};
})();

function ProgessGrayOut(visible, width, height)
{
   if(visible)
   {
      document.getElementById("divProgress").style.display = '';
      document.getElementById("divProgress").style.visibility = "visible";
   }
   else
      document.getElementById("divProgress").style.visibility = "hidden";
   
   if(visible)
      DisplayFloatingDiv("divProgress", "form1", width, height, 60, 50);
   
   GrayOut(visible);
}

function DisplayFloatingDiv(divId, center_over_Id, pageWidth, pageHeight, width, height)
{
   var left, top;
   var parent = document.getElementById(center_over_Id);
   var mapObj = new Pos(null);
   mapObj.SetObject(parent);
   
   left = ((pageWidth - width)/2);
   top =  ((pageHeight - height)/2);

   document.getElementById("divProgress").style.left=left + "px";
   document.getElementById("divProgress").style.top=top + "px";   
}

function GrayIt(vis, options)
{
   if(vis==null)
      vis = true;
   
   GrayOut(vis, options);
   var x,y;
   if (self.innerHeight) // all except Explorer
   {
	   x = self.innerWidth;
	   y = self.innerHeight;
   }
   else if (document.documentElement && document.documentElement.clientHeight)
	   // Explorer 6 Strict Mode
   {
	   x = document.documentElement.clientWidth;
	   y = document.documentElement.clientHeight;
   }
   else if (document.body) // other Explorers
   {
	   x = document.body.clientWidth;
	   y = document.body.clientHeight;
   }
   
   var left = ((x-50)/2);
   var top =  ((y-150)/2);
   
   document.getElementById("divProgress").style.left=left + "px";
   document.getElementById("divProgress").style.top=top + "px";   

   document.getElementById("divProgress").style.display = '';
   document.getElementById("divProgress").style.visibility = "visible";
   
   if(vis==false)
      document.getElementById("divProgress").style.visibility = "hidden";
}  

function GetPageDim()
{
   var array = new Array();
   var x,y;
   if (self.innerHeight) // all except Explorer
   {
	   x = self.innerWidth;
	   y = self.innerHeight;
   }
   else if (document.documentElement && document.documentElement.clientHeight)
	   // Explorer 6 Strict Mode
   {
	   x = document.documentElement.clientWidth;
	   y = document.documentElement.clientHeight;
   }
   else if (document.body) // other Explorers
   {
	   x = document.body.clientWidth;
	   y = document.body.clientHeight;
   }
   
   array[0] = x;
   array[1] = y;
   
   return array;
}

function ShowDivPopUp(divObj, divWidth, divHeight) {

   divObj.style.display = '';
   var viewPortWidth = windowState.getWidth();
   var viewPortHeight = windowState.getHeight();
   var horizontalScroll = windowState.getScrollX();
   var verticalScroll = windowState.getScrollY();


   var hPos = Math.round(horizontalScroll+((viewPortWidth-divWidth)/2));
   var vPos = Math.round(verticalScroll+((viewPortHeight-divHeight)/2));
  
   if(!divObj)
      return;
   
   divObj.style.zIndex = 651;
 
   divObj.style.left = hPos + "px";
   divObj.style.top = vPos + "px";
}