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

    /**
     *
     * @param element takes list or single class / id
     * @param height takes list or single value with our without px's
     */

    function changeHeight(element, height) {
        function setHeight(element, height) {
            if (height.toString().indexOf("px") > -1) {
                return getClass(element).style.height = height;
            } else {
                return getClass(element).style.height = (height + 'px')
            }
        }

        if (Array.isArray(element) && Array.isArray(height)) {
            for (i = 0; i < element.length; i++) {
                setHeight(element[i], height[i])
            }
        } else {
            setHeight(element, height)
        }
    }

    /**
     *
     * @param elementOnScroll - scrolling this element will execute changing opacity
     * @param elementOpacity - element or elements [list] of which opacity changes
     * @param range - speed of changing opacity (e.g. 200)
     * @param direction defines if elements increase or decrease their opacity when scrolling, takes one of two values ['inc', 'dec']
     */
    function changeOpacityOnScroll(elementOnScroll, elementOpacity, range, direction) {
        elementOnScroll.onscroll = function() {
            function setOpacity(elementOpacity) {
                if (direction == 'inc') {
                    elementOpacity.style.opacity = (elementOnScroll.scrollTop / range);
                } else if (direction == 'dec') {
                    elementOpacity.style.opacity = (1 - (elementOnScroll.scrollTop / range));

                }
            }

            if (Array.isArray(elementOpacity)) {
                for (i = 0; i < elementOpacity.length; i++) {
                    setOpacity(elementOpacity[i])
                }
            } else {
                setOpacity(elementOpacity)
            }
        };
    }

    /**
     *
     * @param element takes element which parameters will change
     * @param opacity takes numeric value or null
     * @param visbility takes string value or null
     * @param display takes string value or null
     */
    function displayElement(element, opacity, visbility, display) {
        if (opacity) {
            element.style.opacity = opacity;
        }
        if (visbility) {
            element.style.visibility = visbility;
        }
        if (display) {
            element.style.display = display
        }
    }


    const projects = document.querySelectorAll('.piotrantosz, .cyfrowa, .lingsense, .megatruck, .taxi, .sugarizer');
    const projectsHidden = getClass('projects__hidden');
    const projectsCard = getClass('projects__cards');

    projects.forEach(function(entry) {
        entry.addEventListener('click', function() {
            const projectDescription = getClass(entry.getAttribute('class') + '__description');
            displayElement(projectsHidden, 1, 'visible');
            displayElement(projectDescription, 1, 'visible', 'block');
            displayElement(projectsCard, 0, 'hidden,');
            document.querySelectorAll('.title, .close').forEach(
                function(entry) {
                    entry.addEventListener('click', function() {
                        displayElement(projectDescription, null, null, 'none');
                        displayElement(projectsHidden, 0, 'hidden');
                        displayElement(projectsCard, 1)
                    }, false);
                }
            );
        }, false);
    });

    getClass('scroll').style.marginTop = 'calc(' + document.documentElement.clientHeight + 'px - 4em)';
    changeOpacityOnScroll(getClass('content'), [getClass('scroll'), getClass('about__scroll')], 200, 'dec');
    changeHeight(['wrapper', 'projects__hidden'], [document.documentElement.clientHeight, getClass('projects').offsetHeight]);
})();