function getPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        cursor.x = e.clientX + 
            (document.documentElement.scrollLeft || 
            document.body.scrollLeft) - 
            document.documentElement.clientLeft;
        cursor.y = e.clientY + 
            (document.documentElement.scrollTop || 
            document.body.scrollTop) - 
            document.documentElement.clientTop;
    }
    return cursor;
}

function xstooltip_show(event, tooltipId)
{
    var posX = 10;
    var posY = 10;

    it = document.getElementById(tooltipId);

    if ((it.style.top == '' || it.style.top == 0) 
        && (it.style.left == '' || it.style.left == 0))
    {
        // need to fixate default size (MSIE problem)
        it.style.width = it.offsetWidth + 'px';
        it.style.height = it.offsetHeight + 'px';
    }    
        img = document.getElementById("page"); 

        // if tooltip is too wide, shift left to be within parent
        if ((Math.max(document.body.clientWidth,document.documentElement.clientWidth) - getPosition(event).x - posX) < it.offsetWidth) {
            posX = - (it.offsetWidth - ( Math.max(document.body.clientWidth,document.documentElement.clientWidth) - posX - getPosition(event).x));
        }
        if (getPosition(event).x < posX ) posX = 0; 

        x = getPosition(event).x - img.offsetLeft + posX;
        y = getPosition(event).y - img.offsetTop + posY;

        it.style.top = y + 'px';
        it.style.left = x + 'px';

    it.style.visibility = 'visible'; 
}

function xstooltip_hide(id)
{
    it = document.getElementById(id); 
    it.style.visibility = 'hidden'; 
}