// -----------------------------
// Random Card: This script randomly selects a SE card in the Main Page.
// -----------------------------
document.addEventListener('DOMContentLoaded', function() {
    var cardData = {
        "se": 202, // Number of cards in the 'se' set
        "ex": 152, // Number of cards in the 'ex' set
        "sf": 202, // Number of cards in the 'sf' set
        "ll": 202, // Number of cards in the 'll' set
        "cp": 60,  // Number of cards in the 'cp' set
        "rr": 200  // Number of cards in the 'rr' set
    };
 
    var prefixes = Object.keys(cardData); // Get prefixes of the card data
 
    var randomPrefix = prefixes[Math.floor(Math.random() * prefixes.length)]; // Randomly select a prefix
 
    var maxNumber = cardData[randomPrefix]; // Get the maximum number of cards for the selected prefix
 
    var randomIndex = Math.floor(Math.random() * maxNumber) + 1; // +1 to include the maximum number
 
    var formattedNumber = randomIndex.toString().padStart(3, '0'); // Add leading zeros to ensure 3 digits
 
    var cardImageUrl = 'https://www.shadowera.com/cards/' + randomPrefix + formattedNumber + '.jpg'; // Create the card image URL
 
    var cardImage = document.getElementById('randomCard'); // Get the image element by ID
    if (cardImage) {
        cardImage.src = cardImageUrl; // Set the image source
        cardImage.alt = randomPrefix + formattedNumber + '.jpg'; // Update the alt attribute
    }
});
// -----------------------------
// Background Wiki image and Skin:
// This script applies the background image and overlay styles to the wiki body.
// Changes color in different area and set index to objects.
// -----------------------------
// Background Image
$(document).ready(function() {
    // Background Image
    $('body').css({
        'background-image': 'url("https://www.shadowera.com/landing/img/developers.jpg")',
        'background-size': 'cover',
        'background-attachment': 'fixed', 
        'background-repeat': 'no-repeat'
    });
 
    // Add Overlay
    $('body').append('<div class="overlay"></div>'); // Append overlay to the body
    $('.overlay').css({
        'position': 'absolute', // Position the overlay absolutely
        'top': '55px',  // Original positioning from the top
        'left': '1%', // Left positioning for a 1% border
        'width': '98%',  // Total width to account for 1% on each side
        'background-color': 'rgba(24, 29, 35, 0.9)', // Set overlay color with opacity
        'z-index': '1', // Ensure the overlay is above background elements
        'pointer-events': 'none', // Prevent interaction with the overlay
        'border-radius': '10px' // Round the corners of the overlay
    });
 
    // Adjust the height of the overlay to reach the bottom of the page
    function adjustOverlayHeight() {
        var documentHeight = $(document).height(); 
        var overlayStart = $('.overlay').position().top; 
        var overlayHeight = documentHeight - overlayStart;
        $('.overlay').css('height', overlayHeight + 'px'); 
    }
 
    adjustOverlayHeight(); 
 
    $(window).resize(function() {
        adjustOverlayHeight();
    });
});
 
// Apply style to wiki content: This section applies styles to the main content area of the wiki.
$('#mw-content-text').css({
    'position': 'relative',
    'color': 'white', 
    'padding': '20px'
});
 
// Apply styles to headings
$('.mw-headline').css({
    'color': 'white'
});
 
// Render comments text in <span> elements with class co1 in light gray color
$('.co1').css({
    'color': '#b3b3b3'
});
 
// Set the title color to white
$('.title').css({
    'color': 'white',
    'position': 'relative',
    'z-index': '7'
});
 
// Make the tagline less bright
$('#tagline').css({
    'color': 'rgba(255, 255, 255, 0.5)'
});
 
// Set the text color of abbr elements to white
$('.minoredit').css({
    'color': 'white',
    'position': 'relative',
    'z-index': '7'
});
 
// Set the text color of <code> elements to white
$('code').css({
    'color': 'white',
    'position': 'relative',
    'z-index': '7'
});
 
