var SiteNavigation = {
	init: function() {
		var wrapperSections = $('#content-nav div.nav-section-wrapper');
		wrapperSections.each(
			function(index, 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).children('h3.nav-toggle-element')[0];
				var toggleSectionElement = $(wrapperSection).children('.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.
					$(toggleElement).click(
						function() {
							SiteNavigation.toggleSection($(toggleElement), $(toggleSectionElement));
						}
					);
				}
			}
		);
	},
	
	toggleSection: function(toggleElement, toggleSectionElement) {
		//Do The Animation
		toggleSectionElement.slideToggle('fast');
		
		//Toggle The ClassNames for the toggle element (header).
		if (toggleSectionElement.is(':visible')) {
			toggleElement.removeClass("nav-toggle-open").addClass("nav-toggle-closed");
		} 
		else {
			toggleElement.addClass("nav-toggle-open").removeClass("nav-toggle-closed");
		}
	}
};

//Hook into the window.load event, to setup the toggling sections.
$(document).ready(SiteNavigation.init);