/*
<style>
td.surroundcell {
	border: thin solid #aaa;
	padding: 0;
	height: 20px;
	width: 20px;
	cursor: pointer;
	text-align: center;
	text-size: 4pt;
}
</style>
*/

(function () {
    var swapper =
        function (a,L,e) {
            var r = Math.floor(Math.random()*L);
            var x = a[e];
            a[e] = a[r];
            a[r] = x;
        };
    Array.prototype.shuffle =
        function () {
            var i,L;
            i = L = this.length;
            while (i--) swapper(this,L,i);
        };
})();

var open_snake_demo = function () {

	var sz = 30;

	var table = document.createElement('table');
	table.cellspacing = 0;
	table.cellpadding = 0;
	table.style.borderCollapse = 'collapse';

	var caption = document.createElement('caption');
	caption.innerHTML = 'Click on a blank square to start a snake';
	table.appendChild(caption);
	var tbody = document.createElement('tbody');
	var x=sz, y;
	var tr, td;

	var arrow = {
		north: '&uarr;', south: '&darr;', east: '&rarr;', west: '&larr;'
	};

	var cell_is_free = function (here) {
		return(here && ! here.taken);
	};

	var random_dir = function (cell) {
		var dirs = ['north', 'south', 'east', 'west'];
		var freedirs = [];
		for (var i=0,dir; dir=dirs[i]; ++i) {
			if (cell_is_free(cell[dir])) {
				freedirs.push(dir);
			}
		}
		if (freedirs.length) {
			freedirs.shuffle();
			return freedirs[0];
		}
		else {
			return false;
		}
	};

	var take_cell = function (cell, bg_color, fg_color) {
		cell.taken = true;
		cell.style.color = bg_color;
		cell.innerHTML = 'X'; // FIXME
	};

	var clear_cell = function (cell) {
		cell.taken = false;
		cell.style.color = cell.style.backgroundColor = '';
		cell.innerHTML = '&nbsp;';
	};

	var generate_colors = function () {
		var bg = Math.floor(Math.random() * 0xffffff);
		var fg = bg ^ 0xffffff;
		bg = bg.toString(16);
		while (bg.length < 6) bg = '0' + bg;
		bg = '#' + bg;
		fg = fg.toString(16);
		while (fg.length < 6) fg = '0' + fg;
		fg = '#' + fg;
		return { fg: fg, bg: bg };
	};

	var start_snake = function (cell) {
		var current = cell;
		var tail = cell;

		current.taken = true;

		var color = generate_colors();

		current.style.backgroundColor = color.bg;
		current.style.color = color.fg;

		var facing = random_dir(current);
		current.innerHTML = arrow[facing];

		var snake_interval = setInterval(function () {

			while (! cell_is_free(current[facing])) {

				if (tail && tail.went) {
					// shorten the tail when we hit something
					clear_cell(tail);
					tail = tail.went[snake_interval];
				}
				else {
					console.log('no tail!');
					clearInterval(snake_interval);
					current.style.backgroundColor = '';
					current.taken = false;
					current.innerHTML = '&nbsp;';
					return false;
				}

				facing = random_dir(current);

				if (! facing) { // we're trapped
					return false;
				}

			}

			// breadcrumb trail
			if (! current.went) current.went = {};
			current.went[snake_interval] = current[facing];

			current.style.border = '';
			current = current[facing];

			current.taken = true;
			current.interval = snake_interval;
			current.style.backgroundColor = color.bg;
			current.style.color = color.fg;
			current.style.border = 'thin solid ' + color.fg;
			current.innerHTML = arrow[facing];
		}, Math.floor(Math.random() * 300)+50);

	};

	var make_onclick = function (cell) {
		return function () {
			if (cell.taken) {
				clearInterval(cell.interval);
			}
			else {
				start_snake(cell);
			}
		};
	};

	while (x-- > 0) {
		tr = document.createElement('tr');
		y = sz;
		while (y-- > 0) {
			td = document.createElement('td');
			td.className = 'surroundcell';
			td.onclick = make_onclick(td);
			td.innerHTML = '&nbsp;';
			tr.appendChild(td);
		}
		tbody.appendChild(tr);
	}

	table.appendChild(tbody);
	document.getElementById('playfield').appendChild(table);
	coordinate(table);
};