// The following uses DOM and is supported by IE5+ and NS6+

var n_menu = 6; // Number of menus (plus choice 0: home)
var n_opt_arr = [0,3,0,2,2,2,0]; // Number of options on each menu

var targ_arr = 
["index.shtml","browsers.shtml","menus.shtml","design.shtml","jscript.shtml","css.shtml","color.shtml"];
var starg_arr  = new Array; 
starg_arr[1] = new Array("browserIE.shtml", "browserNS.shtml","browserO.shtml");
starg_arr[3] = new Array("design1.shtml", "design2.shtml");
starg_arr[4] = new Array("jscript1.shtml","jscript2.shtml");
starg_arr[5] = new Array("css1.shtml", "css2.shtml");

var text_arr = ["home", "browsers", "menus", "design points", "javascript","CSS","colour picker"];
var stext_arr  = new Array; 
stext_arr[1] = new Array("Internet Explorer", "Netscape", "Opera");
stext_arr[3] = new Array("layout width", "framing");
stext_arr[4] = new Array("parsing a GET", "using the DOM");
stext_arr[5] = new Array("beyond basics", "cellpadding");

var i_show; //currently showing pop-up
var i_curr_option, i_curr_menu, curr_id
i_show = (n_menu + 1);


function domenu(i_menu, i_option) {
//build the DOM elements for the menu
for (var i = 0; i <=n_menu; i++) {
  dm = document.createElement('div');
  dm.className = "menu";
  dm1 = document.createElement('div');
  dm1.className = "menu1"
  am = document.createElement('a');
  am.id = "amenu"+i+"0";
  am.className = "default";
  am.href = targ_arr[i];
  am.onmouseover = aover1;
  am.onmouseout = aout1;
  am.appendChild(document.createTextNode(text_arr[i]));  
  dm1.appendChild(am);
  if (n_opt_arr[i] > 0) {
    pm = document.createElement('img');
    pm.alt = "";
    pm.id = "pic"+i;
    pm.src = "closed.gif";
    pm.style.width = "15px"; 
    pm.style.height = "7px";
	pm.style.display = "inline";
	if (i == i_menu) {
	  pm.style.visibility = "hidden";
	  }
    dm1.appendChild(pm);
	}
  dm.appendChild(dm1);
  dm.id = "menu"+i;
  document.getElementById("mainmenu").appendChild(dm);
  
  if (n_opt_arr[i] > 0) {
    ds = document.createElement('div');
    ds.id = "submenu"+i;
    ds1 = document.createElement('div');
    for (var j = 1; j <=n_opt_arr[i]; j++) {
      as = document.createElement('a');
      as.id = "amenu"+i+j;
      as.className = "default";
      as.href = starg_arr[i][j-1];
      as.onmouseover = aover1;
      as.onmouseout = aout1;
      as.appendChild(document.createTextNode(stext_arr[i][j-1]));
      ds1.appendChild(as);
	  ds1.appendChild(document.createElement('br'));
     }  
	ds1.className = "inline1";
	ds.appendChild(ds1);
	if (i == i_menu) {
      ds.className = "inline";
      document.getElementById("mainmenu").appendChild(ds);
	  }
	else {
      ds.className = "submenu";
      document.getElementById("menu"+i).appendChild(ds);
      }
    }
  }
}
  
function init_menu(i_menu, i_option) {

//set up the menus appropriate to this page

if (!navigator.DOMCSS2) {return}
//hide alternate menu
document.getElementById("fallback").style.visibility = "hidden";
domenu(i_menu, i_option);

// highlight current page selected
curr_id = 'amenu' + i_menu + i_option;
document.getElementById(curr_id).className = "current";
i_curr_option = i_option;
i_curr_menu = i_menu;
}

function aover1() {
aid = this.id;
i_menu = parseInt(aid.charAt(5));
if (i_menu != i_show) {ahide()}
if (aid != curr_id) {
  ashow(i_menu);
  this.className = "select";
  i_show = i_menu;
  }
}

function ashow(i_menu) {
if (n_opt_arr[i_menu]>0) {
  menu = ('menu' + i_menu);
  document.getElementById(menu).style.zIndex = 6;
  menu = ('submenu' + i_menu);
  document.getElementById(menu).style.visibility = "visible";
  pic = ('pic' + i_menu);
  document.images[pic].style.visibility = "hidden";
  }
}

function ahide() {
// put away popup menu and replace arrow
if (i_show<=n_menu && n_opt_arr[i_show]>0 && i_show!=i_curr_menu) {
  menu = ('menu' + i_show);
  document.getElementById(menu).style.zIndex = 3;
  menu = ('submenu' + i_show);
  document.getElementById(menu).style.visibility = 'hidden';
  pic = ('pic' + i_show);
  document.images[pic].style.visibility = "visible";
  i_show = n_menu + 1;
  }
}
function aout1(){
// reset color on exit, except for current option
if (this.id != curr_id) {
  this.className = "default";
  }
}