// the word this script should search for and used when asking server
	var keyword = "glossary_term";
	
	// the page that this popup will retrive data from
	var server = "/js/glossary_popup/getDefinition.php?id=";
	
	// the ratio to which the popup should be render in
	var ratio = 2.5;
	
	// option for close button to appear
	var isCloseButton = true;

	// the path to where the images are stored
	var imagePath = "/js/glossary_popup/popup_images/";

	// the z-index for what goes on top of the popup
	var frameIndex = 5;
	
	// the color of the background on the popup
	var blankColor = "white";
	
	// the rate at which the popup readjust's size, higher = better performance
	// at the cost of reduction in ratio accuracy and fit
	var reAdjustMentRate = 13;
	


	// for the ie <5.5 png or gif to display
	var arVersion = navigator.appVersion.split("MSIE")
	var version = parseFloat(arVersion[1])


	// location of where the images are stored
	var lefttopLocation;
	var righttopLocation;
	var rightbottomLocation;
	var leftbottomLocation;
	var pointerLocation;
	var pointer2Location;
	var centertopLocation;	
	var centerbottomLocation;
	var centerbottom2Location;
	var middlerightLocation;
	var middleleftLocation;
	var closebuttonLocation;


window.onload = function()
{		
	document.onmousedown = closePopup;
	
	wordToLink();
	//
	// ie > 5, gif instead of png fix
	if ((version < 7)) 
	{
		lefttopLocation = imagePath + "lefttop.gif";
		righttopLocation = imagePath + "righttop.gif";
		rightbottomLocation = imagePath + "rightbottom.gif";
		leftbottomLocation = imagePath + "leftbottom.gif";
		pointerLocation = imagePath + "pointer.gif";
		pointer2Location = imagePath + "pointer2.gif";
		centertopLocation = imagePath + "centertop.gif";	
		centerbottomLocation = imagePath + "centerbottom.gif";
		centerbottom2Location = imagePath + "centerbottom.gif";
		middlerightLocation = imagePath + "middleright.gif";
		middleleftLocation = imagePath + "middleleft.gif";
	}
	else
	{
		lefttopLocation = imagePath + "lefttop.PNG";
		righttopLocation = imagePath + "righttop.PNG";
		rightbottomLocation = imagePath + "rightbottom.PNG";
		leftbottomLocation = imagePath + "leftbottom.PNG";
		pointerLocation = imagePath + "pointer.PNG";
		pointer2Location = imagePath + "pointer2.PNG";
		centertopLocation = imagePath + "centertop.PNG";	
		centerbottomLocation = imagePath + "centerbottom.PNG";
		centerbottom2Location = imagePath + "centerbottom.PNG";
		middlerightLocation = imagePath + "middleright.PNG";
		middleleftLocation = imagePath + "middleleft.PNG";
	}

	closebuttonLocation = imagePath + "closebutton.PNG";
	
	
		
	
	preload_image = new Image(); 
	preload_image.src= lefttopLocation;
	preload_image2 = new Image(); 
	preload_image2.src= righttopLocation;
	preload_image3 = new Image(); 
	preload_image3.src= rightbottomLocation;
	preload_image4 = new Image(); 
	preload_image4.src= leftbottomLocation;
	preload_image5 = new Image(); 
	preload_image5.src= pointerLocation;
	preload_image6 = new Image(); 
	preload_image6.src= pointer2Location;
	preload_image7 = new Image(); 
	preload_image7.src= centertopLocation;
	preload_image8 = new Image(); 
	preload_image8.src= centerbottomLocation;
	preload_image9 = new Image(); 
	preload_image9.src= centerbottom2Location;
	preload_image10 = new Image(); 
	preload_image10.src= middlerightLocation;
	preload_image11 = new Image(); 
	preload_image11.src= middleleftLocation;
	preload_image12 = new Image(); 
	preload_image12.src= closebuttonLocation;
	
	
	
}



document.getElementsByClassName=function(className,tag){
	return getElementsByClassName(className,"",tag);
}

