// addEventListener¸¦ »ç¿ëÇؼ­ Event¸¦ üũÇÕ´Ï´Ù.
function balloonHint(Id) {
    balloonHint.layerId = Id ;
    document.addEventListener('mouseover', balloonHint.Show, false) ;
    document.addEventListener('mouseout', balloonHint.Hide, false) ;
}

balloonHint.layerId = null ;

balloonHint.Show = function (evt) {
    if (typeof(evt) == "undefined" || typeof(evt.target) == "undefined") {
        (evt=event).target = event.srcElement ;
    }

    var alt = evt.target.getAttribute("alt") ;
    if (alt == null || alt.length == 0) return ;
    if (balloonHint.layer == null) balloonHint.makeLayer() ;

    with (balloonHint.layer) {
        innerHTML = sourceHTML.replace("{{alt}}", alt) ;
        show(evt.clientX, evt.clientY) ;
    }
}

balloonHint.Hide = function (evt) {
    if (typeof(evt) == "undefined" || typeof(evt.target) == "undefined") {
        (evt=event).target = event.srcElement ;
    }

    var alt = evt.target.getAttribute("alt") ;
    if (alt == null || alt.length == 0) return ;

    balloonHint.layer.hide() ;
}

balloonHint.makeLayer = function() {
    if (typeof document.body == "undefined") {
        document.body = document.getElementsByTagName("BODY")[0] ;
    }

    balloonHint.layer = document.getElementById(balloonHint.layerId) ;
    balloonHint.layer.sourceHTML = balloonHint.layer.innerHTML ;
    balloonHint.layer.style.position = "absolute" ;

    if (typeof(window.createPopup) == "undefined") {
        balloonHint.layer.show = function(x, y) {
            balloonHint.layer.style.display = "block" ;
            balloonHint.layer.style.left = (x+document.body.scrollLeft+1) + "px" ;
            balloonHint.layer.style.top =  (y+document.body.scrollTop+1) + "px" ;
        }
    
        balloonHint.layer.hide = function() {
            balloonHint.layer.style.display = "none" ;
        }
    } else {
        balloonHint.layer.popup = window.createPopup() ;
        balloonHint.layer.show = function(x, y) {
            with (balloonHint.layer) {
                style.display = "block" ;
                var w = offsetWidth, h = offsetHeight ;
                style.display = "none" ;
                popup.document.body.innerHTML = innerHTML;
                popup.show(x, y, w, h, document.body) ;
            }
        }
        balloonHint.layer.hide = function() {
            balloonHint.layer.popup.hide() ;
        }
    }
}

if (typeof(document.addEventListener) == "undefined") {
    if (typeof(document.attachEvent) != "undefined") {
        document.addEventListener = function (eventType, listener) {
            document.attachEvent("on"+eventType, listener) ;
        }
        document.removeEventListener = function (eventType, listener) {
            document.detachEvent("on"+eventType, listener) ;
        }
    }
}

//·¹À̾î´Â ¼öÁ¤°¡´ÉÇÕ´Ï´Ù.
document.write("<div id='balloonHint' style='display:none'>\n"
            + "<table border='0' cellspacing='0' cellpadding='5' bgcolor='#FFFFCC' style='border:1px solid #CC3300'>\n"
            + "<tr><td style='font-size:9pt'>{{alt}}</td></tr>\n"
            + "</table>\n"
            + "</div>\n") ;

//ÃʱâÈ­ÇÕ´Ï´Ù.
balloonHint("balloonHint") ;