// ==UserScript==
// @name         Instagram: Hide Image
// @version      1.0.0
// @description  Make Instagram Images Opacity Lower.
// @author       Hayao-Gai
// @namespace	 https://github.com/HayaoGai
// @icon         https://i.imgur.com/obCmlr9.png
// @match        http*://www.instagram.com/*
// @grant        none
// @downloadURL none
// ==/UserScript==

/* jshint esversion: 6 */

(function() {
    'use strict';

    let scrolling = false;

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

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

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

    function getTarget() {
        // image
        document.querySelectorAll("img:not(.hide)").forEach(image => {
            image.classList.add("hide");
            setTarget(image);
            addListener(image, "eLAPa");
        });
        // video
        document.querySelectorAll("video:not(.hide)").forEach(video => {
            video.classList.add("hide");
            setTarget(video);
            addListener(video, "kPFhm");
        });
    }

    function setTarget(target) {
        target.style.transition = "opacity 0.3s";
        target.style.opacity = 0.1;
    }

    function addListener(target, className) {
        if (!!!target.closest(`div.${className}`)) return;
        const div = target.closest(`div.${className}`).lastElementChild;
        // over
        div.addEventListener("mouseover", () => {
            target.style.opacity = 1;
        });
        // out
        div.addEventListener("mouseout", () => {
            target.style.opacity = 0.1;
        });
    }

    function detectUrl() {
        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')));
    }

})();