window.onload = onLoad;
maxId = 0;

function findElementsByName(tag, name) {
    var elem = document.getElementsByTagName(tag);
    var arr = new Array();
    for (i = 0, iarr = 0; i < elem.length; i++) {
        att = elem[i].getAttribute("name");
        if (att == name) {
            arr[iarr] = elem[i];
            iarr++;
        }
    }
    return arr;
}

function onLoad() {
    createMenu();
}

function createMenu() {
    var arr = findElementsByName("DIV", "MenuHeader");
    if (arr != null) {
        for (var i = 0; i < arr.length; i++) {
            var obj = arr[i];
            var value = "MenuHeaderItemId_" + maxId;
            maxId = maxId + 1;
            obj.setAttribute("id", value);

            // zwijam ten kontaner
            toggleCollapseExpand(obj, "Collapsed");

            // tutaj zamieniam pierwszy div w kontenerze na element menu z plusikiem badz bez niego - w zaleznosci czy jest taka potrzeba
            // dodatkowo jest podpieta funkcja on click ktora jako argument przyjmuje id parenta (czyli kontanera o ktorym mowa powyzej)
            var divs = new Array();
            for (var k = 0; k < obj.childNodes.length; k++) {
                if (obj.childNodes.item(k).nodeName.toString() == "DIV")
                    divs.push(obj.childNodes.item(k));
            }
            if (divs.length == 2) {
                var HeaderDiv = divs[0];
                var ContentDiv = divs[1];
                // mam element manu majacy content - ustawiam klase na CExpandable, dorabiam "plusik", podpinam javascript
                ContentDiv.className = "CExpandable";
                HeaderDiv.className = "HeaderDiv";

                if (HeaderDiv.innerHTML) {
                    var oldContents = HeaderDiv.innerHTML;
                    var newContents = '<table><tr><td><div class="plusminus" onClick="javascript:onClickMenuHeader(' + "'" + value + "'" + ');"></div></td><td><div>' + oldContents + '</div></td></tr></table>';
                    HeaderDiv.innerHTML = newContents;
                }
                else if (HeaderDiv.innertext) {
                    var oldContents = HeaderDiv.innertext;
                    var newContents = '<table><tr><td><div class="plusminus" onClick="javascript:onClickMenuHeader(' + "'" + value + "'" + ');"></div></td><td><div>' + oldContents + '</div></td></tr></table>';
                    HeaderDiv.innertext = newContents;
                }
            }
        }
    }
}

function onClickMenuHeader(id) {
    var el = document.getElementById(id);
    toggleCollapseExpand(el, 'Toggle');
}

function toggleCollapseExpand(obj, mode) {
    if (mode == 'Toggle') {
        if (obj.className == 'Expanded')
            obj.className = 'Collapsed';
        else
            obj.className = 'Expanded';
    }
    else
        obj.className = mode;
}

function CollapseAll() {
    var arr = document.getElementsByName("MenuHeader");
    if (arr != null) {
        for (var i = 0; i < arr.length; i++) {
            toggleCollapseExpand(arr[i], 'Collapsed');
        }
    }
}