var zonemap = MochiKit.DOM.getElement('zonemap');

var tooltip_style = "        \
    position:absolute;       \
    width:20em;              \
    background:#FFFFFF;      \
    padding:0em;             \
    border: 2px solid black; \
    font-size:8pt;           \
";
var tooltip_css  = {"id": "tooltip", "style": tooltip_style};
var forecast_css = {"style": "border-top:1px solid #AAAAAA;\
                              background:#EFEFEF;"};
var headline_css = {"style": "padding:0.2em;border-top:1px solid black;"};
var title_css = {
    "YA": {"style": "background:#7ed67f;padding:0.2em;margin: 0em;"},
    "AA": {"style": "background:#e9e96a;padding:0.2em;margin: 0em;"},
    "WA": {"style": "background:#d77f7e;padding:0.2em;margin: 0em;"},
    "YP": {"style": "background:#a6daff;padding:0.2em;margin: 0em;"},
    "WP": {"style": "background:#d9a7ff;padding:0.2em;margin: 0em;"},
    "N" : {"style": "background:#AAAAAA;padding:0.2em;margin: 0em;"}
};

var Tooltip = { }; // prototype

Tooltip.create = function (e) {
    var area = e.src();
    e.stop();
    var old_tooltip = $('tooltip');
    var tooltip = Tooltip.build(area);
    if (!old_tooltip){
        MochiKit.DOM.appendChildNodes(document.body, tooltip);
    }
    else {
        MochiKit.DOM.swapDOM(old_tooltip, tooltip);
    }
    var position = Tooltip.get_position(e, tooltip);
    MochiKit.Style.setElementPosition(tooltip, position);
    MochiKit.Signal.disconnectAll(area, 'onmouseover');
    MochiKit.Signal.connect(area, 'onmousemove', Tooltip.move);
    MochiKit.Signal.connect(area, 'onmouseout', Tooltip.destroy);
    return 1;
}

Tooltip.build = function (area) {
    // get attributes from node 
    var name          = MochiKit.DOM.getNodeAttribute(area, "name");
    var title         = MochiKit.DOM.getNodeAttribute(area, "title_");
    var headline_sig  = MochiKit.DOM.getNodeAttribute(area, "sig");
    var headline_text = MochiKit.DOM.getNodeAttribute(area, "headline");
    var forecast_text = MochiKit.DOM.getNodeAttribute(area, "forecast");
    // build the tooltip
    var title_text = name + " - " + title; 
    if (name == title) { var title_text = title; }
    if (headline_sig == null) { headline_sig = "N"; }
    // generate DOM tree
    var tooltip   = MochiKit.DOM.DIV(tooltip_css)
    var title_div = MochiKit.DOM.DIV(title_css[headline_sig], title_text);
    tooltip.appendChild(title_div);
    if ( MochiKit.Base.compare(headline_text, undefined) ) {
        var headline_div = MochiKit.DOM.DIV(headline_css, headline_text);
        tooltip.appendChild(headline_div);
    }
    if ( MochiKit.Base.compare(forecast_text, undefined) ) {
        var forecast_div = MochiKit.DOM.DIV(forecast_css, forecast_text);
        tooltip.appendChild(forecast_div);
    }
    return tooltip;
}

Tooltip.move = function (event) {
    event.stop();
    var tooltip = MochiKit.DOM.getElement("tooltip");
    if ( tooltip != undefined ) {
        var position = Tooltip.get_position(event, tooltip);
        MochiKit.Style.setElementPosition(tooltip, position);
        return 1;
    }
    return 0;
}

Tooltip.get_position = function (event, tooltip) {
    var ms = event.mouse();
    var tooltip_dim  = MochiKit.Style.getElementDimensions(tooltip);
    var viewport_dim = MochiKit.Style.getViewportDimensions();
    var coords = {"x": 0, "y": 0};
    if ( viewport_dim.w < tooltip_dim.w + ms.page.x + 10) {
        coords.x = ms.page.x - tooltip_dim.w - 10;
    }
    else {
        coords.x = ms.page.x + 10;
    }
    if ( viewport_dim.h < tooltip_dim.h + ms.page.y + 10 ) {
        coords.y = ms.page.y - tooltip_dim.h + 5;
    }
    else {
        coords.y = ms.page.y + 10;
    }
    return coords; 
}


Tooltip.destroy = function (event) {
    event.stop();
    var area = event.src();
    // destroy the tooltip
    var tooltip = MochiKit.DOM.getElement("tooltip");
    MochiKit.DOM.swapDOM(tooltip, null); // this doesn't remove $('tooltip') on IE??
    MochiKit.Signal.connect(area, 'onmouseover', Tooltip.create);
    MochiKit.Signal.disconnect(area, 'onmousemove', Tooltip.move);
    MochiKit.Signal.disconnect(area, 'onmouseout', Tooltip.destroy);
}

function init_mapTooltips() {
    var areaTags = MochiKit.DOM.getElementsByTagAndClassName('area', null, zonemap);
    for (var ii=0; ii < areaTags.length; ii++) {
        var area = areaTags[ii];
        var title = MochiKit.DOM.getNodeAttribute(area, 'title');
        MochiKit.DOM.setNodeAttribute(area, 'title_', title.slice(0));
        MochiKit.DOM.removeNodeAttribute(area, 'title');
        MochiKit.DOM.removeNodeAttribute(area, 'alt');
        MochiKit.Signal.connect(area, "onmouseover", Tooltip.create);
    }
}

window.onload = init_mapTooltips;
//try { MochiKit.DOM.addLoadEvent(init_mapTooltips); }
//catch (exception) { MochiKit.Base.noop(); }