function getElementsByClassName(className,node,tag){
	if(className==""||className==undefined){
		alert ("No class name passed to getElementsByClassName function");
		return 0;
	}


	var array=new Array();
	if(!node&&arguments.length>1&&node!="")return array;
	if(!node||node==undefined||node=="")node=document;
	if(tag==undefined||tag=="")tag='*';

	
	var myclass = new RegExp('(^| )'+className+'( |$)');
	//var myclass = new RegExp('\\b'+className+'\\b');
	var elements=node.getElementsByTagName(tag);
	for(var i=0;i<elements.length;i++){
	
		if(myclass.test(elements[i].getAttribute('class'))||myclass.test(elements[i].getAttribute('className'))){
			array.push(elements[i]);	
		}
	}
	return array;
}


// transform the links to javascript popup links
function wordToLink()
{
	elements = getElementsByClassName(keyword);
	
	for (i=0; i<elements.length; i++)	{
		//var word = elements[i].firstChild.nodeValue;
		//glossaryWords = word;
		elements[i].onclick = getData;
		
		elements[i].setAttribute('href', "#");
		
		elements[i].style.cursor = "help";
		
	} 
}



// gives the x cord position of an object
function positionX(obj){

	var posX = obj.offsetLeft;
	
	while(obj.offsetParent){
		if(obj==document.getElementsByTagName('body')[0]){break}
		else{
			posX=posX+obj.offsetParent.offsetLeft;
			obj=obj.offsetParent;
		}
	}
	
	return posX;
}

// gives the y cord position of an object
function positionY(obj){

	var posY = obj.offsetTop;
	
	while(obj.offsetParent){
		if(obj==document.getElementsByTagName('body')[0]){break}
		else{
			posY=posY+obj.offsetParent.offsetTop;
			obj=obj.offsetParent;
		}
	}

	return posY;
}





// which called through mouseclick, all popups are close unless mouseclick is within popup area
function closePopup(e)
{
	if (e)
	{
		xCord = mouseX(e);
		yCord = mouseY(e);
	}
	else
	{
		xCord = mouseX(false);
		yCord = mouseY(false);
	}
	
	
	if (document.getElementById("popupwindow"))
	{

		var oldNode = document.getElementById("popupwindow");
		var rightbottom = document.getElementById("rightbottom");
		
		var popupWidth =  (positionX(rightbottom)+30) - positionX(oldNode);
		var popupHeight = (positionY(rightbottom)+30) - positionY(oldNode);
		
		
		if (positionX(oldNode) > xCord || (positionX(oldNode) + popupWidth < xCord))
			closeButton();
		else
			if (positionY(oldNode) > yCord || (positionY(oldNode) + popupHeight < yCord))
				closeButton();
	
	}

}




// returns the x cord postion of the mouse cursor
function mouseX(e) {
	var posx = 0;

	if (!e)
		var e = window.event;
	if (e.pageX ) 	{
		posx = e.pageX;
	}
	else if (e.clientX) {
		posx = e.clientX 
			 + document.body.scrollLeft
			 + document.documentElement.scrollLeft;
	}
	
	return posx
}

// returns the y cord postion of the mouse cursor
function mouseY(e) {

	var posy = 0;
	
	if (!e) var e = window.event;
	if (e.pageY) 	{

		posy = e.pageY;
	}
	else if (e.clientY) {

		posy = e.clientY 
			 + document.body.scrollTop
			 + document.documentElement.scrollTop;
	}
	
	return posy
}


// this returns the percentage of where the mouse cusor is on screen to screen size
function screenPercent()
{
	//opera Netscape 6 Netscape 4x Mozilla 
	if (window.innerWidth)
		docwidth = window.innerWidth; 
		
	//IE Mozilla 
	if (document.body.clientWidth)
		docwidth = document.body.clientWidth; 

  return xCord/docwidth;

}



// when called, close all popups
// removes all popup
function closeButton(eventObject)
{

	if (document.getElementById("popupwindow"))
	{
		if (version)
		{
			oldNode = document.getElementById("popupwindow")
			document.body.removeChild(oldNode);
		}
		else
		{
			oldNode = document.getElementById("popupwindow")
			oldNode.setAttribute('id', "oldpopupwindow");
			fadeOut(100, "oldpopupwindow");
		}
	}
	
}

