(function() {
    function getClass(name) {
        return document.getElementsByClassName(name)[0];
    }

    /**
     * We are overriding css viewport height value because it's
     * taller than the visible part of the document in some
     * mobile browser. Read more: https://goo.gl/CyugDO
     */
    function divsHeights() {
        const clientHeight = document.documentElement.clientHeight;
        getClass('wrapper').style.height = (clientHeight + 'px');
        getClass('projects__hidden').style.height = getClass('projects').height + 'px';
        getClass('scroll').style.marginTop = ('calc(' + clientHeight + 'px - 4em)');
    }

    /**
     * This function decreases scroll alert box opacity,
     * taking content scroll position and dividing by some scale
     */
    function scrollOpacity() {
        getClass('content').onscroll = function() {
            const scrollText = (getClass('scroll'));
            const scrollIcons = (getClass('about__scroll'));
            const range = (1 - ((getClass('content').scrollTop) / 200));
            scrollText.style.opacity = range;
            scrollIcons.style.opacity = range;
        };
    }

    function projectsState() {
        const projects = document.querySelectorAll('.piotrantosz, .cyfrowa, .lingsense, .megatruck, .taxi, .sugarizer');
        const projectsHidden = getClass('projects__hidden');
        const projectsCards = getClass('projects__cards');
        const close = getClass('close');

        projects.forEach(function(entry) {
            const hiddenClassDescription = getClass(entry.getAttribute('class') + '__description');
            entry.addEventListener('click', function() {
                projectsHidden.style.opacity = 1;
                projectsHidden.style.visibility = 'visible';
                hiddenClassDescription.style.display = 'block';
                projectsCards.style.opacity = 0;
                document.querySelectorAll('.title, .close').forEach(
                    function(entry) {
                        entry.addEventListener('click', function() {
                            hiddenClassDescription.style.display = 'none';
                            projectsHidden.style.opacity = 0;
                            projectsHidden.style.visibility = 'hidden';
                            projectsCards.style.opacity = 1
                        }, false);
                    }
                );
            }, false);
        });
    }

    divsHeights();
    scrollOpacity();
    projectsState();
})();