(function () {
    "use strict";

    function Popover(cfg) {
        var _this = this;
        _this.data = cfg.data;
        _this._close = new Rx.Subject();
        var elements = Promise.all([
            fetchEl(servicePath('po.root.html')),
            createLink(servicePath('po.root.css')),
            fetchContent(templatePath(cfg.name + '.html')),
            createLink(templatePath(cfg.name + '.css')),
            createScript(templatePath(cfg.name + '.js'))
        ]);

        var containerClick = function (e) { e.stopPropagation(); };
        var rootClick = function (e) { _this.close(); }

        function setPosition(pos) {
            if (_this.container) {
                var midX = top.innerWidth / 2;
                if (pos.x > midX) {
                    pos.x -= _this.container.clientWidth;
                }
                _this.container.style.top = pos.y + 'px';
                _this.container.style.left = pos.x + 'px';
            }
        }

        function onOverlay(overlay) {
            _this.overlay = overlay;
            _this.overlay.contentWindow['popoverRef'] = _this;
            setPosition(cfg.position);
            styleOverlay(overlay);

            _this.container.addEventListener('click', containerClick);
            _this.root.addEventListener('click', rootClick);
            _this.root.addEventListener('keyup', handleKeyup);
            
        }
        function handleKeyup(event) {
            if (event.key === 'Escape') {
                _this.close();
            }
        }
        function styleOverlay(overlay) {
            overlay.style.position = 'fixed';
            overlay.style.border = 'none';
            overlay.style.width = '100vw';
            overlay.style.height = '100vh';
            overlay.style.top = '0';
            overlay.style.left = '0';
            
        }
        function createOverlay(root, rootLink, content, link, script) {
            return new Promise(function (res, rej) {
                var frame = document.createElement("iframe");
                document.body.appendChild(frame);
                setTimeout(function () {
                    frame.contentDocument.head.appendChild(rootLink);
                    _this.root = root;
                    _this.container = root.querySelector(".po-container");
                    $(_this.container).html(content);
                    frame.contentDocument.head.appendChild(link);
                    frame.contentDocument.body.appendChild(root);
                    frame.contentDocument.body.appendChild(script);

                    res(frame);
                }, 100);
            });
        }
        function createLink(url) {
            var link = document.createElement("link");
            link.href = url;
            link.rel = "stylesheet";
            link.type = "text/css";
            return Promise.resolve(link);
        }
        function createScript(url) {
            var script = document.createElement("script");
            script.src = url;
            script.type = "text/javascript";
            return Promise.resolve(script);
        }

        function templatePath(file) {
            return prependEnvironmentPath('/clientcode/popovers/' + file);
        }
        function servicePath(file) {
            return prependEnvironmentPath('/clientcode/services/popover/' + file);
        }
        function fetchContent(url) {
            return fetch(url).then(toText).catch(console.error);
        }
        function fetchEl(url) {
            return fetchContent(url).then(toEl);
        }
        function toText(r) {
            return r.text();
        }
        function toEl(t) {
            return $(t)[0];
        }
        _this.open = function () {
            elements.then(function (items) { return createOverlay(items[0], items[1], items[2], items[3], items[4]); })
                .then(onOverlay);

            
            return _this.afterClosed();
        }
        _this.close = function (data) {
            _this.dispose();
            _this._close.next(data);
            _this._close.complete();
        }
        _this.dispose = function () {
            _this.container.removeEventListener('click', containerClick);
            _this.root.removeEventListener('click', rootClick);
            _this.overlay.remove();
        }
        _this.afterClosed = function () {
            return _this._close.asObservable();
        }
    }
    window["Popover"] = Popover;
})();