window.addEvent('domready', function(){
	//First Example
	var el = $('myElement'),
		color = el.getStyle('backgroundColor');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement').set('opacity', 0.3).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.3,
			
			});
		}
	});
	
	
	
	
	
	
	
		var el = $('myElement1'),
		color = el.getStyle('backgroundColor');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement1').set('opacity', 0.3).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.3,
			
			});
		}
	});
	
	
	
	
	
	
		var el = $('myElement2'),
		color = el.getStyle('backgroundColor');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement2').set('opacity', 0.3).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.3,
			
			});
		}
	});
	
	
	
	
	
	
	
		var el = $('myElement3'),
		color = el.getStyle('backgroundColor');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement3').set('opacity', 0.3).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.3,
			
			});
		}
	});
	
	
	
	
	
	
	
		var el = $('myElement4'),
		color = el.getStyle('backgroundColor');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement4').set('opacity', 0.3).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.3,
			
			});
		}
	});
	
	
	
	
	
	
	
		var el = $('myElement5'),
		color = el.getStyle('backgroundColor');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement5').set('opacity', 0.3).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.3,
			
			});
		}
	});
	
	
	
	
	
	
	
	
		var el = $('myElement6'),
		color = el.getStyle('backgroundColor');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement6').set('opacity', 0.3).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.3,
			
			});
		}
	});
	
	
	
	
	
	
	
	
		var el = $('myElement7'),
		color = el.getStyle('backgroundColor');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement7').set('opacity', 0.3).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.3,
			
			});
		}
	});
	
	
	
	
	
	
	
	
		var el = $('myElement8'),
		color = el.getStyle('backgroundColor');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement8').set('opacity', 0.3).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.3,
			
			});
		}
	});
	
	
	
	
	
	
	
	
	
	
		var el = $('myElement9'),
		color = el.getStyle('backgroundColor');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement9').set('opacity', 0.3).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.3,
			
			});
		}
	});
	
	
	
	
	
	
	
	
	
		
		var el = $('myElement10'),
		color = el.getStyle('backgroundColor');
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement10').set('opacity', 0.3).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.3,
			
			});
		}
	});








	// Second Example
	
	// The same as before: adding events
	$('myOtherElement').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: 1000,
				transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
			}).tween('height', '150px');
		},
		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			this.set('tween', {}).tween('height', '20px');
		}
	});
});