!(function () {
    var def = {
        angle: 60, // 线条角度
        selector: "",
        container: "",
        position: "bottom right",
        skew: [2, 0], // 容器 x, y轴的偏移量 倍数关系 x: 默认偏移容器宽度的一半 即width / 2, y: 默认不偏移 在selector的顶部或者底部
        lineYSkew: 10, // 线条y轴偏移量 
        type: "" // 插件类型
    };

    function clsPicker(opts) {
        if (!opts.selector) return;

        this.pos = opts.position;
        this.opts = $.extend({}, def, opts);

        opts = this.opts;

        opts.skew = opts.skew || [2, 1];
        opts.skew[0] = opts.skew[0] || 2;
        opts.skew[1] = opts.skew[1] || 0;

        this.$el = $("<section class='clspicker'></section>");
        this.canvas = document.createElement("canvas");

        this.$el.append(this.canvas);

        var $selector = $(opts.selector);
        var isvisible = $selector.css("display") !== "none" && ($selector.height() || $selector.width());

        if ( !isvisible ) return;

        this.$selector = $(opts.selector);
        this.$container = $(opts.container || opts.selector);

        this.canvas.height = opts.height || 200;

        this.fabric = new fabric.Canvas(this.canvas, { selection: false });

        this.$container.append(this.$el).css("position", "relative");

        this.textbox = clsBox(opts.selector, opts.text);

        this.$el.append(this.textbox);
        this.render();
    }

    clsPicker.golalSetting = function (settings) {
        $.extend(def, settings);
    };

    clsPicker.prototype = {
        render: function () {
            var that = this;

            this.setPos();
            this.position();
            
            setTimeout(function () { // 避免容器长度不准
                that.renderTextbox(that.makeLine());
            });
        },
        setPos: function () {
            var position = this.pos;

            if (position) return (this.pos = position.split(" "));

            var $container = this.$container,
                $selector = this.$selector;
            var soffset = $selector.offset(),
                coffset = $container.offset();
            var skew = this.opts.skew;

            position = this.opts.position.split(" ");

            if ($container.height() / 2 > (soffset.top + $selector.height() / 2 - coffset.top)) {
                position[0] = "top";
            }

            if ($container.width() / 2 < (soffset.left + $selector.width() / skew[0] - coffset.left)) {
                position[1] = "left";
            }

            return (this.pos = position);
        },
        position: function () {
            var position = this.pos;
            var $el = this.$el,
                $selector = this.$selector,
                $container = this.$container;
            var soffset = $selector.offset(),
                coffset = $container.offset();
            var skew = this.opts.skew;
            var pos = {
                left: "inherit",
                right: "inherit",
                top: "inherit",
                bottom: "inherit"
            };

            var yskew = skew[1] && $selector.height() / skew[1];
            if (position[0] == "bottom") {
                pos.top = soffset.top - coffset.top + $selector.height() - yskew;
            } else {
                pos.bottom = $container.height() - soffset.top + coffset.top - yskew;
            }

            if (position[1] == "right") {
                pos.left = soffset.left + $selector.width() / skew[0];
            } else {
                pos.right = $container.width() - soffset.left - $selector.width() / skew[0];
            }

            this.$el.css(pos);
            return this;
        },
        renderTextbox: function (endpoint) {
            var INHERIT = "inherit";
            var position = this.pos,
                pos = {
                    top: INHERIT,
                    right: INHERIT,
                    bottom: INHERIT,
                    left: INHERIT
                };
            var $textbox = $(this.textbox);


            if (position[0] == "bottom") {
                pos.top = endpoint[1] - $textbox.height() / 2;
            } else {
                pos.bottom = this.$el.height() - endpoint[1] - $textbox.height() / 2;
            }

            if (position[1] == "right") {
                pos.left = endpoint[0];
            } else {
                pos.right = this.$el.width() - endpoint[0];
            }

            $textbox.css(pos);
        },
        makeLine: function () {
            var position = this.pos;
            var radian = this.opts.angle * Math.PI / 180;
            var $el = this.$el,
                $selector = this.$selector,
                $container = this.$container;
            var soffset = $selector.offset(),
                coffset = $container.offset();
            var lineYSkew = this.opts.lineYSkew,
                point1 = [], point2 = [];
            var x1, y1, x2, y, yskew;
            var isbottom = position[0] == "bottom";

            if (isbottom) {
                point1 = [0, 0];
                y1 = coffset.top + $container.height() - soffset.top - $selector.height() + lineYSkew;
            } else { // "top"
                point1 = [0, $el.height()];
                y = soffset.top - coffset.top + lineYSkew;
                y1 = $el.height() - y;
            }

            yskew = isbottom ? y1 : y;

            if (position[1] == "right") {
                x1 = parseInt(yskew / Math.tan(radian)) + 0.5;
                x2 = x1 + 20;
            } else { // "left"
                point1[0] = $el.width();
                x1 = $el.width() - parseInt(yskew / Math.tan(radian)) - 0.5;
                x2 = x1 - 20;
            }

            point1.push(x1);
            point1.push(y1);
            point2 = [x1, y1, x2, y1];

            this.fabric.add(
                Line(point1),
                Line(point2)
            );

            return [x2, y1];
        }
    };

    function Line(coords) {
        return new fabric.Line(coords, {
            stroke: 'red',
            selectable: false
        });
    }

    function clsBox(selector, text) {
        var $textbox = $("<div class='clsbox'></div>");
        var $selector = $(selector);
        var content = "<span style='color:#df7bdd;'>" + $selector[0].nodeName.toLowerCase() + "</span>" + (text || selector);

        $textbox.html(content).on({
            mouseenter: function (e) {
                clsBox.inspecter.toggle(selector, true);
            },
            mouseleave: function (e) {
                clsBox.inspecter.toggle(selector, false);
            },
            click: function (e) {
                clsBox.cssRule.render(selector, $textbox)
            }
        });

        return $textbox[0];
    }

    // 元素审查
    clsBox.inspecters = {};
    clsBox.inspecter = {
        render: function (el) {
            var $el = $(el);
            var offset = $el.offset();
            var contentbox = "<div class='clsbox-inspecter content-box'></div>",
                $paddingbox = $("<div class='clsbox-inspecter padding-box'>" + contentbox + "</div>");

            $marginbox = $("<div class='clsbox-inspecter margin-box'></div>");

            $marginbox.append($paddingbox);
            $(document.body).append($marginbox);

            var ml = parseInt($el.css("margin-left")),
                mt = parseInt($el.css("margin-top")),
                pl = parseInt($el.css("padding-left")),
                pt = parseInt($el.css("padding-top"));

            $marginbox.css({
                left: offset.left - (ml < 0 ? ml + pl : ml),
                top: offset.top - (mt < 0 ? mt + pt : mt),
                width: $el[0].offsetWidth,
                height: $el[0].offsetHeight,
                padding: $el.css("margin"),
            });
            $paddingbox.css({
                padding: $el.css("padding"),
            });
            
            clsBox.inspecters[el] = $marginbox;
        },
        toggle: function (el, isshow) {
            var $marginbox = clsBox.inspecters[el];

            if (!$marginbox) return this.render(el);

            $marginbox.toggle(!!isshow);
        }
    };

    // 样式规则依赖
    clsBox.cssRules = {};
    clsBox.cssRule = {
        render: function (selector, $clsbox) {
            var that = this;
            var $rulebox = clsBox.cssRules[selector];

            if ($rulebox) return $rulebox.show();

            var $closebtn = $("<div class='rule-close'>&#215</div>");

            $rulebox = $("<div class='clsbox-rule'><div class='rule-box'><div class='rule-container'></div></div></div>");

            $(document.body).append($rulebox);

            var rules = this.getRule($(selector)[0]);
            var styles = [], classes = [], lens = [];

            rules = rules.filter(function (r, i) {
                if (r.indexOf("*") === 0) return false; // 过滤 * {}的样式

                var style = r.match(/(?= )([^{};]*?)(?=;)/g);
                
                if (!style) return false; // 过滤空样式

                styles.push.apply(styles, style);
                classes.push.apply(classes, r.match(/([^{};]+?)(?={)/g));
                lens.push(style.length + (lens[lens.length - 1] || 0));
                return true;
            });

            rules = rules.reduce(function (prev, r) {
                return prev + r.trim();
            }, "");

            rules = rules.replace(/({|;)/g, "$1&nbsp;&nbsp;"); // 对{和;进行换行处理
            rules = rules.replace(/&nbsp;&nbsp; }/g, "}").replace(/(}(?!$))/g, "$1</br>"); // 对非最后一个的}进行换行处理

            var $ruleContainer = $rulebox.find(".rule-container");

            $rulebox.on("click", function (e) {
                if(e.target != this) return;
                that.hide(selector);
            });

            $ruleContainer.on("click", function (e) {
                var iscloseBtn = $(e.target).hasClass("rule-close");

                iscloseBtn && that.hide(selector);
                e.stopPropagation();
            }).html(rules).on("click.transfer", ".transfer-icon", function (e) {
                var index = $ruleContainer.find(".transfer-icon").index(this),
                    len = index + 1, clsIndex;
                var _sort = function (a, b) { return a - b; };

                lens.push(len);
                clsIndex = lens.sort(_sort).indexOf(len);
                lens.splice(clsIndex, 1);
                that.transferToEditor(classes[clsIndex], styles[index]);
            });
            
            var fmtHtml = "";

            hljs.configure({
                useBR: true,
                language: "css"
            });
            hljs.highlightBlock($ruleContainer[0]);
            fmtHtml = $ruleContainer.html();
            fmtHtml = fmtHtml.replace(/(&nbsp;&nbsp;[\s\S]*?;)/g, "<div class='cls-property'>$1<span class='transfer-icon'><span></div>");
            $ruleContainer.html(fmtHtml);

            clsBox.cssRules[selector] = $rulebox;

            var $box = $rulebox.find(".rule-box");

            $box.show().css("position", "relative");
            Ps.initialize($box[0], {
                wheelSpeed: 1,
                suppressScrollX: true,
                wheelPropagation: false,
                swipePropagation: false,
                theme: 'lighter'
            });
            $ruleContainer[0].offsetHeight = $box.height();
            $ruleContainer.append($closebtn);
        },
        hide: function (el) {
            var $rulebox = clsBox.cssRules[el];

            $rulebox.hide();
        },
        transferToEditor: function (clsName, style) {
            if (!parent.codeEditor) return;

            var editor = parent.codeEditor.getEditor("css");
            var matchLen = editor.findAll(clsName + "{"), tstyle;
        
            style = style.trim();
            tstyle = "  " + style + ";";
            property = style.split(" ")[0];

            var lines = editor.session.doc.$lines,
                row = editor.selection.lead.row,
                len = lines.length - 1, 
                i = 0, lineText;
            /**
             * none 当前插件不存在该类
             * exsit 当前类型插件下存在该类
             * other 非当前类插件下存在该类
             */
            var clsStatus = "none";

            var handler = editor.selection._eventRegistry.changeCursor[1];
            
            handler && editor.selection.off("changeCursor", handler);

            if (matchLen) {
                while (i < matchLen) {
                    var rang = editor.find(clsName + "{");
                    var regx = /\(#(.*?)\)/g;
                    var j = rang.start.row, result;

                    while (j > 0) {
                        result = lines[j].match(regx);

                        if (result) {
                            clsStatus = result[0].replace(regx, "$1") === def.type ? "exsit" : "other";
                            break;
                        }
                        j--;
                    }

                    if (clsStatus === "exsit") break;
                    i++;
                }
            }

            handler && editor.selection.on("changeCursor", handler);

            if (clsStatus !== "none") { // 如果存在类样式
                while (row <= len) {
                    lineText = lines[row] || "";
                    if (~lineText.indexOf(style)) { // 如果该样式已存在则定位到该行
                        editor.find(style);
                        break;
                    } else if (lineText.trim().indexOf(property) === 0) { // 如果该样式经过改动 则选中样式属性并定位到该行
                        editor.find(lineText);
                        break;
                    }

                    if(lineText.match(/{.*?}/g)) { // '{'和'}'在同一行 如: .xxx{color:#fff}
                        var r = lineText.replace("}", "\n" + tstyle + "\n}");
                        
                        editor.find(lineText);
                        editor.replace(r);
                        editor.clearSelection();
                        editor.moveCursorTo(row + 1, tstyle.length);
                        editor.focus();
                        break;
                    }

                    if (~lineText.indexOf("}")) { // 如果该样式不存在, 则生成到样式类的最后一行
                        editor.gotoLine(row + 1, 0);
                        editor.insertSnippet(tstyle + "::focus\n");
                        break;
                    }
                    row++;
                }
                return;
            }

            var isPlugExist = editor.find("(#" + def.type + ")");
            var clsTmpl = "\n" + clsName + "{\n" + tstyle + "::focus\n}\n";
            var _insertToLastLine = function () {
                editor.navigateFileEnd();
                editor.insertSnippet(clsTmpl);
            };

            // 如果不存在该插件的样式"(#type)", 生成到编辑器的最后一行
            if (!isPlugExist) return _insertToLastLine();

            row = editor.selection.lead.row; //重新获取行
            while (++row <= len) {
                if (lines[row].match(/\(#.*?\)/g)) {
                    editor.gotoLine(row, lines[row].length);
                    editor.insertSnippet(clsTmpl);
                    return;
                }
            }

            _insertToLastLine();
        },
        getRule: function (el) {
            var sheets = document.styleSheets, o = [];

            el.matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector || el.oMatchesSelector;

            for (var i in sheets) {
                var rules = sheets[i].rules || sheets[i].cssRules;

                for (var r in rules) {
                    if (el.matches(rules[r].selectorText)) {
                        o.push(rules[r].cssText);
                    }
                }
            }

            return o;
        }
    };

    window.clsPicker = clsPicker;
}());