//  CASCADING POPUP MENUS v5.1  
//      by Angus Turnbull       
//  http://www.twinhelix.com   
//    Visit for more scripts!   

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

// *** START EDITING HERE, READ THIS SECTION CAREFULLY! ***
//
//
// Before you start, make sure you've read the "Conditions Of Use" in this HTML document
// or on my site. Anyway, this menu script is split up into several sections. They are:
//
// (1) ITEMSTYLES - These define the colour and size of menu items. Required to run.
// (2) MENU DATA - These specify the text and links in the menu. Required to run.
// (3) MENU EFFECTS - Want to remove, or change borders, shadows and animation? Edit them here,
//     or you can delete this section entirely to remove extra effects.
// (4) EVENTS - Activate the menu(s), and choose creation mode (Dynamic / Fast) etc. I recommend
//     you read it, but you only really need to change it if you want multiple menus on one page,
//     or are trying to combine this with other JavaScripts. Required to run.
// (5) OPTIONAL CODE - Extra features like adding clicking to 'sm:' items or status messages on
//     mouseover. Animation/effects functions are here too. You can skip or delete this entirely.
// (6) FRAMESET README - If you're using a frameset, read this, it explains what you need to do.



// *** (1) ITEMSTYLES ***
//
// First of all we must create ItemStyles to use in the menu. ItemStyles are a collection of
// dimensions, colours, and font/border stylesheet class names that you can 'apply' to menus
// and items later on for a consistent look. The (somewhat lengthy) syntax is:
//
// styleName = new ItemStyle(length of items, spacing after items, 'popout indicator HTML',
//  popout indicator position, padding of text within item, 'out background colour or image
//  filename', 'hover background colour or filename', 'out text stylesheet class', 'hover text class',
//  'out border stylesheet class', 'hover border class', out opacity percentage or null to make
//  it fully opaque, hover opacity percentage or null, 'CSS mouse cursor for normal items',
//  'CSS cursor for sm: and blank items');
//
// One thing that needs explaining is the popout indicator position -- you pass a positive
// integer to position it from the left of the item, and a negative integer to position it from
// the right edge of the item -- see the example code below if that doesn't make much sense.
// Pass an empty string '' as the over or out background for a transparent background.
// If you pass 'hand' as a cursor, the script automatically translates it to 'pointer' for NS6.
// All stylesheet text/border classes come from the <STYLE> tag in this document, you can change
// the font and border colours and styles used there.
//
// Here are some examples used in this menu demo, read through and see how they're formatted,
// then try tweaking some of the numbers and refreshing the page:


// '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(100, 15, '', 0, 0, '#666666', '#999999', 'highText', 'highText', '', '',
 null, null, 'hand', 'default');

// 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, '<b>&gt;&gt;</b>', -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');