/**
 * Display a PopUp based on a given ID and popping in a given direction.
 *
 * @param elementid     HTML ID of the element next to which the PopUp should appear.
 *                      An additional #popup-[elementid] element should exist with the
 *                      content to display in the popup.
 * @param direction     'top', 'right', 'bottom', or 'left' to display the popup on 'direction' of 'elementid'
 */
function BuddyPopUp(elementid, direction) {
    // public attributes
    distance = 10;
    time = 40;
    hideDelay = 0;
    hideDelayTimer = null;

    // private attributes
    var beingShown = false;
    var shown = false;
    var newelementid = "popup-" + elementid;

    direction = direction.toLowerCase();

    // create a new div element and make it into a jquery object
    //var popup = $( jQuery.create("article",{"id": newelementid,"class": "popup"}) );
    var popup = $('#' + newelementid);
    popup.css('display', 'none');

    var triggerEl = $('#' + elementid);
    if (triggerEl == null) {
        //alert("Popup requested on element '#" + elementid + "', which does not exist.");
        return;
    }


    $([triggerEl.get(0),popup.get(0)]).mouseover(function () {
        if (hideDelayTimer) clearTimeout(hideDelayTimer);
        if (beingShown || shown) {
            // don't trigger the animation again
            return;
        } else {
            // reset position of info box
            beingShown = true;
            var leftmove = (triggerEl.outerWidth()-popup.outerWidth())/2;
            // set general CSS attributes
            popup.css( {
                margin: '0 auto',
                position: 'absolute',
                overflow: 'hidden',
                display: 'block'
            });
            // set position CSS attributes
            switch (direction) {
                case 'top':
                    popup.css({
                        top: triggerEl.offset().top - popup.outerHeight() - distance*2,
                        left: triggerEl.offset().left + leftmove,
                    }).animate({
                        top: '-=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });

                    // start animation
                    popup;
                    break;

                case 'bottom':
                    popup.css({
                        top: triggerEl.offset().top + triggerEl.outerHeight() + distance*2,
                        left: triggerEl.offset().left + leftmove,
                    }).animate({
                        top: '+=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                    break;

                case 'right':
                    popup.css({
                        top: triggerEl.offset().top,
                        left: triggerEl.offset().left + triggerEl.outerWidth() + distance*2,
                    }).animate({
                        left: '-=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                    break;

                case 'left':
                    popup.css({
                        top: triggerEl.offset().top,
                        left: triggerEl.offset().left - popup.outerWidth() - distance*2,
                    }).animate({
                        left: '+=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                    break;

                default:
                    alert("BuddyPopUp: invalid value passed for direction: '" + direction + "'.");
                    beingShown = false;
                    return;
            }
        }

        return false;
    }).mouseout(function () {
        if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
            hideDelayTimer = null;
            switch (direction) {
                case 'top':
                    popup.animate({
                        top: '+=' + distance + 'px',
                        display: "none"
                    }, time, 'swing', function () {
                        shown = false;
                        popup.css('display', 'none');
                    });
                    break;

                case 'bottom':
                    popup.animate({
                        top: '-=' + distance + 'px',
                        display: "none"
                    }, time, 'swing', function () {
                        shown = false;
                        popup.css('display', 'none');
                    });
                    break;

                case 'right':
                    popup.animate({
                        left: '+=' + distance + 'px',
                        display: "none"
                    }, time, 'swing', function () {
                        shown = false;
                        popup.css('display', 'none');
                    });
                    break;

                case 'left':
                    popup.animate({
                        left: '-=' + distance + 'px',
                        display: "none"
                    }, time, 'swing', function () {
                        shown = false;
                        popup.css('display', 'none');
                    });
                    break;

                default:
                    break;
            }
        }, hideDelay);

        return false;
    });
}