var FromHelperType = "";		//Used to determine what helper you are returning from
var FromHelperSubType = "";		//Used if HelperType is further devided. ie. Instructor1/Instructor2
//To show a div (or anyobject) on the page
//divName:	The name of the element to remove from visibility
//context:	If a sub search or helper type exists. ie. Instructor1/Instructor2
//useFade:	true or false. Should we fade the object away
function ShowDiv(divName, context,useFade)
{	
	/*
	alert(document.body.scrollWidth);
	alert(document.body.scrollLeft);
	alert(document.body.offsetWidth);
	alert(window.document.documentElement.scrollTop);
	alert(window.document.documentElement.offsetTop);
	alert(window.document.documentElement.offsetHeight);
    */
    
	FromHelperType = divName.replace("div","");
	FromHelperSubType = context;
	
	var div = document.getElementById(divName);	
	
	if(div) //Make sure the object exists
	{
		if(useFade == null)//default to use fader
			useFade = false;
		
		var stepTime = 10; //the number of miliseconds between a step fade change
		var divWidth = div.style.width.substring(0,div.style.width.length-2);
		
		//div.style.left = (document.body.offsetWidth/2) - (divWidth/2) + "px";
		//div.style.left = (window.pageXOffset/2) - (divWidth/2) + "px";
		div.style.left = ((document.body.offsetWidth+document.body.scrollLeft)/2) - (divWidth/2) + "px";
		div.style.top = 15+document.documentElement.scrollTop +"px";
		
		GrayOut(true,useFade);
		//document.body.onresize = AdjustGrayOut;
		ToggleDropDowns("none");
		
		if(useFade)
		{	
			div.style.display="";
			divIntervalID = setInterval("DivFader('" + divName + "',1)",stepTime); //Set the fade function   
		}
		else
		{		
			div.style.opacity=1;                      
			div.style.MozOpacity=1;                   
			div.style.filter='alpha(opacity=100)'; 	
			div.style.display="";
		}
	}
}

//To remove a div (or anyobject) from visibility on the page
//divName:	The name of the element to remove from visibility
//useFade:	true or false. Should we fade the object away
function HideDiv(divName,useFade)
{	
	if(document.getElementById(divName)) //Make sure the object exists
	{	
		var stepTime = 10; //the number of miliseconds between a step fade change
		
		if(useFade == null)//default to use fader
			useFade = false;
		
		if(useFade)
			divIntervalID = setInterval("DivFader('" + divName + "',-1)",stepTime); //Set the fade function   
		else
			document.getElementById(divName).style.display="none";
		
		ToggleDropDowns("");	
		GrayOut(false,useFade);
	}
	else
		alert("The element: " + divName + " doesn't exist on the page.");
}

var divIntervalID;
function DivFader(divName, direction)
{
	//direction can be 1 or -1.
	//If direction is 1 we will get darker.
	//If direction is -1 we will get lighter
	var divObj=document.getElementById(divName);
	var step = 8;
	
	var opaque = divObj.style.opacity || 1;
	
	//Set up defaults according to direction
	if(direction == 1)
		opaque = divObj.style.opacity || 0;
	
	var opacity = (opaque * 100);
	
	//For debuging
	//if(!confirm("opacity:"+opacity+"\nopaque:"+opaque))
	//	clearInterval(divIntervalID);
	
	opacity = opacity + (step*direction);
	opaque = (opacity / 100);
		
	divObj.style.opacity=opaque;                      
	divObj.style.MozOpacity=opaque;                   
	divObj.style.filter='alpha(opacity='+opacity+')'; 
	
	if(opacity >= 100 && direction == 1)
		clearInterval(divIntervalID); //we're done, stop fading	
	
	if(opacity <= 0 && direction == -1)
	{
		clearInterval(divIntervalID); //we're done, stop fading
		divObj.style.display='none';
	}
}

//Set Dropdownlist State either "" or "none".
function ToggleDropDowns(state)
{
	
	/*var elem = document.forms[0].elements;
	for(var i = 0; i < elem.length; i++)
	{
		if(elem[i].type == "select-one")
			elem[i].style.display=state;
	}
	*/
	
	var elem = document.getElementsByTagName("select");
	
	for(var i = 0; i < elem.length; i++)
	{
		//alert(elem[i].name)
		elem[i].style.display=state;
	}
}

