document.addEventListener('DOMContentLoaded', function() {
    let viewerOpen = false;
    let currentIndex = -1;
    let imageList = [];

    // Initialize imageList with all images on the page
    function initializeImageList() {
        imageList = Array.from(document.querySelectorAll('.image img.clickable'));
    }

    const viewerOverlay = document.getElementById('image-viewer-overlay');
    viewerOverlay.innerHTML = `
        <div id="image-viewer" class="image_view image_hide">
            <div class="image-view-close">
                <button class="btn-nostyle" id="viewer-prev-button">
                    <div class="material-icons-round icon_visibility clickable image-before">navigate_before</div>
                </button>
                <button class="btn-nostyle" id="viewer-next-button">
                    <div class="material-icons-round icon_visibility clickable image-next">navigate_next</div>
                </button>
                <button class="btn-nostyle" id="viewer-close-button">
                    <div class="material-icons-round icon_visibility clickable image-close">close</div>
                </button>
            </div>
            <a class="image-viewer-link" id="viewer-image-link" target="_blank">
                <div class="view-image" id="viewer-image-container">
                    <img id="viewer-image" class="view-image-img" src="" alt="">
                </div>
            </a>
            <p class="image-alt" id="viewer-title"></p>
            <p>View source: <a id="viewer-source-button" class="image-source" href="" target="_blank"></a></p>
            <p>
                <a class="full-size" id="viewer-full-size-link" href="#" target="_blank">Show source website</a>
                <a class="proxy-size" id="viewer-proxy-size-link" href="#" target="_blank">Show in fullscreen</a>
            </p>
        </div>
    `;

    const imageView = document.getElementById('image-viewer');

    function openImageViewer(element) {
        initializeImageList(); // Update the image list

        const parentImageDiv = element.closest('.image');
        if (!parentImageDiv) return;

        currentIndex = imageList.findIndex(img => img === parentImageDiv.querySelector('img.clickable'));
        if (currentIndex === -1) return;

        displayImage(currentIndex);
        viewerOpen = true;

        viewerOverlay.style.display = 'flex';
        imageView.classList.remove('image_hide');
        imageView.classList.add('image_show');
    }

    function displayImage(index) {
        if (index < 0 || index >= imageList.length) return;

        const imgElement = imageList[index];
        const parentImageDiv = imgElement.closest('.image');
        const fullImageUrl = imgElement.getAttribute('data-full'); // Use data-full for the full image URL
        const title = imgElement.alt || '';
        const sourceUrl = parentImageDiv.querySelector('.img_source').href || '#'; // Source webpage URL

        const viewerImage = document.getElementById('viewer-image');
        const viewerTitle = document.getElementById('viewer-title');
        const viewerSourceButton = document.getElementById('viewer-source-button');
        const fullSizeLink = document.getElementById('viewer-full-size-link');
        const proxySizeLink = document.getElementById('viewer-proxy-size-link');
        const viewerImageLink = document.getElementById('viewer-image-link');

        // Set the viewer image to the full image URL
        viewerImage.src = fullImageUrl;
        viewerTitle.textContent = title;
        viewerSourceButton.href = sourceUrl;
        fullSizeLink.href = sourceUrl;          // Link to the source website
        proxySizeLink.href = fullImageUrl;      // Link to the proxied full-size image
        viewerImageLink.href = fullImageUrl;    // Make image clickable to open in new tab
    }

    // Attach event listener to the document body
    document.body.addEventListener('click', function(e) {
        let target = e.target;
        let clickableElement = target.closest('img.clickable, .img_title.clickable');

        if (clickableElement) {
            e.preventDefault();
            openImageViewer(clickableElement);
        }
    });

    function closeImageViewer() {
        imageView.classList.remove('image_show');
        imageView.classList.add('image_hide');
        viewerOverlay.style.display = 'none';
        viewerOpen = false;
        currentIndex = -1;
    }

    // Navigation functions
    function showPreviousImage() {
        if (currentIndex > 0) {
            currentIndex--;
            displayImage(currentIndex);
        }
    }

    function showNextImage() {
        if (currentIndex < imageList.length - 1) {
            currentIndex++;
            displayImage(currentIndex);
        }
    }

    // Event listeners for navigation and closing
    document.getElementById('viewer-close-button').addEventListener('click', closeImageViewer);
    document.getElementById('viewer-prev-button').addEventListener('click', showPreviousImage);
    document.getElementById('viewer-next-button').addEventListener('click', showNextImage);

    // Close viewer when clicking outside the image
    viewerOverlay.addEventListener('click', function(e) {
        if (e.target === viewerOverlay) {
            closeImageViewer();
        }
    });

    // Handle keyboard events for closing and navigation
    document.addEventListener('keydown', function(e) {
        if (viewerOverlay.style.display === 'flex') {
            if (e.key === 'Escape') {
                closeImageViewer();
            } else if (e.key === 'ArrowLeft') {
                showPreviousImage();
            } else if (e.key === 'ArrowRight') {
                showNextImage();
            }
        }
    });
});