[mxbb-commits] mx_music/phpbb2/mx_mod/mx_shared/mygosumenu/1.0 DropDownMenu1.js, NONE, 1.1 DropDownMenu1.txt, NONE, 1.1 example1.css, NONE, 1.1 example1.html, NONE, 1.1 example2.css, NONE, 1.1 example2.html, NONE, 1.1 temp.php, NONE, 1.1

[FlorinCB <ory...@us...>]

Update of /cvsroot/mxbb/mx_music/phpbb2/mx_mod/mx_shared/mygosumenu/1.0
In directory sc8-pr-cvs16.sourceforge.net:/tmp/cvs-serv19367/mx_mod/mx_shared/mygosumenu/1.0

Added Files:
	DropDownMenu1.js DropDownMenu1.txt example1.css example1.html 
	example2.css example2.html temp.php 
Log Message:
upgrade

--- NEW FILE: example2.css ---
.ddm1 {
    font: 11px tahoma;
}
.ddm1 .item1,
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
    padding: 3px 8px 4px 8px;
    border: 1px #003366;
    border-style: solid solid none solid;
    text-decoration: none;
    display: block;
    position: relative;
}
.ddm1 .item1 {
    background: #0EA138;
    color: #ffffff;
}
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
    background: #FF6600;
    color: #ffffff;
}
.ddm1 .item2,
.ddm1 .item2:hover {
    padding: 3px 8px 4px 8px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}
.ddm1 .item2 {
    background: #3264C7;
    color: #ffffff;
}
.ddm1 .item2:hover {
    background: #6699FF;
    color: #ffffff;
}
.ddm1 .section {
    border: 1px #003366;
    border-style: solid solid solid solid;
    position: absolute;
    visibility: hidden;
    z-index: -1;
}
.ddm1 .bottom,
.ddm1 .bottom:hover { border-style: solid solid solid solid; }

* html .ddm1 td { position: relative; } /* ie 5.0 fix */
--- NEW FILE: DropDownMenu1.txt ---
/*
 * PROJECT:   mygosuMenu
 * VERSION:   1.0.8
 * COPYRIGHT: (c) 2003,2004 Cezary Tomczak
 * LINK:      http://gosu.pl/dhtml/mygosumenu.html
 * LICENSE:   BSD (revised)
 */

----------------
! INSTALL
----------------

1) include .css file
2) include .js file
3) put html structure
4) initialize menu
   
Example of initializing:
  var menu = new DropDownMenu1("id_of_the_menu");
  menu.init();

Example of initializing and setting additional stuff:
  var ddm1 = new DropDownMenu1("ddm1");
  ddm1.type = "horizontal";
  ddm1.delay.show = 0;
  ddm1.delay.hide = 100;
  ddm1.position.top = -5;
  ddm1.position.left = 0;
  ddm1.init();

----------------
! FEATURES
----------------

- horizontal or vertical menu
- can be positioned statically or absolutely
- delay for showing/hiding menu (can be turned off by setting to 0)
- position of submenus can be changed, so they can for example overflow parent elements
- on the same page there can be many menus created
- seperated into 3 layers: behaviour(javascript), structure(html), presentation(css)
- search engine friendly
- free for any use (BSD license) 

----------------
! COMPATIBILITY
----------------

Tested on: IE, Mozilla, Opera, Netscape, Firefox, Safari

Known CSS problems:
* Safari: setting margin > 0 for BODY element causes some positioning problems. Sections in the menu
  will be placed a few pixels away from the default place. The menu still works and is usable. To avoid
  these problems set "margin: 0;" for BODY element.
* IE: removing doctype causes that IE enables Backward Compatibility Mode and some CSS bugs can appear.
  Then you will need to edit .css file and make some fixes.

----------------
! CHANGELOG
----------------

*** 1.0.8 ***

  - added support for IE 5.0/5.5

*** 1.0.7 ***

  - fixed a bug that appeared on IE 5.5
  - [js] modified some code
  - [css] removed 2 fixes at the end of file

*** 1.0.6 ***
  
  - Fixed Safari word-spacing bug
  - Fixed Opera margin bug
  - Many other bugs fixed, by using table.
  - Using table again, because while trying to do it completely CSS driven without using tables,
    I have encountered so many incompatibilites between browsers, so many css bugs that it became nearly
    impossible to do it.

*** 1.0.5 ***

  - the menu has been completely rewritten, a few bugs fixed, new features added !!

