Nhentai Manga Loader

Loads nhentai manga chapters into one page in a long strip format with image scaling, click events, and a dark mode for reading.
Pasang skrip ini ?
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Nhentai Manga Loader
// @namespace    http://www.nhentai.net
// @version      6.0.11
// @author       longkidkoolstar
// @description  Loads nhentai manga chapters into one page in a long strip format with image scaling, click events, and a dark mode for reading.
// @match        https://nhentai.net/*
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @icon         https://i.imgur.com/S0x03gs.png
// @grant        GM.getValue
// @grant        GM.setValue
// @grant        GM.deleteValue
// @grant        GM.listValues
// @license      MIT
// @noframes
// ==/UserScript==
 
(function() {
    'use strict';
 
    let loadedPages = 0; // Track loaded pages
    let totalPages = 0; // Track total pages
    let loadingImages = 0; // Track loading images
    let totalImages = 0; // Track total images
    let freshloadedcache = false;
    const mangaId = extractMangaId(window.location.href);
 
// Add this new function to handle jumping to pages
function handleJumpToPage(input) {
    const targetPage = parseInt(input.value);
    if (isNaN(targetPage) || targetPage < 1 || targetPage > totalPages) {
        alert(`Please enter a valid page number between 1 and ${totalPages}`);
        return;
    }
 
    const pageContainers = document.querySelectorAll('.manga-page-container');
    const targetContainer = Array.from(pageContainers).find(container => {
        const img = container.querySelector('img');
        return img && parseInt(img.alt.replace('Page ', '')) === targetPage;
    });
 
    if (targetContainer) {
        // Page is loaded, scroll to it
        if (/Mobi/i.test(navigator.userAgent)) {
            // Get the offset from the top of the document instead of viewport
            const offsetTop = targetContainer.offsetTop; // Add 5px to the top offset
            // Scroll to the absolute position
            window.scrollTo({
                top: offsetTop,
                left: 0,
                behavior: 'instant' // Use 'instant' for consistent behavior
            });
        } else {
            targetContainer.scrollIntoView({ behavior: 'smooth' });
        }
    } else {
        // Page not loaded, redirect to it
        const mangaId = extractMangaId(window.location.href);
        loadSpecificPage(targetPage, mangaId);
    }
 
    // Clear the input after jumping
    input.value = '';
}
 
 
    (async () => {
        const value = JSON.parse(localStorage.getItem('redirected'));
        if (value === null) {
            localStorage.setItem('redirected', JSON.stringify(false)); // Flag to track if the page has been redirected
        }
    })();
 
    // Helper to create custom style sheets for elements
    function addCustomStyles() {
        const style = document.createElement('style');
        style.innerHTML = `
            #manga-container {
                max-width: 100vw;
                margin: 0 auto;
                padding: 0;
            }
            .manga-page-container {
                position: relative;
                display: block;
                margin: 0;
            }
            .manga-page-container img {
                max-width: 100%;
                display: block;
                margin: 3px auto;
                border-radius: 0;
                transition: all 0.3s ease;
                box-shadow: none;
            }
            .ml-counter {
                background-color: #222;
                color: white;
                border-radius: 10px;
                width: 40px;
                margin-left: auto;
                margin-right: auto;
                margin-top: -8.8px;
                padding-left: 5px;
                padding-right: 5px;
                border: 1px solid white;
                z-index: 100;
                position: relative;
                font-size: 9px;
                font-family: 'Open Sans', sans-serif;
                top: 4px;
            }
            .exit-btn {
                background-color: #e74c3c;
                color: white;
                padding: 5px 10px;
                font-size: 14px;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                margin: 10px auto;
                display: block;
                text-align: center;
            }
            .exit-btn:hover {
                background-color: #c0392b;
            }
            .exit-btn:active {
                background-color: #a93226;
            }
            .ml-stats {
                position: fixed;
                bottom: 10px;
                right: 10px;
                background-color: rgba(0, 0, 0, 0.8);
                color: white;
                border-radius: 8px;
                padding: 3px;
                z-index: 1000;
                font-family: 'Open Sans', sans-serif;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
            .ml-stats-content {
                display: flex;
                align-items: center;
                cursor: pointer;
            }
            .ml-button {
                cursor: pointer;
                margin-left: 5px;
            }
            .ml-box {
                display: none;
                background-color: #333;
                color: white;
                padding: 10px;
                border-radius: 5px;
                margin-top: 5px;
                width: 200px;
            }
        `;
        document.head.appendChild(style);
    }
 
//------------------------------------------------------------------------------**Remove this when transfer over to Nhentai+**------------------------------------------------------------------------------
 
let isPopupVisible = false; // Flag to track if the popup is visible
 
function showPopupForSavedPosition(message, onConfirm, options = {}) {
    const existingPopup = document.getElementById('popup');
    if (existingPopup) {
        document.body.removeChild(existingPopup);
    }
 
    const popup = document.createElement('div');
    popup.id = 'popup';
    popup.innerHTML = `
        <div class="popup-content" role="alert">
            <p>${message}</p>
            <button class="confirm-btn">${options.confirmText || 'Yes'}</button>
            <button class="cancel-btn">${options.cancelText || 'No'}</button>
        </div>
    `;
    document.body.appendChild(popup);
 
    // Set the popup visibility flag
    isPopupVisible = true; 
 
    // Add CSS styling for the popup
    const style = document.createElement('style');
    style.textContent = `
        #popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.9);
            color: #fff;
            border-radius: 5px;
            z-index: 9999;
            padding: 15px;
            max-width: 300px;
            text-align: center;
        }
        .popup-content {
            position: relative;
            padding: 10px;
        }
        .confirm-btn,
        .cancel-btn {
            margin-top: 10px;
            background: none;
            border: none;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            transition: color 0.3s, transform 0.3s;
            margin: 0 5px; /* Space between buttons */
        }
        .confirm-btn:hover,
        .cancel-btn:hover {
            color: #ff0000; /* Change color on hover */
            transform: scale(1.1); /* Slightly enlarge on hover */
        }
    `;
    document.head.appendChild(style);
 
    // Handle confirmation button click
    document.querySelector('.confirm-btn').addEventListener('click', function() {
        document.body.removeChild(popup);
        document.head.removeChild(style);
        isPopupVisible = false; // Reset the flag when popup is closed
        if (onConfirm) onConfirm(); // Call the onConfirm callback
    });
 
    // Handle cancel button click
    document.querySelector('.cancel-btn').addEventListener('click', function() {
        document.body.removeChild(popup);
        document.head.removeChild(style);
        isPopupVisible = false; // Reset the flag when popup is closed
    });
 
    // Auto-close feature based on options
    const duration = options.duration || 10000; // Default to 10 seconds if not specified
    setTimeout(() => {
        if (document.body.contains(popup)) {
            document.body.removeChild(popup);
            document.head.removeChild(style);
            isPopupVisible = false; // Reset the flag when auto-closed
        }
    }, duration); // Use the specified duration
}
 
 
 
//------------------------------------------------------------------------------**Remove this when transfer over to Nhentai+**------------------------------------------------------------------------------
 
// Function to extract manga ID from URL
function extractMangaId(url) {
    const match = url.match(/\/g\/(\d+)/);
    return match ? match[1] : null;
}
 
function getCurrentPage(entry) {
  const pageElements = document.querySelectorAll('.manga-page-container');
  for (let i = 0; i < pageElements.length; i++) {
    if (entry.target === pageElements[i]) {
      const imgElement = pageElements[i].querySelector('img');
      const altText = imgElement.alt;
      const pageNumber = parseInt(altText.replace('Page ', ''));
      return pageNumber;
    }
  }
  return 1; // Default to page 1 if no current page is found
}
 
 
    // Create the "Exit" button
    function createExitButton() {
        const button = document.createElement('button');
        button.textContent = 'Exit';
        button.className = 'exit-btn';
        return button;
    }
 
    // Add page counter below the image
    function addPageCounter(pageNumber) {
        const counter = document.createElement('div');
        counter.className = 'ml-counter';
        counter.textContent = `${pageNumber}`;
        return counter;
    }
 
    // Update stats display
    function updateStats() {
        const statsContainer = document.querySelector('.ml-stats-pages');
        const statsBox = document.querySelector('.ml-floating-msg');
        if (statsBox && !statsBox.querySelector('.jump-controls')) {
            statsBox.innerHTML = `<strong>Stats:</strong>
<span class="ml-loading-images">${loadingImages} images loading</span>
<span class="ml-total-images">${totalImages} images in chapter</span>
<span class="ml-loaded-pages">${loadedPages} pages parsed</span>`;
 
if (statsContainer) {
    statsContainer.textContent = `${loadedPages}/${totalPages} loaded`;
}
        }
    }
 
// Declare reloadMode at the top level
let reloadMode = false; // Flag to track reload mode
 
async function createStatsWindow() {
    const statsWindow = document.createElement('div');
    statsWindow.className = 'ml-stats';
 
    // Use a wrapper to keep the button and content aligned
    const statsWrapper = document.createElement('div');
    statsWrapper.style.display = 'flex';
    statsWrapper.style.alignItems = 'center'; // Center vertically
 
    const collapseButton = document.createElement('span');
    collapseButton.className = 'ml-stats-collapse';
    collapseButton.title = 'Hide stats';
    collapseButton.textContent = '>>';
    collapseButton.style.cursor = 'pointer';
    collapseButton.style.marginRight = '10px'; // Space between button and content
    collapseButton.addEventListener('click', async function() {
        contentContainer.style.display = contentContainer.style.display === 'none' ? 'block' : 'none';
        collapseButton.textContent = contentContainer.style.display === 'none' ? '<<' : '>>';
 
        // Save the collapse state
        await GM.setValue('statsCollapsed', contentContainer.style.display === 'none');
    });
 
    const contentContainer = document.createElement('div');
    contentContainer.className = 'ml-stats-content';
 
    const statsText = document.createElement('span');
    statsText.className = 'ml-stats-pages';
    statsText.textContent = `0/0 loaded`; // Initial stats
 
    const infoButton = document.createElement('i');
    infoButton.innerHTML = '<i class="fas fa-question-circle"></i>';
    infoButton.title = 'See userscript information and help';
    infoButton.style.marginLeft = '5px';
    infoButton.style.marginRight = '5px'; // Add space to the right
    infoButton.addEventListener('click', function() {
        alert('This userscript loads manga pages in a single view. It is intended to be used for manga reading and saves your previous scroll position amongst other features.');
    });
    
    const moreStatsButton = document.createElement('i');
    moreStatsButton.innerHTML = '<i class="fas fa-chart-pie"></i>';
    moreStatsButton.title = 'See detailed page stats';
    moreStatsButton.style.marginRight = '5px';
    moreStatsButton.addEventListener('click', function() {
        const statsBox = document.querySelector('.ml-floating-msg');
        
        // If stats box is showing stats content, close it
        if (statsBox.style.display === 'block' && statsBox.querySelector('strong').textContent === 'Stats:') {
            statsBox.style.display = 'none';
            return;
        }
        
        // Show stats content
        statsBox.style.display = 'block';
        statsBox.innerHTML = `<strong>Stats:</strong>
<span class="ml-loading-images">${loadingImages} images loading</span>
<span class="ml-total-images">${totalImages} images in chapter</span>
<span class="ml-loaded-pages">${loadedPages} pages parsed</span>`;
    });
    
    // Add new jump page button
    const jumpPageButton = document.createElement('i');
    jumpPageButton.innerHTML = '<i class="fas fa-search"></i>';
    jumpPageButton.title = 'Toggle jump to page';
    jumpPageButton.style.marginRight = '5px';
    jumpPageButton.addEventListener('click', function() {
        const statsBox = document.querySelector('.ml-floating-msg');
        
        // If stats box is showing jump page content, close it
        if (statsBox.style.display === 'block' && statsBox.querySelector('strong').textContent === 'Jump to Page') {
            statsBox.style.display = 'none';
            return;
        }
        
        // Show jump page content
        statsBox.style.display = 'block';
        statsBox.innerHTML = `<strong>Jump to Page</strong>
<div class="jump-controls" style="display: flex; gap: 5px; margin: 5px 0;">
    <button class="jump-first">First</button>
    <input type="number" class="jump-input" min="1" max="${totalPages}" placeholder="1-${totalPages}">
    <button class="jump-last">Last</button>
</div>
<button class="load-saved-position">Load Saved Position</button> 
<button class="jump-go">Go</button>`;
 
        // Style the input and buttons
        const jumpInput = statsBox.querySelector('.jump-input');
        jumpInput.style.cssText = `
            flex: 2;
            width: 50px;
            background: #444;
            color: #fff;
            border: 1px solid #555;
            border-radius: 4px;
            padding: 2px 4px;
        `;
 
        // Style all buttons consistently
        const buttons = statsBox.querySelectorAll('button');
        buttons.forEach(button => {
            button.style.cssText = `
                background-color: #444;
                color: #fff;
                border: 1px solid #555;
                border-radius: 4px;
                padding: 2px 6px;
                cursor: pointer;
                transition: background-color 0.2s;
                width: 100%;
                margin-top: 5px;
                text-align: left;
            `;
        });
 
        // Special styling for First/Last buttons
        const firstLastButtons = statsBox.querySelectorAll('.jump-first, .jump-last');
        firstLastButtons.forEach(button => {
            button.style.cssText += `
                flex: 1;
                margin-top: 0;
                width: auto;
            `;
        });
 
        // Add event listeners
        const loadSavedPositionbtn =  statsBox.querySelector('.load-saved-position')
        const jumpGo = statsBox.querySelector('.jump-go');
        const jumpFirst = statsBox.querySelector('.jump-first');
        const jumpLast = statsBox.querySelector('.jump-last');
 
        loadSavedPositionbtn.addEventListener('click', () => loadSavedPosition(mangaId));
        jumpGo.addEventListener('click', () => handleJumpToPage(jumpInput));
        jumpFirst.addEventListener('click', () => handleJumpToPage({ value: '1' }));
        jumpLast.addEventListener('click', () => handleJumpToPage({ value: totalPages.toString() }));
 
 
    });
 
    const refreshButton = document.createElement('i');
    refreshButton.innerHTML = '<i class="fas fa-sync-alt"></i>';
    refreshButton.title = 'Click an image to reload it.';
    refreshButton.addEventListener('click', function() {
        reloadMode = !reloadMode;
        refreshButton.style.color = reloadMode ? 'orange' : '';
        console.log(`Reload mode is now ${reloadMode ? 'enabled' : 'disabled'}.`);
    });
 
// Add the mini exit button for refreshing the page
const miniExitButton = document.createElement('button');
miniExitButton.innerHTML = '<i class="fas fa-sign-out-alt"></i>';  // Font Awesome icon for sign out
miniExitButton.title = 'Exit the Manga Loader';
miniExitButton.style.marginLeft = '10px'; // Space between other buttons
miniExitButton.style.backgroundColor = '#e74c3c';  // Red color for the button
miniExitButton.style.color = '#fff';
miniExitButton.style.border = 'none';
miniExitButton.style.padding = '2px 5px';
miniExitButton.style.borderRadius = '5px';
miniExitButton.style.cursor = 'pointer';
 
// Refresh the page when the button is clicked
miniExitButton.addEventListener('click', function() {
    window.location.reload();  // Refresh the page
});
 
    // Append all elements to the stats content container
    contentContainer.appendChild(statsText);
    contentContainer.appendChild(infoButton);
    contentContainer.appendChild(moreStatsButton);
    contentContainer.appendChild(jumpPageButton); // Add the new button
    contentContainer.appendChild(refreshButton);
    contentContainer.appendChild(miniExitButton);
 
    statsWrapper.appendChild(collapseButton);
    statsWrapper.appendChild(contentContainer);
    statsWindow.appendChild(statsWrapper);
 
    const statsBox = document.createElement('pre');
    statsBox.className = 'ml-box ml-floating-msg';
    statsBox.style.display = 'none'; // Initially hidden
 
    // Create the stats content
    const statsContent = `<strong>Stats:</strong>
<span class="ml-loading-images">0 images loading</span>
<span class="ml-total-images">0 images in chapter</span>
<span class="ml-loaded-pages">0 pages parsed</span>`;
 
    statsBox.innerHTML = statsContent;
    statsWindow.appendChild(statsBox);
 
    // Check and set initial collapse state
    const collapsed = await GM.getValue('statsCollapsed', false);
    if (collapsed) {
        contentContainer.style.display = 'none';
        collapseButton.textContent = '<<'; // Change to indicate expanded state
    }
 
    // Add hover effect
    statsWindow.style.transition = 'opacity 0.3s';
    statsWindow.style.opacity = '0.6'; // Dimmed by default
 
    statsWindow.addEventListener('mouseenter', function() {
        statsWindow.style.opacity = '1'; // Fully visible on hover
    });
 
    statsWindow.addEventListener('mouseleave', function() {
        statsWindow.style.opacity = '0.6'; // Dim again on mouse leave
    });
 
    document.body.appendChild(statsWindow);
}
 
 
 
 
// Add the click event to images
function addClickEventToImage(image) {
    image.addEventListener('click', function() {
        if (reloadMode) {
            const imgSrc = image.dataset.src || image.src;
            image.src = ''; // Clear the src to trigger reload
            setTimeout(() => {
                image.src = imgSrc; // Retry loading after clearing
            }, 100); // Short delay to ensure proper reload
        }
    });
}
 
 
 
    // Function to hide specified elements
    function hideElements() {
        const elementsToHide = ['#image-container', '#content', 'nav'];
        elementsToHide.forEach(selector => {
            const element = document.querySelector(selector);
            if (element) {
                element.style.display = 'none';
            }
        });
    }
 
// Add this at the top level to track image loading status
const imageStatus = []; // Array to track the status of each image
 
// Add an event listener to detect when the user scrolls
window.addEventListener('scroll', logCurrentPage);
 
// Variable to store the previous page
let previousPage = 0;
 
// Function to log the current page
function logCurrentPage() {
    // Check if the URL matches the desired pattern
    if (!window.location.href.match(/^https:\/\/nhentai\.net\/g\//)) {
        return; // Exit if the URL is not correct
    }
 
    // Check if the download button exists
    if (document.querySelector("#download")) {
        return; // Exit if the download button exists
    }
 
    const currentPage = getCurrentVisiblePage();
    const totalPages = document.querySelectorAll('.manga-page-container').length;
 
    // Check if the Load Manga button exists
    const loadMangaButton = document.querySelector('.load-manga-btn');
    if (loadMangaButton) {
        return; // Exit if the Load Manga button exists
    }
 
    if ((currentPage === totalPages - 1 || currentPage === totalPages) && (!isPopupVisible || freshloadedcache)) {
        //console.log(`Current page: ${currentPage}`);
        previousPage = currentPage;
        if (currentPage >= totalPages - 1) deleteMangaFromStorage();
    }
}
 
function getCurrentVisiblePage() {
    const pageContainers = document.querySelectorAll('.manga-page-container');
    let visiblePage = 0;
    const totalPages = pageContainers.length;
    
    // No pages found
    if (totalPages === 0) {
       // console.warn('No page containers found.');
        return visiblePage;
    }
    
    // Determine if device is mobile or desktop based on screen width
    const isMobile = window.innerWidth <= 768; // Common breakpoint for mobile
    
    // Use different thresholds based on device type
    const visibilityThreshold = isMobile ? 70 : 25; // Lower threshold for desktop
    
    pageContainers.forEach((container, index) => {
        const img = container.querySelector('img');
        if (img && img.alt) {
            const pageNumber = parseInt(img.alt.replace('Page ', ''), 10);
            const rect = img.getBoundingClientRect();
            const pageHeight = rect.bottom - rect.top;
            const visibleHeight = Math.min(window.innerHeight, rect.bottom) - Math.max(0, rect.top);
            const visiblePercentage = (visibleHeight / pageHeight) * 100;
            
            if (visiblePercentage >= visibilityThreshold) {
                visiblePage = pageNumber;
            }
            
            // Keep the last page logic
            if (index + 1 === totalPages && visiblePercentage >= 10) {
                visiblePage = totalPages;
            }
        }
    });
    
    // Fallback logic remains the same
    if (visiblePage === 0) {
        const currentPageMatch = window.location.pathname.match(/\/g\/\d+\/(\d+)/);
        if (currentPageMatch) {
            visiblePage = parseInt(currentPageMatch[1], 10);
        }
    }
    
    //console.log("Current visible page determined:", visiblePage);
    return visiblePage;
}
 
 
// Function to delete manga from storage
function deleteMangaFromStorage() {
    const mangaId = window.location.pathname.match(/\/g\/(\d+)/)[1];
    GM.deleteValue(mangaId); // Delete the manga entry
 
    // Check if metadata exists before attempting to delete it
    GM.getValue(`metadata_${mangaId}`).then(metadata => {
        if (metadata) {
            GM.deleteValue(`metadata_${mangaId}`); // Delete the associated metadata
            console.log(`Metadata for manga ${mangaId} deleted from storage`);
        } else {
            console.log(`No metadata found for manga ${mangaId}, skipping deletion`);
        }
    });
 
    console.log(`Manga ${mangaId} deleted from storage`);
}
 
// Replace the addScrollListener function with the following code
let previousPagex = 0; // Initialize previousPage at the top level
 
window.addEventListener('scroll', async () => {
    const currentPage = getCurrentVisiblePage();
    //console.log("current page:", currentPage, "last page", previousPagex);
    // Only save the current page if the popup is not visible and the current page is greater than the previous page
    if (!isPopupVisible || freshloadedcache) {
        if (currentPage > previousPagex) {
            console.log(`Current page: ${currentPage}, Previous page: ${previousPagex}`);
            await saveCurrentPosition(mangaId, currentPage);
            previousPagex = currentPage; // Update previousPage to the current page
        }
    }
});
// Log the state of freshloadedcache every second
setInterval(() => {
   // console.log(`Fresh loaded cache state: ${freshloadedcache}`);
}, 1000);
 
 
// Load all manga images with page separators and scaling
function loadMangaImages(mangaId) {
    hideElements();
    createStatsWindow(); // Create the stats window
 
    const mangaContainer = document.createElement('div');
    mangaContainer.id = 'manga-container';
    document.body.appendChild(mangaContainer);
    
 
    
 
    const exitButtonTop = createExitButton();
    mangaContainer.appendChild(exitButtonTop);
 
    totalPages = parseInt(document.querySelector('.num-pages').textContent.trim());
    totalImages = totalPages; // Update total images for stats
    const initialPage = parseInt(window.location.href.match(/\/g\/\d+\/(\d+)/)[1]);
    let currentPage = initialPage;
 
    // Queue for tracking loading images
    const loadingQueue = [];
    const maxConcurrentLoads = /Mobi/.test(navigator.userAgent) ? 10 : 40; // Maximum number of concurrent image loads
 
    // Helper to create the page container with images
    function createPageContainer(pageNumber, imgSrc) {
        const container = document.createElement('div');
        container.className = 'manga-page-container';
 
        // Create the actual image element
        const img = document.createElement('img');
        img.src = ''; // Start with empty src to avoid loading it immediately
        img.dataset.src = imgSrc; // Store the actual src in data attribute
        img.alt = `Page ${pageNumber}`;
 
        // Add page counter below the image
        const pageCounter = addPageCounter(pageNumber);
 
        // Append the image and page counter
        container.appendChild(img);
        container.appendChild(pageCounter); // <-- Page number is shown here
 
          // Add exit button to the bottom of the last loaded page
    if (pageNumber === totalPages) {
        const exitButton = createExitButton();
        container.appendChild(exitButton);
        exitButton.addEventListener('click', () => {
            window.location.reload();
        })
    }
 
        // Track the image status
        imageStatus[pageNumber] = { src: imgSrc, loaded: false, attempts: 0 };
 
        // Error handling and event listeners
        addErrorHandlingToImage(img, imgSrc, pageNumber);
        addClickEventToImage(img);
        mangaContainer.appendChild(container);
 
        loadedPages++; // Increment loaded pages count
        updateStats(); // Update stats display
 
        observePageContainer(container); // Observe for lazy loading
 
        // Save scroll position as soon as page container is created
        const mangaId = extractMangaId(window.location.href);
        const currentPage = getCurrentVisiblePage(); // Get the current visible page number
        if (!isPopupVisible || freshloadedcache) {
           // console.log("load again");
           // saveCurrentPosition(mangaId, currentPage);
        }
        
 
        // Start loading the actual image
        img.src = imgSrc; // Set the src to load the image
 
        // Mark as loaded on load
        img.onload = () => {
            imageStatus[pageNumber].loaded = true; // Mark as loaded
            loadingImages--; // Decrement loading images count
            updateStats(); // Update loading images count
        };
 
        return container;
    }
 
 
 
 
 
 
 
// Add a delay function
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
 
// Track if the app is online or offline
let isOnline = navigator.onLine;
 
// Add event listeners to detect connection state changes
window.addEventListener('offline', () => {
    console.warn('You are offline. Pausing image loading.');
    isOnline = false;
});
 
window.addEventListener('online', () => {
    console.log('Back online. Resuming image loading.');
    isOnline = true;
    if (loadingQueue.length > 0) {
        processQueue(); // Resume processing the queue
    } else {
        // If queue is empty, manually trigger the next page load
        loadNextBatchOfImages(); // Load the next set of images if queue is empty
    }
});
 
// Load a single page with error handling, retry logic, and caching
async function loadPage(pageNumber, pageUrl, retryCount = 0) {
    if (loadingImages >= maxConcurrentLoads || !isOnline) {
        return; // Exit if we're at max concurrent loads or offline
    }
 
    loadingImages++;
    updateStats(); // Update loading images count
 
    const mangaId = extractMangaId(pageUrl);
    if (!mangaId) {
        console.error(`Could not extract manga ID from URL: ${pageUrl}`);
        loadingImages--;
        updateStats();
        handleFailedImage(pageNumber);
        return;
    }
 
    // Check cache first
    const cachedImage = getImageFromCache(pageNumber, mangaId);
    if (cachedImage && cachedImage.mangaId === mangaId) {
        console.log(`Loading page ${pageNumber} from cache for manga ${mangaId}`);
        const pageContainer = createPageContainer(pageNumber, cachedImage.imgSrc);
        imageStatus[pageNumber].loaded = true; // Mark as loaded
        
        // Ensure position is saved for cached pages
        const currentPage = pageNumber;
       // console.log("load");
       // saveCurrentPosition(mangaId, currentPage); // Save the position for cached pages
        
        
 
        loadingImages--;
        updateStats(); // Update loading images count
 
        // Pre-fetch the next page if it's not the last page
        if (pageNumber < totalPages && cachedImage.nextLink) {
            loadingQueue.push({ pageNumber: pageNumber + 1, pageUrl: cachedImage.nextLink });
            processQueue(); // Check the queue
        }
        return;
    }
 
    try {
        const response = await fetch(pageUrl);
 
        if (response.status === 429) {
            if (retryCount < maxRetries) {
                console.warn(`Rate limit exceeded for page ${pageNumber}. Retrying in ${retryDelay} ms...`);
                await delay(retryDelay); // Wait before retrying
                loadPage(pageNumber, pageUrl, retryCount + 1); // Retry loading the same page
                return;
            } else {
                console.error(`Failed to load page ${pageNumber} after ${maxRetries} attempts.`);
                loadingImages--;
                updateStats(); // Update loading images count
                handleFailedImage(pageNumber); // Handle failed image loading
                return;
            }
        }
 
        const html = await response.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const imgElement = doc.querySelector('#image-container > a > img');
        const nextLink = doc.querySelector('#image-container > a').href;
        const imgSrc = imgElement.getAttribute('data-src') || imgElement.src;
 
        // Save to cache
        saveImageToCache(pageNumber, imgSrc, nextLink, mangaId);
 
        const pageContainer = createPageContainer(pageNumber, imgSrc);
        imageStatus[pageNumber].loaded = true; // Mark as loaded
 
        loadingImages--;
        updateStats(); // Update loading images count
 
        // Pre-fetch the next page once the current one loads
        if (pageNumber < totalPages && nextLink) {
            loadingQueue.push({ pageNumber: pageNumber + 1, pageUrl: nextLink });
            processQueue(); // Check the queue
        }
    } catch (err) {
        loadingImages--;
        console.error(err);
        updateStats(); // Update loading images count
        handleFailedImage(pageNumber); // Handle failed image loading
    }
}
 
// In your processing queue, ensure a delay ONLY after 429 status
async function processQueue() {
    while (loadingQueue.length > 0 && loadingImages < maxConcurrentLoads && isOnline) {
        const { pageNumber, pageUrl } = loadingQueue.shift(); // Get the next page to load
        loadPage(pageNumber, pageUrl); // Load it
    }
}
 
// Manually trigger the next batch of images if needed
function loadNextBatchOfImages() {
    if (loadingQueue.length === 0 && isOnline) {
        const nextPageNumber = getNextPageNumber(); // Logic to get the next page number
        const nextPageUrl = getNextPageUrl(nextPageNumber); // Logic to get the next page URL
 
        if (nextPageUrl) {
            loadingQueue.push({ pageNumber: nextPageNumber, pageUrl: nextPageUrl });
            processQueue(); // Resume loading
        }
    }
}
 
// Configuration for retry logic
const maxRetries = 5; // Maximum number of retries for rate limit
const retryDelay = 5000; // Delay in milliseconds before retrying only on 429 status
 
 
 
 
 
    // Handle failed image loading attempts
    function handleFailedImage(pageNumber) {
        if (imageStatus[pageNumber]) {
            imageStatus[pageNumber].attempts++;
            if (imageStatus[pageNumber].attempts <= 3) { // Retry up to 3 times
                console.warn(`Retrying to load image for page ${pageNumber}...`);
                loadPage(pageNumber, document.querySelector(`#image-container > a`).href); // Reattempt loading the same page
            } else {
                console.error(`Failed to load image for page ${pageNumber} after 3 attempts.`);
            }
        }
    }
 
 
 
const firstImageElement = document.querySelector('#image-container > a > img');
const firstImgSrc = firstImageElement.getAttribute('data-src') || firstImageElement.src;
createPageContainer(currentPage, firstImgSrc);
 
const firstImageLink = document.querySelector('#image-container > a').href;
loadingQueue.push({ pageNumber: currentPage + 1, pageUrl: firstImageLink }); // Add to queue
processQueue(); // Start processing the queue
 
// Observe all image containers for lazy loading
observeAndPreloadImages(); // <-- Add this here to track and lazy-load images
 
exitButtonTop.addEventListener('click', function() {
    window.location.reload();
});
}
 
// Pre-load next few images while user scrolls
function observeAndPreloadImages() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const imgElement = entry.target.querySelector('img');
          if (imgElement && imgElement.dataset.src) {
            imgElement.src = imgElement.dataset.src; // Load the image
            observer.unobserve(entry.target); // Stop observing after loading
  
            // Save the current position
            const mangaId = extractMangaId(window.location.href);
            const currentPage = getCurrentVisiblePage(entry); // Get the current page number
            if (!isPopupVisible || freshloadedcache) {
                //console.log("preload");
               // saveCurrentPosition(mangaId, currentPage);
            }
          }
        }
      });
    }, {
      rootMargin: '300px 0px', // Load images 300px before they appear
      threshold: 0.1
    });
  
    // Observe each image container
    const imageContainers = document.querySelectorAll('.manga-page-container');
    imageContainers.forEach((container) => observer.observe(container));
  }
 
