// JavaScript Document

curid = false;
colNum = 4;
rowNum = 0;

$(document).ready(function(){
	$(".box").mouseover( function() {
		moveBox(this.id);
	});
	$(".box2").mouseover( function() {
		resetAll();
	});
	var length = $(".box, .box2").length;
	rowNum = parseInt(length/colNum);
	if (length%colNum > 0) rowNum++;
});


function moveBox(id) {
	var tempid = id.replace("r", '').replace("col", '').split("-");;
	var row = parseInt(tempid[0]);
	var col = parseInt(tempid[1]);
	$("#"+id).unbind();
	if (curid) {
		$("#"+curid).mouseover( function() {
			moveBox(this.id);
		});
		$(".box, .box2").stop().dequeue().animate({height: "125px", width: "125px", marginLeft: "5px", marginTop: "5px", marginBottom: "5px"}, 400);
	} 
	movement(row, col);
	curid = id;
}

function movement(row, col) {
	$(".box, .box2").dequeue();
	$("#r"+row+"-col"+col).animate({ height: "260px", width: "260px"}, 500);
	if (col < colNum) {
		var j = 1;
		while ((col+j) <=colNum) {
			$("#r"+row+"-col"+(col+j)).animate({ marginLeft: "140px"}, 500);
			$("#r"+(row+1)+"-col"+(col+j)).animate({ marginLeft: "140px"}, 500);
			j++;
		}
			
	}
	if (row < rowNum) {
		var i = 1;
		while ((row+i) <=rowNum) {
			$("#r"+(row+i)+"-col"+col).animate({ marginTop: "140px"}, 500);
			i++;
		}
	}
}

function resetAll() {
	$(".box").mouseover( function() {
		moveBox(this.id);
	});
	$(".box, .box2").animate({height: "125px", width: "125px", marginLeft: "5px", marginTop: "5px", marginBottom: "5px"}, 400, function () { 
		$(".box, .box2").dequeue();
	});
}