$(document).ready(function(){

    $("#header ul li").not(".on").find("a").hover(function(){
    
        var my_title = $(this).text();
        var my_icon = $(this).attr("rel");
        var my_infobox = $(this).attr("rev");

        $(".popup").remove();
        $(".point").remove();
        $(".current").stop().animate({ opacity: "0" }, 500);
        
        $("#header").append("<div id='welcome' class='infobox popup' style='display: none;'><img src='" + my_icon + "' alt='" + my_title + "' title='' width='112' height='82' /><h2>" + my_title + "</h2><p>" + my_infobox + "</p></div>");
                
        $(this).parent().prepend("<i class='point' style='display: none;'></i>");
        $(".point").css({ opacity: "0", display: "block" });
        
        $(".popup").css({ opacity: "0", display: "block" }).find("img").load(function(){
            $(this).ifixpng();
            $(this).parent().css("top", "5px").stop().animate({ opacity: "1", top: "-5px" }, 500);
            $(".point").css("top","0").stop().animate({ opacity: "1", top: "-10px" }, 500);
        });
    
    }, function(){
    
        $(".popup").stop().animate({ opacity: "0", top: "5px" }, 500, function(){
            $(this).remove();
        });
        $(".point").stop().animate({ opacity: "0", top: "0" }, 500, function(){
            $(this).remove();
        });
        $(".current").stop().animate({ opacity: "1" }, 500);                
    
    });

});