var totalCorrect = 0;
var diff = 3;

$(document).ready(function() {
	$("#heading").find("#counter").append("<span>" + totalCorrect + "</span>");
	positionGreys("#Grey1", 300, 300);
	positionGreys("#Grey2", 300, 400);
	positionGreys("#Grey3", 300, 500);
	positionGreys("#Grey4", 300, 600);
	configureColors("#Green","#Grey4");
	configureColors("#Red","#Grey3");
	configureColors("#Blue","#Grey1");
	configureColors("#Yellow","#Grey2");
});
function checkCorrectness(id, target){
	var curTop = parseInt($(id).css("top"));
	var curLeft = parseInt($(id).css("left"));
	var targetTop = parseInt($(target).css("top"));
	var targetLeft = parseInt($(target).css("left"));
	if((targetTop+diff >= curTop) && (targetTop-diff <= curTop)){
		if ((targetLeft+diff >= curLeft) && (targetLeft-diff <= curLeft)){
			$(id).dragOff();
			$("#heading").find("#counter").find("span:last").remove();
			$("#heading").find("#counter").append("<span>" + ++totalCorrect + "</span>");
			if(totalCorrect == 4)alert("Victory!");
		}
	}	
}
function configureColors(id,target){
	$(id).css("width",  "90px");
	$(id).easydrag();
	$(id).ondrop(function(){
		checkCorrectness(id,target);});
}
function positionGreys(id, top, left){
	$(id).css("position",  "absolute");
	$(id).css("top",  (top));
	$(id).css("left",  (left));
}