function Popup(option){
    var that = this;
    this.name = option.name || 'popup'
    this.container = document.getElementById(this.name);
    this.title = document.getElementById(this.name + '-title');
    this.closer = document.getElementById(this.name + '-closer');
    this.content = document.getElementById(this.name + '-content');
    this.buttons = option.buttons || []
    this.listener = option.listener || {}
    this.map = option.map;
    this.ext = {}
    this.closer.onclick = function(){
        that._close()
    };
    this.initTitleHtml(option.title)
    this.initClick()
    this.close = option.close || function(){}
    //'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center', and 'top-right'
    this.overlay = new ol.Overlay({
        element: this.container,
        positioning: 'top-center',
    });
    map.addOverlay(this.overlay);
}

Popup.prototype = {
    initTitleHtml(title){
        let html = (title || "提示信息") + this.getButtonsHtml()
        this.title.innerHTML = html;
    },
    getButtonsHtml(){
        let html = ""
        let i = 1;
        for(let o of this.buttons){
            html += "<button id='"+this.name+"_but_"+i+"' class='button button" + i + "'>" + o.name + "</button>"
            i++
        }
        return html;
    },
    initClick(){
        let that = this
        let i = 1;
        for(let o of this.buttons){
            if(o.click){
                let but =document.getElementById(this.name+"_but_"+i);
                but.onclick = function(event) {
                    that.listener[o.click](that, event, that.ext)
                }
            }
            i++
        }
    },
    show(coordinate, html, ext){
        this.title.style.display = 'block';
        this.overlay.setPosition(coordinate);
        this.ext = ext || {}
        this.flashHtml(html)

    },
    showOrHide(status){
        this.container.style.display = status ? 'block' : 'none';
    },
    flashHtml(html){
        this.content.innerHTML = html;
        this.container.style.display = 'block';
        this.map.renderSync();
    }
    ,
    _close() {
        this.container.style.display = 'none';
        this.closer.blur();
        this.close()
        return false;
    }
}
