function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null ) {
        node = document;
    }
    if ( tag == null ) {
        tag = '*';
    }
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

function addEvent(obj, evType, fn, useCapture){
    if (obj.addEventListener) {
        obj.addEventListener(evType, fn, useCapture);
        return true;
    } else if (obj.attachEvent) {
        return obj.attachEvent("on"+evType, fn);
    }
    return false;
}

// a map of arrays of images. the map is indexed by id, the array is indexed as follows: 0 - normal, 1 - mouseover
var cachedImages = new Object();

function addToggleMarkup() {
    // find all a elements with the toggle class and add logic to show/hide their next ul sibling when clicked
    var elements = getElementsByClass('toggle', document.getElementById('nav'), 'a');
    for (var i=0; i<elements.length; i++) {
        var element = elements[i];
        element.onclick = function() {
            var element = this;
            do {
                element = element.nextSibling;
                if (element.nodeName == 'UL') {
                    element.style.display = element.style.display == 'block' ? 'none' : 'block';
                    element = null;
                }
            } while (element != null);
            return false;
        }
    }
    // find all img elements with the highlight class and add logic to display a new image on mouse over
    // the new image is assumed to have a -o suffic, e.g. foo.jpg will highlight as foo-o.jpg
    // note the img elements must have id attributes to index the cachedImages map
    elements = getElementsByClass('highlight', document, 'img');
    var pattern = /^(.+)(\.jpg)$/;
    for (var i=0; i<elements.length; i++) {
        var element = elements[i];
        if (element.id == null) {
            continue;
        }
        var results = pattern.exec(element.src);
        if (results != null) {
            var ary = new Array(2);
            ary[0] = element.src;
            var img = new Image();
            img.src = results[1] + '-o' + results[2];
            ary[1] = img.src;
            cachedImages[element.id] = ary;
            element.onmouseover = function() {
                this.src = cachedImages[this.id][1];
            }
            element.onmouseout = function() {
                this.src = cachedImages[this.id][0];
            }
        }
    }
}

addEvent(window, "load", addToggleMarkup, false);