var grid = new Array(
	// 1 Column Order
	[[1,0,3,2,4,5,7,6,8,9]],
	// 2 Column Order
	[[0,2,4,6,8],
	 [1,3,5,7,9]],
	// 3 Column Order
	[[0,4,2],
	 [3,6,8,9],
	 [1,7,5]],
	// 4 Column Order
	[[0,2],
	 [3,5,8],
	 [1,6],
	 [4,9,7]]
);
var currentCols = 0;
var tiles;
var mt = 0;

setCssRule('#fmt_content_wrapper', 'width: ' + wrapperWidth() + 'px');
setCssRule('#tiling', 'visibility: hidden');
setEvent(window, 'load', initTop);
setEvent(window, 'resize', resizeTop);

function setEvent(ele, e, func) {
	if (ele.addEventListener) ele.addEventListener(e, func, false);
	else if (ele.attachEvent) ele.attachEvent('on' + e, func);
	else ele['on' + e] = func;
}
function initTop() {
	box = document.getElementById('fmt_content_wrapper');
	tiles = document.getElementById('tiling').getElementsByTagName('li');
	resizeTop();
	layoutTop();
	shuffleTop();
	setCssRule('#tiling', 'visibility: visible');
}

function layoutTop(f) {
	var g = grid[currentCols - 1];
	var y = new Array(0,0,0,0);
	var max = 0;
	for (var i = 0; i < currentCols; i++) {
		for (var j = 0; j < g[i].length; j++) {
			tiles[g[i][j]].TX = i * 330;
			tiles[g[i][j]].TY = y[i];
			tiles[g[i][j]].style.zIndex = Math.floor(Math.random() * 10);
			tiles[g[i][j]].O = .3;
			tiles[g[i][j]].W = Math.floor(Math.random() * 10);
			y[i] += tiles[g[i][j]].offsetHeight;
		}
		if (max < y[i]) max = y[i];
	}
	box.H = max - 10;
	clearTimeout(mt);
	mt = setTimeout(moveGrid, 40);
}
function shuffleTop(f) {
	var g = grid[currentCols - 1];
	var y = new Array(0,0,0,0);
	for (var i = 0; i < currentCols; i++) {
		for (var j = 0; j < g[i].length; j++) {
			tiles[g[i][j]].X = i * 330 + Math.floor(Math.random() * 200 - 100);
			tiles[g[i][j]].Y = y[i] + Math.floor(Math.random() * 200 - 100);
			tiles[g[i][j]].O = 0;
			tiles[g[i][j]].style.position = 'absolute';
			tiles[g[i][j]].style.left = tiles[g[i][j]].X + 'px';
			tiles[g[i][j]].style.top = tiles[g[i][j]].Y + 'px';
			y[i] += tiles[g[i][j]].offsetHeight;
			opacity(tiles[g[i][j]]);
		}
	}
}
function moveGrid() {
	var f = false;
	box.style.width = Math.round(box.offsetWidth + (box.W - box.offsetWidth) * .2) + 'px';
	if (Math.abs(box.offsetWidth - box.W) > 2) f = true;
	else box.style.width = box.W + 'px';
	box.style.height = Math.round(box.offsetHeight + (box.H - box.offsetHeight) * .2) + 'px';
	if (Math.abs(box.offsetHeight - box.H) > 2) f = true;
	else box.style.height = box.H + 'px';
	for (var i = 0; i < tiles.length; i++) {
		if (Math.abs(tiles[i].X - tiles[i].TX) > .3 ||
			Math.abs(tiles[i].Y - tiles[i].TY) > .3) f = true;
		if (--tiles[i].W > 0) continue;
		tiles[i].X += (tiles[i].TX - tiles[i].X) * .3;
		tiles[i].Y += (tiles[i].TY - tiles[i].Y) * .3;
		tiles[i].O = (tiles[i].O < 1) ? tiles[i].O + .1 : 1;
		tiles[i].style.left = Math.round(tiles[i].X) + 'px';
		tiles[i].style.top = Math.round(tiles[i].Y) + 'px';
		opacity(tiles[i]);
	}
	if (f) mt = setTimeout(moveGrid, 30);
}
function resizeTop() {
	var cols = currentCols;
	box.W = wrapperWidth();
	if (cols != currentCols) layoutTop();
}
function wrapperWidth() {
	var w = (document.documentElement.clientWidth || window.innerWidth) - 20;
	var c = Math.floor((w - 260) / 330);
	if (c < 1) c = 1;
	if (c > 4) c = 4;
	currentCols = c;
	return 260 + c * 330;
}
function opacity(ele) {
	ele.style.opacity = ele.O;
	ele.style.filter = 'alpha(opacity=' + (ele.O * 100) + ')';
}
function setCssRule(ele, style) {
	if (document.styleSheets && document.styleSheets.length) {
		var sheet = document.styleSheets[0];
		if (sheet.insertRule) {
			sheet.insertRule(ele + '{' + style + '}', sheet.cssRules.length);
		} else if (sheet.addRule) {
			sheet.addRule(ele, style);
		}
	}
}