// Initialize
var lButtonsMT, timeEnter;
var sNames  = '';
var sDT     = '';
var sCurrent = '';
// When page is loaded
window.addEventListener('DOMContentLoaded', () => {
    timeEnter = new Date();
    lButtonsMT = document.getElementsByClassName("MT");
    for (let i=0; i<lButtonsMT.length; i++) {
        let elem = lButtonsMT[i];
        console.log(elem.title)
        CreateMT(elem);
    }
    // document.addEventListener('mousemove',()=>{
    //     let now = new Date();
    //     let dt = (now - timeEnter)/1000;    
    //     document.getElementById('test-text').innerHTML = `${sCurrent}:${dt}`
    // })
});


// Functions
function updateMT(id) {
    let now = new Date();
    let dt = now - timeEnter;
    timeEnter = now;
    if (sDT.length>0) {
        sDT =  `${sDT},${dt}`;
    } else {
        sDT = `${dt}`;
        document.getElementById('time2first').value = timeEnter - startTime;
    }
    // Update to current label
    if (sNames.length>0) {
        sNames = `${sNames},${sCurrent}`;
    } else {
        sNames = `${sCurrent}`;
    }

    
}

function hideEverything() {
    lTgt = document.getElementsByClassName('mt-tgt');
    for (let i=0;i<lTgt.length; i++) {
        lTgt[i].classList.add('hide');
    }

}

function activateMT(elem) {
    hideEverything();
    lTgt = elem.getElementsByClassName('mt-tgt');
    for (let i=0;i<lTgt.length; i++) {
        lTgt[i].classList.remove('hide');
    }
}

function CreateMT(elem,name) {
    elem.addEventListener("mouseenter", ()=>{
        elem.classList.add('hover');
        timeEnter = new Date();
        sCurrent = elem.id;
        activateMT(elem)
    })
    elem.addEventListener("mouseleave", ()=>{
        elem.classList.remove('hover');
        updateMT(elem.id)
        hideEverything();
    })
}

function endDecPage(dec) {
    document.getElementById('iDec').value = dec;
    document.getElementById('sNames').value = sNames;
    document.getElementById('sDT').value = sDT;
    endPage();
}