var questions = {
    "1": {
        "question": "Wildtier gefunden",
        "explanation": "Für Felltiere, Vögel und Igel gibt es verschiedene Ansprechpartner. Falls Sie zum Beispiel einen verletzten Vogel gefunden haben, folgen Sie bitte der Anleitung „Vogel“.",
        "description": "<h3>Grundsätzliches</h3>Wenn Sie ein Wildtier finden, gilt es zunächst, Ruhe zu bewahren. Nicht jedes Wildtier benötigt tatsächlich unsere Hilfe – oft kommen die Tiere sehr gut ohne unser Eingreifen zurecht.<br><br><h3>Beobachten aus sicherer Distanz</h3>Bei allen Wildtieren sollte man zunächst Abstand halten, um sich selbst zu schützen und den Tieren unnötigen Stress zu ersparen. Und Jungtiere werden nicht von den Eltern versorgt, wenn Menschen in unmittelbarer Nähe sind.<br><br><h3>Wildtier in Not einfangen</h3>Oft kann ein Handtuch oder eine Decke beim Einfangen helfen, sich selbst und das Tier vor unnötigen Verletzungen zu schützen.<br><br><h3>Transport</h3><ul><li>Eine möglichst kleine Box minimiert das Verletzungsrisiko für das Tier. <li>Luftlöcher und eine Polsterung z.B. aus Lappen oder Küchenpapier</li><li>Keine Nahrung anbieten oder gar einflößen.</li><li>Für eine angemessene Temperatur sorgen: genügend Wärme im Winter, Kühle bei heißem Wetter.</li></ul><br><h3>Die WiTAS</h3><ul><li>kümmert sich um einheimische Wildtiere</li><li>Ist nicht zuständig für Stadttauben, Heimtiere wie Hauskaninchen oder Hamster und Exoten.</li></ul>",
        "options": {
            "1": {
                "title": "Fell",
                "image": "assets/images/squirrel.webp"
            },
            "2": {
                "title": "Igel",
                "image": "assets/images/hedgehog.webp"
            },
            "3": {
                "title": "Vogel",
                "image": "assets/images/trauerschnaepper.webp"
            },
            "4": {
                "title": "Fleder&shy;maus",
                "image": "assets/images/bat.webp"
            },
        },
        "nextQuestions": {
            "1": "link+https://www.witas-ka.de/unsere-sch%C3%BCtzlinge/wildtier-gefunden/eichh%C3%B6rnchen/",
            "2": "link+https://www.witas-ka.de/unsere-sch%C3%BCtzlinge/wildtier-gefunden/igel/",
            "3": "2",
            "4": "30",
        }
    },
   "2": {
       "question": "Vogel",
       "explanation": "Um welche Vogelart handelt es sich?",
       "options": {
           "1": {
            "title": "Greif&shy;vogel",
            "image": "assets/images/bussard.webp"
           },
           "2": {
            "title": "Taube",
            "image": "assets/images/pigeon.webp"
           },
           "3": {
            "title": "Raben&shy;vögel",
            "image": "assets/images/rabe.webp"
           },
           "4": {
            "title": "Gänse&shy;vögel / Wasservogel",
            "image": "assets/images/ente.webp"
           },
           "5": {
            "title": "Schreitvögel (Storch, Reiher, Kranich)",
            "image": "assets/images/storch.webp"
           },
           "6": {
            "title": "Klein&shy;vogel",
            "image": "assets/images/trauerschnaepper.webp"
           }
       },
       "nextQuestions": {
           "1": "11",
           "2": "10",
           "3": "12",
           "4": "12",
           "5": "12",
           "6": "3",
       }
   },
   "3": {
       "question": "Kleinvogel",
       "explanation": "In welchem sichtbaren Zustand befindet sich der Vogel?<br><br>Verletzt: Fliegt nicht weg oder hat eindeutige Verletzungen, z.B. Flügelbruch, kann nicht laufen.",
       "options": {
           "1": { "title": "Verletzt" },
           "2": { "title": "Unverletzt" }
       },
     "nextQuestions": {
           "1": "16",
           "2": "4"
       }
   },
   "4": {
       "question": "Unverletzter Vogel",
       "explanation": "Handelt es sich um einen ausgewachsenen Vogel oder ein Jungtier / Küken?",
       "options": {
           "1": {
            "title": "Ausgewachsen",
            "image": "assets/images/ausgewachsen_kleinvogel.webp"
           },
           "2": {
            "title": "Jung&shy;vogel / Küken",
            "image": "assets/images/kueken.webp"
           }
       },
       "nextQuestions": {
           "1": "5",
           "2": "9"
       }
   },
   "5": {
       "question": "Ausgewachsener, unverletzter Kleinvogel",
       "explanation": "Wie verhält sich der Vogel bei einigen Minuten Beobachtung?",
       "options": {
           "1": { "title": "Agil, lebhaft, fliegt nicht weg" },
           "2": { "title": "Apathisch, wirkt benommen, unbeweglich" }
       },
       "nextQuestions": {
           "1": "6",
           "2": "7"
       }
   },
   "6": {
       "question": "Ausgewachsener, unverletzter Kleinvogel",
       "explanation": "Auffällige Verhaltensmuster",
       "options": {
           "1": { "title": "Hüpft herum" },
           "2": { "title": "Kopf in Schieflage" },
           "3": { "title": "Sitzt herum" }
       },
       "nextQuestions": {
           "1": "8",
           "2": "16",
           "3": "7",
       }
   },
   "7": {
       "question": "Ausgewachsener, unverletzter Kleinvogel",
       "explanation": "Legen Sie den Vogel behutsam in einen mit Luftlöchern versehenen Papkarton, der mit Küchenpapier oder ähnlichen ausgepolstert ist. Schließen Sie den Decke, die Dunkelheit wirkt beruhigend auf den Vogel. <br><br><u>Wichtig</u>: Dem Vogel keine Nahrung oder Wasser einflößen. Das kann zum Ersticken führen. Geöffneter Schnabel und schnelles Atem sind ein Zeichen für Stress, nicht für Durst.<br><br>Bei keiner eintretenden Verbesserung, kann die Entscheidung schwierig sein. Im Zweifel am besten beim Tierarzt anrufen; wenn das nicht geht, die Hotline von WiTAS nutzen.<br><br>Sofern es sich um einen Vogel, der gegen eine Fensterscheibe geflogen ist (Fensterflieger) handelt, finden Sie <a target=new href='https://www.witas-ka.de/app/download/7711366364/Wi005_Vogelschlag.pdf?t=1715948541'>hier</a> weitere Informationen.",
       "options": {
           "1": { "title": "Weiterhin schlechter Zustand" },
           "2": { "title": "Besserer Zustand" }
       },
       "nextQuestions": {
           "1": "16",
           "2": "8",
       }
   },
   "8": {
       "question": "Ausgewachsener, unverletzter Kleinvogel",
       "explanation": "Hat der Vogel sich nach 1 bis 2 Stunden erholt, bringen Siei hn in dem Karton ins Freie (kein geschlossener Raum!) und lassen ihn fliegen.<br><br> <b>Starthilfe</b>: Bringen Sie den Vogel zu einer Rohezone im Freien. Bei Mauerseglern ist eine höhere Startebene erforderlich. Werfen Sie den Mauersegler auf keinen Fall in die Luft, denn dann fällt er zu Boden und kann sich schwer verletzen. Halten Sie den Segler auf der flachen Hand. Wenn er nicht von allein startet, wird er den Abflug nicht schaffen. Versuchen Sie es später oder an einem anderen Ort noch einmal.<br>Stellen Sie Wasser bereit.<br>Beste Tageszeit für die Starthilfe ist abends oder früh morgens, nicht bei Hitze. <br><br>Sie müssen dem Vogel zu nichts zwingen.<br><br>Sofern Schwierigkeiten bestehen, bitte melden Sie sich umgehend an unseren Witas-Kontakt. Wir melden uns umgehend bei ihnen zurück.",
       "contacts": {
            "1": {
                "name": "WiTAS Kontakt",
                "mail": "vogelfund@witas-ka.de",
            },
        },
        "isComplete": true,
    },
    "9": {
       "question": "Junger, unverletzter Kleinvogel",
       "explanation": "Weitere Charakterisierung",
       "options": {
           "1": {
            "title": "Mit Federn",
            "image": "assets/images/kleinvogel_mit_federn.webp"
           },
           "2": {
            "title": "Ohne Federn",
            "image": "assets/images/kleinvogel_ohne_federn.webp"
           }
       },
       "nextQuestions": {
           "1": "20",
           "2": "21",
       }
   },
   "10": {
       "question": "Taube / Verletzter Kleinvogel",
       "explanation": "Handelt es sich bei der verletzten Taube um eine Stadt- oder Wildtaube? Unterscheidungskriterien finden Sie <a href=http://graumännchen.org/wildtauben/ target=new>hier</a>.",
       "options": {
           "1": {
            "title": "Stadt&shy;taube",
            "image": "assets/images/pigeon.webp"
           },
           "2": {
            "title": "Wild&shy;taube",
            "image": "assets/images/dovepigeon.webp"
           }
       },
       "nextQuestions": {
           "1": "linknew+http://stadttaubenkonzept-karlsruhe.de",
           "2": "17"
       }
    },
   "11": {
       "question": "Greifvogel",
       "explanation": "Z.B. Falke oder Habicht. Deutlich nach unten gebogener Schnabel.",
       "contacts": {
            "1": {
                    "name": "Falknerei Karlsruhe",
                    "tel": "0163 5845626",
                    "mail": "info@falknerei-karlsruhe.de",
                    "web": "https://www.falknerei-karlsruhe.de",
                    "address": "Rintheimer Hauptstraße 79, 76131 Karlsruhe",
            },            
       },
       "isComplete": true,
   },
   "12": {
       "question": "Gänse, Raben-, Wasser- oder Schreitvögel",
       "explanation": "Bitte nehmen Sie in diesem Fall umgehend Kontakt mit dem Veterinäramt bzw. Wildtierbeauftragten auf:",
       "contacts": {
            "1": {
                "name": "Veterinäramt Karlsruhe",
                "tel": "0721 1337101",
                "mail": "luv@oa.karlsruhe.de",
                "address": "Helmhotzstraße 9/11, 76133 Karlsruhe",
            },
            "2": {
                "name": "Wildtierbeauftragte Karlsruhe",
                "tel": "0721 1337365",
                "address": "Forstamt Karlsruhe, Waldzentrum, Linkenheimer Allee 10, 76131 Karlsruhe",
            },
        },
        "isComplete": true,
    },
    "13": {
       "question": "Fell",
       "explanation": "Wenn Sie ein Tier finden, ist es zuerst wichtig zu entscheiden, ob dieses Tier von WiTAS versorgt werden könnte. Noch besser wäre es, wenn Sie das Tier selbst versorgen könnten. Dafür haben wir diese <a href='#'>Handlungsanweisung</a> erstellt.",
       "isComplete": true,
    },
    "14": {
       "question": "Igel",
       "explanation": "Wenn Sie ein Tier finden, ist es zuerst wichtig zu entscheiden, ob dieses Tier von WiTAS versorgt werden könnte. Noch besser wäre es, wenn Sie das Tier selbst versorgen könnten. Dafür haben wir diese <a href='#'>Handlungsanweisung</a> erstellt.",
       "isComplete": true,
    },
    "15": {
       "question": "WiTAS Kontakt",
       "explanation": "Kontakt",
       "contacts": {
            "1": {
                "name": "WiTAS Kontakt",
                "mail": "vogelfund@witas-ka.de",
            },
        },
        "isComplete": true,
    },
    "16": {
       "question": "Verletzte Wildtaube / Kleinvogel",
       "explanation": "Bitte nehmen Sie in diesem Fall umgehend Kontakt mit einer der folgenden Tierarztpraxen auf.",
       "contacts": {
            "1": {
                "name": "Dr. Gerd Britsch",
                "title": "Vogel- und Reptilienpraxis",
                "tel": "+49 (0)721 6184280",
                "mail": "info@vogel-und-reptilien-tierarzt.de",
                "web": "www.vogel-und-reptilien-tierarzt.de",
                "address": "Am Storrenacker 1b, 76139 Karlsruhe",
            },
            "2": {
                "name": "Frau Dr. Ruth Kothe",
                "title": "Tierärztliche Praxis für Kleintiere und Vögel",
                "tel": "07249 955 5851",
                "mail": "info@tierarzt-stutensee.de",
                "web": "tierarzt-stutensee.de",
                "address": "Friedrich-Weinbrenner-Str. 1, 76297 Stutensee-Friedrichstal",
            },
        },
        "description": "Verletzte Vögel müssen nach der tierärztlichen Behandlung unter Umständen gesund gepflegt bzw. bis zur Auswilderung versorgt werden. Die Kosten für den Tierarzt und Sachmittel übernimmt ggf. WiTAS. Allerdings sind Spenden sehr willkommen. Bitte hierzu eine Info an <a href='mailto:vogelfund@witas-ka.de'>vogelfund@witas-ka.de</a>.",
        "isComplete": true,
    },
    "17": {
       "question": "Wildtaube",
       "explanation": "In welchem sichtbaren Zustand befindet sich der Vogel?<br><br>Verletzt: Fliegt nicht weg oder hat eindeutige Verletzungen, z.B. Flügelbruch, kann nicht laufen.",
       "options": {
           "1": { "title": "Verletzt" },
           "2": { "title": "Unverletzt" }
       },
     "nextQuestions": {
           "1": "16",
           "2": "4"
       }
   },
    "20": {
       "question": "Junger, unverletzter Kleinvogel",
       "explanation": "Aus einiger Entfernung beobachten (min 30 Minuten), bei Bedarf aus der Gefahrenzone bringen. Wird der Kleinvogel von seinen Eltern gefüttert?",
       "options": {
           "1": {
                "title": "Wird gefüttert",
                "image": "assets/images/kleinvogel_gefuettert.webp"
            },
           "2": {
                "title": "Wird NICHT gefüttert",
                "image": "assets/images/kleinvogel_mit_federn.webp"
           }
       },
       "nextQuestions": {
           "1": "23",
           "2": "15",
       }
   },
    "21": {
       "question": "Junger, unverletzter Kleinvogel",
       "explanation": "Befindet sich ein Vogelnest in sichtbarer und zugänglicher Nähe?",
       "options": {
           "1": { "title": "Nest sichtbar" },
           "2": { "title": "Kein Nest" }
       },
       "nextQuestions": {
           "1": "22",
           "2": "15",
       },
       "description": "Weitere Informationen dazu finden Sie <a href='FIXME'>hier</a>.",
   },
   "22": {
       "question": "Junger, unverletzter Kleinvogel",
       "explanation": "Setzen Sie den Jungvogel wieder zurück in das Nest.",
       "isComplete": true,
   },
   "23": {
       "question": "Junger, unverletzter Kleinvogel",
       "explanation": "Sie können den Vogel soweit in Ruhe lassen.",
       "isComplete": true,
   },
   "30": {
       "question": "Fledermaus",
       "explanation": "Bitte wenden Sie sich an folgenden Kontakt.",
       "contacts": {
            "1": {
                    "name": "Fledermaus Nottelefon",
                    "tel": "0179 4972 995",
            },     
            "2": {
                "name": "Wildtierbeauftragte Karlsruhe",
                "tel": "0721 1337365",
                "address": "Forstamt Karlsruhe, Waldzentrum, Linkenheimer Allee 10, 76131 Karlsruhe",
            },       
       },
       "isComplete": true,
   },
};

