/*javascript for Bubble Tooltips by Alessandro Fulciniti
- http://pro.html.it - http://web-graphics.com */

function bubbleTooltipShow(e) {
    var btc = $("btc");

    btc.style.display = 'none';
    btc.appendChild(this.tooltip);
    Effect.Appear(btc, { duration:0.2, from:0.0, to:1.0 });    

    bubbleTooltipLocate(e);
}

function bubbleTooltipHide(e) {
    var btc = $("btc");
    if (btc.childNodes.length > 0) {
	btc.removeChild(btc.firstChild);
    }
}

function bubbleTooltipLocate(e) {
    var posx = 0;
    var posy = 0;

    if (e == null) {
	e=window.event;
    }

    if (e.pageX || e.pageY) {
	posx = e.pageX; 
	posy = e.pageY;

    } else if (e.clientX || e.clientY){

	if (document.documentElement.scrollTop) {
	    posx = e.clientX + document.documentElement.scrollLeft;
	    posy = e.clientY + document.documentElement.scrollTop;
        } else {
	    posx = e.clientX + document.body.scrollLeft;
	    posy = e.clientY + document.body.scrollTop;
        }
    }

    $('btc').style.top = (posy + 10) + "px";
    $('btc').style.left = (posx - 20) + "px";
}

function CreateEl(t, c) {
    var x = document.createElement(t);
    x.className = c;
    x.style.display = "block";
    return (x);
}

function setOpacity(el){
    el.style.filter = "alpha(opacity:95)";
    el.style.KHTMLOpacity = "0.95";
    el.style.MozOpacity = "0.95";
    el.style.opacity = "0.95";
}

function bubbleTooltipHookElement(el) {

    // Get relevant info from element
    var title = el.getAttribute("title");
    var altText = el.getAttribute("alt");
    el.removeAttribute("title"); // And delete attributes since we're handling them now.
    el.removeAttribute("alt");

    // Do some surgery on the element-extracted text
    if (title==null || title.length==0) {
	title = "...";
    }
    if (altText.length > 200) {
	altText = altText.substr(0, 200) + "...";
    }

    // Create and attach a HTML element to the DOM, of the format
    // <span class="tooltip">
    //  <span class="top">text</span>
    //  <strong class="bottom">text</span>
    // </span>
    var top = CreateEl("span", "top");
    var bottom = CreateEl("strong", "bottom");
    top.appendChild(document.createTextNode(title));
    bottom.appendChild(document.createTextNode(altText));

    var tooltip = CreateEl("span", "tooltip");
    tooltip.appendChild(top);
    tooltip.appendChild(bottom);
    setOpacity(tooltip);

    el.tooltip = tooltip;

    // Register event handlers
    el.onmouseover = bubbleTooltipShow;
    el.onmouseout = bubbleTooltipHide;
    el.onmousemove = bubbleTooltipLocate;
}

function bubbleTooltipInit() {
    // add Bubble to DOM
    var h = document.createElement("span");
    h.id = "btc";
    h.setAttribute("id", "btc");
    h.style.position = "absolute";
    document.getElementsByTagName("body")[0].appendChild(h); // attach to DOM

    // Do surgery on each link in the map
    var links = $('us_imgmap').select('area');
    for (var i=0; i<links.length; i++) {
	bubbleTooltipHookElement(links[i]);
    }
}


// On-page-load event registration
Event.observe(window, 'load', bubbleTooltipInit);