window.onload = function() {
    var cNav = document.getElementsByClassName('bubble');
    for (var i = 0; i < cNav.length; i++) {
        var oItems = document.getElementsByTagName('LI');
        for (var j = 0; j < oItems.length; j++) {
            oItems[j].onmouseover = function() {
                this.className += ' hover';
            }
            oItems[j].onmouseout = function() {
                this.className = this.className.replace(new RegExp("\\s?hover\\b"), "");
            }
        }
    }

    var cExpandable = document.getElementsByClassName('container');
    for (var j = 0; j < cExpandable.length; j++) {
        var oItem = cExpandable[j];
        oItem.onmouseover = function() {
            this.className += ' active';
        }
        oItem.onmouseout = function() {
            this.className = this.className.replace(new RegExp("\\s?active\\b"), "");
        }
    }

    var cHandles = document.getElementsByClassName('handle');
    for (var k = 0; k < cHandles.length; k++) {
        var oItem = cHandles[k];
        oItem.onclick = function() {
            var oParent = this.parentNode;
            var sClass = oParent.className;
            if (sClass.indexOf('expanded') == -1) {
                oParent.className += ' expanded';
            } else {
                oParent.className = sClass.replace(new RegExp("\\s?expanded\\b"), "");
            }
            return false;
        }
    }
}


document.getElementsByClassName = function(cl) {
	var retnode = [];
	var myclass = new RegExp('\\b'+cl+'\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) {
	var classes = elem[i].className;
		if (myclass.test(classes)) retnode.push(elem[i]);
	}
	return retnode;
};