// Cascading Popup Menus v5.2 - Single Frame Menu example script.


// If you're upgrading from v5.1, you can paste your existing menu data in, and if you're
// upgrading from v5.0 you need to add 'cursor' settings to your ItemStyles.
//
// And before going ANY further, you must have READ and AGREE TO the script license!
// It can be found on my site, in the syntax helpfile, or in the demo script document.

/*
var ItemStyleName = new ItemStyle( Length, Spacing, 'Popout Indicator', Indicator Position, Padding, 'Out Background', 'Over Background', 
                    'Out Font Class', 'Over Font Class', 'Out Border Class', 'Over Border Class', Out Opacity, Over Opacity, 'Link Cursor', 
                    'Default Cursor');
* Length: In pixels. For horizontal menus this is the width of items using this ItemStyle, for vertical menus it's the height.
* Spacing: Gap, in pixels, after items that use this ItemStyle.
* Popout Indicator: The small arrow indicating a submenu. Set it to '' for no indicator, otherwise it can be an 
                    HTML string like '&gt;' or an '<IMG>' tag. To swap on mouseover, set as 'SWAP:out text^over text'.
* Indicator Position: In pixels, measured from the left item edge (if it's a positive number) or right edge (negative).
* Padding: In pixels, the gap between the item edge and text.
* Backgrounds (x2): You can use background colours or images; to use background images, set a filename like '/images/pic.gif', 
                    or for colours use a colour name/value. Fading background colours: You can use the form '10#112233' where 
                    the number before the # is the fade speed in percent. For transparent backgrounds use an empty string ''.
* Font/Border Classes (x2): These refer to class names in the .CSS file, which set the font/colour/size/alignment/etc of the 
                            text and borders of items using this ItemStyle. See the .CSS file to edit them. If you don't want 
                            borders, set the border class to an empty string ''.
* Opacities (x2): Set these to null (without quotes) if you want solid items, or use numbers between 0 and 100 for translucent items.
* CSS Cursors (x2): The 'Link Cursor' applies to all items that link to files or JavaScript commands, and the default cursor is 
                    used for empty or 'sm:' items. Cursor values should be valid CSS cursor names like 'default', 'hand', 'crosshair' 
                    and so on (note that 'hand' is automatically translated into 'pointer' where needed).
*/
var mRoot = new ItemStyle(33, 0, '', 0, 10, '15#cc0000', '10#FFFFFF', 'highText', 'lowText', '', '',
 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 mSub = new ItemStyle(20, 1, '&gt;', -15, 2, '10#000066', '10#99CCFF', 'buttonText', 'buttonHover',
 'buttonBorder', 'buttonBorderOver', 75, 95, 'hand', 'default');





// Create a PopupMenu() object, and pass its own name so it can reference itself later on.
// We also use a 'with' block to work with its properties and functions below.

var pMenu = new PopupMenu('pMenu');
with (pMenu)
{

/*
startMenu( 'Menuname', Orientation, Left Offset, Top Offset, Menu Breadth, Default ItemStyle, 'Parent Frame', Show onclick);
* Menuname: A string like 'root' or 'mFile', which you can use to refer to this menu and pop it out. 
            Any menuname starting with the letters 'root' is special, shown initially and never hidden. 
            Don't use spaces or special characters in menunames!
* Orientation: Use true for a vertical menu, or false for a horizontal menubar.
* Offsets: Specify the point in the page over which the menus will hover. 
           If you set the Left or Top position as a NUMBER, e.g. 130 this menu will be offset from the 
           item that popped it out by that many pixels. If you set them as a STRING 'in quotes', this 
           menu will be offset from the top-left corner of its frame/window in pixels. Strings are 
           evaluated as JavaScript expressions that can centre, right-align, scroll or otherwise position 
           the menu, see the advanced positioning section for more info. Note: 'root' menus are always 
           absolutely positioned from the page corner.
* Menu Breadth: The breadth is the width of vertical menus, or the height of horizontal menus, both in pixels.
* Default ItemStyle: Used for item in this menu unless they specify one of their own, to control appearance and item lengths.
* OPTIONAL: Parent Frame: If left out or set to an empty string '', menus will display in the current window. 
            Otherwise, set to a frame reference like 'content' to show the menu in a frame by that name 
            (only if you're using the frameset version of the script).
* OPTIONAL: Show onclick: Set to true to show submenus onclick instead of the default onmouseover appearance, like Windows' menus.
*/

/*
addItem( 'Item HTML', 'URL / Menuname / Command', 'Item Type', Custom ItemStyle, Length, Spacing.....);
* Item HTML: The text or HTML to display in the item. It can change on hover, using the format: 'SWAP:Out text^Over text'. 
             Try swapping two <IMG> tags for rollover image items perhaps.
* URL / Menuname / Command: What to do with the item when the user points at it or clicks it. Set to either a URL 
                            like '/folder/file.html', a menuname like 'mFile', or a JavaScript command like 'alert("hello")'. 
                            Note that URLs are usually relative to the HTML page that contains the menu, so if you are using 
                            folders or frames specify URLs absolutely, that is starting with a slash '/'.
* Item Type: This tells the script what you want to do with this item. Set it to an empty string '' to load a URL in the current window. 
             If you want to load a file in another frame, set it to a frame reference like 'top.content' to load your file in a frame 
             named 'content'. If this item will pop out a submenu, set it to 'sm:'. If your item runs a JavaScript command, set it to 'js:'.
* OPTIONAL: Custom ItemStyle: If you want, pass an ItemStyle to this item to override the menu default (e.g. for 'header' items in menus). 
            Set it to null or leave out entirely to use the default menu ItemStyle.
* OPTIONAL: Length, Spacing.....: You can override the ItemStyle parameters individually, in the same order as ItemStyles, 
            if you want to give this item a unique size, colour, indicator etc. See examples in the demo script for this.
*/

//Root menu
startMenu('root', true, 10, 240, 154, mRoot, '', false);
addItem('Home', 'default.htm', '', null);
addItem('In the News', 'mNews', 'sm:', null);
addItem('In Action', 'mAction', 'sm:', null);
addItem('General Info', 'mInfo', 'sm:', null);
addItem('Officers / Members', 'mOfcMem', 'sm:', null);
addItem('EMS Operations', 'EMSOperations.htm', '', null);
addItem('Technical Rescue', 'mTech', 'sm:', null);
addItem('Education / Training', 'mTrain', 'sm:', null);
//addItem('Apparatus', 'mApparatus', 'sm:', null);
addItem('Cadet Corps', 'CadetCorps.htm', '', null);
addItem('Members Only', '/members/', '', null);

//In The News sub-menu
startMenu('mNews', true, 154, 0, 200, mSub, '', false);
addItem('News Articles', 'NewsArticles_menu.asp', '', mSub);
addItem('Press Releases', 'PressReleases.asp', '', mSub);

//In Action sub-menu
startMenu('mAction', true, 154, 0, 200, mSub, '', false);
addItem('Apparatus', 'InActionApp.asp', '', mSub);
addItem('EMS in Action', 'InActionEMS.asp', '', mSub);
addItem('Rescue in Action', 'InActionTRT.asp', '', mSub);
addItem('Training / Drills', 'InActionTrain.asp', '', mSub);
addItem('Historic Pictures Archive', 'InActionHist.asp', '', mSub);

//General Info sub-menu
startMenu('mInfo', true, 154, 0, 200, mSub, '', false);
addItem('Annual Call Statistics', 'AnnualCallStatistics.asp', '', mSub);
addItem('Mailing Address / Phone', 'ContactUs.htm', '', mSub);
addItem('Join Us', 'JoinUs.htm', '', mSub);
addItem('Donate', 'Donate.htm', '', mSub);

//Officers / Members sub-menu
startMenu('mOfcMem', true, 154, 0, 200, mSub, '', false);
addItem('Officers', 'Officers.asp', '', mSub);
addItem('Executive Committee', 'ExecutiveCommittee.asp', '', mSub);
addItem('Board of Trustees', 'BoardOfTrustees.asp', '', mSub);
addItem('Active Members / Cadets', 'ActiveMembersCadets.asp', '', mSub);
addItem('Life Members', 'LifeMembers.asp', '', mSub);

//Technical Rescue sub-menu
startMenu('mTech', true, 154, 0, 200, mSub, '', false);
addItem('Rescue Operations', 'TechRescueOperations.htm', '', mSub);
addItem('Members', 'TechRescueMembers.asp', '', mSub);
//addItem('Rescue Capabilities', 'mTechCap', 'sm:', mSub);
//addItem('Training / Drills', 'UnderConstruction.htm', '', mSub);

//Technical Rescue --> Rescue Capabilities sub-menu
//startMenu('mTechCap', true, 154, 0, 200, mSub, '', false);
//addItem('Vehicle Extrication', 'UnderConstruction.htm', '', mSub);
//addItem('Confined Space', 'UnderConstruction.htm', '', mSub);
//addItem('Trench / Collapse', 'UnderConstruction.htm', '', mSub);
//addItem('Swift Water', 'UnderConstruction.htm', '', mSub);
//addItem('Rope', 'UnderConstruction.htm', '', mSub);

//Education / Training sub-menu
startMenu('mTrain', true, 154, 0, 200, mSub, '', false);
//addItem('EMS Continuing Education', 'mTrainCEU', 'sm:', mSub);
addItem('Upcoming Training', 'CEUCalendar.asp', '', mSub);
addItem('NJ EMS Training Fund Form', 'http://www.state.nj.us/health/forms/ems-81.pdf', '', mSub);

//Education / Training --> EMS Continuing Education sub-menu
//startMenu('mTrainCEU', true, 154, 0, 200, mSub, '', false);
//addItem('CEU Calendar', 'CEUCalendar.htm', '', mSub);
//addItem('Annual Symposium', 'AnnualSymposium.htm', '', mSub);

//Apparatus sub-menu
//startMenu('mApparatus', true, 154, 0, 200, mSub, '', false);
//addItem('EMS Fleet', 'ApparatusEMS.htm', '', mSub);
//addItem('Rescue Fleet', 'ApparatusRescue.htm', '', mSub);
//addItem('1972 Cadillac Project', 'Apparatus1972Cadillac.htm', '', mSub);

// HIDE OR SHOW DELAYS (in milliseconds) can be customised. Defaults are:
//showDelay = 0;
//hideDelay = 500;
// Specify hideDelay as zero if you want to disable autohiding, and showDelay as a couple of
// hundred if you don't want the menus showing instantaneously when moused over.

// HIDE MENUS ON DOCUMENT CLICK: Try uncommenting this, and perhaps set hideDelay to zero:
//hideDocClick = true;

// You can assign 'oncreate' events to specific menus. By default, the script has only one for
// the root menu that shows it when it is created. You may wish to change it to something like the
// following, which uses the animation function to show the menu, or delay its show altogether.
//menu.root[0].oncreate = function() { pMenu.doVis('root', true) }

// End of 'with (pMenu)' block. That's one menu object created!

}





// CREATE ANOTHER MENU OBJECT here if you want multiple menus on a page, or you can just
// duplicate this entire file and rename 'pMenu' to something else.
// Every menu object MUST have a menu named 'root' in it, as that's always visible.

//var anotherMenu = new PopupMenu('anotherMenu');
//with (anotherMenu)
//{
// startMenu('root', .....);
// ... make menus here ...
//}




// ******************** MENU EFFECTS ********************
//
// Now you've created a basic menu object, you can add optional effects like borders and
// shadows to specific menus. You can remove this section entirely if you want, the
// functions called are found at the bottom of this file.



// BORDER: Added to all menus in a named object 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 solid colour (just like the ItemStyles).

addMenuBorder(pMenu, window.subBlank,
 null, '#666666', 1, '#CCCCDD', 2);



// DROPSHADOW: added to specific ItemStyles 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 to make it solid), 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]);



// ANIMATION SETTING: We add this to the 'pMenu' menu object for supported browsers.
// IE4/Mac and Opera 5/6 don't support clipping, and Mozilla versions prior to 1.x (such as
// Netscape 6) are too slow to support it, so I'm doing some browser sniffing.
// 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 (defaults are 10 and 15).

if ((navigator.userAgent.indexOf('rv:0.')==-1) &&
    !(isOp&&!document.documentElement) && !(isIE4&&!window.external))
{
 pMenu.showMenu = new Function('mN','menuAnim(this, mN, 10)');
 pMenu.hideMenu = new Function('mN','menuAnim(this, mN, -15)');

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







// ******************** FUNCTIONS CALLED BY THE EFFECTS SECTION ********************

// These can be deleted if you're not using them. Alternatively, if you're using several menu
// data files, you may want to move them to the "core" script file instead.



// This is the "positioning from page anchors" code used by the advanced positioning expressions.
page.elmPos=function(e,p)
{
 var x=0,y=0,w=p?p:this.win;
 e=e?(e.substr?(isNS4?w.document.anchors[e]:getRef(e,w)):e):p;
 if(isNS4){if(e&&(e!=p)){x=e.x;y=e.y};if(p){x+=p.pageX;y+=p.pageY}}
 if (e && this.MS && navigator.platform.indexOf('Mac')>-1 && e.tagName=='A')
 {
  e.onfocus = new Function('with(event){self.tmpX=clientX-offsetX;' +
   'self.tmpY=clientY-offsetY}');
  e.focus();x=tmpX;y=tmpY;e.blur()
 }
 else while(e){x+=e.offsetLeft;y+=e.offsetTop;e=e.offsetParent}
 return{x:x,y:y};
};




// Animation:
//
// Each menu object you create by default shows and hides its menus instantaneously.
// However you can override this behaviour with custom show/hide animation routines,
// as we have done in the "Menu Effects" section. Feel free to edit this, or delete
// this entire function if you're not using it. Basically, make functions to handle
// menuObj.showAnim() and .hideAnim(), both of which are passed menu names.
//
// Customisers: My lyr.clip() command gets passed the parameters (x1, y1, x2, y2)
// so you might want to adjust the direction etc. Oh, and I'm adding 2 to the dimensions
// to be safe due to different box models in some browsers.
// Another idea: add some if/thens to test for specific menu names...?

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 litNow() array doesn't show this menu as lit, and we're still showing it,
  // force a quick hide (this stops miscellaneous timer errors).
  //if (dir>0 && !menuObj.litNow[menuObj.menu[menuName][0].parentMenu]) dir = -100;

  // If the layer doesn't exist (cross-frame navigation) quit.
  if (!lyr || !lyr.ref) return;
  // This next line is not strictly necessary, but it stops the one-in-a-hundred menu that
  // shows and doesn't hide on very quick mouseovers.
  if (!visNow && dir>0) dir = 0-dir;
  // 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 = dir>0 ? mD.zIndex + 1 : 1001;

  // Alpha fade in IE5.5+. Mozilla's opacity (pre-v1.7) isn't well suited 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, either disable dropshadows or set the opacity
  // values for your items to numbers instead of null.
  //if (isIE && window.createPopup) lyr.alpha(counter&&(counter<100) ? counter : null);

  // Clip the visible area. The syntax is:   lyr.clip(left, top, right, bottom);
  // As you can see in these examples, three are static at either zero or the edge of a menu item,
  // and either the top or bottom is a complicated formula based on the 'counter' variable which
  // counts from 0 to 100 and back again; this give a nice accelerating-sliding animation.
  // Feel free to experiment with your own animations, here are some samples (use one only):

  // Straightforward downwards clipping animation (default setting):
  lyr.clip(0, 0, menuW+2, (menuH+2)*Math.pow(Math.sin(Math.PI*counter/200),0.75) );
  // If you want, comment out the above line and enable this one to animate bottom-upwards:
  //lyr.clip(0, (menuH+2)-(menuH+2)*Math.pow(Math.sin(Math.PI*counter/200),0.75), menuW+2, menuH+2);
  // Another alternative: Move+clip sliding animation. Looks really cool :).
  //if (!counter) mD.origY = lyr.y();
  //var newY = (menuH+2)-(menuH+2)*Math.pow(Math.sin(Math.PI*counter/200),0.75);
  //lyr.clip(0, newY, menuW+2, menuH+2);
  //lyr.y(mD.origY - newY);

  // Increment the counter and if it hasn't reached the end (counter is 0% or 100%),
  // set the timer to call the animation function again in 40ms to contine the animation.
  // Note that we hide the menu div on animation end in that direction.
  counter += dir;
  if (counter>100) { counter = 100; lyr.sty.zIndex = mD.zIndex }
  else if (counter<0) { counter = 0; lyr.vis('hidden') }
  else timer = setTimeout('menuAnim('+menuObj.myName+',"'+menuName+'",'+dir+')', 40);
 }
};




// Borders and Dropshadows:
//
// Here's the menu border and dropshadow functions we call above. Edit ot delete if you're
// not using them. Basically, they assign a string to pMenu.menu.menuName[0].extraHTML, which
// is written to the document with the menus as they are created -- the string can contain
// anything you want, really. They also adjust the menu dimensions and item positions
// to suit. Dig out the Object Browser script and open up "pMenu" for more info.

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+'%; 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];
   // Safari 1.2 bug: it inherits alpha values SIDEWAYS!?!? What were they thinking?
   var alpha = (s[0]!=null && navigator.userAgent.indexOf('AppleWebKit') == -1);
   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)+'; '+
    (alpha?'filter:alpha(opacity='+s[0]+'); -moz-opacity:'+s[0]+'%; 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;
 }
};