// Used to toggle between light and dark modes
let darkMode = localStorage.getItem("darkMode");
//const darkModeToggle = document.querySelector("#dark-mode-toggle");

// check if dark mode is enabled
// if it's enable, turn it off
// if it's disabled, turn it on

const enableDarkMode = () => {
	// 1. add the class darkmode to the body
	document.body.classList.add('darkmode')
	// 2. updtea darkMode in the localStorage
	localStorage.setItem('darkMode', 'enabled')
	// 3. hide dark mode button and reveal light mode button
	var dark = document.getElementById("makeDarkModeButton");
	var light = document.getElementById("makeLightModeButton");
	dark.style.display = "none"
	light.style.display = "block"
}

const disableDarkMode = () => {
	// 1. add the class darkmode to the body
	document.body.classList.remove('darkmode')
	// 2. updtea darkMode in the localStorage
	localStorage.setItem('darkMode', 'disabled')
	// 3. hide light mode button and reveal dark mode button
	var dark = document.getElementById("makeDarkModeButton");
	var light = document.getElementById("makeLightModeButton");
	dark.style.display = "block"
	light.style.display = "none"
}

if (darkMode === 'enabled') {
	enableDarkMode();
} else {
	disableDarkMode();
}

function darkModeToggle() {
	darkMode = localStorage.getItem("darkMode");
	if (darkMode !== 'enabled') {
		enableDarkMode();
	} else {
		disableDarkMode();
	}
}


// Modal Image Gallery
function onClick(element) {
	document.getElementById("img01").src = element.src;
	document.getElementById("modal01").style.display = "block";
	var captionText = document.getElementById("caption");
	captionText.innerHTML = element.alt;
}


// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
    var navbar = document.getElementById("myNavbar");
    var navbarMain = document.getElementById("myNavbarMain");
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
		// navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
		navbarMain.className = navbarMain.className.replace("w3-bottom", "w3-top");
    } else {
        // navbar.className = navbar.className.replace("logoBackground w3-card w3-animate-top w3-white", "");
		navbarMain.className = navbarMain.className.replace("w3-top", "w3-bottom");
    }
}


// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
    var x = document.getElementById("navDemo");
    if (x.className.indexOf("w3-show") == -1) {
		x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}

// used to toggle the Making Of tabs
function openTab(evt, tabName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("makingOf");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" warsmash-red", ""); 
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " warsmash-red";
}