function grayOut(vis, options) {	//http://www.hunlock.com/blogs/Snippets:_Howto_Grey-Out_The_Screen
  // 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 || 20000;
  var opacity = options.opacity || 60;
  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.getElementsById('darkenScreenObject')
    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';
    }  if( document.body.offsetWidth ) {
      var pageWidth = document.body.offsetWidth+'px';
      var pageHeight = (document.body.offsetHeight)+'px';
    } else {
       var pageWidth='100%';
       var pageHeight='100%';
    }   
    //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.display='block';
  } else {
     dark.style.display='none';
  }
}

function unloadMySnacsHovers()		{
	darkenScreenObj				=	document.getElementById("darkenScreenObject");
	darkenScreenObjContainer	=	document.getElementById("darkenScreenObjectContainer");
	darkenScreenInfo			=	document.getElementById("darkenScreenObjectInfo");
	darkenScreenRemove			=	document.getElementById("darkenScreenObjectSnacRemove");
	darkenScreenConfirmRemove	=	document.getElementById("darkenScreenObjectConfirmSnacRemove");
	darkenScreenSettings		=	document.getElementById("darkenScreenObjectSettings");	
	darkenScreenConfirmSave		=	document.getElementById("darkenScreenObjectConfirmSave");	
	
	if(firefox)	{
		//if there are scrollbars to unhide, as on the mySnacs page, unhide them
		if(document.getElementById("mySnacsPhoneContentContainer"))	{
			hublotObj				=	document.getElementById("hublot");
			hublotObj.style.display	=	"block";
			scrollBar1				=	document.getElementById("mySnacsPhoneContentContainer");
			scrollBar2				=	document.getElementById("mySnacsPaneMiddleContentContainer");
			if( scrollBar1 != undefined){
				scrollBar1.style.overflowY	=	"scroll";
			}if( scrollBar2 != undefined){
				scrollBar2.style.overflowY	=	"scroll";
			}
		}
	}
	
	darkenScreenObj.style.display			=	"none";
	darkenScreenObjContainer.style.display 	=	"none";
	darkenScreenSettings.style.display		=	"none";
	darkenScreenInfo.style.display			=	"none";
	darkenScreenRemove.style.display		=	"none";
	darkenScreenConfirmRemove.style.display	=	"none";
	darkenScreenSettings.style.display		=	"none";
	darkenScreenConfirmSave.style.display	=	"none";
	
}function loadMySnacsHover(hoverName)	{
	//possibilities for hoverName: settings, showInfo, confirmSave, removeSnac, confirmRemove
	
	centerSettingsBlock();
	darkenScreenObj				=	document.getElementById("darkenScreenObject");
	darkenScreenObjContainer	=	document.getElementById("darkenScreenObjectContainer");
	darkenScreenInfo			=	document.getElementById("darkenScreenObjectInfo");
	darkenScreenRemove			=	document.getElementById("darkenScreenObjectSnacRemove");
	darkenScreenConfirmRemove	=	document.getElementById("darkenScreenObjectConfirmSnacRemove");
	darkenScreenSettings		=	document.getElementById("darkenScreenObjectSettings");
	darkenScreenConfirmSave		=	document.getElementById("darkenScreenObjectConfirmSave");
	
	//need to hide this element because there are "straight-line" rendering glitches in FF (don't render straight) when elements on top of ea. other
	//also need to hide the scrollbars in FF as they penetrate the grayOut layer
	if(firefox)	{
		//if there are scrollbars to hide, as on the mySnacs page, hide them
		if(document.getElementById("mySnacsPhoneContentContainer"))	{
			hublotObj					=	document.getElementById("hublot");	
			hublotObj.style.display		=	"none";		
			scrollBar1					=	document.getElementById("mySnacsPhoneContentContainer");
			scrollBar2					=	document.getElementById("mySnacsPaneMiddleContentContainer");
			if( scrollBar1 != undefined){
				scrollBar1.style.overflowY	=	"hidden";
			}if( scrollBar2 != undefined){
				scrollBar2.style.overflowY	=	"hidden";
			}
		}
	}//if IE6 replace close button png with jpg
	if(theDreadedIE6)		{
		if(document.getElementById("mySnacsCloseButtonImg"))	{
			objNode		=	document.getElementById("mySnacsCloseButtonImg");
			objNode.src	=	"/images/buttons/closeButtonIE6.jpg";
		}
	}
	
	if(hoverName=="addSnac" || hoverName=="modifySettings" || hoverName=="confirmModifySettings")	hoverName="settings";		//to account for old settings that may be called from mySnacs
	
	switch(hoverName)	{
		case "showInfo":
			if(theDreadedIE6)	{
				if(document.getElementById("mySnacsCloseButtonImg"))	{
					objNode		=	document.getElementById("mySnacsCloseButtonImg");
					objNode.src	=	"/images/buttons/closeButtonIE6.info.jpg";
				}
			}
			darkenScreenObjContainer.style.display	= 	"block";
			darkenScreenInfo.style.display			=	"block";
			darkenScreenRemove.style.display		=	"none";
			darkenScreenConfirmRemove.style.display	=	"none";	
			darkenScreenSettings.style.display		=	"none";
			darkenScreenConfirmSave.style.display	=	"none";
		break;
		case "settings":
			//show info container, hide others
			darkenScreenObjContainer.style.display	= 	"block";
			darkenScreenSettings.style.display		=	"block";
			darkenScreenInfo.style.display			=	"none";
			darkenScreenRemove.style.display		=	"none";
			darkenScreenConfirmRemove.style.display	=	"none";	
			darkenScreenConfirmSave.style.display	=	"none";
		break;
		case "removeSnac":			
			//show confirm add container, hide others
			darkenScreenObjContainer.style.display	= 	"block";
			darkenScreenInfo.style.display			=	"none";
			darkenScreenRemove.style.display		=	"block";
			darkenScreenConfirmRemove.style.display	=	"none";
			darkenScreenSettings.style.display		=	"none";
			darkenScreenConfirmSave.style.display	=	"none";
		break;
		case "confirmRemove":			
			//show confirm add container, hide others
			darkenScreenObjContainer.style.display	= 	"block";
			darkenScreenInfo.style.display			=	"none";
			darkenScreenRemove.style.display		=	"none";
			darkenScreenSettings.style.display		=	"none";
			darkenScreenConfirmRemove.style.display	=	"block";
			darkenScreenConfirmSave.style.display	=	"none";
		break;
		case "confirmSave":			
			//show confirm add container, hide others
			darkenScreenObjContainer.style.display	= 	"block";
			darkenScreenInfo.style.display			=	"none";
			darkenScreenRemove.style.display		=	"none";
			darkenScreenConfirmRemove.style.display	=	"none";
			darkenScreenSettings.style.display		=	"none";
			darkenScreenConfirmSave.style.display	=	"block";
		break;
	}
}function loadHover(hoverName)	{
	//validateJoinForm
	centerSettingsBlock();
	darkenScreenObj				=	document.getElementById("darkenScreenObject");
	darkenScreenObjContainer	=	document.getElementById("darkenScreenObjectContainer");
	
	//need to hide this element because there are "straight-line" rendering glitches in FF (don't render straight) when elements on top of ea. other
	//also need to hide the scrollbars in FF as they penetrate the grayOut layer
	if(firefox)	{
		hublotObj					=	document.getElementById("hublot");	
		hublotObj.style.display		=	"none";
	}//if IE6 replace close button png with jpg
	if(theDreadedIE6)		{
		if(document.getElementById("mySnacsCloseButtonImg"))	{
			objNode		=	document.getElementById("mySnacsCloseButtonImg");
			objNode.src	=	"/images/buttons/closeButtonIE6.jpg";
		}if(hoverName=="validateForm")	{
			hublotObj					=	document.getElementById("hublot");	
			hublotObj.style.display		=	"none";
		}
	}
	
	switch(hoverName)	{
		case "validateForm":
			darkenScreenObjContainer.style.display	= 	"block";
			darkenScreenHoverObj					=	document.getElementById("darkenScreenObjectValidate");
			darkenScreenHoverObj.style.display		= 	"block";		
		break;	
	}
}function unloadHover(hoverName)	{
	darkenScreenObj				=	document.getElementById("darkenScreenObject");
	darkenScreenObjContainer	=	document.getElementById("darkenScreenObjectContainer");
	
	if(firefox)	{
		hublotObj				=	document.getElementById("hublot");
		hublotObj.style.display	=	"block";
	}if(theDreadedIE6)		{
		if(hoverName=="validateForm")	{
			hublotObj					=	document.getElementById("hublot");	
			hublotObj.style.display		=	"block";
		}//Positioning bug in IE6 whereby the contents of the right-hand pane somehow shift over 15px when grayOut() is called.  only scrolling over the navbar brings the contents back to where they should be
		if(document.getElementById("myAccountContainer"))	{mySnacsCategorySwap("mySnacsCategory1");mySnacsCategoryRestore("mySnacsCategory1")};
	}
	switch(hoverName)	{
		case "validateForm":
			darkenScreenObj							=	document.getElementById("darkenScreenObjectValidate");
			darkenScreenObj.style.display			= 	"none";		
		break;	
	}	
	
	darkenScreenObj.style.display			=	"none";
	darkenScreenObjContainer.style.display 	=	"none";
}