Making new Div bar

[HACKhalo2]

Hi. I'm helping a friend of mine develop an online game, which is currently outdated. The person making skins for the site came up with a cool looking NavBar (found at http://www.thejackofclubs.net/images/soc_concept4.png ) and I want to change the current navbar (which is right now generated via PHP using tables and outdated expressions). The code is

<script language="javascript" type="text/javascript">        <!-- Modified menu code -->
<!--
/*
This code is from Dynamic Web Coding
www.dyn-web.com
Permission granted to use this code as long as this
entire notice is included.
*/
var origWidth, origHeight;
if (document.layers) {
 origWidth = window.innerWidth; origHeight = window.innerHeight;
 window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}
 
var cur_lyr;
var cur_ulyr;
var invis;
function loadLyr(lyr) {
 if (lyr.length != 3) {
  if (cur_ulyr)
  { hide_lyr(cur_ulyr); }
  if (lyr != cur_ulyr) {
   show_lyr(lyr);
   cur_ulyr = lyr;
  }
  else
  { cur_ulyr = ''; }
 } else {
  if (cur_lyr) hide_lyr(cur_lyr);
  cur_lyr = lyr;
  show_lyr(lyr);
 }
}
 
function show_lyr(lyr) {
 var theLyr = (document.layers)? getLyrRef(lyr,document) : (document.all)? document.all[lyr].style : (document.getElementById)? document.getElementById(lyr).style: null;
 if (!theLyr) return;
 theLyr.zIndex=100;
 theLyr.visibility = "visible";
}
 
function hide_lyr(lyr) {
 var theLyr = (document.layers)? getLyrRef(lyr,document) : (document.all)? document.all[lyr].style : (document.getElementById)? document.getElementById(lyr).style: null;
 if (!theLyr) return;
 theLyr.zIndex=1;
 theLyr.visibility = "hidden";
}
 
function toggle_lyr(lyr) {
 var theLyr = (document.layers)? getLyrRef(lyr,document) : (document.all)? document.all[lyr].style : (document.getElementById)? document.getElementById(lyr).style: null;
 if (!theLyr) return;
 if (theLyr.visibility == "visible")
  theLyr.visibility = "hidden";
 else
  theLyr.visibility = "visible";
}
 
// get reference to nested layer for ns4
// from old dhtmllib.js by Mike Hall of www.brainjar.com
function getLyrRef(lyr,doc) {
 if (document.layers) {
  var theLyr;
  for (var i=0; i<doc.layers.length; i++) {
   theLyr = doc.layers[i];
   if (theLyr.name == lyr) return theLyr;
   else if (theLyr.document.layers.length > 0)
    if ((theLyr = getLyrRef(lyr,theLyr.document)) != null)
     return theLyr;
   }
  return null;
 }
}
    //-->
    </script>
    <script type="text/JavaScript">
 
  window.onload = function()
  {
      settings = {
          tl: { radius: 20 },
          tr: { radius: 20 },
          bl: { radius: 0 },
          br: { radius: 0 },
          antiAlias: true,
          autoPad: true,
          validTags: ["div"]
      }
 
      /*
      Usage:
 
      newCornersObj = new curvyCorners(settingsObj, classNameStr);
      newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
      */
      var myBoxObject = new curvyCorners(settings, "myBox");
      myBoxObject.applyCornersToAll();
  }
 
