[Arramis]

здравстуйте господа.
Есть код который создает некоторое кол-во блоков внутри одного блока и распологает их отсортированно друг за другом (смотри выполнение).

<table>
	<tr>
		<td>
			<div id = "boxes_container">				
			</div>
		</td>
	</tr>	
</table>
<style>
table {
	margin: 0 auto;
}

#boxes_container {
	width: 500px;
	height: 350px;
	position: relative;
}

.hidden_box {
	margin: 1px;
	padding: 1px;
	border: 1px solid black;
	position: absolute;
}
</style>
<script type = 'text/javascript'>
	var boxesNumber = 12, boxContainer = document.getElementById("boxes_container");
	function createHiddenBoxes() {
		var hiddenBox;
		for (i = 0; i < boxesNumber; i++) {
			hiddenBox = document.createElement("div");
			hiddenBox.className = "hidden_box";
			hiddenBox.id = "hidden_box" + i;
			hiddenBox.style.width = 95 + 'px';
			hiddenBox.style.height = 70 + 'px';
			boxContainer.appendChild(hiddenBox);
		}
	}
	
	function sortHiddenBoxes() {
		var hiddenBoxes = boxContainer.getElementsByClassName("hidden_box"),
			x = 0, y = 0, deltaX = 100, deltaY = 75;									
		for (var i = 0; i < boxesNumber; i++) {
			if (i == 0) hiddenBoxes[i].style.top = 5 + 'px';
			if (i != 0 && i < 4) {
				x += deltaX;
				hiddenBoxes[i].style.left = x + 'px';
				hiddenBoxes[i].style.top = 5 + 'px';
			} 
		}
		x = -deltaX;
		for (var j = 0; j < boxesNumber; j++) {
			if (j > 3) {
				x += deltaX;
				y = deltaY;
				hiddenBoxes[j].style.left = x + 'px';
				hiddenBoxes[j].style.top = y + 'px';
			}
		}
		x = -deltaX;
		y = 2 * deltaY;
		for (var k = 0; k < boxesNumber; k++) {
			if (k > 7) {
				x += deltaX;
				hiddenBoxes[k].style.left = x + 'px';
				hiddenBoxes[k].style.top = y + 'px';
			}
		}
	}	
	createHiddenBoxes(); sortHiddenBoxes();		
</script>

необходимо переписать функцию sortHiddenBoxes() так чтобы она каждый раз динамически отрисовывала блоки в зависимости от переменной boxesNumber в которой указывается число блоков - значение для этой переменной тянется из базы и иногда может быть разным (это кол-во картинок которые расположены в одной общей картинке (4 x 3, 5 x 20) по 4 картинки на каждой строке с 5ью столбцами и т.д.)
Мой гавнокодский вариант работает только для случая 4 x 3 (12 блоков - потому что большинство картинок будут иметь в себе 12 картинок, но большинство не означает ВСЕ!!).
Помогите избавиться от этих 3 циклов for() {} сделав код покороче и универсальнее (