﻿var toolTipContent = "";
function changeContent(contentObj) {
    toolTipContent = contentObj;
}

$(function() {
    $('a').hover(
                function(evt) {
        if ($(this).attr("rel") == "toolTip") {
            var html = '<div id="info">'

            html += '<div id="toolTop"></div>'
            html += '<div id="toolMid">'
            html += '<div id="toolContent">'
            html += toolTipContent
            html += '</div>'
            html += '</div>'
            html += '<img alt="tooltip" src="images/tooltip/toolTipBottom.png" style="width:242px; height: 23px;" />'
            html += '</div>';

            $('#container').append(html)
                                .children('#info')
                                .hide()
                                .fadeIn(50);

            $('#info').css('top', evt.pageY - ($('#info').height() + 10))
                                .css('left', evt.pageX - 200);
        }
    }, function() {
        $('#info').remove();
    });

    // When the Mouse Moves, Do This -->
    $('a').mousemove(function(evt) {
        $('#info').css('top', evt.pageY - ($('#info').height() + 10))
                            .css('left', evt.pageX - 200);
    });
});