</script>
//Javascript layer code
<?
        function topbutton ($name,$layer,$to,$colour) {
            if ($to == $layer)
            {
                echo "<TD valign=middle class=menu style='background-color:$colour;'>";
            }
            else
            {
                ?><TD valign=middle class="menu"
                onMouseOver="this.style.backgroundColor='<? echo $colour; ?>'; this.style.cursor='hand';"
                onMouseOut="this.style.backgroundColor='';"><?
                echo "<A href=\"javascript: void loadLyr('$layer')\">";
            }
            echo $name;
            if ($to != $layer) echo "</A>";
            echo '<IMG src="'.$GLOBALS[evo_imgsrv].'button.rt.gif" width=15 height=15></TD>';
        };
 
        function button ($name,$id,$to) {
            global $ndi_title;
            if ($id == "inf") $colour = "#000096";
            elseif ($id == "exp") $colour = "#966400";
            elseif ($id == "coc") $colour = "#960000";
            elseif ($id == "com") $colour = "#646400";
            elseif ($id == "sys") $colour = "#006400";
 
            if ($ndi_title == $name) {
                echo "<TD valign='middle'";
                echo " class=menu style='background-color:$colour;'";
                echo " onMouseOver=\"this.style.backgroundColor='$colour'; this.style.cursor='hand';\"";
//                echo "onMouseOut=\"this.style.backgroundColor=''\"";
            } else {
                echo "<TD valign='middle'";
                echo " class='$id menu'";
                echo " onMouseOver=\"this.style.backgroundColor='$colour'; this.style.cursor='hand';\"";
                echo " onMouseOut=\"this.style.backgroundColor=''\"";
            }
            if ($name != "realtime") echo "onclick=\"window.location.href='$to'\">";
            else echo ">";
            echo "<A href='$to'>";
            echo "&nbsp;&nbsp;&nbsp;$name&nbsp;&nbsp;&nbsp;";
            if ($ndi_title1 != $name) echo "</A>";
                echo '</TD>';
        }
 
        function create_menu_div ($id) {
            global $u;
            echo "<DIV id='$id'><TABLE border=0 cellspacing=0 cellpadding=0><TR>";
            if ($id == "inf") $colour = "#000064";
            elseif ($id == "exp") $colour = "#643200";
            elseif ($id == "coc") $colour = "#640000";
            elseif ($id == "com") $colour = "#323200";
            elseif ($id == "sys") $colour = "#003200";
            topbutton("information","inf",$id,"#000064");
            topbutton("expansion","exp",$id,"#643200");
            topbutton("command control","coc",$id,"#640000");
            topbutton("communication","com",$id,"#323200");
            topbutton("system","sys",$id,"#003200");
            echo '</TR></TABLE><TABLE border=0 cellspacing=0 cellpadding=0 width=100%><TR>';
 
            if ($id == "inf") {
                button("overview","inf","overview");
                button("news","inf","news");
//                button("planet", "inf", $u['coords']);
//                button("universe","inf","universe");
                button("universe","inf",$u['coords']);
                button("rankings","inf","rankings");
            } elseif ($id == "exp") {
                button ("research","exp","rd?r=1");
                button ("develop","exp","rd?d=1");
                button ("resources","exp","land");
            } elseif ($id == "coc") {
                button ("fleets","coc","military");
                button ("create","coc","create");
                button ("scans","coc","scans");
                button ("items","coc","items");
            } elseif ($id == "com") {
                button ("messages","com","messages");
                if ($u['sp_ban'] != "forums") {
                    button ("forums","com","forums");
                }
                button ("realtime","com",'javascript:void window.open("realtime","realtimewindow","width=800,height=600,resizable=1,scrollbars=no,menubar=no,status=no");');
                button ("affairs","com","affairs");
                button ("alliances","com","alliances");
                button ("auctions","com","auctions");
            } elseif ($id == "sys") {
                button ("preferences","sys","prefs");
                button ("search","sys","search");
                button ("profile","sys","profile");
                button ("logout","sys",$GLOBALS[evo_mainsrv]."logout.php");
            }
 
            echo "<TD width=100% style='background-color:$colour;'></TD></TR></TABLE></DIV>";
        }
 
        echo '<DIV id=container class=main>';
            create_menu_div("inf");
            create_menu_div("exp");
            create_menu_div("coc");
            create_menu_div("com");
            create_menu_div("sys");
        echo '</DIV>';
 
        if ($error) echo "<table cellspacing=0 width=100%><tr><td width=0 class=error>Sorry:</td><td align=center class=error>$error</td></tr></table>";
        ?>
        <script language="JavaScript">
            loadLyr('<?
                if ($ndi_title == "research" || $ndi_title == "develop" || $ndi_title == "resources")
                    echo 'exp';
                elseif ($ndi_title == "fleets" || $ndi_title == "create" || $ndi_title == "scans" || $ndi_title == "items")
                    echo 'coc';
                elseif ($ndi_title == "messages"|| $ndi_title == "forums" || $ndi_title == "realtime" || $ndi_title == "affairs" || $ndi_title == "alliances" || $ndi_title == "auctions")
                    echo 'com';
                elseif ($ndi_title == "preferences")
                    echo 'sys';
                else
                    echo 'inf';
            ?>');
        </script>
 

Right now, the code is getting overhualed (OOP, CSS styling, etc.), and I want a nice looking navbar to go with it. I tried once before to convert it over, but it failed. And since how poorly layed out his code is, it's hard to understand for me and my lacking PHP knowage. Anyways, any way to make a simple navbar (google doesn't help much with this) or even a point in a direction that can help is nice.

--HACKhalo2

[pbmods]

Heya, HACKhalo2.

What is your code doing currently that you don't want it to do?