Unfolding boxes

As an exercise in using JavaScript to generate a dynamic number of divs with dynamic style properties, I wrote this:

<form>
Box Width: <input id="boxw" name="boxw" type="text" size="3" maxlength="3" /><br />
Box Border: <input id="boxborder" name="boxborder" type="text" size="3" maxlength="3" /><br />
How many boxes? <input id="boxes" name="boxes" type="text" size="3" maxlength="3" /><br />
<input type="hidden" id="genmethod" name="genmethod" value="Shell">
Speed: <input id="speed" name="speed" type="text" size="3" maxlength="4" value="200" /> milliseconds between unfolds<br />
<input name="Generate Boxes" type="button" onMouseUp="generateBoxes('floatingbox',document.getElementById('boxw').value,document.getElementById('boxborder').value,document.getElementById('boxes').value,document.getElementById('genmethod').value,document.getElementById('speed').value);" value="Generate Boxes" />
<input type="button" value="Stop Unfolding" onclick="stopBoxes()" />
<input type="button" value="Continue Unfolding" onclick="continueBoxes()" /><br />
Status: <span id="status"></span>
</form>
<div id="floatingbox" style="position:relative; top:0px; left:0px">
</div>
<script type="text/javascript">
numboxes = 1;
var boxnum = 1;
var boxwidth = 30;
var border = 1;
var speed = 200;
var n=1;
var t;
var direction = new Array();
//var direction = new Array("S","R","D","L","L","U","U","R","R"); //Circle Method
//var direction = new Array("S","R","D","L","D","R","R","U","U"); //Shell Method
//var direction = new Array("S","R","R","D","L","L","D","R","R"); //Snake Method

function generateBoxes(where, bwid, brdrwid, b, method, bspeed) {
if (parseInt(bwid)) {
bwid = parseInt(bwid);
boxwidth = bwid;
}
else {
alert("You did not enter a valid interger for the box width. Box width defaulted to " + boxwidth);
bwid = boxwidth;
}

if (parseInt(brdrwid)) {
brdrwid = parseInt(brdrwid);
border = brdrwid;
}
else {
alert("You did not enter a valid interger for the border width. Border width defaulted to " + border);
brdrwid = border;
}

if (parseInt(bspeed)) {
speed = parseInt(bspeed);
}
else {
alert("You did not enter a valid interger for the speed. Speed defaulted to " + speed);
}

direction = ["N"];
numboxes = parseInt(b);
if (method == "Shell"){
var y = Math.ceil(Math.sqrt(b));
//alert(y);
ring = 2;
x = 1;
while (ring <= y){
if (ring%2 == 0) {
direction.push("R");
while(x<=(ring-1)) { direction.push("D"); x++;}
x=1;
while(x<=(ring-1)) { direction.push("L"); x++;}
}
else if (ring%2 != 0) {
direction.push("D");
while(x<=(ring-1)) { direction.push("R"); x++;}
x=1
while(x<=(ring-1)) { direction.push("U"); x++;}
}
x=1;
ring++;
}
//alert(direction);
}

var genbox = "";
n = 0;
while (b>0){
genbox += "<div id=\"box" + n + "\" style=\"background-color: #666; border-style: solid; border-color: #333; position: absolute; left:0px; top:0px; width:" + bwid + "px; height:" + bwid + "px; border-width:" + brdrwid + "px; z-index:" + b + ";\"></div>";
n++;
b--;
}
document.getElementById(where).innerHTML = genbox;
n=1;
Unfold();
}

function Unfold(){
document.getElementById('status').innerHTML = "Unfolding";
if (n < numboxes){
boxnum = n;
boxname = "box" + boxnum;
lastbox = "box" + (boxnum - 1);
document.getElementById(lastbox).style.backgroundColor = "#CCC";
document.getElementById(lastbox).style.borderColor = "#999";
switch (direction[boxnum]){
case "D":
while (boxnum < numboxes){
boxname = "box" + boxnum;
document.getElementById(boxname).style.top = (parseInt(document.getElementById(boxname).style.top) + boxwidth + border) + "px";
boxnum++;
}
break;
case "U":
while (boxnum < numboxes){
boxname = "box" + boxnum;
document.getElementById(boxname).style.top = (parseInt(document.getElementById(boxname).style.top) - boxwidth - border) + "px";
boxnum++;
}
if (parseInt(document.getElementById(boxname).style.top) < 0) document.getElementById('floatingbox').style.top = (parseInt(document.getElementById('floatingbox').style.top) + boxwidth) + "px";
break;
case "R":
while (boxnum < numboxes){
boxname = "box" + boxnum;
document.getElementById(boxname).style.left = (parseInt(document.getElementById(boxname).style.left) + boxwidth + border) + "px";
boxnum++;
}
break;
case "L":
while (boxnum < numboxes){
boxname = "box" + boxnum;
document.getElementById(boxname).style.left = (parseInt(document.getElementById(boxname).style.left) - boxwidth - border) + "px";
boxnum++;
}
if (parseInt(document.getElementById(boxname).style.left) < 0) document.getElementById('floatingbox').style.left = (parseInt(document.getElementById('floatingbox').style.left) + boxwidth + border) + "px";
break;
}
n++;
t = setTimeout('Unfold()',speed);
}
else {
boxnum = n;
lastbox = "box" + (boxnum - 1);
document.getElementById(lastbox).style.backgroundColor = "#CCC";
document.getElementById(lastbox).style.borderColor = "#999";
document.getElementById('status').innerHTML = "Complete";
}
}

function stopBoxes() {
clearTimeout(t);
document.getElementById('status').innerHTML = "Paused";
}
function continueBoxes() { t = setTimeout('Unfold()',speed); }
</script>

You can check it out live here. The next step in building out this code would be to incorporate some jQuery animations to the movement of the the boxes as they “unfold” instead of just appearing/moving into place.

Ropewalk Tavern

A friend met his wife at this tavern we frequented. I shot these two photos and had them printed and framed as their wedding present. I also have the sepia print in my home as well.