var currentQuestionId = "1";
var previousQuestionId = null;

window.onhashchange = function() {
    var questionId = window.location.hash.substring(1);
    if (questionId in questions) {
        displayQuestion(questionId);
    } else {
        displayQuestion();
    }
};

function renderContact(name, title, tel, mail, web, address) {
    var template = document.getElementById('cardTemplate').content.cloneNode(true);
    console.log(template.querySelector('.media-body h3'));

    template.querySelector('.media-body h3').textContent = name;
    template.querySelector('.media-body p').textContent = title;
    template.querySelector('.fi-phone + a').textContent = tel;
    template.querySelector('.fi-phone + a').href = 'tel:' + tel;
    template.querySelector('.fi-envelope + a').textContent = mail;
    template.querySelector('.fi-envelope + a').href = 'mailto:' + mail;
    template.querySelector('.fi-home + a').textContent = web;
    template.querySelector('.fi-home + a').href = 'https://' + web;
    template.querySelector('.fi-map + a').textContent = address;
    template.querySelector('.fi-map + a').href = 'https://www.google.de/maps/place/' + address;

    if (tel) {
        template.querySelector('.entry-phone').classList.remove('hide');
    }
    if (mail) {
        template.querySelector('.entry-envelope').classList.remove('hide');
    }
    if (web) {
        template.querySelector('.entry-home').classList.remove('hide');
    }
    if (address) {
        template.querySelector('.entry-map').classList.remove('hide');
    }

    var questionContainer = document.getElementById('questionContainer');
    questionContainer.appendChild(template);
    feather.replace();
}

