+------------------------------------------------------------------+
| yx_menu collection                                               |
| Copyright 1999  Xin Yang        yangxin@iname.com                |
| Web Site:                       http://yx.webprovider.com        |
+------------------------------------------------------------------+

 Function   absolutely positioned menu

 File       yx_menu.js
 Comes with yx_menu.css

 Sample     yx_menu_sample.html
 Menu file  yx_menu_sample.js

 Associates yx_menu_builder.html, yx_menux.html, yx_null.html

 Browser    IE4, IE5 & NN4x(all for Windows)

 Usage      1. place following lines in the <head></head> section:
               <link rel=stylesheet href="yx_menu.css" type="text/css">
               <script language="javascript" src="yx_menu.js"></script>
               <script language="javascript" src="your_menu.js"></script>

               where
               # yx_menu.css : the font style for texts in the menu
               # your_menu.js : the menu definition file(the file name doesn't matter)

                 menu definition format in your_menu.js:

                 menuName1 = new Array();
                 menuName1[0] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuName1[n] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuNameK = new Array();
                 menuNameK[0] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuNameK[m] = new Array("itemType","itemName","itemDescription","itemValue");

                 where
                 - itemType : M for sub-menu,
                              L for link item,
                              C for command item,
                              S for separator(for a separator, the script won't care about the following elements)
                 - itemName : text shows up in the menu pad
                 - itemDescription : text shows up in the window status bar when mouse goes over the item
                 - itemValue : name of the variable which defines the sub-menu, or
                               URL string for link item, or
                               javascript command string for command item

                 note: you can use the yx_menu_builder.html to build the definition lines for you, then copy & paste them into your_menu.js

            2. place the function call in the <body> tag:
               onload="buildMenu('menuName',x,y)"

               where
               # menuName : the name of the variable which defines the top level menu in your_menu.js
               # [x,y] : the left-top coordinates of the menu

            3. modify the following two functions to meet your requirements
               # function launchCommand(commandString) : launch a command when a command item is clicked
               # function launchPage(pageURL) : launch a page when a link item is clicked

 Issues     the script uses 12-pixel arial as the font for the menu text, thus three situations will have the texts of the menu items overflow the menu pad:
            - the visitor's browser uses its default font and overwrites the font defined by the script
            - the visitor's system doesn't have the defined font installed
            - you have used many capitalized characters or wide characters(such as W,w,M,m) as the menu item text

            to work around it, you should enlarge the menu pad by modifying the following two variables:
            # charWidth = 7
            # charHeight = 15

 Limitation the menu item text, not the whole menu item bar, is the only clickable area

 ------

 Function   pop-up menu controlled by mouse double-clicks

 File       yx_menu-v2.js
 Comes with yx_menu.css

 Sample     yx_menu_sample-v2.html
 Menu file  yx_menu_sample.js

 Associates yx_menu_builder.html, yx_menux.html, yx_null.html

 Browser    IE4, IE5 & NN4x(all for Windows)

 Usage      1. place following lines in the <head></head> section:
               <link rel=stylesheet href="yx_menu.css" type="text/css">
               <script language="javascript" src="yx_menu-v2.js"></script>
               <script language="javascript" src="your_menu.js"></script>

               where
               # yx_menu.css : the font style for texts in the menu
               # your_menu.js : the menu definition file(the file name doesn't matter)

                 menu definition format in your_menu.js:

                 menuName1 = new Array();
                 menuName1[0] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuName1[n] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuNameK = new Array();
                 menuNameK[0] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuNameK[m] = new Array("itemType","itemName","itemDescription","itemValue");

                 where
                 - itemType : M for sub-menu,
                              L for link item,
                              C for command item,
                              S for separator(for a separator, the script won't care about the following elements)
                 - itemName : text shows up in the menu pad
                 - itemDescription : text shows up in the window status bar when mouse goes over the item
                 - itemValue : name of the variable which defines the sub-menu, or
                               URL string for link item, or
                               javascript command string for command item

                 note: you can use the yx_menu_builder.html to build the definition lines for you, then copy & paste them into your_menu.js

            2. place the function call in the <body> tag:
               onload="buildMenu('menuName')"

               where
               # menuName : the name of the variable which defines the top level menu in your_menu.js

            3. modify the following two functions to meet your requirements
               # function launchCommand(commandString) : launch a command when a command item is clicked
               # function launchPage(pageURL) : launch a page when a link item is clicked

 Issues     the script uses 12-pixel arial as the font for the menu text, thus three situations will have the texts of the menu items overflow the menu pad:
            - the visitor's browser uses its default font and overwrites the font defined by the script
            - the visitor's system doesn't have the defined font installed
            - you have used many capitalized characters or wide characters(such as W,w,M,m) as the menu item text

            to work around it, you should enlarge the menu pad by modifying the following two variables:
            # charWidth = 7
            # charHeight = 15

 Limitation the menu item text, not the whole menu item bar, is the only clickable area

 ------

 Function   relatively positioned menu

 File       yx_menu-v3.js
 Comes with yx_menu-v3.css

 Sample     yx_menu_sample-v3.html
 Menu file  yx_menu_sample.js

 Associates yx_menu_builder.html, yx_menux.html, yx_null.html

 Browser    IE4, IE5 & NN4x(all for Windows)

 Usage      1. place following lines in the <head></head> section:
               <link rel=stylesheet href="yx_menu-v3.css" type="text/css">
               <script language="javascript" src="yx_menu-v3.js"></script>
               <script language="javascript" src="your_menu.js"></script>

               where
               # yx_menu-v3.css : the font style for texts in the menu and the layer definition for the menu holder
               # your_menu.js : the menu definition file(the file name doesn't matter)

                 menu definition format in your_menu.js:

                 menuName1 = new Array();
                 menuName1[0] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuName1[n] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuNameK = new Array();
                 menuNameK[0] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuNameK[m] = new Array("itemType","itemName","itemDescription","itemValue");

                 where
                 - itemType : M for sub-menu,
                              L for link item,
                              C for command item,
                              S for separator(for a separator, the script won't care about the following elements)
                 - itemName : text shows up in the menu pad
                 - itemDescription : text shows up in the window status bar when mouse goes over the item
                 - itemValue : name of the variable which defines the sub-menu, or
                               URL string for link item, or
                               javascript command string for command item

                 note: you can use the yx_menu_builder.html to build the definition lines for you, then copy & paste them into your_menu.js

            2. place the function call in the <body> tag:
               onload="buildMenu('menuName')"

               where
               # menuName : the name of the variable which defines the top level menu in your_menu.js

            3. within the <body></body> section, place the the menu holder where the menu to be shown
               <div id="menuHolder"></div>

            4. modify the following two functions to meet your requirements
               # function launchCommand(commandString) : launch a command when a command item is clicked
               # function launchPage(pageURL) : launch a page when a link item is clicked

 Issues     the script uses 12-pixel arial as the font for the menu text, thus three situations will have the texts of the menu items overflow the menu pad:
            - the visitor's browser uses its default font and overwrites the font defined by the script
            - the visitor's system doesn't have the defined font installed
            - you have used many capitalized characters or wide characters(such as W,w,M,m) as the menu item text

            to work around it, you should enlarge the menu pad by modifying the following two variables:
            # charWidth = 7
            # charHeight = 15

 Limitation the menu item text, not the whole menu item bar, is the only clickable area

 ------

 Function   multiple relatively positioned menus

 File       yx_menu-v4.js
 Comes with yx_menu.css

 Sample     yx_menu_sample-v4.html
 Menu file  yx_menu_sample-v4.js
 Style file yx_menu_sample-v4.css

 Associates yx_menu_builder.html, yx_menux.html, yx_null.html

 Browser    IE4, IE5 & NN4x(all for Windows)

 Usage      1. place following lines in the <head></head> section:
               <link rel=stylesheet href="yx_menu.css" type="text/css">
               <script language="javascript" src="yx_menu-v4.js"></script>
               <link rel=stylesheet href="your_menu.css" type="text/css">
               <script language="javascript" src="your_menu.js"></script>

               where
               # yx_menu.css : the font style for texts in the menu
               # your_menu.css : the layer definition file of the menu holders
               # your_menu.js : the menu definition file(the file name doesn't matter)

                 * menu definition format in your_menu.js:

                 menuControlName = new Array();
                 menuControlName[0] = new Array("menu1Name","menu1HolderID");
                 ...
                 menuControlName[X] = new Array("menuXName","menuXHolderID");

                 * for each menu:

                 menuName1 = new Array();
                 menuName1[0] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuName1[n] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuNameK = new Array();
                 menuNameK[0] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuNameK[m] = new Array("itemType","itemName","itemDescription","itemValue");

                 where
                 - itemType : M for sub-menu,
                              L for link item,
                              C for command item,
                              S for separator(for a separator, the script won't care about the following elements)
                 - itemName : text shows up in the menu pad
                 - itemDescription : text shows up in the window status bar when mouse goes over the item
                 - itemValue : name of the variable which defines the sub-menu, or
                               URL string for link item, or
                               javascript command string for command item

                 note: you can use the yx_menu_builder.html to build the definition lines for you, then copy & paste them into your_menu.js

                 * menu holder definition format in your_menu.css:

                 menu1HolderID {position:relative; left:0; top:0; visibility:visible; z-index:1;}
                 ...
                 menuXHolderID {position:relative; left:0; top:0; visibility:visible; z-index:1;}

            2. place the function call in the <body> tag:
               onload="buildMenu('menuControlName')"

               where
               # menuControlName : the name of the variable which defines the menu holders in your_menu.js

            3. within the <body></body> section, place the menu holders where the menu to be shown
               <div id="menu1HolderID"></div>
               ...
               <div id="menuXHolderID"></div>

            4. within the <body></body> section, use links in the following format to open/close the menus:
               <a href="javascript:openMenu(menuIndex)" onMouseOver="overMenu(menuIndex); window.status=window.defaultStatus; return true;" onMouseOut="outMenu()">Your Text Here</a>
               <a href="javascript:closeMenu(menuIndex)">Your Text Here</a>

               where
               # openMenu(menuIndex) : when the link is clicked, open the menu with index equal to menuIndex, and close other opened menus if there are any
               # menuIndex : the index of your menuControlName array corresponding to the menus

               note : calling the openMenu() function will close the menu which is opened before the call, if there is one, and calling the openMenu() function again with the same menuIndex will close the menu, so actually your will seldom use the closeMenu() function to close a menu

            5. modify the following two functions to meet your requirements
               # function launchCommand(commandString) : launch a command when a command item is clicked
               # function launchPage(pageURL) : launch a page when a link item is clicked

 Issues     the script uses 12-pixel arial as the font for the menu text, thus three situations will have the texts of the menu items overflow the menu pad:
            - the visitor's browser uses its default font and overwrites the font defined by the script
            - the visitor's system doesn't have the defined font installed
            - you have used many capitalized characters or wide characters(such as W,w,M,m) as the menu item text

            to work around it, you should enlarge the menu pad by modifying the following two variables:
            # charWidth = 7
            # charHeight = 15

 Limitation the menu item text, not the whole menu item bar, is the only clickable area

 Note       in Netscape Navigator, visitors might notice that it takes a while for the first time when the first menu is to be shown as the layers for the menu pad are being generated on the fly

 ------

 Function   relatively positioned menu bar, an extension of v4

 File       yx_menu-v6.js
 Comes with yx_menu-v6.css

 Sample     yx_menu_sample-v6.html
 Menu file  yx_menu_sample-v6.js

 Associates yx_menu_builder.html, yx_menux.html, yx_null.html

 Browser    IE4, IE5 & NN4x(all for Windows)

 Usage      1. place following lines in the <head></head> section:
               <link rel=stylesheet href="yx_menu-v6.css" type="text/css">
               <script language="javascript" src="yx_menu-v6.js"></script>
               <script language="javascript" src="your_menu.js"></script>

               where
               # yx_menu-v6.css : the font style for texts in the menu
               # your_menu.js : the menu definition file(the file name doesn't matter)

                 * menu definition format in your_menu.js:

                 menuControlName = new Array();
                 menuControlName[0] = new Array("menu1LinkDisplayName","menu1Name");
                 ...
                 menuControlName[X] = new Array("menuXLinkDisplayName","menuXName");

                 Note : the format of menuControlName array in v6 is different from that in v4

                 * for each menu:

                 menuName1 = new Array();
                 menuName1[0] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuName1[n] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuNameK = new Array();
                 menuNameK[0] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuNameK[m] = new Array("itemType","itemName","itemDescription","itemValue");

                 where
                 - itemType : M for sub-menu,
                              L for link item,
                              C for command item,
                              S for separator(for a separator, the script won't care about the following elements)
                 - itemName : text shows up in the menu pad
                 - itemDescription : text shows up in the window status bar when mouse goes over the item
                 - itemValue : name of the variable which defines the sub-menu, or
                               URL string for link item, or
                               javascript command string for command item

                 note: you can use the yx_menu_builder.html to build the definition lines for you, then copy & paste them into your_menu.js

            2. place the function call in the <body> tag:
               onload="buildMenu('menuControlName')"

               where
               # menuControlName : the name of the variable which defines the menu bar in your_menu.js

            3. within the <body></body> section, place the menu holder where the menu bar to be shown
               <div id="menuHolder"></div>

            4. modify the following two functions to meet your requirements
               # function launchCommand(commandString) : launch a command when a command item is clicked
               # function launchPage(pageURL) : launch a page when a link item is clicked

 Issues     the script uses 14-pixel arial and 12-pixel arial as the fonts for the menu text, thus three situations will have the texts of the menu items overflow the menu pad:
            - the visitor's browser uses its default font and overwrites the font defined by the script
            - the visitor's system doesn't have the defined font installed
            - you have used many capitalized characters or wide characters(such as W,w,M,m) as the menu item text

            to work around it, you should enlarge the menu pad by modifying the following four variables:
            # titleWidth = 9;
            # titleHeight = 17
            # charWidth = 7
            # charHeight = 15

 Limitation the menu item text, not the whole menu item bar, is the only clickable area

 Note       in Netscape Navigator, visitors might notice that it takes a while for the first time when a menu is to be shown as the layers for the menu pad are being generated on the fly

 ------

 Function   multiple pop-up menus(activated by links of image, text or map)

 File       yx_menu-v7.js
 Comes with yx_menu-v7.css

 Sample     yx_menu_sample-v7.html
 Menu file  yx_menu_sample-v7.js

 Associates yx_menu_builder.html, yx_menux.html, yx_null.html

 Browser    IE4, IE5 & NN4x(all for Windows)

 Usage      1. place following lines in the <head></head> section:
               <link rel=stylesheet href="yx_menu-v7.css" type="text/css">
               <script language="javascript" src="yx_menu-v7.js"></script>
               <script language="javascript" src="your_menu.js"></script>

               where
               # yx_menu-v7.css : the font style for texts/contents in the menu
               # your_menu.js : the menu definition file(the file name doesn't matter)

                 * menu definition format in your_menu.js:

                 menuControlName = new Array();
                 menuControlName[0] = new Array("menu1Name");
                 ...
                 menuControlName[X] = new Array("menuXName");

                 * for each menu:

                 menuName1 = new Array();
                 menuName1[0] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuName1[n] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuNameK = new Array();
                 menuNameK[0] = new Array("itemType","itemName","itemDescription","itemValue");
                 ...
                 menuNameK[m] = new Array("itemType","itemName","itemDescription","itemValue");

                 where
                 - itemType : M for sub-menu,
                              L for link item,
                              I for info box
                              C for command item,
                              S for separator(for a separator, the script won't care about the following elements)
                 - itemName : text shows up in the menu pad
                 - itemDescription : text shows up in the window status bar when mouse goes over the item, or
                                     contents in html format for info box
                 - itemValue : name of the variable which defines the sub-menu, or
                               URL string for link item, or
                               width for info box, or
                               javascript command string for command item

                 note: you can use the yx_menu_builder.html to build the definition lines for you, then copy & paste them into your_menu.js

            2. place the function call in the <body> tag:
               onload="buildMenu('menuControlName')"

               where
               # menuControlName : the name of the variable which lists the top-level menus in your_menu.js

            3. within the <body></body> section, use the following url to launch the menus:
               href="javascript:openMenu(menuIndex)"

               where
               # openMenu(menuIndex) : when the link is clicked, open the menu with index equal to menuIndex, and close other opened menus if there are any
               # menuIndex : the index of your menuControlName array corresponding to the menus

            4. modify the following two functions to meet your requirements
               # function launchCommand(commandString) : launch a command when a command item is clicked
               # function launchPage(pageURL) : launch a page when a link item is clicked

 Issues     the script uses 12-pixel arial as the font for the menu text, thus three situations will have the texts of the menu items overflow the menu pad:
            - the visitor's browser uses its default font and overwrites the font defined by the script
            - the visitor's system doesn't have the defined font installed
            - you have used many capitalized characters or wide characters(such as W,w,M,m) as the menu item text

            to work around it, you should enlarge the menu pad by modifying the following two variables:
            # charWidth = 7
            # charHeight = 15

 Limitation the menu item text, not the whole menu item bar, is the only clickable area

 Note       in Netscape Navigator, visitors might notice that it takes a while for the first time when the first menu is to be shown as the layers for the menu pad are being generated on the fly

 ------

 Function   menu definition script builder

 File       yx_menu_builder.html
 Comes with yx_menux.html, yx_null.html

 Browser    IE4, IE5 & NN4x

 Usage      fill in your menu definition, generate the definition script, copy & paste into your_menu.js