// Init Elm
var app = Elm.Main.init({
    node: document.getElementById("elm"),
    // flags: Date.now()
});

// Dom Objects
let pc      = document.getElementsByClassName("pc")[0];
let pc_ram  = pc.getElementsByClassName("ram")[0];
let pc_cu   = pc.getElementsByClassName("cu")[0];
let pc_alu  = pc.getElementsByClassName("alu")[0];

let pc_ram_scroller = pc_ram.getElementsByClassName("scroller")[0];
let pc_cu_scroller = pc_cu.getElementsByClassName("scroller")[0];

let control_autoscroll = document.getElementById("enableScrolling");

// Methods
function scrollToCurrent(){
    if( control_autoscroll.checked == false ) return;

    let current_ram = pc_ram.getElementsByClassName("current")[0];
    if( typeof current_ram != "undefined"){
        current_ram.scrollIntoView({behavior: "smooth", block: "center"});
    }

    let current_uCode = pc_cu.getElementsByClassName("current")[0];
    if( typeof current_uCode != "undefined"){
        current_uCode.scrollIntoView({behavior: "smooth", block: "center"});
    }
}


function shrinkTableHead(scroll){
    let scroller = scroll.target;
    let pos = scroller.scrollTop;
    let thead = scroller.getElementsByClassName("head")[0];

    if( pos > 70 ){
        thead.classList.add("shrunk");
    }else if (pos < 40){
        thead.classList.remove("shrunk");
    }

}


// EVENT LISTENERS
pc_ram_scroller.addEventListener("scroll", shrinkTableHead);
pc_cu_scroller.addEventListener("scroll", shrinkTableHead);

// Recieve Elm updates via ports
app.ports.sendUUpdate.subscribe( (message) => {
    // console.log("Update: ", message);
    scrollToCurrent();

    // Make sure that even when the calculation takes longer it will scroll correctly
    setTimeout( scrollToCurrent, 100 );
} );