const header = document.querySelector('header');
const headerMin = document.querySelector('header.min');
const pageContainer = document.querySelector('.whole-page');
const curtainContainer = document.querySelector('.curtain-container');
const marquee = document.querySelector('section.enable-animation');
const firstSection = document.querySelector('section.fidelity');
window.addEventListener('scroll', checkScrollPos);
window.addEventListener('resize', checkResize);

const lookbook = document.querySelector('.lookbook');
const lookbookRail = document.querySelector('.lookbook .info');

function getTopNoPadding(el) {
    return (el.getBoundingClientRect().top + Number(el.style.paddingTop.replace('px', '')));
}

function checkResize() {
    document.querySelector('.behindsplash').style.width = firstSection.clientWidth + 'px';
    translateBehindSplash();

    let scaleFactor = Math.min(Math.max(700/ window.innerWidth, 1), 2);
    let scaleFactor2 = Math.min(Math.max(700/ window.innerHeight, 1), 2);
    brainOuter.style.transform = new DOMMatrix().scaleSelf(Math.max(scaleFactor, scaleFactor2));

}

function translateBehindSplash() {
    const firstSectionY = firstSection.getBoundingClientRect().top;
    if (firstSection.getBoundingClientRect().top <= window.innerHeight) {
        document.querySelector('.splash').classList.add('withbg');
    } else {
        document.querySelector('.splash').classList.remove('withbg');
        headerMin.style.display = 'none';
    }
}

function checkScrollPos() {
    translateBehindSplash();

    if (firstSection.getBoundingClientRect().top <= 0 && headerMin.style.display == 'none'
        && !headerMin.classList.contains('animate')) {
        headerMin.style.display = 'flex';
        headerMin.classList.add('animate');

    } else if (firstSection.getBoundingClientRect().top > 0
        && headerMin.style.display == 'flex'
        && !headerMin.classList.contains('animateout')
    ) {
        headerMin.classList.add('animateout');
    }

    if(document.querySelector('footer').getBoundingClientRect().bottom <= window.innerHeight + 5){
        brainTag.classList.remove('hidden');
        brainTag.classList.add('allhidden');
    }else{
        brainTag.classList.remove('allhidden');
    }


    if(window.scrollY > 0){
        brainTag.classList.add('hidden');
        //brainTag.style.transform = new DOMMatrix().translateSelf(0, 90);
    }else if(document.body.style.position != 'fixed'){
        brainTag.classList.remove('hidden');
        //brainTag.style.transform = new DOMMatrix().translateSelf(0, 0);
    }
}

headerMin.addEventListener('animationend', (e) => {
    if (e.animationName == "slideOut") {
        headerMin.style.display = 'none';
    }

    headerMin.classList.remove('animateout', 'animate');

});

function isElementInViewport(el) {

    var rect = el.getBoundingClientRect();

    if (rect.bottom <= 0) {
        return false;
    }
    return true;
}



const playBtn = document.querySelector('.playbutton');
const modal = document.querySelector('.modal');
const videoLandscape = document.querySelector('.modal video.landscape');
const videoPortrait = document.querySelector('.modal video.portrait');
const closeBtn = document.querySelector('.closebutton');
playBtn.addEventListener('click', (e)=>{
    //modal.style.display = 'flex';
    showDialog();
    let video;
    if(window.innerWidth/window.innerHeight < 1){
        video = videoPortrait;
        videoLandscape.style.display = 'none';
    }else{
        video = videoLandscape;
        videoPortrait.style.display = 'none';
    }
    video.style.display = 'block';
    video.currentTime = 0;
    video.play();
})

closeBtn.addEventListener('click', (e) => {
    closeDialog();
    videoLandscape.pause();
    videoPortrait.pause();
})

modal.addEventListener('click', e => {
    closeDialog();
    videoLandscape.pause();
    videoPortrait.pause();
})

videoLandscape.addEventListener('click', e=>{
    e.stopImmediatePropagation();
})
videoPortrait.addEventListener('click', e=>{
    e.stopImmediatePropagation();
})


const showDialog = () => {
    modal.style.display = 'flex';
    const scrollY = document.documentElement.style.getPropertyValue('--scroll-y');
    const body = document.body;
    body.style.position = 'fixed';
    body.style.top = `-${scrollY}`;
  };
  const closeDialog = () => {
    const body = document.body;
    const scrollY = body.style.top;
    body.style.position = '';
    body.style.top = '';
    window.scrollTo(0, parseInt(scrollY || '0') * -1);
    modal.style.display = 'none';
  }
  window.addEventListener('scroll', () => {
    document.documentElement.style.setProperty('--scroll-y', `${window.scrollY}px`);
  });

let brainInTransition = false;

const brainTag = document.querySelector('.braincontainer');
const brainOuter = document.querySelector('.brainouter');
brainTag.addEventListener('mouseenter', (e) => {
    if(e.currentTarget.classList.contains('hidden')){
        brainInTransition = true;
    }else{
        brainInTransition = false;
    }
    e.currentTarget.classList.remove('hidden');
    
})

brainTag.addEventListener('mouseleave', (e) => {
    if(window.scrollY > 0){
        e.currentTarget.classList.add('hidden');
    }
})

brainTag.addEventListener('click', (e)=>{
    e.preventDefault();
    e.stopImmediatePropagation();
    if(e.currentTarget.classList.contains('hidden')){
        e.currentTarget.classList.remove('hidden');
    }else if(!brainInTransition){
        window.location.href = 'https://brain.wtf';
    }   
   
})

brainTag.addEventListener('transitionend', (e) => {
    brainInTransition = false;
})
brainTag.addEventListener('transitionstart', (e) => {
    brainInTransition = true;
})


checkScrollPos();
checkResize();