--- index.phtml.orig	Mon Feb 17 17:12:33 2003
+++ index.phtml	Mon Feb 17 17:23:50 2003
@@ -8,13 +8,70 @@
 ?>
 <html><head>
 <title>Network Interface Statistics Collection Agent</title>
-<style type="text/css">
-  * {
+<style type="text/css"><? echo "
+*.g_bg      { color: #$graph_text; background-color: #$graph_background; }
+*.g_text    { color: #$graph_text; background-color: #$graph_background; }
+*.g_lborder { color: #$graph_border_light; background-color: #$graph_background; }
+*.g_dborder { color: #$graph_border_dark; background-color: #$graph_background; }
+*.g_peak    { color: #$graph_peak_highlight; background-color: #$graph_background; }
+*.g_in      { color: #$graph_incoming_data; background-color: #$graph_background; }
+*.g_out     { color: #$graph_outgoing_data; background-color: #$graph_background; }
+* {
 	font-family: arial,helvetica,univers,futura,sans;
 	font-size: medium;
-    }
-</style>
+  }
+";
+?></style>
+
 <script language="Javascript">
+
+// Browser sniffer.
+var agent=navigator.userAgent.toLowerCase();
+var incapable=false;
+if (agent.indexOf('mozilla/4') != -1 && agent.indexOf('msie') == -1) {
+  incapable=true;
+}
+
+// Changes the appropriate colors in the CSS for the right elements as the values are changed.
+function colorswitch(fld) {
+  if(!document.styleSheets && document.getElementsByTagName) {
+// Gotta make our own styleSheets array.
+    document.styleSheets=[];
+    document.styleSheets.concat(document.getElementsByTagName('STYLE'));
+  }
+  if(!document.styleSheets) {
+// Incapable browser. Upgrade! :)
+    return;
+  }
+  var col=eval("document.thisForm."+fld+".value");
+  var flds=new Array("g_bg", "g_text","g_lborder","g_dborder","g_peak","g_in","g_out");
+  var i, j, cls; 
+  if(!document.styleSheets[0].cssRules) {
+//IE Browser.
+    cls=document.styleSheets[0].rules;
+  } else {
+// not IE.
+    cls=document.styleSheets[0].cssRules;   
+  }
+  if (fld=="g_bg") {
+// Change background color in all seven classes.
+    for (i=0; i<flds.length; i++) {
+      cls[i].style.backgroundColor=col;
+    }
+  } else {
+    for (j=0; j<flds.length; j++) {
+// Find the right class name.
+      if (flds[j]==fld) { break; }
+    }
+// Change this class' text color.
+    cls[j].style.color=col;
+    if (fld=="g_text") {
+// Also change the "Background" field's text display.
+      cls[0].style.color=col;
+    }
+  }
+}
+
 function checkIt(e) {
   if (e.selectedIndex == 0) {
     return false;
@@ -142,7 +199,6 @@
 $helpname="main";
 require_once($location["help"]);
 echo "</center>\n";
-//$sq="select MAX(stamp) as s_max, MIN(stamp) as s_min, count(stamp) as cnt from stats";
 $sq="select MAX(stamp) as s_max, MIN(stamp) as s_min from stats";
 $res=dosql($sq);
 $row=mysql_fetch_array($res);
@@ -415,34 +471,74 @@
 pixels wide by
 <input type=text name="graph_y" size=5 value="<? echo $Y; ?>">
 pixels high.<BR>
-<table border=0 cellpadding=0 cellspacing=3>
+<table border=0 cellpadding=1 cellspacing=3>
 <tr><td colspan=13 bgcolor=#000000><img src="/1x1.gif" height=1></td></tr>
 <tr><td colspan=13 align=center>Set colors to use on the graphs below (standard RGB hex color codes).</td></tr>
 <tr><td colspan=13 bgcolor=#000000><img src="/1x1.gif" height=1></td></tr>
 <tr>
 <td align=center>Background</td>
-<td rowspan=2 bgcolor=#000000><img src="/1x1.gif" height=1></td>
+<td rowspan=3 bgcolor=#000000><img src="/1x1.gif" height=1></td>
 <td align=center>Text</td>
-<td rowspan=2 bgcolor=#000000><img src="/1x1.gif" height=1></td>
+<td rowspan=3 bgcolor=#000000><img src="/1x1.gif" height=1></td>
 <td align=center>Light Border</td>
-<td rowspan=2 bgcolor=#000000><img src="/1x1.gif" height=1></td>
+<td rowspan=3 bgcolor=#000000><img src="/1x1.gif" height=1></td>
 <td align=center>Dark Border</td>
-<td rowspan=2 bgcolor=#000000><img src="/1x1.gif" height=1></td>
+<td rowspan=3 bgcolor=#000000><img src="/1x1.gif" height=1></td>
 <td align=center>Peak</td>
-<td rowspan=2 bgcolor=#000000><img src="/1x1.gif" height=1></td>
+<td rowspan=3 bgcolor=#000000><img src="/1x1.gif" height=1></td>
 <td align=center>Incoming</td>
-<td rowspan=2 bgcolor=#000000><img src="/1x1.gif" height=1></td>
+<td rowspan=3 bgcolor=#000000><img src="/1x1.gif" height=1></td>
 <td align=center>Outgoing</td>
 </tr>
 <tr>
-<td align=center><input type=text size=6 maxlength=6 name="g_bg" value="<? echo strtoupper($graph_background); ?>"></td>
-<td align=center><input type=text size=6 maxlength=6 name="g_text" value="<? echo strtoupper($graph_text); ?>"></td>
-<td align=center><input type=text size=6 maxlength=6 name="g_lborder" value="<? echo strtoupper($graph_border_light); ?>"></td>
-<td align=center><input type=text size=6 maxlength=6 name="g_dborder" value="<? echo strtoupper($graph_border_dark); ?>"></td>
-<td align=center><input type=text size=6 maxlength=6 name="g_peak" value="<? echo strtoupper($graph_peak_highlight); ?>"></td>
-<td align=center><input type=text size=6 maxlength=6 name="g_in" value="<? echo strtoupper($graph_incoming_data); ?>"></td>
-<td align=center><input type=text size=6 maxlength=6 name="g_out" value="<? echo strtoupper($graph_outgoing_data); ?>"></td>
+<td align=center><input onChange="colorswitch('g_bg');" type=text size=7 maxlength=6 name="g_bg" value="<? echo strtoupper($graph_background); ?>"></td>
+<td align=center><input onChange="colorswitch('g_text');" type=text size=7 maxlength=6 name="g_text" value="<? echo strtoupper($graph_text); ?>"></td>
+<td align=center><input onChange="colorswitch('g_lborder');" type=text size=7 maxlength=6 name="g_lborder" value="<? echo strtoupper($graph_border_light); ?>"></td>
+<td align=center><input onChange="colorswitch('g_dborder');" type=text size=7 maxlength=6 name="g_dborder" value="<? echo strtoupper($graph_border_dark); ?>"></td>
+<td align=center><input onChange="colorswitch('g_peak');" type=text size=7 maxlength=6 name="g_peak" value="<? echo strtoupper($graph_peak_highlight); ?>"></td>
+<td align=center><input onChange="colorswitch('g_in');" type=text size=7 maxlength=6 name="g_in" value="<? echo strtoupper($graph_incoming_data); ?>"></td>
+<td align=center><input onChange="colorswitch('g_out');" type=text size=7 maxlength=6 name="g_out" value="<? echo strtoupper($graph_outgoing_data); ?>"></td>
 </tr>
+
+<tr>
+<td class="g_bg" align=center bgcolor=#<? echo $graph_background; ?>>
+<script language="Javascript">
+if (incapable) { document.write('<font color=#<? echo $graph_text; ?>>'); }
+</script>
+Sample Text</td>
+<td class="g_text" align=center bgcolor=#<? echo $graph_background; ?>>
+<script language="Javascript">
+if (incapable) { document.write('<font color=#<? echo $graph_text; ?>>'); }
+</script>
+Sample Text</td>
+<td class="g_lborder" align=center bgcolor=#<? echo $graph_background; ?>>
+<script language="Javascript">
+if (incapable) { document.write('<font color=#<? echo $graph_border_light; ?>>'); }
+</script>
+Sample Text</td>
+<td class="g_dborder" align=center bgcolor=#<? echo $graph_background; ?>>
+<script language="Javascript">
+if (incapable) { document.write('<font color=#<? echo $graph_border_dark; ?>>'); }
+</script>
+Sample Text</td>
+<td class="g_peak" align=center bgcolor=#<? echo $graph_background; ?>>
+<script language="Javascript">
+if (incapable) { document.write('<font color=#<? echo $graph_peak_highlight; ?>>'); }
+</script>
+Sample Text</td>
+<td class="g_in" align=center bgcolor=#<? echo $graph_background; ?>>
+<script language="Javascript">
+if (incapable) { document.write('<font color=#<? echo $graph_incoming_data; ?>>'); }
+</script>
+Sample Text</td>
+<td class="g_out" align=center bgcolor=#<? echo $graph_background; ?>>
+<script language="Javascript">
+if (incapable) { document.write('<font color=#<? echo $graph_outgoing_data; ?>>'); }
+</script>
+Sample Text</td>
+</tr>
+
+
 <tr><td colspan=13 bgcolor=#000000><img src="/1x1.gif" height=1></td></tr>
 </table>
 <hr size=1 noshade>
