CharacterFilter.js: Difference between revisions

Latest revision as of 16:53, 16 September 2025

// Slideshow Script: Illustrations of Huck, filter by illustrator

// ===============================
// Huck Slideshow – filter by illustrator
// ===============================

// Globale Bildlisten und aktuelle Indizes für Huck
var huck_slides = { C: [], D: [] };
var huck_currentIndex = { C: 0, D: 0 };

// Slideshow laden für Huck
function huck_filterAndLoadSlideshow(target) {
    var dropdownId = 'illustratorDropdown' + target;
    var selectedIllustrator = document.getElementById(dropdownId).value.toLowerCase();
    var imageElement = document.getElementById('slide' + target);

    if (!imageElement) {
        console.error('Huck Slideshow ' + target + ': Bild-Element nicht gefunden.');
        return;
    }

    huck_slides[target] = [];
    huck_currentIndex[target] = 0;

    if (!selectedIllustrator) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No illustrator selected.";
        huck_updateCounter(target);
        return;
    }

    var rows = document.querySelectorAll('#catalog tbody tr');

    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var illustratorCell = row.cells[2];
        var tagsCell = row.cells[7];
        var idCell = row.cells[8];

        var illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : '';
        var tagsText = tagsCell ? tagsCell.textContent.trim().toLowerCase() : '';
        var idLink = idCell ? idCell.getElementsByTagName('a')[0] : null;
        var idText = idLink ? idLink.textContent.trim().toLowerCase() : '';

        // Filter: Illustrator match & 'huck'-Tag vorhanden
        if (illustratorText.indexOf(selectedIllustrator) !== -1 && tagsText.indexOf('huck') !== -1) {
            huck_slides[target].push(idText);
            console.log('✓ Zeile ' + i + ': ID=' + idText);
        }
    }

    if (huck_slides[target].length === 0) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No images found.";
        huck_updateCounter(target);
        return;
    }

    huck_showSlide(target, 0);
}

// Einzelnes Bild anzeigen
function huck_showSlide(target, index) {
    var imageElement = document.getElementById('slide' + target);
    var slideArray = huck_slides[target];

    if (!imageElement || slideArray.length === 0) {
        huck_updateCounter(target);
        return;
    }

    huck_currentIndex[target] = (index + slideArray.length) % slideArray.length;
    var imageId = slideArray[huck_currentIndex[target]];

    imageElement.src = '/index.php/Special:Redirect/file/' + imageId + '.jpg';
    imageElement.alt = imageId;
    imageElement.title = imageId;
    
    // Klick öffnet die File-Seite in neuem Tab
    imageElement.onclick = function() {
        var fileUrl = '/File:' + imageId + '.jpg';
        window.open(fileUrl, '_blank');
    };
    
    // ===============================
    // MediaInfo laden
    // ===============================
    var infoBox = document.getElementById('mediainfo' + target);
    loadCharacterMediaInfo(infoBox, imageId);

    // optional: preload next image
    var nextImg = new Image();
    nextImg.src = '/index.php/Special:Redirect/file/' + slideArray[(huck_currentIndex[target] + 1) % slideArray.length] + '.jpg';

    // Counter aktualisieren
    huck_updateCounter(target);
}

// Buttons
function huck_nextSlide(target) {
    huck_showSlide(target, huck_currentIndex[target] + 1);
}

function huck_prevSlide(target) {
    huck_showSlide(target, huck_currentIndex[target] - 1);
}

// Counter-Funktion
function huck_updateCounter(target) {
    var total = huck_slides[target].length;
    var current = total > 0 ? huck_currentIndex[target] + 1 : 0;
    var counterEl = document.getElementById("counter" + target);
    if (counterEl) {
        counterEl.textContent = current + "/" + total;
    }
}


// ===============================
// Jim Slideshow – filter by illustrator
// ===============================

// Globale Bildlisten und aktuelle Indizes für Jim
var jim_slides = { C: [], D: [] };
var jim_currentIndex = { C: 0, D: 0 };

