(function() {
    var chars = document.getElementsByClassName('ascii-char'),
        search = document.getElementById('search');

    function charsFilter(filter) {
        if(!filter) {
            for(var i = 0; i < chars.length; ++i)
                chars[i].classList.remove('hidden');
            return;
        }

        filter = filter.toLowerCase();

        for(var i = 0; i < chars.length; ++i) {
            var chr = chars[i],
                code = (chr.dataset.keyCode || 0).toString().toLowerCase(),
                print = (chr.dataset.keyPrint || "\0").toString().toLowerCase(),
                desc = (chr.dataset.keyDesc || '').toString().toLowerCase(),
                html = (chr.dataset.keyHtml || "\0").toString().toLowerCase(),
                codeInt = parseInt(code),
                isMatch = (filter === 'printable' && (codeInt > 31 && codeInt < 127))
                    || (filter === 'control' && (codeInt < 32 || codeInt === 127))
                    || code == filter || print == filter
                    || html == filter || desc.indexOf(filter) >= 0;
            chr.classList[isMatch ? 'remove' : 'add']('hidden');
        }
    };

    window.addEventListener('scroll', function() {
        var hidden = document.getElementsByClassName('js-hidden-on-scroll'),
            invisible = document.getElementsByClassName('js-invisible-on-scroll'),
            atTop = window.scrollY === 0;

        for(var i = 0; i < hidden.length; ++i)
            hidden[i].classList[atTop ? 'remove' : 'add']('hidden');
        for(var i = 0; i < invisible.length; ++i)
            invisible[i].classList[atTop ? 'remove' : 'add']('invisible');
    });
    search.addEventListener('keyup', function() {
        location.hash = search.value.trim();
    });
    window.addEventListener('hashchange', function() {
        charsFilter(decodeURIComponent((location.hash || '#').substring(1)));
    });
    if(location.hash.length > 0) {
        search.value = location.hash.substring(1).trim();
        charsFilter(search.value);
    }

    for(var i = 0; i < chars.length; ++i) {
        chars[i].addEventListener('click', function(ev) {
            var target = ev.target;

            while(target !== null && typeof target.dataset.copy === 'undefined') {
                target = target.parentNode || null;

                if(target.classList.contains('char'))
                    break;
            }

            if(target === null || typeof target.dataset.copy === 'undefined')
                return;

            var doCopy = function() { navigator.clipboard.writeText(target.dataset.copy); };

            if(typeof window.mozInnerScreenX !== 'undefined')
                doCopy();
            else
                navigator.permissions.query({name: 'clipboard-write'}).then(function(res) {
                    if(res.state === 'granted' || res.state === 'prompt')
                        doCopy();
                });
        });
    }
})();