//Clock
function getTime() {
  var date = new Date();
  var h = date.getHours() <= 9 ? "0" + date.getHours() : date.getHours();
  var m = date.getMinutes() <= 9 ? "0" + date.getMinutes() : date.getMinutes();
  var s = date.getSeconds() <= 9 ? "0" + date.getSeconds() : date.getSeconds();
  $("#time").text(`${h}:${m}:${s}`);
}
setInterval(getTime, 1000);
getTime();

//Colored Text
let colorsArr = ["red", "cyan", "purple", "orange"];
let colori = 0;
setInterval(() => {
  document.documentElement.style.setProperty("--color", colorsArr[colori]);
  if (colori == colorsArr.length - 1) {
    colori = 0;
  } else {
    colori++;
  }
}, 2000);

//Video volume
document.getElementById("vid").volume = 0.6;

//Main Function
mainActive = false;
setTimeout(() => {
  if (document.getElementById("vid").paused) {
    $("#clickToPlay").css("opacity", "1");
  } else {
    main();
  }
}, 1000);
function main() {
  if (mainActive) return;
  mainActive = true;
  $("#clickToPlay").css("opacity", "0");
  $("#main").css("opacity", "1");
  $("#widgetContainer").css("opacity", "1");
  $(".hitCount").css("opacity", "1");
  setTimeout(() => {
    $("#clickToPlay").css("display", "none");
  }, 1050);
  document.getElementById("vid").play();
  //Border
  borderTop = 0;
  borderRight = 0;
  borderBottom = 0;
  borderLeft = 0;
  function topBorder() {
    let int = setInterval(() => {
      borderTop++;
      if (borderTop <= 100) {
        $("#borderTop").css("width", borderTop + "%");
      } else {
        rightBorder();
        clearInterval(int);
        $("#borderTop").css({ left: "", right: "0" });
        setTimeout(() => {
          let int = setInterval(() => {
            borderTop--;
            if (borderTop >= 0) {
              $("#borderTop").css("width", borderTop + "%");
            } else {
              $("#borderTop").css({ right: "", left: "0" });
              clearInterval(int);
            }
          }, 7);
        }, 250);
      }
    }, 7);
  }
  function rightBorder() {
    let int = setInterval(() => {
      borderRight++;
      if (borderRight <= 100) {
        $("#borderRight").css("height", borderRight + "%");
      } else {
        bottomBorder();
        clearInterval(int);
        $("#borderRight").css({ top: "", bottom: "0" });

        setTimeout(() => {
          let int = setInterval(() => {
            borderRight--;
            if (borderRight >= 0) {
              $("#borderRight").css("height", borderRight + "%");
            } else {
              $("#borderRight").css({ bottom: "", top: "0" });
              clearInterval(int);
            }
          }, 5);
        }, 450);
      }
    }, 5);
  }
  function bottomBorder() {
    let int = setInterval(() => {
      borderBottom++;
      if (borderBottom <= 100) {
        $("#borderBottom").css("width", borderBottom + "%");
      } else {
        leftBorder();
        clearInterval(int);
        $("#borderBottom").css({ right: "", left: "0" });

        setTimeout(() => {
          let int = setInterval(() => {
            borderBottom--;
            if (borderBottom >= 0) {
              $("#borderBottom").css("width", borderBottom + "%");
            } else {
              $("#borderBottom").css({ left: "", right: "0" });
              clearInterval(int);
            }
          }, 7);
        }, 250);
      }
    }, 7);
  }
  function leftBorder() {
    let int = setInterval(() => {
      borderLeft++;
      if (borderLeft <= 100) {
        $("#borderLeft").css("height", borderLeft + "%");
      } else {
        topBorder();
        clearInterval(int);
        $("#borderLeft").css({ bottom: "", top: "0" });

        setTimeout(() => {
          let int = setInterval(() => {
            borderLeft--;
            if (borderLeft >= 0) {
              $("#borderLeft").css("height", borderLeft + "%");
            } else {
              $("#borderLeft").css({ top: "", bottom: "0" });
              clearInterval(int);
            }
          }, 5);
        }, 450);
      }
    }, 5);
  }
  topBorder();
}

//Start Main Function
$("#clickToPlay").click(() => {
  main();
});