$(document).ready(function () {
    $("#press_to_toggle").click(function () {
        $("#toggle_bottom").slideToggle(1000);
    });
}
);

$(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
                popup.css({
                    top: -100,
                    left: -33,
                    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);
        });
    });
});

$(document).ready(function () {

    //Select all anchor tag with rel set to tooltip
    $('a[rel=tooltip]').mouseover(function (e) {

        //Grab the title attribute's value and assign it to a variable
        var tip = $(this).attr('title');

        //Remove the title attribute's to avoid the native tooltip from the browser
        $(this).attr('title', '');

        //Append the tooltip template and its value
        $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');

        //Show the tooltip with faceIn effect
        $('#tooltip').fadeIn('500');
        $('#tooltip').fadeTo('10', 0.9);

    }).mousemove(function (e) {

        //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
        $('#tooltip').css('top', e.pageY + 10);
        $('#tooltip').css('left', e.pageX + 20);

    }).mouseout(function () {

        //Put back the title attribute's value
        $(this).attr('title', $('.tipBody').html());

        //Remove the appended tooltip template
        $(this).children('div#tooltip').remove();

    });

});