// Slideshow laden für Jim
function jim_filterAndLoadSlideshow(target) {
    var dropdownId = 'jim_illustratorDropdown' + target;
    var selectedIllustrator = document.getElementById(dropdownId).value.toLowerCase();
    var imageElement = document.getElementById('jim_slide' + target);

    if (!imageElement) {
        console.error('Jim Slideshow ' + target + ': Bild-Element nicht gefunden.');
        return;
    }

    jim_slides[target] = [];
    jim_currentIndex[target] = 0;

    if (!selectedIllustrator) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No illustrator selected.";
        return;
    }

    var rows = document.querySelectorAll('#catalog tbody tr');

    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var illustratorCell = row.cells[2];
        var tagsCell = row.cells[7];
        var idCell = row.cells[8];

        var illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : '';
        var tagsText = tagsCell ? tagsCell.textContent.trim().toLowerCase() : '';
        var idLink = idCell ? idCell.getElementsByTagName('a')[0] : null;
        var idText = idLink ? idLink.textContent.trim().toLowerCase() : '';

        // Filter: Illustrator match & 'jim'-Tag vorhanden
        if (illustratorText.indexOf(selectedIllustrator) !== -1 && tagsText.indexOf('jim') !== -1) {
            jim_slides[target].push(idText);
            console.log('✓ Zeile ' + i + ': ID=' + idText);
        }
    }

    if (jim_slides[target].length === 0) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No matching images found.";
        return;
    }

    jim_showSlide(target, 0);
}

// Einzelnes Bild anzeigen
function jim_showSlide(target, index) {
    var imageElement = document.getElementById('jim_slide' + target);
    var slideArray = jim_slides[target];

    if (!imageElement || slideArray.length === 0) return;

    jim_currentIndex[target] = (index + slideArray.length) % slideArray.length;
    var imageId = slideArray[jim_currentIndex[target]];

    imageElement.src = '/index.php/Special:Redirect/file/' + imageId + '.jpg';
    imageElement.alt = imageId;
    imageElement.title = imageId;
    
    // Klick öffnet die File-Seite in neuem Tab
    imageElement.onclick = function() {
        var fileUrl = '/File:' + imageId + '.jpg';
        window.open(fileUrl, '_blank');
    };
    // ===============================
    // MediaInfo laden
    // ===============================
    var infoBox = document.getElementById('mediainfo' + target);
    loadCharacterMediaInfo(infoBox, imageId);
    // optional: preload next image
    var nextImg = new Image();
    nextImg.src = '/index.php/Special:Redirect/file/' + slideArray[(jim_currentIndex[target] + 1) % slideArray.length] + '.jpg';
    
    // Counter aktualisieren
    jim_updateCounter(target);
}

// Buttons
function jim_nextSlide(target) {
    jim_showSlide(target, jim_currentIndex[target] + 1);
}

function jim_prevSlide(target) {
    jim_showSlide(target, jim_currentIndex[target] - 1);
}
// Counter-Funktion
function jim_updateCounter(target) {
    var total = jim_slides[target].length;
    var current = total > 0 ? jim_currentIndex[target] + 1 : 0;
    var counterEl = document.getElementById("counter" + target);
    if (counterEl) {
        counterEl.textContent = current + "/" + total;
    }
}
// ===============================
// Pap Finn Slideshow – filter by illustrator
// ===============================

// Globale Bildlisten und aktuelle Indizes für Pap Finn
var pap_slides = { C: [], D: [] };
var pap_currentIndex = { C: 0, D: 0 };

// Slideshow laden für Pap Finn
function pap_filterAndLoadSlideshow(target) {
    var dropdownId = 'pap_illustratorDropdown' + target;
    var selectedIllustrator = document.getElementById(dropdownId).value.toLowerCase();
    var imageElement = document.getElementById('pap_slide' + target);

    if (!imageElement) {
        console.error('Pap Finn Slideshow ' + target + ': Bild-Element nicht gefunden.');
        return;
    }

    pap_slides[target] = [];
    pap_currentIndex[target] = 0;

    if (!selectedIllustrator) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No illustrator selected.";
        return;
    }

    var rows = document.querySelectorAll('#catalog tbody tr');

    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var illustratorCell = row.cells[2];
        var tagsCell = row.cells[7];
        var idCell = row.cells[8];

        var illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : '';
        var tagsText = tagsCell ? tagsCell.textContent.trim().toLowerCase() : '';
        var idLink = idCell ? idCell.getElementsByTagName('a')[0] : null;
        var idText = idLink ? idLink.textContent.trim().toLowerCase() : '';

        // Filter: Illustrator match & 'pap'-Tag vorhanden
        if (illustratorText.indexOf(selectedIllustrator) !== -1 && tagsText.indexOf('pap') !== -1) {
            pap_slides[target].push(idText);
            console.log('✓ Zeile ' + i + ': ID=' + idText);
        }
    }

    if (pap_slides[target].length === 0) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No matching images found.";
        return;
    }

    pap_showSlide(target, 0);
}

