/*****************************************************************************/
/**** <! Important! put this script at the bottom of the page !> *************/
/**** ! or if you call it as a js file, put the calling script at !***********/
/**** ! the bottom of the page after all the content but before the !*********/
/**** ! end of the body !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !*********/
/*****************************************************************************/
/************************ glossary.js ****************************************/
/************************ Ajax tooltip ***************************************/
/******* declare the object that holds the tool tip text as global ***********
/*
/****        var definitionBox=document.getElementById('xml');
/****         //var handle=document.getElementById('handle');

/**** Move selected object to follow the cursor is the purpose of ************/
/**** the main function that gets called on the mousemove event. *************/

/**** Basic get coordinates of the curser with respect to the screen.*********/
//document.onmousemove = getcoord;
var x;
var y;
var posx;
var posy;
var rect;
function getcoord(x,y){
     
     //evt = evt || window.event; // IE needs this
     definitionBox.style.visibility="hidden";
     definitionBox.style.display="block";
     var xpos=x;//evt.clientX;
     var ypos=y;//evt.clientY;
     //alert('x='+xpos+' y='+ypos);

/**** This gets the scroll offset of the window ******************************/
/**** Have to accommodate different browsers here ****************************/

     scrollOfsetX = 0, scrollOfsetY = 0;
     if( typeof( window.pageYOffset ) == 'number' ) {
	  //Netscape compliant
	  var scrollOfsetY = window.pageYOffset;
	  var scrollOfsetX = window.pageXOffset;
	  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
	  //DOM compliant
	  var scrollOfsetY = document.body.scrollTop;
	  var scrollOfsetX = document.body.scrollLeft;
	  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
	  //IE6 standards compliant mode
	 var  scrollOfsetY = document.documentElement.scrollTop;
	  var scrollOfsetX = document.documentElement.scrollLeft;
	  }
	  
/**** now we have our scroll ofset in the variables ***************************/
/**** scrollOfsetX and scrollOfsetY *******************************************/
/**** So now lets get the width and height of our window **********************/

/**** This is for standards compliant browsers ********************************/

     	  if(window.innerWidth!=undefined){
	       var ysize=window.innerHeight;
	       var xsize=window.innerWidth;
	  } else {
	       
/**** IE 8 on down ************************************************************/

	  var D= document.documentElement;
	  if(D){
	       var xsize=D.clientWidth;
	       var ysize=D.clientHeight;
	  }
	  }
	  
/**** Now we have all that we need to set the position of the tool tip *****/
/******** So now lets do some math! ******************* ********************/
/*** We need to know where the cursor is with respect to the document ******/
/*** We know the position of the cursor on the screen **********************/

     var xPos =xpos;
     
/**** adding the scroll offset and the distance from the top of the window */
/**** of the cursor gives us the position of the cursor with respect to ****/
/**** the document. We will add some to that so the cursor is just above ***/
/**** the top of the box. **************************************************/

     var yPos =scrollOfsetY + ypos;
     
/**** Now lets put some overrides to constrain the box to the screen *******/
/**** If the calculated position is higher than the scroll offset **********/
/**** set the top at the top of the screen *********************************/

     if (yPos<scrollOfsetY) yPos=scrollOfsetY;
     
/**** Same for left, don't let it go past the edge of the screen ***********/

     if (xPos<scrollOfsetX) xPos=scrollOfsetX;
     
/**** Since we know the width of the box as set in css, ********************/
/**** we can stop the right side at the edge of the screen by setting the **/
/**** left position to not greater than the width of the window minus the **/
/**** width of the box. ****************************************************/
     
     if (xPos>xsize-definitionBox.scrollWidth) xPos=xPos-definitionBox.scrollWidth;
     if (xPos<=0) xPos=0;
     
     rect = definitionBox.scrollHeight;
     	  if (yPos+rect>ysize) {
	       
	       yPos=yPos - rect;
	       if (yPos<scrollOfsetY) yPos=scrollOfsetY;
	       posx=xPos;
	       posy=yPos;
	   }else{
	       posx=xPos;
	       posy=yPos;
	  }
     
/**** And close the function ************************************************/
}

