function getTrees() {

    // retrieve all <div>

    var treeObjs = document.getElementsByTagName('DIV');

    for (var i=0;i<treeObjs.length;i++) 

        // class = 'tree' ?

        if (treeObjs[i].className == 'tree') {

            // point onclick event to treeAction() function

            treeObjs[i].onclick = treeAction;

            // loop over all <div> children using childNodes[] array

            for (j=0;j<treeObjs[i].childNodes.length;j++)

                if (treeObjs[i].childNodes[j].tagName == 'UL') {

                    // if <ul>, call ul2tree()

                    ul2tree(treeObjs[i].childNodes[j]);

                }

        }

}

function ul2tree(ulObj) {

    var liObj;

    var liCollapsed;

    // loop over all <ul> children using childNodes[] array

    for (var i=0;i<ulObj.childNodes.length;i++)

        // child tag = <li> ?

        if (ulObj.childNodes[i].tagName == 'LI') {

            liObj = ulObj.childNodes[i];

            // retrieve all <ul> inside <li>

            var ulObjs = liObj.getElementsByTagName('UL');

            // is there any <ul>?

            if (ulObjs.length) {

                liCollapsed = (liObj.className == 'collapsed');

                // set <li> class to 'folder'

                liObj.className = 'folder';

                // add a link to expand/collapse <li> sub-tree

                liObj.insertBefore(newExpandLink('[*]',liCollapsed),liObj.firstChild);

                // if <li> class = collapsed, hide internal <ul>

                if (liCollapsed) ulObjs[0].style.display = 'none';

                // call recursevely internal <ul> 

                ul2tree(ulObjs[0]);

            }

        }

    // set last <li> class to 'last'

    if (liObj.className == '') liObj.className = 'last'

    else liObj.className += ' last';
}function newSpan(text) {

    // create an <span>...</span> element

    var span = document.createElement('SPAN');

    // create a test node from 'text' argument

    var spanText = document.createTextNode(text);

    // apppend text node to <span>

    span.appendChild(spanText);

    return span;

}

function newExpandLink(text,collapsed) {

    // create an <a>...</a> element

    var expandLink = document.createElement('A');

    // create a <span>text</span> and add it to <a>

    expandLink.appendChild(newSpan(text));

    // set <a> class to 'minus' or 'plus'

    if (collapsed) expandLink.className='plus' 

    else expandLink.className='minus';

    return expandLink;

}

function treeAction(obj) {

    // retrieve clicked element

    if (document.all) obj = event.srcElement // IE

    else obj = obj.target;

    // if the element is not na <a>, return

    if (obj.tagName == 'SPAN') obj = obj.parentNode;

    if (obj.tagName != 'A') return;

    // change class

    if (obj.className == 'plus') obj.className = 'minus';

    else obj.className = 'plus';

    // get associated <li> 

    var liObj = obj.parentNode;

    var ulObjs = liObj.getElementsByTagName('UL');

    // if there is no internal <ul>, return

    if (!ulObjs.length) return;

    // hide/show internal  <ul>

    if ( ulObjs[0].style.display == 'none' ) ulObjs[0].style.display = 'block' 

    else ulObjs[0].style.display = 'none' ;

}