window.addEvent('domready', function() {
	var el = $('teaser1');
	
	// MooTools is able to handle effects without the use of a wrapper,
	// so you are able to do effects with just one easy line.
	
	//FIRST EXAMPLE
	
	// There are different ways to add a fading opacity effect to an element click
	
	// Short version
	//$('teaser1').addEvent('click', el.fade.bind(el, [0]));
	
	// Long version
	//$('teaser1').addEvent('mouseenter', function(e) {
//		// You often will need to stop propagation of the event
//		e.stop();
//		el.fade(1);
//	});
//	
//	$('teaser1').addEvent('onload', function(e) {
//		e.stop();
//		el.fade(0.7);
//	});
//	
//	
	/*//SECOND EXAMPLE
	var otherEl = $('myOtherElement');
	
	$('heightEffect').addEvent('click', function(){
		otherEl.tween('height', 50);
		return false; // alternative syntax to stop the event
	});
	
	// We can also create an Fx.Tween instance and use a wrapper variable
	
	var myEffect = new Fx.Tween(otherEl);
	$('colorEffect').addEvent('click', function(e) {
		e.stop();
		// We change the background-color of the element
		myEffect.start('background-color', '#E6EFC2');
	});
	
	$('borderEffect').addEvent('click', function(e) {
		e.stop();
		otherEl.tween('border', '10px dashed #C6D880');
	});
	
	$('resetEffect').addEvent('click', function(e) {
		e.stop();
		otherEl.erase('style');
	});*/
	
	
	//THIRD EXAMPLE
	
	var anotherEl = $('teaser1');
	var anotherChildEl = $('teaser1link');
	
	// Again we are able to create a morph instance
	var morph = new Fx.Morph('teaser1');
	var morphChild = new Fx.Morph('teaser1link');
	
	$('morphEffect').addEvent('click', function(e) {
		e.stop();
		morph.start({
			width: '200px',
			color: '#C6D880'
		});
	});
	
	// Or we just use Element.morph
	$('teaser1link').addEvent('click', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		anotherEl.morph('.teaser1a');
	});
	
	$('teaser1link').addEvent('click', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		anotherChildEl.morph('.teaser1link');
	});
	
	$('resetEffect1').addEvent('click', function(e) {
		e.stop();
		// You need the same selector defined in the CSS-File
		anotherEl1.morph('div.demoElement');
	});
	
	
	/* TEASER 2 */
	var anotherEl2 = $('teaser2');
	var anotherChildEl2 = $('teaser2link');
	
	// Again we are able to create a morph instance
	var morph2 = new Fx.Morph('teaser2');
	var morphChild2 = new Fx.Morph('teaser2link');
	
	$('morphEffect').addEvent('click', function(e) {
		e.stop();
		morph.start({
			width: '200px',
			color: '#C6D880'
		});
	});
	
	// Or we just use Element.morph
	$('teaser2link').addEvent('click', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		anotherEl2.morph('.teaser2a');
	});
	
	$('teaser2link').addEvent('click', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		anotherChildEl2.morph('.teaser2link');
	});
	
	$('resetEffect1').addEvent('click', function(e) {
		e.stop();
		// You need the same selector defined in the CSS-File
		anotherEl2.morph('div.demoElement');
	});
	
	
		/* TEASER 3 */
	var anotherEl3 = $('teaser3');
	var anotherChildEl3 = $('teaser3link');
	
	// Again we are able to create a morph instance
	var morph3 = new Fx.Morph('teaser3');
	var morphChild3 = new Fx.Morph('teaser3link');
	
	$('morphEffect').addEvent('click', function(e) {
		e.stop();
		morph.start({
			width: '200px',
			color: '#C6D880'
		});
	});
	
	// Or we just use Element.morph
	$('teaser3link').addEvent('click', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		anotherEl3.morph('.teaser3a');
	});
	
	$('teaser3link').addEvent('click', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		anotherChildEl3.morph('.teaser3link');
	});
	
	//$('resetEffect3').addEvent('click', function(e) {
//		e.stop();
//		// You need the same selector defined in the CSS-File
//		anotherEl3.morph('div.demoElement');
//	});
	
		/* TEASER 4 */
	var anotherEl4 = $('teaser4');
	var anotherChildEl4 = $('teaser4link');
	
	// Again we are able to create a morph instance
	var morph4 = new Fx.Morph('teaser4');
	var morphChild4 = new Fx.Morph('teaser4link');
	
	$('morphEffect').addEvent('click', function(e) {
		e.stop();
		morph.start({
			width: '200px',
			color: '#C6D880'
		});
	});
	
	// Or we just use Element.morph
	$('teaser4link').addEvent('click', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		anotherEl4.morph('.teaser4a');
	});
	
	$('teaser4link').addEvent('click', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		anotherChildEl4.morph('.teaser4link');
	});
	
	$('resetEffect4').addEvent('click', function(e) {
		e.stop();
		// You need the same selector defined in the CSS-File
		anotherEl4.morph('div.demoElement');
	});
});