var gloss_popup;

$(document).ready(function(){
    $("body").append("<div id=\"gloss_popup\" style=\"display:none;\">&nbsp;</div>");
    gloss_popup = $("div#gloss_popup");
    $("span.gloss").each(function(n){
        var gloss = $(this).attr("title");
        $(this).attr("gloss_title",gloss);
        $(this).removeAttr("title");
    });
    $("span.gloss").mouseover(function(){
        $(this).addClass("gloss_hover");
        // IE ignores the new style, so I have to add it manually
        if (jQuery.browser.msie)
            $(this).css("background-color","rgb(211,211,211)");
        var loc = $(this).offset({ border:true });
        var fsize = parseInt($(this).css("font-size"));
        var gloss = $(this).attr("gloss_title");

        $(gloss_popup).text(gloss);
        $(gloss_popup).css({ visibility:"visible",
            display:"block", position:"absolute",
            fontSize:fsize * 0.8 });
        var gtop = loc.top - $(gloss_popup).outerHeight() - 1;
        var gleft = loc.left;
        if (loc.left + $(gloss_popup).outerWidth() > $(window).width()) {
            gleft = $(window).width() - $(gloss_popup).outerWidth() - 20;
        }
        $(gloss_popup).css({ top:gtop, left:gleft });
    });
    $("span.gloss").mouseout(function(){
        $(this).removeClass("gloss_hover");
        // removing the style I added manually for IE...
        if (jQuery.browser.msie)
            $(this).css("background-color","transparent");
        $(gloss_popup).css({display:"none"});
    });
    $(gloss_popup).mouseout(function(){$(this).css({display:"none"})});
});