/**
 * A special type of ContentOverlay that automatically adds a
 * close button to its UI and automatically fades out the page.
 * @constructor
 * @class ModalOverlay
 */
var ModalOverlay = new JS.Class(Ojay.ContentOverlay, {
    /**
     * @param {Object} options
     */
    initialize: function(options) {
        this._mask = new Ojay.PageMask(options);
        delete options.opacity;
        this.callSuper();
    },
    
    /**
     * @returns {DomCollection}
     */
    getHTML: function() {
        var container = this.callSuper();
        if (this._closeButton) return container;
        this._closeButton = Ojay( Ojay.HTML.div({className: 'close-button'}, 'Close X') );
        container.insert(this._closeButton, 'bottom');
        this._closeButton.on('click')._(this).hide('fade');
        return container;
    },
    
    /**
     * @returns {ModalOverlay}
     */
    setLayer: function() {
        this.callSuper();
        this._mask.positionBehind(this);
        return this;
    },
    
    states: {
        INVISIBLE: {
            /**
             * @param {String} effect
             * @returns {ModalOverlay|MethodChain}
             */
            show: function(effect) {
                this._mask.show(effect || 'fade');
                return this.callSuper();
            }
        },
        
        VISIBLE: {
            /**
             * @param {String} effect
             * @returns {ModalOverlay|MethodChain}
             */
            hide: function(effect) {
                this._mask.hide(effect || 'fade');
                return this.callSuper();
            }
        }
    }
});