var userinput = document.getElementById("user-in")
var george = document.getElementById("George-link");
var paul = document.getElementById("Paul-link");
var john = document.getElementById("John-link");
var passinput = document.getElementById("pass-in")
var enter = document.getElementById("button-enter")
var mhide = document.getElementById("hideMain")
var phide = document.getElementById("log")
var hide = document.getElementById("button-hide")
var nom = document.getElementById("an")
var passtry = 0

george.addEventListener("click", picLink);
john.addEventListener("click", picLink);
paul.addEventListener("click", picLink);

hide.addEventListener("click", function() {
mhide.className = "hide";
phide.className = "log";
passtry = 0
console.log("hidden");
})

enter.addEventListener("click", go)
function go() {
	var pass = passinput.value
	var user = userinput.value
	if(pass == "1206", user == "Agent007") {
		phide.className = "hide"
		mhide.className = ""
		console.log("acces "+pass)
		passinput.value = ""
	} else if(passtry == 3) {
		phide.className = "hide"
		mhide.className = "hide"
		nom.className = ""
	} else {
		alert("Try again.")
		passtry++
	}
}

function picLink() {
	var allImages = document.querySelectorAll("img");
    for (var i = 0; i < allImages.length; i++) {
	allImages[i].className = "hide";
    }
	var picId = this.attributes["data-img"].value;
	console.log(picId);
	var pic = document.getElementById(picId);
	if(pic.className === "hide") {
		pic.className = "";
	} else {
		pic.className = "hide";
	}
}