<!DOCTYPE html>
<html lang="fi">
<head>
    <meta charset="UTF-8">
    <title>Tigerstedt Släktträdh</title>
    <style>
    body {
        font-family: 'Segoe UI', Arial, sans-serif;
        background-color: #fdfaf5;
        padding: 20px;
        /* Estetään sivun hyppiminen, mutta sallitaan selaus */
        overflow-x: auto;
    }

    h1 { text-align: center; color: #4e342e; font-size: 1.5em; }

    .tree ul {
        padding-top: 20px;
        position: relative;
        display: flex;
        justify-content: center;
        /* Tiivistetään vaakasuuntaista väliä */
        gap: 0px;
        padding-left: 0;
    }

    .tree li {
        text-align: center;
        list-style-type: none;
        position: relative;
        /* TÄRKEÄ: Vähennetään sivuttaista marginaalia (oli 5px, nyt 2px) */
        padding: 20px 2px 0 2px;
    }

    /* Viivojen säätö tiukemmaksi */
    .tree li::before, .tree li::after {
        content: '';
        position: absolute; top: 0; right: 50%;
        border-top: 1px solid #8d6e63;
        width: 50%; height: 20px;
    }
    .tree li::after {
        right: auto; left: 50%;
        border-left: 1px solid #8d6e63;
    }

    .tree ul ul::before {
        content: '';
        position: absolute; top: 0; left: 50%;
        border-left: 1px solid #8d6e63;
        width: 0; height: 20px;
    }

    /* Henkilökortin tiivistys */
    .node {
        border: 1px solid #8d6e63;
        padding: 4px 6px; /* Pienempi sisämarginaali */
        display: inline-block;
        border-radius: 3px;
        background-color: white;
        /* TÄRKEÄ: Kiinteä maksimileveys estää kortteja levittämästä puuta */
        width: 100px;
        word-wrap: break-word; /* Katkaisee pitkät nimet */
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        font-size: 0.75em; /* Hieman pienempi fontti */
    }

    .name {
        font-weight: bold;
        display: block;
        line-height: 1.1;
        margin-bottom: 3px;
    }

    .meta {
        font-size: 0.85em;
        color: #795548;
        border-top: 1px dotted #ccc;
        padding-top: 2px;
    }

    /* Lisätään kikka: hiiren rullalla zoomailu (valinnainen) */
    #tree-root {
        transform-origin: top center;
        /* Voit kokeilla esim. scale(0.8) jos haluat oletuksena pienemmän */
        transform: scale(0.9);
    }
    .controls {
    text-align: center;
    margin-bottom: 30px;
    position: sticky; /* Valikko pysyy ylhäällä vaikka rullaisit sivua */
    top: 0;
    background: #fdfaf5;
    padding: 10px;
    z-index: 100;
    border-bottom: 1px solid #d7ccc8;
}

button {
    background-color: #8d6e63;
    color: white;
    border: none;
    padding: 8px 16px;
    margin: 0 5px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Segoe UI', sans-serif;
    transition: background 0.3s;
}

button:hover {
    background-color: #5d4037;
}
</style>
</head>
<body>
    <div class="controls">
    <button onclick="changeView('all')">Hela trädet</button>
    <button onclick="changeView('erik')">Eriks gren (k. 1736)</button>
    <button onclick="changeView('isak')">Isaks gren (k. 1742)</button>
</div>

    <h1>Tigerstedtin Suvun Jälkipolvet</h1>
    <div class="tree" id="tree-root">Ladataan sukupuuta...</div>

    <script>let alkuperainenData = [];
let sukuData = [];

// Haetaan data
fetch('http://nyatigerstedt.local/wp-content/uploads/2026/04/suku.json')
    .then(response => response.json())
    .then(data => {
        alkuperainenData = data;
        sukuData = data; // Aluksi näytetään kaikki
        renderTree();
    });

function changeView(view) {
    const rootContainer = document.getElementById('tree-root');
    rootContainer.innerHTML = 'Päivitetään näkymää...';

    if (view === 'all') {
        sukuData = alkuperainenData;
    } else if (view === 'erik') {
        // Suodatetaan: Erik (id 2) ja kaikki hänen jälkeläisensä
        sukuData = poimiHaara("2");
    } else if (view === 'isak') {
        // Suodatetaan: Isak (id 4) ja kaikki hänen jälkeläisensä
        sukuData = poimiHaara("4");
    }

    renderTree(view === 'all' ? null : (view === 'erik' ? "2" : "4"));
}

// Apufunktio, joka hakee tietyn henkilön ja kaikki hänen alapuolellaan olevat
function poimiHaara(rootId) {
    let tulos = [];
    const etsiLapset = (id) => {
        const henkilo = alkuperainenData.find(h => h.id == id);
        if (henkilo) {
            tulos.push(henkilo);
            const lapset = alkuperainenData.filter(h => h.vanhempi == id);
            lapset.forEach(l => etsiLapset(l.id));
        }
    };
    etsiLapset(rootId);
    return tulos;
}

function renderTree(customRootId = null) {
    const rootContainer = document.getElementById('tree-root');
    rootContainer.innerHTML = '';
   
    // Jos customRootId on null, etsitään suvun kanta-isä (Erik k. 1697)
    // Muuten käytetään valitun haaran alkupistettä
    const kantaIsä = customRootId
        ? sukuData.find(h => h.id == customRootId)
        : sukuData.find(h => h.vanhempi === null);
   
    if (kantaIsä) {
        const ul = document.createElement('ul');
        const li = document.createElement('li');
        li.innerHTML = `<div class="node"><span class="name">${kantaIsä.nimi}</span><span class="meta">k. ${kantaIsä.kuollut}</span></div>`;
       
        const oksat = createBranch(kantaIsä.id);
        if (oksat) li.appendChild(oksat);
       
        ul.appendChild(li);
        rootContainer.appendChild(ul);
    }
}

function createBranch(parentId) {
    const lapset = sukuData.filter(h => h.vanhempi == parentId);
    if (lapset.length === 0) return null;

    const ul = document.createElement('ul');
    lapset.forEach(lapsi => {
        const li = document.createElement('li');
        const node = document.createElement('div');
        node.className = 'node';
        node.innerHTML = `
            <span class="name">${lapsi.nimi}</span>
            <span class="meta">k. ${lapsi.kuollut || '?'}<br>T. ${lapsi.taulu}</span>
        `;
        li.appendChild(node);
        const alhaara = createBranch(lapsi.id);
        if (alhaara) li.appendChild(alhaara);
        ul.appendChild(li);
    });
    return ul;
}</script>
</body>
</html>