// Function to get image data from local storage
function getImageFromCache(pageNumber, mangaId) {
    // console.log("freshloadedcache", freshloadedcache);
     freshloadedcache = true;
     setInterval(() => {
         //console.log("freshloadedcache", freshloadedcache);
         freshloadedcache = false;
     }, 3000)
     const cacheKey = `imagePage_${mangaId}_${pageNumber}`;
     const cachedData = localStorage.getItem(cacheKey);
     if (cachedData) {
         return JSON.parse(cachedData);
     }
     return null;
 }
 
// Function to save image data to local storage
function saveImageToCache(pageNumber, imgSrc, nextLink, mangaId) {
    const cacheKey = `imagePage_${mangaId}_${pageNumber}`;
    const cacheData = { imgSrc, nextLink, timestamp: Date.now(), mangaId };
    localStorage.setItem(cacheKey, JSON.stringify(cacheData));
}
 
 
  function addErrorHandlingToImage(image, imgSrc, pageNumber) {
    const subdomains = ['i1', 'i2', 'i3', 'i4', 'i5', 'i7']; // Add the alternative subdomains here
    let currentSubdomainIndex = 0;
 
    function updateImageSource(newSrc) {
        image.src = newSrc;
        image.dataset.src = newSrc; // Update data-src attribute
        updateImageCache(newSrc);
    }
 
    function updateImageCache(newSrc) {
        const mangaId = extractMangaId(window.location.href);
        const cachedData = getImageFromCache(pageNumber, mangaId);
        if (cachedData) {
            cachedData.imgSrc = newSrc;
            saveImageToCache(pageNumber, newSrc, cachedData.nextLink, mangaId);
            console.log(`Updated cache for page ${pageNumber} with new URL: ${newSrc}`);
        }
    }
 
    image.onerror = function() {
        console.warn(`Failed to load image: ${imgSrc} on page ${pageNumber}. Retrying...`);
        
        if (!imageStatus[pageNumber].retryCount) {
            imageStatus[pageNumber].retryCount = 0;
        }
 
        if (imageStatus[pageNumber].retryCount < subdomains.length) {
            imageStatus[pageNumber].retryCount++;
            
            const newSubdomain = subdomains[currentSubdomainIndex];
            const newImgSrc = imgSrc.replace(/i\d/, newSubdomain);
 
            currentSubdomainIndex = (currentSubdomainIndex + 1) % subdomains.length;
            console.log(`Retrying with new subdomain: ${newSubdomain} for page ${pageNumber}`);
            
            setTimeout(() => {
                updateImageSource(newImgSrc);
                // Update the local storage cache for this page
                const mangaId = extractMangaId(window.location.href);
                const cachedData = getImageFromCache(pageNumber, mangaId);
                if (cachedData) {
                    saveImageToCache(pageNumber, newImgSrc, cachedData.nextLink, mangaId);
                    console.log(`Updated local storage cache for page ${pageNumber} with new URL: ${newImgSrc}`);
                }
            }, 1000);
        } else {
            console.error(`Failed to load image on page ${pageNumber} after multiple attempts.`);
            image.alt = `Failed to load page ${pageNumber}`;
        }
    };
 
    // Update cache even if image loads successfully from cache
    image.onload = function() {
        updateImageCache(image.src);
    };
}
 
 
    // Create an IntersectionObserver to prioritize loading images that are in or near the viewport
