var ToolTip = {
    mapObject: null,
    divObject: null,
    
    make: function() {
        ToolTip.mapObject = document.getElementById('plan');
        
        var areaList = ToolTip.mapObject.getElementsByTagName('area');
        for( var i = 0, m = areaList.length; i < m; i++ )
        {
            areaList[i].onmouseover = ToolTip.show;
            areaList[i].onmouseout  = ToolTip.hide;
            
            areaList[i].setAttribute('tooltip', areaList[i].getAttribute('title'));
            areaList[i].removeAttribute('title');
        }
        
        var bloc = document.createElement('div');
        bloc.setAttribute('id', 'tooltip');
        bloc.appendChild(document.createTextNode(' '));
        
        ToolTip.divObject = bloc;
        ToolTip.divObject.displayed = false;
        document.body.appendChild(bloc);
        ToolTip.mapObject.onmousemove = ToolTip.move;
    },

    make2: function() {
        ToolTip.mapObject = document.getElementById('plan');
        
        var areaList = ToolTip.mapObject.getElementsByTagName('area');
        for( var i = 0, m = areaList.length; i < m; i++ )
        {
            areaList[i].onmouseover = ToolTip.show;
            areaList[i].onmouseout  = ToolTip.hide;
            
            areaList[i].setAttribute('tooltip', areaList[i].getAttribute('title'));
            areaList[i].removeAttribute('title');
        }
        
        var bloc = document.createElement('div');
        bloc.setAttribute('id', 'tooltip');
        //bloc.appendChild(document.createTextNode(' '));
        var table= document.createElement('table');
        bloc.appendChild(table);
        var tr= document.createElement('tr');
        table.appendChild(tr);
        var tr= document.createElement('tr');
        tr.appendChild(td);
        var td= document.createElement('td');
        td.innerHTML = "hello<br>test";
        
        ToolTip.divObject = bloc;
        ToolTip.divObject.displayed = false;
        document.body.appendChild(bloc);
        ToolTip.mapObject.onmousemove = ToolTip.move;
    },
    
    show: function(e) {
        if( e )
            var areaObj = e.target;
        else
            var areaObj = window.event.srcElement;
        
        ToolTip.divObject.firstChild.nodeValue = areaObj.getAttribute('tooltip');
        ToolTip.divObject.style.display = 'block';
        ToolTip.divObject.displayed = true;
    },
    
    hide: function() {
        ToolTip.divObject.style.display = 'none';
        ToolTip.divObject.displayed = false;
    },
    
    move: function(e) {
        var posX = 0, posY = 0;
        
        if( ToolTip.divObject.displayed == false )
        {
            return;
        }
        
        if( !e )
            e = window.event;
        
        if( typeof(e.pageX) != 'undefined' )
        {
            posX = e.pageX;
            posY = e.pageY;
        }
        else
        {
            if( typeof(document.documentElement) != 'undefined' )
            {
                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);
            }
        }
        
        ToolTip.divObject.style.left = (posX - 70) + 'px';
        ToolTip.divObject.style.top  = (posY + 25) + 'px';
    }
}