Scroll page sized layer

<script type="text/javascript">;

var Last=""

function swaplayer(thislayer){
elm=document.getElementById(thislayer)
pwidth.innerHTML=document.body.clientWidth
Lname.innerHTML=thislayer+"'s "
size.innerHTML=elm.scrollHeight
//document.body.style.visibility="visible" // keeps body objects visible
elm.style.top=0 // set layer to top of container
elm.style.width="100%"//document.body.clientWidth //  can use integer to set width
//if(thislayer==Last){document.getElementById(Last).style.visibility="visible";return}
elm.style.visibility="visible" 

if(Last==""){
Last=thislayer
Current=thislayer // motion function
return
}
else{
document.getElementById(Last).style.visibility="hidden"
Last=thislayer // swaplayer function
Current=thislayer // motion function
}
}

setTimeout("swaplayer('One')",500) // show initial layer

timer=""
scroll_rate=2
function movedown(){step=-scroll_rate;dir=0;motion()}
function moveup(){step=scroll_rate;dir=1;motion()}

function motion(){
clearTimeout(timer)
posnow=parseInt(document.getElementById(Current).style.top)
Lheight=document.getElementById(Current).scrollHeight
WHeight=document.body.clientHeight 

if(dir==1&& posnow>-5 || dir==0&&posnow< -Lheight+WHeight){
cease()
}
else{
posnow+=step
document.getElementById(Current).style.pixelTop=posnow
timer=setTimeout("motion()",50)
}
}

function cease(){
dir=0
clearTimeout(timer)
}

</script>

<DIV id="cont" style="position:absolute;left:360px;top:140px;width:260px;height:120px;z-index:50;background-color:#dddddd">
<a href="javascript:swaplayer('One')">Layer 1</a>
<a href="javascript:swaplayer('Two')">Layer 2</a>
<a href="javascript:swaplayer('Three')">Layer 3</a>
<a href="javascript:swaplayer('Four')">Layer 4</a>
<a href="javascript:swaplayer('Five')">Layer 5</a>

<P> [ <a href="#null" onmouseover="movedown()" onmousedown="movedown(scroll_rate=10)" onmouseup="movedown(scroll_rate=2)" onmouseout="cease()">Down</a> || <a href="#null" onmouseover="moveup()" onmousedown="moveup(scroll_rate=10)" onmouseup="moveup(scroll_rate=2)" onmouseout="cease()">Up</a> ]

<P>Page width =<span id="pwidth"></span><br>
Layer <span id="Lname"></span> height = <span id="size"></span>
</DIV>

<div id="One" style="position:absolute; left:0; top:0; width:650; visibility:visible">
Contents One
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Contents One
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div id="Two" style="position:absolute; left:0; top:0; width:650; visibility:hidden">
Contents Two
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Contents Two
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div id="Three" style="position:absolute; left:0; top:0; width:650; visibility:hidden">
Contents Three
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Contents Three
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div id="Four" style="position:absolute; left:0; top:0; width:650; visibility:hidden">
Contents Four
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Contents Four
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div id="Five" style="position:absolute; left:0; top:0; width:650; visibility:hidden">
Contents Five
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Contents Five

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>