	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 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 class="ans" id="a_'+dID+'"><span id="'+iObj+'">'+oldSrc+'</span></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 correctVal = document.getElementById("drop_"+i);
		var matchVal = document.getElementById("ans1_"+i);
	if (correctVal.innerText== matchVal.innerText) {
			correctVal.setAttribute("style","font-weight:bold;color:#008000;")
		} else {
			correctVal.setAttribute("style","font-weight:bold;color:red;")
		}
	}
		btnReponses.disabled=false;
		btnReponses.setAttribute('style', "color:#000000");
		btnClr.disabled=false;
		btnClr.setAttribute('style', "color:#000000");
}

function answer() {
	var checkAlbums = document.getElementsByClassName("albums");
	for(var a=1; a<=checkAlbums.length; a++) {
		var albums = document.getElementById("albums"+a);
		albums.setAttribute('hidden','hidden');
		var ans = document.getElementById("ans"+a);
		ans.setAttribute('hidden','hidden');
	}
	btnClr.disabled=true;
	btnClr.setAttribute('style', "color:#D4D0C8");
	if (sc == 1) {
		var xAns = document.getElementById("ans"+counter);
		xAns.removeAttribute('hidden');
		btnValider.disabled=true;
		btnValider.setAttribute('style', "color:#D4D0C8");
		sc += 1;
	} else {
		var xItem = document.getElementById("albums"+counter);
		xItem.removeAttribute('hidden');
		btnValider.disabled=false;
		btnValider.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 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("a_drop_"+i);
		correctVal.setAttribute("style","color:#000000;")
		correctVal.innerHTML = '&#x00A0;';
	}
	var xAns = document.getElementById("ans"+counter);
			xAns.setAttribute('hidden','hidden');
	var xItem = document.getElementById("albums"+counter);
			xItem.removeAttribute('hidden');
		btnClr.disabled=true;
		btnClr.setAttribute('style', "color:#D4D0C8");
		btnValider.disabled=true;
		btnValider.setAttribute('style', "color:#D4D0C8");
		btnReponses.disabled=true;
		btnReponses.setAttribute('style', "color:#D4D0C8");
}