*** 1.0.4 ***

  - [menu.css] fixed a minor Opera 7.2.x CSS bug (removed "width: 100%" from #menu .top)
  - [menu.css] some other changes
  - [menu.js] done some optimization

*** 1.0.3 ***

  - fixed a bug on Mozilla (z-index issue)
    2 files were modified:
    * menu.js after line 29 added: "document.getElementById(section).style.zIndex = -1"
    * menu.css added "z-index: -1;" to #menu div.section
  - in menu.css , changed position from "static" to "relative" in #menu div.box
    (probably it caused the menu not working on Safari browser)

*** 1.0.2 ***

  - fixed a bug where the menu disappeared when the mouse was not over a link, but was over the menu 
  - fixed a few minor bugs that affected the construction of the left menu 
  - added an example of the left menu 
  - removed debug tools 
  - size of menu.js reduced from 5kB to 3kB 

*** 1.0.1 ***

  - an easier way to put boxes in menu.html

*** 1.0.0 ***

  - first release !
--- NEW FILE: temp.php ---
/*
 * DO NOT REMOVE THIS NOTICE
 *
 * PROJECT:   mygosuMenu
 * VERSION:   1.0.8
 * COPYRIGHT: (c) 2003,2004 Cezary Tomczak
 * LINK:      http://gosu.pl/dhtml/mygosumenu.html
 * LICENSE:   BSD (revised)
 */

function DropDownMenu1(id) {

    /* Type of the menu: "horizontal" or "vertical" */
    this.type = "horizontal";

    /* Delay (in miliseconds >= 0): show-hide menu */
    this.delay = {
        "show": 0,
        "hide": 300
    }
    /* Change the default position of sub-menu by Y pixels from top and X pixels from left
     * Negative values are allowed */
    this.position = {
        "top": 0,
        "left": 0
    }
    /* Z-index property for .section */
    this.zIndex = {
        "visible": 1,
        "hidden": -1
    };

    // Browser detection
    this.browser = {
        "ie": Boolean(document.body.currentStyle),
        "ie5": (navigator.appVersion.indexOf("MSIE 5.5") != -1 || navigator.appVersion.indexOf("MSIE 5.0") != -1)
    };
    if (!this.browser.ie) { this.browser.ie5 = false; }

    /* Initialize the menu */
    this.init = function() {
        if (!document.getElementById(this.id)) { return alert("DropDownMenu1.init() failed. Element '"+ this.id +"' does not exist."); }
        if (this.type != "horizontal" && this.type != "vertical") { return alert("DropDownMenu1.init() failed. Unknown menu type: '"+this.type+"'"); }
        if (this.browser.ie && this.browser.ie5) { fixWrap(); }
        fixSections();
        parse(document.getElementById(this.id).childNodes, this.tree, this.id);
    }

    /* Search for .section elements and set width for them */
    function fixSections() {
        var arr = document.getElementById(self.id).getElementsByTagName("div");
        var sections = new Array();
        var widths = new Array();
        
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].className == "section") {
                sections.push(arr[i]);
            }
        }
        for (var i = 0; i < sections.length; i++) {
            widths.push(getMaxWidth(sections[i].childNodes));
        }
        for (var i = 0; i < sections.length; i++) {
            sections[i].style.width = (widths[i]) + "px";
        }
        if (self.browser.ie) {
            for (var i = 0; i < sections.length; i++) {
                setMaxWidth(sections[i].childNodes, widths[i]);
            }
        }
    }

    function fixWrap() {
        var elements = document.getElementById(self.id).getElementsByTagName("a");
        for (var i = 0; i < elements.length; i++) {
            if (/item2/.test(elements[i].className)) {
                elements[i].innerHTML = '<div nowrap="nowrap">'+elements[i].innerHTML+'</div>';
            }
        }
    }

    /* Search for an element with highest width among given nodes, return that width */
    function getMaxWidth(nodes) {
        var maxWidth = 0;
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].nodeType != 1) { continue; }
            if (nodes[i].offsetWidth > maxWidth) { maxWidth = nodes[i].offsetWidth; }
        }
        return maxWidth;
    }

    /* Set width for item2 elements */
    function setMaxWidth(nodes, maxWidth) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].nodeType == 1 && /item2/.test(nodes[i].className) && nodes[i].currentStyle) {
                if (self.browser.ie5) {
                    nodes[i].style.width = (maxWidth) + "px";
                } else {
                    nodes[i].style.width = (maxWidth - parseInt(nodes[i].currentStyle.paddingLeft) - parseInt(nodes[i].currentStyle.paddingRight)) + "px";
                }
            }
        }
    }

    /* Parse nodes, create events, position elements */
    function parse(nodes, tree, id) {
        for (var i = 0; i < nodes.length; i++) {
            if (1 != nodes[i].nodeType) {
                continue;
            }
            switch (true) {
                // .item1
                case /\bitem1\b/.test(nodes[i].className):
                    nodes[i].id = id + "-" + tree.length;
                    tree.push(new Array());
                    nodes[i].onmouseover = item1over;
                    nodes[i].onmouseout = item1out;
                    break;
                // .item2
                case /\bitem2\b/.test(nodes[i].className):
                    nodes[i].id = id + "-" + tree.length;
                    tree.push(new Array());
                    break;
                // .section
                case /\bsection\b/.test(nodes[i].className):
                    // id, events
                    nodes[i].id = id + "-" + (tree.length - 1) + "-section";
                    nodes[i].onmouseover = sectionOver;
                    nodes[i].onmouseout = sectionOut;
                    // position
                    var box1 = document.getElementById(id + "-" + (tree.length - 1));
                    var box2 = document.getElementById(nodes[i].id);
                    if ("horizontal" == self.type) {
                        box2.style.top = box1.offsetTop + box1.offsetHeight + self.position.top + "px";
                        if (self.browser.ie5) {
                            box2.style.left = self.position.left + "px";
                        } else {
                            box2.style.left = box1.offsetLeft + self.position.left + "px";
                        }
                    } else if ("vertical" == self.type) {
                        box2.style.top = box1.offsetTop + self.position.top + "px";
                        if (self.browser.ie5) {
                            box2.style.left = box1.offsetWidth + self.position.left + "px";
                        } else {
                            box2.style.left = box1.offsetLeft + box1.offsetWidth + self.position.left + "px";
                        }
                    }
                    // sections, sectionsShowCnt, sectionsHideCnt
                    self.sections.push(nodes[i].id);
                    self.sectionsShowCnt.push(0);
                    self.sectionsHideCnt.push(0);
                    break;
            }
            if (nodes[i].childNodes) {
                if (/\bsection\b/.test(nodes[i].className)) {
                    parse(nodes[i].childNodes, tree[tree.length - 1], id + "-" + (tree.length - 1));
                } else {
                    parse(nodes[i].childNodes, tree, id);
                }
            }
        }
    }

    /* event, item1:onmouseover */
    function item1over() {
        var id_section = this.id + "-section";
        if (self.visible) {
            var el = new Element(self.visible);
            el = document.getElementById(el.getParent().id);
            if (/item1-active/.test(el.className)) {
                el.className = el.className.replace(/item1-active/, "item1");
            }
        }
        if (self.sections.contains(id_section)) {
            self.sectionsHideCnt[self.sections.indexOf(id_section)]++;
            var cnt = self.sectionsShowCnt[self.sections.indexOf(id_section)];
            setTimeout(function(a, b) { return function() { self.showSection(a, b); } } (id_section, cnt), self.delay.show);
        } else {
            if (self.visible) {
                var cnt = self.sectionsHideCnt[self.sections.indexOf(self.visible)];
                setTimeout(function(a, b) { return function() { self.hideSection(a, b); } } (self.visible, cnt), self.delay.show);
            }
        }
    }

    /* event, item1:onmouseout */
    function item1out() {
        var id_section = this.id + "-section";
        if (self.sections.contains(id_section)) {
            self.sectionsShowCnt[self.sections.indexOf(id_section)]++;
            if (id_section == self.visible) {
                var cnt = self.sectionsHideCnt[self.sections.indexOf(id_section)];
                setTimeout(function(a, b) { return function() { self.hideSection(a, b); } }(id_section, cnt), self.delay.hide);
            }
        }
    }

    /* event, section:onmouseover */
    function sectionOver() {
        self.sectionsHideCnt[self.sections.indexOf(this.id)]++;
        var el = new Element(this.id);
        el = document.getElementById(el.getParent().id);
        if (!/item1-active/.test(el.className)) {
            el.className = el.className.replace(/item1/, "item1-active");
        }
    }

    /* event, section:onmouseout */
    function sectionOut() {
        self.sectionsShowCnt[self.sections.indexOf(this.id)]++;
        var cnt = self.sectionsHideCnt[self.sections.indexOf(this.id)];
        setTimeout(function(a, b) { return function() { self.hideSection(a, b); } }(this.id, cnt), self.delay.hide);
    }

    /* Show section (1 argument passed)
     * Try to show section (2 arguments passed) - check cnt with sectionShowCnt */
    this.showSection = function(id, cnt) {
        if (typeof cnt != "undefined") {
            if (cnt != this.sectionsShowCnt[this.sections.indexOf(id)]) { return; }
        }
        this.sectionsShowCnt[this.sections.indexOf(id)]++;
        var el = new Element(id);
        var parent = document.getElementById(el.getParent().id);
        if (!/item1-active/.test(parent.className)) {
            parent.className = parent.className.replace(/item1/, "item1-active");
        }
        if (this.visible) {
            if (id == this.visible) { return; }
            this.hideSection(this.visible);
        }
        //document.getElementById(id).style.display = "block";
        document.getElementById(id).style.visibility = "visible";
        document.getElementById(id).style.zIndex = this.zIndex.visible;
        this.visible = id;
    }

    /* Hide section (1 argument passed)
     * Try to hide section (2 arguments passed) - check cnt with sectionHideCnt */
    this.hideSection = function(id, cnt) {
        if (typeof cnt != "undefined") {
            if (cnt != this.sectionsHideCnt[this.sections.indexOf(id)]) { return; }
        }
        var el = new Element(id);
        var parent = document.getElementById(el.getParent().id);
        parent.className = parent.className.replace(/item1-active/, "item1");
        document.getElementById(id).style.zIndex = this.zIndex.hidden;
        document.getElementById(id).style.visibility = "hidden";
        //document.getElementById(id).style.display = "none";
        if (id == this.visible) { this.visible = ""; }
        else {
            //throw "DropDownMenu1.hideSection('"+id+"', "+cnt+") failed, cannot hide element that is not visible";
            return;
        }
        this.sectionsHideCnt[this.sections.indexOf(id)]++;
    }

    /* Necessary when showing section that doesn't exist - hide currently visible section. See: item1over() */
    this.hideSelf = function(cnt) {
        if (this.visible && cnt == this.sectionsHideCnt[this.sections.indexOf(this.visible)]) {
            this.hideSection(this.visible);
        }
    }

    /* Element (.section, .item2 etc) */
    function Element(id) {
        /* Get parent element */
        this.getParent = function() {
            var s = this.id.substr(this.menu.id.length);
            var a = s.split("-");
            a.pop();
            return new Element(this.menu.id + a.join("-"));
        }
        this.menu = self;
        this.id = id;
    }

    var self = this;
    this.id = id; /* menu id */
    this.tree = []; /* tree structure of menu */
    this.sections = []; /* all sections, required for timeout */
    this.sectionsShowCnt = [];
    this.sectionsHideCnt = [];
    this.visible = ""; /* visible section, ex. menu-0-section */
}

