add tabs, move user preferences to a tab, and fix the chat ui to fit the tab. it gets very bad at small window sizes though

WebContent/cah.css

@@ -77,10 +77,6 @@ body {
   border: 1px solid black;
   display: inline;
   padding: 5px;
-  /*
-	text-align: center;
-	vertical-align: middle;
-	*/
 }
 
 #canvas {
@@ -88,9 +84,6 @@ body {
   overflow: none;
   position: relative;
   width: 100%;
-  /* * /
-  border: 1px solid red;
-  / * */
 }
 
 #main {
@@ -98,13 +91,11 @@ body {
   width: 100%;
   height: 506px;
   top: 26px;
-  /*bottom: 216px;*/
   border: 1px solid black;
 }
 
 #main_holder {
   width: 100%;
-  height: 100%;
 }
 
 #game_list {
@@ -169,7 +160,7 @@ body {
   border: 1px solid black;
 }
 
-#chat_area {
+#tabs {
   min-height: 100px;
   width: 50%;
   height: 100%;
@@ -179,21 +170,36 @@ body {
   right: 14px;
 }
 
+#tabs .ui-widget {
+  font-height: 16px !important;
+}
+
+.tab-button {
+  font-size: 14px !important;
+}
+
 #log {
   width: 100%;
   height: 198px;
-  border: 1px solid black;
+  border-style: none solid solid none;
+  border-color: black;
+  border-width: 1px;
   position: absolute;
   bottom: 18px;
   right: 0px;
   overflow-y: scroll;
-  min-height: 82px;
+  min-height: 43px;
+  font-size: 16px;
+  font-family: serif;
+}
+
+#tab-preferences input[type='button'] {
+  float: right;
 }
 
 #chat {
   border: 1px solid black;
-  left: -2px;
+  left: -1px;
-  /*right: 46px;*/
   bottom: 0px;
   height: 17px;
   position: absolute;
@@ -209,6 +215,7 @@ body {
   bottom: -1px;
   margin: 0px;
   padding: 0px;
+  font-size: 14px;
 }
 
 span.error {
@@ -277,10 +284,6 @@ span.debug, span.admin {
   right: 0px;
   height: 30%;
   border-top: 1px solid black;
-  /*
-  overflow-x: auto;
-  overflow-y: visible;
-  */
 }
 
 .game_hand_filter {
@@ -351,9 +354,6 @@ span.debug, span.admin {
   position: absolute;
   left: 246px;
   width: 700px;
-  /*
-  overflow-x: auto;
-  */
 }
 
 .game_right_side_box {
@@ -439,12 +439,6 @@ span.debug, span.admin {
   border: 1px solid #231f20;
 }
 
-/*
-.whitecard .logo_element {
-  border: 1px solid white;
-}
-*/
-
 .logo_1 {
   left: 2px;
 }
@@ -519,6 +513,7 @@ span.debug, span.admin {
   -o-border-radius: 10px;
   border-radius: 10px;
 }
+
 .blackcard .card_number {
   background: white;
   display: inline-block;

WebContent/game.jsp

@@ -132,7 +132,6 @@ HttpSession hSession = request.getSession(true);
     </div>
     <div id="menubar_right">
       Current timer duration: <span id="current_timer">0</span> seconds
-      <input type="button" id="preferences" value="User Preferences" />
       <input type="button" id="logout" value="Log out" />
     </div>
   </div>
@@ -146,12 +145,28 @@ HttpSession hSession = request.getSession(true);
 <div id="bottom" class="hide">
   <div id="info_area">
   </div>
-  <div id="chat_area">
+  <div id="tabs">
+    <ul>
+      <li><a href="#tab-preferences" class="tab-button">User Preferences</a></li>
+      <li><a href="#tab-global" class="tab-button" id="button-global">Global Chat</a></li>
+    </ul>
+    <div id="tab-preferences">
+      <input type="button" value="Save" onclick="save_preferences();" />
+      <input type="button" value="Revert" onclick="load_preferences();" />
+      <label for="hide_connect_quit">Hide connect/quit events: </label>
+      <input type="checkbox" id="hide_connect_quit" />
+      <br />
+      <label for="ignore_list">Ignore list, one name per line:</label>
+      <br/>
+      <textarea id="ignore_list" style="width: 200px; height: 150px"></textarea>
+    </div>
+    <div id="tab-global">
       <div id="log"></div>
       <input type="text" id="chat" maxlength="200" />
       <input type="button" id="chat_submit" value="Chat" />
     </div>
   </div>
+</div>
 
 <!-- Template for game lobbies in the game list. -->
 <div class="hide">
@@ -343,16 +358,5 @@ HttpSession hSession = request.getSession(true);
   </div>
 </div>
 
-<!-- Wrapper for user preferences dialog content. -->
-<div class="hide">
-  <div id="preferences_dialog" title="User Preferences">
-    <label for="hide_connect_quit">Hide connect/quit events: </label>
-    <input type="checkbox" id="hide_connect_quit" />
-    <br />
-    <label for="ignore_list">Ignore list, one name per line:</label>
-    <textarea id="ignore_list" style="width: 95%; height: 75px"></textarea>
-  </div>
-</div>
-
 </body>
 </html>

WebContent/js/cah.app.js

@@ -47,9 +47,12 @@ $(document).ready(function() {
   // have not expressed an interest in being cleared out yet.
   // $(window).bind("beforeunload", window_beforeunload);
   $("#logout").click(logout_click);
-  $("#preferences").click(preferences_click);
+
   load_preferences();
 
+  $("#tabs").tabs();
+  $("#button-global").click();
+
   if ($.browser.mozilla) {
     // Firefox sucks.
     $("body").css("font-size", "12px");
@@ -207,14 +210,15 @@ function apply_preferences() {
  * This was tested extensively in Chrome. It may not be pixel-perfect in other browsers.
  */
 function app_resize() {
-  var chatWidth = $("#canvas").width() - 251;
+  var chatWidth = $("#canvas").width() - 257;
-  $("#chat_area").width(chatWidth);
+  $("#tabs").width(chatWidth + 'px');
-  $("#chat").width(chatWidth - 48);
+  $("#log").width((chatWidth + 2) + 'px');
-  var bottomHeight = $(window).height() - $("#main").height() - $("#menubar").height() - 27;
+  $("#chat").width((chatWidth - 42) + 'px');
+  var bottomHeight = $(window).height() - $("#main").height() - $("#menubar").height() - 29;
   $("#bottom").height(bottomHeight);
   $("#info_area").height(bottomHeight);
-  $("#chat_area").height(bottomHeight);
+  $("#tabs").height(bottomHeight);
-  $("#log").height(bottomHeight - $("#chat").height() - 1);
+  $("#log").height(bottomHeight - $("#chat").height() - 40);
   // this is ugly and terrible.
   if ($(window).height() < 650) {
     $("body").css("overflow-y", "auto");