function toggleMenu(el) {
    let nav = document.querySelector('nav');
    el.classList.toggle('open');
    nav.classList.toggle('open');
}

function toggleAbout() {
    let arrow = document.querySelector('#about-arrow');
    let aboutContent = document.querySelector('#about-hidden');
    aboutContent.classList.toggle('open');
    arrow.classList.toggle('open');
}

$(document).ready(function() {
    let body = document.querySelector('body');
    if (document.querySelector('.swiper')) {
        body.style.overflowY = "hidden";
    } else {
        body.style.overflowY = "auto";
    }
    let swiperEl = document.querySelector('.swiper');
    if (swiperEl) {
        swiperEl.style.opacity = 1;
        setTimeout(() => {
            resizeVerticalImages();
        }, 100);
    }
    initSwiper();
    barba.init({
        transitions: [{
            name: 'opacity-transition',
            leave(data) {
              return gsap.to(data.current.container, {
                opacity: 0
              })
            },
            enter(data) {
              return gsap.from(data.next.container, {
                opacity: 0
              })
            }
          }]
    });
    barba.hooks.before((data) => {
        if (swiperEl) {
            swiperEl.style.opacity = 0;
        }
    });
    barba.hooks.after((data) => {
        swiperEl = document.querySelector('.swiper');
        if (swiperEl) {
            if (document.querySelector('.swiper') && !document.querySelector('.swiper-initialized')) {
                initSwiper();
                body.style.overflowY = "hidden";
            }
            swiperEl.style.opacity = 1;
        } else {
            body.style.overflowY = "auto";
        }
        setTimeout(() => {
            resizeVerticalImages();
        }, 100);
    });

})

function initSwiper() {
    let swiper = new Swiper('.swiper', {
        loop: true,
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        },
    });
}

function resizeVerticalImages() {
    if (document.querySelector('.swiper')) {
        let verticalImages = document.querySelectorAll('.swiper-slide > img');
        for (let img of verticalImages) {
            if (img.clientHeight > img.clientWidth) {
                img.style.width = "50%";
            }
        }
    }
}