// Create an IntersectionObserver to prioritize loading images that are in or near the viewport
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const imgElement = entry.target.querySelector('img');
            if (imgElement && imgElement.dataset.src) {
                imgElement.src = imgElement.dataset.src; // Load the image
                observer.unobserve(entry.target); // Stop observing after loading
                
                // Save the current scroll position as soon as the image starts loading
                const mangaId = extractMangaId(window.location.href);
                const currentPage = getCurrentVisiblePage(); // Get the current visible page number
                if (!isPopupVisible || freshloadedcache) {
                    //console.log("intesect");
                   // saveCurrentPosition(mangaId, currentPage);
                }
            }
            
        }
    });
}, {
    rootMargin: '200px 0px', // Adjust for preloading images slightly outside the viewport
    threshold: 0.1 // Trigger loading when 10% of the image is in view
});
 
function observePageContainer(container) {
    observer.observe(container); // Observe each page container for lazy loading
}
 
    
    addCustomStyles();
 
 
// Compress data into a string format
function compressData(data) {
    return JSON.stringify(data);
}
 
// Decompress data from string format
function decompressData(data) {
    return JSON.parse(data);
}
 
async function storeData(mangaId, pageNum) {
  const existingData = await retrieveData(mangaId);
  const existingPageNum = existingData ? existingData.pageNum : 0;
 
  if (pageNum > existingPageNum) {
    const currentTime = Date.now();
    const data = { pageNum, lastAccessed: currentTime };
    const compressedData = compressData(data);
    await GM.setValue(mangaId, compressedData);
 
    // Manage storage size if it exceeds the limit
    await manageStorage();
  }
}
 
