// https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
// Performance for my useCase (modify NAV and FOOTER)

document.addEventListener("DOMContentLoaded", 
    function(e) {
        console.log("DOMContentLoaded triggered !");
            // for (document.querySelector("nav")
    });


// javascript console output DOM tree
// https://stackoverflow.com/questions/50305257/how-to-console-log-entire-html-dom-tree-in-order-with-attribute-names
// https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker

var walker = document.createTreeWalker(
  document.documentElement,
  NodeFilter.SHOW_ELEMENT // only elements
);

while (walker.nextNode()) {
  let current = walker.currentNode;
  console.log(
    current.tagName,
    [...current.attributes].map(({value,name}) => `${name}=${value}`).join()
  );
}


// Needed for image loaded and fetched : Not on local computer.
/*    https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
document.addEventListener("load", function(e) {
  console.log("The page has completely loaded.");
});
*/

window.onload = function () {
            setTimeout(function () {
/*                document.getElementById('message').innerHTML =
                    'The page has finished loading! After 2 second'; */
                    // Check if on the test domain and that the text changed, if so display Data.
                    if (window.location.hostname === 's.zkd.ca' && document.getElementById("updateDate").innerHTML != 'DATE_WEBSITE' )
                    {
                        document.getElementById("updateDate").setAttribute("id", "updateDateV");
                    } else
                    {
                        document.getElementById("updateDate").setAttribute("id", "updateDateW");
                        document.getElementById("updateDateW").innerHTML = 'À la prochaine!';
                    }

                    // https://developer.mozilla.org/en-US/docs/Web/API/Element/children
                    // const myHeader = document.getElementByTagName("header"); // TODO: Make sure only first nav (need <header>)
                    myNav = document.getElementsByTagName("nav");
                    console.log(myNav.length());

                    for (var i = 0; i < myNav.children.length(); i++) {
                        var tableChild = myNav.children[i];
                        console.log(tableChild.tagName);
                        // Do stuff
                    }

/*                    for (const child of myNav.children) {
                    console.log(child.tagName);
                    }
*/
            }, 2000);
            // NOTE: Change Current Page based on url in <NAV>


            // TODO Add timer for glitch
            // NOTE Track mouse mouvement and show after a percentage of ?
            // NOTE une page sur deux, ...
        };