/* Finds the index of the first occurence of item in the array, or -1 if not found */
if (typeof Array.prototype.indexOf == "undefined") {
    Array.prototype.indexOf = function(item) {
        for (var i = 0; i < this.length; i++) {
            if ((typeof this[i] == typeof item) && (this[i] == item)) {
                return i;
            }
        }
        return -1;
    }
}

/* Check whether array contains given string */
if (typeof Array.prototype.contains == "undefined") {
    Array.prototype.contains = function(s) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] === s) {
                return true;
            }
        }
        return false;
    }
}
//-->
</script>
--- NEW FILE: example1.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>#1.0 DropDownMenu1 example 1</title>
    <style type="text/css">
    body {
        font: 11px tahoma;
        background: #ffffff;
        margin: 0;
        padding: 50px;
    }    
    </style>
    <link rel="stylesheet" type="text/css" href="example1.css" />
    <script type="text/javascript" src="../ie5.js"></script>
    <script type="text/javascript" src="DropDownMenu1.js"></script>
</head>
<body>

    <table cellspacing="0" cellpadding="0" id="menu1" class="ddm1">
    <tr>
        <td>
            <a class="item1 left" href="example1.html">Home Page</a>
        </td>
        <td>
            <a class="item1" href="javascript:void(0)">Solutions</a>
            <div class="section">
                <a class="item2" href="example1.html">Category One</a>
                <a class="item2" href="example1.html">Category Two</a>
                <a class="item2" href="example1.html">Category Three</a>
                <a class="item2" href="example1.html">Category Four</a>
                <a class="item2" href="example1.html">Category Five</a>
                <a class="item2" href="example1.html">Category Six</a>
                <a class="item2" href="example1.html">Category Seven</a>
            </div>
        </td>
        <td>
            <a class="item1" href="javascript:void(0)">Products</a>
            <div class="section">
                <a class="item2" href="example1.html">First Product</a>
                <a class="item2" href="example1.html">Second Product</a>
                <a class="item2" href="example1.html">Third Product</a>
                <a class="item2" href="example1.html">Fourth Product</a>
                <a class="item2" href="example1.html">Fifth Product</a>
                <a class="item2" href="example1.html">Sixth Product</a>
            </div>
        </td>
        <td>
            <a class="item1" href="javascript:void(0)">Company</a>
            <div class="section">
                <a class="item2" href="example1.html">About our Company</a>
                <a class="item2" href="example1.html">Careers</a>
                <a class="item2" href="example1.html">Media Center</a>
                <a class="item2" href="example1.html">News</a>
            </div>
        </td>
        <td>
            <a class="item1" href="example1.html">Contact Us</a>
        </td>
        <td>
            <a class="item1" href="example1.html">Privacy Policy</a>
        </td>
        <td>
            <a class="item1 right" href="example1.html">Help</a>
            <div class="section">
                <a class="item2" href="example1.html">Help blabla 1</a>
                <a class="item2" href="example1.html">Help bleble 22</a>
                <a class="item2" href="example1.html">Help bleble 3</a>
                <a class="item2" href="example1.html">Help bleble 44444</a>
            </div>
        </td>
    </tr>
    </table>

    <p>
        <b>Project</b>: <a href="http://gosu.pl/dhtml/mygosumenu.html">mygosuMenu</a> <br />
        <b>Menu type</b>: #1.0 DropDownMenu1 example 1 <br />
        <b>Features</b>: <br />
        - horizontal or vertical menu <br />
        - can be positioned statically or absolutely <br />
        - delay for showing/hiding menu (can be turned off by setting to 0) <br />
        - position of submenus can be changed, so they can for example overflow parent elements <br />
        - on the same page there can be many menus created <br />
        - seperated into 3 layers: behaviour(javascript), structure(html), presentation(css) <br />
        - search engine friendly <br />
        - free for any use (BSD license) <br />
        <b>Compatibility</b>: Tested and works great on: IE 5.0/5.5/6.0, Mozilla 1.4/1.7, Opera 7.11/7.23/7.51, Netscape 7.11, Firefox 0.7/0.8/0.9, Safari 1.2
    </p>

    <script type="text/javascript">
    var ddm1 = new DropDownMenu1('menu1');
    ddm1.position.top = -1;
    ddm1.init();
    </script>

