document.addEventListener("DOMContentLoaded", function () {
        const books = document.querySelectorAll('.cover'); // Select all book divs
        const batchSize = 10; // Number of books per page


    fetch('https://www.skor.stacksdiscovery.com/sites/default/files/css/bookshelf_stylesheet.txt')
        .then(response => response.text())
        .then(css => {
            const style = document.createElement('style');
            style.textContent = css;
            document.head.appendChild(style);
        })
        .catch(error => console.error('Error loading stylesheet:', error));

        function displayBatch(batchIndex) {
            books.forEach((book, index) => {
                book.style.display = (index >= batchIndex * batchSize && index < (batchIndex + 1) * batchSize) ? 'block' : 'none';
            });
        }

        function createNavButtons() {
            const totalBatches = Math.ceil(books.length / batchSize);

            // Do not create navigation buttons if 10 or fewer books
            if (books.length <= batchSize) {
                displayBatch(0); // Show all books in a single batch
                return;
            }

            const navContainer = document.createElement('div');
            navContainer.classList.add('pagination-buttons');

            for (let i = 0; i < totalBatches; i++) {
                const startBook = cleanTitle(books[i * batchSize].querySelector('.hangingposter.red').textContent);
                const endBookIndex = Math.min((i + 1) * batchSize, books.length) - 1;

                // Check if the last page contains only one book
                const endBook = (i === totalBatches - 1 && i * batchSize === endBookIndex)
                    ? startBook // If single book, use the same title for start and end
                    : cleanTitle(books[endBookIndex].querySelector('.hangingposter.red').textContent);

                const button = document.createElement('button');
                button.textContent = startBook === endBook ? `${startBook}` : `${startBook}-${endBook}`;
                button.dataset.batchIndex = i;
                button.className = 'nav-button';

                button.addEventListener('click', () => {
                    displayBatch(i);
                    setActiveButton(button);
                    scrollToStickyAndBook(i); // Scroll to sticky and position the book below it
                });

                navContainer.appendChild(button);
            }

            const hrElement = document.querySelector('.sticky hr.full');
            hrElement.insertAdjacentElement('afterend', navContainer);
        }

        function cleanTitle(title) {
            // Remove leading articles and trim the title
            return title.trim()
                .replace(/^(A |An |The )/i, '') // Remove "A ", "An ", or "The " at the start (case insensitive)
                .substring(0, 3) // Take the first three characters
                .toUpperCase(); // Convert to uppercase (optional, for uniformity)
        }

        function setActiveButton(activeButton) {
            document.querySelectorAll('.nav-button').forEach((button) => {
                button.classList.remove('active');
            });
            activeButton.classList.add('active');
        }

        function scrollToStickyAndBook(batchIndex) {
            const stickyElement = document.querySelector('.sticky');
            const firstBookInBatch = books[batchIndex * batchSize];
            if (stickyElement && firstBookInBatch) {
                const stickyHeight = stickyElement.offsetHeight; // Get the height of the sticky element
                const bookOffsetTop = firstBookInBatch.getBoundingClientRect().top + window.scrollY; // Get the position of the book relative to the document
                const scrollTargetPosition = bookOffsetTop - stickyHeight; // Position the book just below the sticky element

                window.scrollTo({ top: scrollTargetPosition, behavior: 'smooth' });
            }
        }

        // Initialize the page
        createNavButtons(); // Create the pagination buttons

        if (books.length > batchSize) {
            displayBatch(0); // Show the first batch of books by default
            const firstButton = document.querySelector('.nav-button');
            if (firstButton) {
                firstButton.classList.add('active');
            }
        } else {
            books.forEach(book => book.style.display = 'block'); // Show all books
        }
    });