/*
Suggested HTML:
<div id="containing block">
    <div class="tooltiplink" id="recent_link_<id>">Tom Doctoroff: Paul French is wrong about China (and Tom Doctoroff)</div>
    <div id="recent_content_<id>" class="nav_tab_mouse_over" style="display: none; left: 0px; top: 0px;">Tom Doctoroff, CEO of J. Walter Thompson for Greater China, accepted my invitation to respond to the critique of his book by Shanghai-based writer and...</div>
</div>

*/
/*
The script find all element with calss=="tooltiplink". recored its id(<prefix>_link_<id>).
When mouse over, the element with id == <prefix>_content_<id>, will be display.
NOTE: link and content should in same containing block, which is use to calculate the position of top-up block correctly.
*/


function tooltip_mouseover(evt) {
    info_div = get_info_div(Event.element(evt).id);
    info_div.setStyle({display: 'block'});
    tooltip_mousemove(evt);
}

function tooltip_mousemove(evt) {
    link_div = Event.element(evt)
    info_div = get_info_div(link_div.id);
    var s = {};
    s.position = 'absolute';
    // Two line to bypass prototype1.5.1 bugs of Event.PointerX/PointerY
    // reference: http://extjs.com/forum/showthread.php?t=17107
    s.left = evt.pageX || (evt.clientX + ((document && document.documentElement && document.documentElement.scrollLeft) || (document && document.body && document.body.scrollLeft) || 0));
    s.top = evt.pageY || (evt.clientY + ((document && document.documentElement && document.documentElement.scrollTop) || (document && document.body && document.body.scrollTop) || 0));
    s.left = (s.left + 10 - Position.cumulativeOffset($('header'))[0]) + 'px';
    s.top = (s.top + 15 - Position.cumulativeOffset($('header'))[1]) + 'px';
    s.zIndex = 999;
    info_div.setStyle(s);
}

function tooltip_mouseout(evt) {
    info_div = get_info_div(Event.element(evt).id);
    var s = {};
    s.display = 'none';
    s.zIndex = 0;
    info_div.setStyle(s);
}

function get_info_div(parentid) {
    var la_link = ('' + parentid).split('_');
    if (la_link.length == 3) {
        var ls_div = la_link[0] + '_content_' + la_link[2];
        return $(ls_div);
    } else {
        return false;
    }
}

Event.observe(window, 'load', tooltip_init, false);

function tooltip_init() {
    $$(".tooltiplink").each(function(div) {
            Event.observe(div, 'mouseover', tooltip_mouseover);
            Event.observe(div, 'mousemove', tooltip_mousemove);
            Event.observe(div, 'mouseout', tooltip_mouseout);
        });
}