// Set the text color of specific <label> element in black
$('#mw-editpage-watch').css({
    'color': 'black'
});
 
// Set the text color of specific <label> element in black
$('#mw-editpage-minoredit').css({
    'color': 'black'
});
 
// Set the text color of specific <label> element in black
$('label[for="wpSummary"]').css({
    'color': 'black'
});
 
// Set the text color of all other <label> elements with the for attribute to white
$('label[for]').not('#mw-editpage-watch, #mw-editpage-minoredit, label[for="wpSummary"]').css({
    'color': 'white'
});
 
// Set the text color of all <p> elements in the #editpage-copywarn div to black
$('#editpage-copywarn p').css({
    'color': 'black'
});
 
// Change the color of elements <span> with the class mw-plusminus-neg
$('.mw-plusminus-neg').css({
    'color': '#e88c18'
});
 
// Change the color of elements <a> with the class mw-userlink
$('.mw-userlink').css({
    'color': '#e88c18'
});
 
// Change the color of elements <a> with the class new
$('a.new[title="User talk:Blopi (page does not exist)"]').css({
    'color': '#e88c18'
});
 
// Target the bold <b> text
$('#editpage-copywarn b').css({
    'color': 'black'
});
 
// Render Subcategories the same color as tagline
$('h2').css({
    'color': 'rgba(255, 255, 255, 0.8)'
});
 
// Set the text color of <span> elements with the class mw-plusminus-pos to light green
$('.mw-plusminus-pos').css({
    'color': '#66ff66'
});
 
// Render Subcategories the same color as tagline
$('h4').css({
    'color': 'rgba(255, 255, 255, 0.8)'
});
 
// Render Subcategories the same color as tagline
$('h5').css({
    'color': 'orange',
    'position': 'relative',
    'z-index': '7'
});
 
// Change the color of table cells
$('table, td, th').css({
    'background-color': '#1c242c',
    'color': 'white',
    'border': '1px solid #3a3e42'
});
 
// Change the color of <h3> to be the same as the tagline
$('h3').css({
    'color': 'rgba(255, 255, 255, 0.5)'
});
 
// Load the collapsible module from MediaWiki to make sections collapsible.
mw.loader.load('mediawiki.collapsible');
 
// This function displays or hides an element with the specified ID.
function toggleContent(id) {
    var element = document.getElementById(id);
    if (element.style.display === 'none' || element.style.display === '') {
        element.style.display = 'table-row-group'; // Show the element
    } else {
        element.style.display = 'none'; // Hide the element
    }
}
 
// -----------------------------
// Script for Highlighting Backticks
// Applies custom visual styles to text wrapped in backticks without altering the content
// This script waits for the document to fully load, and applies a visual style 
// to any text that is surrounded by backticks (` `), without altering the content in previous.
// -----------------------------
 
document.addEventListener('DOMContentLoaded', function () {
    // Check if we are in edit mode (to avoid changing the editor content)
    if (document.querySelector('#wpTextbox1') !== null) {
        return; // Do nothing in edit mode
    }
 
    //
    // Function to highlight text between backticks by wrapping it in a span element
    // @param {string} text
    // @returns {string}
    //
    function highlightBackticks(text) {
        const backtickRegex = /`([^`]+)`/g; // Matches text between backticks
        const styledText = text.replace(backtickRegex, function (match, p1) {
            return '<span class="backtick-style">' + p1 + '</span>'; 
        });
        return styledText; // Return the modified text
    }
 
    //
    // Traverse all text nodes and apply the backtick highlighting
    // @param {Node} node
    //
    function traverseTextNodes(node) {
        if (node.nodeType === 3 && node.nodeValue.includes('`')) { 
            const span = document.createElement('span'); 
            span.innerHTML = highlightBackticks(node.nodeValue); 
            node.parentNode.replaceChild(span, node); 
        } else if (node.nodeType === 1 && node.childNodes) {
            node.childNodes.forEach(traverseTextNodes); 
        }
    }
 
    // Apply the changes to the entire body
    traverseTextNodes(document.body);
});