// Initialize first comparison on index.html
document.addEventListener('DOMContentLoaded', function() {
    const divisor = document.getElementById("divisor");
    const slider = document.getElementById("slider");
    const beforeUpload = document.getElementById('before-upload');
    const afterUpload = document.getElementById('after-upload');
    const compareBtn = document.getElementById('compare-btn');
    const figure = document.querySelector('#comparison figure');
    const imageTitle = document.querySelector('.image-title');
    const fullscreenBtn = document.getElementById('fullscreen-btn');
    
    if (divisor && slider) {
        function moveDivisor() { 
            divisor.style.width = slider.value+"%";
        }
        slider.addEventListener('input', moveDivisor);
    }

    if (fullscreenBtn) {
        fullscreenBtn.addEventListener('click', function() {
            const comparison = document.getElementById('comparison');
            if (!document.fullscreenElement) {
                comparison.requestFullscreen().catch(err => {
                    alert(`Error attempting to enable fullscreen: ${err.message}`);
                });
            } else {
                document.exitFullscreen();
            }
        });
    }
// Handle image upload and comparison
    compareBtn.addEventListener('click', function() {
        const beforeFile = beforeUpload.files[0];
        const afterFile = afterUpload.files[0];
        
        if (!beforeFile || !afterFile) {
            alert('Please upload both before and after images');
            return;
        }

        const beforeUrl = URL.createObjectURL(beforeFile);
        const afterUrl = URL.createObjectURL(afterFile);

        // Update the comparison slider with the new images
        figure.style.backgroundImage = `url(${beforeUrl})`;
        divisor.style.backgroundImage = `url(${afterUrl})`;
        
        // Update the title
        imageTitle.innerHTML = `Custom Comparison<br/>${beforeFile.name} vs ${afterFile.name}`;
        
        // Reset slider to center
        slider.value = 50;
        divisor.style.width = '50%';
    });
// Set background images for gallery items
    const comparisons = document.querySelectorAll('.comparison');
    comparisons.forEach((comp, index) => {
        const figure = comp.querySelector('figure');
        const divisor = comp.querySelector('.divisor');
        
        // Use different image pairs for each comparison
        switch(index) {
            case 0:
                figure.style.backgroundImage = 'url(https://images.unsplash.com/photo-1506744038136-46273834b3fb)';
                divisor.style.backgroundImage = 'url(https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1200&q=80&ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9)';
                break;
            case 1:
                figure.style.backgroundImage = 'url(https://images.unsplash.com/photo-1477959858617-67f85cf4f1df)';
                divisor.style.backgroundImage = 'url(https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b)';
                break;
            case 2:
                figure.style.backgroundImage = 'url(https://images.unsplash.com/photo-1531123897727-8f129e1688ce)';
                divisor.style.backgroundImage = 'url(https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&fit=crop&w=1200&q=80&ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9)';
                break;
        }
    });
});

function toggleFullscreen(btn) {
    const comparison = btn.closest('.comparison');
    if (!document.fullscreenElement) {
        comparison.requestFullscreen().catch(err => {
            alert(`Error attempting to enable fullscreen: ${err.message}`);
        });
    } else {
        document.exitFullscreen();
    }
}