// ==UserScript==
// @name         背景変更(Feederチャット)
// @namespace    http://tampermonkey.net/
// @version      0.10
// @description  Feederチャットの背景を変更するスクリプトです。
// @author       You
// @match        *.x-feeder.info/*/
// @match        *.x-feeder.info/*/sp/
// @exclude      *.x-feeder.info/*/settings/**
// @require      https://greasyfork.org/scripts/396472-yaju1919/code/yaju1919.js?version=798050
// @require      https://greasyfork.org/scripts/387509-yaju1919-library/code/yaju1919_library.js?version=755144
// @require      https://greasyfork.org/scripts/388005-managed-extensions/code/Managed_Extensions.js?version=720959
// @grant        GM.setValue
// @grant        GM.getValue
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    // カスタマイズ領域
    const debugInfoColor = "lightyellow"; // デバッグ情報の色
    const debugInfoBorderRadius = "8px"; // デバッグ情報の枠の角
    //-----------------
    let inputBoolBtn, inputDebugBoolBtn, inputChangeInterval, inputImgURL, inputFilterColor, inputFilterOpacity, inputBlur, inputBrightness, inputSaturate, inputSepia;

    const addBtn = (h, title, func) => {
        return $("<button>").text(title).click(func).appendTo(h);
    };
    const backgroundColor_copy = $("#wrapper").css("backgroundColor");
    const backgroundImage_copy = $("body").css("backgroundImage");
    const setConfig = () => {
        const h = $("<div>");
        let countUp_flag = false;
        let start_flag = false;
        let exeFunc = () => start_flag ? funcMainAndChange() : null;
        inputBoolBtn = yaju1919.addInputBool(h, {
            title: "壁紙変更",
            value: false,
            change: () => {
                countUp_flag = true;
                exeFunc();
            },
        });
        inputDebugBoolBtn = yaju1919.addInputBool(h, {
            title: "デバッグ情報",
            value: false,
            change: exeFunc,
        });
        let debugInfoTitle = $("<div>").appendTo(h); // "デバッグ情報"という文字列を表示する要素
        let debugInfo = $("<ul>").appendTo(h); // デバッグ情報を表示する要素
        inputChangeInterval = yaju1919.addInputNumber(h, {
            title: "切り替え時間",
            placeholder: "背景画像の切り替え時間(単位:秒)",
            save: "AM_inputChangeInterval",
            width: "90%",
            value: 10,
            min: 10,
            max: Infinity,
            change: exeFunc,
        });
        inputImgURL = yaju1919.addInputText(h, {
            title: "画像のURL",
            placeholder: "背景にしたい画像のURLを入力(複数の場合は改行で区切って入力)",
            save: "AM_inputImgURL",
            width: "90%",
            textarea: true,
            change: exeFunc,
        });
        inputFilterColor = yaju1919.addInputText(h, {
            title: "フィルタの色",
            placeholder: "カラーコードを入力(空の場合は黒色)",
            save: "AM_inputFilterColor",
            width: "90%",
            change: exeFunc,
        });
        let h2 = $("<div>").appendTo(h);
        inputFilterOpacity = yaju1919_library.appendInputRange(h, {
            save: "AM_inputFilterOpacity",
            width: "90%",
            value: 0,
            min: 0,
            max: 100,
            step: 1,
            change: exeFunc,
        });
        let h3 = $("<div>").appendTo(h);
        inputBlur = yaju1919_library.appendInputRange(h, {
            save: "AM_inputBlur",
            width: "90%",
            value: 0,
            min: 0,
            max: 100,
            step: 1,
            change: exeFunc,
        });
        let h4 = $("<div>").appendTo(h);
        inputBrightness = yaju1919_library.appendInputRange(h, {
            save: "AM_inputBrightness",
            width: "90%",
            value: 100,
            min: 0,
            max: 500,
            step: 1,
            change: exeFunc,
        });
        let h5 = $("<div>").appendTo(h);
        inputSaturate = yaju1919_library.appendInputRange(h, {
            save: "AM_inputSaturate",
            width: "90%",
            value: 100,
            min: 0,
            max: 200,
            step: 1,
            change: exeFunc,
        });
        let h6 = $("<div>").appendTo(h);
        inputSepia = yaju1919_library.appendInputRange(h, {
            save: "AM_inputSepia",
            width: "90%",
            value: 0,
            min: 0,
            max: 100,
            step: 1,
            change: exeFunc,
        });
        const rangeValueLoad = () => { // 調整バーの数値を読み込む
            h2.text(`フィルタの透明度 : ${inputFilterOpacity()}`);
            h3.text(`ぼかしの強度 : ${inputBlur()}`);
            h4.text(`画像の明るさ : ${inputBrightness()}`);
            h5.text(`彩度 : ${inputSaturate()}`);
            h6.text(`セピア : ${inputSepia()}`);
        };
        const setFilter = filter => { // filterを追加
            const boolBtn = inputBoolBtn();
            if (boolBtn) {
                let elm = $("<div>").appendTo($("body"));
                elm.css({
                    "z-index": "-114515",
                    "background": "inherit",
                    "-webkit-filter": filter,
                    "-moz-filter": filter,
                    "-o-filter": filter,
                    "-ms-filter": filter,
                    "filter": filter,
                    "position": "fixed",
                    "top": "0px",
                    "left": "0px",
                    "right": "0px",
                    "bottom": "0px",
                });
            };
        };
        addBtn(h, "初期値に戻す", () => {
            let e = h.find("input");
            e.eq(4).val(0);
            e.eq(5).val(0);
            e.eq(6).val(100);
            e.eq(7).val(100);
            e.eq(8).val(0);
            const filter = `blur(${inputBlur()}px) brightness(${inputBrightness()}%) saturate(${inputSaturate()}%) sepia(${inputSepia}%)`; // CSSのfilterプロパティ
            setFilter(filter);
            rangeValueLoad();
        });
        const removeBgImg = () => { // 背景画像を削除
            $("body").children().each((i, e) => e.style.zIndex === "-114515" ? $(e).remove() : null);
            $("body").removeAttr('style').css({
                "backgroundImage": "url(" + backgroundImage_copy + ")",
            });
            yaju1919.setBgImg(null, {
                opacity: 0
            });
            $("#wrapper").css({
                "backgroundColor": backgroundColor_copy
            });
        };
        const removeDebugInfo = () => { // デバッグ情報を削除
            debugInfo.empty();
            debugInfoTitle.text("").removeAttr('style');
            debugInfo.removeAttr('style');
        };
        let count = 0;
        const main = () => {
            const boolBtn = inputBoolBtn();
            const debugBoolBtn = inputDebugBoolBtn();
            const changeInterval = inputChangeInterval();
            const imgURL = inputImgURL();
            const filterColor = inputFilterColor();
            const filterOpacity = inputFilterOpacity();
            // CSSのfilterプロパティに関する値
            const blur = inputBlur();
            const brightness = inputBrightness();
            const saturate = inputSaturate();
            const sepia = inputSepia();
            //--------------------------------
            const imgURLs = imgURL.split("\n").filter(v => v);
            const filter = `blur(${blur}px) brightness(${brightness}%) saturate(${saturate}%) sepia(${sepia}%)`; // CSSのfilterプロパティ
            // 調整バーの数値表示
            h2.text(`フィルタの透明度 : ${filterOpacity}`);
            h3.text(`ぼかしの強度 : ${blur}`);
            h4.text(`画像の明るさ : ${brightness}`);
            h5.text(`彩度 : ${saturate}`);
            h6.text(`セピア : ${sepia}`);
            //-------------------
            if (count > imgURLs.length - 1) {
                count = 0;
            };
            // デバッグ情報を表示
            removeDebugInfo();
            if (debugBoolBtn) {
                debugInfoTitle.text("デバッグ情報").css({
                    "color": debugInfoColor,
                });
                debugInfo.css({
                    "border": "5px solid",
                    "border-color": debugInfoColor,
                    "border-radius": debugInfoBorderRadius,
                });
                let debugInfoText = `inputBoolBtn : ${boolBtn}\ninputDebugBoolBtn : ${debugBoolBtn}\ninputChangeInterval : ${changeInterval}\ninputImgURL : ${imgURL}\ninputFilterColor : ${filterColor}\ninputFilterOpacity : ${filterOpacity}\ninputBlur : ${blur}\ninputBrightness : ${brightness}\ninputSaturate : ${saturate}\ninputSepia : ${sepia}\nimgURLs : ${imgURLs}\nfilter : ${filter}\ncount : ${count}\nimgURLs[count] : ${imgURLs[count]}\nimgURLs.length : ${imgURLs.length}`;
                let debugInfoArr = debugInfoText.split("\n");
                let debugInfoElm;
                for (let i = 0; i < debugInfoArr.length; i++) {
                    debugInfoElm = $("<li>").appendTo(debugInfo);
                    debugInfoElm.text(debugInfoArr[i]).css({
                        "list-style": "none",
                        "border": "1px solid",
                        "border-color": debugInfoColor,
                        "color": debugInfoColor,
                    });
                };
            };
            //-------------------
            removeBgImg();
            if (imgURL !== "" && boolBtn) {
                $("#wrapper").css({
                    "backgroundColor": "transparent"
                });
                yaju1919.setBgImg(imgURLs[count], {
                    color: filterColor,
                    opacity: Number(filterOpacity) / 100
                });
                setFilter(filter);
                if (countUp_flag) { // countUp_flagがtrueならcountの値を増やす
                    countUp_flag = false;
                    count++;
                };
            };
        };
        let si, change = () => {
            {
                if (!inputChangeInterval) return;
                const changeInterval = inputChangeInterval();
                clearInterval(si);
                si = setInterval(() => {
                    countUp_flag = true;
                    main();
                }, changeInterval * 1000);
            };
        };
        const funcMainAndChange = () => {
            change();
            main();
        };
        start_flag = true;
        main();
        rangeValueLoad(); // 起動時に調整バーの数値を読み込む
        return h;
    };
    win.Managed_Extensions["背景変更"] = {
        config: setConfig,
        tag: "装飾",
    };
})();