</body>
</html>
--- NEW FILE: DropDownMenu1.js ---
/*
 * DO NOT REMOVE THIS NOTICE
 *
 * PROJECT:   mygosuMenu
 * VERSION:   1.0.8
 * COPYRIGHT: (c) 2003,2004 Cezary Tomczak
 * LINK:      http://gosu.pl/dhtml/mygosumenu.html
 * LICENSE:   BSD (revised)
 */

function DropDownMenu1(id) {

    /* Type of the menu: "horizontal" or "vertical" */
    this.type = "horizontal";

    /* Delay (in miliseconds >= 0): show-hide menu */
    this.delay = {
        "show": 0,
        "hide": 300
    }
    /* Change the default position of sub-menu by Y pixels from top and X pixels from left
     * Negative values are allowed */
    this.position = {
        "top": 0,
        "left": 0
    }
    /* Z-index property for .section */
    this.zIndex = {
        "visible": 1,
        "hidden": -1
    };

    // Browser detection
    this.browser = {
        "ie": Boolean(document.body.currentStyle),
        "ie5": (navigator.appVersion.indexOf("MSIE 5.5") != -1 || navigator.appVersion.indexOf("MSIE 5.0") != -1)
    };
    if (!this.browser.ie) { this.browser.ie5 = false; }

    /* Initialize the menu */
    this.init = function() {
        if (!document.getElementById(this.id)) { return alert("DropDownMenu1.init() failed. Element '"+ this.id +"' does not exist."); }
        if (this.type != "horizontal" && this.type != "vertical") { return alert("DropDownMenu1.init() failed. Unknown menu type: '"+this.type+"'"); }
        if (this.browser.ie) { fixWrap(); }
        fixSections();
        parse(document.getElementById(this.id).childNodes, this.tree, this.id);
    }

    /* Search for .section elements and set width for them */
    function fixSections() {
        var arr = document.getElementById(self.id).getElementsByTagName("div");
        var sections = new Array();
        var widths = new Array();

        for (var i = 0; i < arr.length; i++) {
            if (arr[i].className == "section") {
                sections.push(arr[i]);
            }
        }
        for (var i = 0; i < sections.length; i++) {
            widths.push(getMaxWidth(sections[i].childNodes));
        }
        for (var i = 0; i < sections.length; i++) {
            sections[i].style.width = (widths[i]) + "px";
        }
        if (self.browser.ie) {
            for (var i = 0; i < sections.length; i++) {
                setMaxWidth(sections[i].childNodes, widths[i]);
            }
        }
    }

    function fixWrap() {
        var elements = document.getElementById(self.id).getElementsByTagName("a");
        for (var i = 0; i < elements.length; i++) {
            if (/item2/.test(elements[i].className)) {
                elements[i].innerHTML = '<div nowrap="nowrap">'+elements[i].innerHTML+'</div>';
            }
        }
    }

    /* Search for an element with highest width among given nodes, return that width */
    function getMaxWidth(nodes) {
        var maxWidth = 0;
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].nodeType != 1) { continue; }
            if (nodes[i].offsetWidth > maxWidth) { maxWidth = nodes[i].offsetWidth; }
        }
        return maxWidth;
    }

    /* Set width for item2 elements */
    function setMaxWidth(nodes, maxWidth) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].nodeType == 1 && /item2/.test(nodes[i].className) && nodes[i].currentStyle) {
                if (self.browser.ie) {
                    nodes[i].style.width = (maxWidth) + "px";
                } else {
                    nodes[i].style.width = (maxWidth - parseInt(nodes[i].currentStyle.paddingLeft) - parseInt(nodes[i].currentStyle.paddingRight)) + "px";
                }
            }
        }
    }

    /* Parse nodes, create events, position elements */
    function parse(nodes, tree, id) {
        for (var i = 0; i < nodes.length; i++) {
            if (1 != nodes[i].nodeType) {
                continue;
            }
            switch (true) {
                // .item1
                case /\bitem1\b/.test(nodes[i].className):
                    nodes[i].id = id + "-" + tree.length;
                    tree.push(new Array());
                    nodes[i].onmouseover = item1over;
                    nodes[i].onmouseout = item1out;
                    break;
                // .item2
                case /\bitem2\b/.test(nodes[i].className):
                    nodes[i].id = id + "-" + tree.length;
                    tree.push(new Array());
                    break;
                // .section
                case /\bsection\b/.test(nodes[i].className):
                    // id, events
                    nodes[i].id = id + "-" + (tree.length - 1) + "-section";
                    nodes[i].onmouseover = sectionOver;
                    nodes[i].onmouseout = sectionOut;
                    // position
                    var box1 = document.getElementById(id + "-" + (tree.length - 1));
                    var box2 = document.getElementById(nodes[i].id);
                    if ("horizontal" == self.type) {
                        box2.style.top = box1.offsetTop + box1.offsetHeight + self.position.top + "px";
                        if (self.browser.ie) {
                            box2.style.left = self.position.left + "px";
                        } else {
                            box2.style.left = box1.offsetLeft + self.position.left + "px";
                        }
                    } else if ("vertical" == self.type) {
                        box2.style.top = box1.offsetTop + self.position.top + "px";
                        if (self.browser.ie) {
                            box2.style.left = box1.offsetWidth + self.position.left + "px";
                        } else {
                            box2.style.left = box1.offsetLeft + box1.offsetWidth + self.position.left + "px";
                        }
                    }
                    // sections, sectionsShowCnt, sectionsHideCnt
                    self.sections.push(nodes[i].id);
                    self.sectionsShowCnt.push(0);
                    self.sectionsHideCnt.push(0);
                    break;
            }
            if (nodes[i].childNodes) {
                if (/\bsection\b/.test(nodes[i].className)) {
                    parse(nodes[i].childNodes, tree[tree.length - 1], id + "-" + (tree.length - 1));
                } else {
                    parse(nodes[i].childNodes, tree, id);
                }
            }
        }
    }

    /* event, item1:onmouseover */
    function item1over() {
        var id_section = this.id + "-section";
        if (self.visible) {
            var el = new Element(self.visible);
            el = document.getElementById(el.getParent().id);
            if (/item1-active/.test(el.className)) {
                el.className = el.className.replace(/item1-active/, "item1");
            }
        }
        if (self.sections.contains(id_section)) {
            self.sectionsHideCnt[self.sections.indexOf(id_section)]++;
            var cnt = self.sectionsShowCnt[self.sections.indexOf(id_section)];
            setTimeout(function(a, b) { return function() { self.showSection(a, b); } } (id_section, cnt), self.delay.show);
        } else {
            if (self.visible) {
                var cnt = self.sectionsHideCnt[self.sections.indexOf(self.visible)];
                setTimeout(function(a, b) { return function() { self.hideSection(a, b); } } (self.visible, cnt), self.delay.show);
            }
        }
    }

    /* event, item1:onmouseout */
    function item1out() {
        var id_section = this.id + "-section";
        if (self.sections.contains(id_section)) {
            self.sectionsShowCnt[self.sections.indexOf(id_section)]++;
            if (id_section == self.visible) {
                var cnt = self.sectionsHideCnt[self.sections.indexOf(id_section)];
                setTimeout(function(a, b) { return function() { self.hideSection(a, b); } }(id_section, cnt), self.delay.hide);
            }
        }
    }

    /* event, section:onmouseover */
    function sectionOver() {
        self.sectionsHideCnt[self.sections.indexOf(this.id)]++;
        var el = new Element(this.id);
        el = document.getElementById(el.getParent().id);
        if (!/item1-active/.test(el.className)) {
            el.className = el.className.replace(/item1/, "item1-active");
        }
    }

    /* event, section:onmouseout */
    function sectionOut() {
        self.sectionsShowCnt[self.sections.indexOf(this.id)]++;
        var cnt = self.sectionsHideCnt[self.sections.indexOf(this.id)];
        setTimeout(function(a, b) { return function() { self.hideSection(a, b); } }(this.id, cnt), self.delay.hide);
    }

    /* Show section (1 argument passed)
     * Try to show section (2 arguments passed) - check cnt with sectionShowCnt */
    this.showSection = function(id, cnt) {
        if (typeof cnt != "undefined") {
            if (cnt != this.sectionsShowCnt[this.sections.indexOf(id)]) { return; }
        }
        this.sectionsShowCnt[this.sections.indexOf(id)]++;
        var el = new Element(id);
        var parent = document.getElementById(el.getParent().id);
        if (!/item1-active/.test(parent.className)) {
            parent.className = parent.className.replace(/item1/, "item1-active");
        }
        if (this.visible) {
            if (id == this.visible) { return; }
            this.hideSection(this.visible);
        }
        //document.getElementById(id).style.display = "block";
        document.getElementById(id).style.visibility = "visible";
        document.getElementById(id).style.zIndex = this.zIndex.visible;
        this.visible = id;
    }

    /* Hide section (1 argument passed)
     * Try to hide section (2 arguments passed) - check cnt with sectionHideCnt */
    this.hideSection = function(id, cnt) {
        if (typeof cnt != "undefined") {
            if (cnt != this.sectionsHideCnt[this.sections.indexOf(id)]) { return; }
        }
        var el = new Element(id);
        var parent = document.getElementById(el.getParent().id);
        parent.className = parent.className.replace(/item1-active/, "item1");
        document.getElementById(id).style.zIndex = this.zIndex.hidden;
        document.getElementById(id).style.visibility = "hidden";
        //document.getElementById(id).style.display = "none";
        if (id == this.visible) { this.visible = ""; }
        else {
            //throw "DropDownMenu1.hideSection('"+id+"', "+cnt+") failed, cannot hide element that is not visible";
            return;
        }
        this.sectionsHideCnt[this.sections.indexOf(id)]++;
    }

    /* Necessary when showing section that doesn't exist - hide currently visible section. See: item1over() */
    this.hideSelf = function(cnt) {
        if (this.visible && cnt == this.sectionsHideCnt[this.sections.indexOf(this.visible)]) {
            this.hideSection(this.visible);
        }
    }

    /* Element (.section, .item2 etc) */
    function Element(id) {
        /* Get parent element */
        this.getParent = function() {
            var s = this.id.substr(this.menu.id.length);
            var a = s.split("-");
            a.pop();
            return new Element(this.menu.id + a.join("-"));
        }
        this.menu = self;
        this.id = id;
    }

    var self = this;
    this.id = id; /* menu id */
    this.tree = []; /* tree structure of menu */
    this.sections = []; /* all sections, required for timeout */
    this.sectionsShowCnt = [];
    this.sectionsHideCnt = [];
    this.visible = ""; /* visible section, ex. menu-0-section */
}

