﻿    (function($) {
        function qsBox(setting, obj) {
            qsBox.ie6 = ($.browser.msie && $.browser.version < 7);
            qsBox.$body = $(document.body);
            qsBox.$window = $(window);


            this.defConfig = $.extend(true, {}, buildConfig(), setting);

            if (this.defConfig.masks.isShow) {
                this.initMasks();
            }
            this.obj = obj;
            this.popBox = this.initPop();
            this.popBox.Drag(".qs_pop_bar");
            this.removeBox();


            function buildConfig() {
                var defConfig = {      //默认配置
                    callBack: function() { },   //关闭后的回调函数
                    masks: {             //遮罩层css样式
                        isShow: false,    //是否显示遮罩层
                        removeClick: true,       //单击遮罩层触发remove事件
                        css: {
                            opacity: 0.5,
                            zIndex: 9998,
                            callback: function() { },
                            backgroundColor: '#000'
                        }
                    },
                    pop: {              //弹出层css样式
                        title: '',
                        type: 'rel',        //弹出层内容填充类别：text(纯文本),rel(同页面某元素),ajax(异步加载)
                        callback:function(){},//回调方法 参数在元素本身上
                        context: '#test',      //填充内容选择器
                        zIndex: 9999,
                        width: 400,
                        height: false,
                        top: false,
                        left: false
                    },
                    printfun: null      //打印函数
                }
                return defConfig;
            }

        }


        qsBox.prototype.initMasks = function() {
            var html = "<div class='qs_masks_box'></div>";
            var $masks = $(html).appendTo(qsBox.$body);

            $masks.css({    //设置样式
                diaplay: 'block',
                position: (qsBox.ie6) ? "absolute" : "fixed",
                height: qsBox.$window.height(),
                width: "100%",
                top: (qsBox.ie6) ? qsBox.$window.scrollTop() : 0,
                left: 0,
                right: 0,
                bottom: 0
            }).css(this.defConfig.masks.css);
        }

        qsBox.prototype.initPop = function() {

            var html = "<div class='qs_pop_box' style='display:none'><div class='qs_pop_bar'>" + this.defConfig.pop.title + "<span id='qs_close'>&nbsp;</span></div><div class='qs_context'></div>" + (this.defConfig.printfun != null ? "<div class='qs_print'><a href='#'> </a></div>" : "") + "</div>";
            var $pop = $(html).appendTo(qsBox.$body);
            var $bar = $(".qs_pop_bar", $pop);
            var $context = $(".qs_context", $pop);
            if (this.defConfig.printfun != null) {
                $print = $(".qs_print a", $pop);
                var printfun = this.defConfig.printfun;
                $print.unbind().bind("click", function() {
                    (printfun)($context.html());
                    return false;
                });
            }
            $context.width(this.defConfig.pop.width);
            if (this.defConfig.pop.height) {
                $context.height(this.defConfig.pop.height);
            }
            $bar.width(this.defConfig.pop.width + 5);
            $pop.css({
                position: "absolute",
                zIndex: this.defConfig.pop.zIndex
            });

            function getTopLeft() {
                return {
                    top: qsBox.$window.height() / 2 + qsBox.$window.scrollTop() - $pop.outerHeight() / 2,
                    left: qsBox.$window.width() / 2 + qsBox.$window.scrollLeft() - $pop.outerWidth() / 2
                }
            }
            var wz = getTopLeft();
            if (this.defConfig.pop.left) {
                $pop.css({ left: this.defConfig.pop.left });
            } else {
                $pop.css({ left: wz.left });
            }
            if (this.defConfig.pop.top) {
                $pop.css({ top: this.defConfig.pop.top });
            } else {
                $pop.css({ top: (wz.top > 0 ? wz.top : 0) });
            }
            $pop.show();

            this.fillContext()
            return $pop;
        }

        qsBox.prototype.fillContext = function() {
            container = $(".qs_context", this.popBox);
            var context = this.defConfig.pop.context;
            switch (this.defConfig.pop.type.toLowerCase()) {
                case "text":
                    container.append(context);
                    break;
                case "rel":
                    container.append($(context));
                    break;
                case "ajax":
                    $.ajax({
                        type: 'GET',
                        url: context,
                        contentType: "application/x-www-form-urlencoded; charset=utf8",
                        success: function(msg) {
                            container.append(msg);
                        }
                    });
                    break;
                case "href":
                    $.ajax({
                        type: 'GET',
                        contentType: "application/x-www-form-urlencoded; charset=utf8",
                        url: this.obj.attr("href"),
                        success: function(msg) {
                            container.append(msg);
                        }
                    });
                    break;
                case "callback":                                      
                    container.append(this.defConfig.pop.callback(this.obj[0]));
                    break;
            }
        }

        qsBox.prototype.removeBox = function() {
            var me = this;
            var container = this.popBox;
            $("#qs_close,.qs_close").click(function() {
                if (me.defConfig.pop.type.toLowerCase() == "rel") {
                    //还原目标
                    $(me.defConfig.pop.context).appendTo(qsBox.$body);
                }
                if (qsBox.ie6) {
                    //清除滚动条事件
                    qsBox.$window.unbind('scroll');
                }
                //清空context
                container.remove();
                //清空遮罩层
                $(".qs_masks_box").remove();
                //调用回调函数
                me.defConfig.callBack();

            });
        }

        qsBox.prototype.reSize = function() {
            var $context = $(".qs_context", this.popBox);
            this.popBox.width($context.outerWidth()).height($context.outerHeight());
        }

        $.fn.qsBox = function(setting, eventName) {
            var bindEventName = eventName == null ? "click" : eventName;      //绑定触发事件
            this.each(function() {
                $(this).bind(bindEventName, function() {
                    $(window).unbind("scroll");
                    $(".qs_masks_box").remove();
                    $(".qs_pop_box").remove();
                    new qsBox(setting, $(this));
                    return false;
                });
            });
        }


        $.fn.Drag = function(h) {       //h:可拖动的元素
            this.each(function() {
                var $h = $(h, this);
                $h.bind("mousedown", function(e) {
                    if (!e) e = window.event;
                    var posX = e.clientX - parseInt($(this).parent().css('left'));
                    var posY = e.clientY - parseInt($(this).parent().css('top'));
                    $(document).bind("mousemove", { x: posX, y: posY }, function(e) {
                        var pos = e.data;
                        if (!e) e = window.event;
                        $h.parent().css('top', e.clientY - pos.y).css('left', e.clientX - pos.x);
                    });
                    $(this).bind("mouseup", function() {
                        $(document).unbind("mousemove");
                    });
                });
            });
        }
    })(jQuery);
