// JavaScript Document

window.addEvent('domready',function() {

	//Find all elements in the DOM with a class of .slideout
	//they hold the content to show or hide.
	//$$('.class') returns an Array of found elements
	
	var sliders = $$(".slideout");

	//Find all elements with a class of hovertoggle
	//they will capture the click event.
	
	var triggers = $$(".showtoggle") ;

	// sliders and triggers are arrays!!

	// For each instance of .slide_trigger triggers[x] (note the anonymous function)
	triggers.each(function( o, x ){

		var sl = new Fx.Slide( sliders[x], {wait:false} );	// Instantiate a new slider effect on the matching .slide element

		$(triggers[x]).addEvent('mouseover',function(e){  // Add a hover event to the [x]th trigger 
			e = new Event(e);		// the event 
			sl.show();				// Show the div
//			e.stop(); 				  // Stop the event from bubbling
		})                    //
				sl.hide(); 				// Hide the slider 

		$(triggers[x]).addEvent('mouseout',function(e){  // Add a click event to the [x]th trigger 
			e = new Event(e);		// the event 
			sl.hide();				// Hide the div
//			e.stop(); 				  // Stop the event from bubbling
		})                    //
			sl.hide(); 				// Hide the slider 
	});	// end of triggers.each

}  ); // end of window.addevent