'use strict';

const cardButtons = document.querySelectorAll('.card-button');
const pages = document.querySelectorAll('.page');
const leftMenuItem = document.querySelectorAll('.left-menu-item');
const topMenuItem = document.querySelectorAll('.top-menu-item');
const menu = document.querySelector('#menu');
const topMenu = document.querySelector('.top-menu');
const modal = document.querySelector('#modal');
const burger = document.querySelector('.navbar-burger');
const allPics = document.querySelectorAll('.img-column');
const allVideo = document.querySelectorAll('.video');

allPics.forEach((pic) => {
    pic.addEventListener('click', (event) => {
        modalMessage(event.target.outerHTML)
    });
});

allVideo.forEach((video) => {
    video.addEventListener('click', (event) => {
        modalMessage(event.target.outerHTML)
    });
});

const modalMessage = (node) => {
    let modal=document.getElementById('modal');
    modal.innerHTML=`
        <div class="modal is-active">
            <div class="modal-background"></div>
            <div class="modal-content">
                    ${node}
            </div>
            <button class="modal-close is-large" aria-label="close" id="modal-close"></button>
        </div>`;
};

modal.addEventListener('click', (event) => {
    if ((event.target.className=='modal-background') || (event.target.id=='modal-close')) {
        modal.innerHTML="";
    };
});

function deselectMenu() {
    leftMenuItem.forEach((item) => {
        item.parentNode.classList.remove('is-active');
    });
};

function hidePages(){
    pages.forEach((page) => {
        page.classList.add('page-transparent');
        page.classList.add('is-hidden');        
    })
};

cardButtons.forEach((card) => {
    card.addEventListener('click', () => {
        hidePages();
        deselectMenu();
        menu.classList.remove('is-hidden');
        document.querySelector('.navbar').classList.remove('is-hidden');
        document.querySelector(`#lm-${card.id.replace('cb-','')}`).parentNode.classList.add('is-active');
        document.querySelector(`#p${card.id.replace('cb-','')}`).classList.remove('is-hidden');
        window.scrollTo(0,0);
    });
});

leftMenuItem.forEach((item) => {
    item.addEventListener('click', () => {
        hidePages();
        deselectMenu();
        item.parentNode.classList.add('is-active');
        document.querySelector(`#p${item.id.replace('lm-','')}`).classList.remove('is-hidden');
        window.scrollTo(0,0);
    });
});

topMenuItem.forEach((item) => {
    item.addEventListener('click', () => {
        hidePages();
        topMenu.classList.add('is-hidden');
        document.querySelector(`#p${item.id.replace('tm-','')}`).classList.remove('is-hidden');
        window.scrollTo(0,0);
    });
});

burger.addEventListener('click', () => {
    topMenu.classList.toggle('is-hidden');
})