<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/font/bootstrap-icons.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
</head>

<style>

    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
    
    :root {
    --size: 24px;
    }

    @keyframes flicker {
        to {
            mask-position: 50% 50%, 0 50%;
        }
    }

    .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        background: white;
        z-index: -999;
    }

    .bg-el {
        background: conic-gradient(from 180deg at 50% 70%,hsla(0,0%,98%,1) 0deg,#eec32d 72.0000010728836deg,#ec4b4b 144.0000021457672deg,#709ab9 216.00000858306885deg,#4dffbf 288.0000042915344deg,hsla(0,0%,98%,1) 1turn);
        width: 100%;
        height: 100%;
        mask:
            radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / var(--size) var(--size),
            url("https://assets.codepen.io/605876/noise-mask.png") 256px 50% / 256px 256px;
        mask-composite: intersect;
        animation: flicker 20s infinite linear;
    }

    html > div {
        display: none !important;
    }

    body {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 2em;
        padding: 2em;
        font-family: "IBM Plex Sans", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .title {
        position: relative;
        margin: auto;
        width: fit-content;
        text-align: center;
        color: #fff;
        padding: 0 1em;
        font-size: 40px;
        font-weight: bold;
        height: 1.5em;
        line-height: 1.5em;
    }

    .title:before{
        content:"";
        position: absolute;
        top: 0;
        z-index: -1;
        left: 0;
        right: 0;
        border-style: solid;
        border-width: 0.75em 0.4em 0.75em 0.4em;
        border-color: #002853 transparent #002853 transparent;
        height: 0;
    }

    .grid-container {
        width: fit-content;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 2em;
        padding: 1em;
        background-color: rgba(255, 255, 255, 0.3);
    }

    .card {
        width: 100px;
        height: 150px;
        background-color: #d3d3d3;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-family: Arial, sans-serif;
        font-size: 20px;
        cursor: pointer;
        filter: grayscale(100%) contrast(120%);
    }
    .empty-card {
        width: 100px;
        height: 150px;
        opacity: 0;
    }

    #final-card {
        display: none;
        opacity: 0;
        transition: opacity 1s linear;
    }

    #modal-content-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2em;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        justify-content: flex-start;
    }

    #modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.4);
        animation: modal-fade-in 250ms cubic-bezier(0, 0.5, 0.5, 1);
    }

    @keyframes modal-fade-in {
        0% {
            background-color: rgba(0, 0, 0, 0);
        }

        100% {
            background-color: rgba(0, 0, 0, 0.4);
        }
    }

    #modal-content {
        display: flex;
        flex-direction: column;
        background-color: #fefefe;
        position: absolute;
        border-radius: 0em;
        left: 50%;
        top: 0;
        padding: 1em;
        width: 50%;
        min-width: 960px;
        box-sizing: border-box;
        height: 100%;
        transform: translateX(-50%)
    }

    .modal-anim-up {
        animation: modal-anim-up 250ms cubic-bezier(0, 0.5, 0.5, 1);
    }

    @keyframes modal-anim-up {
        0% {
            top: 90%;
        }

        100% {
            top: 0;
        }
    }

    .close {
        color: #797979;
        float: left;
        margin-left: 0.25em;
        font-size: 2em;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    #year-header {
        color: #002853;
        font-size: 40px;
        font-weight: bold;
        text-align: center;
    }

    #blow-button {
        font-size: 1.2em;
        background-color: #f1746c;
        color: white;
        font-weight: bold;
        padding: 0.5em 3em;
        border-bottom: solid 6px #f1746c;
        border-radius: 2em;
        text-decoration: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: fit-content;
        margin: auto;
        transition: 80ms ease-out;
    }

    #blow-button:hover {
        cursor: pointer;
        background-color: #f1746c;
        padding: 0.5em 5em;
        border-bottom: solid 6px #f08476;
        transition: 120ms ease-out;
    }

    #candle-animation-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        overflow: hidden;
        height: 60vh;
        background-color: white;
        transition: height 2s ease-in-out;
    }

    #candle-animation-wrapper.shrunk {
        height: 53vh;
        transition: height 2s ease-in-out;
    }

    #candle-animation-wrapper>video {
        height: 60vh;
    }
    video {
        filter: grayscale(0);
    }

    #quote {
        max-width: 90%;
        text-align: center;
        overflow: hidden;
        height: 0;
        transition: height 2s ease-in-out;
    }

    #quote-block {
        border: 2px rgb(173, 173, 173) double;
        margin-top: 10px;
        margin-bottom: 5px;
        position: relative;
        padding: 1em;
        padding-top: calc(1em + 10px);
        box-sizing: border-box;
    }
    #quote-block::after {
        content: "Pensée du jour";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 12px;
        background: rgb(217, 217, 217);
        padding: 5px 10px;
        color: black;
    }

    .author {
        font-style: italic;
        color: grey;
    }

    #lock-timer {
        font-weight: bold;
        font-size: 1.5em;
        color: #da0000;
        padding: 0.5em 1em;
        border-radius: 2em;
        border: solid 2px #da0000;
    }

    #info {
        background-color: white;
        position: absolute;
        color: grey;
        font-size: 2em;
        bottom: 1em;
        right: 1em;
        width: 1em;
        height: 1em;
        cursor: pointer;
    }

    #extras {
        padding: 0 6em;
    }

    .white-text {
        color:#fefefe;
    }

</style>

