window.onload = init;
	var btnClr = document.getElementById('btnclr1');
	var btnValider = document.getElementById('btn1');
	var btnReponses = document.getElementById('btn2');
	var sc = 1;

function init() {
	document.getElementById('btnclr1').onclick = clear1;
	document.getElementById('btn1').onclick = Check;
	document.getElementById('btn2').onclick = answer;
	btnReponses.disabled=true;
	btnReponses.setAttribute('style', "color:#D4D0C8");
	btnValider.disabled=true;
	btnValider.setAttribute('style', "color:#D4D0C8");
}



// add event handler
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);
					}
				}
			};
		}
	})();

// inner variables

var dragItems;
updateDataTransfer();

var dropAreas = document.querySelectorAll('[droppable=true]');

// preventDefault (stops the browser from redirecting off to the text)

function cancel(e) {
	if (e.preventDefault) {
		e.preventDefault();
	}
	return false;
}
// update event handlers
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;
		});
	}
}

// dragover event handler
addEvent(dropAreas, 'dragover', function (event) {
	updateDataTransfer()
		if (event.preventDefault) event.preventDefault();
		// little customization
		this.style.borderColor = "#000";
		return false;

});


// drop event handler
addEvent(dropAreas, 'drop', function (event) {
	updateDataTransfer();
	if (event.preventDefault) event.preventDefault();
		// get dropped object
		var iObj = event.dataTransfer.getData('obj_id');
		var oldObj = document.getElementById(iObj);
		// get its image src
		var oldSrc = oldObj.innerHTML;
		oldObj.className += 'hidden';
		var oldThis = this;

		setTimeout(function() {
			//oldObj.parentNode.removeChild(oldObj); // remove object from DOM
			// add similar object in another place
			//oldThis.innerHTML = oldSrc;
			oldThis.innerHTML = '<span id="'+iObj+'" style="font-weight: bold;font-size:.7em;">'+oldSrc+'</span>';
			// and update event handlers
			updateDataTransfer();
			// little customization
			oldThis.style.borderColor = "#ccc";
			oldThis.setAttribute("droppable", "false");

		}, 200);
return false;

}
);

function changebg(divid) {
	document.getElementById(divid).setAttribute("style","background-color:#FFFFFF;");
	btnValider.disabled=false;
	btnValider.setAttribute('style', "color:#000000");
}

function clear1() {
	location.reload();
}

function Check() {
	var divcount = document.getElementsByClassName("album");
		console.log(divcount.length);
	for(var i=0; i<divcount.length; i++) {
		var divname=divcount[i].getAttribute('name');
		var childname=String(divcount[i].firstElementChild.nodeName);
		console.log(childname);
	if(childname=="TEXT") {
		var x=divcount[i].firstElementChild.getAttribute('id');
		console.log(divname+'\n'+x);
	}
	if(x==divname) {
		divcount[i].setAttribute("style","font-size:1em;color:#FFFFFF;background-color:#008000;border: 2.25px solid Black;border-radius:25px;")
	} else {
		divcount[i].setAttribute("style","font-size:1em;color:#FFFFFF;background-color:#FF0000;border: 2.25px solid Black;border-radius:25px;")
	}
	}
	btnReponses.disabled=false;
	btnReponses.setAttribute('style', "color:#000000");

}



function answer() {
var answer = document.getElementsByClassName("album");
	if (sc=="1") {
		for(var i=1; i<=answer.length; i++) {
		var getVal = document.getElementById('drag'+i+'-div');
		var corVal = document.getElementById('drag'+i+'a-div');
			getVal.setAttribute('hidden', 'hidden');
			corVal.removeAttribute('hidden');
		}
		btnValider.disabled=true;
		btnValider.setAttribute('style', "color:#D4D0C8");
		sc += 1
	 } else {
		for(var i=1; i<=answer.length; i++) {
		var getVal = document.getElementById('drag'+i+'-div');
		var corVal = document.getElementById('drag'+i+'a-div');
			corVal.setAttribute('hidden', 'hidden');
			getVal.removeAttribute('hidden');
		}
		btnValider.disabled=false;
		btnValider.setAttribute('style', "color:#000000");
		sc -= 1
	}
}


function allowDrop (ev) {
	sc = 1;
   ev.preventDefault ();}
        function drag (ev) {
  ev.dataTransfer.setData ("src", ev.target.id);}
        function drop (ev) {
  ev.preventDefault ();
  var src = document.getElementById (ev.dataTransfer.getData ("src"));
  var srcParent = src.parentNode;
  var tgt = ev.currentTarget.firstElementChild;
  ev.currentTarget.replaceChild (src, tgt);
  srcParent.appendChild (tgt);
	btnValider.disabled=false;
	btnValider.setAttribute('style', "color:#000000");
}
