var xmlHttp;
var writeToSlot;
var currentSlot		=	0;
var goToSlotOnLoad	=	"";
var contentSlots;
var numOfMultipleContentSlots	=	null;

function createXMLHttpRequest()	{
	if(window.ActiveXObject)	{
		xmlHttp		=	new ActiveXObject("Microsoft.XMLHTTP");
	}else if(window.XMLHttpRequest)	{
		xmlHttp		=	new XMLHttpRequest();
	}
}function getPageContent(page,slot,additionalParams)		{ //alert(page + additionalParams);
	createXMLHttpRequest();
	xmlHttp.open("POST","ajax.getPageContent.php",true);
	var params = "page="+page+"&slot="+slot+additionalParams;
	xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlHttp.setRequestHeader("Content-length", params.length);
	xmlHttp.setRequestHeader("Connection", "close");
	xmlHttp.onreadystatechange	=	callbackPage;
	xmlHttp.send(params);
}function callbackPage()			{ 
	if(xmlHttp.readyState	==	4)	{ 
		if(xmlHttp.status	==	200)	{
			var response	=	xmlHttp.responseXML.getElementsByTagName("loquendiPage"); 
			setPage(response);
		}
	}
}function setPage(response,additionalParams)			{ 

	var slotName			=	"slot"+currentSlot+"";
	if(writeToSlot !=null)	clearPage(slotName);
	var root				=	response[0]; 
	var records				=	root.childNodes; 
	var title				=	"";
	var htmlContent				=	"";
	if(window.ActiveXObject)	{
		title				=	records[0].firstChild.data; 		//for IE, records[0] = title, records[1] = content
		htmlContent			=	records[1].firstChild.data;
	}else if(window.XMLHttpRequest)	{
		title				=	records[1].firstChild.data; 		//for Safari & FF, records[1] = title, records[3] = content
		htmlContent			=	records[3].firstChild.data; 
	}
	//alert("loading slot:"+slotName);
	document.getElementById(slotName).innerHTML	=	"" + htmlContent + "";
	currentTitle								=	title;	
	$(document).ready(function()	{
		if(goToSlotOnLoad)		{
			
			//$.scrollTo($("#slot"+writeToSlot),1000,{axis:"x"});
			//$('#slotContainer').scrollTo($("#slot"+writeToSlot),1000,{axis:"x"});
			
			//$("#slotNavigationLinkContainer").scrollTo($("#slot"+writeToSlot),1000,{axis:"x"});
			
			goToSlot(writeToSlot);										//default case, used when loadContent is called w/out 3rd variable (localVarGoToSlotOnLoad[null||0])
			
		}
	/*	
		if(goToSlotOnLoad)	{
			$.scrollTo({top:0,left:600},"slow");
		}
	*/
		else				loadMultipleContent(contentSlots,additionalParams);			//used to trigger the next call for loadMultipleContent() - pop the next ele of the array to load it into a slot
	
	});
	
}function clearPage(slotName)		{
	if(document.getElementById(slotName) && !theDreadedIE){
		document.getElementById(slotName).innerText="";
		//alert("clearing slot: " + slotName + document.getElementById(slotName).innerText);
	}
}


