// Hook the window onload event
Event.observe(window, 'load', function() {
	// Setup an observer to watch for click in page
	Event.observe(document.body, 'click', handleClick);

});

function handleClick(event) {
	var elt = Event.element(event); // Get the clicked element

	// Use Prototype to grab class names. Turn Enumerable result into a regular array
	try { // Trap potential errors
		class_names = $(elt).classNames().toArray();
	} catch (e) {
		class_names = new Array();	
	}

	var tagClass = '';
	// If the element has more than one class, get the classes
	if (class_names.length > 1) {
		var tagClass = class_names[0];
		var targetTagId = class_names[1];
	}

	if (tagClass == 'showSubMenu') {

		// Remove existing classes for span container
		$(elt).removeClassName('showSubMenu');
		$(elt).removeClassName(targetTagId);

		// Add back classes, but this time with the hideSubMenu as the class
		$(elt).addClassName('hideSubMenu');
		$(elt).addClassName(targetTagId);

		// Make the list "blind down"
		new Effect.BlindDown(targetTagId,{ duration: 0.5, queue: 'end'});
		 
	}

	if (tagClass == 'hideSubMenu') {

		// Remove existing classes for span container
		$(elt).removeClassName('hideSubMenu');
		$(elt).removeClassName(targetTagId);

		// Add back classes, but this time with the hideSubMenu as the class
		$(elt).addClassName('showSubMenu');
		$(elt).addClassName(targetTagId);

		// Make the list "blind up"
		new Effect.BlindUp(targetTagId,{ duration: 0.5, queue: 'end'});
	}

}