var boxes;

function Box(name) {
	this.name = name;
	this.x = Math.round((windowWidth - 100) * Math.random());
	this.y = 220 + Math.round((windowHeight - 220 - 12) * Math.random());
	this.width = 5 + Math.round(100 * Math.random());
	this.height = 2 + Math.round(10 * Math.random());
	this.speed = 2 * Math.random();
}

function drawBoxes() {
	getWindowSize();

	// Move the boxes
	for (var i = 0; i < boxes.length; i++) {
		var e = document.getElementById(boxes[i].name);
		boxes[i].x += boxes[i].speed;
		// Create new boxes if box beyond window
		if (boxes[i].x >= windowWidth - 3) {
			boxes[i] = new Box("box" + (i + 1));
			boxes[i].x = -boxes[i].width;
			e.style.width = boxes[i].width + "px";
		}
		if (boxes[i].x + boxes[i].width >= windowWidth - 3) {
			boxes[i].width = windowWidth - 3 - boxes[i].x;
			e.style.width = boxes[i].width + "px";
		}
		e.style.left = Math.round(boxes[i].x) + "px";
	}
}

function initializeBoxes() {
	getWindowSize();
	
	var nBoxes = 20;
	boxes = new Array(nBoxes);
	if (document.URL.indexOf('?') == -1) {
		for (var i = 0; i < nBoxes; i++) {
			boxes[i] = new Box("box" + (i + 1));
			boxes[i].x = -boxes[i].width - Math.round(400 * Math.random());
		}
	} else {
		for (var i = 0; i < nBoxes; i++) {
			boxes[i] = new Box("box" + (i + 1));
			boxes[i].x = -boxes[i].width + Math.round(windowWidth * Math.random());
		}
		refreshTopByX();
		refreshTopByY();
	}

	document.write("<style type=\"text/css\">");
	for (var i = 0; i < boxes.length; i++) {
		document.write("#" + boxes[i].name + " {");
		document.write("width: " + boxes[i].width + "px;");
		document.write("height: " + boxes[i].height + "px;");
		document.write("left: 0px;");
		document.write("top: " + boxes[i].y + "px;");
		document.write("}");
	}
	document.write("</style>");
	
	for (var i = 0; i < boxes.length; i++) {
		document.write("<div id=\"" + boxes[i].name + "\" class=\"box\"></div>");
	}

	drawFunctions.push(drawBoxes);
}