document.addEventListener('DOMContentLoaded', chargementPage);
var listeAmpouleView;
var conteneurJeu;
var perduView;
var gagneView;
var btnStart;
var scoreView;
var listeEtatAmpouleInitiale = [];
var listeEtatAmpoule = [];
var ALLUMEE = 1;
var ETEINTE = 0;
var url = ["./images/off.png", "./images/on.png"];
var tempsDebut = 1000;
var isGameStart = false;
var isPlaying = false;
var score;
var scoreMax;


function chargementPage(event){
	conteneurJeu = document.getElementsByClassName('columns')[1];
	listeAmpouleView = document.querySelectorAll('img');
	perduView = document.getElementById("perdu");
	gagneView = document.getElementById("gagne");
	btnStart = document.querySelector('button');
	scoreView = document.querySelector('progress');

	conteneurJeu.addEventListener('click', clicAmpoule);
	btnStart.addEventListener('click', start);
}

function clicAmpoule(event){
	if (event.target.tagName === 'IMG' && isPlaying && event.target.src !== url[ALLUMEE]){
		var index = findIndex(listeAmpouleView, event.target);
		listeEtatAmpoule[index] = ALLUMEE;
		if (listeEtatAmpoule[index] !== listeEtatAmpouleInitiale[index]){
			perdu();
		}
		else{
			event.target.src = url[ALLUMEE];
			score ++;
			scoreView.value = score;
			if (score >= scoreMax){
				gagne();
			}
		}
	}
}

function allumerAleatoire(proba=0.25){
	listeAmpouleView.forEach(function(image, index) {
		if (Math.random() <= proba){
			image.src = url[ALLUMEE];
			listeEtatAmpouleInitiale[index] = ALLUMEE;
			scoreMax ++;
		}
		else{
			listeEtatAmpouleInitiale[index] = ETEINTE;
		}
	})
	scoreView.max = scoreMax;
	scoreView.value = 0;
}

function eteindre(){
	listeAmpouleView.forEach(function(image, index) {
		image.src = url[ETEINTE];
		listeEtatAmpoule[index] = 0;
	})
}

function start(){
	if (!isGameStart && !isPlaying){
		isGameStart = true;
		isPlaying = false;
		score = 0;
		scoreMax = 0;
		perduView.style.display = "none";
		gagneView.style.display = "none";
		eteindre();
		allumerAleatoire(0.4);
		setTimeout(jouer, tempsDebut);
	}
}

function jouer(){
	isGameStart = false;
	isPlaying = true;
	eteindre();
}

function perdu(){
	perduView.style.display = "block";
	isPlaying = false;
	setTimeout(perdu2, tempsDebut)
}

function perdu2(){
	listeAmpouleView.forEach(function(image, index) {
		image.src = url[listeEtatAmpouleInitiale[index]];
	})
}

function gagne(){
	gagneView.style.display = "block";
	isPlaying = false;
}

function findIndex(tableau, element){
	for (var i = 0; i < tableau.length; i++) {
        if (tableau[i] === element) {
            return i;
        }
    }
    return null;
}