///////////////////////////////

// scroll effect by Ninny design
// Copyright (c) 2023 Ninny design
// 무단사용금지

///////////////////////////////

function scroll_effect_ninny() {

    // 실행 클래스
    const element = document.querySelectorAll('.scr-el, .scr-el-one, .scrs');

    element.forEach( function(el) {

        if(el.classList.contains('scrs') == true) {
            const reveals_ele = el.querySelectorAll('.scr-delay');
            reveals_ele.forEach( function(scrs) {
                scroll_effect(scrs);
            });
        } else {
            scroll_effect(el);
        }

    });


    // 액션
    function scroll_effect(x) {
        const variables = getComputedStyle(x);

        let winTop = window.scrollY + window.innerHeight * 0.85;
        let eTop = window.scrollY + x.getBoundingClientRect().top;
        let condition = winTop >= eTop;


        let xs = x.parentNode.children;
        let classlist = x.classList;

        let is_scrs = x.closest('.scrs') && !classlist.contains('scr-el-one') && !classlist.contains('scr-el');
        let no_scrs = !x.closest('.scrs') && classlist.contains('scr-el-one') || classlist.contains('scr-el');


        if(is_scrs) {
            xs = x.closest('.scrs').querySelectorAll('.scr-delay');
            classlist = x.closest('.scrs').classList;
        }

        let max = xs.length;
        let delay = 200;

        if(variables.getPropertyValue('--scr-el-delay')) {
            delay = variables.getPropertyValue('--scr-el-delay');
            delay = Number(delay.replace('ms', ''));
        }

        if(is_scrs) {
            for(let i = 0; i < max; i++) {
                if (xs[i] === x) {
                    if(x.style.transitionDelay != '0ms') {
                        x.style.transitionDelay = i * delay + "ms";
                    }
                }
            }
        }


        function scroll_active() {
            classlist.add('active');

            let prev = x.previousElementSibling;
            let prevDelay = 0;

            if(no_scrs) {
                if(prev && prev.style.transitionDelay != '0ms') {
                    prevDelay = prev.style.transitionDelay;
                    prevDelay = prevDelay.replace('ms', '');
                    prevDelay = Number(prevDelay);
                }

                if(x.style.transitionDuration != '0ms') {
                    x.style.transitionDelay = prevDelay + delay + "ms";
                }
            }

            if(classlist.contains('active') == true) {
                setTimeout(function() {
                    x.style.transitionDuration = '0ms';
                    x.style.transitionDelay = '0ms';
                }, max * 100 + delay);
            }
        }

        setTimeout(function() {
            if (condition) {
                scroll_active();
            }
        }, 100);


        window.addEventListener('scroll', function() {
            winTop = window.scrollY + window.innerHeight * 0.85;
            eTop = window.scrollY + x.getBoundingClientRect().top;
            condition = winTop >= eTop;

            if(classlist.contains('scr-el') == true) {
                condition = winTop >= eTop && window.scrollY < eTop;
            }

            if (condition) {
                scroll_active();
            } else {
                if(classlist.contains('scr-el') == true) {
                    classlist.remove('active');

                    if(classlist.contains('active') == false) {
                        x.style.transitionDuration = '';
                        x.style.transitionDelay = '';
                    }
                }
            }

        });
    }

}

window.addEventListener('DOMContentLoaded', function() {
    scroll_effect_ninny();
});