<h2>Use the select menu to pick a famous quote</h2>

<hr />
<form id="quoteform">
<table>
<tr>
<td valign="top">select a person:
<select id="selector" size="1" onchange="newquote()" style="font-weight:bold;">
  <option value="0" selected="selected" >Yogi Berra</option>
  <option value="1">Bill Clinton</option>
  <option value="2">Cookie Monster</option>
  <option value="3">Dave H.</option>
  <option value="4">G. Dubya</option>
  <option value="4">anonymous student</option>
  <option value="5">Kermit</option>
</select>
</td>
<td width="50"></td>

<td>
<textarea cols="50" rows="5"  name="quote" 
           style="border:dashed black 1px;
                  background-color: #eeeeee;
                  padding: .2in;
                  font-family:sans-serif; font-size:12pt; color: blue;">
</textarea>
</td>
</tr>
</table>
</form>

<script>

 quotes = new Array("The game isn't over til it's over",
                   "It depends on what the meaning of the word is is.",
                   "COOOOOOOOOKKKIIIEEE!",
                   "Blah, blah, blah, blah, blah, blah, blah, blah " +
                   "foo\nblah, blah, blah, blah, blah, blah, blah, ...",
				   "See, free nations are peaceful nations. " + 
				   "Free nations don't attack each other. " +
                   "Free nations don't develop weapons of mass destruction.",
                   "I made cookies, but my dog ate them...",
		   "It's not easy being green"
);

function showquote(x) {
   document.forms["quoteform"].quote.value='"'+quotes[x]+'"';
}

function newquote() {
  index=document.forms["quoteform"].selector.selectedIndex;
  author=document.forms["quoteform"].selector.options[index];
  showquote(index);
}

newquote(0);

</script>

<hr />


<h2>Use this select to switch to a different javascript demo</h2>


<form id="demoform">
<table>
<tr>
<td valign="top">select a demo:
<select name="demoselector" size="1" onchange="newdemo();" style="font-weight:bold;">
  <option value="0" selected="selected" >demo home page</option>
  <option value="1">cookie chase</option>
  <option value="2">moving browser</option>
  <option value="3">active bullets</option>
  <option value="4">document object properties</option>
  <option value="5">background color</option>
  <option value="6">back button</option>
  <option value="7">divs</option>
</select>
</td>
</tr>
</table>
</form>

<script>

 urls = new Array("../index.html",
                  "../cookiechase/cookiechase.html",
                  "../windowjump/windowjump.html",
                  "../activebullet/activebullet.html", 
                  "../props/props.html", 
                  "../background/background.html",
                  "../backbutton/backbutton.html",
                  "../divs/divs.html");

// loads a new page
function gotourl(x) {
   document.location= urls[x];
}

// figures out which page to go to
function newdemo() {
  index = document.forms["demoform"].demoselector.selectedIndex;
  gotourl(index);
}

</script>