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.01).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				/*'background-color': '#c6d880'*/
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.01,
				/*backgroundColor: color*/
			});
		}
	});
	
		// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement2').set('opacity', 0.5, '#CCCCCC').addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'color': '#B30047'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				'opacity': 0.5,
				'color': '#CCCCCC'
			});
		}
	});

// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement3').set('opacity', 0.5).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				/*'background-color': '#c6d880'*/
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.5,
				/*backgroundColor: color*/
			});
		}
	});
	
	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement4').set('opacity', 0.5).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				/*'background-color': '#c6d880'*/
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 0.5,
				/*backgroundColor: color*/
			});
		}
	});
	var anotherEl = $('anotherElement');
	
	// Again we are able to create a morph instance
	var morph = new Fx.Morph('anotherElement');
	
	$('morphEffect').addEvent('click', function(e) {
		e.stop();
		morph.start({
			width: '960px',
			height: '293px',
			color: '#FFFFFF',
			display: 'block',
			opacity: '1',
		});
	});
	$('resetEffect1').addEvent('click', function(e) {
		e.stop();
		morph.start({
			width: '960px',
			height: '293px',
			color: 'black',
			opacity: '0'
	});
/*		anotherEl.morph('div.demoElement');*/
	});
});