//
// Some dojo glue code to make our menu expand/collapse as the user
// waves the mouse over the menu (left hand side of page).
//
// NOTE: script wrapped in an anonymous function call to not pollute 
// global namesapce.
//

;(function() {
	
	var openMenu="";
    var currentAnimation=null;

	var menuanimation = function(){

		// start off with all menues closed.
		
		dojo.query("#leftnav ul li ul").forEach(function(item) {
			item.style.height="1"; 
		});

		// expand/collapse on click
		
	    dojo.query("#leftnav ul li h1.top").connect("onmouseover",function(event) {

              // if there is already a menu being animated, we have 
              // to undo that before we can turn on this one. We want 
              // just one menu being animated at a time.

              if(currentAnimation!=null) {

                  // stop the other animation
                  
                  currentAnimation.stop();
              }
			  
			  // we want the first <ul> child of the paren <li>
			  // so we can slide out the sub-menu that is beneeth
			  // the h1 element.  the subment is wrapped in a <ul>
			  
			  // find the submenu...
			 
			  var children = event.target.parentNode.childNodes;
		      var submenu = null;

			  for(var i=0; i<children.length; i++) {
				  if(children[i].nodeName.toUpperCase()=="UL") {
					  submenu=children[i];
					  break;
				  }
			  }
			  if(submenu) {

				// if we click on the same sub-menu twice, 
				// then just leave it alone, its already been 
				// opened.  If the intent is to close it, 
				// they need to click on some other menu
				// item.  
				
		    	if(openMenu!="") {
		    	  if(submenu.id==openMenu) {
			        return ;
		    	  } else {
		    		dojo.query("#"+openMenu).forEach(function(item) {
					  item.style.height="1"; 
					});
		    	  }
		    	}

		    	openMenu=submenu.id;
		    	
				// figure out the menu height, we can't just use
				// the offsetHeight, because we are setting this
				// to 1 in order to hide the menu.  We can't 
				// just use display: none, because IE needs a
				// non-zero size of at least 1 pixel.
				
				children = submenu.childNodes;
		        var h = 0;

			    for(var i=0; i<children.length; i++) {
				  if(children[i].nodeName.toUpperCase()=="LI") {
					  h = h + children[i].offsetHeight;
				  }
			    }
				
			    // animate it open...
			  
			    currentAnimation = dojo.animateProperty({
				  node: submenu,
				  delay: 20,
				  duration: 500,
				  properties: {
				      height: { end: h, start: 1 }
			      } 
			    });

			    // remember that we are animating so we
			    // can cancel if they click on something
			    // else while we are still animating.
			    
			    currentAnimation.play(); 	  
			  }
		  });	

	};
	
	dojo.addOnLoad(menuanimation);
})();