$(function(){
    
    var bubble = $('div.bubble'),
        mapWidth = $('#landing-map').width();
    
    $('a.dot').hover(function(){
        bubble.hide();
        var dotOffset = $(this).position(),
            bubClass,
            topVal,
            leftVal;

        if (dotOffset.left < (mapWidth / 2)) {
            bubClass = 'bubble right';
            leftVal = dotOffset.left + $(this).width() - 12;
        } else {
            bubClass = 'bubble left';
            leftVal = dotOffset.left - bubble.width() + 12;
        }

        topVal = dotOffset.top - bubble.height();

        bubble.children('h4').text($(this).attr('title'))


        bubble
            .css({
                top: topVal + 12,
                left: leftVal
            })
            .attr('class', bubClass)
            .show();
    }, function(){
        bubble.hide();
    });
    
    var img = $('<img />', {
        'src' : '/images/landing-dot-bubble.png'
    })
});