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;
        resizeVerticalImages();
    }
    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";
        }
        resizeVerticalImages();
    });
})

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

function resizeVerticalImages() {
    let verticalImages = document.querySelectorAll('.swiper-slide > img');
    let imagesIndex = 0;
    for (let img of verticalImages) {
        if(img.complete){
            imagesIndex++;
            if (img.clientHeight > img.clientWidth) {
                img.style.width = "50%";
            }
            if (imagesIndex === verticalImages.length) {
                swiperSlideEls = document.querySelectorAll('.swiper-slide');
                for (let swiperSlideEl of swiperSlideEls) {
                    swiperSlideEl.style.maxHeight = "unset";
                }
            }
         } else {
            img.onload = () => {
                imagesIndex++;
                if (img.clientHeight > img.clientWidth) {
                    img.style.width = "50%";
                }
                if (imagesIndex === verticalImages.length) {
                    swiperSlideEls = document.querySelectorAll('.swiper-slide');
                    for (let swiperSlideEl of swiperSlideEls) {
                        swiperSlideEl.style.maxHeight = "unset";
                    }
                }
            }
         }
         
    }
}