Multi - Layer Scrolling 2

<script type="text/javascript">
// Realised by Jeff
// www.huntingground.freeserve.co.uk

endposY=new Array(100,150,200,250,300,350) // layers stop position
Layer_Num=endposY.length // number of layers
Interval=350 // interval before next layer scroll
Step=25 // layer increment speed
Count =1;
ani=""
speed=""

PosY = new Array();

function init(){
clearTimeout(ani)
animate()
if(Count>Layer_Num){
Count=Layer_Num
clearTimeout(speed)
}
else{
speed=setTimeout("init()",Interval) // start next layer scrolling
}
Count++
}

function animate() { 
clearTimeout(ani)
for (p = 0; p < Count-1; p++) {
PosY[p] = parseInt(document.getElementById("oDIV"+p).style.top) // layer initial position
PosY[p] += Step //add Step value

if (PosY[p] >endposY[p]) { // when layer reaches limit, keep layer at limit
PosY[p] = endposY[p]
}
document.getElementById("oDIV"+p).style.top = PosY[p] // layer new  position

}
ani=setTimeout("animate()", 50);// speed

if (PosY[Layer_Num-1] >endposY[Layer_Num-1]) { // when last layer reaches limit, stop animation
clearTimeout(ani)
}
}

function oreset(){ // reset layers back to default position
for (p = 0; p < Count-1; p++) {
document.getElementById("oDIV"+p).style.top = -50 // x position
PosY[p] = 0
}
Count=1
setTimeout("init()", 1000)
}

setTimeout("init()", 1000)

</script>

<style>
#styles DIV{
width:150;
height:30;
background-image:url(image.jpg);
text-align:center;
}
</style>

<div id="styles">
<div id="oDIV0" style="position:absolute;left:10;top:-50"></div>
<div id="oDIV1" style="position:absolute;left:10;top:-50"></div>
<div id="oDIV2" style="position:absolute;left:10;top:-50"></div>
<div id="oDIV3" style="position:absolute;left:10;top:-50"></div>
<div id="oDIV4" style="position:absolute;left:10;top:-50"></div>
<div id="oDIV5" style="position:absolute;left:10;top:-50;cursor:hand" onclick="oreset()"><b>Reset</b></div>
</div>