var menu = document.getElementById("buttons");


function getElementFromArray(elements, tagName) {
  for(var i = 0; i < elements.length; i++) {
    if(elements[i].nodeType == 1) {
      if(elements[i].tagName == tagName) {
        return elements[i];
      }
    }
  }
  return false;
}
/**
 * @param Array el
 */ 
function getFirstNode(el) {
  for(var i = 0; i < el.length; i++) {
    if(el[i].nodeType == 1)
      return el[i];
  }
  return false;
}

/**
 *  JsMenu - Menue mit ausklappbaren Menuepunkten.
 * @param DOMNode menu DOMnode der hoechsten <ul> Node, welche das Menue beinhaltet.
 */  
function JsMenu(menu) {
  /**
   *  Moment offene Node.
   */     
  this.currentOpen = null;
  
  var submenus = menu.getElementsByTagName("ul"); //Alle submenues
  
  //Schleife durch alle Submenues und setze ihnen einen onclick-handler.
  for(var i = 0; i< submenus.length; i++) {
    var handler = getFirstNode(submenus[i].parentNode.childNodes);
    handler.className = (handler.className + " menuNode");
  	handler.onclick = function() {
  		var node = this.parentNode.getElementsByTagName("ul")[0]; //Das <ul> des aktuellen Knotens. Ist ein Sibling von <a>
  		if(node.style.display == "block") //Sichtbar?
  			node.style.display = "none"; //Weg!
  		else  //unsichtbar? 
  			node.style.display = "block"; //anzeigen!
  			
  		//Nun muessen evtl. offene, andere Nodes geschlossen werden. (auf des selben Ebene)
  		var siblings = this.parentNode.parentNode.childNodes;
  		
  		for(var j = 0; j < siblings.length; j++) {
  		 if(siblings[j].nodeType == 1) {
  		   var ul = getElementFromArray(siblings[j].childNodes, 'UL');
  		   
  		   if(ul != false && ul !== node) {
           ul.style.display = "none";
           var children = ul.getElementsByTagName('ul');
           for(var y = 0; y < children.length; y++) {
            children[y].style.display = "none";
           }
  		    }
  		 }
  		}
  		return false;
  	}
  }
}