window.addEvent('domready', function(){
 
 
	var stretchers = $$('.moo'); 	//elements that stretch
	var toggles = $$('.espandi'); 		//elements to click
 
	var mySliders = {};
	var myHiders = {};
	var visible = null;
	var marginreset;
 
	stretchers.each(function(el, i){
		mySliders[i] = new Fx.Slide(stretchers[i]);	
		myHiders[i] = new Fx.Slide(stretchers[i].getParent(), 
				    {			
                   onComplete: function(){ 
 
							//force the hidden div to be completely reset
							marginreset = this.wrapper.firstChild.getStyle('margin');
							this.wrapper.firstChild.firstChild.setStyle('margin', marginreset);
 
							this.wrapper.firstChild.setStyle('margin', '0');
							this.wrapper.firstChild.setStyle('height', '0');
 
							this.wrapper.setStyle('height', 'auto');
 
							mySliders[myHiders['next']].toggle();
							visible = myHiders['next'];
                   }
           })
 
		mySliders[i].hide();
	});
 
 
 
	toggles.each(function(el, i){
 
 
			toggles[i].addEvent('click', function(){				
 
 
					if ((visible != null) && (i != visible)) {
						myHiders['next'] = i;
						myHiders[visible].toggle();
					}
 
					// this should only be needed for the very first click
					else {
						mySliders[i].toggle();
						visible = i;
					}
 
 
 
			});
 
	});
 
 
 
});