// Retrieve data from Tampermonkey storage
async function retrieveData(mangaId) {
    const compressedData = await GM.getValue(mangaId, null);
    if (compressedData) {
        return decompressData(compressedData);
    }
    return null;
}
 
// Delete the least recently accessed data if the limit is reached
async function manageStorage() {
    const MAX_ENTRIES = 52;  // Limit to store 50 recent hentai
    const keys = await GM.listValues();
    if (keys.length > MAX_ENTRIES) {
        const entries = [];
        for (let key of keys) {
            const value = await GM.getValue(key);
            const data = decompressData(value);
            entries.push({ key, lastAccessed: data.lastAccessed });
        }
 
        // Sort by last accessed time, oldest first
        entries.sort((a, b) => a.lastAccessed - b.lastAccessed);
 
        // Remove the oldest entries until we're under the limit
        const excess = entries.length - MAX_ENTRIES;
        for (let i = 0; i < excess; i++) {
            await GM.deleteValue(entries[i].key);
        }
    }
}
 
let isRestoringPosition = false; // Flag to prevent overwriting saved position
 
 
 
function getCurrentPageFromURL() {
    const match = window.location.pathname.match(/\/g\/\d+\/(\d+)\//);
    return match ? parseInt(match[1], 10) : 1; // Default to 1 if not found
}
 
 
async function loadSavedPosition(mangaId) {
    console.log(`Trying to load saved position for: ${mangaId}`);
 
    const savedData = await retrieveData(mangaId);
    console.log(`Saved data retrieved:`, savedData); // Log the retrieved data
 
    const savedPage = savedData.pageNum;
    if (savedPage && savedPage === totalPages) {
        await GM.deleteValue(mangaId);
        console.log(`Saved position deleted for ${mangaId} since it's equal to total pages.`);
        return;
    }
 
    if (savedData) {
        const savedPage = savedData.pageNum;
        console.log(`Saved page is: ${savedPage}`); // Log the saved page number
 
        const currentPage = getCurrentPageFromURL(); // Get current page from URL
        console.log(`Current page is: ${currentPage}`); // Log the current page number
 
        // Only proceed if the saved page is different from the current one
        if (savedPage && savedPage !== currentPage) {
            console.log(`Restoring to saved page: ${savedPage}`);
            isRestoringPosition = true; // Set the flag before restoring the position
 
            const pageContainers = document.querySelectorAll('.manga-page-container');
            console.log(`Total page containers loaded: ${pageContainers.length}`); // Log how many pages are loaded
 
            if (pageContainers.length > 0) {
                // Directly scroll to the saved page
                scrollToSavedPage(pageContainers, savedPage);
            } else {
                console.log(`Waiting for pages to load...`);
                waitForPageContainers(savedPage); // Use a MutationObserver to wait for containers
            }
        } else {
            console.log(`Not restoring saved position for ${mangaId}. Current page is the same as saved page.`);
        }
    } else {
        console.log(`No saved position found for ${mangaId}.`);
    }
 
    isRestoringPosition = false; // Reset the flag after restoring the position
}
 
function waitForPageContainers(savedPageWithOffset) {
    const observer = new MutationObserver((mutations, obs) => {
        const pageContainers = document.querySelectorAll('.manga-page-container');
        if (pageContainers.length >= savedPageWithOffset) {
            console.log(`Page containers are now loaded: ${pageContainers.length}`);
            obs.disconnect(); // Stop observing once the pages are loaded
            scrollToSavedPage(pageContainers, savedPageWithOffset); // Scroll to the saved page
        }
    });
 
    // Observe changes in the DOM (specifically looking for added nodes)
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
}
 
// Queue for specific page loading
const specificPageQueue = [];
 
 
 
// Function to load a specific page by redirecting to its URL
async function loadSpecificPage(pageNumber) {
    const mangaId = extractMangaId(window.location.href); // Extract manga ID from current URL
    const pageUrl = `https://nhentai.net/g/${mangaId}/${pageNumber}/`; // Construct the URL for the specific page
 
    console.log(`Redirecting to page ${pageNumber} at URL: ${pageUrl}`);
    
    localStorage.setItem('redirected', 'true'); // Save the redirected state in local storage
    console.log(`Set redirected flag to true in storage.`); // Log confirmation of setting the flag
 
    window.location.href = pageUrl; // Redirect to the specific page URL
}
 
// Function to check if the page is redirected and load manga images
async function checkRedirected() {
    const wasRedirected = JSON.parse(localStorage.getItem('redirected') || 'false'); // Retrieve the redirected state
 
    if (wasRedirected) {
        const mangaId = extractMangaId(window.location.href);
        console.log(`Loading manga images for manga ID: ${mangaId}`); // Log the manga ID
        loadMangaButton.remove(); // Remove the load manga button since we already did it
        loadMangaImages(mangaId); // Call loadMangaImages after redirection
        console.log(`Reset redirected flag to false in storage.`); // Log confirmation of resetting the flag
        localStorage.setItem('redirected', JSON.stringify(false)); // Reset the flag in storage
    }
}
// Call the function every second
setInterval(checkRedirected, 1000);
 
 
 
 
 
async function scrollToSavedPage(pageContainers, savedPage, savedImgSrc) {
    const currentPage = getCurrentPageFromURL(); // Get current page number from URL
    const savedPageIndex = savedPage - currentPage; // Calculate the effective saved page index
 
    console.log(`Current page: ${currentPage}, Adjusted index for saved page: ${savedPageIndex}`);
 
    // Check if the adjusted index is out of bounds
    if (savedPageIndex < 0 || savedPageIndex >= pageContainers.length) {
        console.warn(`Adjusted saved page index ${savedPageIndex} is out of bounds.`);
        console.log(`Page ${savedPage} is not loaded yet. Redirecting to its URL.`);
        loadSpecificPage(savedPage); // Redirect to the specific page
        return; // Exit early
    }
 
    const savedPageElement = pageContainers[savedPageIndex]; // Get the container for the saved page
    const img = savedPageElement.querySelector('img');
 
 
        // If the image is loaded
        if (img && img.complete) {
            console.log(`Image for page ${savedPage} loaded. Moving to it.`);
            if (/Mobi/i.test(navigator.userAgent)) {
            const rect = savedPageElement.getBoundingClientRect();
            window.scrollTo(rect.left, rect.top); // teleport on mobile
            } else {
            savedPageElement.scrollIntoView({ behavior: 'smooth' }); // scroll on desktop
            }
        } else {
        console.log(`Image for page ${savedPage} not loaded yet. Redirecting to its URL.`);
        loadSpecificPage(savedPage); // Redirect to the specific page
    }
}
 
//----------------------------------------------Make the second option later When in Main Script----------------------------------------------
 
        // If the image is loaded
        // if (img && img.complete) {
        //     console.log(`Image for page ${savedPage} loaded. Scrolling to it.`);
        //     savedPageElement.scrollIntoView({ behavior: 'smooth' });
        // }
 
 
        // If the image is loaded
        // if (img && img.complete) {
        //     console.log(`Image for page ${savedPage} loaded. Scrolling to it.`);
        //     savedPageElement.scrollIntoView({ behavior: 'smooth' });
        // }
 
//----------------------------------------------Make the second option later When in Main Script----------------------------------------------    
 
 
 
function getNextPageUrl(pageNumber) {
    console.log(`Searching for URL for page ${pageNumber}`);
    const pageLink = document.querySelector(`#image-container a[href*='/g/'][href*='/${pageNumber}/']`);
    console.log(`Found page link: ${pageLink}`);
    if (pageLink) {
      return pageLink.href;
    } else {
      console.log(`No URL found for page ${pageNumber}`);
      return null;
    }
  }
 
 
 
 
// Save the current position without checking for visibility// Save the current position based on the current page
async function saveCurrentPosition(mangaId) {
    const totalPages = document.querySelectorAll('.manga-page-container').length;
    const currentPage = getCurrentVisiblePage(); // Get the current page number from the URL
 
    // Log the total pages and current page for debugging
    console.log(`Total pages loaded: ${totalPages}, trying to save position for page: ${currentPage}`);
 
    // Always save the position
    if (!isRestoringPosition) { // Only save if we are not restoring
        await storeData(mangaId, currentPage);
        console.log(`Position saved: Manga ID: ${mangaId}, Page: ${currentPage}`);
    } else {
        console.log(`Not saving position for Manga ID: ${mangaId} as we are restoring.`);
    }
}
 
 
// Periodically clean up storage
    manageStorage();
 
 
    window.loadMangaButton = document.createElement('button');
    loadMangaButton.textContent = 'Load Manga';
    loadMangaButton.className = 'load-manga-btn';
    loadMangaButton.style.position = 'fixed';
    loadMangaButton.style.bottom = '0';
    loadMangaButton.style.right = '0';
    loadMangaButton.style.padding = '5px';
    loadMangaButton.style.margin = '0 10px 10px 0';
    loadMangaButton.style.zIndex = '9999999999';
 
if (window.location.href.startsWith("https://nhentai.net/g/")) {
    const buttonsDiv = document.querySelectorAll('.buttons');
 
    if (buttonsDiv.length > 0) {
        //console.log('Buttons div already exists.');
    } else if (!document.body.contains(loadMangaButton)) {
        document.body.appendChild(loadMangaButton);
 
        loadMangaButton.addEventListener('click', async function () {
            const mangaId = extractMangaId(window.location.href);
            if (mangaId) {
                loadMangaImages(); // Load the manga images first
 
                // Check if there's a saved position for the manga
                const savedPosition = await retrieveData(mangaId);
                if (savedPosition) {
                    const savedPage = savedPosition.pageNum;
                    if (savedPage && (savedPage === totalPages || savedPage + 1 === totalPages)) {
                        await GM.deleteValue(mangaId);
                        console.log(`Saved position deleted for ${mangaId} since it's equal to total pages.`);
                    } else {
                        showPopupForSavedPosition("Do you want to load your last saved position?", async () => {
                            await loadSavedPosition(mangaId);
                        }, {
                            confirmText: 'Yes',
                            cancelText: 'No',
                            duration: 10000
                        });
                    }
                } else {
                    console.log('No saved position found for manga ID:', mangaId);
                }
            }
            loadMangaButton.remove();
        });
    }
}
    
    
        
    })();
 
 
