function Meta(target, obj) {
    var a = obj
    for (var i = 2; i < arguments.length; i++) {
        a.__proto__ = arguments[i], a = arguments[i]
    }

    var id = 1
    var conf = {}, conf_cb = {}
    var sync = {}
    var cache = []
    return {
        __proto__: obj,
        target: target,
        ID: function() {return id++},
        Conf: function(key, value, cb) {
            if (key == undefined) {return conf}

            cb != undefined && (conf_cb[key] = cb)

            if (value != undefined) {
                var old = conf[key]
                conf[key] = value
                conf_cb[key] && conf_cb[key](value, old)
            }
            return conf[key] == undefined && obj && obj.Conf? obj.Conf(key): conf[key]
        },
        Sync: function(m) {
            var meta = m, data = "", list = []
            return sync[m] || (sync[m] = {
                change: function(cb) {list.push(cb); return list.length-1},
                eq: function(value) {return data == value},
                neq: function(value) {return data != value},
                get: function() {return data},
                set: function(value, force) {
                    if (value == undefined) {return}
                    if (value == data && !force) {return value}

                    old_value = data, data = value
                    meta && kit.Log(meta, value, old_value)
                    for (var i = 0; i < list.length; i++) {
                        list[i](value, old_value)
                    }
                    return value
                },
            })
        },
        View: function(output, type, line, key, cb) {
            var text = line, list = [], ui = {}
            switch (type) {
                case "icon":
                    list.push({img: [line[key[0]], function(event) {
                        // event.target.scrollIntoView()
                    }]})
                    break

                case "text":
                    list.push({text: [key.length>1? line[key[0]]+"("+line[key[1]]+")":
                        (key.length>0? line[key[0]]: "null"), "span"], click: cb})
                    break

                case "code":
                    list.push({view: ["code", "div", key.length>1? line[key[0]]+"("+line[key[1]]+")":
                        (key.length>0? line[key[0]]: "null")], click: cb})
                    break

                case "table":
                    list.push({type: "table", list: JSON.parse(line.text || "[]").map(function(item, index) {
                        return {type: "tr", list: item.map(function(value) {
                            return {text: [value, index == 0? "th": "td"]}
                        })}
                    })})
                    break

                case "field":
                    var text = JSON.parse(line.text)

                case "plugin":
                    if (!text.name) {
                        return {}
                    }
                    var id = "plugin"+this.ID()
                    list.push({view: [text.view+" item", "fieldset", "", "field"], data: {id: id, Run: cb}, list: [
                        {text: [text.name+"("+text.help+")", "legend"]},
                        {view: ["option", "form", "", "option"], list: [{type: "input", style: {"display": "none"}}]},
                        {view: ["output", "div", "", "output"]},
                        {script: ""+id+".Script="+(text.init||"{}")},
                    ]})
                    break
            }

            var item = []
            output.DisplayUser && item.push({view: ["user", "div", line.create_nick||line.create_user]})
            output.DisplayTime && (item.push({text: [line.create_time, "div", "time"]}))
            item.push({view: ["text"], list:list})

            !output.DisplayRaw && (list = [{view: ["item"], list:item}])
            ui = kit.AppendChild(output, list)
            ui.field && (ui.field.Meta = text)
            return ui
        },
        Save: function(name, output) {
            var temp = document.createDocumentFragment()
            while (output.childNodes.length>0) {
                var item = output.childNodes[0]
                item.parentNode.removeChild(item)
                temp.appendChild(item)
            }
            cache[name] = temp
            return name
        },
        Back: function(name, output) {
            if (!cache[name]) {return}

            while (cache[name].childNodes.length>0) {
                item = cache[name].childNodes[0]
                item.parentNode.removeChild(item)
                output.appendChild(item)
            }
            delete(cache[name])
            return name
        },
        Include: function(src, cb) {
            typeof src == "string" && (src = [src])
            kit.AppendChild(target, [{include: [src[0], function(event) {
                src.length == 1? cb(event): page.Include(src.slice(1), cb)
            }]}])
        },
    }
}
function Page(page) {
    page = Meta(document.body, page, {
        onload: function() {
            var sessid = ctx.Cookie("sessid")
            if (page.check && !sessid) {
                document.querySelectorAll("body>fieldset.Login").forEach(function(field) {
                    page.Pane(page, field)
                })
            } else {
                document.querySelectorAll("body>fieldset").forEach(function(field) {
                    page.Pane(page, field)
                }), page.init(page)
            }

            if (page.check) {
                false && kit.isWeiXin? page.login.Pane.Run(["weixin"], function(msg) {
                    page.Include([
                        "https://res.wx.qq.com/open/js/jweixin-1.4.0.js",
                        "/static/librarys/weixin.js",
                    ], function(event) {
                        wx.error(function(res){})
                        wx.ready(function(){
                            page.getLocation = function(cb) {
                                wx.getLocation({success: function (res) {cb(res)}})
                            }
                            page.openLocation = function(latitude, longitude, name) {
                                wx.openLocation({latitude: parseFloat(latitude), longitude: parseFloat(longitude), name:name||"here"})
                            }

                            wx.getNetworkType({success: function (res) {}})
                            wx.getLocation({success: function (res) {
                                page.footer.Pane.State("site", parseInt(res.latitude*10000)+","+parseInt(res.longitude*10000))
                            }})
                        })
                        wx.config({
                            appId: msg.appid[0],
                            nonceStr: msg.nonce[0],
                            timestamp: msg.timestamp[0],
                            signature: msg.signature[0],
                            jsApiList: [
                                "scanQRCode",
                                "chooseImage",
                                "closeWindow",
                                "openAddress",
                                "getNetworkType",
                                "getLocation",
                                "openLocation",
                            ]
                        })
                    })
                }): sessid? page.login.Pane.Run([], function(msg) {
                    msg.result && msg.result[0]? page.header.Pane.State("user", msg.nickname[0])
                        :page.login.Pane.Dialog(1, 1)
                }): page.login.Pane.Dialog(1, 1)
            }
            window.onresize = function(event) {
                page.onlayout && page.onlayout(event)
            }, document.body.onkeydown = function(event) {
                if (page.localMap && page.localMap(event)) {return}
                page.oncontrol && page.oncontrol(event, document.body, "control")
                if (event.ctrlKey && kit.isWindows) {
                    event.stopPropagation()
                    event.preventDefault()
                    return true
                }
            }, document.body.onkeyup = function(event) {
                if (event.ctrlKey && kit.isWindows) {
                    event.stopPropagation()
                    event.preventDefault()
                    return true
                }
            }
        },
        ontoast: function(text, title, duration) {
            var args = typeof text == "object"? text: {text: text, title: title, duration: duration}
            var toast = kit.ModifyView("fieldset.toast", {
                display: "block", dialog: [args.width||text.length*10+100, args.height||60], padding: 10,
            })
            if (!text) {
                toast.style.display = "none"
                return
            }

            var list = [{text: [title||"", "div", "title"]}, {text: [args.text||"", "div", "content"]}]
            args.inputs && args.inputs.forEach(function(input) {
                if (typeof input == "string") {
                    list.push({inner: input, type: "label", style: {"margin-right": "5px"}})
                    list.push({input: [input, page.oninput]})
                } else {
                    list.push({inner: input[0], type: "label", style: {"margin-right": "5px"}})
                    var option = []
                    for (var i = 1; i < input.length; i++) {
                        option.push({type: "option", inner: input[i]})
                    }
                    list.push({name: input[0], type: "select", list: option})
                }
                list.push({type: "br"})
            })
            args.button && args.button.forEach(function(input) {
                list.push({type: "button", inner: input, click: function(event) {
                    var values = {}
                    toast.querySelectorAll("input").forEach(function(input) {
                        values[input.name] = input.value
                    })
                    toast.querySelectorAll("select").forEach(function(input) {
                        values[input.name] = input.value
                    })
                    typeof args.cb == "function" && args.cb(input, values)
                    toast.style.display = "none"
                }})
            })
            list.push({view: ["tick"], name: "tick"})

            // kit.ModifyNode(toast.querySelector("legend"), args.title||"tips")
            var ui = kit.AppendChild(kit.ModifyNode(toast.querySelector("div.output"), ""), list)
            var tick = 1
            var begin = kit.time(0,"%H:%M:%S")
            var timer = args.duration ==- 1? setTimeout(function() {
                function ticker() {
                    toast.style.display != "none" && (ui.tick.innerText = begin+" ... "+(tick++)+"s") && setTimeout(ticker, 1000)
                }
                ticker()
            }, 10): setTimeout(function(){toast.style.display = "none"}, args.duration||3000)
            page.toast = toast
            return true
        },
        oninput: function(event, local) {
            var target = event.target
            kit.History.add("key", (event.ctrlKey? "Control+": "")+(event.shiftKey? "Shift+": "")+event.key)

            if (event.ctrlKey) {
                if (typeof local == "function" && local(event)) {
                    event.stopPropagation()
                    event.preventDefault()
                    return true
                }
                var his = target.History
                var pos = target.Current || -1
                switch (event.key) {
                    case "p":
                        if (!his) { break }
                        pos = (pos-1+his.length+1) % (his.length+1)
                        target.value = pos < his.length? his[pos]: ""
                        target.Current = pos
                        break
                    case "n":
                        if (!his) { break }
                        pos = (pos+1) % (his.length+1)
                        target.value = pos < his.length? his[pos]: ""
                        target.Current = pos
                        break
                    case "a":
                    case "e":
                    case "f":
                    case "b":
                    case "h":
                    case "d":
                        break
                    case "k":
                        kit.DelText(target, target.selectionStart)
                        break
                    case "u":
                        kit.DelText(target, 0, target.selectionEnd)
                        break
                    case "w":
                        var start = target.selectionStart-2
                        var end = target.selectionEnd-1
                        for (var i = start; i >= 0; i--) {
                            if (target.value[end] == " " && target.value[i] != " ") {
                                break
                            }
                            if (target.value[end] != " " && target.value[i] == " ") {
                                break
                            }
                        }
                        kit.DelText(target, i+1, end-i)
                        break
                    default:
                        return false

                }
                event.stopPropagation()
				event.preventDefault()
                return true
            }
            switch (event.key) {
                case "Escape":
                    target.blur()
                    event.stopPropagation()
                    return true
                default:
                    if (kit.HitText(target, "jk")) {
                        kit.DelText(target, target.selectionStart-2, 2)
                        target.blur()
                        event.stopPropagation()
                        return true
                    }
            }
            return false
        },
        onscroll: function(event, target, action) {
            switch (event.key) {
                case " ":
                    page.footer.Pane.Select()
                    break
                case "h":
                    if (event.ctrlKey) {
                        target.scrollBy(-conf.scroll_x*10, 0)
                    } else {
                        target.scrollBy(-conf.scroll_x, 0)
                    }
                    break
                case "H":
                    target.scrollBy(-document.body.scrollWidth, 0)
                    break
                case "l":
                    if (event.ctrlKey) {
                        target.scrollBy(conf.scroll_x*10, 0)
                    } else {
                        target.scrollBy(conf.scroll_x, 0)
                    }
                    break
                case "L":
                    target.scrollBy(document.body.scrollWidth, 0)
                    break
                case "j":
                    if (event.ctrlKey) {
                        target.scrollBy(0, conf.scroll_y*10)
                    } else {
                        target.scrollBy(0, conf.scroll_y)
                    }
                    break
                case "J":
                    target.scrollBy(0, document.body.scrollHeight)
                    break
                case "k":
                    if (event.ctrlKey) {
                        target.scrollBy(0, -conf.scroll_y*10)
                    } else {
                        target.scrollBy(0, -conf.scroll_y)
                    }
                    break
                case "K":
                    target.scrollBy(0, -document.body.scrollHeight)
                    break
            }
        },

        Help: function(pane, type, action) {
            if (pane == undefined) {
                kit.Selector(document.body, "body>fieldset", function(field) {
                    field.Pane.Help()
                })
                return true
            }
            page[pane].Pane.Help(type, action)
        },
        Jshy: function(event, args) {
            if (page[args[0]] && page[args[0]].type == "fieldset") {
                if (args.length > 1) {
                    return page[args[0]].Pane.Jshy(event, args.slice(1))
                } else {
                    return page[args[0]].Pane.Show()
                }
            }
            return typeof page[args[0]] == "function" && kit._call(page[args[0]], args.slice(1))
        },

        initLogin: function(page, field, option, output) {
            var ui = kit.AppendChilds(option, [
                {label: "username"}, {input: ["username"]}, {type: "br"},
                {label: "password"}, {password: ["password"]}, {type: "br"},
                {button: ["login", function(event) {
                    if (!ui.username.value) {ui.username.focus(); return}
                    if (!ui.password.value) {ui.password.focus(); return}

                    field.Pane.Login(ui.username.value, ui.password.value, function(sessid) {
                        if (!sessid) {kit.alert("用户或密码错误"); return}
                        ctx.Cookie("sessid", sessid), page.login.Pane.Dialog(1, 1), page.onload()
                    })
                }]}, {type: "br"},
            ])
            return {
                Login: function(username, password, cb) {
                    field.Pane.Run([username, password], function(msg) {cb(msg.result && msg.result[0] || "")})
                },
                Exit: function() {ctx.Cookie("sessid", ""), kit.reload()},
            }
        },
        initHeader: function(page, field, option, output) {
            var state = {}, list = [], cb = function(event, item, value) {}
            field.onclick = function(event) {page.pane && page.pane.scrollTo(0,0)}
            return {
                Order: function(value, order, cbs) {
                    state = value, list = order, cb = cbs || cb, field.Pane.Show()
                },
                State: function(name, value) {
                    value != undefined && (state[name] = value, field.Pane.Show())
                    return name == undefined? state: state[name]
                },
                Show: function() {
                    output.innerHTML = "", kit.AppendChild(output, [
                        {"view": ["title", "div", "shycontext"], click: function(event) {
                            cb(event, "title", "shycontext")
                        }},
                        {"view": ["state"], list: list.map(function(item) {return {text: [state[item], "div"], click: function(event) {
                            cb(event, item, state[item])
                        }}})},
                    ])
                },
				Help: function() {},
            }
        },
        initFooter: function(page, field, option, output) {
            var state = {}, list = [], cb = function(event, item, value) {}
            var ui, w = 0, history
            return {
                Select: function() {
                    ui.magic.focus()
                },
                Order: function(value, order, cbs) {
                    state = value, list = order, cb = cbs || cb, field.Pane.Show()
                },
                State: function(name, value) {
                    value != undefined && (state[name] = value, field.Pane.Show())
                    return name == undefined? state: state[name]
                },
                Size: function(width, height) {
                    kit.size(field, width, height)
                    ui && (w = width - ui.first.clientWidth - ui.last.clientWidth - 20) && kit.size(ui.magic, w, height-6)
                },
                Show: function() {
                    output.innerHTML = "", ui = kit.AppendChild(output, [
                        {"view": ["title", "div", "<a href='mailto:shylinux@163.com'>shylinux@163.com</>"]},
                        {"view": ["magic"], style: {"margin-top": "-4px"}, list: [{input: ["magic", function(event) {
                            if (event.key == "Enter" || event.ctrlKey && event.key == "j") {
                                ui.magic.History.push(event.target.value)
                                page.action.Pane.Core(event, {}, ["_cmd", event.target.value]), event.target.value = ""
                                event.stopPropagation()
                                event.preventDefault()
                                return
                            }

                            switch (event.key) {
                                case " ":
                                    return true
                            }

                            page.oninput(event, function(event) {
                                switch (event.key) {
                                    case "j":
                                        break
                                    case "Enter":
                                        kit.Log(event.target.value)
                                        break
                                    default:
                                        return false
                                }
                                return true
                            })

                        }], style: {width: w, "margin-top": "-2px", "font-size": "16px"}}]},
                        {"view": ["state"], list: list.map(function(item) {return {text: [item+":"+state[item], "div"], click: function(item) {
                            cb(event, item, state[item])
                        }}})},
                    ])
                    ui.magic.History = []
                    field.Pane.Size(field.clientWidth, field.clientHeight)
                },
				Help: function() {},
            }
        },
        Pane: Pane,
    })
    return window.onload = page.onload, page
}
function Pane(page, field) {
    var option = field.querySelector("form.option")
    var action = field.querySelector("div.action")
    var output = field.querySelector("div.output")

    var timer = ""
    var list = [], last = -1, member = {}
    var name = option.dataset.name
    var pane = Meta(field, (page[field.dataset.init] || function() {
    })(page, field, option, output) || {}, {
        Append: function(type, line, key, which, cb) {
            type = type || line.type
            var index = list.length, ui = pane.View(output, type, line, key, function(event, cmds, cbs) {
                pane.Select(index, line[which])
            })
			key && key.length > 0 && (member[line[which]] = member[line[key[0]]] = {index:index, key:line[which]})
            list.push(ui.last), field.scrollBy(0, field.scrollHeight+100);
            (type == "plugin" || type == "field") && pane.Plugin(page, pane, ui.field, function(event, cmds, cbs) {
                typeof cb == "function" && cb(line, index, event, cmds, cbs)
            })
            return ui
        },
        Update: function(cmds, type, key, which, first, cb) {
            pane.Runs(cmds, function(line, index, msg) {
                var ui = pane.Append(type, line, key, which, cb)
                if (typeof first == "string") {
                    (line.key == first || line.name == first || line[which] == first) && ui.first.click()
                } else {
                    first && index == 0 && ui.first.click()
                }
            })
        },
        Select: function(index, key) {
            -1 < last && last < list.length && (list[last].className = "item")
            last = index, list[index] && (list[index].className = "item select")
			key && pane.which.set(key)
        },
        Clear: function() {
            output.innerHTML = "", list = [], last = -1
        },

        Help: function(type, action) {
            if (kit.Selector(field, "div.Help", function(help) {
                field.removeChild(help)
                return help
            }).length>0 || action == "hide") {return}

            var text = [], delay = 30000
            switch (type) {
                case "name":
                case undefined:
                    text = [name]
                    break
                case "list":
                    var list = []
                    for (var k in pane) {list.push(k)}
                    list.sort(), text = text.concat(list.map(function(item) {return "func: "+item+"\n"}))

                    var list = []
                    for (var k in pane.Action) {list.push(k)}
                    list.sort(), text = text.concat(list.map(function(item) {return "action: "+item+"\n"}))
                    break
            }

            kit.AppendChild(field, [{view: ["Help"], list: [{text: [text.join(""), "div"]}]}])
            setTimeout(function() {pane.Help("", "hide")}, delay)
        },
        Jshy: function(event, args) {
            if (pane[args[0]] && pane[args[0]].type == "fieldset") {
                return pane[args[0]].Plugin.Jshy(event, args.slice(1))
            }
            if (typeof pane.Action[args[0]] == "function") {
                return kit._call(pane.Action[args[0]], [event, args[0]])
            }
			if (member[args[0]] != undefined) {
				pane.Select(member[args[0]].index, member[args[0]].key)
				return true
			}
            return typeof pane[args[0]] == "function" && kit._call(pane[args[0]], args.slice(1))
        },

        Tickers: function(time, cmds, cb) {
            pane.Ticker(time, cmds, function(msg) {
                ctx.Table(msg, function(line, index) {
                    cb(line, index, msg)
                })
            })
        },
        Ticker: function(time, cmds, cb) {
            timer && clearTimeout(timer)
            function loop() {
                !pane.Stop() && pane.Run(cmds, function(msg) {
                    cb(msg), timer = setTimeout(loop, time)
                })
            }
            time && (timer = setTimeout(loop, 10))
        },
        Runs: function(cmds, cb) {
            pane.Run(cmds, function(msg) {
                ctx.Table(msg, function(line, index) {
                    (cb||pane.ondaemon)(line, index, msg)
                })
            })
        },
        Run: function(cmds, cb) {
            ctx.Run(page, option.dataset, cmds, cb||pane.ondaemon)
        },

        Size: function(width, height) {
            field.style.display = (width<=0 || height<=0)? "none": "block"
            field.style.width = width+"px"
            field.style.height = height+"px"
        },
        Dialog: function(width, height) {
            if (field.style.display != "block") {
                page.dialog && page.dialog != field && page.dialog.style.display == "block" && page.dialog.Show()
                page.dialog = field, field.style.display = "block", kit.ModifyView(field, {window: [width||80, height||200]})
                return true
            }
            field.style.display = "none"
            delete(page.dialog)
            return false
        },
        which: page.Sync(name), Listen: {}, Action: {}, Button: [],
        Plugin: Plugin,
    })

    for (var k in pane.Listen) {
        page.Sync(k).change(pane.Listen[k])
    }
    pane.Button && pane.Button.length > 0 && (kit.InsertChild(field, output, "div", pane.Button.map(function(value) {
        return typeof value == "object"? {className: value[0], select: [value.slice(1), function(value, event) {
            value = event.target.value
            typeof pane.Action == "function"? pane.Action(value, event): pane.Action[value](event, value)
        }]}: value == ""? {view: ["space"]} :value == "br"? {type: "br"}: {button: [value, function(value, event) {
            typeof pane.Action == "function"? pane.Action(value, event): pane.Action[value](event, value)
        }]}
    })).className="action")
    option.onsubmit = function(event) {
        event.preventDefault()
    };
    return page[name] = field, pane.Field = field, field.Pane = pane
}
function Plugin(page, pane, field, run) {
    var option = field.querySelector("form.option")
    var action = field.querySelector("div.action")
    var output = field.querySelector("div.output")

    var plugin = Meta(field, (field.Script && field.Script.init || function() {
    })(run, field, option, output)||{}, {
        Append: function(item, name, value) {
            kit.Item(plugin.onaction, function(k, cb) {
                item[k] == undefined && (item[k] = typeof cb == "function"? function(event) {
                    cb(event, action, item.type, name, item)
                }: cb)
            })

            var count = kit.Selector(option, "args").length
            args && count < args.length && (item.value = value||args[count++]||item.value||"")

            name = item.name || "input"
            var input = {type: "input", name: name, data: item}
            switch (item.type) {
                case "select":
                    item.className = "args"
                    input.type = "select", input.list = item.values.map(function(value) {
                        return {type: "option", value: value, inner: value}
                    })
                    break
                case "textarea":
                    input.type = "textarea", item.style = "height:300px;"+"width:"+(option.clientWidth-20)+"px"
                    item.className = "args"
                case "text":
                    item.className = "args"
                    item.autocomplete = "off"
                    break
            }

            var ui = kit.AppendChild(option, [{view: [item.view||""], list: [{type: "label", inner: item.label||""}, input]}])
            var action = Meta(ui[name] || {}, item, plugin.onaction, plugin);

            (typeof item.imports == "object"? item.imports: typeof item.imports == "string"? [item.imports]: []).forEach(function(imports) {
                page.Sync(imports).change(function(value) {
                    (action.target.value = value) && item.action == "auto" && plugin.Runs(window.event)
                })
            })
            item.type == "button" && item.action == "auto" && plugin.Runs(window.event, function() {
                var td = output.querySelector("td")
                td && td.click()
            })
            return action
        },
        Remove: function() {
            var list = option.querySelectorAll("input.temp")
            list.length > 0 && (option.removeChild(list[list.length-1].parentNode))
        },
        Delete: function() {
            page.plugin = field.previousSibling
            field.parentNode.removeChild(field)
        },
        Select: function() {
            option.querySelectorAll("input")[1].focus()
        },
        Reveal: function(msg) {
            return msg.append && msg.append[0]? ["table", JSON.stringify(ctx.Tables(msg))]: ["code", msg.result? msg.result.join(""): ""]
        },
        Format: function() {
            field.Meta.args = arguments.length > 0? kit.List(arguments):
                kit.Selector(option, ".args", function(item) {return item.value})
            return JSON.stringify(field.Meta)
        },
        Clone: function() {
            return pane.Append("field", {text: plugin.Format()}, [], "", function(line, index, event, cmds, cbs) {
                run(event, cmds, cbs)
            }).field.Plugin
        },

        Help: function(type, action) {
            if (kit.Selector(field, "div.Help", function(help) {
                field.removeChild(help)
                return help
            }).length>0 || action == "hide") {return}

            var text = [], delay = 30000
            switch (type) {
                case "name":
                case undefined:
                    text = [meta.name]
                    break
                case "help":
                    text = [meta.help]
                    break
            }

            kit.AppendChild(field, [{view: ["Help"], list: [{text: [text.join(""), "div"]}]}])
            setTimeout(function() {plugin.Help("", "hide")}, delay)
        },
        Jshy: function(event, args) {
            if (typeof plugin[args[0]] == "function") {
                return kit._call(plugin[args[0]], args.slice(1))
            }
            if (args.length > 1) {
                return kit._call(plugin.Run, [event].concat(args.slice(1)))
            }
            return kit._call(plugin.Runs, [event])
        },

        Delay: function(time, event, text) {
            page.ontoast(text, "", -1)
            return setTimeout(function() {
                plugin.Runs(event), page.ontoast("")
            }, time)
        },
        Check: function(target, cb) {
            option.querySelectorAll(".args").forEach(function(item, index, list) {
                target == undefined && index == list.length-1 && plugin.Runs(window.event, cb)
                item == target && (index == list.length-1? plugin.Runs(window.event, cb): page.plugin == field && list[index+1].focus())
            })
        },
        Runs: function(event, cb) {
            plugin.Run(event, kit.Selector(option, ".args", function(item, index) {return item.value}), cb)
        },
        Run: function(event, args, cb) {
            var show = true
            setTimeout(function() {
                show && page.ontoast(kit.Format(args||["running..."]), meta.name, -1)
            }, 1000)
            event.Plugin = plugin, run(event, args, function(msg) {
                page.footer.Pane.State("ncmd", kit.History.get("cmd").length)
                plugin.msg = msg, plugin.display(display.deal, cb)
                show = false, page.ontoast("")
            })
        },

        display: function(arg, cb) {
            display.deal = arg, plugin.ondaemon[display.deal||"table"](plugin.msg, cb)
        },
        ondaemon: {
            table: function(msg, cb) {
                output.innerHTML = ""
                !display.hide_append && msg.append && kit.OrderTable(kit.AppendTable(kit.AppendChild(output, "table"), ctx.Table(msg), msg.append), exports[1], function(event, value, name, line) {
                    page.Sync("plugin_"+exports[0]).set(plugin.onexport[exports[2]||""](value, name, line))
                });
                (display.show_result || !msg.append) && msg.result && kit.OrderCode(kit.AppendChild(output, [{view: ["code", "div", msg.Results()]}]).first)
                typeof cb == "function" && cb(msg)
            },
            editor: function(msg, cb) {
                (output.innerHTML = "", Editor(plugin, option, output, output.clientWidth-40, 400, 10, msg))
            },
            canvas: function(msg, cb) {
                typeof cb == "function" && !cb(msg) || (output.innerHTML = "", Canvas(plugin, option, output, output.clientWidth-40, 400, 10, msg))
            },
        },
        onexport: {
            "": function(value, name) {
                return value
            },
            see: function(value, name, line) {
                return value.split("/")[0]
            },
            you: function(value, name, line) {
                var event = window.event
                event.Plugin = plugin
                line.you && name == "status" && (line.status == "start"? function() {
                    plugin.Delay(3000, event, line.you+" stop...") && field.Run(event, [line.you, "stop"])
                }(): field.Run(event, [line.you], function(msg) {
                    plugin.Delay(3000, event, line.you+" start...")
                }))
                return name == "status" || line.status == "stop" ? undefined: line.you
            },
            pod: function(value, name, line) {
                if (option[exports[0]].value) {
                    return option[exports[0]].value+"."+line.pod
                }
                return line.pod
            },
            dir: function(value, name, line) {
                name != "path" && (value = line.path)
                return value
            },
        },
        onaction: {
            onfocus: function(event, action, type, name, item) {
                page.pane = pane.target, page.plugin = plugin.target, page.input = event.target
            },
            onclick: function(event, action, type, name, item) {
                switch (type) {
                    case "button":
                        action[item.click]? action[item.click](event, item, option, field):
                            plugin[item.click]? plugin[item.click](event, item, option, field): plugin.Runs(event)
                        break
                    case "text":
                        if (event.ctrlKey) {
                            action.value = kit.History.get("txt", -1).data.trim()
                        }
                        break
                }
            },
            ondblclick: function(event, action, type, name, item) {
                action.value = kit.History.get("txt", -1).data.trim()
            },
            onchange: function(event, action, type, name, item) {
                plugin.Check(action)
            },
            onkeyup: function(event, action, type, name, item) {
                switch (event.key) {
                    case " ":
                        event.stopPropagation()
                        return true
                }

                page.oninput(event, function(event) {
                    switch (event.key) {
                        case " ":
                        case "w":
                            break
                        default:
                            return false
                    }
                    event.stopPropagation()
                    event.preventDefault()
                    return true
                })
            },
            onkeydown: function(event, action, type, name, item) {
                switch (event.key) {
                    case " ":
                        event.stopPropagation()
                        return true
                }

                page.oninput(event, function(event) {
                    switch (event.key) {
                        case " ":
                        case "w":
                            break
                        case "p":
                            action.Back()
                            break
                        case "i":
                            var next = field.nextSibling;
                            next && next.Plugin.Select()
                            break
                        case "o":
                            var prev = field.previousSibling;
                            prev && prev.Plugin.Select()
                            break
                        case "c":
                            output.innerHTML = ""
                            break
                        case "r":
                            output.innerHTML = ""
                        case "j":
                            plugin.Runs(event)
                            break
                        case "l":
                            page.action.scrollTo(0, field.offsetTop)
                            break
                        case "b":
                            plugin.Append(item).focus()
                            break
                        case "m":
                            plugin.Clone().Select()
                            break
                        default:
                            return false
                    }
                    event.stopPropagation()
                    event.preventDefault()
                    return true
                })
                item.type != "textarea" && event.key == "Enter" && plugin.Check(action.target)
            },
        }
    })

    var meta = field.Meta
    var name = meta.name
    var args = meta.args || []
    var display = JSON.parse(meta.display||'{}')
    var exports = JSON.parse(meta.exports||'["",""]')
    JSON.parse(meta.inputs || "[]").map(plugin.Append)
    return page[field.id] = pane[field.id] = pane[name] = field, field.Plugin = plugin
}
function Editor(plugin, option, output, width, height, space, msg) {
    exports = ["dir", "path", "dir"]
    msg.append && kit.OrderTable(kit.AppendTable(kit.AppendChild(output, "table"), ctx.Table(msg), msg.append), exports[1], function(event, value, name, line) {
        page.Sync("plugin_"+exports[0]).set(plugin.onexport[exports[2]||""](value, name, line))
    });

    var args = [option.pod.value, option.dir.value]

    if (msg.file) {
        var action = kit.AppendAction(kit.AppendChild(output, [{view: ["action"]}]).last, [
            "追加", "提交", "取消",
        ], function(value, event) {
            switch (value) {
                case "追加":
                    field.Run(event, args.concat(["dir_sed", "add"]))
                    break
                case "提交":
                    field.Run(event, args.concat(["dir_sed", "put"]))
                    break
                case "取消":
                    break
            }
        })

        kit.AppendChild(output, [{view: ["edit", "table"], list: (msg.result||[]).map(function(value, index) {
            return {view: ["line", "tr"], list: [{view: ["num", "td", index+1]}, {view: ["txt", "td"], list: [{value: value, style: {width: width+"px"}, input: [value, function(event) {
                if (event.key == "Enter") {
                    field.Run(event, args.concat(["dir_sed", "set", index, event.target.value]))
                }
            }]}]}]}
        })}])
    }
}
function Canvas(plugin, option, output, width, height, space, msg) {
    var keys = [], data = {}, max = {}, nline = 0
    var nrow = msg[msg.append[0]].length
    var step = width / (nrow - 1)
    msg.append.forEach(function(key, index) {
        var list = []
        msg[key].forEach(function(value, index) {
            var v = parseInt(value)
            !isNaN(v) && (list.push((value.indexOf("-") == -1)? v: value), v > (max[key]||0) && (max[key] = v))
        })
        list.length == nrow && (keys.push(key), data[key] = list, nline++)
    })

    var conf = {
        font: "monospace", text: "hi", tool: "stroke", style: "black",
        type: "trend", shape: "drawText", means: "drawPoint",
        limits: {scale: 3, drawPoint: 1, drawPoly: 3},

        axies: {style: "black", width: 2},
        xlabel: {style: "red", width: 2, height: 5},
        plabel: {style: "red", font: "16px monospace", offset: 10, height: 20, length: 20},
        data: {style: "black", width: 1},

        mpoint: 10,
        play: 500,
    }

    var view = [], ps = [], point = [], now = {}, index = 0
    var trap = false, label = false

    var what = {
        reset: function(x, y) {
            canvas.resetTransform()
            canvas.setTransform(1, 0, 0, -1, space+(x||0), height+space-(y||0))
            canvas.strokeStyle = conf.data.style
            canvas.fillStyle = conf.data.style
            return what
        },
        clear: function() {
            var p0 = what.transform({x:-width, y:-height})
            var p1 = what.transform({x:2*width, y:2*height})
            canvas.clearRect(p0.x, p0.y, p1.x-p0.x, p1.y-p0.y)
            return what
        },

        move: function(meta) {
            var p0 = meta.ps[0] || {x:0, y:0}
            var p1 = meta.ps[1] || now
            canvas.save(), what.clear().drawLine(meta)
            canvas.translate(p1.x-p0.x, p1.y-p0.y)
            what.drawData().drawView()
            meta.ps.length < 2 && canvas.restore()
        },
        scale: function(meta) {
            var ps = meta.ps
            var p0 = ps[0] || {x:0, y:0}
            var p1 = ps[1] || now
            var p2 = ps[2] || now

            if (ps.length > 1) {
                canvas.save(), what.clear()
                what.drawLine({ps: [p0, {x: p1.x, y: p0.y}]})
                what.drawLine({ps: [{x: p1.x, y: p0.y}, p1]})
                what.drawLine({ps: [p0, {x: p2.x, y: p0.y}]})
                what.drawLine({ps: [{x: p2.x, y: p0.y}, p2]})
                canvas.scale((p2.x-p0.x)/(p1.x-p0.x), (p2.y-p0.y)/(p1.y-p0.y))
                what.drawData().drawView()
                meta.ps.length < 3 && canvas.restore()
            }
        },
        rotate: function(meta) {
            var p0 = meta.ps[0] || {x:0, y:0}
            var p1 = meta.ps[1] || now
            canvas.save(), what.clear().drawLine(meta)
            canvas.rotate(Math.atan2(p1.y-p0.y, p1.x-p0.x))
            what.drawData().drawView()
            meta.ps.length < 2 && canvas.restore()
        },

        draw: function(meta) {
            function trans(value) {
                if (value == "random") {
                    return ["black", "red", "green", "yellow", "blue", "purple", "cyan", "white"][parseInt(Math.random()*8)]
                }
                return value
            }
            canvas.strokeStyle = trans(meta.style || conf.style)
            canvas.fillStyle = trans(meta.style || conf.style)
            canvas[meta.tool||conf.tool]()
            return meta
        },
        drawText: function(meta) {
            var p0 = meta.ps[0] || {x:0, y:0}
            var p1 = meta.ps[1] || now
            var t = meta.text||status.cmd.value||conf.text

            canvas.save()
            canvas.translate(p0.x, p0.y)
            canvas.scale(1, -1)
            canvas.rotate(-Math.atan2(p1.y-p0.y, p1.x-p0.x))
            what.draw(meta)
            canvas.font=kit.distance(p0.x, p0.y, p1.x, p1.y)/t.length*2+"px "+conf.font
            canvas[(meta.tool||conf.tool)+"Text"](t, 0, 0)
            canvas.restore()
            return meta
        },
        drawPoint: function(meta) {
            meta.ps.concat(now).forEach(function(p) {
                canvas.save()
                canvas.translate(p.x, p.y)
                canvas.beginPath()
                canvas.moveTo(-conf.mpoint, 0)
                canvas.lineTo(conf.mpoint, 0)
                canvas.moveTo(0, -conf.mpoint)
                canvas.lineTo(0, conf.mpoint)
                what.draw(meta)
                canvas.restore()
            })
            return meta
        },
        drawLine: function(meta) {
            var p0 = meta.ps[0] || {x:0, y:0}
            var p1 = meta.ps[1] || now
            canvas.save()
            canvas.beginPath()
            canvas.moveTo(p0.x, p0.y)
            canvas.lineTo(p1.x, p1.y)
            what.draw(meta)
            canvas.restore()
            return meta
        },
        drawPoly: function(meta) {
            var ps = meta.ps
            canvas.save()
            canvas.beginPath()
            canvas.moveTo(ps[0].x, ps[0].y)
            for (var i = 1; i < ps.length; i++) {
                canvas.lineTo(ps[i].x, ps[i].y)
            }
            ps.length < conf.limits.drawPoly && canvas.lineTo(now.x, now.y)
            what.draw(meta)
            canvas.restore()
            return meta
        },
        drawRect: function(meta) {
            var p0 = meta.ps[0] || {x:0, y:0}
            var p1 = meta.ps[1] || now
            canvas.save()
            what.draw(meta)
            canvas[(meta.tool||conf.tool)+"Rect"](p0.x, p0.y, p1.x-p0.x, p1.y-p0.y)
            canvas.restore()
            return meta
        },
        drawCircle: function(meta) {
            var p0 = meta.ps[0] || {x:0, y:0}
            var p1 = meta.ps[1] || now
            canvas.save()
            canvas.beginPath()
            canvas.arc(p0.x, p0.y, kit.distance(p0.x, p0.y, p1.x, p1.y), 0, Math.PI*2, true)
            what.draw(meta)
            canvas.restore()
            return meta
        },
        drawEllipse: function(meta) {
            var p0 = meta.ps[0] || {x:0, y:0}
            var p1 = meta.ps[1] || now
            var r0 = Math.abs(p1.x-p0.x)
            var r1 = Math.abs(p1.y-p0.y)

            canvas.save()
            canvas.beginPath()
            canvas.translate(p0.x, p0.y)
            r1 > r0? (canvas.scale(r0/r1, 1), r0 = r1): canvas.scale(1, r1/r0)
            canvas.arc(0, 0, r0, 0, Math.PI*2, true)
            what.draw(meta)
            canvas.restore()
            return meta
        },

        drawAxies: function() {
            canvas.beginPath()
            canvas.moveTo(-space, 0)
            canvas.lineTo(width+space, 0)
            canvas.moveTo(0, -space)
            canvas.lineTo(0, height+space)
            canvas.strokeStyle = conf.axies.style
            canvas.lineWidth = conf.axies.width
            canvas.stroke()
            return what
        },
        drawXLabel: function(step) {
            canvas.beginPath()
            for (var pos = step; pos < width; pos += step) {
                canvas.moveTo(pos, 0)
                canvas.lineTo(pos, -conf.xlabel.height)
            }
            canvas.strokeStyle = conf.xlabel.style
            canvas.lineWidth = conf.xlabel.width
            canvas.stroke()
            return what
        },

        figure: {
            trend: {
                draw: function() {
                    what.drawAxies().drawXLabel(step)
                    canvas.beginPath()
                    for (var key in data) {
                        data[key].forEach(function(value, i) {
                            i == 0? canvas.moveTo(0, value/max[key]*height): canvas.lineTo(step*i, value/max[key]*height)
                            i == index && (canvas.moveTo(step*i, 0), canvas.lineTo(step*i, value/max[key]*height))
                        })
                    }
                    canvas.strokeStyle = conf.data.style
                    canvas.lineWidth = conf.data.width
                    canvas.stroke()
                },
                show: function(p) {
                    index = parseInt(p.x/step)
                    canvas.moveTo(p.x, -space)
                    canvas.lineTo(p.x, height)
                    canvas.moveTo(-space, p.y)
                    canvas.lineTo(width, p.y)
                    return p
                },
            },
            ticket: {
                draw: function() {
                    what.drawAxies().drawXLabel(step)
                    if (keys.length < 3) {
                        return
                    }
                    canvas.beginPath()

                    var sum = 0, total = 0
                    for (var i = 0; i < nrow; i++) {
                        sum += data[keys[1]][i]
                        sum > total && (total = sum)
                        sum -= data[keys[2]||keys[1]][i]
                    }
                    if (!data["sum"]) {
                        var sum = 0, max = 0, min = 0, end = 0
                        keys = keys.concat(["sum", "max", "min", "end"])
                        data["sum"] = []
                        data["max"] = []
                        data["min"] = []
                        data["end"] = []
                        for (var i = 0; i < nrow; i++) {
                            max = sum + data[keys[1]][i]
                            min = sum - data[keys[2||keys[1]]][i]
                            end = sum + data[keys[1]][i] - data[keys[2]||keys[1]][i]
                            data["sum"].push(sum)
                            data["max"].push(max)
                            data["min"].push(min)
                            data["end"].push(end)
                            sum = end
                        }
                        msg.append.push("sum")
                        msg.sum = data.sum
                        msg.append.push("max")
                        msg.max = data.max
                        msg.append.push("min")
                        msg.min = data.min
                        msg.append.push("end")
                        msg.end = data.end
                    }

                    for (var i = 0; i < nrow; i++) {
                        if (data["sum"][i] < data["end"][i]) {
                            canvas.moveTo(step*i, data["min"][i]/total*height)
                            canvas.lineTo(step*i, data["sum"][i]/total*height)

                            canvas.moveTo(step*i, data["max"][i]/total*height)
                            canvas.lineTo(step*i, data["end"][i]/total*height)
                        } else {
                            canvas.moveTo(step*i, data["min"][i]/total*height)
                            canvas.lineTo(step*i, data["end"][i]/total*height)

                            canvas.moveTo(step*i, data["max"][i]/total*height)
                            canvas.lineTo(step*i, data["sum"][i]/total*height)
                        }
                    }
                    canvas.strokeStyle = conf.data.style
                    canvas.lineWidth = conf.data.width
                    canvas.stroke()
                },
                show: function(p) {
                    index = parseInt(p.x/step)
                    canvas.moveTo(p.x, -space)
                    canvas.lineTo(p.x, height)
                    canvas.moveTo(-space, p.y)
                    canvas.lineTo(width, p.y)
                    return p
                },
            },
            stick: {
                draw: function() {
                    what.drawAxies().drawXLabel(step)
                    canvas.beginPath()

                    var total = 0
                    for (var key in max) {
                        total += max[key]
                    }

                    for (var i = 0; i < nrow; i++) {
                        canvas.moveTo(step*i, 0)
                        for (var key in data) {
                            canvas.lineTo(step*i, data[key][i]/total*height)
                            canvas.moveTo(step*i-step/2, data[key][i]/total*height)
                            canvas.lineTo(step*i+step/2, data[key][i]/total*height)
                            canvas.moveTo(step*i, data[key][i]/total*height)
                        }
                    }
                    canvas.strokeStyle = conf.data.style
                    canvas.lineWidth = conf.data.width
                    canvas.stroke()
                },
                show: function(p) {
                    index = parseInt(p.x/step)
                    canvas.moveTo(p.x, -space)
                    canvas.lineTo(p.x, height)
                    canvas.moveTo(-space, p.y)
                    canvas.lineTo(width, p.y)
                    return p
                },
            },
            weight: {
                conf: {
                    space: 20,
                    focus: "white",
                    style: "black",
                    width: 1,
                    least: 0.01,
                },
                draw: function() {
                    var that = this
                    var space = width / (nline+1)

                    canvas.translate(0, height/2)
                    for (var key in data) {
                        var total = 0
                        data[key].forEach(function(value) {
                            total += value
                        })

                        var sum = 0
                        canvas.translate(space, 0)
                        data[key].forEach(function(value, i) {
                            if (value/total < that.conf.least) {
                                return
                            }

                            var a = sum/total*Math.PI*2
                            var b = (sum+value)/total*Math.PI*2
                            sum+=value

                            canvas.beginPath()
                            canvas.moveTo(0, 0)
                            canvas.arc(0, 0, (space/2)-that.conf.space, a, b, false)
                            canvas.closePath()

                            if (i == index) {
                                canvas.fillStyle = that.conf.focus
                                canvas.fill()
                            } else {
                                canvas.strokeStyle = that.conf.style
                                canvas.lineWidth = that.conf.width
                                canvas.stroke()
                            }
                        })
                    }
                },
                show: function(p) {
                    var nspace = width / (nline+1)
                    var which = parseInt((p.x-nspace/2)/nspace)
                    which >= nline && (which = nline-1), which < 0 && (which = 0)

                    var q = what.reverse(p)
                    canvas.translate((which+1)*nspace, height/2)
                    var p = what.transform(q)

                    var a = Math.atan2(p.y, p.x)
                    a < 0 && (a += Math.PI*2)
                    var pos = a/2/Math.PI

                    var total = 0
                    data[keys[which]].forEach(function(value) {
                        total += value
                    })
                    var sum = 0, weight = 0
                    data[keys[which]].forEach(function(value, i) {
                        sum += value, sum / total < pos && (index = i+1)
                        index == i && (weight = parseInt(value/total*100))
                    })

                    canvas.moveTo(0, 0)
                    canvas.lineTo(p.x, p.y)
                    canvas.lineTo(p.x+conf.plabel.length, p.y)

                    canvas.scale(1, -1)
                    canvas.fillText("weight: "+weight+"%", p.x+conf.plabel.offset, -p.y+conf.plabel.offset)
                    canvas.scale(1, -1)
                    return p
                },
            },
        },

        drawData: function() {
            canvas.save()
            what.figure[conf.type].draw()
            canvas.restore()
            return what
        },
        drawView: function() {
            view.forEach(function(view) {
                view.meta && what[view.type](view.meta)
            })
            return what
        },
        drawLabel: function() {
            if (!label) { return what }

            index = 0
            canvas.save()
            canvas.font = conf.plabel.font || conf.font
            canvas.fillStyle = conf.plabel.style || conf.style
            canvas.strokeStyle = conf.plabel.style || conf.style
            var p = what.figure[conf.type].show(now)
            canvas.stroke()

            canvas.scale(1, -1)
            p.x += conf.plabel.offset
            p.y -= conf.plabel.offset

            if (width - p.x < 200) {
                p.x -= 200
            }
            canvas.fillText("index: "+index, p.x, -p.y+conf.plabel.height)
            msg.append.forEach(function(key, i) {
                msg[key][index] && canvas.fillText(key+": "+msg[key][index], p.x, -p.y+(i+2)*conf.plabel.height)
            })
            canvas.restore()
            return what
        },
        drawShape: function() {
            point.length > 0 && (what[conf.shape]({ps: point}), what[conf.means]({ps: point, tool: "stroke", style: "red"}))
            return what
        },

        refresh: function() {
            return what.clear().drawData().drawView().drawLabel().drawShape()
        },
        cancel: function() {
            point = [], what.refresh()
            return what
        },
        play: function() {
            function cb() {
                view[i] && what[view[i].type](view[i].meta) && (t = kit.Delay(view[i].type == "drawPoint"? 10: conf.play, cb))
                i++
                status.nshape.innerText = i+"/"+view.length
            }
            var i = 0
            what.clear().drawData()
            kit.Delay(10, cb)
            return what
        },
        back: function() {
            view.pop(), status.nshape.innerText = view.length
            return what.refresh()
        },
        push: function(item) {
            item.meta && item.meta.ps < (conf.limits[item.type]||2) && ps.push(item)
            status.nshape.innerText = view.push(item)
            return what
        },
        wait: function() {
            status.cmd.focus()
            return what
        },
        trap: function(value, event) {
            event.target.className = (trap = !trap)? "trap": "normal"
            page.localMap = trap? what.input: undefined
        },
        label: function(value, event) {
            event.target.className = (label = !label)? "trap": "normal"
        },

        movePoint: function(p) {
            now = p, status.xy.innerHTML = p.x+","+p.y;
            (point.length > 0 || ps.length > 0 || label) && what.refresh()
        },
        pushPoint: function(p) {
            if (ps.length > 0) {
                ps[0].meta.ps.push(p) > 1 && ps.pop(), what.refresh()
                return
            }

            point.push(p) >= (conf.limits[conf.shape]||2) && what.push({type: conf.shape,
                meta: what[conf.shape]({ps: point, text: status.cmd.value||conf.text, tool: conf.tool, style: conf.style}),
            }) && (point = [])
            conf.means == "drawPoint" && what.push({type: conf.means, meta: what[conf.means]({ps: [p], tool: "stroke", style: "red"})})
        },
        transform: function(p) {
            var t = canvas.getTransform()
            return {
                x: (p.x-t.c/t.d*p.y+t.c*t.f/t.d-t.e)/(t.a-t.c*t.b/t.d),
                y: (p.y-t.b/t.a*p.x+t.b*t.e/t.a-t.f)/(t.d-t.b*t.c/t.a),
            }
        },
        reverse: function(p) {
            var t = canvas.getTransform()
            return {
                x: t.a*p.x+t.c*p.y+t.e,
                y: t.b*p.x+t.d*p.y+t.f,
            }
        },

        check: function() {
            view.forEach(function(item, index, view) {
                item && item.send && plugin.Run(window.event||{}, item.send.concat(["type", item.type]), function(msg) {
                    msg.text && msg.text[0] && (item.meta.text = msg.text[0])
                    msg.style && msg.style[0] && (item.meta.style = msg.style[0])
                    msg.ps && msg.ps[0] && (item.meta.ps = JSON.parse(msg.ps[0]))
                    what.refresh()
                })
                index == view.length -1 && kit.Delay(1000, what.check)
            })
        },
        parse: function(txt) {
            var meta = {}, cmds = [], rest = -1, send = []
            txt.trim().split(" ").forEach(function(item) {
                switch (item) {
                    case "stroke":
                    case "fill":
                        meta.tool = item
                        break
                    case "black":
                    case "white":
                    case "red":
                    case "yellow":
                    case "green":
                    case "cyan":
                    case "blue":
                    case "purple":
                        meta.style = item
                        break
                    case "cmds":
                        rest = cmds.length
                    default:
                        cmds.push(item)
                }
            }), rest != -1 && (send = cmds.slice(rest+1), cmds = cmds.slice(0, rest))

            var cmd = {
                "t": "drawText",
                "l": "drawLine",
                "p": "drawPoly",
                "r": "drawRect",
                "c": "drawCircle",
                "e": "drawEllipse",
            }[cmds[0]] || cmds[0]
            cmds = cmds.slice(1)

            var args = []
            switch (cmd) {
                case "send":
                    plugin.Run(window.event, cmds, function(msg) {
                        kit.Log(msg)
                    })
                    return
                default:
                    meta.ps = []
                    for (var i = 0; i < cmds.length; i+=2) {
                        var x = parseInt(cmds[i])
                        var y = parseInt(cmds[i+1])
                        !isNaN(x) && !isNaN(y) && meta.ps.push({x: x, y: y}) || (args.push(cmds[i]), i--)
                    }
            }
            meta.args = args

            switch (cmd) {
                case "drawText":
                    meta.text = args.join(" "), delete(meta.args)
                case "drawLine":
                case "drawPoly":
                case "drawRect":
                case "drawCircle":
                case "drawEllipse":
                    what.push({type: cmd, meta: what[cmd](meta), send:send})
            }

            return (what[cmd] || function() {
                return what
            })(meta)
        },
        input: function(event) {
            var map = what.trans[event.key]
            map && action[map[0]] && (action[map[0]].value = map[1])
            map && what.trans[map[0]] && (map = what.trans[map[1]]) && (conf[map[0]] && (conf[map[0]] = map[1]) || what[map[0]] && what[map[0]]())
            what.refresh()
        },
        trans: {
            "折线图": ["type", "trend"],
            "股价图": ["type", "ticket"],
            "柱状图": ["type", "stick"],
            "饼状图": ["type", "weight"],

            "移动": ["shape", "move"],
            "旋转": ["shape", "rotate"],
            "缩放": ["shape", "scale"],

            "文本": ["shape", "drawText"],
            "直线": ["shape", "drawLine"],
            "折线": ["shape", "drawPoly"],
            "矩形": ["shape", "drawRect"],
            "圆形": ["shape", "drawCircle"],
            "椭圆": ["shape", "drawEllipse"],

            "辅助点": ["means", "drawPoint"],
            "辅助线": ["means", "drawRect"],

            "画笔": ["tool", "stroke"],
            "画刷": ["tool", "fill"],

            "黑色": ["style", "black"],
            "红色": ["style", "red"],
            "绿色": ["style", "green"],
            "黄色": ["style", "yellow"],
            "蓝色": ["style", "blue"],
            "紫色": ["style", "purple"],
            "青色": ["style", "cyan"],
            "白色": ["style", "white"],
            "随机色": ["style", "random"],
            "默认色": ["style", "default"],

            "清屏": ["clear"],
            "刷新": ["refresh"],
            "取消": ["cancel"],
            "播放": ["play"],
            "回退": ["back"],
            "输入": ["wait"],

            "标签": ["label"],
            "快捷键": ["trap"],

            "x": ["折线图", "折线图"],
            "y": ["折线图", "饼状图"],

            "a": ["移动", "旋转"],
            "m": ["移动", "移动"],
            "z": ["移动", "缩放"],

            "t": ["文本", "文本"],
            "l": ["文本", "直线"],
            "v": ["文本", "折线"],
            "r": ["文本", "矩形"],
            "c": ["文本", "圆形"],
            "e": ["文本", "椭圆"],

            "s": ["画笔", "画笔"],
            "f": ["画笔", "画刷"],

            "0": ["黑色", "黑色"],
            "1": ["黑色", "红色"],
            "2": ["黑色", "绿色"],
            "3": ["黑色", "黄色"],
            "4": ["黑色", "蓝色"],
            "5": ["黑色", "紫色"],
            "6": ["黑色", "青色"],
            "7": ["黑色", "白色"],
            "8": ["黑色", "随机色"],
            "9": ["黑色", "默认色"],

            "j": ["刷新", "刷新"],
            "g": ["播放", "播放"],
            "b": ["回退", "回退"],
            "q": ["清空", "清空"],

            "Escape": ["取消", "取消"],
            " ": ["输入", "输入"],
        },
    }

    var action = kit.AppendAction(kit.AppendChild(output, [{view: ["action"]}]).last, [
        ["折线图", "股价图", "柱状图", "饼状图"],
        ["移动", "旋转", "缩放"],
        ["文本", "直线", "折线", "矩形", "圆形", "椭圆"],
        ["辅助点", "辅助线"],
        ["画笔", "画刷"],
        ["黑色", "红色", "绿色", "黄色", "蓝色", "紫色", "青色", "白色", "随机色", "默认色"],
        "", "清屏", "刷新", "播放", "回退",
        "", "标签", "快捷键",
    ], function(value, event) {
        var map = what.trans[value]
        conf[map[0]] && (conf[map[0]] = map[1]) || what[map[0]] && what[map[0]](value, event)
        what.refresh()
    })

    var canvas = kit.AppendChild(output, [{view: ["draw", "canvas"], data: {width: width+20, height: height+20,
        onclick: function(event) {
            what.pushPoint(what.transform({x: event.offsetX, y: event.offsetY}), event.clientX, event.clientY)
        }, onmousemove: function(event) {
            what.movePoint(what.transform({x: event.offsetX, y: event.offsetY}), event.clientX, event.clientY)
        },
    }}]).last.getContext("2d")

    var status = kit.AppendStatus(kit.AppendChild(output, [{view: ["status"]}]).last, [{name: "nshape"}, {"className": "cmd", style: {width: (output.clientWidth - 100)+"px"}, data: {autocomplete: "off"}, input: ["cmd", function(event) {
        var target = event.target
        event.type == "keyup" && event.key == "Enter" && what.parse(target.value) && (!target.History && (target.History=[]),
            target.History.push(target.value), target.Current=target.History.length, target.value = "")
        event.type == "keyup" && page.oninput(event), event.stopPropagation()

    }]}, {name: "xy"}], function(value, name, event) {

    })

    return what.reset().refresh()
}