<script>

// update speed (force to minimum of 500)
function setspeed() {
    var spd = document.getElementById("speed").value;
    spd = spd.replace(/px/,""); spd=spd*1.0;
    if (spd < 500) {
        spd = 500;
    }
    document.getElementById("speed").value=spd;
}

// move moves the position of the window
// it's current location. 
// positive xinc will move to the right (neg to the left)
// positive yinc will move down (neg up)

function move( xinc, yinc ) {
    var jsize=20;
    window.moveBy(jsize*xinc,jsize*yinc);
}

// random jump to anywhere

function hjump() {
    xpos = Math.random() * 600
    ypos = Math.random() * 200
    window.moveTo(xpos,ypos);
}

// variable used to keep track of when the game is running
var running=0;

// start up the game 
function hyperspace_game() {
    running=1;
    hyperspace_move();
}

// stop the game
function stop_hyperspace_game() {
    running=0;
}

// Make a single game move by moving the image to a random
// location and then setting up to call this routine again
// after some delay. The delay before the next call is 
// based on the value of the speed field (the user can change).

function hyperspace_move() {
    var delay = document.getElementById("speed").value;
    if (delay < 500) {
        document.getElementById("speed").value = 500;
    }
    if (running == 1) {
        hjump();
        window.setTimeout("hyperspace_move()",delay);
    }
}

</script>


<table height="380" width="200" border="2">
<tr><td bgcolor="#8899AA">


<p style="text-align:center">Move the Browser</p>

<table border="0" align="center">
  <tr>
    <td> </td>
    <td align="center">
      <input type="button" id="up" value="up" onclick="move(0,-1)"
             style="width:50; height:50; font-weight:bold;
	     background-color: #aa9988; border-width:3;"  />

    </td>
    <td> </td>
  </tr>

  <tr>
    <td align="center">
      <input type="button" id="left" value="left" onclick="move(-1,0)" 
         style="width:50; height:50; font-weight:bold;
	     background-color: #aa9988; border-width:3;"  />

    </td>
    <td> </td>
    <td align="center">
       <input type="button" id="right" value="right" onclick="move(1,0)" 
         style="width:50; height:50; font-weight:bold;
	     background-color: #aa9988; border-width:3;"  />

     </td>
  </tr>

  <tr>
    <td> </td>
    <td align="center">
       <input type="button" id="down" value="down" onclick="move(0,1)" 
         style="width:50; height:50; font-weight:bold;
	     background-color: #aa9988; border-width:3;"  />

    </td>
    <td> </td>
  </tr>
</table>

<p style="text-align:center">
  <input type="button" id="jump" value="random jump" onclick="hjump()"
         style="width:100; height:50; font-weight:bold;
	     background-color: #aa9988; border-width:3;"  />


</p>

<hr />
<h3 style="text-align:center">Play the chase game</h3>

<p  style="text-align:center">
<input type="button" id="chase" value="start" onclick="hyperspace_game()" 
       style="width:100; height:50; font-weight:bold;
	     background-color: #aa9988; border-width:3;"  />

<input type="button" id="chase" value="stop" onclick="stop_hyperspace_game()"
         style="width:100; height:50; font-weight:bold;
	     background-color: #aa9988; border-width:3;"  />

</p>

<p style="text-align:center">
Speed : <input type="text" size="5" id="speed" value="2000"
         onchange="setspeed()" />
</p>

<hr />

</td></tr></table>

<script>
// save the initial window size (so we can restore it)
savewidth =  window.innerWidth;
saveheight = window.innerHeight;
saveX = window.screenX;
saveY = window.screenY;


// There are some IE vs. Mozilla differences in window resizing,
// this code ignores them (so the resize may not be perfect).

// this is called by the browser when the document is unloaded.
window.onunload = function restore()  {
  // change the window size to the original values
  window.resizeTo(savewidth,saveheight);
  window.moveTo(saveX,saveY);
}


// change the window size to hold the controls only

window.resizeTo(300,800);

</script>