// ==UserScript==
// @name         Diep.style
// @namespace    https://www.reddit.com/r/Diepio/comments/5y1np1/diepstyle_plugin/
// @version      0.091
// @description  Press Esc twice to toggle the menu,and save the setting
// @author       sbk2015
// @match        http://*diep.io/*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    var localStorage;
    var saveList;
    var nowSetting;
    var isLocal;
    var clone;
    jsInit();
    setTimeout(pluginInit, 1000);

    function jsInit() {
        Storage.prototype.setObject = function(key, value) {
            this.setItem(key, JSON.stringify(value));
        }
        Storage.prototype.getObject = function(key) {
            var value = this.getItem(key);
            return value && JSON.parse(value);
        }
        clone = function(obj) {
            return JSON.parse(JSON.stringify(obj));
        }
        window.diepStyle = {};
        localStorage = window.localStorage;
        if (location.href.indexOf('file://') >= 0) {
            var warning = false;
            warning ? '' : console.warn('off warning');
            isLocal = true;
            window.input = {
                set_convar: function() { warning ? console.warn('block input.set_convar') : '' },
                execute: function() { warning ? console.warn('block input.set_execute') : '' }
            }
        }
    }

    function pluginInit() {
        storageInit();
        keyListen();
        tempInit();
        styleInit();
        diepStyle.onColor = onColor;
        diepStyle.storageInit = storageInit;
        //togglePanel(true);

        function storageInit(cmd) {
            var th = 50,
            netTH = 110;
            var colors = [
            { id: 2, name: 'You FFA', color: '00b1de' },
            { id: 15, name: 'Other FFA', color: 'f14e54' },
            { id: 3, name: 'Blue Team', color: '00b1de' },
            { id: 4, name: 'Red Team', color: 'f14e54' },
            { id: 5, name: 'Purple Team', color: 'bf7ff5' },
            { id: 6, name: 'Green Team', color: '00e16e' },
            { id: 17, name: 'Fallen team', color: 'c6c6c6' },
            { id: 12, name: 'Arena Closer', color: 'ffe869' },
            { id: 8, name: 'Square', color: 'ffe869' },
            { id: 7, name: 'Green Square?', color: '89ff69' },
            { id: 9, name: 'Triangle', color: 'fc7677' },
            { id: 10, name: 'Pentagon', color: '768dfc' },
            { id: 11, name: 'Crasher', color: 'f177dd' },
            { id: 14, name: 'Waze Wall', color: 'bbbbbb' },
            { id: 1, name: 'Turret', color: '999999' },
            { id: 0, name: 'Smasher', color: '4f4f4f' },
            { id: th++, name: 'All Bars', color: '000000', cmd: 'ren_bar_background_color' },
            { id: th++, name: 'Outline', color: '555555', cmd: 'ren_stroke_solid_color' },
            { id: 13, name: 'Leader Board', color: '64ff8c' },
            { id: th++, name: 'Xp Bar', color: 'ffde43', cmd: 'ren_xp_bar_fill_color' },
            { id: th++, name: 'Score Bar', color: '43ff91', cmd: 'ren_score_bar_fill_color' },
            { id: th++, name: 'Health Bar1', color: '85e37d', cmd: 'ren_health_fill_color' },
            { id: th++, name: 'Health Bar2', color: '555555', cmd: 'ren_health_background_color' },
            { id: th++, name: 'Grid Color', color: '000000', cmd: 'ren_grid_color' },
            { id: th++, name: 'Minimap 1', color: 'CDCDCD', cmd: 'ren_minimap_background_color' },
            { id: th++, name: 'Minimap 2', color: '797979', cmd: 'ren_minimap_border_color' },
            { id: th++, name: 'Background 1', color: 'CDCDCD', cmd: 'ren_background_color' },
            { id: th++, name: 'Background 2', color: '797979', cmd: 'ren_border_color' },
            { id: netTH++, name: 'UI Color1', color: 'e69f6c', cmd: 'ui_replace_colors' },
            { id: netTH++, name: 'UI Color2', color: 'ff73ff', cmd: 'ui_replace_colors' },
            { id: netTH++, name: 'UI Color3', color: 'c980ff', cmd: 'ui_replace_colors' },
            { id: netTH++, name: 'UI Color4', color: '71b4ff', cmd: 'ui_replace_colors' },
            { id: netTH++, name: 'UI Color5', color: 'ffed3f', cmd: 'ui_replace_colors' },
            { id: netTH++, name: 'UI Color6', color: 'ff7979', cmd: 'ui_replace_colors' },
            { id: netTH++, name: 'UI Color7', color: '88ff41', cmd: 'ui_replace_colors' },
            { id: netTH++, name: 'UI Color8', color: '41ffff', cmd: 'ui_replace_colors' },
            ]
            diepStyle.colorMap = new Map(colors.map(function(elem) {
                return [elem.id, { color: elem.color, cmd: elem.cmd || 'no cmd' }]
            }));

            diepStyle.uiColorMap = function(cmd) {
                var uiTH = nowSetting.colors.findIndex(elem => elem.name == 'UI Color1');
                var colorBunch = '';
                var arr = [];
                if (cmd == '0x') {
                    for (var i = 0; i < 8; i++) {
                        colorBunch = ' 0x' + nowSetting.colors[uiTH + i].color + colorBunch;
                    }
                    return colorBunch;
                }
                if (cmd == 'array') {
                    for (var i = 0; i < 8; i++) {
                        arr.push(nowSetting.colors[uiTH + i].color);
                    }
                    return arr;
                }
            }
            var renders = [
            { name: 'Grid Alpha', value: 0.1, cmd: 'grid_base_alpha' },
            { name: 'Outline Intensity', value: 0.25, cmd: 'stroke_soft_color_intensity' },
            { name: 'Show Outline', value: false, cmd: 'stroke_soft_color',reverse: true },
            { name: 'Border Alpha', value: 0.1, cmd: 'border_color_alpha' },
            { name: 'UI Scale', value: 1, cmd: 'ui_scale' },
            { name: 'Clear UI', value: false, cmd: 'ui',reverse: true },
            { name: 'Show FPS', value: false, cmd: 'fps' },
            { name: 'Show Health', value: false, cmd: 'raw_health_values' },
            { name: 'Hide Name', value: false, cmd: 'names',reverse: true },
            ];

            ;(function checkHasStorage() {
                var _localStorage = localStorage.getObject('diepStyle')
                var page = 1;
                if (nowSetting && nowSetting.saveTH) {
                    page = nowSetting.saveTH;
                }
                if (_localStorage && _localStorage.saveList) {
                    saveList = _localStorage.saveList;
                    nowSetting = _localStorage.nowSetting;
                }
                if (!nowSetting || cmd == 'reset') {
                    nowSetting = getBlankSetting();
                    nowSetting.saveTH = page;
                }
                if (!saveList) saveList = getBlankSaveList();
                saveList[0]=getBlankSetting();
                ;(function checkMissing(){
                    var plain=getBlankSetting();
                    plain.renders.forEach((elem,th)=>{
                        var index=nowSetting.renders.findIndex(now=>elem.cmd==now.cmd);
                        if(index<0) {
                            nowSetting.renders.splice(th,0,elem);
                            saveList[nowSetting.saveTH].renders.splice(th,0,elem)
                        }
                    })
                })();
            })();

            ;(function command(){
                diepStyle.command={};
                renders.forEach(elem=>{
                    diepStyle.command[elem.cmd]={};
                    if(elem.reverse) diepStyle.command[elem.cmd].reverse=true;
                })
                diepStyle.command.fn= function(cmd, value) {
                    nowSetting.renders=nowSetting.renders.map(elem=>{
                        if(elem.cmd==cmd) elem.value=value;
                        return elem
                    })
                    if (diepStyle.command[cmd].reverse) value = !value;
                    input.set_convar("ren_" + cmd, value);
                };
            })();

            function getBlankSetting() {
                return { version: 0.08, saveTH: 1, lock: false, colors, renders };
            }

            function getBlankSaveList() {
                var list = [];
                for (var i = 0; i < 6; i++) {
                    list[i] = getBlankSetting();
                    if (i == 0) list[i].isDefault = 'default,no save';
                }
                return clone(list);
            };
            Storage.prototype.pluginSave = function() {
                saveList[nowSetting.saveTH] = clone(nowSetting);
                var _storageObj = {
                    nowSetting: clone(nowSetting),
                    saveList: clone(saveList)
                }
                localStorage.setObject('diepStyle', _storageObj);
            };
            localStorage.pluginSave();
        }

        function keyListen() {
            var input = '';
            document.addEventListener('keyup', function(evt) {
                var that = this;
                if (that.pluginOn == undefined) that.pluginOn = false;
                var e = window.event || evt;
                var key = e.which || e.keyCode;
                input += key;
                if (input.indexOf('2727') >= 0) {
                    input = '';
                    that.pluginOn = !that.pluginOn
                    togglePanel(that.pluginOn);
                    (function save() {
                        if (!that.pluginOn) {
                            localStorage.pluginSave();
                        };
                    })();
                }
                if (input.length > 10) input = input.substring(input.length - 10);
            });
        }

        function tempInit() {

            var colorObj = { th: 0 };
            var setObj = { th: 0 }

            diepStyle.export = exportJSON;
            init1();
            loadColor();
            setTimeout(diepStyle.resetRender, 1500);
            diepStyle.resetColor = loadColor;

            function init1() {
                diepStyle.resetRender = resetRender;

                var title = `<div class="title">Diep.Style Ver 0.08<br>
                Press Esc twice to toggle this</div>`;

                var colorPlane = function(id) {
                    return `{position:'left',width:300, height:200,onFineChange:'diepStyle.onColor(${id},this)'}`
                }

                colorObj.setClass = function() {
                    return `colorBlock colorBlock${this.th++}`
                }
                setObj.setClass = function() {
                    return `setting setting${this.th++}`
                }

                function resetRender(cmd) {
                    document.querySelectorAll('#styleSetting .render').forEach(function(elem) {
                        elem.outerHTML = ``
                    })
                    var it = document.querySelector('.renderBegin')
                    it.insertAdjacentHTML('afterend', getRenderBody());
                    it.remove();
                    nowSetting.renders.forEach(function(elem) {
                        diepStyle.command.fn(elem.cmd, elem.value);
                    });
                    listenerInit(cmd);

                }
                var bodyRender = getRenderBody();
                var bodyColor = getColorBody();
                var bodyImport = getImportBody();

                function getRenderBody() {
                    var renders = nowSetting.renders;
                    var th = -1;
                    var html = `
                    <div class="renderBegin">Render Setting</div>

                    <div class="row render">
                    <div class="cell">${renders[++th].name} <br><span class="grid_base_value">${renders[th].value}</span></div>
                    <div class="cell"><input type="range" name="grid_base_alpha" value=${renders[th].value*100} max="200"></div>
                    </div>
                    <div class="row render">
                    <div class="cell">${renders[++th].name} <br><span class="stroke_intensity_value">${renders[th].value}</span></div>
                    <div class="cell"><input type="range" name="stroke_soft_color_intensity" value=${renders[th].value*100} max="100"></div>
                    </div>
                    <div class="row render">
                    <div class="cell">${renders[++th].name}</div>
                    <div class="cell"><input type="checkbox" name="stroke_soft_color" ${renders[th].value?'checked':''}></div>
                    </div>
                    <div class="row render">
                    <div class="cell">${renders[++th].name} <br><span class="border_value">${renders[th].value}</span></div>
                    <div class="cell"><input type="range" name="border_color_alpha" value=${renders[th].value*100} max="100"></div>
                    </div>
                    <div class="row render">
                    <div class="cell">${renders[++th].name} <br><span class="ui_scale_value">${renders[th].value}</span></div>
                    <div class="cell"><input type="range" name="ui_scale" value=${renders[th].value*100} max="200"></div>
                    </div>
                    <div class="row render">
                    <div class="cell">${renders[++th].name}</div>
                    <div class="cell"><input type="checkbox" name="ui" ${renders[th].value?'checked':''}></div>
                    </div>
                    <div class="row render">
                    <div class="cell">${renders[++th].name}</div>
                    <div class="cell"><input type="checkbox" name="fps" ${renders[th].value?'checked':''}></div>
                    </div>
                    <div class="row render">
                    <div class="cell">${renders[++th].name}</div>
                    <div class="cell"><input type="checkbox" name="raw_health_values" ${renders[th].value?'checked':''}></div>
                    </div>
                    <div class="row render">
                    <div class="cell">${renders[++th].name}</div>
                    <div class="cell"><input type="checkbox" name="names" ${renders[th].value?'checked':''}></div>
                    </div>
                    `
                    return html;
                }

                function getColorBody() {
                    var it = '<div class="row colorBegin">Color Setting</div>\n' +
                    `<div class="row header hide theme">
                    <div class="cell noBoard name"></div> 
                    <div class="cell noBoard author"></div>
                    </div>`
                    nowSetting.colors.forEach(function(elem, th) {
                        var id = elem.id;
                        it += `
                        <div class="row colorBlock colorBlock${th}">
                        <div class="cell"></div>
                        <div class="cell"><input class="jscolor ${colorPlane(`${id}`)}">  </div>
                        </div>
                        `;
                    });
                    return it
                }
                function getImportBody() {
                    var html=
                    `
                    <div class="importBegin">Import / Export Save</div>
                    <div class="row">
                    <div class="cell">
                    <button class="import">Import</button>
                    </div>
                    <div class="cell">
                    <button class="export">Export</button>
                    </div>
                    </div>
                    `
                    return html
                }

                var allBody =
                `
                <div class="pluginBody">${title}
                <hr>
                <div class="table">
                <span class="pluginLock"></span>
                ${bodyRender} ${bodyColor} ${bodyImport} <br>
                </div>
                </div>
                `;
                var getSaveBtns=function() {
                    var btn='';
                    for (var i = 0; i < 6; i++) {
                        if(i==0) {btn+=`<button>Default</button>`;continue;}
                        btn+=`<button>${i}</button>`;
                    }
                    return btn;
                }
                var footer=
                `
                <div class="footer">
                <div class="saveBtns">${getSaveBtns()}</div>
                <div class="otherBtns">
                <span class="lock"><button>Lock</button></span>
                <span class="reset"><button>Reset</button></span>
                </div>
                </div>
                `
                var id = 0;
                var temp = `<div id="styleSetting"> ${allBody} ${footer} </div>`;
                document.querySelector('body').insertAdjacentHTML('afterend', temp);

                addScript('https://greasyfork.org/scripts/27023-jscolor/code/JSColor.js?version=173802');

                function addScript(src) {
                    var s = document.createElement('script');
                    s.setAttribute('src', src);
                    document.body.appendChild(s);
                }

                function listenerInit(cmd) {
                    ;(function (){
                        var theName="grid_base_alpha";
                        document.querySelector(`input[name=${theName}]`).addEventListener('input',
                            function(e) {
                                var value = (e.target.value - e.target.value % 2) / 100
                                document.querySelector('.grid_base_value').innerHTML = value;
                                diepStyle.command.fn(theName, value);
                            });
                    })();
                    ;(function (){
                        var theName="stroke_soft_color_intensity";
                        document.querySelector(`input[name=${theName}]`).addEventListener('input',
                            function(e) {
                                var value = (e.target.value - e.target.value % 5)/100
                                document.querySelector('.stroke_intensity_value').innerHTML = value;
                                diepStyle.command.fn(theName, value);
                            });
                    })();
                    ;(function (){
                        var theName="stroke_soft_color";
                        document.querySelector(`input[name=${theName}]`).addEventListener('change',
                            function(e) {diepStyle.command.fn(theName, e.target.checked); });
                    })();
                    ;(function (){
                        var theName="border_color_alpha";
                        document.querySelector(`input[name=${theName}]`).addEventListener('input',
                            function(e) {
                                var value = (e.target.value - e.target.value % 2) / 100
                                document.querySelector('.border_value').innerHTML = value;
                                diepStyle.command.fn(theName, value);
                            });
                    })();
                    ;(function (){
                        var theName="ui_scale";
                        document.querySelector(`input[name=${theName}]`).addEventListener('input',
                            function(e) {
                                var value = (e.target.value - e.target.value % 2) / 100
                                document.querySelector(`.${theName}_value`).innerHTML = value;
                                diepStyle.command.fn(theName, value);
                            });
                    })();
                    ;(function (){
                        var theName="ui";
                        document.querySelector(`input[name=${theName}]`).addEventListener('change',
                            function(e) {diepStyle.command.fn(theName, e.target.checked); });
                    })();
                    ;(function (){
                        var theName="fps";
                        document.querySelector(`input[name=${theName}]`).addEventListener('change',
                            function(e) {diepStyle.command.fn(theName, e.target.checked); });
                    })();
                    ;(function (){
                        var theName="raw_health_values";
                        document.querySelector(`input[name=${theName}]`).addEventListener('change',
                            function(e) {diepStyle.command.fn(theName, e.target.checked); });
                    })();
                    ;(function (){
                        var theName="names";
                        document.querySelector(`input[name=${theName}]`).addEventListener('change',
                            function(e) {diepStyle.command.fn(theName, e.target.checked); });
                    })();
                    if(cmd=='reset') return;
                    document.querySelector('button.import').addEventListener('click',function(e) {
                        var example='[\n{"cmd":"ui_scale","value":"1.5"},'+
                        '\n{"id":"8","value":"888888"}\n]';
                        var gotValue=prompt('Enter The JSON\nExample:\n'+example,example.replace(/\s/g, ''));
                        if(!isJson(gotValue)){
                            alert('Code Incorrect\nPlz git gud and check your JSON');
                            return
                        };
                        var gotArr=JSON.parse(gotValue);
                        if(!gotArr) return;
                        gotArr.forEach(function(elem) {
                            nowSetting.colors=nowSetting.colors.map(function(now) {
                                if(elem.id && now.id==elem.id) now.color=elem.value;
                                if(!elem.id&&elem.cmd && now.cmd==elem.cmd) now.color=elem.value;
                                return now
                            });
                            nowSetting.renders=nowSetting.renders.map(function(now) {
                                if(elem.cmd && now.cmd==elem.cmd) now.value=elem.value;
                                return now
                            });
                            if(elem.cmd=='ui_replace_colors') {
                                var uiTH = nowSetting.colors.findIndex(elem => elem.name == 'UI Color1');
                                for (var i = 0; i < 8; i++) {
                                    nowSetting.colors[uiTH + i].color=elem.value[i];
                                }
                            };
                            if(elem.theme){
                                if(elem.theme.name||elem.theme.author) nowSetting.theme=elem.theme;
                            }else{
                                elem.theme={};
                            };
                        });
                        document.querySelectorAll('.saveBtns button')[nowSetting.saveTH].click();
                        function isJson(str) {
                            try {
                                JSON.parse(str);
                            } catch (e) {
                                return false;
                            }
                            if(typeof JSON.parse(str)=='object') return true;
                        }
                    });
                    document.querySelector('button.export').addEventListener('click',function(e) {
                        prompt('Copy the Json',diepStyle.export('one'));
                    });
                    document.querySelectorAll('.saveBtns button').forEach((elem, th) => {
                        elem.addEventListener('click', function() {
                            localStorage.pluginSave();
                            nowSetting=clone(saveList[th]);
                            nowSetting.saveTH=th;
                            diepStyle.resetColor();
                            diepStyle.resetRender('reset');
                            updateSaveBtns();
                        })
                    })
                    document.querySelector('.lock button').addEventListener('click',
                        function(e) {
                            nowSetting.lock=!nowSetting.lock;
                            updateSaveBtns();
                        });
                    document.querySelector('.reset button').addEventListener('click',
                        function(e) {
                            diepStyle.storageInit('reset');
                            diepStyle.resetColor();
                            diepStyle.resetRender('reset');
                            updateSaveBtns();
                        });
                    updateSaveBtns();
                    function updateSaveBtns() {
                        var theTH=nowSetting.saveTH;
                        var status=saveList[theTH];
                        var lockBtn=document.querySelector('.lock button');
                        var resetBtn=document.querySelector('.reset button');
                        if(theTH==0){
                            lockBtn.disabled = true;
                            resetBtn.disabled = true;
                            nowSetting.lock=true;
                        }else{
                            resetBtn.disabled = nowSetting.lock;
                            lockBtn.disabled = false;
                        }
                        if(resetBtn.disabled) {
                            document.querySelector('.table').classList.add('noClicks');
                            lockBtn.innerHTML='locked';
                        }else{
                            document.querySelector('.table').classList.remove('noClicks');
                            lockBtn.innerHTML='no lock';
                        }
                        ;(function (){
                            document.querySelectorAll('.saveBtns button').forEach(function(elem, th) {
                                elem.classList.remove('chosenBtn');
                                if(theTH==th) elem.classList.add('chosenBtn');
                            })
                        })();
                    }
                }
            }
            function loadColor() {
                if(nowSetting.theme){
                    document.querySelector('.theme').classList.remove('hide');
                    var it=document.querySelector('.theme .name');
                    it.innerText='Theme '+nowSetting.theme.name;
                    it=document.querySelector('.theme .author');
                    it.innerText='by '+nowSetting.theme.author;
                }else{
                    document.querySelector('.theme').classList.add('hide');
                }

                nowSetting.colors.some(function(elem, th) {
                    var target = document.querySelector(`.colorBlock${th}`);
                    if (!target || !target.querySelector('.cell input').jscolor) {
                        setTimeout(loadColor, 500);
                        return true
                    }
                    onColor(elem.id, elem.color);
                    target.querySelector('.cell').innerHTML = elem.name;
                    target.querySelector('.cell input').jscolor.fromString(elem.color);
                })
            }
            function exportJSON(cmd) {
                var toExport=[];
                if(cmd=='one') toExport=write(nowSetting);
                if(cmd=='all') saveList.forEach(elem=>toExport.push(write(elem)));
                return JSON.stringify(toExport);

                function write(now) {
                    var array=[];
                    now.colors.forEach(function(elem){
                        if(elem.id&&elem.id<50) array.push({id:elem.id,value:elem.color});
                        if(elem.id&&elem.id>=50&&elem.id<100) array.push({cmd:elem.cmd,value:elem.color});
                        if(!elem.id&&elem.cmd) array.push({cmd:elem.cmd,value:elem.color});
                    });
                    array.push({cmd:'ui_replace_colors',value:diepStyle.uiColorMap('array')});
                    now.renders.forEach(function(elem){
                        array.push({cmd:elem.cmd,value:elem.value});
                    });
                    if(now.theme){
                        array.unshift({theme:{
                            name:now.theme.name||'',
                            author:now.theme.author||''}});
                    }else{
                        array.unshift({theme:{name:'',author:''}});
                    }
                    return array
                }
            }
        }
        function onColor(id, e) {
            var target = id;
            var color=e.toString();
            if (id >= 0 && id < 50) {
                input.execute(`net_replace_color ${target} 0x${color}`)
            } else if(id >= 50 && id < 100){
                var cmd=diepStyle.colorMap.get(id).cmd
                input.set_convar(cmd, `0x${color}`);
            } else{
                input.execute('ui_replace_colors'+diepStyle.uiColorMap('0x'));
            }
            nowSetting.colors = nowSetting.colors.map(function(elem) {
                if (elem.id === id) elem.color = color; 
                return elem
            })
        }
        function styleInit() {
            addGlobalStyle(`#styleSetting{padding: 0.2em; margin:0.2em; position: absolute;top: 0;right: 0;width: 30%;
                min-width:20em; background-color: rgba(200,200,200,0.8);display:none;border: 1px solid black;height: 92vh;}`);
            addGlobalStyle(".table{ display: table; text-align: center; width: 99%;}");
            addGlobalStyle(".row{ display: table-row; }");
            addGlobalStyle(`.cell{ display: table-cell;}`);
            addGlobalStyle(`.cell:not(.noBoard){ display: table-cell; padding: 0.1em 0.3em;border: 1px solid black;}`);
            addGlobalStyle("input[type=checkbox],input[type=range]{transform: scale(1.2); }");

            addGlobalStyle(`.pluginBody{height: 90%; overflow-y: auto;}`);
            addGlobalStyle(`.colorBegin, .renderBegin, .importBegin,.header{font-size:1.2em; line-height:1.5em;}`);
            addGlobalStyle(`.saveBtns button{margin: 0 1.5%; padding: 0.2em 0.5em;}`);
            addGlobalStyle(`@-moz-document url-prefix() {.saveBtns button{margin: 0 1%;padding: 0.1em 0.3em;} } }`);
            addGlobalStyle(`.otherBtns button{margin: 0 1.5%; padding: 0.2em 0.5em;}`);
            addGlobalStyle(`.footer{text-align:center;height:10%; border: 1px solid black;}`);
            addGlobalStyle(`.footer > *{margin:0.7vh 0;}`);

            addGlobalStyle(`.backRed{background-color:#f14e54}`);
            addGlobalStyle(`.chosenBtn{-webkit-filter: brightness(0.8);filter:brightness(0.8);}`)
            addGlobalStyle(`.noClicks{pointer-events:none; -webkit-filter: opacity(50%); filter: opacity(50%);}`)
            addGlobalStyle(`.hide{display:none}`)

            function addGlobalStyle(css) {
                var head, style;
                head = document.getElementsByTagName('head')[0];
                if (!head) {return;}
                style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = css;
                head.appendChild(style);
            }
        }
    }

    function togglePanel(tf) {
        if(tf){
            try{
                document.querySelector('#styleSetting').style.display = "block";
            }catch(err){
                var warn='\n\nYou can DELETE ALL PLUGIN SAVES to fix this'+
                '\nType delete to confirm'+
                '\nor cancel to download all saves';
                var gotValue=prompt('Got an error\n'+err+warn);
                if(gotValue=='delete'){
                    localStorage.removeItem('diepStyle');
                    alert('Deleted,refresh to take effect');
                    return
                }else{
                    download('diep.style saves.txt',diepStyle.export('all'))
                };
            }
        }else{
            document.querySelector('#styleSetting').style.display = "none";
        }
        function download(filename, text) {
            var element = document.createElement('a');
            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
            element.setAttribute('download', filename);

            element.style.display = 'none';
            document.body.appendChild(element);

            element.click();

            document.body.removeChild(element);
        }
    }
})();