//fade the id out and then remove it
function fadeOut(opacity, id)
{
	var oldNode
	// removes all current popup on screen
	if (oldNode = document.getElementById(id))
	{     
	
		if (opacity <= 0)
			document.body.removeChild(oldNode);
		else
		{
			oldNode.style.opacity = (opacity / 100);
			oldNode.style.MozOpacity = (opacity / 100);
			oldNode.style.KhtmlOpacity = (opacity / 100);
			oldNode.style.filter = "alpha(opacity=" + opacity + ")";
			
			setTimeout("fadeOut(" + (opacity-10) + ", \"" + id + "\")", 25)
		}	
	
	}
}


// generates the popup
function renderPopup(myText, xCord, yCord)
{
	// varibles used by nodes below
	// popupHeight default size is here
	var popupHeight =  70;
	var popupWidth = Math.floor(popupHeight * ratio);
	
	
	// used to determind where the pointer should be
	var wherePointer = Math.floor(popupWidth * (screenPercent()-.1));
	
	// used to make sure the pointer isn't blown out of porportion
	if (wherePointer > (popupWidth - 120))
		wherePointer = popupWidth - 120;
	if (wherePointer < 30)
		wherePointer = 30;


	
	var centertop = document.createElement("div");
	centertop.style.width =  (popupWidth - 60) + "px";
	centertop.style.height = "30px";
	centertop.style.backgroundImage="url(" + centertopLocation + ")";
	centertop.style.position = "absolute";
	centertop.style.top = "0px";
	centertop.style.left = "30px";
	centertop.setAttribute('id', "centertop");
	

	var centerbottom = document.createElement("div");
	centerbottom.style.width =  wherePointer + "px";
	centerbottom.style.height = "30px";
	centerbottom.style.backgroundImage="url(" + centerbottomLocation + ")";
	centerbottom.style.position = "absolute";
	centerbottom.style.bottom = "-5px";
	centerbottom.style.left = "30px";
	centerbottom.setAttribute('id', "centerbottom");
	centerbottom.style.zIndex = 4;

	var pointer = document.createElement("img");
	if (screenPercent() < .5)
	{
		pointer.src = pointerLocation;
		var offSet = 40;
	}
	else 
	{
		pointer.src = pointer2Location;
		var offSet = 62;
	}
	pointer.style.position = "absolute";
	pointer.style.bottom = "-40px";
	pointer.style.left = 30 + wherePointer + "px";
	pointer.style.zIndex = 2;
	pointer.setAttribute('id', "pointer");
	pointer.style.zIndex = 4;
	
	var centerbottom2 = document.createElement("div");
	centerbottom2.style.width =  popupWidth - 105 - wherePointer  + "px";
	centerbottom2.style.height = "30px";
	centerbottom2.style.backgroundImage="url(" + centerbottom2Location + ")";
	centerbottom2.style.position = "absolute";
	centerbottom2.style.bottom = "-5px";
	centerbottom2.style.right = "30px";
	centerbottom2.setAttribute('id', "centerbottom2");
	centerbottom2.style.zIndex = 4;
	
	var middleright = document.createElement("div");
	middleright.style.width =  "30px";
	middleright.style.height = (popupHeight - 60) + "px";
	middleright.style.backgroundImage="url(" +  middlerightLocation + ")";
	middleright.style.position = "absolute";
	middleright.style.top = "30px";
	middleright.style.right = "0px";
	middleright.setAttribute('id', "middleright");
	
	var middleleft = document.createElement("div");
	middleleft.style.width =  "30px";
	middleleft.style.height = (popupHeight - 60) + "px";
	middleleft.style.backgroundImage="url(" + middleleftLocation + ")";
	middleleft.style.position = "absolute";
	middleleft.style.top = "30px";
	middleleft.style.left = "0px";
	middleleft.setAttribute('id', "middleleft");




	var lefttop = document.createElement("img");
	lefttop.src = lefttopLocation;
	lefttop.style.position = "absolute";
	lefttop.style.top = "0px";
	lefttop.style.left = "0px";
	lefttop.style.zIndex = 1;
	lefttop.setAttribute('id', "lefttop");
	//lefttop.style.height = "30px";	


	
	var righttop = document.createElement("img");
	righttop.src = righttopLocation;
	righttop.style.position = "absolute";
	righttop.style.top = "0px";
	righttop.style.right = "0px";
	righttop.style.zIndex = 1;
	righttop.setAttribute('id', "righttop");
	//righttop.style.height = "30px";	

	
	
	
	var rightbottom = document.createElement("img");
	rightbottom.src = rightbottomLocation;
	rightbottom.style.position = "absolute";
	rightbottom.style.right = "0px";
	rightbottom.style.bottom = "0px";
	rightbottom.style.zIndex = 1;
	rightbottom.setAttribute('id', "rightbottom");
	
	
	
	var leftbottom = document.createElement("img");
	leftbottom.src = leftbottomLocation;
	leftbottom.style.position = "absolute";
	leftbottom.style.left = "0px";
	leftbottom.style.bottom = "0px";
	leftbottom.style.zIndex = 1;
	leftbottom.setAttribute('id', "leftbottom");
	
	
	
	var overFlowMarker = document.createElement("div");
	overFlowMarker.style.width =  "20px";
	overFlowMarker.style.height = "20px";
	overFlowMarker.style.backgroundColor = "rgb(0, 255, 255)";
	overFlowMarker.style.zIndex = 5;
	overFlowMarker.style.margin = "0px";
	overFlowMarker.style.padding = "0px";
	overFlowMarker.style.visibility = "hidden";
	overFlowMarker.setAttribute('id', "overFlowMarker");
	

	var overFlowMarker2 = document.createElement("div");
	overFlowMarker2.style.width =  "20px";
	overFlowMarker2.style.height = "20px";
	overFlowMarker2.style.backgroundColor = "rgb(0, 0, 255)";
	overFlowMarker2.style.zIndex = 5;
	overFlowMarker2.style.margin = "0px";
	overFlowMarker2.style.padding = "0px";
	overFlowMarker2.style.visibility = "hidden";
	overFlowMarker2.setAttribute('id', "overFlowMarker2");
	overFlowMarker2.style.position = "absolute";
	overFlowMarker2.style.bottom = 5 + "px";
	overFlowMarker2.style.left = 30 + "px";

	
	
	


	var textDiv = document.createElement("div");
	textDiv.innerHTML = myText;

	textDiv.appendChild(overFlowMarker);
	
	textDiv.style.height = (popupHeight - 60) + "px";
	//textDiv.style.height = 200 + "px";
	textDiv.style.width = popupWidth - 50 + "px";
	textDiv.style.position = "absolute";
	textDiv.style.top = 20 + "px";
	textDiv.style.left = 20 + "px";
	//textDiv.style.backgroundColor = "rgb(111, 255, 255)";
	textDiv.style.margin = "0px";
	textDiv.style.padding = "0px";
	textDiv.style.marginTop = "0px";
	textDiv.style.paddingTop = "0px";
	textDiv.style.paddingBottom = "0px";
	textDiv.style.marginBottom = "0px";

	textDiv.style.zIndex = frameIndex;
	textDiv.setAttribute('id', "textDiv");


	var blank = document.createElement("div");
	blank.style.height = (popupHeight - 40) + "px";
	blank.style.width = popupWidth - 40 + "px";
	blank.style.position = "absolute";
	blank.style.top = 20 + "px";
	blank.style.left = 20 + "px";
	blank.style.backgroundColor = blankColor;
	blank.style.margin = "0px";
	blank.style.padding = "0px";
	blank.style.marginTop = "0px";
	blank.style.zIndex = 5;
	blank.setAttribute('id', "blank");



	
	

	var newNode = document.createElement("div");
	newNode.style.margin = "0px";	
	newNode.style.padding = "0px";
	newNode.style.height = popupHeight + "px";
	newNode.style.width = popupWidth + "px";	
	newNode.style.position = "absolute";
	newNode.style.top = (yCord - popupHeight - 35 ) + "px";
	newNode.style.left = (xCord - wherePointer - offSet) + "px";
	newNode.setAttribute('id', "popupwindow");
	//newNode.style.backgroundColor = "rgb(0, 142, 0)";
	


	if(isCloseButton)
	{
		var closebutton = document.createElement("img");
		closebutton.src = closebuttonLocation;
		closebutton.style.position = "absolute";
		closebutton.style.top = "20px";
		closebutton.style.right = "20px";	
		closebutton.style.cursor= "pointer";
		closebutton.style.zIndex = 10;
		closebutton.setAttribute('id', "close");
		
		//closebutton.setAttribute('onClick', "closeButton()");
		closebutton.onmousedown = closeButton;
	

		
		newNode.appendChild(closebutton);
	}



	// the div that cotains all the node above
	newNode.appendChild(blank);

	newNode.appendChild(overFlowMarker2);
	newNode.appendChild(centertop);
	newNode.appendChild(centerbottom);
	newNode.appendChild(pointer);
	newNode.appendChild(centerbottom2);

	newNode.appendChild(middleleft);
	newNode.appendChild(middleright);
	newNode.appendChild(lefttop);
	newNode.appendChild(righttop);
	newNode.appendChild(rightbottom);
	newNode.appendChild(leftbottom);
	newNode.appendChild(textDiv);
	newNode.style.visibility = "hidden";
	
	document.body.appendChild(newNode);

	
	var needAdjust = false;

	// adjust popup size base on text overflow using the overFlowMarker
	while ((positionY(overFlowMarker) > positionY(overFlowMarker2)))
	{
	
		needAdjust = true;

		popupHeight +=  reAdjustMentRate;
		popupWidth = popupHeight * ratio;

		if (popupHeight > 1000)		
			break;
		
		wherePointer = Math.floor(popupWidth * (screenPercent()-.12));
		
		// used to make sure the pointer isn't blown out of porportion
		if (wherePointer > (popupWidth - 120))
			wherePointer = popupWidth - 120;
		if (wherePointer < 30)
			wherePointer = 30;

		centertop.style.width =  (popupWidth - 60) + "px";		
		centerbottom.style.width =  wherePointer + "px";
		pointer.style.left = (30 + wherePointer) + "px";
		centerbottom2.style.width =  (popupWidth - 105 - wherePointer)  + "px";
		middleright.style.height = (popupHeight - 60) + "px";
		middleleft.style.height = (popupHeight - 60) + "px";
		textDiv.style.height = (popupHeight - 70) + "px";
		textDiv.style.width = (popupWidth - 40) + "px";
		blank.style.height = (popupHeight - 40) + "px";
		blank.style.width = popupWidth - 40 + "px";
		newNode.style.height = popupHeight + "px";
		newNode.style.width = popupWidth + "px";	
		newNode.style.top = (yCord - popupHeight - 35 ) + "px";
		newNode.style.left = (xCord - wherePointer - offSet) + "px";
		
	}


	if (needAdjust)
	{
		// final readjustment
		var reAdjust = (positionY(overFlowMarker) - positionY(textDiv) + 42) - popupHeight;
		blank.style.height = (popupHeight - 42 + reAdjust) + "px";
		textDiv.style.height = (popupHeight - 70 + reAdjust) + "px";
		middleright.style.height = (popupHeight - 60 + reAdjust) + "px";
		middleleft.style.height = (popupHeight - 60 + reAdjust) + "px";
		newNode.style.height = (popupHeight + reAdjust) + "px";
		newNode.style.top = (yCord - popupHeight - 35 - reAdjust) + "px";
	}


	newNode.style.visibility = "visible";
	
}



// function that handles ajax, this gets called on mouse click
function getData(eventObject)
{
	closeButton();
	
	document.body.style.cursor = "wait";
	
	xCord = positionX(this);
	yCord = positionY(this);
	
	// get rid of bubbling
	if (!eventObject)
	var eventObject = window.event;
	eventObject.cancelBubble = true;
	if (eventObject.stopPropagation)
	eventObject.stopPropagation();
	
	
	try
	{
		// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
	// Internet Explorer
		try
		{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			try
			{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e)
			{
				alert("Your browser does not support AJAX!");
				return false;
			}
		}
	}
		
	xmlHttp.onreadystatechange=function()
	{
		if(xmlHttp.readyState==4)
		{
			// getting cords for the popup window

			var myText = xmlHttp.responseText;
			renderPopup(myText, xCord, yCord)
		}
	}

	
	var word = this.id;
	var testTime= (new Date()).getTime();

	
	xmlHttp.open("GET", server + word + "&time=" + testTime, true);
	xmlHttp.send(null);


	document.body.style.cursor = "default";
	
	return false;
}