// ==UserScript==
// @name         Hide Images
// @namespace    http://tampermonkey.net/
// @version      5.7
// @description  Hide dumb frogposters
// @author       ECHibiki-/qa/
// @match http://boards.4chan.org/*
// @match https://boards.4chan.org/*
// @include https://boards.4chan.org/*
// @include http://boards.4chan.org/*
// @run-at document-start
// @grant none
// @downloadURL none
// ==/UserScript==

/**
Hold Control and Shift to hide images, but keep threads open.
Doesn't interfere with 4chanx and you can still see images it if you mouse over them.
Hidden images reapear in 48 hours.
*/

(function() {
    var localStoreThreads;
    var bowser;
    var finished = false;
    var windowDisplayed = false;
    var defaultExpireTime = 172800000;
    var expireTime;

    //is storage possible
    function storageAvailable(type) {
        try {
            var storage = window[type],
                x = '__storage_test__';
            storage.setItem(x, x);
            storage.removeItem(x);
            return true;
        }
        catch(e) {
            return e instanceof DOMException && (
                // everything except Firefox
                e.code === 22 ||
                // Firefox
                e.code === 1014 ||
                // test name field too, because code might not be present
                // everything except Firefox
                e.name === 'QuotaExceededError' ||
                // Firefox
                e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
                // acknowledge QuotaExceededError only if there's something already stored
                storage.length !== 0;
        }
    }

    //What Browser
    function detectBrowser() { 
        if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) 
        {
            console.log("Opera");
            return 0;
        }
        else if(navigator.userAgent.indexOf("Chrome") != -1 )
        {
            console.log("Chrome");
            return 1;
        }
        else if(navigator.userAgent.indexOf("Safari") != -1)
        {
            console.log("Safari");
            return 2;
        }
        else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
        {
            console.log("FireFox");
            return 3;
        }
        else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
        {
            console.log("IE");
            return 4;
        }  
        else 
        {
            console.log("Other");
            return -1;
        }
    }

    //hide image onclick listener
    function hideImage(event){
        var hideIndex = this.src.indexOf(".HIDDEN");
        if((event.ctrlKey && event.shiftKey) && hideIndex == -1){
            event.preventDefault();
            event.stopPropagation();
            if (storageAvailable('localStorage')) {
                if(this.id.charAt(0) == "p") this.id =  "f" + this.id.substr(1);
                localStorage.setItem(this.id, Date.now());
            }
            else {
                console.log("No Storage");
            }
            this.src = this.src + ".HIDDEN" +  "?" + Date.now();
            return false;
        }
        else if(event.ctrlKey && event.shiftKey){
            event.preventDefault();
            event.stopPropagation();
            if (storageAvailable('localStorage')) {
                if(this.id.charAt(0) == "p") this.id =  "f" + this.id.substr(1);
                localStorage.removeItem(this.id);
            }
            else {
                console.log("No Storage");
            }
            this.src = this.src.substring(0, hideIndex);
            return false;
        }
        return true;
    }

    //functions to find properties by regex
    function getPropertyByRegex(obj,propName) {
        var re = new RegExp("^" + propName + "(\\[\\d*\\])?$"),
            key;
        var rtnArray = [];
        for (key in obj)
            if (re.test(key))
                rtnArray.push(key);
        return rtnArray;
    }

    //retrieve from memory the hidden iamges
    function retrieveStates(){
        var i = 0,
            oJson = {},
            sKey;
        while( i < window.localStorage.length) {
            i++;
            sKey = window.localStorage.key(i);
            oJson[sKey] = window.localStorage.getItem(sKey);
        }
        localStoreThreads = getPropertyByRegex(oJson,"f[0-9]*IMG");
        localStoreThreads.forEach(function callback(elem){
            if(Date.now() - oJson[elem] > expireTime)
                localStorage.removeItem(elem);
            var node = document.getElementById(""+elem);
            if(node !== null && node.src.indexOf(".HIDDEN") == -1){
                node.src = node.src + ".HIDDEN" +  "?" + Date.now(); 
            }
            else if((node = document.getElementById("p"+elem.substring(1))) !== null && node.src.indexOf(".HIDDEN") == -1){
                node.src = node.src + ".HIDDEN" +  "?" + Date.now();           
            }
            else if((node = document.getElementById("thread-"+elem.substring(1))) !== null && node.src.indexOf(".HIDDEN") == -1){
                node.src = node.src + ".HIDDEN" +  "?" + Date.now(); 
            }
            else if((node = document.getElementById("thumb-"+elem.substring(1))) !== null && node.src.indexOf(".HIDDEN") == -1){
                node.src = node.src + ".HIDDEN" +  "?" + Date.now(); 
            }
        });
    }

    function checkDOMTree(){
        //var later = Date.now();
        if(finished) {
            var start = document.getElementById("delform");
            if (start === null) start = document.body;
            else start = start.firstChild;
        }
        else {
            var start = document;
        }
        if(start == null) return;
        var itterator = document.createTreeWalker(start, NodeFilter.SHOW_ELEMENTS, NodeFilter.SHOW_ELEMENTS);
        var node = "";
        var i = 0;
        while((node = itterator.nextNode())){
            var tag = node.tagName;
            if(tag  === "img" || tag  === "IMG"){
                if(node.getAttribute("data-md5") !== null || node.className.indexOf("thumb") != -1){
                    finished = true;
                    node.id = node.parentNode.parentNode.id + "IMG";
                    node.addEventListener("click", hideImage, {passive:false, capture:false, once:false});
                }
            }
        }
        //
    }


    function hideWindow(){
        var style = document.createElement('style');
        style.innerHTML = ".inputs{background-color:rgb(200,200,200);margin:5px 7px;width:100px;}";
        document.body.appendChild(style);

        var backgroundDiv = document.createElement("div");
        backgroundDiv.setAttribute("style", "border:solid 1px black;position:fixed;width:100%;height:100%;background-color:rgba(200,200,200,0.3);top:0;left:0;display:none; z-index:9");
        backgroundDiv.setAttribute("id", "hiBackground");
        document.body.appendChild(backgroundDiv);
        backgroundDiv.addEventListener("click", windowToggle);

        var windowDiv = document.createElement("div");
        windowDiv.setAttribute("style", "border:solid 1px black;position:fixed;width:400px;background-color:rgb(200,200,200);left:40%;top:20%;margin-bottom:0;  display:none; z-index:10");
        windowDiv.setAttribute("id", "hiWindow");

        var closeDiv = document.createElement("div");
        closeDiv.setAttribute("style", "border:solid 1px black;position:absolute;width:25px;height:25px;background-color:rgba(255,100,90,0.9); right:3px;top:3px; z-index:10");
        closeDiv.addEventListener("click", windowToggle);
        windowDiv.appendChild(closeDiv);

        var titleP = document.createElement("p");
        titleP.setAttribute("style", "margin-left:5px;margin-top:5px");
        var titleText = document.createTextNode("Filter Settings");
        titleP.appendChild(titleText);
        windowDiv.appendChild(titleP);

        var containerDiv = document.createElement("div");
        containerDiv.setAttribute("style","background-color:white;margin:0 0;padding:5px;");
        windowDiv.appendChild(containerDiv);
        
        var expirationLabel = document.createElement("label");
        var expirationText = document.createTextNode("Expiration Time(hours): ");
        expirationLabel.appendChild(expirationText);
        containerDiv.appendChild(expirationLabel);
        var expirationInput = document.createElement("input");
        expirationInput.setAttribute("id", "expirationTime");
        containerDiv.appendChild(expirationInput);
        containerDiv.appendChild(expirationInput);
        containerDiv.appendChild(document.createElement("br"));
        var setButton = document.createElement("input");
        setButton.setAttribute("type", "button");
        setButton.setAttribute("id", "setTime");
        setButton.setAttribute("value", "Set Time");
        setButton.addEventListener("click", function(){
            if (storageAvailable('localStorage')) {
                var time = document.getElementById("expirationTime");
                var msTime = time.value * 3600000;
                if (msTime == 0) msTime = defaultExpireTime; 
                var expirationTime = msTime;
                //console.log(msTime);
                localStorage.setItem("ExpirationTime", msTime);
                windowToggle();
            }
        });
        expirationInput.setAttribute("value", localStorage.getItem("ExpirationTime") / 3600000);
        containerDiv.appendChild(setButton);

        document.body.appendChild(windowDiv);

    }

    function windowToggle(){
        if(windowDisplayed){
            document.getElementById("hiWindow").style.display = "none";
            document.getElementById("hiBackground").style.display = "none";
            windowDisplayed = false;
        }
        else{
            document.getElementById("hiWindow").style.display = "inline-block";
            document.getElementById("hiBackground").style.display = "inline-block";
            windowDisplayed = true;
        }     
    }

    function hideButton(){
        var button = document.createElement("input");
        button.setAttribute("Value", "Hide Image Settings");
        button.setAttribute("type", "button");
        button.setAttribute("style", "position:absolute;top:45px");
        button.addEventListener("click", hideWindow);
        if(document.body === null){
            setTimeout(hideButton, 30);
        }
        else{
            document.body.appendChild(button);
            button.addEventListener("click", windowToggle);
        }
    }

    //initial onload setup
    function ImageListener(){
        checkDOMTree();   
        observeDynamicMutation();
        retrieveStates();
        hideButton();
        finished = true;
    }

    //detect page changes
    function observeDynamicMutation(){
        var node = document;
        var observer = new MutationObserver(function callBack(mutations){
            // var later = Date.now();
            checkDOMTree();
            retrieveStates();
            //console.log(Date.now() - later);
        });
        var config = {subtree: true, childList:true};
        observer.observe(node, config);
    }

    if (window.top != window.self)  //-- Don't run on frames or iframes
        return;

    browser = detectBrowser();
    ImageListener();
    console.log("Script loaded: Hide Images");
})();