function blink(selector){
 $(selector).fadeOut('slow', function(){
   $(this).fadeIn('slow', function(){
    blink(this);
   });
 });
}

// Make x and y and theSheet global variables
x=0
y=0
theSheet=0


count = 0

preferSlices = 0 // 0=z, 1=y, 2=x



function beep() {
    var snd = new Audio(
		"data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU="
	);
    snd.play();
}

function introMusic(count) {
	//var snd = new Audio('https://math.hawaii.edu/~bjoern/scripts/labbymusic.mp3');
	if (count % 5 == 1) {
		snd = new Audio('https://math.hawaii.edu/~bjoern/scripts/one.mp3');
	}
	if (count % 5 == 2) {
		snd = new Audio('https://math.hawaii.edu/~bjoern/scripts/two.mp3');
	}
	if (count % 5 == 3) {
		snd = new Audio('https://math.hawaii.edu/~bjoern/scripts/three.mp3');
	}
	if (count % 5 == 4) {
		snd = new Audio('https://math.hawaii.edu/~bjoern/scripts/four.mp3');
	}
	if (count % 5 == 0) {
		snd = new Audio('https://math.hawaii.edu/~bjoern/scripts/five.mp3');
	}
	snd.play();
}

function yay() {
	var snd = new Audio('https://math.hawaii.edu/~bjoern/scripts/labby.mp3');
	snd.play();
}

function makeId(x1, y1, z1) {
	return 'labby'  + x1.toString()   + "_" + y1.toString()  + "_" + z1.toString();
}

function makeJQueryId(x1, y1, z1) {
	//return '#labby' + x1.toString() + "\\," + y1.toString() + "\\," + z1.toString();
	return '#labby' + x1.toString() + "_" + y1.toString() + "_" + z1.toString();
}

function close3D(u,v) {
	[x1,y1,z1]=u;
	[x2,y2,z2]=v;
    if (x1==x2 && y1==y2 && z1 == z2 - 1) {
        return true
    }
    if (x1==x2 && y1==y2 && z1 == z2 + 1) {
        return true
    }
    if (x1==x2 && y1==y2 + 1 && z1 == z2) {
        return true
    }
    if (x1==x2 && y1==y2 - 1 && z1 == z2) {
        return true
    }
    if (x1==x2 + 1 && y1==y2 && z1 == z2) {
        return true
    }
    if (x1==x2 - 1 && y1==y2 && z1 == z2) {
        return true
    }
    return false
}


function prevSheet(theSheet) {
	return theSheet;
/*	if (theSheet == 0) {
		return 0;
	} else {
		return theSheet - 1;
	}
*/
}

function close(i,j,k,l) { // are positions (i,j) and (k,l) at a Hamming distance of 1.
	return (
		(i == k+1 && j == l)
		|| (i == k && j == l+1)
		|| (i == k && j == l-1)
		|| (i == k-1 && j == l)
	)
}
keyCaps = [
	"0️⃣","1️⃣","2️⃣","3️⃣","4️⃣","5️⃣","6️⃣","7️⃣","8️⃣","9️⃣",
	"🅰️","🅱️","🇨","🇩","🇪","🇫","🇬","🇭","🇮","🇯",
	"🇰","🇱","🇲","🇳","🅾️","🇵","🇶","🇷","🇸","🇹",
	"🇺","🇻","🇼","❌","🇾","🇿","🕐","🕑","🕒","🕓",
	"🕔","🕕","🕖","🕗","🕘","🕙","🕚",
	"0️⃣" //,"1️⃣" //,"2️⃣","3️⃣","4️⃣","5️⃣","6️⃣","7️⃣","8️⃣","9️⃣"
]
	//"🅿"
	//If we reuse letters then for instance the 1 will become turd when sweeping for turds.
	//Solution: if it's the last of all letters and connected to a next-to-last then leave it alone
	//but that's just a band-aid as we can only add one 

