	window.onload = init;
	document.getElementById('btnclr1').onclick = newBoard;
	document.getElementById('btn1').onclick = answer; //Voir les réponses
	document.getElementById('btn2').onclick = result; //Valider

var counter=1;
function init() {
	document.getElementById("screen1").style.display = 'block';
	var audioElement1 = document.getElementById('a1');
		audioElement1.pause();
		audioElement1.currentTime = 0;
	var b2 = document.getElementById('btnclr1');
  b2.setAttribute('style', "color:#D4D0C8;");
  b2.disabled = true;

	var b3 = document.getElementById('btn1');
  b3.setAttribute('style', "color:#D4D0C8;");
  b3.disabled = true;
	var b2 = document.getElementById('btn2');
  b2.setAttribute('style', "color:#D4D0C8;");
  b2.disabled = true;

}

var selectedImage;
function select(image) {
	//var images = document.querySelectorAll('img');
	var images = document.getElementsByClassName('img');
	var index = 0, length = images.length;
	for (; index < length; index++) {
		images[index].classList.remove('selected');
		images[index].removeAttribute('style');
	}
	selectedImage = image.id;
	image.classList.add('selected');
	document.getElementById('p'+counter).innerText = image.id;
	var b2 = document.getElementById('btn2');
  b2.setAttribute('style', "color:#000000;");
  b2.disabled = false;


}
var right = 0;
var wrong = 0;
var checkCount = 0;

function answer() {
var screenElement = document.getElementsByClassName('screen');
	for(var i=1; i < screenElement.length+1; i++) {
		var screenElement1 = document.getElementById('screen'+i).style.display ='none';
		var anspic = document.getElementById('anspic'+i).style.display ='none';
	}
		var ans1 = document.getElementById('s1').style.display ='block';
		var anspic1 = document.getElementById('anspic'+counter).style.display ='block';
		var screenElement5 = document.getElementById('btnclr1');
		screenElement5 = document.getElementById('btnclr1');
		screenElement5.disabled=false;
		screenElement5.setAttribute('value', 'Recommencer');
		screenElement5.setAttribute('style', 'background-image:url("images/recommencer.jpg");background-repeat: no-repeat;background-position: left;');
	var b1 = document.getElementById('btn1');
  b1.setAttribute('style', "color:#D4D0C8;");
  b1.disabled = true;
	var b2 = document.getElementById('btn2');
  b2.setAttribute('style', "color:#D4D0C8;");
  b2.disabled = true;


}



function newBoard() {
	var bCheck = document.getElementById('btnclr1');
	var bCheckValue = bCheck.getAttribute('value')
	if (bCheckValue=='Recommencer') {
		document.getElementById('anspic'+counter).style.display ='none';
		document.getElementById('screen'+counter).style.display = 'block';
		bCheck.setAttribute('value', 'Suivant');
		bCheck.setAttribute('style', 'background-image:url("images/rarrow.png");background-repeat: no-repeat;background-position: left;');
		bCheck.setAttribute('style', "color:#D4D0C8;");
		bCheck.disabled=true;
		var b3 = document.getElementById('btn1');
		b3.setAttribute('style', "color:#000000;");
		b3.disabled = false;
			var b2 = document.getElementById('btn2');
  b2.setAttribute('style', "color:#000000;");
  b2.disabled = false;
	} else {
		if (counter < 3) {
			counter+=1;
		} else {
			counter = 1;
		}
		var screenElement = document.getElementsByClassName('screen');
		for(var i=1; i < screenElement.length+1; i++) {
			var screenElement1 = document.getElementById('screen'+i).style.display ='none';
			audioElement1 = document.getElementById('a'+i);
			audioElement1.pause();
			audioElement1.currentTime = 0;
		}
		var screenElement2 = document.getElementById('screen'+counter).style.display = 'block';
		var audioElement2 = document.getElementById('a'+counter);
			audioElement2.pause();
			audioElement2.currentTime = 0;
		bCheck.setAttribute('value', 'Suivant');
		bCheck.setAttribute('style', 'background-image:url("images/rarrow.png");background-repeat: no-repeat;background-position: left;');
		bCheck.setAttribute('style', "color:#D4D0C8;");
		bCheck.disabled=true;
		var b3 = document.getElementById('btn1');
		b3.setAttribute('style', "color:#D4D0C8;");
		b3.disabled = true;
	var b2 = document.getElementById('btn2');
  b2.setAttribute('style', "color:#D4D0C8;");
  b2.disabled = true;

	}



//
//
//
//	var ans1 = document.getElementById('s1').style.display ='none';
//	
//
//
//
//	////var images1 = document.querySelectorAll('img');
//	//var images1 = document.getElementsByClassName('img');
//	//for(var i=1; i < images1.length+1; i++) {
//	//	var image2 = document.getElementById('img'+i);
//	//	image2.removeAttribute("style","border:none;")
//	//}
//	//if (counter == 3) {
//	////var screenElement3 = document.getElementById('btn1').style.display = 'block';
//	////result();
//	//} else {
//	////var screenElement4 = document.getElementById('btn1').style.display = 'none';
//	//var screenElement6 = document.getElementById('btnclr1');
//	//		screenElement6.setAttribute('value', 'Suivant');
//	//		screenElement6.setAttribute('style', 'background-image:url("images/rarrow.png");background-repeat: no-repeat;background-position: left;');
//	//}
}








function result() {

	var getVal = document.getElementById('p' + counter).innerText;
	var corVal = document.getElementById('ans' + counter).innerText;
	var selImage = document.getElementById(getVal);
	if (getVal == corVal) {
		selImage.setAttribute("style","border:5px solid green;border-radius: 10px;");
	} else {
		selImage.setAttribute("style","border:5px solid red;border-radius: 10px;");
	}
var bCheck = document.getElementById('btnclr1');
bCheck.setAttribute('value', 'Suivant');
bCheck.setAttribute('style', 'background-image:url("images/rarrow.png");background-repeat: no-repeat;background-position: left;');
bCheck.setAttribute('style', "color:#000000;");
bCheck.disabled=false;
var b3 = document.getElementById('btn1');
b3.setAttribute('style', "color:#000000;");
b3.disabled = false;


}
