window.addEvent('domready', function(){
	// The same as before: adding events
	$('Black').addEvents({
		'mouseenter': function(){
			morph1 = new Fx.Morph('Black', {
				duration: 800,
				transition: Fx.Transitions.Expo.easeOut, // This could have been also 'Expo:out'
				link: 'chain'
			}).start({'top' : -130, 'height' : 130});
			
		},

		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			morph1.start({'top' : 0, 'height' : 0});
		}
	});
});

window.addEvent('domready', function(){
	// The same as before: adding events
	$('Orange').addEvents({
		'mouseenter': function(){
			morph2 = new Fx.Morph('Orange', {
				duration: 800,
				transition: Fx.Transitions.Expo.easeOut, // This could have been also 'Expo:out'
				link: 'chain'
			}).start({'top' : -130, 'height' : 130});
			
		},

		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			morph2.start({'top' : 0, 'height' : 0});
		}
	});
});

window.addEvent('domready', function(){
	// The same as before: adding events
	$('Green').addEvents({
		'mouseenter': function(){
			morph3 = new Fx.Morph('Green', {
				duration: 800,
				transition: Fx.Transitions.Expo.easeOut, // This could have been also 'Expo:out'
				link: 'chain'
			}).start({'top' : -130, 'height' : 130});
			
		},

		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			morph3.start({'top' : 0, 'height' : 0});
		}
	});
});

window.addEvent('domready', function(){
	// The same as before: adding events
	$('Blue').addEvents({
		'mouseenter': function(){
			morph4 = new Fx.Morph('Blue', {
				duration: 800,
				transition: Fx.Transitions.Expo.easeOut, // This could have been also 'Expo:out'
				link: 'chain'
			}).start({'top' : -130, 'height' : 130});
			
		},

		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			morph4.start({'top' : 0, 'height' : 0});
		}
	});
});




window.addEvent('domready', function(){
	// The same as before: adding events
	$('Red').addEvents({
		'mouseenter': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			this.set('tween', {
				duration: 800,
				transition: Fx.Transitions.Expo.easeOut, // This could have been also 'Expo:out'
				link: 'chain'
			}).tween('height','130px');
			
		},

		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			this.tween('height', '0px');
		}
	});
});

window.addEvent('domready', function(){
	// The same as before: adding events
	$('Yellow').addEvents({
		'mouseenter': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			this.set('tween', {
				duration: 800,
				transition: Fx.Transitions.Expo.easeOut, // This could have been also 'Expo:out'
				link: 'chain'
			}).tween('height','130px');
			
		},

		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			this.tween('height', '0px');
		}
	});
});
window.addEvent('domready', function(){
	// The same as before: adding events
	$('Purple').addEvents({
		'mouseenter': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			this.set('tween', {
				duration: 800,
				transition: Fx.Transitions.Expo.easeOut, // This could have been also 'Expo:out'
				link: 'chain'
			}).tween('height','130px');
			
		},

		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			this.tween('height', '0px');
		}
	});
});
window.addEvent('domready', function(){
	// The same as before: adding events
	$('White').addEvents({
		'mouseenter': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			this.set('tween', {
				duration: 800,
				transition: Fx.Transitions.Expo.easeOut, // This could have been also 'Expo:out'
				link: 'chain'
			}).tween('height','130px');
			
		},

		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			this.tween('height', '0px');
		}
	});
});