/**
 * Created by IntelliJ IDEA.
 * User: Navid
 * Date: 2/8/11
 * Time: 4:55 PM
 * To change this template use File | Settings | File Templates.
 */
$(function () {
    $('.bubbleInfo').each(function () {
        // options
        var distance = -15;
        var time = 500;
        var hideDelay = 500;

        var hideDelayTimer = null;

        // tracker
        var beingShown = false;
        var shown = false;

        var trigger = $('.trigger', this);
        var popup = $('.popup', this).css('opacity', 1);

        // set the mouseover and mouseout on both element
        $([trigger.get(0), popup.get(0)]).mouseover(
                                                   function (e) {
                                                       // 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
                                                           popup.css({
                                                               top: e.pageY - popup.height() - $(document).scrollTop() + 'px',
                                                               left: e.pageX - popup.width() / 2
//                                                               display: 'block' // brings the popup back in to view
                                                           })
                                                               // (we're using chaining on the popup) now animate it's opacity and position
                                                                   .fadeIn(time, function() {
                                                               // once the animation is complete, set the tracker variables
                                                               beingShown = false;
                                                               shown = true;
                                                           });
                                                           $(document).scroll(function () {
                                                               popup.css({
                                                                   top: e.pageY - popup.height() - $(document).scrollTop() + 'px'
//                                                               display: 'block' // brings the popup back in to view
                                                               })
                                                           });

                                                       }
                                                   }).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.fadeOut(time, 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);
        });
    });
});