/**
 * jQuery Popup Layer Plugin
 * https://github.com/edwardnevermind/jquery.popuplayer.js
 *
 * @author Edward
 * MIT licensed
 */

;(function($) {

    var PopupLayer = function(elem, opt) {
        this.$elem = $(elem);
        this.$mask = $("<div class='popup-layer'></div>");
        this.$content = $("<div class='popup-layer-content p-3'></div>");
        this.$blurAreas = $("body > *");

        this.defaults = {
           content: "", // 内容可以传入，纯文本和类名
           target: "body", // 把弹出层添加到的目标节点
           to: "top",   // 向哪个方向展开
           screenRatio: 0.3, // 占屏幕百分比
           heightOrWidth: 300, // 当且仅当screenRatio为0时生效
           blur: false, // 是否开启毛玻璃效果
           speed: 200,  // 动画速度
           color: "#000", // 文本颜色
           backgroundColor: "#fff", // 背景颜色
           contentToggle: false, // 点击content是否关闭弹出层
           closeBtn: null,  // 指定关闭按钮
           openCallback: null, // 展开的回调
           closeCallback: null // 关闭的回调
        };

        // 合并默认参数和自定义参数
        this.options = $.extend({}, this.defaults, opt);
    };
 
    PopupLayer.prototype = {
        init: function() {
            this.attachElems();
            this.updateContent();
            this.bindEvents();
        },
        updateContent: function() {
            this.$content.html($(this.options.content));

            var that = this;
            $(function() {
                that.$content.children().show();
            });

            var content_position = {
                top: 63,
                right: 38,
                bottom: 0,
                left: 38
            }

            content_position[this.options.to] = "100%";

            this.$content.css({
                'top': content_position.top,
                'right': content_position.right,
                'bottom': content_position.bottom,
                'left': content_position.left,
                'color': this.options.color,
                'background-color': this.options.backgroundColor,
                'transition': 'all ' + (this.options.speed / 1000) + 's'
            });
            
        },
        attachElems: function() {
            this.$content.appendTo(this.$mask);
            this.$mask.appendTo($(this.options.target));
        },
        open: function() {
            this.$mask.fadeIn(this.options.speed);

            // 如果screenRatio为0那么根据屏幕宽高计算占比
            if (this.options.screenRatio != 0) {
                this.$content.css({
                    [this.options.to]: (1 - this.options.screenRatio) * 100 + "%"
                });
            } else {
                var ratio = 0;

                if (this.options.to == "left" || this.options.to == "right"){
                    ratio = this.options.heightOrWidth / $(window).outerWidth();
                    
                } else {
                    ratio = this.options.heightOrWidth / $(window).outerHeight();
                }
                this.$content.css({
                    [this.options.to]: (1 - ratio) * 100 + "%"
                });
            }
            

            if (this.options.blur) {
                this.$blurAreas.addClass('popup-layer-blur');
            }

            if (this.options.openCallback) {
                this.options.openCallback();
            }
        },
        close: function() {
            this.$mask.fadeOut(this.options.speed);
            this.$content.css({
                [this.options.to]: "100%"
            })

            if (this.options.blur) {
                this.$blurAreas.removeClass('popup-layer-blur');
            }

            if (this.options.closeCallback) {
                this.options.closeCallback();
            }
        },
        bindEvents: function() {
            var that = this;
            this.$elem.click(function() {
                that.open();
            });

            // 阻止点击content时冒泡到上层
            if (!this.options.contentToggle) {
                this.$content.click(function(event) {
                    event.stopPropagation();
                });
            }

            this.$mask.click(function() {
                that.close();
            });

            if (this.options.closeBtn) {
                $(this.options.closeBtn).click(function() {
                    that.close();
                })
            }
        }
    };

    $.fn.PopupLayer = function(options) {
        return this.each(function() {
            new PopupLayer(this, options).init();
        });
    };

})(jQuery);