$(document).ready(function() {
    $('div.eventPoeppel').mouseover(function() {
        $('#CitynameFlyout').hide();
        $('#CitynameFlyout').clearQueue();
        
        if (!$(this).hasClass('draggable'))
        {
            $('#CitynameFlyout a').text($('a span', this).text());
            $('#CitynameFlyout a').attr('href', $('a', this).attr('href'));
            $('#CitynameFlyout a').attr('onclick', $('a', this).attr('onclick'));



            var offsetTop = (parseFloat($(this).css('height')) / 2) - ($('#CitynameFlyout').height()/2);
            $('#CitynameFlyout').css('top', String(parseFloat($(this).css('top')) + offsetTop) + 'px');
            $('#CitynameFlyout').css('left', '-5000px');

            // Display in backyard to calculate computed width
            $('#CitynameFlyout').show();

            // Try right of poeppel
            var offsetLeft = parseFloat($(this).css('width'));
            var positionLeft = $(this).position().left + offsetLeft;
            var cssClass = '';
            if (positionLeft + $('#CitynameFlyout').width() > $('#CitynameFlyout').parent().width())
            {
                if ($('#CitynameFlyout').attr('class').indexOf('-left') == -1)
                {
                    cssClass = $('#CitynameFlyout').attr('class') + '-left';
                    $('#CitynameFlyout').removeClass();
                    $('#CitynameFlyout').addClass(cssClass);
                }

                positionLeft = $(this).position().left - $('#CitynameFlyout').width() - 12;
                $('#CitynameFlyout').css('left', String(positionLeft) + 'px');
            }
            else
            {
                if ($('#CitynameFlyout').attr('class').indexOf('-left') > -1)
                {
                    cssClass = $('#CitynameFlyout').attr('class').replace(/-left/, "");
                    $('#CitynameFlyout').removeClass();
                    $('#CitynameFlyout').addClass(cssClass);
                }

                $('#CitynameFlyout').css('left', String(positionLeft) + 'px');
            }
        }
    });

    $('div.eventPoeppel').mouseout(function() {
        if (!$(this).hasClass('draggable'))
            $('#CitynameFlyout').show().delay(200).slideUp(0);
    });

    $('#CitynameFlyout').mouseover(function() {
        $(this).clearQueue();
        $(this).show();
    });

    $('#CitynameFlyout').mouseout(function() {
        $(this).hide();
    });
    
});