var pg = 0;
var queue = Array();
var moving = false;
var shuffling = false;
var old_rd = -1;

window.onload = init;

function init()
{
	refresh();
	for (var i = 1; i < 16; i++) {
		document.getElementById("p" + i).onclick = boxclick;
	}
	setInterval(job, 10);

	var images = document.getElementById("backgrounds").getElementsByTagName("img");
	for (var i = 0; i < images.length; i++) {
		images[i].onclick = bgclick;
	}

	document.getElementsByTagName("input")[0].onclick = btnclick;
}


function job()
{
	if (shuffling && !moving) {
		shuffle();
	}
	if (queue.length && !moving) {
		var box = queue.shift();
		move(box);
	}
	if (moving) {
		movestep();
	}
}


function boxclick()
{
	if (queue.length < 10) queue.push(this);
}


function bgclick()
{
	document.getElementsByTagName("body")[0].id = this.src.replace(/.*\/([^-]*)-small.png/gi, "$1");
}


function btnclick()
{
	shuffling = !shuffling;
	this.value = (shuffling)?"Stop Shuffling":"Shuffle";
}

function move(box)
{
	var x = 0;
	var y = 0;
	var dirx = 0;
	var diry = 0;
	for (var i = 0; i < 4; i++) {
		if (pg[box.y][i] == 0) {
			x = i;
			y = box.y;
			dirx = 50 * ((box.x >= i)?-1:1);
			box.dirx = dirx;
			for (var j = box.x; j != i; j+=((box.x >= i)?-1:1)) {
				document.getElementById("p" + pg[box.y][j]).dirx = dirx;
			}
			moving = true;
			return;
		}
		if (pg[i][box.x] == 0) {
			x = box.x;
			y = i;
			diry = 50 * ((box.y >= i)?-1:1);
			box.diry = diry
			for (var j = box.y; j != i; j+=((box.y >= i)?-1:1)) {
				document.getElementById("p" + pg[j][box.x]).diry = diry;
			}
			moving = true;
			return;
		}
	}
}


function movestep()
{
	var ismoving = false;
	for (var i = 1; i < 16; i++) {
		var box = document.getElementById("p" + i);
		if (box.dirx && box.dirx != 0) {
			box.style.left = box.offsetLeft + 10 * (box.dirx / Math.abs(box.dirx)) + "px";
			box.dirx -= 10 * (box.dirx / Math.abs(box.dirx));
			if (box.dirx != 0) {
				ismoving = true;
			}
		}
		if (box.diry && box.diry != 0) {
			box.style.top = box.offsetTop + 10 * (box.diry / Math.abs(box.diry)) + "px";
			box.diry -= 10 * (box.diry / Math.abs(box.diry));
			if (box.diry != 0) {
				ismoving = true;
			}
		}
	}
	moving = ismoving;
	if (!moving) {
		refresh();
	}
}


function refresh()
{
	pg = Array(Array(0,0,0,0),Array(0,0,0,0),Array(0,0,0,0),Array(0,0,0,0));
	for (var i = 1; i < 16; i++) {
		var box = document.getElementById("p" + i);
		pg[box.offsetTop / 50][box.offsetLeft / 50] = i;
		box.x = box.offsetLeft / 50;
		box.y = box.offsetTop / 50;
	}
}


function shuffle()
{
	var x = -1;
	var y = -1;
	for (var i = 0; i < 4; i++) {
		for (var j = 0; j < 4; j++) {
			if (pg[i][j] == 0) {
				var rd = Math.round(Math.random() * 3);
				var test_rd = (old_rd + 2 > 3)?old_rd - 2:old_rd + 2;
				if (rd == test_rd) rd++;
				if (rd > 3) rd = 0;
				if (i == 0 && rd == 0) { rd = 2; }
				if (j == 3 && rd == 1) { rd = 3; }
				if (i == 3 && rd == 2) { rd = 0; }
				if (j == 0 && rd == 3) { rd = 1; }
				switch (rd) {
					case 0:
						x = j;
						y = i - 1;
						break;
					case 1:
						x = j + 1;
						y = i;
						break;
					case 2:
						x = j;
						y = i + 1;
						break;
					case 3:
						x = j - 1;
						y = i;
						break;
				}
				queue.push(document.getElementById("p" + pg[y][x]));
				old_rd = rd;
			}
		}
	}
}