Help Javascript simple animation script

Hi.
I'm working on how to animate a div element through a page.
the example is on this page.
http://iamtibo.com/pleasant/

You can see the square mooving on top of the screen.

What I'm looking for is use javascript to calculate the width of the screen.
And as soon as the square will pass the end of the screen it will disappear and reappear at the origin point..
anyone can help..

You can check the source code to see what I did.

Thanks

var foo = null; // object

function doMove() {

foo.style.left = parseInt(foo.style.left)+1+'px';
setTimeout(doMove,70); // call doMove in 20msec
}


function init() {
foo = document.getElementById('fooObject'); // get the "foo" object
foo.style.left = '0px'; // set its initial position to 0px
doMove(); // start animating
}


window.onload = init;



Should I create more functions??
to Restart when the element is = or > than the stage width ?

Try this example


<script type="text/javascript">
<!--
function autoMove2(){
divElement=document.getElementById("div3")
currentPosition=divElement.offsetLeft
currentPosition+=20
divElement.style.left=currentPosition+"px"
timer=setTimeout("autoMove2()",100)

pageWidth=document.body.clientWidth
elementWidth=divElement.offsetWidth

if(currentPosition>=pageWidth){
//clearTimeout(timer)
divElement.style.left=-elementWidth+"px"
}

}
// -->
</script>


<DIV id="div3" style="position:absolute; left:10px; top:180px;width:100px;height:60px;border:1px solid #0000FF;background-color:#AAAAFF"></DIV>

<a href="#null" onclick="autoMove2()">Start</a>