// Einzelnes Bild anzeigen
function pap_showSlide(target, index) {
    var imageElement = document.getElementById('pap_slide' + target);
    var slideArray = pap_slides[target];

    if (!imageElement || slideArray.length === 0) return;

    pap_currentIndex[target] = (index + slideArray.length) % slideArray.length;
    var imageId = slideArray[pap_currentIndex[target]];

    imageElement.src = '/index.php/Special:Redirect/file/' + imageId + '.jpg';
    imageElement.alt = imageId;
    imageElement.title = imageId;

// Klick öffnet die File-Seite in neuem Tab
    imageElement.onclick = function() {
        var fileUrl = '/File:' + imageId + '.jpg';
        window.open(fileUrl, '_blank');
    };
// ===============================
    // MediaInfo laden
    // ===============================
    var infoBox = document.getElementById('mediainfo' + target);
    loadCharacterMediaInfo(infoBox, imageId);

    // optional: preload next image
    var nextImg = new Image();
    nextImg.src = '/index.php/Special:Redirect/file/' + slideArray[(pap_currentIndex[target] + 1) % slideArray.length] + '.jpg';
    
    // Counter aktualisieren
    pap_updateCounter(target);
}

// Buttons
function pap_nextSlide(target) {
    pap_showSlide(target, pap_currentIndex[target] + 1);
}

function pap_prevSlide(target) {
    pap_showSlide(target, pap_currentIndex[target] - 1);
}
// Counter-Funktion
function pap_updateCounter(target) {
    var total = pap_slides[target].length;
    var current = total > 0 ? pap_currentIndex[target] + 1 : 0;
    var counterEl = document.getElementById("counter" + target);
    if (counterEl) {
        counterEl.textContent = current + "/" + total;
    }
}
// ===============================
// King/Duke Slideshow – filter by illustrator
// ===============================

// Globale Bildlisten und aktuelle Indizes für King/Duke
var kd_slides = { C: [], D: [] };
var kd_currentIndex = { C: 0, D: 0 };

// Slideshow laden für King/Duke
function kd_filterAndLoadSlideshow(target) {
    var dropdownId = 'kd_illustratorDropdown' + target;
    var selectedIllustrator = document.getElementById(dropdownId).value.toLowerCase();
    var imageElement = document.getElementById('kd_slide' + target);

    if (!imageElement) {
        console.error('King/Duke Slideshow ' + target + ': Bild-Element nicht gefunden.');
        return;
    }

    kd_slides[target] = [];
    kd_currentIndex[target] = 0;

    if (!selectedIllustrator) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No illustrator selected.";
        return;
    }

    var rows = document.querySelectorAll('#catalog tbody tr');

    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var illustratorCell = row.cells[2];
        var tagsCell = row.cells[7];
        var idCell = row.cells[8];

        var illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : '';
        var tagsText = tagsCell ? tagsCell.textContent.trim().toLowerCase() : '';
        var idLink = idCell ? idCell.getElementsByTagName('a')[0] : null;
        var idText = idLink ? idLink.textContent.trim().toLowerCase() : '';

        // Filter: Illustrator match UND '-king' oder '-duke' im Tag
        if (illustratorText.indexOf(selectedIllustrator) !== -1 &&
            (tagsText.indexOf('-king') !== -1 || tagsText.indexOf('-duke') !== -1)) {
            kd_slides[target].push(idText);
            console.log('✓ Zeile ' + i + ': ID=' + idText);
        }
    }

    if (kd_slides[target].length === 0) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No matching images found.";
        return;
    }

    kd_showSlide(target, 0);
}

