// ==UserScript==
// @name         背景変更(Feederチャット)
// @namespace    http://tampermonkey.net/
// @version      0.12
// @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 backgroundColor_copy = $("#wrapper").css("backgroundColor");
    const backgroundImage_copy = $("body").css("backgroundImage");
    const addBtn = (h, title, func) => { // ボタンを追加する関数
        return $("<button>").text(title).click(func).appendTo(h);
    }
    let inputImgSetBoolBtn, inputChangeInterval, inputImgURL, inputFilterColor, inputFilterOpacity, inputBlur, inputBrightness, inputSaturate, inputSepia;
    const setConfig = () => {
        const h = $("<div>");
        let countUp_flag = false;
        let start_flag = false;
        let st; // setTimeoutのidを格納する変数
        let exeFunc = () => start_flag ? funcMainAndChange() : null; // start_flagがtrueならchange関数とmain関数を実行
        // input要素などを追加
        inputImgSetBoolBtn = yaju1919.addInputBool(h, {
            title: "壁紙変更",
            value: false,
            change: () => {
                countUp_flag = true;
                exeFunc();
            },
        });
        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 rangeValue = $("<div>").appendTo(h); // 調整バーの値を表示する要素
        inputFilterOpacity = yaju1919_library.appendInputRange(h, {
            save: "AM_inputFilterOpacity",
            width: "90%",
            value: 0,
            min: 0,
            max: 100,
            step: 1,
            change: exeFunc,
        });
        let rangeValue2 = $("<div>").appendTo(h);
        inputBlur = yaju1919_library.appendInputRange(h, {
            save: "AM_inputBlur",
            width: "90%",
            value: 0,
            min: 0,
            max: 100,
            step: 1,
            change: exeFunc,
        });
        let rangeValue3 = $("<div>").appendTo(h);
        inputBrightness = yaju1919_library.appendInputRange(h, {
            save: "AM_inputBrightness",
            width: "90%",
            value: 100,
            min: 0,
            max: 500,
            step: 1,
            change: exeFunc,
        });
        let rangeValue4 = $("<div>").appendTo(h);
        inputSaturate = yaju1919_library.appendInputRange(h, {
            save: "AM_inputSaturate",
            width: "90%",
            value: 100,
            min: 0,
            max: 200,
            step: 1,
            change: exeFunc,
        });
        let rangeValue5 = $("<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 = () => { // 調整バーの数値を読み込む関数
            const filterOpacity = inputFilterOpacity();
            const blur = inputBlur();
            const brightness = inputBrightness();
            const saturate = inputSaturate();
            const sepia = inputSepia();
            rangeValue.text(`フィルタの透明度 : ${filterOpacity}`);
            rangeValue2.text(`ぼかしの強度 : ${blur}`);
            rangeValue3.text(`画像の明るさ : ${brightness}`);
            rangeValue4.text(`彩度 : ${saturate}`);
            rangeValue5.text(`セピア : ${sepia}`);
        }
        const setFilter = filter => { // filterを追加
            const imgSetBoolBtn = inputImgSetBoolBtn();
            if (imgSetBoolBtn) {
                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 blur = inputBlur();
            const brightness = inputBrightness();
            const saturate = inputSaturate();
            const sepia = inputSepia();
            const filter = `blur(${blur}px) brightness(${brightness}%) saturate(${saturate}%) sepia(${sepia}%)`; // CSSのfilterプロパティ
            setFilter(filter);
            rangeValueLoad();
        });
        addBtn(h, "デバッグ情報をコピー", () => {
            const imgSetBoolBtn = inputImgSetBoolBtn();
            const changeInterval = inputChangeInterval();
            const imgURL = inputImgURL();
            const filterOpacity = inputFilterOpacity();
            const filterColor = inputFilterColor();
            // 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プロパティ
            let debugInfoText = `
"inputImgSetBoolBtn" : "${imgSetBoolBtn}",
"inputChangeInterval" : "${changeInterval}",
"inputImgURL" : "${imgURL}",
"inputFilterOpacity" : "${filterOpacity}",
"inputFilterColor" : "${filterColor}",
"inputBlur" : "${blur}",
"inputBrightness" : "${brightness}",
"inputSaturate" : "${saturate}",
"inputSepia" : "${sepia}",
"imgURLs" : "${imgURLs}",
"filter" : "${filter}",
"count" : "${count}",
"imgURLs[count]" : "${imgURLs[count]}",
"imgURLs.length" : "${imgURLs.length}",
"countUp_flag" : "${countUp_flag}",
"start_flag" : "${start_flag}"
`;
            yaju1919.copy(debugInfoText);
            debugInfoCopyResult.fadeIn();
            clearTimeout(st);
            st = setTimeout(() => {
                debugInfoCopyResult.fadeOut();
            }, 2000);
        });
        let debugInfoCopyResult = $("<div>").text("クリップボードにコピーしました").hide().appendTo(h);
        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
            });
        }
        let si, count = 0; // siはsetIntervalのidを格納する変数
        const main = () => {
            const imgSetBoolBtn = inputImgSetBoolBtn();
            const changeInterval = inputChangeInterval();
            const imgURL = inputImgURL();
            const filterOpacity = inputFilterOpacity();
            const filterColor = inputFilterColor();
            // 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プロパティ
            rangeValueLoad();
            if (count >= imgURLs.length) count = 0; // countがimgURLsの長さ以上なら0に戻す
            // 背景を設定
            removeBgImg();
            if (imgURLs.length > 0 && imgSetBoolBtn) {
                $("#wrapper").css({ // 内部背景を透明にする
                    "backgroundColor": "transparent"
                });
                yaju1919.setBgImg(imgURLs[count], {
                    color: filterColor,
                    opacity: Number(filterOpacity) / 100
                });
                setFilter(filter);
                if (countUp_flag) count++; // countUp_flagがtrueならcountの値を増やす
            } else if (imgURLs.length === 0 || !imgSetBoolBtn) {
                clearInterval(si);
            }
            countUp_flag = false;
            //-----------
        }
        const change = () => {
            const changeInterval = inputChangeInterval();
            clearInterval(si);
            si = setInterval(() => {
                countUp_flag = true;
                main();
            }, changeInterval * 1000);
        }
        const funcMainAndChange = () => {
            change();
            main();
        }
        start_flag = true;
        main();
        setTimeout(() => { // 起動時に調整バーの数値を読み込む
            rangeValueLoad();
        });
        return h;
    }
    win.Managed_Extensions["背景変更"] = {
        config: setConfig,
        tag: "装飾",
    }
})();