var morphSet = function(morphObject){
	//nous pouvons définir les propriétés de style comme Fx.Tween
	//sauf que nous pouvons placer plusieurs propriétés ici
	//alert('morphSet');
	morphObject.set({
	'width': 0,
	'height': 0
	});
}

var morphSetText = function(morphObject){
	//nous pouvons définir les propriétés de style comme Fx.Tween
	//sauf que nous pouvons placer plusieurs propriétés ici
	//alert('morphSet');
	morphObject.set({
	'width': 0,
	'height': 0,
	'color' : '#000'
	});
}
 
var morphStart = function(morphObject, height){
	//nous pouvons aussi commencer un morph comme un tween
	//sauf que nous pouvons entrer plusieurs propriétés de style
	morphObject.start({
	'width': 65,
	'height': height,
	'color' : '#0C7B41'
	});
	//morphObject.fade(0.5);
}

var morphStartText = function(morphObject){
	//nous pouvons aussi commencer un morph comme un tween
	//sauf que nous pouvons entrer plusieurs propriétés de style
	morphObject.start({
	'width': 120,
	'height': 10,
	'color' : '#0C7B41'
	});
} 
 


var divDisplay = function(morphElement, height) {
	//alert(height)
		//puis créons notre morph
		var morphObject = new Fx.Morph(morphElement, {
			duration: 1000,
			onComplete : function(morphElement2) {
			   //divDisplay(morphElement2);
			}
			});
		
	//$('box2').addEvent('click', morphSet.bind(morphObject)); 
	//morphSet.bind(new Fx.Morph('box1')); 
	
	morphSet(morphObject);
	morphStart( morphObject, height); 

}

var divDisplayText = function(morphElement) {
		//puis créons notre morph
		//morphElement.fade : '0.5';
		var morphObject = new Fx.Morph(morphElement, {
duration: 1000,
transition: 'quad:in'

		
			});

		
		
	//$('box2').addEvent('click', morphSet.bind(morphObject)); 
	//morphSet.bind(new Fx.Morph('box1')); 
	
	morphSetText(morphObject);
	morphStartText( morphObject); 

}



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

		//var el1 = $('box1');
		//var el2 = $('box2');

		var morphElement1 = $('box1');
		var morphElement2 = $('box2');
		var img = $$('#box_img1 img');
		var img = img[0];
		divDisplay(img, 65);
		//setTimeout("divDisplay($('box_text1'))",1000);
		//setTimeout("divDisplay($('box_img2'))",2000);
		setTimeout(function () { divDisplayText ($('box_text1')) }, 2000);
		var img2 = $$('#box_img2 img');
		var img2 = img2[0];
		setTimeout(function () { divDisplay (img2, 65) }, 3000);
		setTimeout(function () { divDisplayText ($('box_text2')) }, 3500);
//$('box_text2').get('tween', {property: 'opacity', duration: 'long'}).start(1);

		
		var img3 = $$('#box_img3 img');
		var img3 = img3[0];
		setTimeout(function () { divDisplay (img3, 65) }, 4500);
		setTimeout(function () { divDisplayText ($('box_text3')) }, 5500);
		var img4 = $$('#box_img4 img');
		var img4 = img4[0];
		setTimeout(function () { divDisplay (img4, 65) }, 6500);
		setTimeout(function () { divDisplayText ($('box_text4')) }, 7500);
		var img5 = $$('#box_img5 img');
		var img5 = img5[0];
		setTimeout(function () { divDisplay (img5, 83) }, 8500);

});