hawks = {};
hawks.rollout = {};
hawks.rollout.elements = [];
hawks.rollout.init = function (element) {
    console.log('Countdown started');
    let countdownParent = element;
    let sep = document.createElement('div');
    sep.className = 'item seperator';
    sep.innerHTML = '<div class="value">:</div>';
    let sep1 = sep.cloneNode(true);

    hawks.rollout.elements['countdown'] = element;

    //Day
    hawks.rollout.elements['days'] = document.createElement('div');
    hawks.rollout.elements['days'].className = 'item';
    hawks.rollout.elements['days'].innerHTML = '<div class="value">10</div><div class="name">Tage</div>';

    countdownParent.appendChild(hawks.rollout.elements['days']);
    countdownParent.appendChild(sep);

    //hours
    hawks.rollout.elements['hours'] = document.createElement('div');
    hawks.rollout.elements['hours'].className = 'item';
    hawks.rollout.elements['hours'].innerHTML = '<div class="value">10</div><div class="name">Stunden</div>';

    countdownParent.appendChild(hawks.rollout.elements['hours']);
    countdownParent.appendChild(sep1);

    //minutes
    hawks.rollout.elements['minutes'] = document.createElement('div');
    hawks.rollout.elements['minutes'].className = 'item';
    hawks.rollout.elements['minutes'].innerHTML = '<div class="value">10</div><div class="progressbar_container"><div class="progressbar"></div></div><div class="name">Minuten</div>';

    countdownParent.appendChild(hawks.rollout.elements['minutes']);

    //Start Intervall
    hawks.rollout.intervalfunction();
    hawks.rollout.interval = setInterval(hawks.rollout.intervalfunction, 1000);
};

hawks.rollout.date = new Date(1714755600000);
hawks.rollout.intervalfunction = function () {
    //source:
    //https://www.w3schools.com/howto/howto_js_countdown.asp

    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and the countdown date
    var distance = hawks.rollout.date - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Display the result in the element with id="demo"
    hawks.rollout.elements['days'].getElementsByClassName('value')[0].innerText = days.toString().padStart(2, '0');
    hawks.rollout.elements['hours'].getElementsByClassName('value')[0].innerText = hours.toString().padStart(2, '0');
    hawks.rollout.elements['minutes'].getElementsByClassName('value')[0].innerText = minutes.toString().padStart(2, '0');
    hawks.rollout.elements['minutes'].getElementsByClassName('progressbar')[0].style.width = (seconds / 60) * 100 + "%";

    // If the countdown is finished, write some text
    if (distance < 0) {
        clearInterval(hawks.rollout.interval);
        hawks.rollout.elements['countdown'].parentElement.parentElement.innerHTML = '';
    }
};