I am trying to have a function start with a timer and then switch to another function. However, it is not working at all. Anyone know whats goin on?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript" src="animation.js">
</script>


<script type="text/javascript" language="javascript">


function startnow () {
setContents ("counter",5);

var timer1= setTimeout("setContents('counter',4)",1000);
var timer2= setTimeout("setContents('counter',3)",2000);
var timer3= setTimeout("setContents('counter',2)",3000);
var timer4= setTimeout("setContents('counter',1)",4000);
var timer5= setTimeout("setContents('counter',0)",5000);
var timer6= setTimeout("setContents('counter', 'Go!')",6000);
var timer7= setTimeout("animation()",7000);

}


function setContents(id,val) {
document.getElementById(id).innerHTML = val;
}

function animation() {

/* return the x-coordinate of the layer named layername */

function getX(layername)
{
var theLayer = getElement(layername);
if (layerobject)
return(parseInt(theLayer.left));
else
return(parseInt(theLayer.style.left));
}


/* set animation speed and step */

var step = 3;
var framespeed = 35;

/* set animation boundaries */

var maxleft = 100;
var maxright = 600;

/* move left until boundary */

function left()
{
var currentX = getX('rightcar');
if (currentX > maxleft)
{
currentX-=step;
setX('rightcar',currentX);
move=setTimeout("left()",(1000/framespeed));
}
else
clearTimeout(move);
}

/* move right until boundary */

function right()
{
var currentX = getX('leftcar');
if (currentX < maxright)
{
currentX+=step;
setX('leftcar',currentX);
move=setTimeout("right()",(1000/framespeed));
}
else
clearTimeout(move);
}
}



</script>
</head>

<body>

<div id="counter" style="border: 1px solid black; width: 100px; height: 100px; position: absolute; left: 450px; top: 10px; font-family: Arial; font-size: 25px;">
</div>

<div id="explosion" style="border: 1px solid black; width: 100px; height: 100px; position: absolute; left: 450px; top: 300px;">
boom!
</div>

<div id="leftcar" style="border: 1px solid black; width: 210px; height: 72px; position: absolute; left: 10px; top: 300px;">
<img src="blue_car.gif" width="200" height="72" /></div>

<div id="rightcar" style="border: 1px solid black; width: 210px; height: 72px; position: absolute; left: 800px; top: 300px;">
<img src="yellow_car.gif" /></div>

<div id="controls" style="border: 1px solid black; width: 50px; height: 100px; position: absolute; left: 450px; top: 500px;">
<form action="" name="form" method="get" />
<input type="button" value="start" onclick="startnow();" />

<input type="button" value="reset" />

</form>
</div>



</body>
</html>



btw the animation.js script is based on the library from:

http://javascriptref.com/examples/ch15-ed2/15-501.htm

if that helps..