/*
 * Overlay Box (1.0)
 * by Chad Shryock
 */

(function(jQuery) {

    var self = null;

    jQuery.fn.obox = function(o) {
        return this.each(function() {
            new jQuery.obox(this, o);
        });
    };

    /**
     * The inputAutogrow object.
     *
     * @constructor
     * @name jQuery.obox
     * @param Object e The item to trigger the showing of the box.
     * @param Hash o A set of key/value pairs to set as configuration properties.
     * @cat Plugins/Overlay
     */

    jQuery.obox = function (e, o) {

        this.options		= o || {};

        this.loadingImage       = 'http://media3.washingtonpost.com/wpost/images/loading.gif';
        this.closeImage         = 'http://media3.washingtonpost.com/wpost/images/icons/icon-close.png';
        this.closeImageOver     = 'http://media3.washingtonpost.com/wpost/images/icons/icon-close-over.png';

        this.windowId           = this.options.windowId;
        this.windowTitle        = this.options.windowTitle;

        this.draggable          = this.options.draggable || false;
        this.show_title_bar     = this.options.showTitleBar || false;
        this.show_background    = false;
        this.background_overlay_opacity = this.options.backgroundOverlayOpacity || '';

        this.beforeRevealCallback = this.options.beforeRevealCallback;
        this.beforeCloseClearCallback = this.options.beforeCloseClearCallback;

        this.backgroundOverlayHtml = '<div id="' + this.options.windowId + '-overlay" class="obox-overlay" style="display:none;">&nbsp;</div>';

        this.boxHtml = '\
                <div id="' + this.options.windowId + '" class="obox" style="display:none;">\
                    <div class="popup"></div>\
                    <div class="container">\
                        <div class="titleBar" style="display:none"><div class="window-actions position-right"><div class="close">&nbsp;<a href="#" rel="close"><img src="' + this.closeImage + '" height="15" width="15" alt="Close" /></a></div></div><span>' + this.options.windowTitle + '</span></div>\
                        <div class="content" style="display:none;"></div>\
                        <div class="loading"><img src="' + this.loadingImage + '"/></div>\
                    </div>\
                </div>';

        this.trigr          = jQuery(e);
        this.windr          = null;

        this.rtrn           = null;
        this.bindr          = this.options.bindTo || document;

        this.init();
    };

    jQuery.obox.fn = jQuery.obox.prototype = {
        obox: '1.0'
    };

    jQuery.obox.fn.extend = jQuery.obox.extend = jQuery.extend;

    jQuery.obox.fn.extend({

        init: function() {
            var self = this;

            if (this.background_overlay_opacity != '') {
                this.show_background = true;
                this.overlay = jQuery(this.backgroundOverlayHtml).appendTo("body");
                this.overlay.css('opacity',this.background_overlay_opacity);
                this.overlay.css('position','fixed');
                if (jQuery.browser.msie && jQuery.browser.version=="6.0") {
                    this.overlay.css('position','absolute');
                    this.overlay.css('top','0px');
                    this.overlay.css('left','0px');
                }
                this.overlay.css('height','100%');
                this.overlay.css('width', '100%');
                this.overlay.css('z-index', '1999998');
            }


            this.windr = jQuery(this.boxHtml).appendTo("body");

            if (this.show_background) {
                this.windr.css('z-index', '1999999');
            }

            // enable title bar if needed
            if (this.show_title_bar) {
                jQuery("div.titleBar", this.windr).show();
            }

            // enable draggable if needed
            if (this.draggable) {
                var opts = {
                    cursor : 'move',
                    stack : {
                        group : '.obox',
                        min : 50
                    }
                };
                if (this.show_title_bar) {
                    opts.handle = 'div.titleBar';
                }
                this.windr.draggable(opts);
            }

            // close
            jQuery("div.titleBar div.close a[rel='close']", this.windr).bind('click', function() {
                jQuery(self.bindr).unbind('close_' + self.windowId + '.obox');
                self.close();
                return false;
            });

            // preload images
            var preload = [ new Image(), new Image(), new Image() ];
            preload[0].src = this.loadingImage;
            preload[1].src = this.closeImage;
            preload[2].src = this.closeImageOver;

            jQuery("div.titleBar div.window-actions a[rel='close'] img", this.windr).hover(function() {
                // over
                jQuery(this).attr("src", preload[2].src);
            }, function() {
                // out
                jQuery(this).attr("src", preload[1].src);
            });

            this.trigr.bind('click', function() {
                self.open();
                return false;
            });

            // setup data to return with the triggering of events
            this.rtrn = [ new Object(), new Object() ];
            this.rtrn[0] = this.windr;
            this.rtrn[1] = this.trigr;

            jQuery(this.bindr).trigger('init.obox', this.rtrn);
        },

        open : function() {
            jQuery(this.bindr).trigger('beforeOpen.obox', this.rtrn);

            var self = this;

            // bind closing trigger
            // bind an event to the trigr to request close, so the client doesn't have to search for the object'
            jQuery(this.bindr).bind('close_' + self.windowId + '.obox', function() {
                jQuery(self.bindr).unbind('close_' + self.windowId + '.obox');
                self.close();
            });

            this.windr.css({
                top:	getPageScroll()[1] + (getPageHeight() / 5)
            });

            this.windr.fadeIn("slow");
            this.windr.css('left', (jQuery(window).width() / 2) - (this.windr.width() / 2));

            this.data = fillFromHref(this.trigr.attr("href"));

            jQuery(this.bindr).trigger('open.obox', this.rtrn);
            this.reveal();
        },

        reveal : function() {
            jQuery("div.content", this.windr).append(this.data);

            jQuery(this.bindr).trigger('beforeReveal.obox', this.rtrn);

            if (this.show_background) {
                this.overlay.show();
            }

            if (this.beforeRevealCallback) {
                this.beforeRevealCallback(this.trigr, this.windr);
            }

            jQuery("div.loading", this.windr).fadeOut("normal", function() {
                jQuery("div.content", this.windr).fadeIn("normal");
            });
            jQuery(this.bindr).trigger('reveal.obox', this.rtrn);
        },

        close : function() {
            jQuery(this.bindr).trigger('beforeClose.obox', this.rtrn);
            var self = this;
            if (this.show_background) {
                this.overlay.hide();
            }
            this.windr.fadeOut("normal", function() {
                if (self.beforeCloseClearCallback != undefined) {
                    self.beforeCloseClearCallback(this.trigr, this.windr);
                }
                jQuery("div.content", self.windr).empty();
                jQuery("div.loading", self.windr).show();
                jQuery("div.content", self.windr).hide();
            });
            jQuery(this.bindr).trigger('close.obox', this.rtrn);
        }

    });

    // getPageScroll() by quirksmode.com
    function getPageScroll() {
        var xScroll, yScroll;
        if (this.pageYOffset) {
            yScroll = this.pageYOffset;
            xScroll = this.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
            yScroll = document.documentElement.scrollTop;
            xScroll = document.documentElement.scrollLeft;
        } else if (document.body) {// all other Explorers
            yScroll = document.body.scrollTop;
            xScroll = document.body.scrollLeft;
        }
        return new Array(xScroll,yScroll);
    }

    // Adapted from getPageSize() by quirksmode.com
    function getPageHeight() {
        var windowHeight
        if (this.innerHeight) {	// all except Explorer
            windowHeight = this.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body) { // other Explorers
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }

    // Figures out what you want to display and displays it
    // formats are:
    //      div: #id
    function fillFromHref(href) {
        // div
        if (href.match(/#/)) {
            var url    = window.location.href.split('#')[0];
            var target = href.replace(url,'');
            return jQuery(target).clone().show().html();
        }
        return "";
    }
})(jQuery);