function loadContent(contentPage,localVarGoToSlotOnLoad,additionalParams)	{	
	currentSlot++;
	insertSlot(currentSlot);
//	slot=currentSlot;
	randomSlotArr	=	new Array(3,2,1,0);
	/*
	if(slot==currentSlot
	&& contentPage!="pourLeFun.anglais.01.php")	{		//exceptions of pages that need to start, no matter what slot one is currently on, on the slot passed in the parameters (like exams for example, that need to start at slot 0
		slot	=	randomSlotArr[slot];
	}
	*/
	writeToSlot		=	currentSlot;		//=	slot;		//08.02.09	-	took out this part, will keep script always advancing by one slot
	
	if(localVarGoToSlotOnLoad==0)		goToSlotOnLoad=false;		//used in loadMultipleContent - see notes - value is either null (default) or 0.  0 is set here for setPage
	else								goToSlotOnLoad=true;
	
	getPageContent(contentPage,currentSlot,additionalParams);
	
}function loadMultipleContent(localContentSlots,additionalParams)		{
/*
	if need to load multiple slots at the same time (like for an exam): 
	loadMultipleContent([['pourLeFun.anglais.03.php',2],['pourLeFun.anglais.02.php',1],['pourLeFun.anglais.01.php',0]]);	//put slot desired to load first in last pos of arr
	
	this will call loadContent(thisPage,thisSlot,0) //"0" to force loadContent force setPage to not automatically scroll to slot onLoad
	
	this function is then called from setPage, after slot has loaded.  this is the only way to assure that all content loads correctly via ajax.
*/
	if(localContentSlots.length>0)	{
		//alert('called - ' + localContentSlots.length);
		contentSlots					=	localContentSlots;
		if(numOfMultipleContentSlots==null)	numOfMultipleContentSlots	=	localContentSlots.length;;
		
		if(contentSlots.length>0)		{ 
			ele			=	contentSlots.pop();
			thisPage		=	ele[0];
			//thisSlot		=	ele[1];
			loadContent(thisPage,0,additionalParams);
		}
		
		if(contentSlots.length==0)	{
			//alert('going to: ' +( currentSlot+1-numOfMultipleContentSlots) + ' || ' + contentSlots.length);
			goToSlot(currentSlot+1-numOfMultipleContentSlots);
		}
	}
}function sendFormsAndLoadContent(formsArr,page,slot)		{	
	writeToSlot		=	currentSlot		=	slot;	
	goToSlotOnLoad	=	true;
	var formdata		=	"";
	
	for(j=0; j<formsArr.length; j++)	{	//taken from : http://thybag.co.uk/index.php?p=Tutorials&ind=45
		var formObj			=	document.forms[formsArr[j]];
		
		for (i=0; i < formObj.length; i++)	{
			//Build Send String
			if(formObj.elements[i].type == "text"){ //Handle Textbox's
				 formdata = formdata + formObj.elements[i].name + "=" + escape(formObj.elements[i].value) + "&";
			}else if(formObj.elements[i].type == "textarea"){ //Handle textareas
				 formdata = formdata + formObj.elements[i].name + "=" + escape(formObj.elements[i].value) + "&";
			}else if(formObj.elements[i].type == "checkbox"){ //Handle checkbox's
				formdata = formdata + formObj.elements[i].name + "=" + formObj.elements[i].checked + "&";
			}else if(formObj.elements[i].type == "radio"){ //Handle Radio buttons
				 if(formObj.elements[i].checked==true){
				  formdata = formdata + formObj.elements[i].name + "=" + formObj.elements[i].value + "&";
				 }
			}else{
				 //finally, this should theoretically this is a select box.
				 formdata = formdata + formObj.elements[i].name + "=" + escape(formObj.elements[i].value) + "&";
			}
		}
	}
	
	createXMLHttpRequest();
	xmlHttp.open("POST","ajax.getPageContent.php",true);
	var params = "page="+page+"&slot="+slot+"&"+formdata;
	xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlHttp.setRequestHeader("Content-length", params.length);
	xmlHttp.setRequestHeader("Connection", "close");
	xmlHttp.onreadystatechange	=	callbackPage;
	xmlHttp.send(params);	

}

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 || 0;
  var opacity = options.opacity || 90;
  var opaque = (opacity / 100);
  var bgcolor = options.bgcolor || '#FFFFFF';
  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 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-100)+'px';
    } else if( document.body.offsetWidth ) {
      var pageWidth = document.body.offsetWidth+'px';
      var pageHeight = (document.body.offsetHeight-100)+'px';
    } else {
       var pageWidth='100%';
       var pageHeight='90%';
    }   
    //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';
    dark.style.top="100px";
  } else {
     dark.style.display='none';
  }
}