window.addEvent('domready', function() {
	var el = $('myElement');
	
	// MooTools is able to handle effects without the use of a wrapper,
	// so you are able to do effects with just one easy line.
	

	
	//THIRD EXAMPLE
	
	var anotherEl = $('anotherElement');
	var anotherEl2 = $('anotherElement2');
	
	// Again we are able to create a morph instance
	


	
	
		// Or we just use Element.morph
	$('CSSmorphEffect2').addEvent('click', function(e) {
		e.stop();
		var morph = new Fx.Morph('anotherElement', {transition: Fx.Transitions.Sine.easeOut});
		var morph2 = new Fx.Morph('anotherElement2', {transition: Fx.Transitions.Sine.easeOut, duration: 1500});
		// Changes the element's style to .myClass defined in the CSS
		morph2.start({'margin-top':8});
		morph.start({'margin-top':8});
		
	});
	
		// Or we just use Element.morph
	$('CSSmorphEffect3').addEvent('click', function(e) {
		e.stop();
			var morph = new Fx.Morph('anotherElement', {transition: Fx.Transitions.Sine.easeOut});
			var morph2 = new Fx.Morph('anotherElement2', {transition: Fx.Transitions.Sine.easeOut, duration: 1500});
		// Changes the element's style to .myClass defined in the CSS
		
		morph2.start({'margin-top':-290});
		morph.start({'margin-top':90});
	});
	
		// Or we just use Element.morph
	$('CSSmorphEffect4').addEvent('click', function(e) {
		e.stop();
		var morph = new Fx.Morph('anotherElement', {transition: Fx.Transitions.Sine.easeOut});
		var morph2 = new Fx.Morph('anotherElement2', {transition: Fx.Transitions.Sine.easeOut, duration: 1500});
		// Changes the element's style to .myClass defined in the CSS
	
		morph2.start({'margin-top':-592});
			morph.start({'margin-top':172});
	});
	

});