<?
include("top.php");
?>

<body>
<div id="bgpopup" onClick="hidePopup()">
</div>
<div id="popupLogin" class="popup">
    <br>
	<br>
    <p>Enter your username to log in !</p>
    <br>
	<br>
    <input id="userNameLogin" type="text" name="userName" class="userNameInput"> </input>
    <br>
    <br>
    <button id="validateLoginButton" class="niceButton2 againButton" onclick="validateLogin()">Login</button>
</div>
<div id="popupCreate" class="popup">
    <br>
	<br>
    <p>Simply enter your username to create your account !</p>
    <br>
	<br>
    <input id="userNameCreate" type="text" name="userName" class="userNameInput"> </input>
    <br>
    <br>
    <button id="validateCreateAccountButton" class="niceButton2 menuButton" onclick="validateCreateAccount()">Create account</button>
</div>
<div id="popupInfo" class="popup">
    <?
    echo $_SESSION['indexMessage'];
    ?>
</div>
<div id="accounts">
    <button id="loginButton" class="niceButton2 menuButton" onclick="login()">Log in</button>
    <button id="logoutButton" class="niceButton2 menuButton" onclick="logout()">Log out (logged in as)</button>
    <button id="createAccountButton" class="niceButton2 menuButton" onclick="createAccount()">Create account</button>
</div>
<div id="interface">
	<br>
	<br>
	<br>
	<br>
	<br>
	<p class="bigText"> Welcome to GeoQuiz ! </p>
	<p> Here, you can play multiple games about world countries </p>
	<p> The following games are sorted from easiest to hardest, train yourself on the easy ones first ! </p>
    <br>
    <br>
	<button class="niceButton easyButton" onclick="location.href='G1.php'">Missing country</button>
	<p>Find the missing country !</p>
    <br>
    <br>
	<button class="niceButton easyButton" onclick="location.href='G2.php'">Country shape</button>
	<p>Guess the country only by its shape !</p>
    <br>
    <br>
    <button class="niceButton mediumButton" onclick="location.href='G5.php'">Country flag</button>
	<p>Guess the country only by its flag !</p>
    <br>
    <br>
    <button class="niceButton mediumButton" onclick="location.href='G3.php'">Missing country reverse</button>
	<p>Find the missing country on a reversed Earth !</p>
    <br>
    <br>
    <button class="niceButton hardButton" onclick="location.href='G4.php'">Country shape rotated</button>
	<p>Guess the country only by its rotated shape !</p>
    <br>
    <br>
    <button class="niceButton menuButton" onclick="location.href='stat.php'">Stats</button>
	<p>Here you can see all the stats for all the games on GeoQuiz</p>
    <br>
    <br>
</div>
<script>
var bgPopup = document.getElementById("bgpopup");
var popupLogin = document.getElementById("popupLogin");
var popupCreate = document.getElementById("popupCreate");
var popupInfo = document.getElementById("popupInfo");

var validateLoginButton = document.getElementById("validateLoginButton");
var validateCreateAccountButton = document.getElementById("validateCreateAccountButton");

var loginButton = document.getElementById("loginButton");
var logoutButton = document.getElementById("logoutButton");

var validateCreateAccountButton = document.getElementById("validateCreateAccountButton");

var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
    var button = buttons[i];
    button.style.transitionDuration = "0.4s";
}

hidePopup();

<?
if (isset($_SESSION['newIndexMessage']) && $_SESSION['newIndexMessage'] === true){
    $_SESSION['newIndexMessage'] = false;
    ?>
    showInfo();
    <?
}

if (isset($_SESSION['id']) && $_SESSION['id'] > 0){
    ?>
    loginButton.style.display = "none";
    logoutButton.innerHTML = "Log out (logged in as " + <? echo "'" . $_SESSION['name'] . "'"; ?> + ")";
    <?
}
else {
    ?>
    logoutButton.style.display = "none";
    <?
}
?>

function hidePopup() {
    bgPopup.style.visibility = "hidden";
    popupLogin.style.visibility = "hidden";
    popupCreate.style.visibility = "hidden";
    popupInfo.style.visibility = "hidden";
    validateCreateAccountButton.style.transitionDuration = "0s";
    validateLoginButton.style.transitionDuration = "0s";
}

function login() {
    bgPopup.style.visibility = "visible";
    popupLogin.style.visibility = "visible";
    popupCreate.style.visibility = "hidden";
    popupInfo.style.visibility = "hidden";
    validateLoginButton.style.transitionDuration = "0.4s";
    userNameLogin.focus();
}


function logout() {
    window.location.replace('logout.php');
}

function createAccount() {
    bgPopup.style.visibility = "visible";
    popupLogin.style.visibility = "hidden";
    popupCreate.style.visibility = "visible";
    popupInfo.style.visibility = "hidden";
    validateCreateAccountButton.style.transitionDuration = "0.4s";
    userNameCreate.focus();
}

function showInfo() {
    bgPopup.style.visibility = "visible";
    popupLogin.style.visibility = "hidden";
    popupCreate.style.visibility = "hidden";
    popupInfo.style.visibility = "visible";
}

function validateLogin() {
    var regex = /^[a-z0-9]+$/i;
    if (regex.test(userNameLogin.value)) {
        window.location.replace('login.php?name=' + userNameLogin.value);
    }
    else {
        popupInfo.innerHTML = "<br><br><br><p class='error'> Sorry, but this username is invalid ... </p><p class='error'> It must only contains digits and characters </p>";
        hidePopup();
        showInfo();
    }
}

function validateCreateAccount() {
    var regex = /^[a-z0-9]+$/i;
    if (regex.test(userNameCreate.value)) {
        window.location.replace('createAccount.php?name=' + userNameCreate.value);
    }
    else {
        popupInfo.innerHTML = "<br><br><br><p class='error'> Sorry, but this username is invalid ... </p><p class='error'> It must only contains digits and characters </p>";
        hidePopup();
        showInfo();
    }
}
</script>
</body>
</html>