window.addEvent('domready', function(){
	//First Example
	
	// We are setting the opacity of the element to 0.5 and adding two events
	
	$$('.navitem').set('opacity', 0.8).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 0.8,
				'background-color': '#409cfe'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.8,
				'background-color': '#9c9c9c'
			});
		}
	});
	
	$$('.white').set('opacity', 0.8).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 0.8,
				'background-color': '#ccc'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.8,
				'background-color': '#fff'
			});
		}
	});
	
	$$('.submenu').set('opacity', 1).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 0.7,
				'background-color': '#409cfe'
				
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				'opacity': 1,
				'background-color': '#9c9c9c'
			});
		}
	});

	// Second Example
	
	// The same as before: adding events
	
	var el = $$('.myOtherElementText span');
	
	$$('.subnavitem').set('opacity', 0.8).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: 150,
				transition: Fx.Transitions.linear // This could have been also 'bounce:out'
			}).tween('height', '180px'),
			
			this.morph({
				'opacity': 0.9,
				'background-color': '#9c9c9c'
			}), el.fade([1]);
			
		},
		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			this.set('tween', {}).tween('height', '26px'),el.tween('overflow', 'hidden');
			
			this.morph({
				opacity: 0.8,
				'background-color': '#9c9c9c'
			}), el.fade([0]);
		}
	});
	
	
});