// Einzelnes Bild anzeigen
function kd_showSlide(target, index) {
    var imageElement = document.getElementById('kd_slide' + target);
    var slideArray = kd_slides[target];

    if (!imageElement || slideArray.length === 0) return;

    kd_currentIndex[target] = (index + slideArray.length) % slideArray.length;
    var imageId = slideArray[kd_currentIndex[target]];

    imageElement.src = '/index.php/Special:Redirect/file/' + imageId + '.jpg';
    imageElement.alt = imageId;
    imageElement.title = imageId;

// Klick öffnet die File-Seite in neuem Tab
    imageElement.onclick = function() {
        var fileUrl = '/File:' + imageId + '.jpg';
        window.open(fileUrl, '_blank');
    };
// ===============================
    // MediaInfo laden
    // ===============================
    var infoBox = document.getElementById('mediainfo' + target);
    loadCharacterMediaInfo(infoBox, imageId);
    // optional: preload next image
    var nextImg = new Image();
    nextImg.src = '/index.php/Special:Redirect/file/' + slideArray[(kd_currentIndex[target] + 1) % slideArray.length] + '.jpg';
// Counter aktualisieren
    kd_updateCounter(target);
}

// Buttons
function kd_nextSlide(target) {
    kd_showSlide(target, kd_currentIndex[target] + 1);
}

function kd_prevSlide(target) {
    kd_showSlide(target, kd_currentIndex[target] - 1);
}
// Counter-Funktion
function kd_updateCounter(target) {
    var total = kd_slides[target].length;
    var current = total > 0 ? kd_currentIndex[target] + 1 : 0;
    var counterEl = document.getElementById("counter" + target);
    if (counterEl) {
        counterEl.textContent = current + "/" + total;
    }
}
// ===============================
// Tom Slideshow – filter by illustrator
// ===============================

// Globale Bildlisten und aktuelle Indizes für Tom
var tom_slides = { C: [], D: [] };
var tom_currentIndex = { C: 0, D: 0 };

// Slideshow laden für Tom
function tom_filterAndLoadSlideshow(target) {
    var dropdownId = 'tom_illustratorDropdown' + target;
    var selectedIllustrator = document.getElementById(dropdownId).value.toLowerCase();
    var imageElement = document.getElementById('tom_slide' + target);

    if (!imageElement) {
        console.error('Tom Slideshow ' + target + ': Bild-Element nicht gefunden.');
        return;
    }

    tom_slides[target] = [];
    tom_currentIndex[target] = 0;

    if (!selectedIllustrator) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No illustrator selected.";
        return;
    }

    var rows = document.querySelectorAll('#catalog tbody tr');

    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var illustratorCell = row.cells[2];
        var tagsCell = row.cells[7];
        var idCell = row.cells[8];

        var illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : '';
        var tagsText = tagsCell ? tagsCell.textContent.trim().toLowerCase() : '';
        var idLink = idCell ? idCell.getElementsByTagName('a')[0] : null;
        var idText = idLink ? idLink.textContent.trim().toLowerCase() : '';

        // Filter: Illustrator match & '-tom'-Tag vorhanden
        if (illustratorText.indexOf(selectedIllustrator) !== -1 && tagsText.indexOf('-tom') !== -1) {
            tom_slides[target].push(idText);
            console.log('✓ Zeile ' + i + ': ID=' + idText);
        }
    }

    if (tom_slides[target].length === 0) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No matching images found.";
        return;
    }

    tom_showSlide(target, 0);
}

// Einzelnes Bild anzeigen
function tom_showSlide(target, index) {
    var imageElement = document.getElementById('tom_slide' + target);
    var slideArray = tom_slides[target];

    if (!imageElement || slideArray.length === 0) return;

    tom_currentIndex[target] = (index + slideArray.length) % slideArray.length;
    var imageId = slideArray[tom_currentIndex[target]];

    imageElement.src = '/index.php/Special:Redirect/file/' + imageId + '.jpg';
    imageElement.alt = imageId;
    imageElement.title = imageId;
    
    // Klick öffnet die File-Seite in neuem Tab
    imageElement.onclick = function() {
        var fileUrl = '/File:' + imageId + '.jpg';
        window.open(fileUrl, '_blank');
    };
// ===============================
    // MediaInfo laden
    // ===============================
    var infoBox = document.getElementById('mediainfo' + target);
    loadCharacterMediaInfo(infoBox, imageId);
    // optional: preload next image
    var nextImg = new Image();
    nextImg.src = '/index.php/Special:Redirect/file/' + slideArray[(tom_currentIndex[target] + 1) % slideArray.length] + '.jpg';
// Counter aktualisieren
    tom_updateCounter(target);
}