/* Finds the index of the first occurence of item in the array, or -1 if not found */
if (typeof Array.prototype.indexOf == "undefined") {
    Array.prototype.indexOf = function(item) {
        for (var i = 0; i < this.length; i++) {
            if ((typeof this[i] == typeof item) && (this[i] == item)) {
                return i;
            }
        }
        return -1;
    }
}

/* Check whether array contains given string */
if (typeof Array.prototype.contains == "undefined") {
    Array.prototype.contains = function(s) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] === s) {
                return true;
            }
        }
        return false;
    }
}
--- NEW FILE: example1.css ---
.ddm1 {
    font: 11px tahoma;
}
.ddm1 .item1,
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
    padding: 3px 8px 4px 8px;
    border: 1px #003366;
    border-style: solid none solid none;
    text-decoration: none;
    display: block;
    position: relative;
}
.ddm1 .item1 {
    background: #0EA138;
    color: #ffffff;
}
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
    background: #FF6600;
    color: #ffffff;
}
.ddm1 .item2,
.ddm1 .item2:hover {
    padding: 3px 8px 4px 8px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}
.ddm1 .item2 {
    background: #3264C7;
    color: #ffffff;
}
.ddm1 .item2:hover {
    background: #6699FF;
    color: #ffffff;
}
.ddm1 .section {
    border: 1px #003366;
    border-style: solid solid solid solid;
    position: absolute;
    visibility: hidden;
    z-index: -1;
    white-space: nowrap;
}
.ddm1 .left, .ddm1 .left:hover { border-style: solid none solid solid; }
.ddm1 .right, .ddm1 .right:hover { border-style: solid solid solid none; }

