var activeFlag = 'active';

function hookupPage() {
    console.log("Hooking up home page...");
    hookupNav();
    hookupScroll();
    // hookupProjectThumbnails();
    hookupProjectDetailButtons();
}
function hookupNav() {
    console.log("Hooking up nav...");
    document.querySelectorAll('nav a').forEach(anchor => {
        console.log("Hooking up nav anchor...");
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const section = document.querySelector(this.getAttribute('href'));
            section.scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
}
function hookupScroll() {
    console.log("Hooking up scroll...");
    window.addEventListener('scroll', function() {
        const sections = document.querySelectorAll('section');
        const navLinks = document.querySelectorAll('nav a');
        
        let current = '';
        
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            if (scrollY >= sectionTop - 60) {
                current = section.getAttribute('id');
            }
        });

        navLinks.forEach(link => {
            link.classList.remove(activeFlag);
            if (link.getAttribute('href').substring(1) === current) {
                link.classList.add(activeFlag);
            }
        });
    });
}
/*
function hookupProjectThumbnails() {
    console.log("Hooking up project thumbnails...");
    let demoButtonSelector = '.project-links .button';
    document.querySelectorAll(demoButtonSelector).forEach(demoButton => {
        console.log("Hooking up project thumbnail...");
        let projectName = getProjectNameFromDemoButton(demoButton);
        console.log({projectName});
        demoButton.addEventListener('mouseover', function() {
            let projectName = getProjectNameFromDemoButton(this);
            let thumbnailContainer = getProjectThumbnailContainer(projectName);
            thumbnailContainer.classList.add(activeFlag);
        });
        demoButton.addEventListener('mouseout', function() {
            let projectName = getProjectNameFromDemoButton(this);
            let thumbnailContainer = getProjectThumbnailContainer(projectName);
            thumbnailContainer.classList.remove(activeFlag);
        });
    });
}
function getProjectNameFromDemoButton(demoButton) {
    let projectName = demoButton.getAttribute('data-project');
    console.log({projectName});
    return projectName;
}
function getProjectThumbnailContainer(projectName) {
    let container = document.querySelector(`div.project-thumbnail[data-project="${projectName}"]`);
    console.log({container});
    return container;
}
*/
function hookupProjectDetailButtons() {
    console.log("Hooking up project detail buttons...");
    let detailButtonSelector = '.project-detail-button';
    document.querySelectorAll(detailButtonSelector).forEach(detailButton => {
        console.log("Hooking up project detail button...");
        detailButton.addEventListener('click', function() {
            let projectDetailContainer = this.parentElement.querySelector('.project-detail-container');
            let wasActive = projectDetailContainer.classList.contains(activeFlag);
            if (wasActive) {
                projectDetailContainer.classList.remove(activeFlag);
                detailButton.innerText = 'Show Details';
            }
            else {
                projectDetailContainer.classList.add(activeFlag);
                detailButton.innerText = 'Hide Details';
            }
        });
    });
}

// Google Translate 
function initGoogleTranslateElement() {
    new google.translate.TranslateElement({
        pageLanguage: 'en',
        // layout: google.translate.TranslateElement.InlineLayout.SIMPLE
        layout: google.translate.TranslateElement.InlineLayout.VERTICAL
    }, 'google_translate_element');
}