继续求助啊！！ JS限定区域！！


<html>
<head>
<style>
 #box{border:1px solid #ccc;background:#eee;width:500px;height:400px; top:200px; left:200px; overflow:hidden;position:absolute;z-index:1}
    #qiu1{width:30px;height:30px;background:url(q.png);position:relative;z-index:2;left:0px;top:50px}
    #qiu2{width:30px;height:30px;background:url(q2.png);position:relative;z-index:3;left:500px;top:280px}
</style>
  </head>
<body><div id="box">
<div id="qiu1"><img id=red src='http://hi.csdn.net/attachment/201011/17/4557677_1289966796RWR1.gif' style='position:absolute;'></div>
<div id="qiu2"><img id=green src='http://hi.csdn.net/attachment/201011/17/4557677_1289966797z070.gif' style='position:absolute;'></div>
<script type="text/javascript">
var x=document.body.clientWidth;
var y=document.body.clientHeight;
var i=0;
var go=1;
function sh(){
  if (go){
    i++;
    if (i>x) i=0;
    j=Math.sin(Math.PI*i*10/x)*(1+y/20);
    red.style.top=j;
    red.style.left=i;
    j=Math.cos(Math.PI*i*10/x)*(1+y/20);
    green.style.top=j;
    green.style.right=i;
  }
  setTimeout('sh()',10);
}
sh();
</script>
<button onclick="go=1;">Start</button>
<button onclick="go=0;">Stop</button>
<div>
</body>
</html>
我想让球只在灰色的区域内移动
就是说，如果出了边界立即从另一端继续运动
我的这个非要等一段时间（应该是到浏览器的边界）才进行第二次运动希望大家帮我改下呀，谢谢了！！