//---------------------------**Continue Reading**---------------------------------
 
// Function to add the Continue Reading button to the menu
function addContinueReadingButton() {
    // Create the Continue Reading button
    const continueReadingButtonHtml = `
      <li>
        <a href="/continue_reading/">
          <i class="fa fa-arrow-right"></i>
          Continue Reading
        </a>
      </li>
    `;
    const continueReadingButton = $(continueReadingButtonHtml);
 
    // Append the Continue Reading button to the dropdown menu and the left menu
    const dropdownMenu = $('ul.dropdown-menu');
    dropdownMenu.append(continueReadingButton);
 
    const menu = $('ul.menu.left');
    menu.append(continueReadingButton);
}
 
// Call the function to add the Continue Reading button
addContinueReadingButton();
 
// Handle continue_reading page
if (window.location.href.includes('/continue_reading')) {
    console.log('Continue reading page detected');
    
    // Remove 404 Not Found elements
    const notFoundHeading = document.querySelector('h1');
    if (notFoundHeading && notFoundHeading.textContent === '404 – Not Found') {
        notFoundHeading.remove();
    }
    
    const notFoundMessage = document.querySelector('p');
    if (notFoundMessage && notFoundMessage.textContent === "Looks like what you're looking for isn't here.") {
        notFoundMessage.remove();
    }
 
    // Add custom CSS for better styling with dark theme
    const customCSS = document.createElement('style');
    customCSS.textContent = `
        body {
            background-color: #2c2c2c;
            color: #f1f1f1;
            margin: 0;
            padding: 0;
        }
        
        .continue-reading-container {
            width: 95%;
            max-width: 1200px;
            margin: 20px auto;
            font-family: Arial, sans-serif;
            padding: 20px;
            overflow-x: hidden;
            overflow-y: auto;
            /*max-height: 100vh; /* Prevents it from exceeding the screen height */
        }
        
        h1.continue-reading-title {
            text-align: center;
            color: #ed2553;
            margin-bottom: 20px;
        }
        
        table.manga-table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            background-color: #3c3c3c;
            border-radius: 5px;
            overflow: hidden;
            box-sizing: border-box;
            table-layout: fixed;
        }
        
        .manga-table th {
            background-color: #ed2553;
            color: white;
            padding: 12px;
            text-align: left;
        }
        
        .manga-table td {
            padding: 12px;
            border-bottom: 1px solid #4c4c4c;
            word-wrap: break-word;
            vertical-align: top;
        }
        
        /* Adjust column widths to optimize vertical layout */
        .manga-table th:nth-child(1),
        .manga-table td:nth-child(1) {
            width: 30%;
        }
        
        .manga-table th:nth-child(2),
        .manga-table td:nth-child(2) {
            width: 30%;
        }
        
        .manga-table th:nth-child(3),
        .manga-table td:nth-child(3) {
            width: 30%;
        }
        
        .manga-table th:nth-child(4),
        .manga-table td:nth-child(4) {
            width: 30%;
        }
        
        .manga-table th:nth-child(5),
        .manga-table td:nth-child(5) {
            width: 30%;
            text-align: center;
        }
        
        .manga-table tr:hover {
            background-color: #4c4c4c;
        }
        
        .manga-table a {
            color: #ed2553;
            text-decoration: none;
            font-weight: bold;
        }
        
        .manga-table a:hover {
            text-decoration: underline;
        }
        
        .manga-title {
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
        }
        
        .manga-cover {
            width: 50px;
            height: 70px;
            margin-right: 10px;
            margin-bottom: 5px;
            object-fit: cover;
            border-radius: 3px;
        }
        
        .manga-title a {
            display: inline-block;
            /* Allow title to wrap properly */
            word-break: break-word;
            overflow-wrap: break-word;
            width: 100%;
            max-height: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4; /* Number of lines to show */
            -webkit-box-orient: vertical;
        }
        
        .progress-bar-container {
            width: 100%;
            background-color: #555;
            height: 8px;
            border-radius: 4px;
            margin-top: 5px;
        }
        
        .progress-bar {
            height: 100%;
            border-radius: 4px;
            background-color: #ed2553;
        }
        
        .language-tag {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 3px;
            background-color: #555;
            font-size: 12px;
            text-transform: capitalize;
        }
        
        .continue-button {
            display: inline-block;
            padding: 6px 12px;
            background-color: #ed2553;
            color: white !important;
            border-radius: 4px;
            text-align: center;
            transition: background-color 0.2s;
        }
        
        .continue-button:hover {
            background-color: #c91c45;
            text-decoration: none !important;
        }
        
        .loading-indicator {
            text-align: center;
            margin: 20px 0;
            font-size: 16px;
            color: #ed2553;
        }
        
        .img-error {
            border: 2px solid #ed2553;
            position: relative;
        }
        
        .remove-button {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            color: #ed2553; /* Initial red icon */
            border: 2px solid #ed2553; /* Red border */
            border-radius: 50%;
            width: 30px;
            height: 30px;
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s, transform 0.1s, box-shadow 0.2s;
            font-size: 14px;
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            margin: 0 auto;
        }
 
        .remove-button:hover {
            background-color: #ed2553; /* Turns red */
            color: white; /* Icon turns white */
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
            transform: scale(1.1);
        }
 
        .remove-button:active {
            transform: scale(0.95);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }
        
        /* Responsive adjustments for smaller screens */
        @media (max-width: 768px) {
            .continue-reading-container {
                width: 98%;
                padding: 10px;
            }
            
            .manga-table th, 
            .manga-table td {
                padding: 8px 6px;
            }
            
            .manga-cover {
                width: 40px;
                height: 56px;
            }
            
            .continue-button {
                padding: 4px 8px;
                font-size: 14px;
            }
            
            /* For the continue button column */
            .manga-table td:nth-child(4) {
                position: relative;
                vertical-align: middle;
            }
            
            /* Align the continue button to the bottom */
            .manga-table td:nth-child(4) .continue-button {
                position: relative;
                bottom: 8px;
                left: 6px;
            }
        }
    `;
    document.head.appendChild(customCSS);
 
    // Create container element
    const container = document.createElement('div');
    container.className = 'continue-reading-container';
    document.body.appendChild(container);
    
    // Add title
    const title = document.createElement('h1');
    title.className = 'continue-reading-title';
    title.textContent = 'Continue Reading';
    container.appendChild(title);
    
    // Add loading indicator
    const loadingIndicator = document.createElement('div');
    loadingIndicator.className = 'loading-indicator';
    loadingIndicator.textContent = 'Loading your manga collection...';
    container.appendChild(loadingIndicator);
 
    // Implement the continue reading page
    const mangaList = [];
    
    // Array of possible subdomains to try
    const subdomains = ['t3', 't', 't1', 't2', 't4', 't5', 't7'];
    
    // Helper function to check if an image URL exists
    function checkImageExists(url) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = () => resolve(true);
            img.onerror = () => resolve(false);
            img.src = url;
        });
    }
 
