window.addEvent('domready', function() {
	
	var currentIdxSliding;
	
	var hauteurDiv = [380, 340, 340, 420];
				
	for (var i=0; i<4; i++){
		
		var vSlideIn = $("v_slidein" + i);
		vSlideIn.idx = i;
		var vSlideOut = $("v_slideout" + i);
		vSlideOut.idx = i;
		
		vSlideOut.addEvent('click', function(){				
			var verticalSlideName = "vertical_slide" + this.idx;					
			var myEffect = new Fx.Morph(verticalSlideName, {duration: 'short', transition: Fx.Transitions.Sine.easeOut, onComplete: vSlideClosed});
			myEffect.start({
				'height': 0 //Morphs the height from the current to 0px.
			});					
			$(verticalSlideName).style.overflow="hidden";				
			currentIdxSliding = this.idx;
		});
		
		vSlideIn.addEvent('click', function(){
		
			var verticalSlideName = "vertical_slide" + this.idx;			
			var myEffect = new Fx.Morph(verticalSlideName, {duration: 'short', transition: Fx.Transitions.Sine.easeOut, onComplete: vSlideOpened});
			myEffect.start({
				'height': hauteurDiv[this.idx] //Morphs the height from the current to specified size.
			});					
			$(verticalSlideName).style.display="block";					
			currentIdxSliding = this.idx;
		});
		
		function vSlideClosed(){
			var verticalSlideName = "vertical_slide" + currentIdxSliding; 
			$(verticalSlideName).style.display="none"
		}	
		
		function vSlideOpened(){
			var verticalSlideName = "vertical_slide" + currentIdxSliding; 
			$(verticalSlideName).style.overflow="visible"
		}
	}	
});