// Random Main Card //
document.addEventListener('DOMContentLoaded', function() {
    var cardData = {
        "se": 202,
        "ex": 152,
        "sf": 202,
        "ll": 202,
        "cp": 60,
        "rr": 200 // Note: trouver un moyen de choisir les bonnes cartes.
    };
 
    var prefixes = Object.keys(cardData);
 
    var randomPrefix = prefixes[Math.floor(Math.random() * prefixes.length)];
 
    var maxNumber = cardData[randomPrefix];
 
    var randomIndex = Math.floor(Math.random() * maxNumber) + 1; // +1 pour inclure le numéro maximum
 
    var formattedNumber = randomIndex.toString().padStart(3, '0'); // Ajoute des zéros pour obtenir 3 chiffres
 
    var cardImageUrl = 'https://www.shadowera.com/cards/' + randomPrefix + formattedNumber + '.jpg';
 
    var cardImage = document.getElementById('randomCard');
    if (cardImage) {
        cardImage.src = cardImageUrl;
        cardImage.alt = randomPrefix + formattedNumber + '.jpg'; // Mettre à jour l'attribut alt
    }
});
 
// Background Wiki image and Skin
$(document).ready(function() {
    // Image de fond
    $('body').css({
        'background-image': 'url("https://www.shadowera.com/landing/img/developers.jpg")',
        'background-size': 'cover',
        'background-attachment': 'fixed',
        'background-repeat': 'no-repeat'
    });
 
    // Ajouter l'overlay
    $('body').append('<div class="overlay"></div>');
    $('.overlay').css({
        'position': 'absolute',
        'top': '55px',  // Positionnement d'origine
        'left': '1%', // Positionnement à gauche pour créer une bordure de 1%
        'width': '98%',  // Largeur totale pour tenir compte des 1% de chaque côté
        'background-color': 'rgba(24, 29, 35, 0.9)',
        'z-index': '1', // Assurez-vous que l'overlay est au-dessus des éléments de fond
        'pointer-events': 'none',
        'border-radius': '10px'
    });
 
    // Ajuster la hauteur de l'overlay pour qu'il atteigne le bas de la page
    function adjustOverlayHeight() {
        var documentHeight = $(document).height(); // Hauteur totale du document
        var overlayStart = $('.overlay').position().top; // Position actuelle de l'overlay
        var overlayHeight = documentHeight - overlayStart; // Calculer la hauteur de l'overlay
        $('.overlay').css('height', overlayHeight + 'px'); // Définir la hauteur de l'overlay
    }
 
    adjustOverlayHeight(); // Appeler la fonction pour ajuster la hauteur initialement
 
    // Réajuster la hauteur lors du redimensionnement de la fenêtre
    $(window).resize(function() {
        adjustOverlayHeight();
    });
});
 
    // Appliquer le style au contenu du wiki
    $('#mw-content-text').css({
        'position': 'relative',
        'color': 'white', // Assurez-vous que le texte soit lisible
        'padding': '20px' // Ajouter du padding pour l'esthétique
    });
 
    // Appliquer des styles aux titres
    $('.mw-headline').css({
        'color': 'white' // Mettre le texte en blanc
    });
 
    // Rendre le texte des commentaires dans les éléments <span> avec la classe co1 en gris clair
    $('.co1').css({
        'color': '#b3b3b3' // Exemple d'une couleur gris clair
    });
 
    // Rendre le titre blanc
    $('.title').css({
        'color': 'white', // Titre en blanc
        'position': 'relative', // Assurez-vous que le titre a une position
        'z-index': '7' // Assurez-vous que le titre est au-dessus de l'overlay
    });
 
    // Rendre le tagline moins blanc
    $('#tagline').css({
        'color': 'rgba(255, 255, 255, 0.5)' // Tagline en blanc avec opacité
    });
 
    // Rendre le texte de l'élément abbr en blanc
    $('.minoredit').css({
        'color': 'white', // Texte en blanc
        'position': 'relative', // Assurez-vous que l'élément a une position
        'z-index': '7' // Assurez-vous que l'élément est au-dessus de l'overlay
    });
 
    // Rendre le texte des éléments <code> en blanc
    $('code').css({
        'color': 'white', // Texte en blanc
        'position': 'relative', // Assurez-vous que l'élément a une position
        'z-index': '7' // Assurez-vous que l'élément est au-dessus de l'overlay
    });
 
    // Rendre le texte de l'élément <label> spécifique en noir
    $('#mw-editpage-watch').css({
        'color': 'black' // Texte en noir
    });
 
    // Rendre le texte de l'élément <label> spécifique en noir
    $('#mw-editpage-minoredit').css({
        'color': 'black' // Texte en noir
    });
 
    // Rendre le texte de l'élément <label> spécifique en noir
    $('label[for="wpSummary"]').css({
        'color': 'black' // Texte en noir
    });
 
    // Rendre le texte de tous les autres éléments <label> avec l'attribut for en blanc
    $('label[for]').not('#mw-editpage-watch, #mw-editpage-minoredit, label[for="wpSummary"]').css({
        'color': 'white' // Texte en blanc
    });
 
    // Rendre le texte de tous les éléments <p> dans le div #editpage-copywarn en noir
    $('#editpage-copywarn p').css({
        'color': 'black' // Texte en noir
    });
 
    // Cibler le texte en gras <b>
    $('#editpage-copywarn b').css({
        'color': 'black' // Texte en noir pour le texte en gras
    });
 
    // Rendre Subcategories de la même couleur que tagline
    $('h2').css({
        'color': 'rgba(255, 255, 255, 0.8)' // Couleur identique au tagline
 
    });
    // Rendre le texte des éléments <span> avec la classe mw-plusminus-pos en vert clair
    $('.mw-plusminus-pos').css({
        'color': '#66ff66' // Exemple d'une couleur vert clair
    });
 
    // Rendre Subcategories de la même couleur que tagline
    $('h4').css({
        'color': 'rgba(255, 255, 255, 0.8)' // Couleur identique au tagline
    });
 
    // Changer la couleur des cellules du tableau
    $('table, td, th').css({
        'background-color': '#1c242c', // Couleur des cellules
        'color': 'white', // Assurez-vous que le texte des cellules soit lisible
        'border': '1px solid #3a3e42' // Ajouter une bordure grise
    });
 
    // Changer la couleur de <h3>R cont.</h3> pour qu'elle soit identique au tagline
    $('h3').css({
        'color': 'rgba(255, 255, 255, 0.5)' // Couleur identique au tagline
    });
 
// Charger le module collapsible de MediaWiki pour rendre la section repliable.
mw.loader.load('mediawiki.collapsible');
 
// Cette fonction affiche ou masque un élément avec l'ID spécifié.
function toggleContent(id) {
    var element = document.getElementById(id);
    if (element.style.display === 'none' || element.style.display === '') {
        element.style.display = 'table-row-group';
    } else {
        element.style.display = 'none';
    }
}
 
/* ----------------------------- */
/* Custom 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.
 
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;
    }
 
    /**
     * Traverse all text nodes and apply the backtick highlighting
     * @param {Node} node
     */
    function traverseTextNodes(node) {
        if (node.nodeType === 3 && node.nodeValue.includes('`')) { // Only process text nodes
            const span = document.createElement('span');
            span.innerHTML = highlightBackticks(node.nodeValue);
            node.parentNode.replaceChild(span, node);
        } else if (node.nodeType === 1 && node.childNodes) { // Traverse element children
            node.childNodes.forEach(traverseTextNodes);
        }
    }
 
    // Apply the changes to the entire body
    traverseTextNodes(document.body);
});