// ==UserScript==
// @name               Twitter: Hide Image
// @name:zh-TW         Twitter 隱藏圖片
// @name:zh-CN         Twitter 隐藏图片
// @name:ja            Twitter 画像を非表示
// @name:ko            Twitter 이미지 숨기기
// @name:ru            Twitter Скрыть изображение
// @version            1.0.3
// @description        Make Twitter Images Opacity Lower.
// @description:zh-TW  調整 Twitter 圖片的透明度。
// @description:zh-CN  调整 Twitter 图片的透明度。
// @description:ja     Twitter画像の不透明度を低くします。
// @description:ko     Twitter 이미지 불투명도를 낮추십시오.
// @description:ru     Уменьшите непрозрачность изображений в Twitter.
// @author             Hayao-Gai
// @namespace	       https://github.com/HayaoGai
// @icon               https://i.imgur.com/M9oO8K9.png
// @match              https://twitter.com/*
// @grant              none
// @downloadURL none
// ==/UserScript==

/* jshint esversion: 6 */

(function() {
    'use strict';

    let updating = false;

    init();
    locationChange();
    window.addEventListener("scroll", update);

    function init() {
        for (let i = 0; i < 10; i++) {
            setTimeout(getTarget, 500 * i);
        }
    }

    function update() {
        if (updating) return;
        updating = true;
        getTarget();
        setTimeout(() => { updating = false; }, 1000);
    }

    function getTarget(retry = 0) {
        console.log("init!");
        // get
        const images = document.querySelectorAll("img:not(.hide-set)");
        // check
        console.log("images.length: ", images.length);
        console.log("!images.length: ", !images.length);
        if (!images.length) {
            if (retry < 10) setTimeout(() => getTarget(retry + 1), 500);
            return;
        }
        // adjust
        console.log("adjust!");
        images.forEach(image => {
            image.classList.add("hide-set");
            // emoji
            if (image.draggable) {
                const div = image.parentElement.querySelector("div");
                if (!!div) {
                    // css
                    div.style.opacity = 0.1;
                    div.style.transition = "opacity 0.3s";
                    // event
                    image.addEventListener("mouseenter", () => showImage(div));
                    image.addEventListener("mouseleave", () => hideImage(div));
                }
            }
        });
    }

    function showImage(div) {
        div.style.opacity = 1;
    }

    function hideImage(div) {
        div.style.opacity = 0.1;
    }

    function locationChange() {
        window.addEventListener('locationchange', init);
        // situation 1
        history.pushState = ( f => function pushState(){
            var ret = f.apply(this, arguments);
            window.dispatchEvent(new Event('pushState'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        })(history.pushState);
        // situation 2
        history.replaceState = ( f => function replaceState(){
            var ret = f.apply(this, arguments);
            window.dispatchEvent(new Event('replaceState'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        })(history.replaceState);
        // situation 3
        window.addEventListener('popstate', () => window.dispatchEvent(new Event('locationchange')));
    }

})();