<!-- This example is from the book _JavaScript: The Definitive Guide_.     -->
<!-- Written by David Flanagan.  Copyright (c) 1996 O'Reilly & Associates. -->
<!-- This example is provided WITHOUT WARRANTY either expressed or implied.-->
<!-- You may study, use, modify, and distribute it for any purpose.        -->
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.1">
// open a new window
var n = window.open('', 'f', 'width=400,height=400');

// dynamically create frames in that new window.
// Note the use of the special about:blank URL to get empty frames
n.document.write('<frameset rows="50%,50%" cols="50%,50%">');
n.document.write('<frame name="f1" src="about:blank">');
n.document.write('<frame name="f2" src="about:blank">');
n.document.write('<frame name="f3" src="about:blank">');
n.document.write('<frame name="f4" src="about:blank">');
n.document.write('</frameset>');

// An array of the colors we cycle through for the animation
colors = new Array("red","green","blue","yellow","white");

// An array of the frames we cycle through (in this order) 
windows = new Array(n.f1, n.f2, n.f4, n.f3);

// The current color and frame counters
var c = 0, f = 0;

// A variable that holds the current timeout id (used to cancel the timeout)
var timeout = null;

// This function sets the "next" frame in the list to the "next" color
// in the list.  We call it once to start the animation, and then it 
// arranges to invoke itself every quarter second after that.
function change_one_frame()
{
    // dynamically output the HTML necessary to set the background color
    windows[f].document.write('<BODY BGCOLOR="' + colors[c] + '">');
    windows[f].document.close();
    f = (f + 1) % 4;  // increment frame counter
    c = (c + 1) % 5;  // increment color counter
    
    // Arrange to be called again in 250 milliseconds
    // Save the timeout id so that we can stop this crazy thing.
    timeout = setTimeout("change_one_frame()", 250);
}
</SCRIPT>
</HEAD>
<!-- start the frame animation when the document is fully loaded -->
<BODY onLoad="change_one_frame();">
<!-- Create a button to stop the animation with clearTimeout() -->
<!-- and close the window with close()  -->
<FORM>
  <INPUT TYPE="button" VALUE="Stop"
     onClick="if (timeout) clearTimeout(timeout); if (!n.closed) n.close();">
</FORM>
</BODY>
</HTML>