// Buttons
function tom_nextSlide(target) {
    tom_showSlide(target, tom_currentIndex[target] + 1);
}

function tom_prevSlide(target) {
    tom_showSlide(target, tom_currentIndex[target] - 1);
}
// Counter-Funktion
function tom_updateCounter(target) {
    var total = tom_slides[target].length;
    var current = total > 0 ? tom_currentIndex[target] + 1 : 0;
    var counterEl = document.getElementById("counter" + target);
    if (counterEl) {
        counterEl.textContent = current + "/" + total;
    }
}
// ===============================
// Other Characters Slideshow – filter by illustrator
// ===============================

// Globale Bildlisten und aktuelle Indizes für Other Characters
var other_slides = { C: [], D: [] };
var other_currentIndex = { C: 0, D: 0 };

// Slideshow laden für Other Characters
function other_filterAndLoadSlideshow(target) {
    var dropdownId = 'other_illustratorDropdown' + target;
    var selectedIllustrator = document.getElementById(dropdownId).value.toLowerCase();
    var imageElement = document.getElementById('other_slide' + target);

    if (!imageElement) {
        console.error('Other Characters Slideshow ' + target + ': Bild-Element nicht gefunden.');
        return;
    }

    other_slides[target] = [];
    other_currentIndex[target] = 0;

    if (!selectedIllustrator) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No illustrator selected.";
        return;
    }

    var rows = document.querySelectorAll('#catalog tbody tr');

    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var illustratorCell = row.cells[2];
        var tagsCell = row.cells[7];
        var idCell = row.cells[8];

        var illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : '';
        var tagsText = tagsCell ? tagsCell.textContent.trim().toLowerCase() : '';
        var idLink = idCell ? idCell.getElementsByTagName('a')[0] : null;
        var idText = idLink ? idLink.textContent.trim().toLowerCase() : '';

        // Filter: Illustrator match & '-sdc'-Tag vorhanden
        if (illustratorText.indexOf(selectedIllustrator) !== -1 && tagsText.indexOf('-sdc') !== -1) {
            other_slides[target].push(idText);
            console.log('✓ Zeile ' + i + ': ID=' + idText);
        }
    }

    if (other_slides[target].length === 0) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No matching images found.";
        return;
    }

    other_showSlide(target, 0);
}

// Einzelnes Bild anzeigen
function other_showSlide(target, index) {
    var imageElement = document.getElementById('other_slide' + target);
    var slideArray = other_slides[target];

    if (!imageElement || slideArray.length === 0) return;

    other_currentIndex[target] = (index + slideArray.length) % slideArray.length;
    var imageId = slideArray[other_currentIndex[target]];

    imageElement.src = '/index.php/Special:Redirect/file/' + imageId + '.jpg';
    imageElement.alt = imageId;
    imageElement.title = imageId;
    
    // Klick öffnet die File-Seite in neuem Tab
    imageElement.onclick = function() {
        var fileUrl = '/File:' + imageId + '.jpg';
        window.open(fileUrl, '_blank');
    };
// ===============================
    // MediaInfo laden
    // ===============================
    var infoBox = document.getElementById('mediainfo' + target);
    loadCharacterMediaInfo(infoBox, imageId);
    // optional: preload next image
    var nextImg = new Image();
    nextImg.src = '/index.php/Special:Redirect/file/' + slideArray[(other_currentIndex[target] + 1) % slideArray.length] + '.jpg';
// Counter aktualisieren
    other_updateCounter(target);
}

// Buttons
function other_nextSlide(target) {
    other_showSlide(target, other_currentIndex[target] + 1);
}

function other_prevSlide(target) {
    other_showSlide(target, other_currentIndex[target] - 1);
}
// Counter-Funktion
function other_updateCounter(target) {
    var total = other_slides[target].length;
    var current = total > 0 ? other_currentIndex[target] + 1 : 0;
    var counterEl = document.getElementById("counter" + target);
    if (counterEl) {
        counterEl.textContent = current + "/" + total;
    }
}

// ===============================
// Female Characters Slideshow – filter by illustrator
// ===============================

