/**
 * Toggle
 *
 * A simple show/hide toggle.
 */
 
// define which definition list to apply the toggle functionality
var elm = 'dl#toggle-list';

// then initialize the toggle
$(document).ready(function(){ init_toggle(elm); });

/**
 * add the toggle functionality to html definition list title elements
 */
function init_toggle(element) {
	// have the "hand" show over the dt to denote that it's clickable
	$(element).find('dt').css({cursor:"pointer"});

	// next set up a hover event on the dt element (Doing it this way to be cross browser: ie doesn't support :hover on non-anchor tags)
	$(element).find('dt span').hover(
		function() { // mouseover
			$(this).css("text-decoration","underline");
		}, function() {// mouseout
			$(this).css("text-decoration","none");
		}
	);

	// then set up a click event to toggle showing the definition
	$(element).find('dt').click(function() {
		// add a class to control the flipping of the toggle image
		$(this).toggleClass("toggle-open");

		// reveal the content
		$(this).next().slideToggle("slow");
	});
}