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

	// Second Example
	
	// The same as before: adding events
	$('myOtherElement').addEvents({
		//'mouseenter': function(){
		'click': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			fx = new Fx.Styles(this, {duration: 300, wait: false});
			fx.options.transition = Fx.Transitions.linear
			fx.start({
					'height': 110
			});


			/*this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
			}).tween('height', '100px');*/
		},
		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			//this.set('tween', {}).tween('height', '20px');
			
			fx = new Fx.Styles(this, {duration: 300, wait: false});
			fx.options.transition = Fx.Transitions.linear
			fx.start({
					'height': 38
			});
			
		}
	});
	
	
	$('myOtherElement2').addEvents({
		//'mouseenter': function(){
		'click': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			fx = new Fx.Styles(this, {duration: 300, wait: false});
			fx.options.transition = Fx.Transitions.linear
			fx.start({
					'height': 150
			});


			/*this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
			}).tween('height', '100px');*/
		},
		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			//this.set('tween', {}).tween('height', '20px');
			
			fx = new Fx.Styles(this, {duration: 300, wait: false});
			fx.options.transition = Fx.Transitions.linear
			fx.start({
					'height': 38
			});
			
		}
	});
	
	
	$('myOtherElement3').addEvents({
		//'mouseenter': function(){
		'click': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			fx = new Fx.Styles(this, {duration: 300, wait: false});
			fx.options.transition = Fx.Transitions.linear
			fx.start({
					'width': 450,
					'height': 190
			});


			/*this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
			}).tween('height', '100px');*/
		},
		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			//this.set('tween', {}).tween('height', '20px');
			
			fx = new Fx.Styles(this, {duration: 300, wait: false});
			fx.options.transition = Fx.Transitions.linear
			fx.start({
					'width': 235,
					'height': 38
			});
			
		}
	});
	
});