function displayQuestion(questionId=1) {

    currentQuestionId = questionId;
    currentQuestionId = parseInt(currentQuestionId, 10);

    var questionContainer = document.getElementById('questionContainer');
    questionContainer.classList.remove('show');

    var question = questions[currentQuestionId];

    var secondProgressSteps = document.querySelectorAll('.progress-tracker li:nth-child(2)');
    secondProgressSteps.forEach(function(firstProgressStep) {
        if (currentQuestionId === 1) {
            firstProgressStep.classList.remove('is-complete');
        }
        if (currentQuestionId > 1) {
            firstProgressStep.classList.add('is-complete');
        }
    });
    var lastProgressSteps = document.querySelectorAll('.progress-tracker li:nth-child(3)');
    lastProgressSteps.forEach(function(lastProgressStep) {
        if (question.isComplete) {
            lastProgressStep.classList.add('is-complete');
        } else {
            lastProgressStep.classList.remove('is-complete');
        }
    });

    setTimeout(function() {
        questionContainer.innerHTML = '';

        if (currentQuestionId !== 1) {
            questionContainer.innerHTML += '<i data-feather="chevron-left"></i>';
            var backLink = document.createElement('a');
            backLink.classList.add('backLink');
            backLink.innerText = 'Zurück';
            backLink.href = 'javascript:history.back()';
            questionContainer.appendChild(backLink);
        }

        questionContainer.innerHTML += '<h2>' + question.question + '</h2>';
        questionContainer.innerHTML += question.explanation;
        
        var buttonContainer = document.createElement('div');
        buttonContainer.id = 'buttonContainer';

        for (var optionId in question.options) {
            var button = document.createElement('button');
            button.innerHTML = question.options[optionId].title;
            button.value = question.nextQuestions[optionId];
            button.id = 'option' + optionId;
            var imageLink = question.options[optionId].image;

            var span = document.createElement('span');
            while (button.firstChild) {
                span.appendChild(button.firstChild);
            }
            var icon = document.createElement('i');
            icon.setAttribute('data-feather', 'chevron-right');
            span.appendChild(icon);
            if (imageLink) {
                span.setAttribute('class', 'with-image' );
            }

            button.appendChild(span);

            if (imageLink) {
                var image = document.createElement('img');
                image.setAttribute('src', imageLink);
                button.insertBefore(image, button.firstChild);
            };

            button.addEventListener('click', function() {
                if ("linknew+" === this.value.substring(0,8)) {
                    window.open(this.value.substring(8),'_blank');
                    return 0;
                };
                if ("link+" === this.value.substring(0,5)) {
                    window.location = this.value.substring(5);
                    return 0;
                };
                previousQuestionId = currentQuestionId;
                currentQuestionId = this.value;
                window.location.hash = currentQuestionId;
                setTimeout(displayQuestion(currentQuestionId), 250);
            });

            buttonContainer.appendChild(button);
        }

        var mainContainer = document.querySelector('main');
        mainContainer.classList.remove('show');
        void mainContainer.offsetWidth;
        mainContainer.classList.add('show');

        questionContainer.appendChild(buttonContainer);

        if ('contacts' in question) {
            Object.keys(question.contacts).forEach(function(key) {
                var contact = question.contacts[key];
                renderContact(contact.name, contact.title, contact.tel, contact.mail, contact.web, contact.address);
            });
        }
        
        if ("description" in question) {
            var descriptionDiv = document.createElement('div');
            descriptionDiv.classList.add('descriptionContainer');
            descriptionDiv.innerHTML = question.description;
            questionContainer.appendChild(descriptionDiv);
        };

        feather.replace();
        questionContainer.classList.add('show');

        document.querySelector('.backLink').scrollIntoView({ 
            behavior: 'smooth' 
        });

    }, 500);
}

var initialQuestionId = window.location.hash.substring(1);
if (initialQuestionId in questions) {
    displayQuestion(initialQuestionId);
} else {
    displayQuestion();
}

feather.replace();