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

//anim item
var myEffect3 = new Fx.Morph('item3', {duration: 'long', transition: Fx.Transitions.Bounce.easeOut});
var myEffect2 = new Fx.Morph('item2', {duration: 'long', transition: Fx.Transitions.Bounce.easeOut});
var myEffect = new Fx.Morph('item1', {duration: 'long', transition: Fx.Transitions.Bounce.easeOut});

function item1() {
myEffect.start('.step1_on')	;
}
function item2() {
myEffect2.start('.step2_on');
}
function item3() {
myEffect3.start('.step3_on');
}





//myEffect.start('.step1_on').chain(myEffect3.start('.step1_on')).chain(fx);
//myEffect.start('.step1_on')


$('bando').fade('hide');

item1();
item2.delay(1300);
item3.delay(2600);





// morph lien top
$$('a.menu_top').set('morph', {duration: 'short'});

	// Or we just use Element.morph
	$$('a.menu_top').addEvent('mouseenter', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		this.morph('.big_top');
	});
		$$('a.menu_top').addEvent('mouseleave', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		this.morph('.normal_top');
	});
		
// morph lien latéraux
$$('a.menu_lat').set('morph', {duration: 'short'});

	// Or we just use Element.morph
	$$('a.menu_lat').addEvent('mouseenter', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		this.morph('.big_lat');
	});
		$$('a.menu_lat').addEvent('mouseleave', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		this.morph('.normal_lat');
	});
	


});