bb.Lighterbox = Class.create({
    initialize: function (args) {
//        console.log(args);
        var self = this;
        // make sure we have the prerequestite background
        this.backgroundNode = $('lighterwindow_background');
        if (!this.backgroundNode) {
            this.backgroundNode = new Element('div', {"class":"lighterwindow_background"});
            this.backgroundNode.setStyle({display: "none"});
            $(document.body).insert(this.backgroundNode);
        }
        this.setPageContainerNode($(document.body));
        if (args) {
            if (args.foregroundNode) {
                this.setForegroundNode(args.foregroundNode);
            }
            if (args.openButtonNode) {
                this.setOpenButtonNode(args.openButtonNode);
            }
            if (args.closeButtonNode) {
                this.setCloseButtonNode(args.closeButtonNode);
            }
            if (args.pageContainerNode) {
                this.setPageContainerNode(args.pageContainerNode);
//                console.log(this.pageContainerNode);
            }
        }
    },
    setOpenButtonNode: function (ele) {
        var self = this;
        if (Object.isElement(ele)) {
            this.openButtonNode = ele;
            this.openButtonNode.observe( 'click', function(evt) {
                self.show();
                evt.preventDefault();
            });
        }
    },
    setCloseButtonNode: function (ele) {
        var self = this;
        if (Object.isElement(ele)) {
            this.closeButtonNode = ele;
            this.closeButtonNode.observe( 'click', function(evt) {
                self.hide();
                evt.preventDefault();
            });
        }
    },
    setForegroundNode: function(ele) {
        if (Object.isElement(ele)) {
            this.foregroundNode = ele;
        }
    },
    setPageContainerNode: function(ele) {
        if (Object.isElement(ele)) {
            this.pageContainerNode = ele;
        }
    },
    show: function () {
        var self = this;
        this.fitBackgroundToPage();
        this.backgroundNode.show();
        this.centerForegroundFn = function() {
            self.centerForeground();
        };
        Event.observe( window, 'resize', self.centerForegroundFn );
        Event.observe( window, 'scroll', self.centerForegroundFn );
        this.foregroundNode.show();
        this.centerForeground();
    },
    hide: function () {
        this.foregroundNode.hide();
        this.backgroundNode.hide();
    },
    centerForeground : function() {
        var self = this;
        if (this.foregroundNode) {
            var contentDimensions = this.foregroundNode.getDimensions();
            this.foregroundNode.style.position = "absolute";
            var windowScrollOffsets = document.viewport.getScrollOffsets();
            var windowDimensions = document.viewport.getDimensions();
            var yPosition;
            if (windowDimensions.height < contentDimensions.height) {
                yPosition = 0;
                Event.stopObserving( window, 'scroll', self.centerForegroundFn );
            } else {
                yPosition = (windowDimensions.height/2) - (contentDimensions.height/2) + (windowScrollOffsets.top);
            }
            this.foregroundNode.style.top = yPosition + "px";
            var xPosition = (windowDimensions.width/2) - (contentDimensions.width/2) + (windowScrollOffsets.left);
            this.foregroundNode.style.left = xPosition + "px";
        }
    },
    fitBackgroundToPage : function() {
        if (this.backgroundNode && this.pageContainerNode) {
            var docsize = this.pageContainerNode.getDimensions();
            this.backgroundNode.setStyle({
                height: docsize.height+'px',
                width: docsize.width+'px'
            });
        }
    }
});

/**
 * @class This singleton class is a wrapper for a pop-over module.
 * It supports one visible window at a time.
 */
bb.overlay = function() {
    var win = null;
    var containerNode = null;
    var isVisible = false;
    var options = {};
    return {
        /**
         * This function displays a pop-over window. If a pop-over is already showing, the
         * launch() function will do nothing.
         * @param {Object} args.cssStyle Hash of CSS style definitions for the window.
         * Uses JS notation (i.e., "marginLeft").
         * @param {string|Node} args.content HTML, node, or text that will display in the window.
         */
        launch : function(args) {
            var self = this;
            if (!isVisible) {

                if (!containerNode) {
                    containerNode = new Element('div', {id: "overlay-container", style:"display:none"});
                    $(document.body).insert(containerNode);
                }
                if (win === null) {
                    win = new bb.Lighterbox({
                        pageContainerNode : $$('.page_wrapper')[0]
                    });
                }
                Object.extend(options, args || {});
                containerNode.setStyle(options.cssStyle);
                while (containerNode.childNodes[0]) {
                    containerNode.removeChild(containerNode.childNodes[0]);
                }
                containerNode.appendChild(options.content);
                win.setForegroundNode(containerNode);
                if (options.closeButtonNode && Object.isElement(options.closeButtonNode)) {
                    options.closeButtonNode.observe( 'click', function(evt) {
                        self.hide();
                        evt.preventDefault();
                    });
                }
                win.show();
                isVisible = true;
            }
        },
        /**
         * This function "closes" the pop-over window. It completely removes
         * the contents of the window from the DOM.
         */
        hide: function() {
            if (win !== null) {
                win.hide();
                isVisible = false;
                 var menus = $$('select.overlay-hidden');
                 menus.each(function(slct) {
                     slct.removeClassName("overlay-hidden");
                 });                
            }
        }
    };
}();

/**
 * This function launches an overlay with the passed Element as its content.
 * @see bb.overlay
 */
bb.overlay.launchPopover = function(/* Element */ popoverContentElement, /* Array */ headlineSelectors, /* Hash */ cssStyle) {
    if (Object.isElement(popoverContentElement)) {
        var menus = $$('select');
        menus.each(function(slct) {
            if (!(slct.style.display === 'none' || slct.style.display === 'hidden')) {
                slct.addClassName("overlay-hidden");
            }
        });
        popoverContentElement.style.display = "block";
        var overlayArgs = {
            content : popoverContentElement
        };
        if (cssStyle) {
            overlayArgs.cssStyle = cssStyle;
        }
        bb.overlay.launch(overlayArgs);
        // un-hide the popover's select menus in case they were hidden above
        // TODO: improve this
        var  menus = popoverContentElement.select('select.overlay-hidden');
        menus.each(function(slct) {
            slct.removeClassName("overlay-hidden");
        });
//        bb.sIFR.replaceAll();
        bb.page.replaceSelects();
    }
    
    if (headlineSelectors) {
        headlineSelectors.each( function(slctr) {
            popoverContentElement.select(slctr).each( function(ele) {
                ele.addClassName("replace");
            });            
        });
        bb.sIFR.replaceAll();
    }

};