var SiteNavigation = {
	init : function() {
		var wrapperSections = $$('#content-nav div.nav-section-wrapper');
		wrapperSections.each(
			function(wrapperSection) {
				//Get the toggleElement and the toggleSection elements, based on their classnames.  
				//There should only be one of each so we are taking the first ones.
				var toggleElement = wrapperSection.select('h3.nav-toggle-element')[0];
				var toggleSectionElement = wrapperSection.select('.nav-toggle-section-element')[0];
				
				//Make sure we have a toggleElement and toggleSection to work with, and then setup the click event.
				if (toggleElement && toggleSectionElement) {
					//Add the click event on the toggleElement.
				    Event.observe(toggleElement, "click", function() {
				        SiteNavigation.toggleSection(toggleElement, toggleSectionElement);
					});
				}
			}
		);
	},
	
	toggleSection : function(toggleElement, toggleSectionElement) {
		//Do The Effect.
		new Effect.toggle(toggleSectionElement, 'slide', { duration: 0.25 });
		
		//Toggle The ClassNames for the toggle element (header).
		if ($(toggleSectionElement).visible()) {
			toggleElement.removeClassName("nav-toggle-open").addClassName("nav-toggle-closed");
		} 
		else {
			toggleElement.addClassName("nav-toggle-open").removeClassName("nav-toggle-closed");
		}
	}
};

//Hook into the window.load event, to setup the toggling sections.
Event.observe(window, "load", SiteNavigation.init);