// lowercases are global VALUES
// uppercases are global FUNCTIONS
// local values are t, T, i, j, k

// jshint ignore: start

// -- globals and methods and shorthands --

a = new AudioContext;

d(); // remove canvas

function P(f, n, g, o) { // play a note with frequency

	n = a.currentTime;

	g = a.createGain();
	with (g) {
		with (gain) {
			setValueAtTime(1, n);
			linearRampToValueAtTime(0, n + 1);
		}
		connect(a.destination);
	}

	o = a.createOscillator();
	o.frequency.value = f;
	o.connect(g);
	if (o.noteOn) {
		o.noteOn(n);
		o.noteOff(n + 1);
	} else {
		o.start(n);
		o.stop(n + 1);
	}

	setTimeout(function() {
		o.disconnect(g);
		g.disconnect(a.destination);
	}, 1e3);

}

n = [
	123.47,
	196,
	246.94,
	392,
	493.88,
	783.99,
	987.77,
	1567.98
];

r = [];

// -- add the elements to the DOM --

T = document.createElement('table');
T.id = 'p';
b.appendChild(T); // add table to body
for (i = 8; i --;) {

	T = document.createElement('tr');

	for (j = 8; j --;) {

		// make a <td>
		t = document.createElement('td');
		t.f = n[i];
		t.width = t.height = 64;
		t.style.transition = 'background-color .2s ease';

		// toggle background and status on click
		t.onclick = function() {
			this.o = !this.o;
		};

		T.appendChild(t); // add column to row
		r.push(t);

	}

	p.appendChild(T); // add row to table

}

// -- styles --

with (document.documentElement.style) {
	display = 'table';
	width = height = '100%';
	background = '#222';
}
with (b.style) {
	display = 'table-cell';
	width = height = '100%';
	verticalAlign = 'middle';
	textAlign = 'center';
	fontFamily = 'sans-serif';
	color = '#fff';
}
with (p.style) {
	margin = '1em auto';
	cursor = 'pointer';
	background = '#fff';
}

// -- play that funky music --

b = 7;
setInterval(function() {

	b = (++b) % 8;

	for (i = 64; i --;) {

		t = r[i];

		if ((i % 8) == b) { // it's the current beat for this one
			if (t.o) {
				P(t.f);
				t.style.background = '#3b3';
			} else {
				t.style.background = '#020';
			}
		} else {
			if (t.o) {
				t.style.background = '#fff';
			} else {
				t.style.background = '#000';
			}
		}

	}

}, 500);

// -- parse location.hash --

if (location.hash.length < 2) {
	for (i = 64; i --;) {
		location.hash += (Math.random() > .2) ? 0 : 1;
	}
}

for (i in location.hash) {
	if (r[i - 1]) {
		r[i - 1].o = parseInt(location.hash[i]);
	}
}

@@ -1320,24 +1320,86 @@
 o table%0A%0A%7D%0A%0A
+// b.innerHTML += '%3Cbutton onclick=%22R()%22%3Enew song%3C/button%3E';%0A%0A
 // -- styles
@@ -1873,21 +1873,8 @@
  %7B%0A%0A
-%09%09t = r%5Bi%5D;%0A%0A
 %09%09if
@@ -1928,33 +1928,36 @@
 this one%0A%09%09%09if (
-t
+r%5Bi%5D
 .o) %7B%0A%09%09%09%09P(t.f)
@@ -1952,17 +1952,20 @@
 %7B%0A%09%09%09%09P(
-t
+r%5Bi%5D
 .f);%0A%09%09%09
@@ -1961,25 +1961,28 @@
 %5Bi%5D.f);%0A%09%09%09%09
-t
+r%5Bi%5D
 .style.backg
@@ -2005,33 +2005,36 @@
 %09%09%09%7D else %7B%0A%09%09%09%09
-t
+r%5Bi%5D
 .style.backgroun
@@ -2068,17 +2068,20 @@
 %0A%09%09%09if (
-t
+r%5Bi%5D
 .o) %7B%0A%09%09
@@ -2078,25 +2078,28 @@
 i%5D.o) %7B%0A%09%09%09%09
-t
+r%5Bi%5D
 .style.backg
@@ -2130,17 +2130,20 @@
 e %7B%0A%09%09%09%09
-t
+r%5Bi%5D
 .style.b
@@ -2196,60 +2196,36 @@
  -- 
-parse location.hash --%0A%0Aif (location.hash.length %3C 2
+reset stuff --%0A%0A(function R(
 ) %7B%0A
@@ -2253,26 +2253,17 @@
 %7B%0A%09%09
-location.hash +
+r%5Bi%5D.o 
 = 
-(
 Math
@@ -2276,117 +2276,19 @@
 m() 
-%3E .2) ? 0 : 1;%0A%09%7D%0A%7D%0A%0Afor (i in location.hash) %7B%0A%09if (r%5Bi - 1%5D) %7B%0A%09%09r%5Bi - 1%5D.o = parseInt(location.hash%5Bi%5D);%0A%09%7D%0A%7D
+%3C .3;%0A%09%7D%0A%7D)();
 %0A

remove location.hash stuff, begin to add reset feature