var tooltip = {
    tmpHtml:'<table style="display:none;position:absolute;z-index:999;" id="tooltip" cellpadding=0 cellspacing=0>'+
        '<tr>'+
        '<td height="3"><img src="/tooltip/leftop.gif" /></td>'+
        '<td style="background-image: url(/tooltip/topline.gif); background-repeat: repeat-x"></td>'+
        '<td><img src="/tooltip/rightop.gif" /></td>'+
        '</tr>'+
        '<tr>'+
        '<td style="background-image: url(/tooltip/leftcenter.gif); background-repeat: repeat-y"></td>'+
        '<td bgcolor="#ffcd05" id="tooltip_text" style="font-size:12px;font-family:Verdana" align="center"></td>'+
        '<td style="background-image: url(/tooltip/rightcenter.gif); background-repeat: repeat-y"></td>'+
        '</tr>'+
        '<tr>'+
        '<td height="14" valign=top><img src="/tooltip/leftdown.gif" /></td>'+
        '<td align=center style="background-image: url(/tooltip/downline.gif); background-repeat: repeat-x"><img src="/tooltip/arrow.gif" /></td>'+
        '<td valign=top><img src="/tooltip/rightdown.gif" /></td>'+
        '</tr>'+
        '</table>',
    config:{maxWidth:300}
}

$(function(){
    $(document.body).append(tooltip.tmpHtml);
    $(".tooltip").hover(function(e){
            eval("var qtconfig = "+$(e.target).attr("qtc"));
            var maxWidth = tooltip.config.maxWidth;
            if(qtconfig != null){
                maxWidth = qtconfig.maxWidth || tooltip.config.maxWidth;
            }
            
            $("#tooltip_text").text($(e.target).attr("qt")).width(0);
            $("#tooltip").show();
            
            var qText = $("<span style='display:none'>"+$(e.target).attr("qt")+"</span>").appendTo(document.body);
            var xOffset = 0;
            var eTlWidth = qText.width();
            var eWidth = $(e.target).width();
            eTlWidth = eTlWidth > maxWidth ? maxWidth : eTlWidth;
            
            $("#tooltip_text").width(eTlWidth);
            qText.remove();
            xOffset = getLeft(e.target)+((eWidth - eTlWidth)/2);
            if(xOffset < 0) xOffset = 0;
            if((xOffset + eTlWidth) > 990) xOffset = 990 - eTlWidth;
            $("#tooltip").css("left",xOffset).css("top",getTop(e.target)-$("#tooltip").height()+6);
        },function(e){
            var o = document.elementFromPoint(event.x,event.y);
            if ($(o).parents("#tooltip").length == 0){
                $(e.target).removeClass("highlight");
                $("#tooltip").hide();
            }
    });
    $("#tooltip").hover(function(){
        
    },function(){
        var o = document.elementFromPoint(event.x,event.y);
        if ($(o).parents(".tooltip").length == 0){
            $("#tooltip").hide();
        }
    })
})