﻿var Overlay = (function() {
    var el = null;
    function _init(opts) {
        if (el == null) {
            var body = $(document.body);
            var defaults = {
                className: 'overlay',
                zIndex: 999,
                backgroundColor: '#c0c0c0',
                display: 'none',
                opacity: .7,
                id: 'overlay'
            };

            opts = Object.extend(defaults, opts);

            elProps = {};
            ['class', 'id'].each(function(p) {
                if (opts[p]) {
                    elProps[p] = opts[p];
                }
            });
            elStyles = {
                position: 'absolute',
                width: '100%',
                height: document.viewport.getHeight() + "px"
            };
            ['zIndex', 'backgroundColor', 'display'].each(function(p) {
                if (opts[p]) {
                    elStyles[p] = opts[p];
                }
            });

            el = new Element("div", elProps)
                        .setStyle(elStyles)
                        .setOpacity(opts.opacity);
            body.insert({ top: el });
        }
    }
    return {
        show: function() {
            _init();
            el.show();
        },
        hide: function() {
            _init();
            el.hide();
        },
        init: function(opts) {
            _init(opts);
        }
    }
})();
