var dim = 5;
var tx = dim - 1;
var ty = dim - 1;
var img = 'img/magnolia.jpg';
var bgcol = 'gray';
var bkg, imobj, imW, imH;

function initTiles() {
    initGlobals();
    if (!initFrame()) return;
    initBackground();
    writeTiles();
    randomizeTiles(dim*dim*10);
}

function initGlobals() {
    var srch = window.location.search.substr(1).split("&"); 
    for (var i = 0; i < srch.length; i++){
	if (srch[i].split("=")[0] != 'img') continue;
	img = unescape(srch[i].split("=")[1]);
    }
}

function initFrame() {
    if (!imobj) {
	imobj = new Image();
	imobj.src = img;
    }
    if (!imobj.complete) {
	setTimeout("initTiles()",100);
	return false;
    }
    imW = imobj.width;
    imH = imobj.height;
    document.getElementById('frame').setAttribute('style','margin-top: 20px; border: 1px solid '+bgcol+'; width: '+imW+'px; height: '+imH+'px;');
    return true;
	
}

function initBackground() {
    bkg = new Array(dim);
    for (var x = 0; x < dim; x++) {
	bkg[x] = new Array(dim);
	for (var y = 0; y < dim; y++) {
	    bkg[x][y] = "" + x*(-imW/dim)+"px " + y*(-imH/dim)+"px";
	}
    }
}

function writeTiles() {
    var p = document.getElementById('frame');
    p.style.marginLeft = '' + (p.parentNode.offsetWidth - p.offsetWidth)/2 + 'px';
    for (var y = 0; y < dim; y++) {
	for (var x = 0; x < dim; x++) {
	    p.appendChild(document.createTextNode("\n      "));
	    var d = document.createElement('div');
	    d.setAttribute('id','div_'+x+'_'+y);
	    d.setAttribute('onclick','onTileClick('+x+','+y+',1);');
	    d.setAttribute('style','float: left; border: 1px solid '+bgcol+'; width: '+(imW/dim-2)+'px; height: '+(imH/dim-2)+'px;');
	    d.appendChild(document.createTextNode("\n      "));
	    if (x == tx && y == ty) {
		d.style.backgroundColor = bgcol;
	    } else {
		d.style.backgroundImage = 'url("'+img+'")';
		d.style.backgroundPosition = bkg[x][y];
	    }
            p.appendChild(d);
	}
    }
    p.style.backgroundImage = 'url("'+img+'")';
}

function randomizeTiles(c) {
    var r;
    while (c-- > 0) {
	r = Math.floor(Math.random()*(dim-1)*2);
	if (r < dim - 1) {
	    if (tx <= r) r++;
	    onTileClick(r,ty);
	} else {
	    r -= dim - 1;
	    if (ty <= r) r++;
	    onTileClick(tx,r);
	}
    }
}

function onTileClick(x, y, ch) {
    if ((y == ty && x != tx) || (x == tx && y != ty)) {
	var d, shift;
	if (y == ty) {
	    shift = (x < tx ? -1 : 1);
	    bkg[tx][ty] = bkg[tx + shift][ty];
	    d = document.getElementById('div_'+tx+'_'+ty);
	    d.style.backgroundPosition = bkg[tx][ty];
	    d.style.backgroundImage = 'url("'+img+'")';
	    for (var i = tx + shift; i*shift < x*shift; i += shift) {
		bkg[i][ty] = bkg[i + shift][ty];
		d = document.getElementById('div_'+i+'_'+ty);
		d.style.backgroundPosition = bkg[i][ty];
	    }
	} else if (x == tx) {
	    shift = (y < ty ? -1 : 1);
	    bkg[tx][ty] = bkg[tx][ty + shift];
	    d = document.getElementById('div_'+tx+'_'+ty);
	    d.style.backgroundPosition = bkg[tx][ty];
	    d.style.backgroundImage = 'url("'+img+'")';
	    for (var i = ty + shift; i*shift < y*shift; i += shift) {
		bkg[tx][i] = bkg[tx][i + shift];
		d = document.getElementById('div_'+tx+'_'+i);
		d.style.backgroundPosition = bkg[tx][i];
	    }
	}
	d = document.getElementById('div_'+x+'_'+y);
	d.style.backgroundImage = '';
	d.style.backgroundColor = bgcol;
	tx = x;
	ty = y;
	if (ch) checkTiles();
    }
}

function checkTiles() {
    var x,y;
    for (y = dim-1; y >= 0; y--) {
	for (x = dim - 1; x >= 0; x--) {
	    if (x == tx && y == ty) continue;
	    if (bkg[x][y] != "" + x*(-imW/dim)+"px " + y*(-imH/dim)+"px") return;
	}
    }
    x = document.getElementById('frame');
    while (y = x.lastChild) x.removeChild(y);
}