/**** Basic Ajax function to get selected data from an XML file *************/

var elementID;
var id;
var xmlhttp;
var xmlDoc=null;
var definitionBox;
var questionMark;

/**** This part sends the HTTP request to the server *************************/

function loadXMLDoc(url,elementID,evt) {
xmlhttp=null;
id=elementID;

questionMark=document.getElementById(id);
if (window.XMLHttpRequest) { // code for IE7, Firefox, Opera, etc.
     xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject) {// code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null) {
     xmlhttp.onreadystatechange=state_Change;
     xmlhttp.open("GET",url,true);
     xmlhttp.send(null);
     questionMark.style.cursor="progress";
}

else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

/**** This part handles the server response ************************************/

function state_Change() {
    definitionBox=document.getElementById('xml');
     if (xmlhttp.readyState==4) {// 4 = "loaded"
	  if (xmlhttp.status==200)  {// 200 = "OK"
	       xmlDoc=xmlhttp.responseXML.documentElement;
     

/*** And here is where the selected data gets passed to the DOM ****************/

	       definitionBox.innerHTML = xmlDoc.getElementsByTagName(id)[0].childNodes[0].nodeValue;

/**** And here is where we show off our handywork ******************************/

	       questionMark.style.cursor="pointer";
	       getcoord(x,y);
	       //definitionBox.innerHTML ="left: " + posx + " top: " + posy ;
	       definitionBox.style.left=posx +'px';
	       definitionBox.style.top=posy + 'px';
	       setTimeout(function(){definitionBox.style.visibility="visible";},200);
	  }
     }
}

/**** End of Ajax **************************************************************/

/**** The function that calls the Ajax *****************************************/

function define(ID) {
     
//alert(elementID);
// to get around browser caching append "+'?'+Math.random()*101" to the url
//   loadXMLDoc('url',elementID);
     elementID=ID.replace(/[0-9]/g,"");
     loadXMLDoc('/glossary.xml',elementID); 
     
}

/**** Closes the tool tip box **************************************************/

function bye(){
     
     definitionBox.style.display="none";
}

/*** The event listeners added here when the script is loaded, !after the DOM! */
var evt;
onload = function(){
     /* declare global variables for objects to be acted upon */
     definitionBox=document.getElementById('xml');
     definitionBox.style.display="none";
          
     /* preload the xml document to leverage browser caching */
     if (window.XMLHttpRequest) {// code for IE7, Firefox, Opera, etc.
	  xmlhttp=new XMLHttpRequest();
     }
     else if (window.ActiveXObject) {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.open("GET",'/glossary.xml',true);
     xmlhttp.send(null);
     
     /* set event listeners on the elements to trigger events */
     var elArray = document.getElementsByTagName('a');
     

     for(var i=0; i<elArray.length; i++){

	  if(elArray[i].className == 'xml') {
	  
	       elArray[i].onmouseover = function(e){
		    
		    evt=e || window.event;
		    x=evt.clientX;
		    y=evt.clientY;
		    define(this.id);
		    //getcoord(evt);
		    return false;
	       };
	       elArray[i].onmouseout = function(){
		    bye();
		    return false;
	       };
	       /*elArray[i].onclick =  function(){
		    return false;
	       };*/

	  }

     }
     
     definitionBox.onmouseover = function(){
	  hold();
	  return false;
     };
         
     definitionBox.onmouseout= function(){
	  bye();
	  return false;
     }
      definitionBox.onclick =  function(){
	   bye();
	   return false;
      };
}


function hold(){
     definitionBox=(document.getElementById('xml'));
     definitionBox.style.display="block";
}

/**** Here is some error handling *** Disable for troubleshooting ***************/

var t;
function handleErr() { 
     return true; // It will not show error in browser JavaScript console. 
}
  
onerror = handleErr; // Function handleErr(); 

/**** Abba Da Da AbbaDa Da Dats All Folks! *************************************/