// ==UserScript==
// @name               Instagram: Hide Image
// @name:zh-TW         Instagram 隱藏圖片
// @name:zh-CN         Instagram 隐藏图片
// @name:ja            Instagram 画像を非表示
// @name:ko            Instagram 이미지 숨기기
// @name:ru            Instagram Скрыть изображение
// @version            1.0.1
// @description        Make Instagram Images Opacity Lower.
// @description:zh-TW  調整 Instagram 圖片的透明度。
// @description:zh-CN  调整 Instagram 图片的透明度。
// @description:ja     Instagram 画像の不透明度を低くします。
// @description:ko     Instagram 이미지 불투명도를 낮추십시오.
// @description:ru     Уменьшите непрозрачность изображений в Instagram.
// @author             Hayao-Gai
// @namespace	       https://github.com/HayaoGai
// @icon               https://i.imgur.com/obCmlr9.png
// @match              https://www.instagram.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() {
        // image
        document.querySelectorAll("img:not(.hide-set)").forEach(image => {
            image.classList.add("hide-set");
            setTarget(image);
            addListener(image, "eLAPa");
        });
        // video
        document.querySelectorAll("video:not(.hide-set)").forEach(video => {
            video.classList.add("hide-set");
            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;
        // show
        div.addEventListener("mouseenter", () => {
            target.style.opacity = 1;
        });
        // hide
        div.addEventListener("mouseleave", () => {
            target.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')));
    }

})();