var timeouts = new Array();
$(document).ready(function() {
    $("div.city-mark").mouseover(function(){
        var bubbleId = $(this).attr('id').replace(/city-/g, "city-bubble-");

        if (timeouts["" + bubbleId])
            clearTimeout(timeouts["" + bubbleId]);

        if (!$(this).hasClass('nextEvent-lo'))
        {
            $(this).removeClass('lo');
            $(this).addClass('hi');
        }
        else
        {
            $(this).removeClass('nextEvent-lo');
            $(this).addClass('nextEvent-hi');
        }

        $("#" + bubbleId).css('display', 'block');
    });

    $("div.city-mark").mouseout(function(){
        if (!$(this).hasClass('nextEvent-hi'))
        {
            $(this).removeClass('hi');
            $(this).addClass('lo');
        }
        else
        {
            $(this).removeClass('nextEvent-hi');
            $(this).addClass('nextEvent-lo');
        }

        var bubbleId = $(this).attr('id').replace(/city-/g, "city-bubble-");
        timeouts["" + bubbleId] = setTimeout("$('#" + bubbleId + "').hide()", 10);
    });

    $("div.hiddenBubble").mouseover(function(){
        $(this).css('display', 'block');
        if (timeouts["" + $(this).attr('id')])
            clearTimeout(timeouts["" + $(this).attr('id')]);
    });

    $("div.hiddenBubble").mouseout(function(){
        timeouts["" + $(this).attr('id')] = setTimeout("$('#" + $(this).attr('id') + "').hide()", 10);
    });

});