	window.onload = init;
	document.getElementById('btnclr1').onclick = newBoard;
	document.getElementById('btn1').onclick = answer;
	document.getElementById('btn2').onclick = check;
	var counter=1;
	var sc=1;

	var btnClr = document.getElementById('btnclr1');
	var btnReponses = document.getElementById('btn1');
	var btnValider = document.getElementById('btn2');



function init() {
	document.getElementById("screen1").style.display = 'block';
		btnClr.disabled=true;
		btnClr.setAttribute('style', "color:#D4D0C8");
		btnValider.disabled=true;
		btnValider.setAttribute('style', "color:#D4D0C8");
		btnReponses.disabled=true;
		btnReponses.setAttribute('style', "color:#D4D0C8");
		var audio1 = document.getElementById('au1');
		audio1.currentTime = 0;
		audio1.pause();
	}

var addEvent = (function () {
	if (document.addEventListener) {
		return function (el, type, fn) {
			if (el && el.nodeName || el === window) {
				el.addEventListener(type, fn, false);
			} else if (el && el.length) {
				for (var i = 0; i < el.length; i++) {
					addEvent(el[i], type, fn);
				}
			}
		};
		} else {
			return function (el, type, fn) {
				if (el && el.nodeName || el === window) {
					el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
				} else if (el && el.length) {
					for (var i = 0; i < el.length; i++) {
					addEvent(el[i], type, fn);
					}
				}
			};
		}
	})();
var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');
function cancel(e) {
	if (e.preventDefault) {
		e.preventDefault();
	}
	return false;
}
function updateDataTransfer() {
	dragItems = document.querySelectorAll('[draggable=true]');
			for (var i = 0; i < dragItems.length; i++) {
		addEvent(dragItems[i], 'dragstart', function (event) {
			event.dataTransfer.setData('obj_id', this.id);
			return false;
		});
	}
}
addEvent(dropAreas, 'dragover', function (event) {
	updateDataTransfer()
		if (event.preventDefault) event.preventDefault();
		//this.style.borderColor = "#000";
		return false;
});
addEvent(dropAreas, 'drop', function (event) {
	updateDataTransfer();
	if (event.preventDefault) event.preventDefault();
		var iObj = event.dataTransfer.getData('obj_id');
		var oldObj = document.getElementById(iObj);
		var oldSrc = oldObj.innerHTML;
		var oldThis = this;
		var dID = oldThis.getAttribute('id');
			setTimeout(function() {
			oldThis.innerHTML = '<span id="'+iObj+'">'+oldSrc+'</span>';
			updateDataTransfer();
			//oldThis.style.borderColor = "#ccc";
			oldThis.setAttribute("droppable", "false");
			btnValider.disabled=false;
			btnValider.setAttribute('style', "color:#000000");
			btnClr.disabled=true;
			btnClr.setAttribute('style', "color:#D4D0C8");
		}, 300);
return false;
});

function check() {
	var checkAlbum = document.getElementsByClassName("album");

		for(var i=1; i<=checkAlbum.length; i++) {
			var getVal = document.getElementById("drop"+i);
			var correctVal = document.getElementById("ans"+i);
			var imgPath = getVal.firstChild;
			var imgName = imgPath.getAttribute("id");
			var att = getVal.getAttribute("droppable");
			//console.log(att);
			//console.log(imgName);
			//console.log(correctVal.innerText);
			if (att == "false") {
				if (imgName == correctVal.innerText) {
					getVal.setAttribute("style","border: 2px solid green;color:#000000;border-radius: 10px;box-shadow: 2px 2px 4px green;")
				} else {
					getVal.setAttribute("style","border: 2px solid red;color:#000000;border-radius: 10px;box-shadow: 2px 2px 4px red;")
				}
			}
		}
	
	
		btnReponses.disabled=false;
		btnReponses.setAttribute('style', "color:#000000");
		btnClr.disabled=false;
		btnClr.setAttribute('style', "color:#000000");
}

function answer() {
		var question = document.getElementById('question'+counter)
		var answer = document.getElementById('answer'+counter)
	if (sc == 1) {
			question.setAttribute('hidden','hidden')
			answer.removeAttribute('hidden')
		btnValider.disabled=true;
		btnValider.setAttribute('style', "color:#D4D0C8");
		btnClr.disabled=true;
		btnClr.setAttribute('style', "color:#D4D0C8");
		sc += 1;
	} else {
		question.removeAttribute('hidden')
		answer.setAttribute('hidden','hidden')
		btnValider.disabled=false;
		btnValider.setAttribute('style', "color:#000000");
		btnClr.disabled=false;
		btnClr.setAttribute('style', "color:#000000");
		sc -= 1;
	}
}

function newBoard() {
	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';
		var question = document.getElementById('question'+i)
				question.removeAttribute('hidden')
		var answer = document.getElementById('answer'+i)
				answer.setAttribute('hidden','hidden')
		var audio = document.getElementById('au'+i);
		audio.currentTime = 0;
		audio.pause();
	}
	var screenElement2 = document.getElementById('screen'+counter).style.display = 'block';
	var checkAlbum = document.getElementsByClassName("album");
	for(var i=1; i<=checkAlbum.length; i++) {
		var correctVal = document.getElementById("drop"+i);
		correctVal.removeAttribute("style")
		correctVal.setAttribute("droppable","true")
		correctVal.innerHTML = '<span id="aa' + i + '">&#x00A0;</span>';
	}
		var audio1 = document.getElementById('au'+counter);
		audio1.currentTime = 0;
		audio1.pause();

		btnClr.disabled=true;
		btnClr.setAttribute('style', "color:#D4D0C8");
		btnValider.disabled=true;
		btnValider.setAttribute('style', "color:#D4D0C8");
		btnReponses.disabled=true;
		btnReponses.setAttribute('style', "color:#D4D0C8");
}
