// ==UserScript==
// @name         Twitter: Hide Image
// @version      1.0.2
// @description  Make Twitter Images Opacity Lower.
// @author       Hayao-Gai
// @namespace	 https://github.com/HayaoGai
// @icon         https://i.imgur.com/M9oO8K9.png
// @include      https://twitter.com/*
// @grant        none
// @downloadURL none
// ==/UserScript==

/* jshint esversion: 6 */

(function() {
    'use strict';

    let scrolling = false;

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

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

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

    function getTarget() {
        document.querySelectorAll("img:not(.hide)").forEach(image => {
            image.classList.add("hide");
            // emoji
            if (image.draggable) {
                const div = image.parentElement.querySelector("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')));
    }

})();