/* popbox : jQuery hover popbox plugin
*
* Written by Art Dahm
* 
* v1.0 - Initial release
* v1.1 - Added 'sticky' popboxes
* v1.2 - Added 'clickable' popboxes
* v1.3 - Added callbacks, close box properties and other background image related properties
* v1.4 - Added popbox.close() function and close event
* 
*/


$(document).ready(function() {
    $('.popbox').each(function(i) {
        $.fn.popbox.build(this);
    });
});

(function($) {
    $.fn.popbox = function(popboxid, options) {
        var options = $.extend({}, $.fn.popbox.defaults, options);

        if (options.buildPopbox === true) {
            $.fn.popbox.build('#' + popboxid);
        }

        $('#' + popboxid).css({
            'background-color': options.background,
            'padding-bottom': options.padding
        });

        $('#' + popboxid + ' .popcontainer').css('width', parseInt($('#' + popboxid).css('width')) - options.padding + 'px');

        $('#' + popboxid + ' .popcontent').css({
            'background-color': options.background,
            'padding-top': options.tail + 'px',
            'padding-left': options.padding + 'px'
        });

        $('#' + popboxid + ' .poptop').css({
            'background-color': options.background,
            'right': -options.padding + 'px',
            'width': options.padding + 'px'
        });

        $('#' + popboxid + ' .poptop .popclose').css({
            'color': options.close.color,
            'border-color': options.close.color,
            'right': options.close.right + 'px',
            'top': options.close.top + 'px',
            'font-size': options.close.size + 'px'
        });

        $('#' + popboxid + ' .poptop .popclose').html(options.close.text);

        $('#' + popboxid + ' .popbottom').css({
            'background-color': options.background,
            'margin-left': options.padding + 'px',
            'height': options.padding + 'px'
        });

        $('#' + popboxid + ' .popbottom div').css({
            'background-color': options.background,
            'height': options.padding + 'px',
            'width': options.padding + 'px',
            'margin-left': -options.padding + 'px'
        });

        if (options.image != null) {
            $('#' + popboxid + ' .popcontent').css({
                'background-image': 'url(' + options.image + ')'
            });
            $('#' + popboxid + ' .poptop').css({
                'background-image': 'url(' + options.image + ')'
            });
            $('#' + popboxid + ' .popbottom').css({
                'background-image': 'url(' + options.image + ')'
            });
            $('#' + popboxid + ' .popbottom div').css({
                'background-image': 'url(' + options.image + ')'
            });
        }

        return this.each(function() {
            if (options.clickable) {
                $(this).click(function() {
                    if ($('#' + popboxid).is(':visible')) {
                        conditionalFadeOut(popboxid, options);
                    } else {
                        positionAndFadeIn(this, popboxid, options);
                    }
                });
            } else {
                $(this).hover(function() {
                    positionAndFadeIn(this, popboxid, options);
                },
                function() {
                    conditionalFadeOut(popboxid, options);
                });
            }
        });
    };

    function conditionalFadeOut(popboxid, options) {
        if (!options.sticky) {
            $('#' + popboxid).trigger('popclose');
        }
    };

    function positionAndFadeIn(popper, popboxid, options) {
        $('#' + popboxid).bind('popclose', function(e) {
            if (options.beforeClose) options.beforeClose(jPopbox);
            if (options.afterClose) {
                $('#' + popboxid).fadeOut(options.fadeOutSpeed, function() {
                    options.afterClose(jPopbox)
                });
            } else {
                $('#' + popboxid).fadeOut(options.fadeOutSpeed);
            }
        });
        var jPopper = $(popper);
        var jPopbox = $('#' + popboxid);
        var height = jPopper.innerHeight();
        var width = jPopper.innerWidth();
        var pos = jPopper.position();
        jPopbox.css({
            'left': pos.left + options.leftOffset + (width / 2) + 'px',
            'top': pos.top + height + options.topOffset + 'px'
        });
        if (options.beforeOpen) options.beforeOpen(jPopbox);
        if (options.afterOpen) {
            jPopbox.fadeIn(options.fadeInSpeed, function() {
                options.afterOpen(jPopbox)
            });
        } else {
            jPopbox.fadeIn(options.fadeInSpeed);
        }
        if (options.sticky && (options.hideClose == false)) {
            $('#' + popboxid + ' .popclose').show().click(function() {
                $('#' + popboxid).trigger('popclose');
            });
        }
    };

    $.fn.popbox.defaults = {
        sticky: false,
        clickable: false,
        fadeInSpeed: 900,
        fadeOutSpeed: 100,
        leftOffset: -110,
        topOffset: 3,
        padding: 12,
        tail: 24,
        image: null,
        background: 'transparent',
        /* Callbacks */
        beforeOpen: null,
        afterOpen: null,
        beforeClose: null,
        afterClose: null,
        /* Close box properties */
        hideClose: false,
        buildPopbox: false,
        close: {
            color: '#000',
            right: 8,
            top: 32,
            size: 12,
            text: 'X'
        }
    };

    $.fn.popbox.close = function(item) {
        $(item).each(function() {
            $(this).trigger('popclose');
        });
    };

    $.fn.popbox.build = function(pop) {
        var popcontent = $(pop).html();
        $(pop).html('<div class="popcontainer"><div class="popcontent"><div class="poptop"><div class="popclose">X</div></div>' + popcontent + '<div class="popnogap"></div></div><div class="popbottom"><div></div></div></div>');
    };

})(jQuery);