$(function () {
    $('.bubbleInfo').each(function () {
        // options
        var distance = 10;
        var time = 250;
        var hideDelay = 500;
        var hideDelayTimer = null;
        // tracker
        var beingShown = false;
        var shown = false;
        var trigger = $('.trigger', this);
        var popup = $('.popup', this).css('opacity', 0);
        
        // set the mouseover and mouseout on both element
        $([trigger.get(0), popup.get(0)]).mouseover(function () {
        // stops the hide event if we move from the trigger to the popup element
        if (hideDelayTimer) clearTimeout(hideDelayTimer);
        
        // don't trigger the animation again if we're being shown, or already visible
        if (beingShown || shown) {
            return;
        } else {
            beingShown = true;
            // reset position of popup box
            var topp = 25;
            var bla = popup.attr("offset");
            var tehurl = popup.attr("url");
            if (tehurl) {
                popup.load(tehurl);
            }
            if (bla) {
                topp = topp - bla;
            }
            popup.css({
                top: topp,
                left: 0,
                display: 'block' // brings the popup back in to view
            })
            // (we're using chaining on the popup) now animate it's opacity and position
            .animate({
            top: '-=' + distance + 'px',
            opacity: 1
            }, time, 'swing', function() {
            // once the animation is complete, set the tracker variables
            beingShown = false;
            shown = true;
            });
            }
        }).mouseout(function () {
            // reset the timer if we get fired again - avoids double animations
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            // store the timer so that it can be cleared in the mouseover if required
                hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                popup.animate({
                top: '-=' + distance + 'px',
                opacity: 0
                }, time, 'swing', function () {
            // once the animate is complete, set the tracker variables
                 shown = false;
            // hide the popup entirely after the effect (opacity alone doesn't do the job)
                popup.css('display', 'none');
            });
        }, hideDelay);
        });
    });
});