// source : https://stackoverflow.com/questions/68732160/make-a-div-bigger-and-wider-while-scrolling
var cardSizes = [];
window.onresize = function () {
    cardSizes = [];
    for (var i = 0; i < document.getElementsByClassName("container").length; i++) {
        var cardElem = document.getElementById("card" + i);
        var cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
        cardSizes.push(cardSize);
    }
};
function getSize(curbID, yValue) {
    var factor = 2 / 5; // difference between each curve
    return (-Math.abs(yValue - curbID * factor) + 1) / 2 + Math.abs((-Math.abs(yValue - curbID * factor) + 1) / 2);
}
function setupPage() {
    var elements = document.getElementsByClassName("container");
    for (var i = 0; i < elements.length; i++) {
        elements[i].id = "card" + i;
    }
}
function changeWidth() {
    // Variables
    var speedFactor = 1 / 6;
    var nb_div = document.getElementsByClassName("container").length;
    var offset = 2.5 / speedFactor; // this is the number of false data-points added at the end
    // Elements
    var timeLineElm = document.getElementById("timeline");
    var startTimeElm = document.getElementById("startTime");
    var spacer1 = document.getElementById("spacer1");
    var projetPerso = document.getElementById("projetPerso");
    // Positions
    var startTimeBoxSize = startTimeElm.getBoundingClientRect();
    var ymin = startTimeBoxSize.top + window.scrollY;
    var ymax = document.getElementById("card".concat(nb_div - 1)).getBoundingClientRect().bottom + window.scrollY;
    // todo: change the height of the timeline to value depending on the screen size
    timeLineElm.style.height = "".concat(nb_div * 50, "px");
    // get each maximum card size
    for (var i = 0; i < nb_div; i++) {
        var cardElem = document.getElementById("card" + i);
        var cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
        cardSizes.push(cardSize);
    }
    // Initial scaling of all cards
    for (var i = 0; i < nb_div; i++) {
        var cardElem = document.getElementById("card" + i);
        var s = getSize(i, 0);
        cardElem.style.transform = "scale(".concat(s, ")");
        //let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
        cardElem.style.height = "".concat(cardSizes[i] * s, "px");
    }
    // action to take whenever we go above the timeline or under
    function all() {
        startTimeElm.style.position = "relative";
        timeLineElm.style.position = "relative";
        startTimeElm.style.top = "";
        timeLineElm.style.top = "";
        projetPerso.style.top = "";
        projetPerso.style.position = "relative";
    }
    // action to take whenever we go above the timeline
    function backToTop() {
        spacer1.style.height = "0px";
    }
    // action to take whenever we go under the timeline
    function under() {
        if (spacer1.style.height.replace("px", "") < "100") {
            spacer1.style.height = -spacer1.getBoundingClientRect().bottom + "px";
        }
    }
    function changeWidthParam() {
        var scrollVal = (window.scrollY - ymin) / (ymax - ymin) * nb_div;
        if (window.scrollY > ymin && scrollVal < nb_div + offset) {
            if (timeLineElm.style.position !== "fixed") { // apply once
                startTimeElm.style.position = "fixed";
                startTimeElm.style.right = "0%";
                startTimeElm.style.left = "0%";
                startTimeElm.style.top = 0 + "px";
                timeLineElm.style.position = "fixed";
                timeLineElm.style.right = "0%";
                timeLineElm.style.left = "0%";
                timeLineElm.style.top = startTimeElm.getBoundingClientRect().bottom + 20 + "px";
                projetPerso.style.position = "fixed";
                projetPerso.style.top = timeLineElm.getBoundingClientRect().bottom + 'px';
                projetPerso.style.right = "0%";
                projetPerso.style.left = "0%";
            }
            for (var i = 0; i < nb_div; i++) {
                var cardElem = document.getElementById("card" + i);
                var s = getSize(i, scrollVal * speedFactor); // scrollval / 4 is used to slow down the movement
                console.log("scale " + i + " : " + s);
                cardElem.style.display = s < 0.01 ? "none" : "";
                cardElem.style.transform = "scale(".concat(s, ")");
                cardElem.style.height = "".concat(cardSizes[i] * s, "px");
            }
        }
        else {
            all();
            if (scrollVal < 2) {
                backToTop();
            }
            else {
                under();
            }
        }
    }
    return changeWidthParam;
}
setupPage();
var f = changeWidth();
window.addEventListener('scroll', function () {
    requestAnimationFrame(f);
}, false);