// Helper function to find a working image URL
async function findWorkingImageUrl(mediaId) {
    for (const subdomain of subdomains) {
        // Try both webp and png formats
        const webpUrl = `https://${subdomain}.nhentai.net/galleries/${mediaId}/cover.webp`;
        const pngUrl = `https://${subdomain}.nhentai.net/galleries/${mediaId}/cover.png`;
        const jpgUrl = `https://${subdomain}.nhentai.net/galleries/${mediaId}/cover.jpg`;
 
        console.log(`Trying cover image URL: ${webpUrl}`);
        const webpExists = await checkImageExists(webpUrl);
        if (webpExists) {
            console.log(`Found working URL: ${webpUrl}`);
            return webpUrl;
        }
 
        console.log(`Trying cover image URL: ${pngUrl}`);
        const pngExists = await checkImageExists(pngUrl);
        if (pngExists) {
            console.log(`Found working URL: ${pngUrl}`);
            return pngUrl;
        }
 
        console.log(`Trying cover image URL: ${jpgUrl}`);
        const jpgExists = await checkImageExists(jpgUrl);
        if (jpgExists) {
            console.log(`Found working URL: ${jpgUrl}`);
            return jpgUrl;
        }
    }
    // If all fail, return the default with t3 subdomain as fallback
    return `https://t3.nhentai.net/galleries/${mediaId}/cover.jpg`;
}
 
