insert.js

(function() {
    const AV = window.ApacheVisualizer;

    function runVisualizer() {
        const list = document.querySelectorAll("a");
        const url = window.location.href;

        // Parse max page number before clearing the DOM
        var maxPage = 10;
        var pageListLinks = document.querySelectorAll('.pagelist .pages a');
        pageListLinks.forEach(function(a) {
            var num = parseInt(a.textContent, 10);
            if (!isNaN(num) && num > maxPage) {
                maxPage = num;
            }
        });

        function getBigImageCandidate(link) {
            var lastSlash = link.lastIndexOf('/');
            var dir = lastSlash !== -1 ? link.substring(0, lastSlash + 1) : '';
            var rest = lastSlash !== -1 ? link.substring(lastSlash + 1) : link;
            
            var dot = rest.lastIndexOf('.');
            if (dot === -1) return null;
            var name = rest.substring(0, dot);
            var ext = rest.substring(dot);
            
            var patterns = [
                { suffix: '_thumb', replace: '' },
                { suffix: '-thumb', replace: '' },
                { suffix: '_t', replace: '' },
                { suffix: '-t', replace: '' },
                { suffix: '_small', replace: '' },
                { suffix: '-small', replace: '' },
                { suffix: '.thumb', replace: '' },
                { suffix: '_min', replace: '' },
                { suffix: '-min', replace: '' },
                { suffix: '_mini', replace: '' },
                { suffix: '-mini', replace: '' }
            ];
            
            for (var i = 0; i < patterns.length; i++) {
                var p = patterns[i];
                if (name.toLowerCase().endsWith(p.suffix)) {
                    var newName = name.substring(0, name.length - p.suffix.length) + p.replace;
                    return dir + newName + ext;
                }
            }
            
            var prefixes = [
                { prefix: 'thumb_', replace: '' },
                { prefix: 't_', replace: '' },
                { prefix: 'min_', replace: '' },
                { prefix: 'mini_', replace: '' }
            ];
            for (var i = 0; i < prefixes.length; i++) {
                var p = prefixes[i];
                if (name.toLowerCase().startsWith(p.prefix)) {
                    var newName = name.substring(p.prefix.length) + p.replace;
                    return dir + newName + ext;
                }
            }
            
            return null;
        }

        var uniqueLinks = [];
        var seen = new Set();
        for(var i = 0; i < list.length; i++){
            var link = list[i].getAttribute("href");
            if(link){
                if(link.startsWith('//')){
                    link = 'https:' + link;
                }
                if(!seen.has(link)){
                    seen.add(link);
                    uniqueLinks.push(link);
                }
            }
        }

        var imagePairs = {};
        var images = uniqueLinks.filter(AV.isImage);
        for(var i = 0; i < images.length; i++){
            var img = images[i];
            imagePairs[img] = { big: img, thumb: img, isThumbOnly: false };
        }

        for(var i = 0; i < images.length; i++){
            var img = images[i];
            var bigCandidate = getBigImageCandidate(img);
            if(bigCandidate && imagePairs[bigCandidate]){
                imagePairs[bigCandidate].thumb = img;
                imagePairs[img].isThumbOnly = true;
            }
        }

        // Build thumbnails map BEFORE clearing the body!
        var linkThumbnails = {};
        for (var i = 0; i < uniqueLinks.length; i++) {
            var l = uniqueLinks[i];
            linkThumbnails[l] = AV.findThumbnailForLink(l);
        }

        var threads = [];
        if (AV.is4chan) {
            threads = AV.extract4chanThreads(uniqueLinks);
        }
        if (threads.length === 0) {
            if (!AV.isThreadedPage) {
                var defaultThread = {
                    id: 'default',
                    title: '',
                    posts: []
                };
                for(var i = 0; i < uniqueLinks.length; i++) {
                    var link = uniqueLinks[i];
                    defaultThread.posts.push({
                        id: 'file-' + i,
                        file: link,
                        thumbnail: linkThumbnails[link] || link,
                        text: '',
                        isOp: false
                    });
                }
                threads.push(defaultThread);
            } else {
                threads = AV.extract4chanThreads(uniqueLinks);
            }
        }

        var headerTitle = 'Apache Visualizer';
        if (AV.is4chan) {
            var boardTitleEl = document.querySelector('.boardTitle');
            if (boardTitleEl && boardTitleEl.textContent.trim()) {
                headerTitle = boardTitleEl.textContent.trim();
            } else {
                const boardMatch = window.location.pathname.match(/^\/([^\/]+)\/?/);
                const boardName = boardMatch ? '/' + boardMatch[1] + '/' : '';
                headerTitle = boardName ? boardName + ' Board' : '4chan Board';
            }
        }

        // Clear the body and populate structure AFTER we extracted the threads from original DOM
        document.body.innerHTML = "";

        document.body.insertAdjacentHTML('beforeend', AV.templates.header(headerTitle));
        document.body.insertAdjacentHTML('beforeend', AV.templates.foldersSection());
        document.body.insertAdjacentHTML('beforeend', AV.templates.controlsGroup());
        document.body.insertAdjacentHTML('beforeend', AV.templates.galleryGrid());

        var lightboxItems = [];
        const listElement = document.getElementById('list');
        const pastasElement = document.getElementById('pastas');

        if (AV.isThreadedPage) {
            listElement.classList.remove('gallery-grid');
        }

        // Process folders
        for(var i = 0; i < uniqueLinks.length; i++){
            var link = uniqueLinks[i];
            if(!AV.isImage(link) && !AV.isVideo(link) && !AV.isAudio(link) && !AV.isDocument(link)){
                if(AV.isFolder(link)){
                    var folderIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
                    pastasElement.insertAdjacentHTML('beforeend', '<a href="./'+link+'" class="folder-btn">' + folderIcon + link + '</a>');
                }
            }
        }

        // Helper to append a thread to the visualizer container
        function appendThreadToDOM(thread) {
            var currentTargetElement = listElement;
            
            if (AV.isThreadedPage && thread.title) {
                var sectionId = 'thread-sec-' + thread.id;
                var titleHTML = thread.title;
                if (thread.url) {
                    titleHTML = '<a href="' + thread.url + '" target="_blank" class="thread-link">' + thread.title + '</a>';
                }
                
                var activeFilesCount = thread.linksCount || 0;
                var badgeText = activeFilesCount + ' file(s)';
                if (thread.totalFiles && thread.totalFiles > activeFilesCount) {
                    badgeText = activeFilesCount + ' / ' + thread.totalFiles + ' file(s)';
                }
                
                listElement.insertAdjacentHTML('beforeend', AV.templates.threadSection(sectionId, titleHTML, badgeText, thread.url));
                currentTargetElement = document.querySelector('#' + sectionId + ' .thread-grid');
                var currentLayout = localStorage.getItem('av-layout') || 'vertical';
                if (currentLayout === 'vertical') {
                    currentTargetElement.classList.add('vertical-layout');
                }
            }
            
            var postsList = thread.posts || [];
            for (var p = 0; p < postsList.length; p++) {
                var post = postsList[p];
                
                if (post.file) {
                    var link = post.file;
                    if(AV.isImage(link)){
                        var pair = imagePairs[link] || { big: link, thumb: post.thumbnail || link, isThumbOnly: false };
                        if(pair.isThumbOnly) continue;
                        
                        var title = pair.big;
                        title = title.substring(title.lastIndexOf('/') + 1);
                        if(title.length > 20)
                            title = title.substring(0,20);
                            
                        lightboxItems.push({ type: 'image', big: pair.big, title: pair.big, thumb: pair.thumb });
                        var itemIndex = lightboxItems.length - 1;
                            
                        currentTargetElement.insertAdjacentHTML('beforeend', AV.templates.imageCard(pair, title, itemIndex, post.text));
                    }
                    else if(AV.isVideo(link)){
                        var title = link;
                        title = title.substring(title.lastIndexOf('/') + 1);
                        if(title.length > 20)
                            title = title.substring(0,20);
                            
                        var videoThumb = post.thumbnail || linkThumbnails[link] || "";
                        lightboxItems.push({ type: 'video', big: link, title: link, thumb: videoThumb });
                        var itemIndex = lightboxItems.length - 1;
                        
                        currentTargetElement.insertAdjacentHTML('beforeend', AV.templates.videoCard(link, title, itemIndex, videoThumb, post.text));
                    }
                    else if(AV.isAudio(link)){
                        var title = link;
                        title = title.substring(title.lastIndexOf('/') + 1);
                        if(title.length > 20)
                            title = title.substring(0,20);
                        currentTargetElement.insertAdjacentHTML('beforeend', AV.templates.audioCard(link, title));
                    }
                    else if(AV.isDocument(link)){
                        var title = link;
                        title = title.substring(title.lastIndexOf('/') + 1);
                        if(title.length > 20)
                            title = title.substring(0,20);
                        currentTargetElement.insertAdjacentHTML('beforeend', AV.templates.documentCard(link, title));
                    }
                } else {
                    if (AV.is4chan && post.text) {
                        currentTargetElement.insertAdjacentHTML('beforeend', AV.templates.textCard(post.id, post.text));
                    }
                }
            }
        }

        // Process first page threads immediately
        for (var t = 0; t < threads.length; t++) {
            appendThreadToDOM(threads[t]);
        }

        function applyLayout(layoutName) {
            if (layoutName === 'vertical') {
                listElement.classList.add('vertical-layout');
                document.querySelectorAll('.thread-grid').forEach(grid => {
                    grid.classList.add('vertical-layout');
                });
            } else {
                listElement.classList.remove('vertical-layout');
                document.querySelectorAll('.thread-grid').forEach(grid => {
                    grid.classList.remove('vertical-layout');
                });
            }
        }

        function applyFilter(showTexts) {
            if (showTexts) {
                document.body.classList.remove('hide-texts');
            } else {
                document.body.classList.add('hide-texts');
            }
        }

        // Apply initial layout & filter
        var initialLayout = localStorage.getItem('av-layout') || 'vertical';
        applyLayout(initialLayout);

        if (AV.is4chan) {
            var initialShowTexts = localStorage.getItem('av-show-texts') !== 'false';
            applyFilter(initialShowTexts);
        }

        // Update badge count and hide folders section if empty
        const folderCount = pastasElement.children.length;
        const foldersBadge = document.getElementById('foldersBadge');
        if (foldersBadge) {
            foldersBadge.textContent = folderCount;
        }
        if (folderCount === 0) {
            const foldersSection = document.querySelector('.folders-section');
            if (foldersSection) foldersSection.style.display = 'none';
        }

        // Append Lightbox HTML & Shortcuts Widget HTML
        document.body.insertAdjacentHTML('beforeend', AV.templates.lightbox());
        document.body.insertAdjacentHTML('beforeend', '<div id="visualizer-shortcuts-widget"></div>');
        
        var currentLightboxIndex = 0;

        function openLightbox(index) {
            currentLightboxIndex = parseInt(index, 10);
            updateLightboxContent();
            const lightbox = document.getElementById('galleryLightbox');
            lightbox.classList.add('active');
            document.body.style.overflow = 'hidden';
            updateShortcutsWidget(true);
        }

        function closeLightbox() {
            const lightbox = document.getElementById('galleryLightbox');
            lightbox.classList.remove('active');
            document.body.style.overflow = '';
            
            const video = document.getElementById('lightboxVideo');
            if (video) {
                video.pause();
                video.src = "";
            }

            // Sync selected card index back
            if (!AV.isThreadedPage) {
                const cards = document.querySelectorAll('.gallery-card');
                for (var i = 0; i < cards.length; i++) {
                    const trigger = cards[i].querySelector('.lightbox-trigger');
                    if (trigger && parseInt(trigger.getAttribute('data-index'), 10) === currentLightboxIndex) {
                        selectedCardIndex = i;
                        updateSelectedCard();
                        break;
                    }
                }
            }
            updateShortcutsWidget(false);
        }

        function nextLightbox() {
            if (lightboxItems.length === 0) return;
            currentLightboxIndex = (currentLightboxIndex + 1) % lightboxItems.length;
            updateLightboxContent();
        }

        function prevLightbox() {
            if (lightboxItems.length === 0) return;
            currentLightboxIndex = (currentLightboxIndex - 1 + lightboxItems.length) % lightboxItems.length;
            updateLightboxContent();
        }

        function updateLightboxContent() {
            var item = lightboxItems[currentLightboxIndex];
            if (!item) return;
            
            const img = document.getElementById('lightboxImg');
            const video = document.getElementById('lightboxVideo');
            
            if (video) {
                video.pause();
                video.src = "";
            }
            
            const videoShortcuts = document.querySelectorAll('.video-shortcut');
            if (item.type === 'video') {
                img.style.display = 'none';
                video.style.display = 'block';
                video.src = item.big;
                videoShortcuts.forEach(el => el.classList.remove('hidden'));
            } else {
                video.style.display = 'none';
                img.style.display = 'block';
                img.src = item.big;
                videoShortcuts.forEach(el => el.classList.add('hidden'));
            }
            
            document.getElementById('lightboxFilename').textContent = item.title;
            document.getElementById('lightboxCounter').textContent = (currentLightboxIndex + 1) + ' / ' + lightboxItems.length;
            
            updateShortcutsWidget(true);
        }

        // Lightbox and Accordion Event Handlers via Event Delegation
        var scrollKeysEnabled = true;
        var selectedThreadIndex = -1;
        var selectedCardIndex = -1;

        function updateShortcutsWidget(isLightboxOpen) {
            const widget = document.getElementById('visualizer-shortcuts-widget');
            if (!widget) return;
            
            var html = '';
            if (isLightboxOpen) {
                var currentItem = lightboxItems[currentLightboxIndex];
                var isVideo = currentItem && currentItem.type === 'video';
                
                html = '<div style="font-weight: bold; border-bottom: 1px solid #d9bfb7; padding-bottom: 2px; margin-bottom: 4px; color: #800000; font-size: 9pt;">Media Controls</div>';
                html += '<div class="shortcut-row"><span class="shortcut-key">A / D / ← / →</span><span class="shortcut-desc">Prev / Next</span></div>';
                if (isVideo) {
                    html += '<div class="shortcut-row"><span class="shortcut-key">Space</span><span class="shortcut-desc">Play / Pause</span></div>';
                    html += '<div class="shortcut-row"><span class="shortcut-key">Q / E</span><span class="shortcut-desc">Backward / Forward 5s</span></div>';
                    html += '<div class="shortcut-row"><span class="shortcut-key">R</span><span class="shortcut-desc">Forward 30s</span></div>';
                }
                html += '<div class="shortcut-row"><span class="shortcut-key">Esc</span><span class="shortcut-desc">Close</span></div>';
            } else {
                html = '<div style="font-weight: bold; border-bottom: 1px solid #d9bfb7; padding-bottom: 2px; margin-bottom: 4px; color: #800000; font-size: 9pt;">Keyboard Navigation</div>';
                if (scrollKeysEnabled) {
                    if (AV.isThreadedPage) {
                        html += '<div class="shortcut-row"><span class="shortcut-key">W / S / ↑ / ↓</span><span class="shortcut-desc">Prev / Next Thread</span></div>';
                        html += '<div class="shortcut-row"><span class="shortcut-key">Space</span><span class="shortcut-desc">Open Thread</span></div>';
                    } else {
                        var currentLayout = localStorage.getItem('av-layout') || 'vertical';
                        if (currentLayout === 'vertical') {
                            html += '<div class="shortcut-row"><span class="shortcut-key">W/S/A/D/Arrows</span><span class="shortcut-desc">Move Up / Down</span></div>';
                        } else {
                            html += '<div class="shortcut-row"><span class="shortcut-key">WASD / Arrows</span><span class="shortcut-desc">Move Selection</span></div>';
                        }
                        html += '<div class="shortcut-row"><span class="shortcut-key">Space</span><span class="shortcut-desc">Open Lightbox</span></div>';
                    }
                    html += '<div class="shortcut-row"><span class="shortcut-key">L</span><span class="shortcut-desc">Toggle Layout</span></div>';
                    if (AV.is4chan) {
                        html += '<div class="shortcut-row"><span class="shortcut-key">T</span><span class="shortcut-desc">Toggle Text/Files</span></div>';
                    }
                } else {
                    html += '<div class="shortcut-row"><span class="shortcut-desc" style="color: #767676;">Shortcuts Disabled</span></div>';
                }
            }
            widget.innerHTML = html;
        }

        function updateSelectedThread() {
            if (!AV.isThreadedPage) return;
            const sections = document.querySelectorAll('.thread-section');
            sections.forEach(sec => sec.classList.remove('selected'));
            
            if (selectedThreadIndex >= 0 && selectedThreadIndex < sections.length) {
                const currentSec = sections[selectedThreadIndex];
                currentSec.classList.add('selected');
                currentSec.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }

        function updateSelectedCard() {
            if (AV.isThreadedPage) return;
            const cards = document.querySelectorAll('.gallery-card');
            cards.forEach(card => card.classList.remove('selected-card'));
            
            if (selectedCardIndex >= 0 && selectedCardIndex < cards.length) {
                const currentCard = cards[selectedCardIndex];
                currentCard.classList.add('selected-card');
                currentCard.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }
        }

        document.addEventListener('click', function(e) {
            const toggleBtn = e.target.closest('#toggleScrollKeysBtn');
            if (toggleBtn) {
                scrollKeysEnabled = !scrollKeysEnabled;
                if (scrollKeysEnabled) {
                    toggleBtn.textContent = 'Scroll Keys: ON';
                    toggleBtn.style.color = '#800000';
                    toggleBtn.style.fontWeight = 'bold';
                } else {
                    toggleBtn.textContent = 'Scroll Keys: OFF';
                    toggleBtn.style.color = '#767676';
                    toggleBtn.style.fontWeight = 'normal';
                }
                updateShortcutsWidget(false);
                return;
            }

            const toggleLayoutBtn = e.target.closest('#toggleLayoutBtn');
            if (toggleLayoutBtn) {
                const currentLayout = localStorage.getItem('av-layout') || 'vertical';
                const newLayout = currentLayout === 'vertical' ? 'grid' : 'vertical';
                localStorage.setItem('av-layout', newLayout);
                applyLayout(newLayout);
                toggleLayoutBtn.textContent = 'Layout: ' + (newLayout.charAt(0).toUpperCase() + newLayout.slice(1));
                updateShortcutsWidget(false);
                return;
            }

            const toggleFilterBtn = e.target.closest('#toggleFilterBtn');
            if (toggleFilterBtn) {
                var showTexts = localStorage.getItem('av-show-texts') !== 'false';
                var newShowTexts = !showTexts;
                localStorage.setItem('av-show-texts', newShowTexts.toString());
                applyFilter(newShowTexts);
                toggleFilterBtn.textContent = newShowTexts ? 'View: Texts & Files' : 'View: Files Only';
                
                if (!newShowTexts && selectedCardIndex !== -1) {
                    const cards = document.querySelectorAll('.gallery-card');
                    if (selectedCardIndex < cards.length && cards[selectedCardIndex].offsetParent === null) {
                        var found = false;
                        for (var i = 0; i < cards.length; i++) {
                            if (cards[i].offsetParent !== null) {
                                selectedCardIndex = i;
                                found = true;
                                break;
                            }
                        }
                        if (!found) {
                            selectedCardIndex = -1;
                        }
                        updateSelectedCard();
                    }
                }
                updateShortcutsWidget(false);
                return;
            }

            const accordionHeader = e.target.closest('#foldersAccordionHeader');
            if (accordionHeader) {
                const section = accordionHeader.closest('.folders-section');
                if (section) {
                    const isOpen = section.classList.toggle('open');
                    const content = document.getElementById('foldersAccordionContent');
                    if (isOpen) {
                        content.style.maxHeight = content.scrollHeight + 'px';
                    } else {
                        content.style.maxHeight = '0px';
                    }
                }
                return;
            }

            const trigger = e.target.closest('.lightbox-trigger');
            if (trigger) {
                var index = trigger.getAttribute('data-index');
                openLightbox(index);
                return;
            }

            if (e.target.closest('#lightboxClose')) {
                closeLightbox();
                return;
            }

            if (e.target.closest('#lightboxPrev')) {
                e.stopPropagation();
                prevLightbox();
                return;
            }

            if (e.target.closest('#lightboxNext')) {
                e.stopPropagation();
                nextLightbox();
                return;
            }

            const lightbox = document.getElementById('galleryLightbox');
            if (e.target === lightbox) {
                closeLightbox();
            }
        });

        document.addEventListener('keydown', function(e) {
            const lightbox = document.getElementById('galleryLightbox');
            const lightboxActive = lightbox && lightbox.classList.contains('active');
            
            if (lightboxActive) {
                var currentItem = lightboxItems[currentLightboxIndex];
                const video = document.getElementById('lightboxVideo');

                if (e.key === ' ' || e.key === 'Spacebar') {
                    e.preventDefault();
                    if (currentItem && currentItem.type === 'video' && video) {
                        if (video.paused) {
                            video.play();
                        } else {
                            video.pause();
                        }
                    }
                } else if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') {
                    nextLightbox();
                } else if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') {
                    prevLightbox();
                } else if (e.key === 'Escape') {
                    closeLightbox();
                } else if (currentItem && currentItem.type === 'video' && video) {
                    if (e.key === 'q' || e.key === 'Q') {
                        video.currentTime = Math.max(0, video.currentTime - 5);
                    } else if (e.key === 'e' || e.key === 'E') {
                        video.currentTime = Math.min(video.duration || 0, video.currentTime + 5);
                    } else if (e.key === 'r' || e.key === 'R') {
                        video.currentTime = Math.min(video.duration || 0, video.currentTime + 30);
                    }
                }
            } else {
                if (scrollKeysEnabled) {
                    if (e.key === 'l' || e.key === 'L') {
                        e.preventDefault();
                        var btn = document.getElementById('toggleLayoutBtn');
                        if (btn) btn.click();
                        return;
                    }
                    if (AV.is4chan && (e.key === 't' || e.key === 'T')) {
                        e.preventDefault();
                        var btn = document.getElementById('toggleFilterBtn');
                        if (btn) btn.click();
                        return;
                    }

                    if (AV.isThreadedPage) {
                        const sections = document.querySelectorAll('.thread-section');
                        if (sections.length > 0) {
                            if (e.key === 's' || e.key === 'S' || e.key === 'ArrowDown') {
                                e.preventDefault();
                                selectedThreadIndex = Math.min(sections.length - 1, selectedThreadIndex + 1);
                                updateSelectedThread();
                            } else if (e.key === 'w' || e.key === 'W' || e.key === 'ArrowUp') {
                                e.preventDefault();
                                selectedThreadIndex = Math.max(0, selectedThreadIndex - 1);
                                updateSelectedThread();
                            } else if (e.key === ' ' || e.key === 'Spacebar') {
                                if (selectedThreadIndex >= 0 && selectedThreadIndex < sections.length) {
                                    e.preventDefault();
                                    const link = sections[selectedThreadIndex].querySelector('.thread-link');
                                    if (link) {
                                        link.click();
                                    }
                                }
                            }
                        }
                    } else {
                        const cards = document.querySelectorAll('.gallery-card');
                        if (cards.length > 0) {
                            var navigationKeys = ['w', 'W', 's', 'S', 'a', 'A', 'd', 'D', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
                            if (selectedCardIndex === -1 && navigationKeys.includes(e.key)) {
                                // Find first visible card
                                for (var i = 0; i < cards.length; i++) {
                                    if (cards[i].offsetParent !== null) {
                                        selectedCardIndex = i;
                                        break;
                                    }
                                }
                                if (selectedCardIndex !== -1) {
                                    updateSelectedCard();
                                }
                            } else if (selectedCardIndex !== -1) {
                                const currentCard = cards[selectedCardIndex];
                                const currentRect = currentCard.getBoundingClientRect();
                                const isVertical = listElement && listElement.classList.contains('vertical-layout');
                                
                                if (isVertical) {
                                    if (e.key === 'd' || e.key === 'D' || e.key === 'ArrowRight' || e.key === 's' || e.key === 'S' || e.key === 'ArrowDown') {
                                        e.preventDefault();
                                        var targetIndex = selectedCardIndex;
                                        while (targetIndex < cards.length - 1) {
                                            targetIndex++;
                                            if (cards[targetIndex].offsetParent !== null) {
                                                selectedCardIndex = targetIndex;
                                                break;
                                            }
                                        }
                                        updateSelectedCard();
                                    } else if (e.key === 'a' || e.key === 'A' || e.key === 'ArrowLeft' || e.key === 'w' || e.key === 'W' || e.key === 'ArrowUp') {
                                        e.preventDefault();
                                        var targetIndex = selectedCardIndex;
                                        while (targetIndex > 0) {
                                            targetIndex--;
                                            if (cards[targetIndex].offsetParent !== null) {
                                                selectedCardIndex = targetIndex;
                                                break;
                                            }
                                        }
                                        updateSelectedCard();
                                    }
                                } else {
                                    if (e.key === 'd' || e.key === 'D' || e.key === 'ArrowRight') {
                                        e.preventDefault();
                                        var targetIndex = selectedCardIndex;
                                        while (targetIndex < cards.length - 1) {
                                            targetIndex++;
                                            if (cards[targetIndex].offsetParent !== null) {
                                                selectedCardIndex = targetIndex;
                                                break;
                                            }
                                        }
                                        updateSelectedCard();
                                    } else if (e.key === 'a' || e.key === 'A' || e.key === 'ArrowLeft') {
                                        e.preventDefault();
                                        var targetIndex = selectedCardIndex;
                                        while (targetIndex > 0) {
                                            targetIndex--;
                                            if (cards[targetIndex].offsetParent !== null) {
                                                selectedCardIndex = targetIndex;
                                                break;
                                            }
                                        }
                                        updateSelectedCard();
                                    } else if (e.key === 's' || e.key === 'S' || e.key === 'ArrowDown') {
                                        e.preventDefault();
                                        var closestIndex = -1;
                                        var minVDist = Infinity;
                                        for (var i = 0; i < cards.length; i++) {
                                            if (cards[i].offsetParent === null) continue; // Skip hidden cards
                                            var rect = cards[i].getBoundingClientRect();
                                            var hDist = Math.abs(rect.left - currentRect.left);
                                            if (hDist < 50 && rect.top >= currentRect.bottom - 5) {
                                                var vDist = rect.top - currentRect.top;
                                                if (vDist < minVDist) {
                                                    minVDist = vDist;
                                                    closestIndex = i;
                                                }
                                            }
                                        }
                                        if (closestIndex !== -1) {
                                            selectedCardIndex = closestIndex;
                                            updateSelectedCard();
                                        }
                                    } else if (e.key === 'w' || e.key === 'W' || e.key === 'ArrowUp') {
                                        e.preventDefault();
                                        var closestIndex = -1;
                                        var minVDist = Infinity;
                                        for (var i = 0; i < cards.length; i++) {
                                            if (cards[i].offsetParent === null) continue; // Skip hidden cards
                                            var rect = cards[i].getBoundingClientRect();
                                            var hDist = Math.abs(rect.left - currentRect.left);
                                            if (hDist < 50 && rect.bottom <= currentRect.top + 5) {
                                                var vDist = currentRect.top - rect.top;
                                                if (vDist < minVDist) {
                                                    minVDist = vDist;
                                                    closestIndex = i;
                               				}
                                            }
                                        }
                                        if (closestIndex !== -1) {
                                            selectedCardIndex = closestIndex;
                                            updateSelectedCard();
                                        }
                                    }
                                }
                                
                                if (e.key === ' ' || e.key === 'Spacebar') {
                                    e.preventDefault();
                                    const trigger = currentCard.querySelector('.lightbox-trigger');
                                    if (trigger) {
                                        trigger.click();
                                    }
                                }
                            }
                        }
                    }
                }
            }
        });

        // Initialize background loader for 4chan boards
        const is4chanBoard = AV.isThreadedPage && window.location.hostname.includes('4chan.org');
        if (is4chanBoard && maxPage > 1) {
            document.body.insertAdjacentHTML('beforeend', `
                <div id="visualizer-bg-loader">
                    <div class="loader-spinner"></div>
                    <span id="bg-loader-text">Loading page 2 / ${maxPage}...</span>
                </div>
            `);

            var currentPageToFetch = 2;
            const boardMatch = window.location.pathname.match(/^\/([^\/]+)\/?/);
            const boardName = boardMatch ? boardMatch[1] : '';
            const boardUrl = window.location.origin + '/' + boardName + '/';

            function fetchNextPage() {
                if (currentPageToFetch > maxPage) {
                    const loader = document.getElementById('visualizer-bg-loader');
                    if (loader) {
                        loader.style.borderColor = '#22c55e';
                        const spinner = loader.querySelector('.loader-spinner');
                        if (spinner) spinner.style.borderTopColor = '#22c55e';
                        document.getElementById('bg-loader-text').textContent = 'All threads loaded!';
                        setTimeout(function() {
                            loader.style.opacity = '0';
                            loader.style.transition = 'opacity 0.5s ease';
                            setTimeout(function() { loader.remove(); }, 500);
                        }, 2000);
                    }
                    return;
                }

                const loaderText = document.getElementById('bg-loader-text');
                if (loaderText) {
                    loaderText.textContent = 'Loading page ' + currentPageToFetch + ' / ' + maxPage + '...';
                }

                fetch(boardUrl + currentPageToFetch)
                    .then(response => {
                        if (!response.ok) throw new Error('Page offline');
                        return response.text();
                    })
                    .then(html => {
                        var parser = new DOMParser();
                        var doc = parser.parseFromString(html, 'text/html');
                        var docList = doc.querySelectorAll("a");
                        var docUniqueLinks = [];

                        for (var i = 0; i < docList.length; i++) {
                            var link = docList[i].getAttribute("href");
                            if (link) {
                                if (link.startsWith('//')) {
                                    link = 'https:' + link;
                                }
                                if (!seen.has(link)) {
                                    seen.add(link);
                                    docUniqueLinks.push(link);
                                    uniqueLinks.push(link);
                                }
                            }
                        }

                        var docImages = docUniqueLinks.filter(AV.isImage);
                        for (var i = 0; i < docImages.length; i++) {
                            var img = docImages[i];
                            imagePairs[img] = { big: img, thumb: img, isThumbOnly: false };
                        }
                        for (var i = 0; i < docImages.length; i++) {
                            var img = docImages[i];
                            var bigCandidate = getBigImageCandidate(img);
                            if (bigCandidate && imagePairs[bigCandidate]) {
                                imagePairs[bigCandidate].thumb = img;
                                imagePairs[img].isThumbOnly = true;
                            }
                        }

                        for (var i = 0; i < docUniqueLinks.length; i++) {
                            var l = docUniqueLinks[i];
                            linkThumbnails[l] = AV.findThumbnailForLink(l, doc);
                        }

                        var docThreads = AV.extract4chanThreads(docUniqueLinks, doc);
                        for (var t = 0; t < docThreads.length; t++) {
                            var thread = docThreads[t];
                            threads.push(thread);
                            appendThreadToDOM(thread);
                        }

                        currentPageToFetch++;
                        setTimeout(fetchNextPage, 100);
                    })
                    .catch(err => {
                        console.warn('Failed to load page ' + currentPageToFetch, err);
                        currentPageToFetch++;
                        setTimeout(fetchNextPage, 100);
                    });
            }

            setTimeout(fetchNextPage, 200);
        }

        updateShortcutsWidget(false);
        window.scrollTo(0,0);
    }

    runVisualizer();
})();