/*keyCaps = [
	"0️⃣","1️⃣","2️⃣","3️⃣","4️⃣","5️⃣","6️⃣","7️⃣","8️⃣","9️⃣","🔟" // could use ① but then would need to font-size: 128px; vertical-align: middle;
]*/
// less confusing in the 3D case

//keyCaps = [keyCaps[0],keyCaps[1],keyCaps[2]]; // temporarily while debugging

// Can Labby find his way using DFA by the rightmost wall method (Wall-follower algorithm)? does it even work in 3D? does nfa=dfa in 2d but not in 3d?
// well no ``is there an island'' is probably in nfa\dfa even in 2d? well, no: ``is there a bounded size island'' is in dfa if we can freely fly over the land,
// and ``is there an arbitrary sized island'' is not even in nfa, since how do we know when we have completely circled the island?

function handle_keypress_or_onclick(xs,ys,sheets,theKey) {
	//blink('.blink');
	count += 1;
	//introMusic(count);
	//introMusic(theSheet + 1); // Nina didn't like this way.
	document.getElementById('moves_made').innerHTML += theKey;
	document.getElementById('num_moves').innerHTML = document.getElementById('moves_made').innerHTML.length.toString();
	labbyId = makeId(x,y,theSheet);

	if (document.getElementById(count-1).innerHTML == "0") {
		document.getElementById(labbyId).innerHTML = "🔴"; // "💩"; that usage is passe
//		document.getElementById(count-1).style.backgroundColor = "white";
		$("." + labbyId).html("🔴"); // this is supposed to update the y-slices as well
	} else {
		document.getElementById(labbyId).innerHTML = "🔵"; // "💩"; that usage is passe
		$("." + labbyId).html("🔵"); // this is supposed to update the y-slices as well
//		document.getElementById(count-1).style.backgroundColor = "white";
	}

	//alert("Sorry for the debugging... you are at " + x.toString() + ", " + y.toString() + " on sheet "+theSheet.toString())
	oldX = x
	oldY = y
	oldTheSheet = theSheet
	if (theKey == "w") {
		y -= 1;
		if (y < 0) {y=0;}
	}
	if (theKey == "a") {
		x -= 1;
		if (x<0) {x = 0;}
	}
	if (theKey == "s") {
		y += 1;
		if (y>= ys) {y=ys - 1;}
	}
	if (theKey == "d") {
		x += 1;
		if (x>xs - 1) {x=xs - 1;}
	}
	if (theKey == "f") {
		theSheet += 1;
		if (theSheet > sheets - 1) {theSheet = sheets - 1;}
	}
	if (theKey == "e") {
		theSheet -= 1;
		if (theSheet <0) {theSheet = 0;}
	}
	$(".coords").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (" + x.toString() + ", " + y.toString() + ", " + theSheet.toString() + ")");
	labbyId       = makeId(x,y,theSheet);
	jQueryLabbyId = makeJQueryId(x,y,theSheet);
	if (
		$(jQueryLabbyId).html() != "🔴" // if the new place is not already used then put Labby there.
		&& $(jQueryLabbyId).html() != "🔵"
	) {
		$(jQueryLabbyId).html("🦄 "); // 🤣😈
		$("." + labbyId).html("🦄 ");// to make yslices work too
		document.getElementById(count-1).style.backgroundColor = "white";
		locations[count] = [x,y,theSheet];
		for (loc=0;loc<count-2;loc++) {
			if (
				close3D(locations[loc],locations[count-1])
				&&
				(document.getElementById('labby'+(locations[loc][0]).toString() + "_" + (locations[loc][1]).toString() + "_" + (locations[loc][2]).toString()).innerHTML == "🔴")
				&&
				(document.getElementById('labby'+(locations[count-1][0]).toString() + "_" + (locations[count-1][1]).toString() + "_" + (locations[count-1][2]).toString()).innerHTML == "🔴")
			) {
				console.log("Point achieved at loc="+loc.toString());
				points += 1;
				document.getElementById('score').innerHTML = points.toString();
			}
		}
		// if near one of the previous locations of the same color then add a point.
	}
	else {
		beep();		
		x = oldX
		y = oldY
		theSheet = oldTheSheet
		labbyId = makeId(x,y,theSheet);
		document.getElementById(labbyId).innerHTML = "🦄 ";
		$("." + labbyId).html("🦄 "); // this is supposed to update the y-slices as well
		count -= 1;
	}




	if ((theKey) == "r") { // rotate perspective
		preferSlices = (preferSlices + 1) % 3
		if (preferSlices == 0) { // z-slices
			document.getElementById('sheet'+prevSheet(theSheet).toString()).scrollIntoView(
				{
					behavior: 'smooth'
				});
		}
		if (preferSlices == 1) { // y-slices
			document.getElementById('yslice'+y.toString()).scrollIntoView(
				{
					behavior: 'smooth'
				});
		}
		if (preferSlices == 2) { // x-slices
			document.getElementById('xslice'+x.toString()).scrollIntoView(
				{
					behavior: 'smooth'
				});
		}
	}
}

