/* Put your Js at the end of the html before the closing body tag rather than hi-jacking the onload event */

//use an iffe to enscapulate the code and protect the global namespace
(function clipMe(d) {
  "use strict";

  // declare the variables for use as constants
  const header = d.querySelector("#header");
  const footer = d.querySelector("#footer");
  const main = d.querySelector("#main");
  const className = "supressed";  
  
  // method to add/remove class if appropriate.
  const toggle = (elem) => {
  if (elem.classList.contains(className)) {
    elem.classList.remove(className);
  }
  else {
    elem.classList.add(className);
  }   
  };

  // when someone clicks the header element add an active class to the header element

  // use eventListeners and not onclick
  header.addEventListener(
    "click",
    () => {
      toggle(header);
    },
    false
  );

  // when someone clicks the footer element add an active class to the footer element
  footer.addEventListener(
    "click",
    () => {
      toggle(footer);
    },
    false
  );

  main.addEventListener(
    "click",
    () => {
      const hdrHidden = header.classList.contains(className);
      const ftrHidden = footer.classList.contains(className);
      if ((hdrHidden && ftrHidden) || (!hdrHidden && !ftrHidden)) {
        // Both header & footer are showing/hidden, so toggle both...
        toggle(header);
        toggle(footer);        
      } else if (hdrHidden) {
        // only header is hidden
        toggle(header);
      } else {
        // only footer is hidden
        toggle(footer);        
      }
    },
    false
  );
})(document);