// class MsPopup {
//     constructor(el,option={}) {
//         option = Object.assign({
//             maskClick:true
//         },option)
//         this.el = document.querySelector(el);
//         this.option = option;
//         this.status = 'hide';
//         this.width = this.el.offsetWidth;
//         this.height = this.el.offsetHeight;
//         this.windowW = document.documentElement.clientWidth;
//         this.windowH = document.documentElement.clientHeight;
//         this.el.classList.add('ms-popup');
//         this.el.classList.add('ms-popup-init')
//         var self = this;
//         this.createMask();
//         this.initLayout(true);
//         window.addEventListener('resize',function () {
//             self.windowW = document.documentElement.clientWidth;
//             self.windowH = document.documentElement.clientHeight;
//             if(self.status === 'hide'){
//                 self.initLayout(true);
//             }else {
//                 self.initLayout();
//             }
//
//
//         })
//     }
//     createMask() {
//         let self = this;
//         self.mask = document.createElement('div')
//         self.mask.classList.add('ms-pop-mask')
//         if(this.option.maskClick){
//             self.mask.addEventListener('click',function () {
//                 self.close()
//             })
//         }
//         document.body.appendChild(this.mask)
//     }
//     initLayout(reset=false) {
//         var left = (this.windowW - this.width)/2 > 0 ? (this.windowW - this.width)/2 : 0;
//         var top = (this.windowH - this.height)/2 > 0 ? (this.windowH - this.height)/2 : 0;
//         this.el.style.left = left + 'px';
//         if(!reset){
//             this.el.style.top = top + 'px';
//         }else {
//             var h = top-100>0? top-100 : 0
//             this.el.style.top = h + 'px'
//         }
//     }
//     show() {
//         this.status = 'show';
//         this.mask.classList.add('ms-pop-mask-show')
//         this.el.classList.remove('ms-popup-init')
//         this.initLayout();
//     }
//     close() {
//         this.status = 'hide';
//         this.mask.classList.remove('ms-pop-mask-show');
//         this.el.classList.add('ms-popup-init')
//         this.initLayout(true)
//     }
// }
// function MsPopup(el,option) {
//     option = typeof option == 'object'? option : {};
//     option.maskClick = option.maskClick === undefined ? true : option.maskClick;
//     this.el = document.querySelector(el);
//     this.el.classList.remove('ms-hide')
//     this.el.classList.add('ms-popup');
//     this.el.classList.add('ms-popup-init');
//     this.option = option;
//     this.status = 'hide';
//     this.width = this.el.offsetWidth;
//     this.height = this.el.offsetHeight;
//     this.windowW = document.documentElement.clientWidth;
//     this.windowH = document.documentElement.clientHeight;
//     var self = this;
//     if(this.width<200){
//         this.el.style.width = '300px'
//         this.width = 300
//     }
//     if(this.height<100) {
//         this.el.style.height = '200px'
//         this.height = 200
//     }
//     this.createMask();
//     this.initLayout(true);
//     window.addEventListener('resize',function () {
//         self.windowW = document.documentElement.clientWidth;
//         self.windowH = document.documentElement.clientHeight;
//         if(self.status === 'hide'){
//             self.initLayout(true);
//         }else {
//             self.initLayout();
//         }
//
//
//     });
//     return this
// }
// MsPopup.prototype.createMask = function() {
//     var self = this;
//     self.mask = document.createElement('div');
//     self.mask.classList.add('ms-pop-mask');
//     if(this.option.maskClick){
//         self.mask.addEventListener('click',function () {
//             self.close()
//         })
//     }
//     document.body.appendChild(this.mask)
// }
// MsPopup.prototype.initLayout = function (reset) {
//     reset = reset === undefined ? false : reset
//     var left = (this.windowW - this.width)/2 > 0 ? (this.windowW - this.width)/2 : 0;
//     var top = (this.windowH - this.height)/2 > 0 ? (this.windowH - this.height)/2 : 0;
//     this.el.style.left = left + 'px';
//     if(!reset){
//         this.el.style.top = top + 'px';
//     }else {
//         var h = top-100>0? top-100 : 0
//         this.el.style.top = h + 'px'
//     }
// }
// MsPopup.prototype.show = function () {
//     this.status = 'show';
//     this.mask.classList.add('ms-pop-mask-show')
//     this.el.classList.remove('ms-popup-init')
//     this.initLayout();
// }
// MsPopup.prototype.close = function () {
//     this.status = 'hide';
//     this.mask.classList.remove('ms-pop-mask-show');
//     this.el.classList.add('ms-popup-init')
//     this.initLayout(true)
// }
// 兼容ie classList函数
if (!("classList" in document.documentElement)) {
    Object.defineProperty(HTMLElement.prototype, 'classList', {
        get: function() {
            var self = this;
            function update(fn) {
                return function(value) {
                    var classes = self.className.split(/\s+/g),
                        index = classes.indexOf(value);

                    fn(classes, index, value);
                    self.className = classes.join(" ");
                }
            }

            return {
                add: update(function(classes, index, value) {
                    if (!~index) classes.push(value);
                }),

                remove: update(function(classes, index) {
                    if (~index) classes.splice(index, 1);
                }),

                toggle: update(function(classes, index, value) {
                    if (~index)
                        classes.splice(index, 1);
                    else
                        classes.push(value);
                }),

                contains: function(value) {
                    return !!~self.className.split(/\s+/g).indexOf(value);
                },

                item: function(i) {
                    return self.className.split(/\s+/g)[i] || null;
                }
            };
        }
    });
}