<body>

    <div class="bg"><div class="bg-el"></div></div>

    <div class="title">Joyeux Anniversaire Flanflan !</div>

    <div class="grid-container">
        <div class="empty-card"></div>
        <img class="card" id="card-1" onclick="openModal('1')" src="resources/locked_card.png"></img>
        <img class="card" id="card-2" onclick="openModal('2')" src="resources/locked_card.png"></img>
        <img class="card" id="card-3" onclick="openModal('3')" src="resources/locked_card.png"></img>
        <img class="card" id="card-4" onclick="openModal('4')" src="resources/locked_card.png"></img>
        <img class="card" id="card-5" onclick="openModal('5')" src="resources/locked_card.png"></img>
        <img class="card" id="card-6" onclick="openModal('6')" src="resources/locked_card.png"></img>
        <div class="empty-card"></div>
        <div class="empty-card"></div>
        <img class="card" id="card-7" onclick="openModal('7')" src="resources/locked_card.png"></img>
        <img class="card" id="card-8" onclick="openModal('8')" src="resources/locked_card.png"></img>
        <img class="card" id="card-9" onclick="openModal('9')" src="resources/locked_card.png"></img>
        <img class="card" id="card-10" onclick="openModal('10')" src="resources/locked_card.png"></img>
        <img class="card" id="card-11" onclick="openModal('11')" src="resources/locked_card.png"></img>
        <img class="card" id="card-12" onclick="openModal('12')" src="resources/locked_card.png"></img>
        <div class="empty-card"></div>
        <div class="empty-card"></div>
        <img class="card" id="card-13" onclick="openModal('13')" src="resources/locked_card.png"></img>
        <img class="card" id="card-14" onclick="openModal('14')" src="resources/locked_card.png"></img>
        <img class="card" id="card-15" onclick="openModal('15')" src="resources/locked_card.png"></img>
        <img class="card" id="card-16" onclick="openModal('16')" src="resources/locked_card.png"></img>
        <img class="card" id="card-17" onclick="openModal('17')" src="resources/locked_card.png"></img>
        <img class="card" id="card-18" onclick="openModal('18')" src="resources/locked_card.png"></img>
        <div class="empty-card"></div>
        <div class="empty-card"></div>
        <img class="card" id="card-19" onclick="openModal('19')" src="resources/locked_card.png"></img>
        <img class="card" id="card-20" onclick="openModal('20')" src="resources/locked_card.png"></img>
        <img class="card" id="card-21" onclick="openModal('21')" src="resources/locked_card.png"></img>
        <img class="card" id="card-22" onclick="openModal('22')" src="resources/locked_card.png"></img>
        <img class="card" id="card-23" onclick="openModal('23')" src="resources/locked_card.png"></img>
        <img class="card" id="card-24" onclick="openModal('24')" src="resources/locked_card.png"></img>
        <img class="card" id="final-card" onclick="openModal('final', kind='final')" src="resources/idle_card.png"></img>
    </div>

    <div id="info" onclick="openModal('info', kind='info')"><i class="bi bi-question-circle"></i></div>

    <!-- ################################################################################################# -->
    <!-- ################################################################################################# -->


    <div id="modal">
        <div id="modal-content">
            <span class="close" onclick="closeModal();"><i class="bi bi-arrow-left"></i></span>
            <div id="modal-content-wrapper">
                <div id="year-header"></div>
                <div id="quote"><div id="quote-block"></div></div>
                <div id="candle-animation-wrapper">
                    <video id="candle-animation" autoplay loop muted playsinline src="resources/Idle.mp4"></video>
                </div>
                <div id="blow-button" onclick="blowCandle();">Souffler</div>
                <div id="lock-timer">Déverouillage de bougie dans <span>...</span></div>
                <div id="extras"></div>
            </div>
        </div>
    </div>


</body>


