let toggle = true

function myFunction() {
    if (toggle == true) {
        var reveals = document.querySelectorAll('.cardcls');
        var dots = document.querySelectorAll('.dots');
        if (reveals[0].getBoundingClientRect().top < 250 && reveals[0].getBoundingClientRect().top > 0) {

            reveals[0].classList.add('active');
            dots[0].classList.add('blue');
            // dots[i].classList.remove('grey');
            reveals[0].classList.remove('gs');

            reveals[1].classList.remove('active');
            dots[1].classList.remove('blue');
            reveals[1].classList.add('gs');

            reveals[2].classList.remove('active');
            dots[2].classList.remove('blue');
            reveals[2].classList.add('gs');

            reveals[3].classList.remove('active');
            dots[3].classList.remove('blue');
            reveals[3].classList.add('gs');


        }
        else if (reveals[1].getBoundingClientRect().top < 250 && reveals[1].getBoundingClientRect().top > 0) {

            reveals[1].classList.add('active');
            dots[1].classList.add('blue');
            // dots[i].classList.remove('grey');
            reveals[1].classList.remove('gs');

            reveals[0].classList.remove('active');
            dots[0].classList.remove('blue');
            reveals[0].classList.add('gs');

            reveals[2].classList.remove('active');
            dots[2].classList.remove('blue');
            reveals[2].classList.add('gs');

            reveals[3].classList.remove('active');
            dots[3].classList.remove('blue');
            reveals[3].classList.add('gs');


        }

        else if (reveals[2].getBoundingClientRect().top < 250 && reveals[2].getBoundingClientRect().top > 0) {

            reveals[2].classList.add('active');
            dots[2].classList.add('blue');
            // dots[i].classList.remove('grey');
            reveals[2].classList.remove('gs');

            reveals[0].classList.remove('active');
            dots[0].classList.remove('blue');
            reveals[0].classList.add('gs');

            reveals[1].classList.remove('active');
            dots[1].classList.remove('blue');
            reveals[1].classList.add('gs');

            reveals[3].classList.remove('active');
            dots[3].classList.remove('blue');
            reveals[3].classList.add('gs');


        }

        else if (reveals[3].getBoundingClientRect().top < 250 && reveals[3].getBoundingClientRect().top > 0) {

            reveals[3].classList.add('active');
            dots[3].classList.add('blue');
            // dots[i].classList.remove('grey');
            reveals[3].classList.remove('gs');

            reveals[0].classList.remove('active');
            dots[0].classList.remove('blue');
            reveals[0].classList.add('gs');

            reveals[1].classList.remove('active');
            dots[1].classList.remove('blue');
            reveals[1].classList.add('gs');

            reveals[2].classList.remove('active');
            dots[2].classList.remove('blue');
            reveals[2].classList.add('gs');


        }
    }


}


function scrolltofun(x) {
    toggle = false
    var reveals = document.querySelectorAll('.cardcls');
    var dots = document.querySelectorAll('.dots');
    if (x == 0) {
        reveals[0].classList.add('active');
        dots[0].classList.add('blue');
        // dots[i].classList.remove('grey');
        reveals[0].classList.remove('gs');

        reveals[1].classList.remove('active');
        dots[1].classList.remove('blue');
        reveals[1].classList.add('gs');

        reveals[2].classList.remove('active');
        dots[2].classList.remove('blue');
        reveals[2].classList.add('gs');

        reveals[3].classList.remove('active');
        dots[3].classList.remove('blue');
        reveals[3].classList.add('gs');

        document.getElementById('x1').scrollIntoView({
            behavior: 'smooth',
            block: 'nearest'  
        });
    }

    else if (x == 1) {
        reveals[1].classList.add('active');
        dots[1].classList.add('blue');
        // dots[i].classList.remove('grey');
        reveals[1].classList.remove('gs');

        reveals[0].classList.remove('active');
        dots[0].classList.remove('blue');
        reveals[0].classList.add('gs');

        reveals[2].classList.remove('active');
        dots[2].classList.remove('blue');
        reveals[2].classList.add('gs');

        reveals[3].classList.remove('active');
        dots[3].classList.remove('blue');
        reveals[3].classList.add('gs');

        document.getElementById('x2').scrollIntoView({
            behavior: 'smooth',
            block: "nearest"
        });
    } else if (x == 2) {
        reveals[2].classList.add('active');
        dots[2].classList.add('blue');
        // dots[i].classList.remove('grey');
        reveals[2].classList.remove('gs');

        reveals[0].classList.remove('active');
        dots[0].classList.remove('blue');
        reveals[0].classList.add('gs');

        reveals[1].classList.remove('active');
        dots[1].classList.remove('blue');
        reveals[1].classList.add('gs');

        reveals[3].classList.remove('active');
        dots[3].classList.remove('blue');
        reveals[3].classList.add('gs');

        document.getElementById('x3').scrollIntoView({
            behavior: 'smooth',
            block: 'nearest'
        });
    }
    else if (x == 3) {

        reveals[3].classList.add('active');
        dots[3].classList.add('blue');
        // dots[i].classList.remove('grey');
        reveals[3].classList.remove('gs');

        reveals[0].classList.remove('active');
        dots[0].classList.remove('blue');
        reveals[0].classList.add('gs');

        reveals[1].classList.remove('active');
        dots[1].classList.remove('blue');
        reveals[1].classList.add('gs');

        reveals[2].classList.remove('active');
        dots[2].classList.remove('blue');
        reveals[2].classList.add('gs');

        document.getElementById('x4').scrollIntoView({
            behavior: 'smooth',
            block: 'nearest'
        });
    }
    setTimeout(function () { toggle = true }, 2000);
}

document.addEventListener('swiped', function (e) {
    console.log(e.target); // the element that was swiped
    console.log(e.detail.dir); // swiped direction
});