$(document).ready(function(){
	//$('body').addClass('blink');
	//blink('.blink');
	points = 0
	document.getElementById('labby_headline').scrollIntoView(
		{
			behavior: 'smooth'
		});
	for (bit=0; bit<document.getElementsByClassName('digits').length; bit++) {
		if (document.getElementById(bit).innerHTML == "0") {
			document.getElementById(bit).style.backgroundColor = "red";
		} else {
			document.getElementById(bit).style.backgroundColor = "blue";
		}
	}

	xs     = parseInt($('#x').html());
	ys     = parseInt($('#y').html());
	sheets = parseInt($('#z').html());

	x = Math.floor(xs/2);
	y = Math.floor(ys/2);
	theSheet = 0;
	locations = [[x,y,0]]

	//$('#labby').css(".blink_me {animation: blinker 1s linear infinite;}@keyframes blinker {50% {opacity: 0;}}");
	//$('body').style = ".blink_me {animation: blinker 1s linear infinite;}@keyframes blinker {50% {opacity: 0;}}";
	$(document).keypress(
		function(event){
			theKey = String.fromCharCode(event.which);
			handle_keypress_or_onclick(xs,ys,sheets,theKey);
			if (count >= document.getElementsByClassName('digits').length) {
				alert('You are done! Score: ' + points.toString());
				location.reload();
			}
		}
	);
	$('.press_q').click(function(event){
		handle_keypress_or_onclick(xs,ys,sheets,"q");
		}
	); // end of keypress
	$('.press_w').click(function(event){
		handle_keypress_or_onclick(xs,ys,sheets,"w");
		}
	); // end of keypress
	$('.press_e').click(function(event){
		handle_keypress_or_onclick(xs,ys,sheets,"e");
		}
	); // end of keypress
	$('.press_r').click(function(event){
		handle_keypress_or_onclick(xs,ys,sheets,"r");
		}
	); // end of keypress
	$('.press_a').click(function(event){
		handle_keypress_or_onclick(xs,ys,sheets,"a");
		}
	); // end of keypress
	$('.press_s').click(function(event){
		handle_keypress_or_onclick(xs,ys,sheets,"s");
		}
	); // end of keypress
	$('.press_d').click(function(event){
		handle_keypress_or_onclick(xs,ys,sheets,"d");
		}
	); // end of keypress
	$('.press_f').click(function(event){
		handle_keypress_or_onclick(xs,ys,sheets,"f");
		}
	); // end of keypress
}); // end of document ready



// googleanalytics:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20074178-1']);
_gaq.push(['_trackPageview']);
(function() {
	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = jQuery('script')[0]; s.parentNode.insertBefore(ga, s);
	})();