<script>
    
    // 0 = locked; 1 = unlocked, not blown; 2 = blown
    var db;
    var curr_year = 0;
    var data = [];
    var unlockTimes = [];
    var counter;

    // Create or open the database
    const request = indexedDB.open('db_electron', 1);
    request.onupgradeneeded = function (event) {
        db = event.target.result;
        // Create an object store if it doesn't exist
        if (!db.objectStoreNames.contains('obj_store')) {
            db.createObjectStore('obj_store', { keyPath: 'id' });
        }
    };

    // Once the database is ready
    request.onsuccess = function (event) {
        db = event.target.result;

        const transaction = db.transaction(['obj_store'], 'readonly');
        const store = transaction.objectStore('obj_store');
        const getRequest = store.get(1);

        getRequest.onsuccess = function () {

            // Load the data 
            const result = getRequest.result;
            if (result) {
                data = result.data;
            }
            else {
                data = [];
                for (let i = 0; i < 24; i++) { data.push(0); }
            }
            for (let i = 0; i < 24; i++) { updateCard(i); }

            // Final unlock:
            if (checkIfAllDone()) {
                $("#final-card").show();
                $("#final-card").css("opacity", 1)
            }

            // Set interval that checks when cards get unlocked
            checkUnlockEligibility();
            setInterval(checkUnlockEligibility, 500);

        };

    }

    // Function to save data to database 
    function saveData() {
        const transaction = db.transaction(['obj_store'], 'readwrite');
        const store = transaction.objectStore('obj_store');
        store.put({ id: 1, data: data });
    }

    // ---------------------------------------------------------------------------------------------------------

    function flanflanBlocker(string) {
        let hash = 0;
        if (string.length == 0) return hash;
        for (i = 0; i < string.length; i++) {
            char = string.charCodeAt(i);
            hash = ((hash << 5) - hash) + char;
            hash = hash & hash;
        }
        return hash.toString();
    }
    var pleaseDoNotLook = flanflanBlocker("Non, n'essaie pas de tricher Florian ;)")

    function smuffle(string) {
        return CryptoJS.AES.encrypt(string, pleaseDoNotLook).toString()
    }

    function unsmuffle(string) {
        return CryptoJS.AES.decrypt(string, pleaseDoNotLook).toString(CryptoJS.enc.Utf8)
    }

    // ---------------------------------------------------------------------------------------------------------

    unlockTimes = ['U2FsdGVkX1+wHJw2FLIAhEzP2Nc5UkcX/3TS2BJTVdvVISMEw6iH2LO9PxV0VK6O', 'U2FsdGVkX1/BewmdRWIpo3s3BtJMwpHJvOpmm8uH9h5SHDZ1EEp62akYjNbql4CI', 'U2FsdGVkX1+nEs3MamccooXzUJ68dIZLJMBEkaHAPWCXJ034x3JpneLqvtYEM3K8', 'U2FsdGVkX19TvlH0USCG5d6ZNdyTuccbh/oogLe8YZaYruRd52yhr580XyyynJ5B', 'U2FsdGVkX1++MUlXr78dJ7X+DqUh/IvKpGB0IiuHnZ/QK5OTW7pcK9l36E0nB//T', 'U2FsdGVkX1+cA66W9jbEcMdQgw/ITURAWKKRI255PO5lxE/TbnGFPxWORZyn3Vmr', 'U2FsdGVkX1/avza9heWYg4zCXCqIL+65FnPD5pVsoLxLnUTemObRtm21QEhGXG2S', 'U2FsdGVkX1/iKo1XOmSsqrKK9vAPIH/df2ff8are514N3QZ8AofbZvYeIN4cVHq2', 'U2FsdGVkX1/gaCaxC8xzXWea0sD6YYwgnJmH9O/bvtblJ9p5B3Fas8i/qztC2iR2', 'U2FsdGVkX1+qvX4QV3PSJlm+wg30Sobrbr/AROC1a4sftT945LWWI++7/6Sy8+qA', 'U2FsdGVkX18q9SY9BJ9QZV1hqq0NiAfxdXcB6N8UrHzXAhEgGD1Nf5+ladIBFo8X', 'U2FsdGVkX1+KHDWwsEubfXBdwc+02d9pmcBtZSm71eh9T4IoIU1aYBJkDixJUcwS', 'U2FsdGVkX1+vIxWpye9rtycxh7DYDvqIg0traBFniKZbaBodewIH5x9vNrc8ViQ7', 'U2FsdGVkX1/MdiL5p8zUhyegsuzkCm7hbcMYuC2AKGC+/b6AWLiCw/EDQuu7WA4H', 'U2FsdGVkX18z3iNsnFetIHrRGzlTzJpsC/LQfiFz4l65hsEg5f+eAs9WavPo7Es5', 'U2FsdGVkX19769Fc4l+8RJf+gYFvZlYJ9lTnVcODn4zMWrwZNjX+rZr3SoKffWzc', 'U2FsdGVkX1+b58ogn62Vb7JOvy3dk/drbEb4ExkMtcr+G2Et0v075kJOX42LMnvU', 'U2FsdGVkX1+Wn4xrSEsoE7v265pb3NhpJg5WWzC4lvJSdY3vP6mLi3JVue6yLZoa', 'U2FsdGVkX1+ANh/IjWbUd75pC+LtdC4EJdSSTUmWsvfsTu56D+h6EpYpC0s1IF62', 'U2FsdGVkX19sx3DTrQpgKKp5w7K3H7fFhMBJhFdPquxORbzly0drCThwTbwbpoCy', 'U2FsdGVkX19a8IKfwDxFJgFHKWIrU9p1tVcHaaNNeXgu5nh9SRjfPc4Rx6uVnKdZ', 'U2FsdGVkX18D9OvNHkvrrp/sO5IY8AT+KjWfs9WHr4z86jWYPCgjIhGJqkhFYTOg', 'U2FsdGVkX19k0eGbsriBmwheG4ewLlVGkD+DflLTV05BbvWcj86SmHSEQj72jZfc', 'U2FsdGVkX19Pz3G/CboUzELtHpXtQKtxki340fGrwNT/gvZ8OMjnUYiVLGVM/lPS']
    for (let i = 0; i < 24; i++) {
        unlockTimes[i] = unsmuffle(unlockTimes[i])
    }

    // ---------------------------------------------------------------------------------------------------------

    function formatTimer(ms) {

        const days = Math.floor(ms / 86400000);
        const hours = Math.floor((ms % 86400000) / 3600000);
        const minutes = Math.floor((ms % 3600000) / 60000);
        const seconds = Math.floor((ms % 60000) / 1000);

        const formattedHours = String(hours).padStart(2, '0');
        const formattedMinutes = String(minutes).padStart(2, '0');
        const formattedSeconds = String(seconds).padStart(2, '0');
        const strDays = (days == 1) ? "jour" : "jours";

        return (days > 0) ? `${days} ${strDays} ${formattedHours}:${formattedMinutes}:${formattedSeconds}` : `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
    }

    // ---------------------------------------------------------------------------------------------------------

    function checkUnlockEligibility() {
        for (let i = 0; i < 24; i++) {
            const currentTime = new Date().getTime();
            if (currentTime >= new Date(unlockTimes[i]).getTime()) {
                if (data[i] == 0) { 
                    data[i] = 1; 
                    updateCard(i);
                    saveData();
                    if ((i == curr_year) && ($("#modal").css('display') == "block")) {
                        unlockCandle();
                    }
                }
            }
        }
    }

    function checkIfAllDone() {
        all_done = true;
        for (let i = 0; i < 24; i++) {
            if (data[i] != 2) {
                all_done = false;
                break;
            }
        }
        return all_done
    }

    // ---------------------------------------------------------------------------------------------------------

    encrypted_quotes = [
        {
            "en": "U2FsdGVkX1/etp3U6DShryPFGv4pFS+KRh173sQ/X7bIFAMHm+WGozF/Y5RCaIvtlnwORu4HNZHcsDv1Ftb8enNz3TXm6kYghCOXu7CHrnyq2pZvlkPoKqCP7Q6H23HIIcVPb1Z97BRUII9z5bbFuEEelGsZaQikz2YD634+Lau9EHpx4ZK9wyKddXoWucPEKLzTetH7tN8c3y1y86i/uw==",
            "fr": "U2FsdGVkX18mFXcHaxHEQb9dfB2lIhD5XItcwjgYNrwxUakIvaabD1UqswhwG70a7vrNCrg40TWoNGjjUhEE3qSTPuneGK59Whvu82/shTL8ZFKVNdVvEeZZixK6gSL4LzfJ31aNvoWqKj7jTowk79AtSZrtnffTTcoUcQzBqFebfqEbhQsACybZSIEYQS+lWV1EQCtjeQZ0TNLhB1StogAJat/ee2vgtf5gxBX4B84=",
            "author": "U2FsdGVkX19aW4ALbreL6QiV4/aQLWGo6UM9sbIaDYQ="
        },
        {
            "en": "U2FsdGVkX18iOzY/VRrunQgG397zB76EQLdwvpl/byt/QupZe+ABWz4X49WKExKK8uolGkQiQQbogMpf4cnZMyKp+5DDEbXgTzPe5c/JJW5FUWlgQC0prE/UtDMyPBkzVwsIWMZ0d2G1caujXnRUkj1B0HfkNnu+PbS9W5z2HC4=",
            "fr": "U2FsdGVkX1+B6f/exWQEZFuqpYQG7Efq+4QX+Y/Jhm+wJWfPW6uAgjYqmrebSn8YgvD40ibEkkYgRYsLeBvZjk6/VJdrWiLUnxkAsoJjsBUpAuXlduNyPgl/jILXMTyTq44M6Ck8BeO1rDbFC0VN/A==",
            "author": "U2FsdGVkX1+amiX/sEGVqe2DVSf4lWCUxtDNsXWdBjQ="
        },
        {
            "en": "U2FsdGVkX1/1EqHmEuOb2qoIjI0SR7ZIOdhGGy3JCFAELTJlEh2vU+G+Wjo7t6HwV7IPwwRgjrEFZvteDgTtaJqMOpi7akrOV5EBS0ADRn8=",
            "fr": "U2FsdGVkX18oiYTdMZ62l0Zg25uw5eJlET1WrSPNOKP7pTZCpAEL6r1CcopkGlOF8XKjH1C44iQ/jl6vTjMYoQz6HesNxtLF3FhIHTuwx2Y=",
            "author": "U2FsdGVkX1/u4XUEnVhGuqczl6x5yuZsKQQUOAG1Tgg="
        },
        {
            "en": "U2FsdGVkX1+E8ewzSgRVKqi40CWabgTTbM5Rq8mzP2sGpcGaF69MjSSSkUcv4pWN6txJ6NgUtUqqyGT+PsASPf9XGeOn2USEXl3wa/elG9D5ZvCQFksIo92DJqohj2st",
            "fr": "U2FsdGVkX1/ffsJqQ3B8YBc3nvuqTDnW6srnqr7H1XUDd436hiV9NJysb+ANkxLgwlCaqLXlFKG31nD2HSJ3tMe9deSg5Rn/iFjAaaAe87aKhmhYHufDDEEDTIt68ibpAJGJuxVZ86nBIkvM1WEP98Lgi59ME5Nx+LT8XgNi+m4=",
            "author": "U2FsdGVkX19sw3QEylbToUAXuIbpKLwnU3iGizeOr+o="
        },
        {
            "en": "U2FsdGVkX1+yqeau3ABcBulPBDjjRHSMSFcvEtcUZFarwdrhv0si/TVr7dOoh1GK3kVr2NQh7jTruvefzPFN188EkX1TXRwkA6STeHpGp2qyX8y+jbYkp+UTLkqvcIu2IS8WTEfo9wXYtpstNeKlT/UnL2bwc+FE7x5eR478+FP++jVre1BK52O03+3+F6NN6lFlnKrvCJ0PMynsVrdfhBVfZNiB+gjCIHAJzw3jvSVvR3KSaKSyhA8d/ZuqMCbL5v7drmqP2dSSc/4Yj38sJMZOsKte6cAKrHmNQMvg8vM=",
            "fr": "U2FsdGVkX19BdJ52tvwoTdGvADBNeFvJd8BIVmXmr/zCau/+R1bhKpidfIXkhhqzURbdfpifQyn2x5lKzCa71V8ITsxxbqVTRyfa6+qsAI9nxOGN+WpcMyZiFRmlsrf0hUr61FVavMFFkNcIlbIBQBCuvRL6NkDhJRrVUrCBAe9biuc7e+S7g1IVWlyAeg4Q6AWQzauO+RR2eL2UhjIx2gUhI0ZozI1qE3EmFLDuIVOXoeIO7TuYKgC9qoU/1yspuyBBfYB2fhsKStGUYjZEn4+obS8j1KWoYz7+/4EEZA7wU43RKDjitJST9k0Jftm10Mle80QNuWv1hZoYERfmKQKjj4RGHPcJxMKupNBpw3o=",
            "author": "U2FsdGVkX19IxzgP9TDe0IAFmZFYQlx6Iyr+MN/hUl8="
        },
        {
            "en": "U2FsdGVkX18pVzW4Kmbkh5dRGMQpLgTu9/t8fZAeyDMDPkufn/daRLcp1PIvcPJhfnEJ6/pRlXTrqATWCwN+7h5NlHFM748t68LCGAlvszs=",
            "fr": "U2FsdGVkX18odStXc9677cFP+hQspMp4kWCs+HiEDj4OpzABjz3yfeft6/TCkS6gVEo3CqVqu0AhYOdnn3J5YIT67Sa8j0f5s/C/WJ0iPPg=",
            "author": "U2FsdGVkX1+LvZioWNrTRdnPO0wieWI7ognhBi2H6/I="
        },
        {
            "en": "U2FsdGVkX1+Fask6yrAOgYH+f9ZxcZE+4tA5RMbIP9YDDfRMiA+H8t5Ox7/fOP6/ChujdgrW2bmolP5GqehK+qlG2DaZPMzOdjscsYJ8v3es0gRhA6oBq3c2SYmpddYTBrDtSXXRCve3TaaxsgcOFpkB83NldvNJEAbv02Y5ovU=",
            "fr": "U2FsdGVkX19dAVxLF4Ci2fUM2TYo2cdq1zdAswQSTTCfx6XHFWLdb4WvnUwK3LIaxY0vdVF7SiBPcRE3hX2fLV/CtCN01An0D65ZPUwZY69FSiC5ho1Dv9K/2/U/eXpon/uxWIQMAozaabm2gjZND3XhE3F/VXYckWtTWqfbzls8ctie27ooHmTUyPFS0VwW",
            "author": "U2FsdGVkX1/FF40IIwQjLoeW2PVid0AdmS2QNg3P5aeSKUqNL0N12XM/hSlog0Uw"
        },
        {
            "en": "U2FsdGVkX1+W4BkV/nOHByPFrcwTidkFVj6uyapyVxxl2cYoiEZkecW1XIPWCgJEjs2xVKz17F0QDkvIKbVu25RzsDFdRHKVHazqoZg6Gmk=",
            "fr": "U2FsdGVkX19w4wJsqz19e45IMkz+07S2OXUCDgr9AkZTla+amRSzqmqxfWa2+rnKbsir0aZ9bFNiOf/fNbRRxT3zBRv+aeqy8FeLYea3HtJDQxQRxMDItuk15iIwq53z",
            "author": "U2FsdGVkX1++QIoljUda9GE04kW5XNQ1IH8GS9TV3VY="
        },
        {
            "en": "U2FsdGVkX1/bEauS1priznoaAc7JuI0gmQ2N8U+GUjwxQdKsxIQMlxIrrlX6Cq4p4qEKgCw+Lc7cnw6mMolCKsnQRU2aPAq0Z7EnL29SYuAzQAfYqSrKz3AW5gmf/+ejSs/b23YfxK5Eo70PFLNCIgbGdvmUvft2I5HNvNVrSYA=",
            "fr": "U2FsdGVkX19TyUfzUH8C5ttUq1niJnAS0wrgm5zj+Jy52xerHOFMvQ5nrkJZ3NI7B7VtSx42cxpVbhHhX1KRl1hJ9rrcxwUexOXEs5Bkh+XIiiPoKeOkE+XjF+gKFSD6iPnxcPZNssQTjoJx3eTl9HvYefBAwqs4CXRxMfQaVJ9SKl0AuKhj5YWJlACCiiFZ",
            "author": "U2FsdGVkX18dNppuNelO8HsBwAyR58VX+Z6vqkOj0IY="
        },
        {
            "en": "U2FsdGVkX192AM1pD8lPoN5BuzwBa8KSqPBAOBr2NoDZCoZtHKn866cnwgbydJi/f+mTrmDrt1U1tWxkkX+ymp2U1vd2FbtCja7iAUo0gNc=",
            "fr": "U2FsdGVkX19F9LFR8XJO+hZlKIA8E4NRvjewuSVBUWyRphvGndUH9fuWpvFof50iNJ356q0kW/AyCeZ1N73GtCL/XY/yafvYWzIRaHSrTrA=",
            "author": "U2FsdGVkX18IpXZhpNLeFXyQ0f0AyJPeCld8rk2HfvM="
        },
        {
            "en": "U2FsdGVkX19TbbGhVDdLdAdAC8pdbOVBGSSiOTZcl3r046tWeR7FwXXVUs7Pcno282ltv8jcK1i0UGoYlz9VDPwIhIxufN4rRW766d7lpd2gY6KD3bLFf7l93g2cD2c1EFggfWOBcLS2MGIFc1zQ22FMESZX0Xpe4hqNBNqDFjroVh6ees9AX2CJsMpATRA2AMa2ztZUQeq4867moVF9VsEbQczcs9dH4938syXtMMhkvKOQYe/g1JUxWMpQBL4x6fqn168T8Pf5ggM04c4dfIFa/5FngBLMjX6Jkk6ig/M=",
            "fr": "U2FsdGVkX1/EYL1EEbN+/tWdT8G258ezt7H7Nr+Ls7yOefSlwan4VRMOLZNyNnm/3ckkczXwCnZ2adpL9h7izdg4hcjGjEbC8kAMp3GjktB+jNZzJq/zgEe+uA7ckCTTatp9mjkSW78O3hogs3cq2gurBmZKsa0doJPF1YOgP+JvizgZhEJcG9G6ogaWCbrM8PGI7yNgKUYhT/QTZr1L3LsTSuioAEIaDqIWzGXhmJTY4tgsowVSuANNlSH3pgmoZNttN4Ja+QLsRzugEWrD64VJQgCMCh5JLEQkgYOcNB+pyRoz18l6JDJQevWke7JiH79MkCI+F0y1bRL+o0YvzA==",
            "author": "U2FsdGVkX1/TkZdMpYM1ENvtOEiXO9uBQHErXkt9m00="
        },
        {
            "en": "U2FsdGVkX1/ZwUoWfQdQOKeQhc5ZtqtfLGea8rRE6tlxK7AIP/ekaVUixDZO0LK1QXd3knMZI0CaTR4gm1KQA80Px+E74JEHqNq0zZKKhawKxNMpO9IqFKQedcQ40QY1zIFdEdndvuWr8iTFZNfjBcvwgaqE+Xfbhd6kdfbpLKGMwUmo3AQjcS9HbG4UMtM3aN8FRPoKZqLOn2G+arUsR4yEodXbW8i1u/C8UtPrA0qaEUP0ZZ4sFJxpO9JssCEfGfTeuRmnqW/tl+H2L7uoHnKFi559B7+kkR9Per+QKt8dpXoeQC+STp3nBBmhLG38Fjr+/zcWejlsbk9M8hE+xA==",
            "fr": "U2FsdGVkX1+aJgdTGnJFLsgI9te+7OPlI+UN7yxrWKM+7tKtgQquZ40ueRZsE75wxFqOSH+3eeJoiiv95pEDAPRxr0CVFPomL7HikP2LalTdyFwwupFkCbYxQiHoQdyK54TlfOH6Z7bfjmn9cG32uRkRVHoHiMIV5h697W7PDmIoMnb0fUSqG53lhih8tE9OFPibwqLcXhfiW5evCoozAmhXIsbBvfE9ZPHfqvgbznaACz4l/bAKpFC1HJ8RlvlNmC7FrTfjcmhiB2h2F6ByoyQpWt7s3rzDdc6KsP7vzCXYmhosOYShilkzynSMzJ22NWw++QbZf59JODIQ7JM5/HT8iCQhwEjVnQZ6Cftj73k=",
            "author": "U2FsdGVkX18wsim7+IdlxlFDi3aatpVOPnEmBEefv7c="
        },
        {
            "en": "U2FsdGVkX18i3yRgIsnLwIY0WxD4HSD/p5RZ9UToG5Jz9VpxiLaaeV+WBNRVTHqk0aF5MS19LYJH3IcTS0XTB7VorZ+AktKKUEAHnODJlBeiOzQmIUDI+vfsnf+gPV21",
            "fr": "U2FsdGVkX18ZwDsGeHk9CqxieFiotcoTwdSrCyS27kyRgiRN6PcMq9H3uXdYaOVvLjkvVvUthUK9jIMf7NTLOtUnnDM6utquE4W0kjlyBC8gxbqOn5q5Zi1A2Sz+Ypf//DzUtb2c56cj5Fx7V8slFw==",
            "author": "U2FsdGVkX1+tC4+lXXmaiFBfHYaTVATVILnNhEMcTKY="
        },
        {
            "en": "U2FsdGVkX193AhheSm54mWwVLRDRq+ytMdJaUoQ2Hw61FC4Yvf8RnKjtWcw19wEFLaKcqrvW7sLRukDJbeafS76kY5wMN7uUcw16wsAnilo=",
            "fr": "U2FsdGVkX1+Xg+B4CHbEBTByHi9iAmLu4zsHlaCtQpIVJ5Ox6D1N9Z/UsyXw4eQ5nbYQxgFPpslhrxbkuNmmqEg8+5jDJ2mcLxYtCMR0oI0=",
            "author": "U2FsdGVkX1+Y7O+/5zFQwQ91cHFhzpM5htZyYD+jaJ0="
        },
        {
            "en": "U2FsdGVkX1+oWxKJB/yMH+23Afbq9L1d9aL8LbjzKF4j6K0fkZJyg5pC+0SPOf4TFlQSEaXAYCDwwnDYLd1aGqC0AQMtlskVNPhPFZd65sOseZXEScb6USW56Y2Iv3t8VRzUZpU8/uunGJzuXe2gzX4aswYmeQVfpDbKv1hSXUtmkxidPN9KHmI8OiLJdec91lpMDwYig9ym6XbuUVgOLg==",
            "fr": "U2FsdGVkX18N48RjRnibX/2AQ8yccn3/bWAmjYN3sMYalTJLOALhztWZ7wmeQHFFbKA7B4tQtRhnD/+WRhqavPIpxQMJbkr1XX7YMMmcFkLGMW22YOwDaD9zkyj381ELAUwWkHAuNTLkD1QfIK8mLHnwwRyjKQCUgYAKvydtzefQFps2WSZHyASLi211QKGGlFn4vdnVa94POFiZ/erqeQ==",
            "author": "U2FsdGVkX1/WrXNCrQFCcbxMMGCP95eghGuEfdlTRwY="
        },
        {
            "en": "U2FsdGVkX1+3V4W70z3qyB6/XmNha5ZKdwj1/v9VUGY7oS20MqgVx1meX+7dcN/9w4cxzQjF3TU+Nnar3HbAvj4ABFWCJwxTVB8Yvp1jFl9q/pE3qC0ak45hNGhoxa4KQ6tNY5K+sc7fX1ykPCWwlajFPZW+og3W7XuhdtIo1jOGDpKJzI/ZJ+yJMrRD826S5Al2nZFNTaJ1bZwKOsoezSulvl4xMpVbCm/fArZuJPc5srjKPNx83AUjNZA6W6FUviRaUw/P1HQWLcneN3w5/+XmDXa9V7kkuH2P6zjZPJpldDN4DgLDuERi8LXxdq3e",
            "fr": "U2FsdGVkX1+/P4fXiJRmSQyant4w4JaQxp4d8dum0j6DafdtCyz0O0lFWRdtPihNrUYtcr3HJAo6TKDHcHGVnj5GsbccjkIu/jXMCR/tEuVD67zBZOIvSAiaZIX6CphtZ25SghNuNnzmq6DNd2vJGS9YcIGwAoRkKRLC1G2OzwykwuGvvSL/YQMnFig6u4cGgo7/HcEgJT8Xq4MWqnzvVEaCTOG94tuSn/UlYVH9ylI3uv8o51Xwq/J0Pe2+b6ci6ao4pH613fN7YWWMqgLIOc59WZdhRsmJdydRS/aLkoARB+HTdNonxhmBWrOx+Qn6512dDu9fdcXHMCzmr7E2Ig==",
            "author": "U2FsdGVkX18/tJw3rcCzq3h+eG0mKUoZ7YIELvUPeNs="
        },
        {
            "en": "U2FsdGVkX18Fd/0okBC/NYdaIknupNEq0i7UD0K3zolFIAqWD7kmSfYnwI0x+zdQXy64OYdM1eRZRQXCUrz2bw==",
            "fr": "U2FsdGVkX18dCpqfVvVOgQ78lTN8uDpZAa0hBDbngMBiYUnav7qPQHRycdbV9cF4Le7FNOAEYAxDeKYAKTdz1XskCbr9CrhsmI9WHxVAB8o=",
            "author": "U2FsdGVkX1/3ij1bHqltX19QmGDsL88oRSuG6ynlMts="
        },
        {
            "en": "U2FsdGVkX1+qXe/wRpx6MSDNeTtoGGmSL9OGB6ufI50SE/b6I0T1w0bGhVuc+BgCetlRyZNrJVfMbloGf/5p2bh4Dx44J7i0ZLrdRJWV/K7Gb8byuvEpx23pouEa6NFlXzWfa+wNkizG4T2MhZbbdgVqBqzRaDbkCZUCGwxQxeSab+NL9RblAhziAgYpJHFHg2Mbia8/GHhZqk9nFIoV2g==",
            "fr": "U2FsdGVkX19KowdISFQvmMIkQ2I7G0bnF+1+9wjfX7zKCLdHC+Bltqckn2t16eCVdw+0yxd6sONdW/g1m0l1KlIlWJIlBxvgEGJe5ihxvQy03XET5YtGUyBEqjbzkWKOEUdVbpukZ2UefiyEAOomKBf+waqxjIg1g3dhvAPqxpfiyrDMhVLRSMR2iJfSAGPnJJrRmqrBT+Uq/pYaLa7NUORD2N3RSt1dJiE7XVGlv2U=",
            "author": "U2FsdGVkX1+zYspGRvwEUi+HFhtiX+u14wm6e0E/Zts="
        },
        {
            "en": "U2FsdGVkX1/i2Fp+D1uMhitF5DiOh03OyU27GIHjCaHJtMANbC+VfU4A6D7tfCOUFev/zSYbbE4CBD4ioDyhWwH1otcXxp318KlvKRJ19wxB9OdDjb463tk7RwRnu6PqfGl33vSD3U5FZn8OmuKgsgt1aeigrhb5fchNwqpsDerEKgHTYs0jEMpttYnHXu1ox4t5YOs5Wk5UmlWdhCSDbIrg9gXCCDU4IhEuFTi00AmoRbA2AaENjU6om1cUQPdS",
            "fr": "U2FsdGVkX19UCiNLILNl1lcKyqtfXRKoe0nXZAmsU5vl9qRGW8t/rFT9cv9ZwvK2hrMmLi3o+NbuBoyHQcEoSMdt/IMBPcHNPAJC9z33KtOChS5WX9MdhJ0ciKYsWjFPiZGUF7mNiPPo3E1OY3ILMAXWPZaplUgGSGSswXyJp0auCimVWPabA+eQuh4pkQRXWrj1G9HpeGCw2qgJnZglrO/EMKMvsan3QqJlkBiC7D6T3H/s/f/WQt/QqDwpbwzXQ9iSMDHchrnW4WvIwobY6Jxxfth+6kdDTmXocXdtrbqOF4RP1bM7sTIeMw6WVHOB",
            "author": "U2FsdGVkX19m/e2n4kguqwg9lz4ZZS6L13ZJOiTXLVo="
        },
        {
            "en": "U2FsdGVkX18ffr2T4EHGVTSQuGU+kxrw6Evchzi+lrQxAaJ2wbKBHoEkZrtS4Vs4ZVmR+XyEIMdg/npdulE8QrN5YsUB0Gy0/6DOzJrBVwI=",
            "fr": "U2FsdGVkX19TadjTTpr2KUgcvH9JNdbd8OAUNQR8YZ3M5WyFqTC8on444zEXf4LS/KYPSmA7CTSmTqEFRnKj7earDjVCPh0LVPV9FdBtBOI=",
            "author": "U2FsdGVkX182rltYUDw9SVPonjqU38Nk5VwCYjr2FKE="
        },
        {
            "en": "U2FsdGVkX1+baanmUPbn6fxhhENEePkuxbZGGqIyc1cSBmasXsE//pstaDOkx+CPT7SF9niabXXEYqhjnBiLKthINQ6mAaW1sWlSbLXdAYLkAUu6WKO8UGzNDlqM7WwkCq0Zt8BiqOdmCgoibonsxsal8zSYk47EAsgHmEITbSQZvot0IR90bYT9uY6/AMCnwoK7O2jQRyNweizsubZJZi7eXSypi/2w3D2S/0fUD4s=",
            "fr": "U2FsdGVkX1+hJ+beMMnGHd7QgynmS+sFQ8gShQl/2Y+39W61hGVvI9dL55HgaeKBVLgj9B+JTdkGXtt12AsojRM7kT4whHeWs4v2UUgfnYHZUh22pa0LmK38YVIZ5byLqBdHiEcg1tqabI8Aytm8eWNIu1jvuFx0ZLvRUujN9lFSexigOXMiowe3WAjv1ufKJJwE298zsWAiBwi6rC+xNwcCRProspYwFlctimqXcfE=",
            "author": "U2FsdGVkX19Zu0VxnuzeR3LeYUfxByvjq0oCJm5F0x4="
        },
        {
            "en": "U2FsdGVkX18x6QnFqbOOaON6D6fjWGQtDJuV5cGkWqUuRcwilYMfdYH33rQB1Tn3aX5O65yItfB1SI2+bE9FlJg1jwnERExrYN7ox/UT2jZZcRUsQhdoIRAOILNpqUFJ",
            "fr": "U2FsdGVkX19rhMhj3wY6ZFFoCzm1364ns/lZdEIBa1In1Bh9G4Co2Y2ZZOpIBnvt7Q1e9XK9vRHOo/xY2I/vHZN/EnpR6rw53FswQfy0uOgHXaPDVUJtglN2fvAODGBGc1Ovaytv5Qh74wqxQ7OBfg==",
            "author": "U2FsdGVkX1/GAB3EQ/MuKBIVxYAda7zVRg/LV4w7mlHhR8wn2fB1Lm1iWDaoKGKm"
        },
        {
            "en": "U2FsdGVkX18Z/2o4Z0nYDBm9n77J97dzI8H1KvRmh59AaADNouTxgqwhvYv+zQAzuC98btROYzMPhhh1S0X1ikT90W8ZGVE4RHPDwig8LPH88qAS8HePHd25Vl8UW3heYlVwDxj7DfxsFyzK0E2jBw==",
            "fr": "U2FsdGVkX18ugwQtS4M1SEu3zCiFJ0LEwA9hkwPt2cLZYWy9vRF8iq7fP2xFUeP2I0dg4jw9/EDDrlJNlDxM5hUhxxx8MBZkIUlxxeXDdWB1oU43lTdzzxAwxq1yvyYAGUF6GCu1BN+st5xhDBN4p8sCjK1h3HICtn/23e/h82k=",
            "author": "U2FsdGVkX19cVwg/RVmR4A0SsTj5J3+hKQ7jEg2zUKA="
        },
        {
            "en": "U2FsdGVkX19pxecv/gMEOAOP2bJxB2LrurYmII2gb/eBRLLhmNLu6CJjTezEw8EarShKxPE3etCq0nDE+VWPtHoTALTCr5XvAOfYrPJPF2o=",
            "fr": "U2FsdGVkX18Yc0JbP9LZUYYEUW0Lgu0UHq57gHbu/F+083N23gGDqNg6eNwX0fzC2uQWRhUE4Jmhk6KVGa1PXsOXxAHTOruLU1lAalzYV5k=",
            "author": "U2FsdGVkX1/tsilq/bPyFknpiE9Nor5/BTW9Ik2NOiw="
        }
    ]

    // ---------------------------------------------------------------------------------------------------------

    function updateCard(year) {
        let status = data[year]
        let resource_name;
        if (status == 0) { resource_name = "locked_card"; }
        else if (status == 1) { resource_name = "idle_card"; }
        else if (status == 2) { resource_name = "blown_card"; }
        $("#card-" + (year+1)).attr("src", "resources/" + resource_name + ".png")
    }

    // ---------------------------------------------------------------------------------------------------------

    function displayLockTime(year) {
        const currentTime = new Date().getTime();
        remainingTime = (new Date(unlockTimes[year]).getTime() - currentTime)
        $('#lock-timer>span').html(formatTimer(remainingTime))
    }

    function openModal(year, kind="quote") {

        if (kind == "quote") {

            curr_year = parseInt(year)-1;

            // Determine quote
            en = unsmuffle(encrypted_quotes[curr_year]["en"])
            fr = unsmuffle(encrypted_quotes[curr_year]["fr"])
            author = unsmuffle(encrypted_quotes[curr_year]["author"])

            // Format quote
            if (author == "") {
                quote_html = "<div>" + en.replaceAll("\n", "<br>") + "<br><br>" + fr.replaceAll("\n", "<br>") 
            }
            else {
                quote_html = "<div>" + en.replaceAll("\n", "<br>") + "<br><br>" + fr.replaceAll("\n", "<br>") + "<br><br>" + "<div class='author'> - " + author + "</div>"
            }

            console.log(year)

            // Populate the modal popup with the right content
            $("#year-header").html("Année " + year)
            $("#quote-block").html(quote_html)

            // Reset stuff
            $('#candle-animation').remove()
            $('#candle-animation-2').remove()
            $('#candle-animation-wrapper').removeClass("shrunk");
            $('#candle-animation-wrapper').css("transition", "height 2s ease-in-out")
            $("#quote").css("transition", "height 2s ease-in-out");
            $('#candle-animation-wrapper').show()
            $("#quote").show()
            $("#extras").hide()

            
            // Display the right elements depending on status
            if (data[curr_year] == 0) {

                const video = $('<video>', {
                    id: 'candle-animation',
                    src: 'resources/Locked.mp4',
                    autoplay: true,
                    loop: true,
                    muted: true,
                    playsinline: true,
                    controls: false,
                });
                $('#candle-animation-wrapper').append(video);
                video.on('loadeddata', showModal)
                
                $("#quote").css("height", 0);
                $('#blow-button').hide();
                $('#lock-timer').show();

                displayLockTime(curr_year);
                counter = setInterval(() => {displayLockTime(curr_year);}, 1000)

            }
            else if (data[curr_year] == 1) {
                
                const video = $('<video>', {
                    id: 'candle-animation',
                    src: 'resources/Idle.mp4',
                    autoplay: true,
                    loop: true,
                    muted: true,
                    playsinline: true,
                    controls: false,
                });
                $('#candle-animation-wrapper').append(video);
                video.on('loadeddata', showModal)

                $("#quote").css("height", 0);
                $('#blow-button').show();
                $('#lock-timer').hide();

            }
            else if (data[curr_year] == 2) {

                const video = $('<video>', {
                    id: 'candle-animation',
                    src: 'resources/Blow.mp4',
                    autoplay: false,
                    loop: false,
                    muted: true,
                    playsinline: true,
                    controls: false,
                });
                $('#candle-animation-wrapper').append(video);
                video.on('loadeddata', function() {
                    this.currentTime = this.duration;
                    showModal();
                });

                $('#blow-button').hide();
                $('#lock-timer').hide();

            }

            // Proceed once video has been loaded
            function showModal() {
                
                // Show the modal popup
                $("#modal-content").addClass("modal-anim-up");
                $("#modal").css('display', 'block');

                // Move video down to show quote
                if (data[curr_year] == 2) {
                    $("#quote").css("transition", "none");
                    $('#candle-animation-wrapper').css("transition", "none")
                    $("#quote").css("height", "32vh"); //$("#quote-block").outerHeight(true));
                    $('#candle-animation-wrapper').addClass("shrunk");
                }

                window.history.pushState("forward", null, "");

            }

        }
        else {

            $('#candle-animation-wrapper').hide()
            $("#quote").hide()
            $('#blow-button').hide();
            $('#lock-timer').hide();

            if (kind == "info") {

                $("#year-header").html("Qu'est-ce que c'est que<br>cette carabistouille?")
                $("#extras").css("text-align", "left")
                $("#extras").html("<br><br> \
                    Cher Florian, <br><br> \
                    Au cours de mes lectures, j'ai pour habitude de prendre note des citations qui me percutent particulièrement. \
                    Les mots bien choisis sont une rarité et ont un pouvoir qui m'est précieux. <br><br> \
                    Cette année pour ton anniversaire, au lieu de chercher quelque chose à t'offrir, j'ai opté pour quelque chose à te partager. \
                    De là est venue l'idée de cette appli comme médium de partage insolite. <br><br> \
                    Je conçois que l'idée soit particulièrement saugrenue, mais j'espère tout de même que tu tireras quelque chose de cette expérience. <br><br> \
                    Bien amicalement et chaudement, <br> \
                    Marcus. <br><br> \
                    - 23 Janvier 2025 \
                ")
                $("#extras").show()

                // Show the modal popup
                $("#modal-content").addClass("modal-anim-up");
                $("#modal").css('display', 'block');
                window.history.pushState("forward", null, "");

            }
            else if (kind == "final") {

                $("#year-header").html("Cette année")
                $('#candle-animation-wrapper').show()
                $("#extras").css("text-align", "center")
                $("#extras").html(" \
                    La flamme continue à brûler. Qu'en sera-t-il ? <br><br> <span class='white-text'> :. . | :.:. . ... ... . | .::: .: :: .: .. ... | :.. . | :.:. .:. . ..: ... . .:. .:.:.: | | : .: :. : | ::.: ..: . | : ..: | :. .::::. . ... | .::. .: ... | ... .: : .. ... ..:. .: .. : ::..:: | .. .:.. | : . | .:. . ... : . | ::.: ..: . .:.. ::.: ..: . | :.:. .... ::: ... . | .: | :.. . :.:. ::: ..: ...: .:. .. .:. .:.:.: | | :.. .. ... :.:. . .:. :. . | :... .. . :. | .:.. .::::. ::: .:. .. ::. .. :. . | :.. . | : . ... | .::. . :. ... . . ... .:.:.: | : ..: | ... .: .. ... | :... .. . :. | ::.: ..: . | .:.. .::::. . ... .::. .:. .. : | . ... : | ..: :. | : . .:. .:. .: .. :. | :... .. . :. | .::. .:.. ..: ... | .: .:. :.. ..: | ::.: ..: .::::. ::: :. | :. . | .:.. .::::. .. :: .: ::. .. :. . .:.:.: | | :. .::::. ::: ..: :... .:.. .. . | .::. .: ... ::..:: | .. .:.. | : .::::. .: : : . :. :.. | .: ...: . :.:. | ::. .:. .: :. :.. | .::. .:.. .: .. ... .. .:. .:.:.: </span> \
                ")
                $("#extras").show()

            }

            // Show the modal popup
            $("#modal-content").addClass("modal-anim-up");
            $("#modal").css('display', 'block');
            window.history.pushState("forward", null, "");
            
        }
        
    }

    // ---------------------------------------------------------------------------------------------------------

    function closeModal() {
        clearInterval(counter);
        window.history.back();
    }

    function hideModal() {
        $("#modal-content").removeClass("modal-anim-up");
        $("#modal").css('display', 'none');
    }

    $(window).on("popstate", function () {
        hideModal();
    });

    window.onclick = function (event) {
        if (event.target == document.getElementById("modal")) {
            closeModal();
        }
    }

    // ---------------------------------------------------------------------------------------------------------

    function blowCandle() {

        // Create the new video tag
        const newVideo = $('<video>', {
            id: 'candle-animation-2',
            src: 'resources/Blow.mp4',
            autoplay: true,
            controls: false,
            style: 'display: none;', // Initially hide the new video
        });
        $('#candle-animation-wrapper').append(newVideo);

        // Wait for the new video to be ready before hiding the old video and showing the new one
        newVideo.on('loadeddata', function () {
            $('#candle-animation').hide();
            newVideo.show();
        });
        
        // Hide button
        $("#blow-button").hide();

        // When the new video is over, display the quote, store the new state
        newVideo.on('ended', function () {
            if ($("#modal").css('display') == "block") {
                $("#quote").css("height", "32vh"); //$("#quote-block").outerHeight(true));
                $('#candle-animation-wrapper').addClass("shrunk");
                data[curr_year] = 2
                updateCard(curr_year);
                saveData();
            }

            // Final unlock:
            if (checkIfAllDone()) {
                $("#final-card").show();
                $("#final-card").css("opacity", 1)
            }

        });
        
    }

    // ---------------------------------------------------------------------------------------------------------

    function unlockCandle() {

        // Create the new video tag
        const newVideo = $('<video>', {
            id: 'candle-animation-2',
            src: 'resources/Idle.mp4',
            autoplay: true,
            loop: true,
            controls: false,
            style: 'display: none;', // Initially hide the new video
        });
        $('#candle-animation-wrapper').append(newVideo);

        // Wait for the new video to be ready before hiding the old video and showing the new one
        newVideo.on('loadeddata', function () {
            $('#candle-animation').hide();
            newVideo.show();
        });

        // Show/hide buttons
        $('#lock-timer').hide();
        $("#blow-button").show();

    }

</script>

</html>