//Function to prompt the user with a message
//Title:		The title bar of the pop-up
//Message:		The message shown
//okBtnText:	The text to show on the close button
//okFunction:	The function to call when they click "close"
//				Can be empty ie. "" if no additional function is required. Div will simply close
function ShowMessage(title,message,okBtnText,okFunction)
{	
	var msgDiv =document.getElementById("divMessage");  // Get the object.	
	
	if(okBtnText == null || okBtnText == "")
		okBtnText = " OK ";
		
	var innerhtml = "<table cellpadding='0' cellspacing='0' width='100%'><tr><TD vAlign='bottom' width='8' bgColor='#666666'><IMG src='/tms/common/images/headerbar_left.gif' width='8'></TD>";
	innerhtml += "<TD class='divHelperTitle' onmousedown='setDragObj(\"divMessage\")' align='center' width='100%' background='/tms/common/images/headerbar_tile.gif'>" + title + "</TD>";
	innerhtml += "<TD vAlign='bottom' width='8' bgColor='#666666'><IMG src='/tms/common/images/headerbar_right.gif' width='8'></TD></TR>";
	innerhtml += "<TR><TD class='TabWhite' align='center' colSpan='3'><table><tr><td vAlign='top'><IMG alt='Error' src='/tms/common/images/error_icon.png' width='64' height='53'></td>";
	innerhtml += "<td vAlign='top'>" + message + "</td></tr></table><br>";
	innerhtml += "<INPUT id='btnCloseMessage' onClick='HideDiv(\"divMessage\");" + okFunction + ";' type='button' value='" + okBtnText + "'>";	
	innerhtml += "</td></tr></table>"
	
	//alert(innerhtml);
	
	if(!msgDiv) //create it, it doesn't exist
	{	
		var tbody = document.getElementsByTagName("body")[0];	//Find the body element
		msgDiv = document.createElement('div');					// Create the layer.
		msgDiv.style.position='absolute';						// Position absolutely
		msgDiv.style.top= '10px';								// Just defaults will be corrected by ShowDiv()
		msgDiv.style.left='10px';								// Just defaults will be corrected by ShowDiv()
		msgDiv.style.width='350px';								//A specified width
		msgDiv.style.overflow='hidden';							// Try to avoid making scroll bars            
		msgDiv.style.display='none';							// Start out Hidden
		msgDiv.id='divMessage';									// Name it so we can find it later
		msgDiv.innerHTML = innerhtml;							//Add the content
		msgDiv.style.zIndex=500;								//A big number so it's on top, as it likes it
	    
		tbody.appendChild(msgDiv);								// Add it to the web page    
		
		ShowDiv("divMessage");									//Show the div we just created
    }
    else //it exists show the right content
    {
		msgDiv.innerHTML = innerhtml;
		ShowDiv("divMessage");		
    }
}

//Function to prompt the user for a choice: Yes or No
//Title:		The title bar of the pop-up
//Message:		The message shown as the question
//yesBtnText:	The text to show on the affirmative button
//noBtnText:	The text to show on the negative button
//yesFunction:	The function to call when they click "yes"
//noFunction:	The function to call when they click "no"
//				Can be empty ie. "" if no additional function is required. Div will simply close
//obj:			An object containing all the info you want passed to the yes/noFunction
var ConfirmationObject; //Used right now as a temp solution
function ShowConfirm(title,message,yesBtnText,noBtnText,yesFunction,noFunction,obj)
{		
	var confDiv =document.getElementById('divConfirm');  // Get the object.	
	
	ConfirmationObject = obj;
	
	var innerhtml = "<table cellpadding='0' cellspacing='0' border=0><tr><TD vAlign='bottom' width='8' bgColor='#666666'><IMG src='images/headerbar_left.gif' width='8'></TD>";
	innerhtml += "<TD class='divHelperTitle' align='center' width='100%' background='images/headerbar_tile.gif'>" + title + "</TD>";
	innerhtml += "<TD vAlign='bottom'  bgColor='#666666'><IMG src='images/headerbar_right.gif' ></TD></TR>";
	innerhtml += "<TR><TD class='TabWhite' align='center' colSpan='3'><table><tr><td vAlign='top'><IMG height='61' alt='Confirm' src='images/QuestionIcon.jpg' width='64'></td>";
	innerhtml += "<td vAlign='top'>" + message + "</td></tr></table><br>";
	innerhtml += "<INPUT id='btnConfYes' onClick='" + yesFunction+ "(null);HideDiv(\"divConfirm\");' type='button' value='" + yesBtnText + "'>"; //right now null is passed, temp solution with glabal variable ConfirmationObject
	innerhtml += "&nbsp;&nbsp;";
	innerhtml += "<INPUT id='btnConfNo' onClick='" + noFunction+ "(null);HideDiv(\"divConfirm\");' type='button' value='" + noBtnText + "'>";	
	innerhtml += "</td></tr></table>"
	
	//alert(innerhtml);
	
	if(!confDiv) //create it, it doesn't exist
	{	
		var tbody = document.getElementsByTagName("body")[0];	//Find the body element
		confDiv = document.createElement('div');				// Create the layer.
		confDiv.style.position='absolute';						// Position absolutely
		confDiv.style.top= '10px';								// Just defaults will be corrected by ShowDiv()
		confDiv.style.left='10px';								// Just defaults will be corrected by ShowDiv()
		confDiv.style.width='350px';							//A specified width
		confDiv.style.overflow='hidden';						// Try to avoid making scroll bars            
		confDiv.style.display='none';							// Start out Hidden
		confDiv.id='divConfirm';								// Name it so we can find it later
		confDiv.innerHTML = innerhtml;							//Add the content
		confDiv.style.zIndex=500;								//A big number so it's on top, as it likes it
	    
		tbody.appendChild(confDiv);                            // Add it to the web page    
		
		ShowDiv("divConfirm");									//Show the div we just created
    }
    else //it exists show the right content
    {
		confDiv.innerHTML = innerhtml;
		ShowDiv("divConfirm");		
    }
}

