// source : https://stackoverflow.com/questions/68732160/make-a-div-bigger-and-wider-while-scrolling

function getSize(curbID: number, yValue: number): number{
    let 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(){
    let elements = document.getElementsByClassName("container");
    for (let i = 0; i<elements.length; i++){
        elements[i].id = "card" + i;
    }
}

function changeWidth()
{
    // Variables
    let speedFactor = 1/6;
    let nb_div = document.getElementsByClassName("container").length;
    let offset = 2.5/speedFactor; // this is the number of false data-points added at the end

    // Elements
    let timeLineElm = document.getElementById("timeline");
    let startTimeElm = document.getElementById("startTime");
    let spacer1 = document.getElementById("spacer1");
    let projetPerso = document.getElementById("projetPerso");


    // Positions
    let startTimeBoxSize = startTimeElm.getBoundingClientRect()
    let ymin = startTimeBoxSize.top + window.scrollY;
    let ymax = document.getElementById(`card${nb_div-1}`).getBoundingClientRect().bottom + window.scrollY;


    // todo: change the height of the timeline to value depending on the screen size
    timeLineElm.style.height = `${nb_div*50}px`;

    // get each maximum card size
    let cardSizes: number[] = []
    for (let i = 0; i<nb_div; i++){
        let cardElem = document.getElementById("card"+i);
        let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
        cardSizes.push(cardSize);
    }


    // Initial scaling of all cards
    for (let i = 0; i<nb_div; i++){
        let cardElem = document.getElementById("card"+i);
        let s = getSize(i, 0);
        cardElem.style.transform = `scale(${s})`
        //let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
        cardElem.style.height = `${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(){
        let 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 (let i = 0; i<nb_div; i++){
                let cardElem = document.getElementById("card"+i);
                let s = getSize(i, scrollVal*speedFactor);

                cardElem.style.display = s<0.01 ? "none" : ""
                cardElem.style.transform = `scale(${s})`
                cardElem.style.height = `${cardSizes[i] * s}px`

            }
        }
        else {
            all();
            if (scrollVal < 2){
                backToTop();
            }
            else {
                under();
            }

        }
    }
    return changeWidthParam;
}

setupPage();
let f = changeWidth();


window.addEventListener('scroll', function()
{
    requestAnimationFrame(f);
}, false);