	document.getElementById('btnclr1').onclick = clear1;
	document.getElementById('btn1').onclick = check;
	document.getElementById('btn2').onclick = answer;
// 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;
		var dID = oldThis.getAttribute('id');
			setTimeout(function() {
			//oldObj.parentNode.removeChild(oldObj); // remove object from DOM
			// add similar object in another place
			//oldThis.innerHTML = oldSrc;
			oldThis.innerHTML = '<span class="ans" id="a_'+dID+'"><span id="'+iObj+'">'+oldSrc+'</span></span>';
			// and update event handlers
			updateDataTransfer();
			// little customization
			oldThis.style.borderColor = "#ccc";
			oldThis.setAttribute("droppable", "false");
		}, 300);
return false;
});



function clear1() {
var fillSelect1 = document.getElementsByClassName("album");
for(var i=1; i<=fillSelect1.length; i++) {
var clr1 = document.getElementById("drop_"+i);
clr1.innerHTML = '<span class="ans" id="a_drop_'+ i +'">&#x00A0;</span>';
 clr1.setAttribute("droppable", "true");
clr1.removeAttribute("style");
}
var clsGallery = document.getElementById("gallery");
		updateDataTransfer();
	document.getElementById("btn2").style.display='none';
	document.getElementById("drop_3").style.display='none';
	document.getElementById("drop_4").style.display='none';
}

function check() {

	var checkAlbum = document.getElementsByClassName("album");
	var checkCount = 0;


	for(var i=1; i<=checkAlbum.length; i++) {
		var correctVal = document.getElementById("drop_"+i).getAttribute("droppable");
		if(correctVal=="false") {
			checkCount+=1;
		}
	}
	console.log(checkCount);
	if(checkCount==checkAlbum.length) {
		document.getElementById("btn2").style.display='block';
	}
for(var i=1; i<=checkAlbum.length; i++) {
	var correctVal = document.getElementById("a_drop_"+i);
	var matchVal = document.getElementById("ans1_"+i);
	if (correctVal.innerText==matchVal.innerText)
		{
			//correctVal.style.backgroundColor = "#008000";
			//var an = document.getElementById("aa"+i);
			correctVal.setAttribute("style","background-color:#008000;border: 8px solid #008000;color:#FFFFFF;")
		}
		else
		{
			//var an = document.getElementById("aa"+i);
			correctVal.setAttribute("style","background-color:#FF0000;border: 8px solid #FF0000;color:#FFFFFF;")
		}
	document.getElementById("btn2").style.display='block';
	}
}

var sc = 2;

function answer() {
	document.getElementById("drop_3").style.display='none';
	document.getElementById("drop_4").style.display='none';
	if (sc=="1") {
	document.getElementById("drop_3").style.display='none';
	document.getElementById("drop_4").style.display='none';
		sc += 1
	 } else {
	document.getElementById("drop_3").style.display='block';
	document.getElementById("drop_4").style.display='block';
		sc -= 1
	}






		//clear1()




//	var answer = document.getElementsByClassName("album");
//for(var ii=1; ii<=answer.length; ii++) {
//		var correctVal = document.getElementById("drop_"+ii);
//		var matchVal = document.getElementById("ans1_"+ii);
//	correctVal.innerHTML=matchVal.innerHTML;
//	//correctVal='<span class="ans">'+ correctVal + '</span>';
//	//correctVal.setAttribute("style","font-size:1.5em;color:#FFFFF;background-color:#008000;")
//	correctVal.setAttribute("droppable", "false");
//	correctVal.innerHTML = '<span class="ans" id="aa'+ ii +'">'+ correctVal.innerHTML + '</span>';
//			var an = document.getElementById("aa"+ii);
//			an.setAttribute("style","background-color:#008000;border: 8px solid #008000;color:#FFFFFF;")
//
//
//	}
}