function ToggleDropDowns(state)
{
	
	/*var elem = document.forms[0].elements;
	for(var i = 0; i < elem.length; i++)
	{
		if(elem[i].type == "select-one")
			elem[i].style.display=state;
	}
	*/
	
	var elem = document.getElementsByTagName("select");
	
	for(var i = 0; i < elem.length; i++)
	{
		//alert(elem[i].name)
		elem[i].style.display=state;
	}
}

function GrayOut(vis,useFade,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 || 50;
  var opacity = options.opacity || 60;
  var opaque = (opacity / 100);
  var bgcolor = options.bgcolor || '#111111';
  var dark=document.getElementById('darkenScreenObject');
  var stepTime = 10; //the number of miliseconds between a step fade change
  
  //Make sure the timeout isn't still going on
  if(dimGrayIntervalID)
	clearInterval(dimGrayIntervalID);
  
  if(useFade == null)
	useFade = false; //by default don't use the fader
  
  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.
  }
  
  //Should it be visual?
  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%';
    }   
    
    //set the shader to cover the entire page and make it visible.
    
    if(useFade)
    {
		opacity = 10;
		opaque = (opacity / 100);
	
		dimGrayIntervalID = setInterval("DimGrayOut(1)",stepTime); //Set the fade function    
    }
   
	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';  
    
    //alert("opacity:"+opacity+"\nopaque:"+opaque);                            
  }
  else 
  {
     if(useFade)
		dimGrayIntervalID = setInterval("DimGrayOut(-1)",stepTime); //Set the fade function   
	else
		dark.style.display='none';
  }
}

var dimGrayIntervalID;
function DimGrayOut(direction)
{
	//direction can be 1 or -1.
	//If direction is 1 we will get darker.
	//If direction is -1 we will get lighter
	var dark=document.getElementById('darkenScreenObject');
	var step = 8;
	var maxOpacity = 60;
		
	var opaque = dark.style.opacity;
	var opacity = (opaque * 100);
	
	//For debuging
	//if(!confirm("opacity:"+opacity+"\nopaque:"+opaque))
	//	clearInterval(dimGrayIntervalID);
	
	opacity = opacity + (step*direction);
	opaque = (opacity / 100);
		
	dark.style.opacity=opaque;                      
	dark.style.MozOpacity=opaque;                   
	dark.style.filter='alpha(opacity='+opacity+')'; 
	
	if(opacity >= maxOpacity)
		clearInterval(dimGrayIntervalID); //we're done, stop fading	
	
	if(opacity <= 0)
	{
		clearInterval(dimGrayIntervalID); //we're done, stop fading
		dark.style.display='none';
	}
}

//Used to adjust the gray div when the user scrolls or moves objects outside the current gray area
function AdjustGrayOut(myVar)
{	
	var dark=document.getElementById('darkenScreenObject');
	
	if (dark && dark.style.display=='block')
	{	
		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%';			
		}
		
		dark.style.width= pageWidth;
		dark.style.height= pageHeight;	
	}
}