/*
 * MooTools setup script for Fx.Slide effect.
 *
 * Written by Manuel Haim.
 * Last change: 2009-09-03
 *
 * Usage:
 * Include mootools.js (along with Fx.Slide and Selectors classes!)
 * in your HTML file (see www.mootools.net). Then include this script.
 * Your HTML needs to be set up like this:
 *
 * <div class="mt_fxslide">
 *   <a class="mt_toggle" href="#">Click here to show or hide the div.</a>
 *   <div class="mt_content">Some text to display (hidden at startup).</div>
 * </div>
 *
 */
window.addEvent('domready', function() {

	// Look for mt_content containers.
	var myContents = $$('div.mt_content');
	
	// Create new Fx.Slide objects...
	var mySlides = new Array(myContents.length);
	for(var i=0; i<myContents.length; i++) {
		// (slide is hidden at startup)
		mySlides[i] = new Fx.Slide(myContents[i]).hide();
	
		// ... and link all matching anchors to Fx.Slide objects.
		// (current node and slide values are passed to the namespace)
		new function(node, slide) {
			// mt_content and mt_toggle must be within same mt_fxslide
			if(node.getParents('.mt_fxslide').length>0) {
				var myTogglers = node.getParents('.mt_fxslide')[0].getElements('a.mt_toggle');
				
				for(var j=0; j<myTogglers.length; j++) {
					if(myTogglers[j].getParent('.mt_fxslide') == node.getParents('.mt_fxslide')[0]) {
						myTogglers[j].addEvent('click', function(e){
							e.stop();
							slide.toggle();
						});
					
					}
				}
			}
		}(myContents[i], mySlides[i]);
		
	}

	
});