// Function to create and display the table
function displayMangaTable() {
    if (mangaList.length === 0) {
        loadingIndicator.textContent = 'No manga found in your collection.';
        return;
    }
    
    // Sort the manga list by most recently read (highest page number to lowest)
    mangaList.sort((a, b) => b.currentPage - a.currentPage);
    console.log('Sorted manga list:', mangaList);
 
    // Create a table to display the manga list
    const table = document.createElement('table');
    table.className = 'manga-table';
    table.innerHTML = `
        <thead>
            <tr>
                <th>Manga Title</th>
                <th>Progress</th>
                <th>Language</th>
                <th>Action</th>
                <th>Remove</th>
            </tr>
        </thead>
        <tbody></tbody>
    `;
    
    const tbody = table.querySelector('tbody');
 
    // Add each manga to the table
    mangaList.forEach(manga => {
        console.log('Adding manga to table:', manga);
        const row = document.createElement('tr');
        
        // Calculate progress percentage
        const progressPercent = (manga.currentPage / manga.pages) * 100;
        
        row.innerHTML = `
            <td>
                <div class="manga-title">
                    <img class="manga-cover" src="${manga.coverImageUrl}" alt="Cover" onerror="this.classList.add('img-error')">
                    <a href="/g/${manga.id}/" title="${manga.title}">${manga.title}</a>
                </div>
            </td>
            <td>
                <div>Page ${manga.currentPage} of ${manga.pages}</div>
                <div class="progress-bar-container">
                    <div class="progress-bar" style="width: ${progressPercent}%"></div>
                </div>
            </td>
            <td><span class="language-tag">${manga.languageDisplay}</span></td>
            <td><a href="/g/${manga.id}/${manga.currentPage}/" class="continue-button" onclick="localStorage.setItem('redirected', 'true');">Continue Reading</a></td>            
            <td><button class="remove-button" data-id="${manga.id}">X</button></td>
        `;
        tbody.appendChild(row);
 
        // Remove manga entry from GM storage when 'X' button is clicked
        row.querySelector('.remove-button').addEventListener('click', async function() {
            const mangaId = this.getAttribute('data-id');
            console.log(`Removing manga ID: ${mangaId}`);
 
            // Remove from GM storage
            await GM.deleteValue(mangaId);
            await GM.deleteValue(`metadata_${mangaId}`);
            console.log(`Manga ID ${mangaId} removed from GM storage`);
 
            // Remove row from table
            row.remove();
        });
   
 
    // Remove loading indicator and add the table
    loadingIndicator.remove();
    container.appendChild(table);
    console.log('Table added to page');
 
 
            
            // Handle image loading errors and try alternative subdomains
            const imgElement = row.querySelector('.manga-cover');
            imgElement.addEventListener('error', async function() {
                console.log(`Image failed to load: ${manga.coverImageUrl}`);
                
                // Extract media ID from the URL
                const urlParts = manga.coverImageUrl.split('/');
                const mediaId = urlParts[urlParts.length - 2];
                
                // Find a working URL
                const newUrl = await findWorkingImageUrl(mediaId);
                
                if (newUrl !== manga.coverImageUrl) {
                    console.log(`Updating image URL from ${manga.coverImageUrl} to ${newUrl}`);
                    this.src = newUrl;
                    
                    // Update the cached metadata with the working URL
                    const metadataKey = `metadata_${manga.id}`;
                    GM.getValue(metadataKey, null).then(cachedMetadata => {
                        if (cachedMetadata) {
                            const metadata = JSON.parse(cachedMetadata);
                            metadata.coverImageUrl = newUrl;
                            GM.setValue(metadataKey, JSON.stringify(metadata))
                                .then(() => console.log(`Updated cached metadata with new URL for manga ID: ${manga.id}`));
                        }
                    });
                }
            });
        });
 
        // Remove loading indicator and add the table
        loadingIndicator.remove();
        container.appendChild(table);
        console.log('Table added to page');
    }
    
    // Function to fetch manga data from API and save it to GM.setValue
    async function fetchAndSaveMangaData(mangaId, pageNum) {
        const metadataKey = `metadata_${mangaId}`;
        
        // Try to get cached metadata first
        const cachedMetadata = await GM.getValue(metadataKey, null);
        
        if (cachedMetadata) {
            console.log(`Using cached metadata for manga ID: ${mangaId}`);
            const metadata = JSON.parse(cachedMetadata);
            
            mangaList.push({
                id: mangaId,
                title: metadata.title,
                coverImageUrl: metadata.coverImageUrl,
                languageDisplay: metadata.languageDisplay,
                pages: metadata.pages,
                currentPage: pageNum,
            });
            
            // Check if we have all manga data and display the table
            checkAndDisplayTable();
            return;
        }
        
        // If no cached data, fetch from API
        console.log(`Fetching metadata for manga ID: ${mangaId}`);
        try {
            const response = await fetch(`https://nhentai.net/api/gallery/${mangaId}`);
            const data = await response.json();
            
            if (data) {
                console.log('Fetched manga data:', data);
                const mangaTitle = data.title.english;
                const mediaId = data.media_id;
                
                // Get a working cover image URL with appropriate subdomain
                const coverImageUrl = await findWorkingImageUrl(mediaId);
                
                // Determine which language to display
                let languageDisplay = 'Unknown';
                const languages = data.tags.filter(tag => tag.type === 'language').map(tag => tag.name.toLowerCase());
                if (languages.includes('english')) {
                    languageDisplay = 'English';
                } else if (languages.includes('translated') && languages.length === 1) {
                    languageDisplay = 'English';
                } else if (languages.includes('translated') && languages.length > 1) {
                    // Exclude 'translated' and show other language(s)
                    const otherLanguages = languages.filter(lang => lang !== 'translated');
                    languageDisplay = otherLanguages.length > 0 ? otherLanguages.map(lang => lang.charAt(0).toUpperCase() + lang.slice(1)).join(', ') : 'Unknown';
                } else {
                    languageDisplay = languages.map(lang => lang.charAt(0).toUpperCase() + lang.slice(1)).join(', ');
                }
                
                const pages = data.num_pages;
                
                // Create metadata object to cache
                const metadata = {
                    title: mangaTitle,
                    coverImageUrl: coverImageUrl,
                    languageDisplay: languageDisplay,
                    pages: pages,
                    lastUpdated: Date.now()
                };
                
                // Save metadata to GM storage
                await GM.setValue(metadataKey, JSON.stringify(metadata));
                console.log(`Saved metadata for manga ID: ${mangaId}`);
                
                mangaList.push({
                    id: mangaId,
                    title: mangaTitle,
                    coverImageUrl: coverImageUrl,
                    languageDisplay: languageDisplay,
                    pages: pages,
                    currentPage: pageNum,
                });
                
                // Check if we have all manga data and display the table
                checkAndDisplayTable();
            } else {
                console.log('No data found for manga ID:', mangaId);
                checkAndDisplayTable();
            }
        } catch (error) {
            console.error('Error fetching manga data:', error);
            checkAndDisplayTable();
        }
    }
    
    // Counter to track pending fetch operations
    let pendingFetches = 0;
    let totalMangaCount = 0;
    
    // Function to check if all data is fetched and display the table
    function checkAndDisplayTable() {
        pendingFetches--;
        loadingIndicator.textContent = `Loading your manga collection... (${totalMangaCount - pendingFetches}/${totalMangaCount})`;
        
        if (pendingFetches <= 0) {
            displayMangaTable();
        }
    }
 
 
    // Function to delete completed manga
    async function deleteCompletedManga() {
        const allKeys = await GM.listValues();
        console.log('All keys:', allKeys);
        
        // Get all manga IDs (numerical keys)
        const mangaIds = allKeys.filter(key => key.match(/^\d+$/));
        
        // Process each manga
        for (const mangaId of mangaIds) {
            console.log('Processing manga ID:', mangaId);
            const mangaData = await GM.getValue(mangaId);
            const mangaDataObject = JSON.parse(mangaData);
            const pagesRead = mangaDataObject.pageNum;
            const metadataKey = `metadata_${mangaId}`;
            const metadata = await GM.getValue(metadataKey);
            const metadataObject = JSON.parse(metadata);
            const totalPages = metadataObject.pages;
            
            // Check if manga is completed (one less than or equal to total pages)
            if (pagesRead >= totalPages - 1) {
                console.log(`Deleting completed manga ID: ${mangaId}`);
                await GM.deleteValue(mangaId);
                await GM.deleteValue(metadataKey);
            }
        }
    }
 
 
    // Main function to load manga
    async function getStoredManga() {
        const mangaIds = [];
        const allValues = {};
        
        for (const key of await GM.listValues()) {
            const value = await GM.getValue(key);
            allValues[key] = value;
            
            if (key.match(/^\d+$/)) {
                mangaIds.push(key);
            }
        }
        
        console.log('All values:', allValues);
        totalMangaCount = mangaIds.length;
        pendingFetches = totalMangaCount;
        
        if (totalMangaCount === 0) {
            loadingIndicator.textContent = 'No manga found in your collection.';
            return;
        }
        
        // Process each manga
        mangaIds.forEach(mangaId => {
            console.log('Processing manga ID:', mangaId);
            const mangaData = JSON.parse(allValues[mangaId]);
            fetchAndSaveMangaData(mangaId, mangaData.pageNum);
        });
    }
     deleteCompletedManga();
    // Start the process
    getStoredManga();
}
 
//---------------------------**Continue Reading**---------------------------------