var MsPlugin = (function () {
    function msPopup(el,option) {
        option = typeof option == 'object' ? option : {};
        option.maskClick = option.maskClick === 'undefined' || typeof option.maskClick != 'boolean' ? true : option.maskClick;
        option.animate = option.animate === 'undefined' || typeof option.animate != 'boolean' ? true : option.animate;
        this.option = option;
        this.el = document.querySelector(el);
        window.jarming_el = this.el
        this.el.classList.add('ms-popup')
        var fragment = document.createDocumentFragment();
        fragment.appendChild(this.el);
        this.wrap = this.createWrap();
        this.wrap.appendChild(fragment)
        this.mask = this.createMask()
        this.wrap.appendChild(this.mask)
        addNodeToBody(this.wrap)
        option.animate && this.initLayout()
    }
    function createDom(dom) {
        return document.createElement(dom)
    }
    function addNodeToBody(dom) {
        // if(document.documentElement){
        //     document.documentElement.appendChild(dom)
        // }else{
        //     document.body.appendChild(dom)
        // }

        // 节点生成在body外ie不支持,导致输入框芭比Q了 
        document.body.appendChild(dom)
    }
    msPopup.prototype.createWrap = function() {
        var wrap = createDom('div');
        wrap.classList.add('ms-popup-wrap')
        wrap.classList.add('ms-hide')
        return wrap
    }
    msPopup.prototype.createMask = function() {
        var self = this
        var mask = createDom('div');
        mask.classList.add('ms-popup-mask');
        mask.classList.add('ms-opacity');
        if(this.option.maskClick) {
            // mask.addEventListener('click',function(){
            //     jrs.clearTimeoutPool(); // 初始化时清除定时器池
            //     self.close()
            // })
        }
        return mask
    }

    msPopup.prototype.initLayout = function() {
        this.el.style.top = '-20px'
    }
    msPopup.prototype.show = function() {
        this.wrap.classList.remove('ms-hide')
        var self = this
        setTimeout(function(){self.el.style.top = '';self.mask.classList.remove('ms-opacity')})

    }
    msPopup.prototype.close = function() {
        this.mask.classList.add('ms-opacity')
        this.wrap.classList.add('ms-hide')
        this.option.animate && this.initLayout()
    }
    return {
        msPopup:msPopup
    }
})()