function handleGlossaryTermOver(e) {
	if (aGloss) // if there's a glossary Array
	{
		var term = (this.href.split(/#/)[1]).toString(); // get the anchor string
		var tmpTerm = term; // store the current term so we can match it while going through the glossary array below:
		var termDef;		
		for(term in aGloss)
		{
			if(term == tmpTerm) // Trying to match the current anchor string with an index (string ref) in the aGloss array:
			{
				termDef = aGloss[term]; // This is the term's definition.
				
				// Create a tooltip dl element and contents...
				// ...and append the tooltop to the DOM
				var glossaryTermTipDl = document.createElement("dl");
					glossaryTermTipDl.className = "toolTip";
					glossaryTermTipDl.setAttribute("id","toolTipEl");
				var glossaryTermTipDt = document.createElement("dt");
					var glossaryTermTipDtText = document.createTextNode(term + ": ");
					glossaryTermTipDt.appendChild(glossaryTermTipDtText);
				var glossaryTermTipDd = document.createElement("dd");
					var glossaryTermTipDdText = document.createTextNode(termDef);
					glossaryTermTipDd.appendChild(glossaryTermTipDdText);
	
				glossaryTermTipDl.appendChild(glossaryTermTipDt);	
				glossaryTermTipDl.appendChild(glossaryTermTipDd);

				//document.body.insertBefore(glossaryTermTipDl,document.body.firstChild);
				this.parentNode.appendChild(glossaryTermTipDl);

				/*$('toolTipEl').pageX = this.parentNode.pageX + this.parentNode.offsetWidth;
				$('toolTipEl').pageY = this.parentNode.pageY + this.parentNode.offsetHeight;*/

				
				/**/
				
				var nodeCtr = 0;
				/*
				do
				{
					nodeCtr += 1;
				}
				while(this.parentNode.nodeName != 'BODY')
				*/
				//alert(this.parentNode.nodeName);
				
				
				/*
				alert('  ... ');
				$('toolTipEl').style.left = (this.pageX || (this.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft))) + this.offsetX + "px";
				$('toolTipEl').style.top = (this.pageY || (this.clientY + (document.documentElement.scrollTop || document.body.scrollTop))) + this.offsetY + "px";
				*/
				
				
				
				//alert(this.offsetParent.offsetWidth);
				
				//alert(this.offsetParent.offsetLeft);

				//alert(this.offsetParent.nodeName);

				//alert($('toolTipEl').offsetLeft);

				/*var cursorPointX = e.clientX;
				var cursorPointY = e.clientY;*/
				//var newPos = this.x + this.offsetWidth;
				            
				//alert(this.offsetParent.offsetLeft);

				//$('toolTipEl').style.left = newPos + 'px';

				//alert(glossaryTermTipDl.offsetLeft);
				
				/*glossaryTermTipDl.style.left = cursorPointX;
				glossaryTermTipDl.style.top = cursorPointY;*/
				
				//glossaryTermTipDl.style.left = 1000 + 'px';
				
				//alert(glossaryTermTipDl.style.left);
				
				//glossaryTermTipDl.style.left = (this.clientX) + 'px';

				//alert(this.offsetWidth);
			}
		}
	}

	return false;
}
function handleGlossaryTermOut(e) {
	// Wipe the current tooltip object from the DOM, if it's present:
	if($('toolTipEl'))
	{
		$('toolTipEl').parentNode.removeChild($('toolTipEl'));
	}
	return false;
}		

function initGlossary() {
	// Create an array of references to span elements with the right class name, if they are children of the #moduleArticle element:
	var aGlossary = bbcjs.dom.getElementsByClassName('glossaryTerm', 'span', $('moduleArticle'));
	// Now we have a list of references to all the <span></span> elements containing glossary terms in <a></a> tags. 
	// Declare a var for glossaryTerm objects
	var oGlossaryTerm;
	// loop through aGlossary, setting mosueover and mouseout event handlers for each glossary Term
	for(n=0; n<aGlossary.length; n++)

	{
		oGlossaryTerm = aGlossary[n].firstChild;
		bbcjs.dom.addEventListener( oGlossaryTerm, 'mouseover',  handleGlossaryTermOver);
		bbcjs.dom.addEventListener( oGlossaryTerm, 'mouseout',  handleGlossaryTermOut);
	}

	return false;
}