// Globale Bildlisten und aktuelle Indizes für Female Characters
var female_slides = { C: [], D: [] };
var female_currentIndex = { C: 0, D: 0 };

// Slideshow laden für Female Characters
function female_filterAndLoadSlideshow(target) {
    var dropdownId = 'female_illustratorDropdown' + target;
    var selectedIllustrator = document.getElementById(dropdownId).value.toLowerCase();
    var imageElement = document.getElementById('female_slide' + target);

    if (!imageElement) {
        console.error('Female Characters Slideshow ' + target + ': Bild-Element nicht gefunden.');
        return;
    }

    female_slides[target] = [];
    female_currentIndex[target] = 0;

    if (!selectedIllustrator) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No illustrator selected.";
        return;
    }

    var rows = document.querySelectorAll('#catalog tbody tr');

    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var illustratorCell = row.cells[2];
        var tagsCell = row.cells[7];
        var idCell = row.cells[8];

        var illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : '';
        var tagsText = tagsCell ? tagsCell.textContent.trim().toLowerCase() : '';
        var idLink = idCell ? idCell.getElementsByTagName('a')[0] : null;
        var idText = idLink ? idLink.textContent.trim().toLowerCase() : '';

        // Filter: Illustrator match & '-fem'-Tag vorhanden
        if (illustratorText.indexOf(selectedIllustrator) !== -1 && tagsText.indexOf('-fem') !== -1) {
            female_slides[target].push(idText);
            console.log('✓ Zeile ' + i + ': ID=' + idText);
        }
    }

    if (female_slides[target].length === 0) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No matching images found.";
        return;
    }

    female_showSlide(target, 0);
}

// Einzelnes Bild anzeigen
function female_showSlide(target, index) {
    var imageElement = document.getElementById('female_slide' + target);
    var slideArray = female_slides[target];

    if (!imageElement || slideArray.length === 0) return;

    female_currentIndex[target] = (index + slideArray.length) % slideArray.length;
    var imageId = slideArray[female_currentIndex[target]];

    imageElement.src = '/index.php/Special:Redirect/file/' + imageId + '.jpg';
    imageElement.alt = imageId;
    imageElement.title = imageId;
    
    // Klick öffnet die File-Seite in neuem Tab
    imageElement.onclick = function() {
        var fileUrl = '/File:' + imageId + '.jpg';
        window.open(fileUrl, '_blank');
    };
// ===============================
    // MediaInfo laden
    // ===============================
    var infoBox = document.getElementById('mediainfo' + target);
    loadCharacterMediaInfo(infoBox, imageId);
    // optional: preload next image
    var nextImg = new Image();
    nextImg.src = '/index.php/Special:Redirect/file/' + slideArray[(female_currentIndex[target] + 1) % slideArray.length] + '.jpg';
// Counter aktualisieren
    female_updateCounter(target);
}

// Buttons
function female_nextSlide(target) {
    female_showSlide(target, female_currentIndex[target] + 1);
}

function female_prevSlide(target) {
    female_showSlide(target, female_currentIndex[target] - 1);
}
// Counter-Funktion
function female_updateCounter(target) {
    var total = female_slides[target].length;
    var current = total > 0 ? female_currentIndex[target] + 1 : 0;
    var counterEl = document.getElementById("counter" + target);
    if (counterEl) {
        counterEl.textContent = current + "/" + total;
    }
}
// ===============================
// Black Characters Slideshow – filter by illustrator
// ===============================

// Globale Bildlisten und aktuelle Indizes für Black Characters
var black_slides = { C: [], D: [] };
var black_currentIndex = { C: 0, D: 0 };

