var isDOM=document.getElementById?1:0;var isIE=document.all?1:0;var isNS4=navigator.appName=='Netscape'&&!isDOM?1:0;var isIE4=isIE&&!isDOM?1:0;var isOp=window.opera?1:0;var isDyn=isDOM||isIE||isNS4;function getRef(id, par){ par=!par?document:(par.navigator?par.document:par); return (isIE ? par.all[id] :  (isDOM ? (par.getElementById?par:par.ownerDocument).getElementById(id) :  (isNS4 ? par.layers[id] : null)));}function getSty(id, par){ var r=getRef(id, par); return r?(isNS4?r:r.style):null;}if (!window.LayerObj) var LayerObj = new Function('id', 'par', 'this.ref=getRef(id, par); this.sty=getSty(id, par); return this');function getLyr(id, par) { return new LayerObj(id, par) }function LyrFn(fn, fc){ LayerObj.prototype[fn] = new Function('var a=arguments,p=a[0],px=isNS4||isOp?0:"px"; ' +  'with (this) { '+fc+' }');}LyrFn('x','if (!isNaN(p)) sty.left=p+px; else return parseInt(sty.left)');LyrFn('y','if (!isNaN(p)) sty.top=p+px; else return parseInt(sty.top)');LyrFn('vis','sty.visibility=p');LyrFn('bgColor','if (isNS4) sty.bgColor=p?p:null; ' + 'else sty.background=p?p:"transparent"');LyrFn('bgImage','if (isNS4) sty.background.src=p?p:null; ' + 'else sty.background=p?"url("+p+")":"transparent"');LyrFn('clip','if (isNS4) with(sty.clip){left=a[0];top=a[1];right=a[2];bottom=a[3]} ' + 'else sty.clip="rect("+a[1]+"px "+a[2]+"px "+a[3]+"px "+a[0]+"px)" ');LyrFn('write','if (isNS4) with (ref.document){write(p);close()} else ref.innerHTML=p');LyrFn('alpha','var f=ref.filters,d=(p==null); if (f) {' + 'if (!d&&sty.filter.indexOf("alpha")==-1) sty.filter+=" alpha(opacity="+p+")"; ' + 'else if (f.length&&f.alpha) with(f.alpha){if(d)enabled=false;else{opacity=p;enabled=true}} }' + 'else if (isDOM) sty.MozOpacity=d?"":p+"%"');function setLyr(lVis, docW, par){ if (!setLyr.seq) setLyr.seq=0; if (!docW) docW=0; var obj = (!par ? (isNS4 ? window : document.body) :  (!isNS4 && par.navigator ? par.document.body : par)); var IA='insertAdjacentHTML', AC='appendChild', newID='_js_layer_'+setLyr.seq++; if (obj[IA]) obj[IA]('beforeEnd', '<div id="'+newID+'" style="position:absolute"></div>'); else if (obj[AC]) {  var newL=document.createElement('div');  obj[AC](newL); newL.id=newID; newL.style.position='absolute'; } else if (isNS4) {  var newL=new Layer(docW, obj);  newID=newL.id; } var lObj=getLyr(newID, par); with (lObj) if (ref) { vis(lVis); x(0); y(0); sty.width=docW+(isNS4?0:'px') } return lObj;}var CSSmode=document.compatMode;CSSmode=(CSSmode&&CSSmode.indexOf('CSS')!=-1)||isDOM&&!isIE||isOp?1:0;if (!window.page) var page = { win: window, minW: 0, minH: 0, MS: isIE&&!isOp, db: CSSmode?'documentElement':'body' }page.winW=function() { with (this) return Math.max(minW, MS?win.document[db].clientWidth:win.innerWidth) }page.winH=function() { with (this) return Math.max(minH, MS?win.document[db].clientHeight:win.innerHeight) }page.scrollX=function() { with (this) return MS?win.document[db].scrollLeft:win.pageXOffset }page.scrollY=function() { with (this) return MS?win.document[db].scrollTop:win.pageYOffset }// *** MOUSE EVENT CONTROL FUNCTIONS ***// Most of these are passed the relevant 'menu Name' and 'item Number'.// The 'with (this)' means it uses the properties and functions of the current menu object.function popOver(mN, iN) { with (this){ // Cancel any pending menu hides from a previous mouseout. clearTimeout(hideTimer); // Set the 'over' variables to point to this item. overM = mN; overI = iN; // Call the 'onMouseOver' event if it exists, and the item number is 1 or more. if (iN && this.onmouseover) onmouseover(mN, iN); // Remember what was lit last time, and compute a new hierarchy. litOld = litNow; litNow = new Array(); var litM = mN, litI = iN; while(1) {  litNow[litM] = litI;  // If we've reached the top of the hierarchy, exit loop.  if (litM == 'root') break;  // Otherwise repeat with this menu's parent.  litI = menu[litM][0].parentItem;  litM = menu[litM][0].parentMenu; } // If the two arrays are the same, return... no use hiding/lighting otherwise. var same = true; for (var z in menu) if (litNow[z] != litOld[z]) same = false; if (same) return; // If this is a different menu, clear another pending show. clearTimeout(showTimer); // Cycle through menu array, lighting and hiding menus as necessary. for (thisM in menu) with (menu[thisM][0]) {  // Doesn't exist yet? Keep rollin'...  if (!lyr) continue;  // The number of this menu's item that is to be lit, undefined if none.  litI = litNow[thisM];  oldI = litOld[thisM];  // If it's lit now and wasn't before, highlight...  if (litI && (litI != oldI)) changeCol(thisM, litI, true);  // If another item was lit but isn't now, dim the old item.  if (oldI && (oldI != litI)) changeCol(thisM, oldI, false);  // Make sure if it's lit, it's shown, and set the visNow flag.  if (litI && !visNow && (thisM != 'root'))  {   showMenu(thisM);   visNow = true;  }  // If this menu has no items from the current hierarchy in it, and is currently  // onscreen, call the hide function.  if (isNaN(litI) && visNow)  {   hideMenu(thisM);   visNow = false;  } } // Get target menu to show - if we've got one, position & show it. // If this menu is set to show submenus on click, skip this. nextMenu = ''; if ((menu[mN][iN].type == 'sm:') && !menu[mN][0].subsOnClick) {  // The target menu and the layer object of the current menu itself (not this item).  var targ = menu[mN][iN].href, lyrM = menu[mN][0].lyr;  // Either show immediately or after a delay if set by passing it to the position and show functions.  // Set nextMenu to the impending show, so the popOut() function knows when not to cancel it.  var showStr = 'with ('+myName+') { menu.'+targ+'[0].visNow = true; ' +   'position("'+targ+'"); showMenu("'+targ+'") }';  nextMenu = targ;  if (showDelay) showTimer = setTimeout(showStr, showDelay);  else eval(showStr); }}}function popOut(mN, iN) { with (this){ // Sometimes, across frames, overs and outs can get confused. // So, return if we're exiting an item we have yet to enter... if ((mN != overM) || (iN != overI)) return; // Evaluate the onmouseout event, if any. if (this.onmouseout) onmouseout(mN, iN); var thisI = menu[mN][iN]; // Stop showing another menu if this item isn't pointing to the same one. if (thisI.href != nextMenu) {  clearTimeout(showTimer);  nextMenu = ''; } // Hide all menus rapidly (if it's a root menu item without a popout) or as specified. // Remember that the timeout is cancelled by another instance of the over function. // Calling 'over("root", 0)' hides all menus but the root menu, and highlights no items. // If hideDelay equals zero the menus are never hidden. if (hideDelay) {  var delay = ((mN == 'root') && (thisI.type != 'sm:')) ? 50 : hideDelay;  hideTimer = setTimeout(myName + '.over("root", 0)', delay); } // Clear the 'over' variables. overM = 'root'; overI = 0;}}function popClick(mN, iN) { with (this){ // Evaluate the onclick event, if any. if (this.onclick) onclick(mN, iN); var thisI = menu[mN][iN], hideM = true; with (thisI) switch (type) {  // Targeting another popout? Either activate show-on-click or skip to the end.  case 'sm:':  {   if (menu[overM][0].subsOnClick)   {    menu[href][0].visNow = true;    position(href);    showMenu(href);    hideM = false;   }   break;  }  // A JavaScript function? Eval() it and break out of switch.  case 'js:': { eval(href); break }  // Otherwise, point to the window if nothing else and navigate.  case '': type = 'window';  default: if (href) eval(type + '.location.href = "' + href + '"'); } // Hide all menus if we're supposed to. if (hideM) over('root', 0);}}function popChangeCol(mN, iN, isOver) { with (this.menu[mN][iN]){ if (!lyr || !lyr.ref) return; // Pick a new background colour, and decide on whether it's an image (contains a period?). var col = isOver?overCol:outCol; var bgFn = (col.indexOf('.')==-1) ? 'bgColor' : 'bgImage'; // Then we do it before or after the text/border change due to Netscape bugs. if (isNS4) lyr[bgFn](col); // Test for CSS text/border style changes, we can skip them if not needed. // In Netscape 4, rewrite layer contents if required (causes a little flickering)... // Otherwise manipulate the DOM tree for IE/NS6+ (faster than rewriting contents). if ((overClass != outClass) || (outBorder != overBorder)) with (lyr) {  if (isNS4) write(this.getHTML(mN, iN, isOver));  else  {   ref.className = (isOver ? overBorder : outBorder);   var chl = (isDOM ? ref.childNodes : ref.children)   if (chl) for (var i = 0; i < chl.length; i++) chl[i].className = isOver?overClass:outClass;  } } if (!isNS4) lyr[bgFn](col); // Alpha filtering activated? Might as well set that then too... // Weirdly it has to be done after the border change, another random Mozilla bug... if (outAlpha != overAlpha) lyr.alpha(isOver ? overAlpha : outAlpha);}}function popPosition(posMN) { with (this){ // Pass a menu name to position, or nothing to position all menus. for (mN in menu) {  if (posMN && (posMN != mN)) continue;  with (menu[mN][0])  {   // If the menu hasn't been created or is not set to be visible, loop.   if (!lyr || !lyr.ref || !visNow) continue;   // Set up some variables and the initial calculated positions.   var pM, pI, newX = eval(offX), newY = eval(offY);   // Find its parent menu references, if it's not the topmost root menu.   if (mN != 'root')   {    pM = menu[parentMenu];    pI = pM[parentItem].lyr;    // Having no parent item is a bad thing, especially in cross-frame code.    if (!pI) continue;   }   // Find parent window for correct page object, or this window if not.   var eP = eval(par);   var pW = (eP && eP.navigator ? eP : window);   // Find proper numerical values for the current window position + edges, so menus   // don't make a beeline for the upper-left corner of the page.   with (pW.page) var sX=scrollX(), wX=sX+winW(), sY=scrollY(), wY=winH()+sY;   wX = isNaN(wX)||!wX ? 9999 : wX;   wY = isNaN(wY)||!wY ? 9999 : wY;   // Relatively positioned submenus? Add parent menu/item position & check screen edges.   if (pM && typeof(offX)=='number') newX = Math.max(sX,    Math.min(newX+pM[0].lyr.x()+pI.x(), wX-menuW-(isIE?5:20)));   if (pM && typeof(offY)=='number') newY = Math.max(sY,    Math.min(newY+pM[0].lyr.y()+pI.y(), wY-menuH-(isIE?5:20)));   // Assign the final calculated positions.   lyr.x(newX);   lyr.y(newY);  } }}}// *** MENU OBJECT CONSTRUCTION FUNCTIONS ***// This takes arrays of data and names and assigns the values to a specified object.function addProps(obj, data, names, addNull){ for (var i = 0; i < names.length; i++) if(i < data.length || addNull) obj[names[i]] = data[i];}function ItemStyle(){ // Like the other constructors, this passes a list of property names that correspond to the list // of arguments. var names = ['len', 'spacing', 'popInd', 'popPos', 'pad', 'outCol', 'overCol', 'outClass',  'overClass', 'outBorder', 'overBorder', 'outAlpha', 'overAlpha', 'normCursor', 'nullCursor']; addProps(this, arguments, names, true);}function popStartMenu(mName) { with (this){ // Create a new array within the menu object if none exists already, and a new menu object within. if (!menu[mName]) { menu[mName] = new Array(); menu[mName][0] = new Object(); } // Clean out existing items in this menu in case of a menu update. // actMenu is a reference to this menu for addItem() function later, while the local variable // aM is a quick reference to the current menu descriptor -- array index 0, 1+ are items. actMenu = menu[mName]; aM = actMenu[0]; actMenu.length = 1; // Not all of these are actually passed to the constructor -- the last few are null. // N.B: I pass 'isVert' twice so the first parameter (the menu name) is overwritten & ignored. var names = ['isVert', 'isVert', 'offX','offY', 'width', 'itemSty', 'par',  'parentMenu', 'parentItem', 'visNow', 'oncreate', 'subsOnClick']; addProps(aM, arguments, names, true); // extraHTML is a string added to menu layers for things like dropshadows, backgrounds etc. aM.extraHTML = ''; // Set the menu dimensions to zero initially. Also these are used to position items. aM.menuW = aM.menuH = 0; // Reuse old layers if we can, no use creating new ones every time the menus refresh. if (!aM.lyr) aM.lyr = null;  // Assign a default oncreate event to the root menu to show it. if (mName == 'root') menu.root[0].oncreate = new Function('this.visNow=true; ' +  myName + '.position("root"); this.lyr.vis("visible")');}}function popAddItem() { with (this) with (actMenu[0]){ // 'with' the current menu object and active menu descriptor object from startMenu(). // Add these properties onto a new 'active Item' at the end of the active menu. var aI = actMenu[actMenu.length] = new Object(); // Add function parameters to object. Again, the last few are undefined, set later. var names = ['text', 'href', 'type', 'itemSty', 'len', 'spacing', 'popInd', 'popPos',  'pad', 'outCol', 'overCol', 'outClass', 'overClass', 'outBorder', 'overBorder',  'outAlpha', 'overAlpha', 'normCursor', 'nullCursor',  'iX', 'iY', 'iW', 'iH', 'lyr']; addProps(aI, arguments, names, true); // Find an applicable itemSty -- either passed to this item or the menu[0] object. var iSty = (arguments[3] ? arguments[3] : actMenu[0].itemSty); // Loop through its properties, add them if they don't already exist (overridden e.g. length). for (prop in iSty) if (aI[prop]+'' == 'undefined') aI[prop] = iSty[prop]; // In NS4, since borders are assigned to the contents rather than the layer, increase padding. if (aI.outBorder) {  if (isNS4) aI.pad++; } // The actual dimensions of the items, store here as properties so they can be accessed later. aI.iW = (isVert ? width : aI.len); aI.iH = (isVert ? aI.len : width); // The spacing of the previous menu item in this menu, if relevant. var lastGap = (actMenu.length > 2) ? actMenu[actMenu.length - 2].spacing : 0; // 'spc' is the amount we subtract from this item's position so borders overlap a little. // Of course we don't do it to the first item. var spc = ((actMenu.length > 2) && aI.outBorder ? 1 : 0); // We position this item at the end of the current menu's dimensions, // and then increase the menu dimensions by the size of this item. if (isVert) {  menuH += lastGap - spc;  aI.iX = 0; aI.iY = menuH;  menuW = width; menuH += aI.iH; } else {  menuW += lastGap - spc;  aI.iX = menuW; aI.iY = 0;  menuW += aI.iW; menuH = width; } // When we are running in proper 'CSS1Compat' mode, borders affect widths differently, so we // subtract some pixels here to go with the old 'loose' specification. Swap this around if you // want your documents to conform with the new specs. if (aI.outBorder && CSSmode) {  aI.iW -= 2;  aI.iH -= 2; }}}// *** MAIN MENU CREATION/UPDATE FUNCTIONS ***// Returns the inner HTML of an item, used for menu generation, and highlights in NS4.function popGetHTML(mN, iN, isOver) { with (this){ var itemStr = ''; with (menu[mN][iN]) {  var textClass = (isOver ? overClass : outClass);  // If we're supposed to add a popout indicator, add it before text so it appears below in NS4.  if ((type == 'sm:') && popInd)  {   if (isNS4) itemStr += '<layer class="' + textClass + '" left="'+ ((popPos+iW)%iW) +    '" top="' + pad + '" height="' + (iH-2*pad) + '">' + popInd + '</layer>';   else itemStr += '<div class="' + textClass + '" style="position: absolute; left: ' +    ((popPos+iW)%iW) + 'px; top: ' + pad + 'px; height: ' + (iH-2*pad) + 'px">' + popInd + '</div>';  }  // For NS4, if a border is assigned, add a spacer to push border out to layer edges.  // Add a link both to generate an onClick event and to stop the ugly I-beam text cursor appearing.  if (isNS4) itemStr += (outBorder ? '<span class="' + (isOver?overBorder:outBorder) +   '"><spacer type="block" width="' + (iW-8) + '" height="' + (iH-8) + '"></span>' : '') +   '<layer left="' + pad + '" top="' + pad + '" width="' + (iW-2*pad) + '" height="' +   (iH-2*pad) + '"><a class="' + textClass + '" href="#" ' +   'onClick="return false" onMouseOver="status=\'\'; ' + myName + '.over(\'' + mN + '\',' +   iN + '); return true">' + text + '</a></layer>';  // IE4+/NS6 is an awful lot easier to work with sometimes.  else itemStr += '<div class="' + textClass + '" style="position: absolute; left: ' + pad +   'px; top: ' + pad + 'px; width: ' + (iW-2*pad) + 'px; height: ' + (iH-2*pad) + 'px">' +   text + '</div>'; } return itemStr;}}// The main menu creation/update routine. The first parameter is 'true' if you want the script// to use document.write() to create the menus. Second parameter is optionally the name of one// menu only to update rather then create all menus.function popUpdate(docWrite, upMN) { with (this){ // 'isDyn' (set at the very top of the script) signifies a DHTML-capable browser. if (!isDyn) return; // Loop through menus, using properties of menu description object (array index 0)... for (mN in menu) with (menu[mN][0]) {  // If we're updating one specific menu, only run the code for that.  if (upMN && (upMN != mN)) continue;  // Variable for holding HTML for items.  var str = '';  // Remember, items start from 1 in the array (0 is menu object itself, above).  // Also use properties of each item nested in the other with() for construction.  for (var iN = 1; iN < menu[mN].length; iN++) with (menu[mN][iN])  {   // An ID for divs/layers contained within the menu.   var itemID = myName + '_' + mN + '_' + iN;   // Now is a good time to assign another menu's parent to this if we've got a popout item.   var targM = menu[href];   if (targM && (type == 'sm:'))   {    targM[0].parentMenu = mN;    targM[0].parentItem = iN;   }   // Have we been given a background image? It'll have a period in its name if so...   var isImg = (outCol.indexOf('.') != -1) ? true : false;   // NS6 uses a different cursor name for the 'hand' cursor than IE.   if (!isIE && normCursor=='hand') normCursor = 'pointer';   // Create a div or layer text string with appropriate styles/properties.   // OK, OK, I know this is a little obtuse in syntax, but it's small...   // At the end we set the alpha transparency (if specified) and the mouse cursor.   if (isDOM || isIE4)   {    str += '<div id="' + itemID + '" ' + (outBorder ? 'class="'+outBorder+'" ' : '') +     'style="position: absolute; left: ' + iX + 'px; top: ' + iY + 'px; width: ' + iW +     'px; height: ' + iH + 'px; z-index: 1000; background: ' + (isImg?'url('+outCol+')':outCol) +     ((typeof(outAlpha)=='number') ? '; filter: alpha(opacity='+ outAlpha + '); -moz-opacity: ' +      (outAlpha/100) : '') +     '; cursor: ' + ((type!='sm:' && href) ? normCursor : nullCursor) + '" ';   }   else if (isNS4)   {    // NS4's borders must be assigned within the layer so they stay when content is replaced.    str += '<layer id="' + itemID + '" left="' + iX + '" top="' + iY + '" width="' +     iW + '" height="' + iH + '" z-index="1000" ' +     (outCol ? (isImg ? 'background="' : 'bgcolor="') + outCol + '" ' : '');   }   // Add mouseover and click handlers, contents, and finish div/layer.   var evtMN = '(\'' + mN + '\',' + iN + ')"';   str += 'onMouseOver="' + myName + '.over' + evtMN +     ' onMouseOut="' + myName + '.out' + evtMN +     ' onClick="' + myName + '.click' + evtMN + '>' +     getHTML(mN, iN, false) + (isNS4 ? '</layer>' : '</div>');  // End loop through items and with(menu[mN][iN]).  }  // The parent frame for this menu, if any.  var eP = eval(par);  // Do not ask me why Opera makes me set a timeout now rather than later, or in fact have  // to set a timeout at all to get references to the divs we are about to create.  // But, it makes the cross-frame version of the script actually work, so there's a benefit.  setTimeout(myName + '.setupRef(' + docWrite + ', "' + mN + '")', 50);  // Initial menu visibility, hidden unless tweaked otherwise.  var mVis = visNow ? 'visible' : 'hidden';  // For Fast creation mode (default for IE, NS6, Opera), write the menus to the document now.  // I'm adding a bit to the widths for safety as borders are different across browsers.  if (docWrite)  {   // Find the right target frame.   var targFr = (eP && eP.navigator ? eP : window);   targFr.document.write('<div id="' + myName + '_' + mN + '_Div" style="position: absolute; ' +    'visibility: ' + mVis + '; left: 0px; top: 0px; width: ' + (menuW+2) + 'px; height: ' +    (menuH+2) + 'px; z-index: 1000">' + str + extraHTML + '</div>');  }  else  {   // Create a new layer/div object dynamically using my setLyr() function above.   // If we've got a layer created already, there's no use creating another!.   // In IE4, we must shrink the menus to stop them sizing to the full body size -- thanks   // to Jeff Blum and Paul Maden for debugging this for me :). If the layer has been created,   // we've got to set a timeout to fix up IE4 again for some obscure reason.   if (!lyr || !lyr.ref) lyr = setLyr(mVis, menuW, eP);   else if (isIE4) setTimeout(myName + '.menu.' + mN + '[0].lyr.sty.width=' + (menuW+2), 50);   // Give it a high Z-index, and write its content.   with (lyr) { sty.zIndex = 1000; write(str + extraHTML) }  } // End loop through menus and with (menu[mN][0]). }}}function popSetupRef(docWrite, mN) { with (this) with (menu[mN][0]){ // Get a reference to a div, only needed for Fast creation mode. if (docWrite || !lyr || !lyr.ref) lyr = getLyr(myName + '_' + mN + '_Div', eval(par)); // Loop through menu items again to set up individual references. for (var i = 1; i < menu[mN].length; i++)  menu[mN][i].lyr = getLyr(myName + '_' + mN + '_' + i, (isNS4?lyr.ref:eval(par))); // Call the 'oncreate' method of this menu if it exists (e.g. to show root menu). if (menu[mN][0].oncreate) oncreate();}}// *** POPUP MENU MAIN OBJECT CONSTRUCTOR ***function PopupMenu(myName){ // These are the properties of any PopupMenu objects you create. this.myName = myName; // Manage what gets lit and shown when. this.showTimer = 0; this.hideTimer = 0; this.showDelay = 0; this.hideDelay = 500; this.showMenu = ''; // 'menu': the main data store, contains subarrays for each menu e.g. pMenu.menu['root'][]; this.menu =  new Array(); // litNow and litOld arrays control what items get lit in the hierarchy. this.litNow = new Array(); this.litOld = new Array(); // The item the mouse is currently over. Used by click processor to help NS4. this.overM = 'root'; this.overI = 0; // The active menu, to which addItem() will assign its results. this.actMenu = null; // Functions to create and manage the menu. this.over = popOver; this.out = popOut; this.changeCol = popChangeCol; this.position = popPosition; this.click = popClick; this.startMenu = popStartMenu; this.addItem = popAddItem; this.getHTML = popGetHTML; this.update = popUpdate; this.setupRef = popSetupRef; // Default show and hide functions, overridden in the example script by the clipping routine. this.showMenu = new Function('mName', 'this.menu[mName][0].lyr.vis("visible")'); this.hideMenu = new Function('mName', 'this.menu[mName][0].lyr.vis("hidden")');}var hBar = new ItemStyle(40, 10, '', 0, 0, '#336699', '#6699CC', 'highText', 'highText', '', '', null, null, 'hand', 'default');var subM = new ItemStyle(22, 0, '&gt;', -15, 3, '#CCCCDD', '#6699CC', 'lowText', 'highText', 'itemBorder', 'itemBorder', null, null, 'hand', 'default');// 'subBlank' is similar, but has an 'off' border the same colour as its background so it// appears borderless when dim, and 1px spacing between items to show the hover border.var subBlank = new ItemStyle(22, 1, '&gt;', -15, 3, '#CCCCDD', '#6699CC', 'lowText', 'highText', 'itemBorderBlank', 'itemBorder', null, null, 'hand', 'default');// The purplish 'button' style also has 1px spacing to show up the fancy border, and it has// different colours/text and less padding. They also have translucency set -- these items// are 80% opaque when dim and 95% when highlighted. It uses the 'crosshair' cursor for items.var button = new ItemStyle(22, 1, '&gt;', -15, 2, '#006633', '#CC6600', 'buttonText', 'buttonHover', 'buttonBorder', 'buttonBorderOver', 80, 95, 'crosshair', 'default');// A PopupMenu() object must be passed its own name so it can reference itself when the menu// is active. We also use a 'with' block to work with its properties and functions below.var pMenu = new PopupMenu('pMenu');with (pMenu){// The 'root' menu is horizontal, positioned at (x = 10, y = 0) and is 17px high, and items// by default use the colours and dimensions in the 'hBar' ItemStyle defined above.// This menu is also positioned over a similarly-coloured table in the HTML document above.startMenu('root', false, 'page.winW()/2 - pMenu.menu.root[0].menuW/2', 0, 17, hBar);// The text is a space then 'File', and this item pops out the 'mFile' submenu when moused over// as we've set 'sm:' as the action type. If you want to assign a click action (e.g. navigating to// a file) to one of these 'sm:' items, see the 'Optional Code' section below.addItem('&nbsp; The Inn', 'mInn', 'sm:', hBar, 120);addItem('&nbsp; News & Specials', 'mSpecials', 'sm:', hBar, 120);addItem('&nbsp; Seasons', 'mSeasons', 'sm:', hBar, 120);addItem('&nbsp; Western U.P.', 'mWesternUP', 'sm:', hBar, 120);// Next is an example of a Javascript function embedded in the menu, to open a new window...// Also, note the extra optional 4th and 5th parameters -- this menu item is 80px long,// rather than the default length from the ItemStyle.// This is a vertical menu positioned 0px across and 22px down from its trigger, and is 80px wide.startMenu('mInn', true, 0, 22, 120, subM);// The URLs are set to # here, be sure to replace them with your path/file names or JS functions!// Also note how all the types are '', indicating these links open in the current frame.addItem('Room Photo Tour', 'http://www.westernup.com/regalinn/lodging', '');addItem('Rates - Availability', 'http://www.webervations.com/magic-scripts/resbook.asp?memberid=midwestinn', '');addItem('Ice Cream Parlour', 'http://www.westernup.com/regalinn/treats.html', '');addItem('Gourmet Breakfasts', 'http://www.westernup.com/regalinn/lodging/menu.html', '');addItem('Holiday Photos', 'http://www.westernup.com/regalinn/news/holiday.html', '');addItem('More Photos', 'http://www.westernup.com/regalinn/news/04more.html', '');addItem('Map & Directions', 'http://www.westernup.com/regalinn/map.html', '');startMenu('mSpecials', true, 0, 22, 120, subM);addItem('Inn News', 'http://www.newsupnorth.com/regalinn/news', '');addItem('Lodging Specials', 'http://www.westernup.com/regalinn/specials', '');addItem('Updated Photos', 'http://www.newsupnorth.com/cgi-bin/wakefieldph.pl?sponsorcode=regalinn', '');addItem('B & B Etiquette', 'http://www.westernup.com/regalinn/etiquette.html', '');addItem('Guest Book', 'http://www.yooperblog.com/regalinn/?p=96', '');startMenu('mSeasons', true, 0, 22, 120, subM);addItem('Winter', 'http://www.westernup.com/regalinn/winter.html', '');addItem('Spring<br />Summer<br />Fall', 'http://www.westernup.com/regalinn/summer.html', '', subM, 48);startMenu('mWesternUP', true, 0, 22, 120, subM);addItem('Skiing', 'mSki', 'sm:');addItem('Snowmobile', 'mSnowmobile', 'sm:');addItem('Charter Fishing', 'window.open("http://www.budscharters.com")', 'js:');addItem('Sunset Cruises', 'window.open("http://www.budscharters.com/sunset.htm")', 'js:');addItem('VisitWakefield.Com', 'http://www.visitwakefield.com', '');addItem('Western U.P. Visitors Bureau', 'http://www.westernup.info', '', subM, 37);addItem('North Country Trail Association', 'http://www.northcountrytrail.org', '', subM, 37);addItem('Northwoods B&B Association', 'http://www.northwoodsbandb.org', '', subM, 37);addItem('Global GPS Cache Hunt', 'http://www.geocaching.com', '', subM, 37);startMenu('mSki', true, 120, 0, 120, subBlank);addItem('Western U.P<br />Skiing', 'http://www.westernup.com/regalinn/attractions/ski.html', '', subM, 37);addItem('Downhill Ski<br />Conditions', 'http://www.westernup.com/regalinn/winter.html', '', subM, 37);addItem('ABR Trails<br />Nordic Skiing', 'window.open("http://www.michiweb.com/abrski")', 'js:', subM, 37);addItem('Wolverine Nordic<br />Ski Club', 'window.open("http://www.wolverinenordic.com")', 'js:', subM, 37);startMenu('mSnowmobile', true, 120, 0, 120, subBlank);addItem('Snowmobile<br />Conditions', 'window.open("http://trailreport.com/cgi-bin/snowmobiletr.pl?scripted=westernup")', 'js:', subM, 37);// Popout slightly left of its trigger, for fun...startMenu('mHelp', true, -10, 22, 80, subM);// Instead of using spaces to indent, consider 'text-indent' in the stylesheet class perhaps?addItem('&nbsp; &nbsp; Contents', '#', '');addItem('&nbsp; &nbsp; Search', '#', '');// Here's an example of adding extra optional parameters to the addItem() command.// This item uses the subM ItemSyle (regardless of what the rest of this menu uses), is 22px long,// has 0px spacing after it, and a lesser-than-sign popout indicator positioned 3px from the left// edge of this item. Note that the parameters after the ItemStyle name are in the same order as// the ItemStyle command itself, and you can have as many as you want (e.g. background colours).addItem('&nbsp; &nbsp; About', 'mAbout', 'sm:', subM, 22, 0, '&lt;', 3);// This is across but not down... a horizontal popout.startMenu('mReopen', true, 85, 0, 120, button);// Again these items have their own ItemStyles, and unique lengths / spacings specified.addItem('Recent Doc 1:<br />Schedule', '#', '', button, 35);addItem('Recent Doc 2:<br />Cunning Plan', '#', '', button, 35, 5);// Back to the normal submenu ItemStyle for this next item.addItem('Etc. etc...', '#', '', subM);// This uses the subBlank ItemStyle which gives the items no borders when dim. The border around// the whole menu comes from a JavaScript function in the "Menu Effects" section.startMenu('mConvert', true, 85, 0, 80, subBlank);addItem('Windows', '#', '');addItem('Unix', '#', '');addItem('Macintosh', '#', '');// Leftwards popout with a negative x and y relative to its trigger. Custom height too.startMenu('mAbout', true, -85, -18, 80, subM);addItem('Leftwards!<br>And up!', '#', '', subM, 40);}addMenuBorder(pMenu, window.subBlank, null, '#666666', 1, '#CCCCDD', 2);addDropShadow(pMenu, window.subM, [40,"#333333",6,6,-4,-4], [40,"#666666",4,4,0,0]);addDropShadow(pMenu, window.subBlank, [40,"#333333",6,6,-4,-4], [40,"#666666",4,4,0,0]);if (!isOp && navigator.userAgent.indexOf('rv:0.')==-1){ pMenu.showMenu = new Function('mN','menuAnim(this, mN, 10)'); pMenu.hideMenu = new Function('mN','menuAnim(this, mN, -10)');}if (!isNS4){ // Write menus now in non-NS4 browsers, by calling the "Fast" mode .update(true) method. pMenu.update(true); //anotherMenu.update(true);}else{ // For Netscape 4, back up the old onload function and make a new one to update our menus. // This is the regular "Dynamic" mode menu update, it works in IE and NS6 too if required. var popOldOL = window.onload; window.onload = function() {  if (popOldOL) popOldOL();  pMenu.update();  //anotherMenu.update(); }}// Other events must be assigned, these are less complicated, just add or remove menu objects.var nsWinW = window.innerWidth, nsWinH = window.innerHeight, popOldOR = window.onresize;window.onresize = function(){ if (popOldOR) popOldOR(); if (isNS4 && (nsWinW!=innerWidth || nsWinH!=innerHeight)) history.go(0); pMenu.position(); //anotherMenu.position();}window.onscroll = function(){ pMenu.position(); //anotherMenu.position();}// NS4 can't reliably capture clicks on layers, so here's a workaround.if (isNS4){ document.captureEvents(Event.CLICK); document.onclick = function(evt) {  with (pMenu) if (overI) click(overM, overI);  //with (anotherMenu) if (overI) click(overM, overI);  return document.routeEvent(evt); }}// Activate the window.onscroll() event in non-Microsoft browsers.if (!isIE || isOp){ var nsPX=pageXOffset, nsPY=pageYOffset; setInterval('if (nsPX!=pageXOffset || nsPY!=pageYOffset) ' + '{ nsPX=pageXOffset; nsPY=pageYOffset; window.onscroll() }', 50);}// *** (5) OPTIONAL CODE ***   DELETE IF YOU'RE NOT USING THESE!// MOUSE EVENTS://// If you want, you can assign functions to handle mouse events like mouse over/out/click.// You'll want to use these for assigning click actions to 'sm:' items or status messages etc.// 'with (this)' means use the properties of the menu object, and it's passed the current// menu name (mN) and item number (iN) you can use to calculate the active item.// To uncomment and activate, delete the /* and */ at the start and end./*pMenu.onclick = function(mN, iN) { with (this){ // Do actions depending on the item that the mouse was over at the time of the click. // You may with to use nested IFs or 'switch' statements etc. if you're familiar with JS. if (mN == 'root') {  if (iN == 1) status = 'Congratulations, you\'ve mastered clicking!';  // Click on second item in root menu will navigate to 'edit.html'. Copy and paste this for  // each menu item to add click actions to 'sm:' items...  if (iN == 2) location.href = 'edit.html';  if (iN == 3) location.href = 'help.html'; }}}// Set the status message to the URL if the 'action type' is nothing, and clear on mouseout.pMenu.onmouseover = function(mN, iN) { with (this){ // By now, you either have my JS Object Browser script from my site or you need it... try // embedding in an IFrame and typing 'pMenu' into its Go To field to see the menu internals. with (menu[mN][iN]) if (!type) status = href;}}pMenu.onmouseout = function() { status = '' }*/function menuAnim(menuObj, menuName, dir){ // The array index of the named menu (e.g. 'mFile') in the menu object (e.g. 'pMenu'). var mD = menuObj.menu[menuName][0]; // Add timer and counter variables to the menu data structure, we'll need them. if (!mD.timer) mD.timer = 0; if (!mD.counter) mD.counter = 0; with (mD) {  // Stop any existing animation.  clearTimeout(timer);  // If the layer doesn't exist (cross-frame navigation) quit.  if (!lyr || !lyr.ref) return;  // Show the menu if that's what we're doing.  if (dir>0) lyr.vis('visible');  // Also raise showing layers above hiding ones.  lyr.sty.zIndex = 1001 + dir;  // Alpha fade in IE5.5+. Mozilla's opacity isn't well suited to this as it's an inheritable  // property rather than a block-level filter, and it's slow, but uncomment and try it perhaps.  // WARNING: This looks funny if you're mixing opaque and translucent items e.g. solid menus  // with dropshadows. If you're going to use it, make sure all your alpha values for a given  // menus are numbers, or they're all null (solid).  //if (isIE && window.createPopup) lyr.alpha(counter&&(counter<100) ? counter : null);  // Clip the visible area. Tweak this if you want to change direction/acceleration etc.  lyr.clip(0, 0, menuW+2, (menuH+2)*Math.pow(Math.sin(Math.PI*counter/200),0.75) );  // Remove clipping in NS6 on completion, seems to help old versions.  if ((isDOM&&!isIE) && (counter>=100)) lyr.sty.clip='';  // Increment the counter and if it hasn't reached the end (10 steps either way),  // set the timer to call the show/hide function again in 40ms.  counter += dir;  if (counter>100) counter = 100;  else if (counter<0) { counter = 0; lyr.vis('hidden') }  else timer = setTimeout(menuObj.myName+'.'+(dir>0?'show':'hide')+'Menu("'+menuName+'")', 40); }}// Here's the alternative IE5.5+ filter animation function.function menuFilterShow(menuObj, menuName, filterName){ var mD = menuObj.menu[menuName][0]; with (mD.lyr) {  sty.filter = filterName;  var f = ref.filters;  if (f&&f.length&&f[0]) f[0].Apply();  vis('visible');  if (f&&f.length&&f[0]) f[0].Play(); }}function addMenuBorder(mObj, iS, alpha, bordCol, bordW, backCol, backW){ // Loop through the menu array of that object, finding matching ItemStyles. for (var mN in mObj.menu) {  var mR=mObj.menu[mN], dS='<div style="position:absolute; background:';  if (mR[0].itemSty != iS) continue;  // Loop through the items in that menu, move them down and to the right a bit.  for (var mI=1; mI<mR.length; mI++)  {   mR[mI].iX += bordW+backW;   mR[mI].iY += bordW+backW;  }  // Extend the total dimensions of menu accordingly.  mW = mR[0].menuW += 2*(bordW+backW);  mH = mR[0].menuH += 2*(bordW+backW);  // Set the menu's extra content string with divs/layers underneath the items.  if (isNS4) mR[0].extraHTML += '<layer bgcolor="'+bordCol+'" left="0" top="0" width="'+mW+   '" height="'+mH+'" z-index="980"><layer bgcolor="'+backCol+'" left="'+bordW+'" top="'+   bordW+'" width="'+(mW-2*bordW)+'" height="'+(mH-2*bordW)+'" z-index="990"></layer></layer>';  else mR[0].extraHTML += dS+bordCol+'; left:0px; top:0px; width:'+mW+'px; height:'+mH+   'px; z-index:980; '+(alpha!=null?'filter:alpha(opacity='+alpha+'); -moz-opacity:'+(alpha/100):'')+   '">'+dS+backCol+'; left:'+bordW+'px; top:'+bordW+'px; width:'+(mW-2*bordW)+'px; height:'+   (mH-2*bordW)+'px; z-index:990"></div></div>'; }}function addDropShadow(mObj, iS){ // Pretty similar to the one above, just loops through list of extra parameters making // dropshadow layers (from arrays) and extending the menu dimensions to suit. for (var mN in mObj.menu) {  var a=arguments, mD=mObj.menu[mN][0], addW=addH=0;  if (mD.itemSty != iS) continue;  for (var shad=2; shad<a.length; shad++)  {   var s = a[shad];   if (isNS4) mD.extraHTML += '<layer bgcolor="'+s[1]+'" left="'+s[2]+'" top="'+s[3]+'" width="'+    (mD.menuW+s[4])+'" height="'+(mD.menuH+s[5])+'" z-index="'+(arguments.length-shad)+'"></layer>';   else mD.extraHTML += '<div style="position:absolute; background:'+s[1]+'; left:'+s[2]+    'px; top:'+s[3]+'px; width:'+(mD.menuW+s[4])+'px; height:'+(mD.menuH+s[5])+'px; z-index:'+    (a.length-shad)+'; '+(s[0]!=null?'filter:alpha(opacity='+s[0]+'); -moz-opacity:'+(s[0]/100):'')+    '"></div>';   addW=Math.max(addW, s[2]+s[4]);   addH=Math.max(addH, s[3]+s[5]);  }  mD.menuW+=addW; mD.menuH+=addH; }}