* html .ddm1 td { position: relative; } /* ie 5.0 fix */
--- NEW FILE: example2.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>#1.0 DropDownMenu1 example 2</title>
    <style type="text/css">
    body {
        font: 11px tahoma;
        background: #ffffff;
        margin: 0;
        padding: 50px;
    }
    </style>
    <link rel="stylesheet" type="text/css" href="example2.css" />
    <script type="text/javascript" src="../ie5.js"></script>
    <script type="text/javascript" src="DropDownMenu1.js"></script>
</head>
<body>

    <table cellspacing="0" cellpadding="0" id="menu1" class="ddm1">
    <tr>
        <td>
            <a class="item1" href="example2.html">Home Page</a>
            
            <a class="item1" href="javascript:void(0)">Solutions</a>
            <div class="section">
                <a class="item2" href="example2.html">Category One</a>
                <a class="item2" href="example2.html">Category Two</a>
                <a class="item2" href="example2.html">Category Three</a>
                <a class="item2" href="example2.html">Category Four</a>
                <a class="item2" href="example2.html">Category Five</a>
                <a class="item2" href="example2.html">Category Six</a>
                <a class="item2" href="example2.html">Category Seven</a>
            </div>

            <a class="item1" href="javascript:void(0)">Products</a>
            <div class="section">
                <a class="item2" href="example2.html">First Product</a>
                <a class="item2" href="example2.html">Second Product</a>
                <a class="item2" href="example2.html">Third Product</a>
                <a class="item2" href="example2.html">Fourth Product</a>
                <a class="item2" href="example2.html">Fifth Product</a>
                <a class="item2" href="example2.html">Sixth Product</a>
            </div>

            <a class="item1" href="javascript:void(0)">Company</a>
            <div class="section">
                <a class="item2" href="example2.html">About our Company</a>
                <a class="item2" href="example2.html">Careers</a>
                <a class="item2" href="example2.html">Media Center</a>
                <a class="item2" href="example2.html">News</a>
            </div>

            <a class="item1" href="example2.html">Contact Us</a>

            <a class="item1" href="example2.html">Privacy Policy</a>

            <a class="item1 bottom" href="example2.html">Help</a>
            <div class="section">
                <a class="item2" href="example2.html">Help blabla 1</a>
                <a class="item2" href="example2.html">Help bleble 22</a>
                <a class="item2" href="example2.html">Help bleble 3</a>
                <a class="item2" href="example2.html">Help bleble 44444</a>
            </div>
        </td>
    </tr>
    </table>

    <p>
        <b>Project</b>: <a href="http://gosu.pl/dhtml/mygosumenu.html">mygosuMenu</a> <br />
        <b>Menu type</b>: #1.0 DropDownMenu1 example 2 <br />
        <b>Features</b>: <br />
        - horizontal or vertical menu <br />
        - can be positioned statically or absolutely <br />
        - delay for showing/hiding menu (can be turned off by setting to 0) <br />
        - position of submenus can be changed, so they can for example overflow parent elements <br />
        - on the same page there can be many menus created <br />
        - seperated into 3 layers: behaviour(javascript), structure(html), presentation(css) <br />
        - search engine friendly <br />
        - free for any use (BSD license) <br />
        <b>Compatibility</b>: Tested and works great on: IE 5.0/5.5/6.0, Mozilla 1.4/1.7, Opera 7.11/7.23/7.51, Netscape 7.11, Firefox 0.7/0.8/0.9, Safari 1.2
    </p>

    <script type="text/javascript">
    var ddm1 = new DropDownMenu1('menu1');
    ddm1.type = "vertical";
    ddm1.position.left = -1;
    ddm1.init();
    </script>

</body>
</html>