// Slideshow laden für Black Characters
function black_filterAndLoadSlideshow(target) {
    var dropdownId = 'black_illustratorDropdown' + target;
    var selectedIllustrator = document.getElementById(dropdownId).value.toLowerCase();
    var imageElement = document.getElementById('black_slide' + target);

    if (!imageElement) {
        console.error('Black Slideshow ' + target + ': Bild-Element nicht gefunden.');
        return;
    }

    black_slides[target] = [];
    black_currentIndex[target] = 0;

    if (!selectedIllustrator) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No illustrator selected.";
        return;
    }

    var rows = document.querySelectorAll('#catalog tbody tr');

    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var illustratorCell = row.cells[2];
        var tagsCell = row.cells[7];
        var idCell = row.cells[8];

        var illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : '';
        var tagsText = tagsCell ? tagsCell.textContent.trim().toLowerCase() : '';
        var idLink = idCell ? idCell.getElementsByTagName('a')[0] : null;
        var idText = idLink ? idLink.textContent.trim().toLowerCase() : '';

        // Filter: Illustrator match & '-aac'-Tag vorhanden
        if (illustratorText.indexOf(selectedIllustrator) !== -1 && tagsText.indexOf('aac') !== -1) {
            black_slides[target].push(idText);
            console.log('✓ Zeile ' + i + ': ID=' + idText);
        }
    }

    if (black_slides[target].length === 0) {
        imageElement.src = "https://illus.twainframe.org/images/e/e9/IllustratorPlaceholder.png";
        imageElement.title = "No matching images found.";
        return;
    }

    black_showSlide(target, 0);
}

// Einzelnes Bild anzeigen
function black_showSlide(target, index) {
    var imageElement = document.getElementById('black_slide' + target);
    var slideArray = black_slides[target];

    if (!imageElement || slideArray.length === 0) return;

    black_currentIndex[target] = (index + slideArray.length) % slideArray.length;
    var imageId = slideArray[black_currentIndex[target]];

    imageElement.src = '/index.php/Special:Redirect/file/' + imageId + '.jpg';
    imageElement.alt = imageId;
    imageElement.title = imageId;
    
    // Klick öffnet die File-Seite in neuem Tab
    imageElement.onclick = function() {
        var fileUrl = '/File:' + imageId + '.jpg';
        window.open(fileUrl, '_blank');
    };
// ===============================
    // MediaInfo laden
    // ===============================
    var infoBox = document.getElementById('mediainfo' + target);
    loadCharacterMediaInfo(infoBox, imageId);
    // optional: preload next image
    var nextImg = new Image();
    nextImg.src = '/index.php/Special:Redirect/file/' + slideArray[(black_currentIndex[target] + 1) % slideArray.length] + '.jpg';
// Counter aktualisieren
    black_updateCounter(target);
}

// Buttons
function black_nextSlide(target) {
    black_showSlide(target, black_currentIndex[target] + 1);
}

function black_prevSlide(target) {
    black_showSlide(target, black_currentIndex[target] - 1);
}
// Counter-Funktion
function black_updateCounter(target) {
    var total = black_slides[target].length;
    var current = total > 0 ? black_currentIndex[target] + 1 : 0;
    var counterEl = document.getElementById("counter" + target);
    if (counterEl) {
        counterEl.textContent = current + "/" + total;
    }
}

// ===============================
// Character MediaInfo – für alle Slideshow-Targets
// ===============================
function loadCharacterMediaInfo(infoBox, filename) {
    if (!infoBox) return;
    infoBox.textContent = "Loading ...";

    var filePage = filename.endsWith('.jpg') ? filename : filename + '.jpg';
    var url = '/index.php?title=File:' + encodeURIComponent(filePage) + '&action=raw';

    fetch(url)
        .then(resp => resp.text())
        .then(text => {
            var match = text.match(/\{\{MediaInfo([\s\S]*?)\}\}/);
            if (!match) {
                infoBox.textContent = "No Data found.";
                return;
            }

            var block = match[1];
            var fields = ["title","chapter","illustration","illustrator","year","tags"];
            var htmlList = "<ul style='margin:0; padding-left:1em; list-style:none;'>";

            fields.forEach(function(field) {
                var m = block.match(new RegExp("\\|\\s*" + field + "\\s*=([^\\n]*)"));
                if (m) {
                    var label = field.charAt(0).toUpperCase() + field.slice(1);
                    htmlList += "<li><b>" + label + ":</b> " + m[1].trim() + "</li>";
                }
            });

            htmlList += "</ul>";
            infoBox.innerHTML = htmlList;

            // optional: CSS
            infoBox.style.backgroundColor = "#f9f9f9";
            infoBox.style.border = "1px solid #ccc";
            infoBox.style.padding = "0.5em 1em";
            infoBox.style.marginTop = "0.5em";
            infoBox.style.borderRadius = "4px";
            infoBox.style.fontSize = "0.9em";
        })
        .catch(function(err) {
            console.error(err);
            infoBox.textContent = "Error";
        });
}