	window.onload = init;
	document.getElementById('suivant').onclick = newBoard;
	document.getElementById('reponses').onclick = result;
	document.getElementById('valider').onclick = check; //Valider
	var btn1 = document.getElementById('suivant');
	var btn2 = document.getElementById('reponses');
	var btn3 = document.getElementById('valider');


function init() {
	var screen1 = document.getElementById('screen1');
	screen1.style.display = 'block';
	var audio1 = document.getElementById('a1');
	audio1.style.display = 'block';
	audio1.pause();
	audio1.currentTime = 0;
	btn1.disabled=true;
	btn1.setAttribute('style', "color:#D4D0C8");
	btn2.disabled=true;
	btn2.setAttribute('style', "color:#D4D0C8");
	btn3.disabled=true;
	btn3.setAttribute('style', "color:#D4D0C8");
}

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;
	btn1.disabled = true;
	btn1.setAttribute('style', "color:#D4D0C8;");
	btn2.disabled = true;
	btn2.setAttribute('style', "color:#D4D0C8;");
	btn3.disabled=false;
	btn3.setAttribute('style', "color:#000000");
}





var counter=1;
var sc=1;





function newBoard() {
if (counter < 4) {
			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;
		var images1 = document.getElementsByClassName('img');
		for(var i=1; i <= 4 ; i++) {
			for(var j=1; j <= 2 ; j++) {
				var image2 = document.getElementById('img'+i+'_'+j);
				image2.setAttribute("style","border: 5px solid #FFFFFF;;")
			}
		}
		btn1.setAttribute('value', 'Suivant');
		btn1.setAttribute('style', 'background-image:url("images/rarrow.png");background-repeat: no-repeat;background-position: left;');
		btn1.setAttribute('style', "color:#D4D0C8;");
		btn1.disabled=true;
		btn2.setAttribute('style', "color:#D4D0C8;");
		btn2.disabled=true;
		btn3.setAttribute('style', "color:#D4D0C8;");
		btn3.disabled=true;
	
}

//	var btn1 = document.getElementById('suivant');
//	var btn2 = document.getElementById('reponses');
//	var btn3 = document.getElementById('valider');



function result() {
	console.log(sc);
	var ansVal = document.getElementById('ans'+ counter).innerText;
	var ansPic = document.getElementById(ansVal);

	if (sc == 1) {
	btn1.disabled = true;
	btn1.setAttribute('style', 'color:#D4D0C8;');
  btn3.disabled = true;
  btn3.setAttribute('style', "color:#D4D0C8;");
  btn2.disabled = false;
  btn2.setAttribute('style', "color:#000000;");
	ansPic.setAttribute("style","border:5px solid green;border-radius: 10px;box-shadow: 3px 3px 8px green;");

		for(var i=1; i <= 4 ; i++) {
			for(var j=1; j <= 2 ; j++) {
				var image2 = document.getElementById('img'+i+'_'+j);
						image2.setAttribute('onclick', 'return false;');
			}
		}




	sc += 1
	} else {
	ansPic.removeAttribute("style");
	check()
		for(var i=1; i <= 4 ; i++) {
			for(var j=1; j <= 2 ; j++) {
				var image2 = document.getElementById('img'+i+'_'+j);
						image2.setAttribute('onclick', 'select(this)');
			}
		}
	btn1.disabled = false;
	btn1.setAttribute('style', 'color:#000000;');
  btn2.disabled = false;
  btn2.setAttribute('style', "color:#000000;");
  btn3.disabled = false;
  btn3.setAttribute('style', "color:#000000;");

	sc -= 1
	}
}



function check() {
	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;box-shadow: 3px 3px 8px green;");
	} else {
		selImage.setAttribute("style","border:5px solid red;border-radius: 10px;box-shadow: 3px 3px 8px red;");
	}
	btn1.disabled=false;
	btn1.setAttribute('style', "color:#000000");
	btn2.disabled=false;
	btn2.setAttribute('style', "color:#000000");
}


