var gCurrentTitlePopup = null;
var gInitialTitleWidth = 350;
var gOffsetLeft = 15;
var gOffsetTop = 15;
var gWidthMargin = 20;
var gHaveDOM = (document.getElementById != null && document.getElementsByTagName != null
					&& document.createElement != null);

// these constants are used to calculate the initial width of the title DIV.
// you'll need to play around with them until you're happy with the result - they
// will depend on the font family and size that you've set in the CSS style sheet
// that controls the DIV appearance and text setting.
var ghrefMultiplier = 5;
var gtitleMultiplier = 2;

function createCSSTitlePopups() {
	// see if we have a DOM-capable browser. If not, then don't do anything
    if (!gHaveDOM) return;

	// get a list of all the <a> tags in the document
	var aLinks = document.getElementsByTagName("area");
    for (var i=0; i < aLinks.length; i++) 
    {
		// for each <a> tag, see if it has a title attribute. If so, then strip it
		// off and replace it with one of our own making called CSStitle. If you
		// don't do this, then the browser will display both
        var oLink = aLinks[i];
        if (oLink != null && oLink.getAttribute("title") != null && oLink.getAttribute("title") != "") 
        {
			// exclude links that are named anchor jumps. These have
			// an href attribute that starts with "#"
			if (oLink.getAttribute("href") != null && oLink.getAttribute("href").substr(0,1) != "#")
			{
				// create our own special title attribute
				oLink.setAttribute("CSStitle",oLink.title);
				// set the events to handle mouse over, out, and focus and blur events (for when
				// the user tabs to and from the link).
				addEventHandler(oLink,"mouseover",showTitlePopup);
				addEventHandler(oLink,"mouseout",hideTitlePopup);
				addEventHandler(oLink,"focus",showTitlePopup);
				addEventHandler(oLink,"blur",hideTitlePopup);

				// get rid of the old title attribute. If you don't do this, then the browser will
				// show not only our popup but its built-in one as well.
				oLink.removeAttribute("title");
			}
        }
    }
}

function showTitlePopup(e) {
	// if there is already a popup title showing then hide it
    if (gCurrentTitlePopup != null)
		hideTitlePopup(gCurrentTitlePopup);

	var lnkTag = null;
	// figure out which link the event came from.
    if (window.event != null && window.event.srcElement != null)
        lnkTag = window.event.srcElement;
	else if (e != null && e.target != null)
        lnkTag = e.target;

    if (lnkTag == null)
		return true;

	// if the event came from a text node, see if it has a <a> parent
	if (lnkTag.nodeType == 3) {
        lnkTag = getParentByTagName(lnk,"A");
    }
    if (lnkTag == null)
		return true;

	// get the text to use as the CSS popup's title content
    var CSStitle = lnkTag.getAttribute("CSStitle");

	// Use the DOM to create the DIV that will hold the
	// popup content, along with the items inside the layer that
	// will display the title and href values
    var cssTitleDiv = document.createElement("div");
    cssTitleDiv.className= "CSStitle";
    var titleText = document.createTextNode(CSStitle);
    var titleContainer = document.createElement("p");
    titleContainer.appendChild(titleText);
    cssTitleDiv.appendChild(titleContainer);
    
    // commented out to remove display of actual link
/*      if (lnkTag.getAttribute("href")) {
        var hrefText = document.createTextNode("Link: " + lnkTag.getAttribute("href"));
        var hrefContainer = document.createElement("p");
        hrefContainer.className = "destlink";
        hrefContainer.appendChild(hrefText);
        cssTitleDiv.appendChild(hrefContainer);
    } */

	// calculate the initial desired width of the CSS title popup
	// start by getting the string lengths of the title and href attributes
	var hrefLength = 0, titleLength = 0;
	if (lnkTag.getAttribute("href"))
        hrefLength = lnkTag.getAttribute("href").length;
	else
		hrefLength = CSStitle.length;

    if (CSStitle.length > 0)
		titleLength = CSStitle.length;

	// apply the multipliers to widen the DIV as necessary.
	hrefSize = hrefLength * ghrefMultiplier;
	titleSize = titleLength * gtitleMultiplier;

	// pin the width so we don't end up with a badly sized DIV
    w = Math.max(hrefSize, gInitialTitleWidth);
    w = Math.max(hrefSize, titleSize);

	// if the DIV's width is wider than the current size of the window,
	// shrink it so that it fits within the window's width.
	if (w > document.body.clientWidth) {
		w = document.body.clientWidth - gWidthMargin;
	}

	// set the width of the DIV
    cssTitleDiv.style.width = w + 'px';

	// figure out where to position the CSS title DIV
	if (window.event) { // this is the IE case
		mx = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
		my = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
	}
	else { // this is the DOM Events case
		mx = e.clientX + window.scrollX;
		my = e.clientY + window.scrollY;
	}
	// set the top and left of the DIV
    cssTitleDiv.style.left = (mx+gOffsetLeft) + 'px';
    cssTitleDiv.style.top = (my+gOffsetTop) + 'px';
	// if the DIV is going to overflow the screen, then reposition it
    if (window.innerWidth) { // IE case
		if ((mx+w) > window.innerWidth)
	        cssTitleDiv.style.left = (window.innerWidth - w - (gOffsetLeft/2)) + "px";
    }
    if (document.body.scrollWidth) { // NS case
		if ((mx+w) > document.body.scrollWidth)
	        cssTitleDiv.style.left = (document.body.scrollWidth - w - (gOffsetLeft/2)) + "px";
    }

	// we're done - add the new DIV to the document so it becomes visible
    document.getElementsByTagName("body")[0].appendChild(cssTitleDiv);
    gCurrentTitlePopup = cssTitleDiv;
	return true;
}

function hideTitlePopup(e)
{
    if (gCurrentTitlePopup) {
        document.getElementsByTagName("body")[0].removeChild(gCurrentTitlePopup);
        gCurrentTitlePopup = null;
    }
}

function addEventHandler(obj, evType, handlerFunc)
{
	// Add an event using the DOM Level 2 event listener function,
	// if it's available (works in Mozilla, Firefox)
	if (obj.addEventListener != null){
		obj.addEventListener(evType, handlerFunc, true);
	}
	// Otherwise, use the IE method if possible
	else if (obj.attachEvent != null){
		obj.attachEvent("on"+evType, handlerFunc);
	}
	// Otherwise, use the obj.on"event" method
	else {
		eval (obj + ".on" + evType + "= function() {" + handlerFunc + "(); }");
	}
}

function getParentByTagName(node, sTagName)
{
	if (node == null)
		return null;
	else if (node.nodeType == 1 && (node.nodeName.toLowerCase() == sTagName.toLowerCase()))
		return node;
	else
		return getParentByTagName(el.parentNode, pTagName);
}

addEventHandler(window,"load",createCSSTitlePopups);
/*
window.onload = function () {
	createCSSTitlePopups();
}
*/