<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="http://www.w3.org/StyleSheets/TR/base"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
xmlns:aaa="http://www.w3.org/2005/07/aaa">
<head>
<title>
AJAX Chat Example
</title>

<style type="text/css">
h1 { text-align: center }


ul#chatRegion{
list-style: none;
border-style: ridge;
width: 70%;
height: 60%;
padding: 0;
padding-left: 1%;
float: left;
overflow: auto;
}

ul#userListRegion{
list-style: none;
border-style: ridge;
width: 20%;
padding: 0;
padding-left: 2%;
float: right;
overflow: auto;
visibility: hidden;
}

div#userControlsArea{
clear: both;
position: absolute;
top: 85%;
}

span#additionalOptionsRegion{
display: none;
}
</style>

<script src="chat_bots.js" type="text/javascript"> </script>
<script src="chat_statusFunctions.js" type="text/javascript"> </script>
<script src="chat_chatFunctions.js" type="text/javascript"> </script>
<script src="chat_validators.js" type="text/javascript"> </script>
<script src="chat_userlistFunctions.js" type="text/javascript"> </script>

<script type="text/javascript">
<![CDATA[
window.onload = setDefaults;

var userName = "";
var userArray = new Array();
var aiResponses = new Array();
var additionalUsersActive = false;
var maxLines = 10;

function setDefaults(){
document.getElementById('numberOfLines').value = 10;
document.getElementById('userStyle').value = "Normal";
}

function keyHandler(event){
if (event.keyCode == 13){
takeMessage();
return;
}
runValidator();
}

function toggleOptions(){
if (document.getElementById('optionsButton').value == "Show Options"){
document.getElementById('additionalOptionsRegion').style.display = "block";
document.getElementById('optionsButton').value = "Hide Options";
}
else{
document.getElementById('additionalOptionsRegion').style.display = "none";
document.getElementById('optionsButton').value = "Show Options";
}
}

function updateMaxLines(){
maxLines = document.getElementById('numberOfLines').options[document.getElementById('numberOfLines').selectedIndex].text;
giveWarning("Maximum number of lines has been changed to " + maxLines + ".");
}

function updateUserStyle(){
if (document.getElementById('userStyle').options[document.getElementById('userStyle').selectedIndex].text == "High Contrast"){
document.getElementById('thePageBody').style.color = "yellow";
document.getElementById('thePageBody').style.backgroundColor = "black";
document.getElementById('thePageBody').style.fontWeight = "bolder";
document.getElementById('thePageBody').style.fontSize = "150%";

document.getElementById('sendText').style.color = "yellow";
document.getElementById('sendText').style.backgroundColor = "black";
document.getElementById('sendText').style.fontWeight = "bolder";
document.getElementById('sendText').style.fontSize = "150%";

document.getElementById('sendButton').style.color = "yellow";
document.getElementById('sendButton').style.backgroundColor = "black";
document.getElementById('sendButton').style.fontWeight = "bolder";
document.getElementById('sendButton').style.fontSize = "150%";

document.getElementById('optionsButton').style.color = "yellow";
document.getElementById('optionsButton').style.backgroundColor = "black";
document.getElementById('optionsButton').style.fontWeight = "bolder";
document.getElementById('optionsButton').style.fontSize = "150%";

document.getElementById('numberOfLines').style.color = "yellow";
document.getElementById('numberOfLines').style.backgroundColor = "black";
document.getElementById('numberOfLines').style.fontWeight = "bolder";

document.getElementById('userStyle').style.color = "yellow";
document.getElementById('userStyle').style.backgroundColor = "black";
document.getElementById('userStyle').style.fontWeight = "bolder";
}
else{
document.getElementById('thePageBody').style.color = "";
document.getElementById('thePageBody').style.backgroundColor = "";
document.getElementById('thePageBody').style.fontWeight = "";
document.getElementById('thePageBody').style.fontSize = "";

document.getElementById('sendText').style.color = "";
document.getElementById('sendText').style.backgroundColor = "";
document.getElementById('sendText').style.fontWeight = "";
document.getElementById('sendText').style.fontSize = "";

document.getElementById('sendButton').style.color = "";
document.getElementById('sendButton').style.backgroundColor = "";
document.getElementById('sendButton').style.fontWeight = "";
document.getElementById('sendButton').style.fontSize = "";

document.getElementById('optionsButton').style.color = "";
document.getElementById('optionsButton').style.backgroundColor = "";
document.getElementById('optionsButton').style.fontWeight = "";
document.getElementById('optionsButton').style.fontSize = "";

document.getElementById('numberOfLines').style.color = "";
document.getElementById('numberOfLines').style.backgroundColor = "";
document.getElementById('numberOfLines').style.fontWeight = "";

document.getElementById('userStyle').style.color = "";
document.getElementById('userStyle').style.backgroundColor = "";
document.getElementById('userStyle').style.fontWeight = "";
}
}

]]>
</script>
</head>
<body id="thePageBody">
<h1>
AJAX Chat
</h1>


<div id="chatArea" role="wairole:log">
<ul id="chatRegion" aria-live="polite" aria-atomic="false" >
<li>Please choose a user name to begin using AJAX Chat.</li>

</ul>
<ul id="userListRegion" aria-live="off" aria-relevant="additions removals text">
</ul>
</div>

<div id="userControlsArea">
<input id="sendText" type="text" size="72" onkeyup="keyHandler(event)"/>
<input id="sendButton" type="button" value="Send" aria-controls="chatRegion" onclick="takeMessage()"/>

<!-- <input id="optionsButton" type="button" value="Show Options" aria-controls="additionalOptionsRegion" onclick="toggleOptions()"/> -->

<p>
<span id="statusRegion" aria-live="assertive">
</span>
</p>
<p>

<!-- <span id="additionalOptionsRegion" aria-live="off" aria-relevant="all"> -->
<!-- <label for="numberOfLines">Number of lines to display: </label><select id="numberOfLines" onchange="updateMaxLines()"><option>10</option><option>20</option><option>30</option></select> -->
<!-- <br/> -->
<!-- <label for="userStyle">Style: </label><select id="userStyle" onchange="updateUserStyle()"><option>Normal</option><option>High Contrast</option></select> -->
<!-- </span> -->

</p>
</div>




</body>
</html>