--- adm_globals1.phtml.orig	Sun Feb 16 13:29:05 2003
+++ adm_globals1.phtml	Sun Feb 16 22:30:33 2003
@@ -10,12 +10,72 @@
 ?>
 <html><head>
 <title>Network Interface Statistics Collection Agent - Global Variables</title>
+<style type="text/css"><? echo "
+*.f_g_bg      { color: #$graph_text; background-color: #$graph_background; }
+*.f_g_text    { color: #$graph_text; background-color: #$graph_background; }
+*.f_g_lborder { color: #$graph_border_light; background-color: #$graph_background; }
+*.f_g_dborder { color: #$graph_border_dark; background-color: #$graph_background; }
+*.f_g_peak    { color: #$graph_peak_highlight; background-color: #$graph_background; }
+*.f_g_in      { color: #$graph_incoming_data; background-color: #$graph_background; }
+*.f_g_out     { color: #$graph_outgoing_data; background-color: #$graph_background; }
+";
+?></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;
+}
+
+// For the interactive color creation popup window.
 function loadPopup() {
   var feats='width=500,height=300,scrollbars=yes,resizeable=yes,toolbar=no,location=no,directories=no,status=no,menubar=no';
   window.open('adm_colors.html', '', feats);
 }
+
+// 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.adm_form."+fld+".value");
+  var flds=new Array("f_g_bg", "f_g_text","f_g_lborder","f_g_dborder","f_g_peak","f_g_in","f_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=="f_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=="f_g_text") {
+// Also change the "Background" field's text display.
+      cls[0].style.color=col;
+    }
+  }
+}
 </script>
+
 </head>
 <body bgcolor=#dddddd text=#333300 link=#666600 vlink=#666600 alink=#cc0000>
 <center>
@@ -60,8 +120,8 @@
 </P>
 <hr noshade size=1>
 <P>
-<form method=POST action="adm_globals2.phtml">
-<table border=1 cellspacing=5 cellpadding=0>
+<form method=POST action="adm_globals2.phtml" name="adm_form">
+<table border=1 cellspacing=5 cellpadding=2>
 <tr><th colspan=2 align=left><I>Global Options</I></th></tr>
 
 <tr><td>How often do you want the collector scripts to run (in seconds)?</td>
@@ -85,13 +145,6 @@
 <input type=radio name="f_js_list" value="n"<? if ($js_list == "") { echo " checked"; } ?>> No
 </td></tr>
 
-<!--  No longer needed.
-<tr><td>Do you have the GD Library installed?</td>
-<td>
-<input type=radio name="f_have_gd" value="y"<? if ($have_gd != "") { echo " checked"; } ?>> Yes<BR>
-<input type=radio name="f_have_gd" value="n"<? if ($have_gd == "") { echo " checked"; } ?>> No
-</td></tr>
--->
 <input type=hidden name="f_have_gd" value="<? if ($have_gd == "") { echo "n"; } else { echo "y"; } ?>">
 
 <tr><td>If your GD Library supports TrueType fonts, enter the font to use here.
@@ -187,42 +240,84 @@
 </table>
 </td></tr>
 
-<tr><td><? echo $font2; ?>Enter the default colors you want used in the graphs.
+<tr><td>
+Enter the default colors you want used in the graphs.
 Use standard hex color codes. The current color scheme is displayed; the "Background"
 color is used under all color choices, of course. Any colors that aren't defined yet
 because you've just imported an older database into your new one will show up in the
-"Text" color.
+"Text" color. As you change values here, the colors will change to match your choices...
+assuming you have Javascript and CSS enabled and aren't using Netscape 4. :)
 <P>
-<form action="">
-<input type=button value=" Click Here " onClick="loadPopup()"> for an interactive
-color-creation popup window. Javascript required... sorry.<BR>
+<input type=button value=" Click Here " onClick="loadPopup()"><BR>
+for an interactive color-creation popup window.<BR>
 </td>
 <td>
-<table border=0 cellpadding=2 cellspacing=0>
-
+<table border=0 cellpadding=4 cellspacing=0>
 <?
-$colors=array("graph_data1", "graph_data2", "graph_data3", "graph_data4",
-              "graph_data5", "graph_data6", "graph_data7", "graph_data8");
-foreach($colors as $c) {
-  if (trim($$c)=="") { $$c=$graph_text; }
-}
-echo "<tr><td align=right bgcolor=#$graph_background>$font2<font color=#$graph_text>Background:</td>
-<td><input type=text name=\"f_g_bg\" size=6 maxlength=6 value=\"$graph_background\"></td></tr>
-<tr><td align=right bgcolor=#$graph_background>$font2<font color=#$graph_text>Text:</td>
-<td><input type=text name=\"f_g_text\" size=6 maxlength=6 value=\"$graph_text\"></td></tr>
-<tr><td align=right bgcolor=#$graph_background>$font2<font color=#$graph_border_light>Light Border:</td>
-<td><input type=text name=\"f_g_lborder\" size=6 maxlength=6 value=\"$graph_border_light\"></td></tr>
-<tr><td align=right bgcolor=#$graph_background>$font2<font color=#$graph_border_dark>Dark Border:</td>
-<td><input type=text name=\"f_g_dborder\" size=6 maxlength=6 value=\"$graph_border_dark\"></td></tr>
-<tr><td align=right bgcolor=#$graph_background>$font2<font color=#$graph_peak_highlight>Peak Highlighting:</td>
-<td><input type=text name=\"f_g_peak\" size=6 maxlength=6 value=\"$graph_peak_highlight\"></td></tr>
-<tr><td align=right bgcolor=#$graph_background>$font2<font color=#$graph_incoming_data>Incoming Data:</td>
-<td><input type=text name=\"f_g_in\" size=6 maxlength=6 value=\"$graph_incoming_data\"></td></tr>
-<tr><td align=right bgcolor=#$graph_background>$font2<font color=#$graph_outgoing_data>Outgoing Data:</td>
-<td><input type=text name=\"f_g_out\" size=6 maxlength=6 value=\"$graph_outgoing_data\"></td></tr>
-</table>
+echo "<tr><td class=\"f_g_bg\" align=right bgcolor=#$graph_background>$font2
+<script language=\"Javascript\">
+if (incapable) { document.write('<font color=#$graph_text>'); }
+</script>
+Sample Text</td>
+<td><input onChange=\"colorswitch('f_g_bg');\" type=text name=\"f_g_bg\" size=6 maxlength=6 value=\"$graph_background\"></td>
+<td>$font2&nbsp;Background</td>
+</tr>
+
+<tr><td class=\"f_g_text\" align=right bgcolor=#$graph_background>$font2
+<script language=\"Javascript\">
+if (incapable) { document.write('<font color=#$graph_text>'); }
+</script>
+Sample Text</td>
+<td><input onChange=\"colorswitch('f_g_text');\" type=text name=\"f_g_text\" size=6 maxlength=6 value=\"$graph_text\"></td>
+<td>$font2&nbsp;Text</td>
+</tr>
+
+<tr><td class=\"f_g_lborder\" align=right bgcolor=#$graph_background>$font2
+<script language=\"Javascript\">
+if (incapable) { document.write('<font color=#$graph_border_light>'); }
+</script>
+Sample Text</td>
+<td><input onChange=\"colorswitch('f_g_lborder');\" type=text name=\"f_g_lborder\" size=6 maxlength=6 value=\"$graph_border_light\"></td>
+<td>$font2&nbsp;Light Border</td>
+</tr>
+
+<tr><td class=\"f_g_dborder\" align=right bgcolor=#$graph_background>$font2
+<script language=\"Javascript\">
+if (incapable) { document.write('<font color=#$graph_border_dark>'); }
+</script>
+Sample Text</td>
+<td><input onChange=\"colorswitch('f_g_dborder');\" type=text name=\"f_g_dborder\" size=6 maxlength=6 value=\"$graph_border_dark\"></td>
+<td>$font2&nbsp;Dark Border</td>
+</tr>
+
+<tr><td class=\"f_g_peak\" align=right bgcolor=#$graph_background>$font2
+<script language=\"Javascript\">
+if (incapable) { document.write('<font color=#$graph_peak_highlight>'); }
+</script>
+Sample Text</td>
+<td><input onChange=\"colorswitch('f_g_peak');\" type=text name=\"f_g_peak\" size=6 maxlength=6 value=\"$graph_peak_highlight\"></td>
+<td>$font2&nbsp;Peak Highlight</td>
+</tr>
+
+<tr><td class=\"f_g_in\" align=right bgcolor=#$graph_background>$font2
+<script language=\"Javascript\">
+if (incapable) { document.write('<font color=#$graph_incoming_data>'); }
+</script>
+Sample Text</td>
+<td><input onChange=\"colorswitch('f_g_in');\" type=text name=\"f_g_in\" size=6 maxlength=6 value=\"$graph_incoming_data\"></td>
+<td>$font2&nbsp;Incoming Data</td>
+</tr>
+
+<tr><td class=\"f_g_out\" align=right bgcolor=#$graph_background>$font2
+<script language=\"Javascript\">
+if (incapable) { document.write('<font color=#$graph_outgoing_data>'); }
+</script>
+Sample Text</td>
+<td><input onChange=\"colorswitch('f_g_out');\" type=text name=\"f_g_out\" size=6 maxlength=6 value=\"$graph_outgoing_data\"></td>
+<td>$font2&nbsp;Outgoing Data</td>
+</tr>
 ";
-?>
+?></table>
 </td></tr>
 
 <tr><td colspan=2 bgcolor=#000000><img src="1x1.gif" height=1></td></tr>
--- adm_globals2.phtml.orig	Sun Feb 16 13:48:05 2003
+++ adm_globals2.phtml	Sun Feb 16 13:48:53 2003
@@ -16,8 +16,9 @@
 
 $tmp=array("f_g_bg", "f_g_text", "f_g_lborder", "f_g_dborder", "f_g_peak", "f_g_in", "f_g_out");
 foreach ($tmp as $t) {
+  $$t=strtoupper($$t);
   $t2=$$t;
-  if (preg_match('/[^\da-f]/i', $t2)) {
+  if (preg_match('/[^\dA-F]/', $t2)) {
     $t2=urlencode($t2);
     header("Location: adm_globals1.phtml?msg=badcolor&color=$t2");
     die;

Global Options
How often do you want the collector scripts to run (in seconds)?
If your GD Library supports TrueType fonts, enter the font to use here. @@ -187,42 +240,84 @@
$font2Background:
$font2Text:
$font2Light Border:
$font2Dark Border:
$font2Peak Highlighting:
$font2Incoming Data:
$font2Outgoing Data: