// *** COMMON CROSS-BROWSER COMPATIBILITY CODE ***







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")');



}







// *** (1) ITEMSTYLES ***



// 'horizontal Bar' style: menu items that use this ItemStyle are 40px wide, have 10px gaps



// between them, no popout indicator (the ">" in some menus) or popout indicator position,



// 0px padding of the text within items, #336699 background colour, a hover colour of #6699CC,



// 'highText' is the stylesheet class used for the menu text both normally and when highlighted,



// no border styles, 'null' means fully opaque items (set them to numbers between 0 and 100 to



// enable semitranslucency), and the 'hand'/'default' cursors are used for linked/submenu items.







var hBar = new ItemStyle(130, 10, '', 0, 0, '#000000', '#CCCCCC', 'lowText', 'highTextBlack', '', '',



 null, null, 'hand', 'hand');







// The 'sub Menu' items: 22px long, 0px spacing, a 'greater than' sign for a popout indicator



// (you may wish to use an image tag?), the popout indicator is positioned 15px from the right



// edge of the item, items have 3px padding, some colours, it uses 'lowText' as the dimmed text



// class but 'highText' when it is moused over, and 'itemBorder' as the border stylesheet class.



// No opacity is used, and they have the same cursors as the above ItemStyle.







var subM = new ItemStyle(22, 0, '&gt;', -15, 3, '#CC0000', '#CCCCCC', 'lowText', 'highTextBlack',



 'itemBorder', 'itemBorderBlank', null, null, 'hand', 'hand');







// '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');







// *** (2) MENU DATA ***







// 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)



{







// *** MOVE OR CENTRE THE MENU HERE ***







// 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, 250, 123, 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; Edit', 'mEdit', 'sm:');



//addItem('&nbsp; Help', 'mHelp', 'sm:');







// 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.



addItem('&nbsp; Home &nbsp;', 'index.html', 'js:', hBar, 70);



addItem('&nbsp; Portrait &nbsp;', 'portrait.html', 'js:', hBar, 70);



addItem('&nbsp; Klavierunterricht &nbsp;', 'mKlavierunterricht', 'sm:');



addItem('&nbsp; Vermietung Musikstudio &nbsp;', 'musikstudio.html', 'js:', hBar, 150);







// This is a vertical menu positioned 0px across and 22px down from its trigger, and is 80px wide.



startMenu('mKlavierunterricht', true, 0, 22, 130, 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('Piano Labor', 'pianolabor.html', '');



addItem('Ort & Infrastruktur', 'ort_infra.html', '');



addItem('Angebot & Preise', 'angebot.html', '');







}



// *** (3) MENU EFFECTS AND ANIMATION ***











// Now you've created a basic menu object, you can add optional effects like borders and



// shadows to specific menus. These functions are found in the "Optional Code" section



// below, you can edit them or delete them entirely if you don't want to use them, with



// no harm to the rest of the script itself.











// Add a border to an all menus using a specified ItemStyle. The syntax is:



// addMenuBorder(menuObject, ItemStyle,



//  opacity of border, 'border colour', border width, 'padding colour', padding width);



// Opacity is a number from 0 to 100, or null for no filter, like the ItemStyles.







addMenuBorder(pMenu, window.subBlank,



 null, '#666666', 1, '#CCCCDD', 2);











// Apply a dropshadow to specific menus again. The syntax is similar, but later on you



// pass arrays [...] for each layer of the shadow you want. I've used two grey layers



// here, but you can use as many or as few as you want. The syntax for the layers is:







// [opacity, 'layer colour', X offset, Y offset, Width Difference, Height difference]







// Opacity is from 0 to 100 (or null for no filter), and the X/Y offsets are the



// distance in pixels from the menu's top left corner to that shadow layer's corner.



// The width/height differences are added or subtracted to the current menu size, for



// instance the first layer of this shadow is 4px narrower and shorter than the menu



// it is shadowing.







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]);











// Add animation to the 'pMenu' menu object for supported browsers.



// Opera doesn't support clipping so we turn it off, and Mozilla versions prior to



// 1.x (such as Netscape 6) are too slow to support it, so disable there too.



// If you don't want animation, delete this entirely, and the menus will act normally.



// Change the speed if you want... it's the last number, between -100 and 100, and is



// defined as the percentage the animation moves each frame.



// The 'menuAnim' function is in the "Optional Code" section below, edit if you want to,



// I've put in a few extra tweaks in there like fading transitions if you're interested.







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)');







 // Alternatively: try the IE5.5+/Windows filters. Comment above two lines out and uncomment:



 //pMenu.showMenu = function(mN)



 // { menuFilterShow(this, mN, 'progid:DXImageTransform.Microsoft.fade(duration=1)') }



 // There's a good list of transitions available from http://msdn.microsoft.com







 // Add animation to other menu objects like this...



 //anotherMenu.showMenu = new Function('mN','menuAnim(this, mN, 10)');



 //anotherMenu.hideMenu = new Function('mN','menuAnim(this, mN, -10)');



}











// Advanced (or just plain determined to tweak everything) users: Custom item arrangement!



// Here you can extend a menu's overall dimensions, and then reposition or resize its items.



// You can arrange the items however you want within a menu, in a curve or similar,



// or even change the overall arrangement of the menu (put items in rows etc).



// Individual items have .iX and .iY which are positions and .iW and .iH which are dimensions.



// I recommend doing this *before* calling the border or shadow commands too :).







//with (pMenu.menu)



//{



// mFile[0].menuW += 20;



// mFile[0].menuH += 20;



// mFile[1].iX += 5;



// mFile[2].iX += 2;



// mFile[2].iW -= 2;



// mFile[3].iX += 5;



// mFile[4].iX += 10;



// mFile[4].iW += 10;



// mFile[4].iY += 3;



//}































// *** (4) EVENTS ***



//



// In JavaScript, there are document 'events' you need to set so any scripts you are using



// are notified of things like page loading/clicking/scrolling. If you've got several menus



// or another JavaScript entirely in your page, you'll need to add all their functions in here.



// For another menu object, call its functions like update() and position() next to pMenu's,



// I've put examples in to show where these need to go.



//    The reason for these is that every time you set them, they override a previous setting.



// So make sure you collate all the functions that need to be called in here! Syntax:







//object.onevent = function()



//{



// function1();



// function2();



// ...



//}







// That's similar to: <BODY ONEVENT="function1(); function2(); ...">











// The most important event is one used to display the menu by calling one of several methods of



// any menu object(s) you have created. This is where you select the menu creation mode. 'Dynamic'



// mode inserts the menus into the document once it has finished loading and supports features



// like modifying the menu after creation. You update a menu in 'Dynamic' mode by just calling the



// .update() method of a menu object like 'pMenu'.



//    'Fast' creation mode writes the menus to the document here and now, which is faster and



// more reliable in many browsers but only when the document's loading -- you do this by passing



// 'true' without quotes to the update function to signal that we're inline.



//    Opera only supports Fast mode and Netscape 4 only supports in Dynamic mode, so we use



// browser-detect code here. If you find some browser has troubles with one mode or another, try



// the other menu creation method -- see the "Cross-Browser" code at the very top of the SCRIPT



// tag for the variables used.



//    Hardcore tweakers -- there's some extra code commented in the popOver() function at the top



// which lets you create the root menu on page load and other menus only as needed, which might



// be useful for very very large menus in a single frame. Look it up if you want.







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);



}







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) location.href = 'index.html';



  if (iN == 2) location.href = 'portrait.html';



  if (iN == 3) location.href = 'klavierunterricht.html';



  if (iN == 4) location.href = 'musikstudio.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 = '' }











// ANIMATION:



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;







  // 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();



 }



}







// BORDERS AND DROPSHADOWS:



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;



 }



}