text: import { conLog } from "./consoleJS.js";
  import { toaster } from "./toasterJS.js";
  
  // function to toggle element with class 'panel'
  function togglePanel(e) {
      // get element
      var panel = document.getElementsByClassName("panel");
      // check if element exists
      if (panel.length > 0) {
          // check if element is visible
          if (panel[0].style.display === "block") {
              // hide element
              panel[0].style.display = "none";
              // log
              conLog("normal", "togglePanelJS", "Panel is now hidden");
          } else {
              // show element
              panel[0].style.display = "block";
              // log
              conLog("normal", "togglePanelJS", "Panel is now shown");
          }
      } else {
          // log
          conLog("error", "togglePanelJS", "Panel not found");
      }
  }
  
  // add event listener to button with id 'toggle' to toggle panel and print toaster message is 'panel is now shown' or 'panel is now hidden' with function toaster
  document.getElementById("toggle").addEventListener("click", function () {
      togglePanel();
      toaster("Panel is now " + document.getElementsByClassName("panel")[0].style.display, "var(--glass-toaster-progress-bar-background-color)");
      // toogle text decoration of button with id 'toggle' to underline or not
      if (document.getElementById("toggle").style.textDecoration === "underline") {
          document.getElementById("toggle").style.textDecoration = "none";
      } else {    // if text decoration is not underline
          document.getElementById("toggle").style.textDecoration = "underline";
      }
      //hide element with class 'clock' when panel is shown and show it when panel is hidden
      if (document.getElementsByClassName("panel")[0].style.display === "block") {
          document.getElementsByClassName("clock")[0].style.display = "none";
      } else {
          document.getElementsByClassName("clock")[0].style.display = "flex";
      }
      // call function setclockFont depending on the state of the panel
      setclockFont();
  });
  
  function setclockFont() {
      if (document.getElementsByClassName("panel")[0].style.display === "none") {
          // set the font size of p element inside div with id 'clock' to relative size of the window width
              document.getElementsByClassName("clock")[0].style.fontSize = window.innerWidth / 5 + "px";
          } else {
              //set the font size of p element inside div with id 'clock' to 0px
              document.getElementsByClassName("clock")[0].style.fontSize = "0px";
          }
  }
  
  //function clock get time in format hh:mm:ss every second and return it with setInterval
  function clock(interval) {
      var date = new Date();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      // add 0 if number is less than 10
      if (hours < 10) {
          hours = "0" + hours;
      }
      if (minutes < 10) {
          minutes = "0" + minutes;
      }
      if (seconds < 10) {
          seconds = "0" + seconds;
      }
      // return time in format hh:mm:ss
      return hours + ":" + minutes + ":" + seconds;
  }
  
  // innner html on element with id 'clock' to show time with function clock every second use setInterval
  setInterval(function () {
      document.getElementById("clock").innerHTML = clock();
  }, 1000);