function showInfo(message, anchorElementId, anchorElementSide, noPoint, timeout) {

    var _pointer = ""; 

    switch (anchorElementSide) {
        case "top":
            _pointer = "<img src='/_graphics/corners/info/PD.png' style='position:absolute; left:50%; bottom:-18px; margin:0 0 0 -14px;' />";
            break;
        case "left":
            _pointer = "<img src='/_graphics/corners/info/PR.png' style='position:absolute; top:50%; right:-18px; margin:-14px 0 0 0;' />";
            break;
        case "right":
            _pointer = "<img src='/_graphics/corners/info/PL.png' style='position:absolute; top:50%; left:-18px; margin:-14px 0 0 0; ' />";
            break;
        case "bottom":
            _pointer = "<img src='/_graphics/corners/info/PU.png' style='position:absolute; left:50%; top:-18px; margin:0 0 0 -14px;' />";
            break;
    }

    if (noPoint)
        _pointer = "";

    var _infoTemplate = "<div class='infobox' style='z-index:250; max-width:400px; background:url(/_graphics/corners/info/TR.png) top right no-repeat; padding:0 8px 0 0; position:absolute;'>"
                            + "<div style='background:url(/_graphics/corners/info/TL.png) top left no-repeat; padding:8px 0 0 8px;'>"
                                + "<div style='background:url(/_graphics/corners/info/BR.png) bottom right no-repeat; margin:0 -8px 0 -8px; padding:0 8px 0 0;'>"
                                    + "<div style='background:url(/_graphics/corners/info/BL.png) bottom left no-repeat; padding:0 0 8px 0;'>"
                                        + "<div style='background:url(/_graphics/corners/info/MR.png) top right repeat-y; margin:0 -8px 0 0;'>"
                                            + "<div style='background:url(/_graphics/corners/info/ML.png) top left repeat-y; margin:0 8px 0 0; padding:0 0 0 8px;'>";
                                        

    _infoTemplate += message;

    _infoTemplate += "</div></div></div></div></div>"; //</div>";

    _infoTemplate += _pointer;

    _infoTemplate += "</div>";

    var _inf = $(_infoTemplate).appendTo("body");

    _inf.click(function(e) { $(this).remove(); });

    var _att = null;

    if (anchorElementId instanceof jQuery)
        _att = anchorElementId
    else {

        if (anchorElementId.charAt(0) != "#")
            anchorElementId = "#" + anchorElementId;

        var _att = $(anchorElementId); // "#" + anchorElementId);
    }

    if (_att[0].type == "radio") {
        var group = $("input[name='" + _att.attr("name") + "']");
        group.bind("focus", _inf, function(e) { e.data.remove(); });
    }
    else
    {
        _att.bind("focus", _inf, function(e) { e.data.remove(); });
    }
    
    var _vcx = _att.offset().top + (_att.outerHeight() / 2);

    var _spacer = 15;
    
    switch(anchorElementSide)
    {
        case "left":
            _inf.css("top", _att.offset().top - ((_inf.outerHeight() - _att.outerHeight()) / 2));
            _inf.css("left", _att.offset().left - _inf.outerWidth() - _spacer);
        break;
        case "right":
            _inf.css("top", _att.offset().top - ((_inf.outerHeight() - _att.outerHeight()) / 2));
            _inf.css("left", _att.offset().left + _att.outerWidth() + _spacer);
        break;
        case "bottom":
            _inf.css("top", _att.offset().top + _att.outerHeight() + _spacer);
            _inf.css("left", _att.offset().left - ((_inf.outerWidth() - _att.outerWidth()) / 2));
        break;
    default:
            _inf.css("top", _att.offset().top - _inf.outerHeight() - _spacer);
            _inf.css("left", _att.offset().left - ((_inf.outerWidth() - _att.outerWidth()) / 2));
        break;
    }

    if (timeout) {
        try {
            var to = parseInt(timeout);

            setTimeout(function() { _inf.remove(); }, to);
        } catch (ex) { }
    }
}

$(document).ready(function() {

    $("b.info").hover(showInfoHover, hideInfoHover);
    $("a.info").hover(showInfoHover, hideInfoHover);
});

function showInfoHover(e){
    var message = "<div style='padding:10px; font-size:12px;'>" + $(this).next("div.info")[0].innerHTML + "</div>";

    var pos = "top";
    var b = $(this);

    if (b.hasClass("b"))
        pos = "bottom";
    else if (b.hasClass("r"))
        pos = "right";
    else if (b.hasClass("l"))
        pos = "left";

    showInfo(message, b, pos, true);
}

function hideInfoHover(e) {
    $("div.info").hide();
    $("div.infobox").remove();
}