window.addEvent('domready', function() {
	var el = $('overlay');
	
	// 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
	$('close-button').addEvent('click', el.fade.bind(el, [0]));
	var anotherEl = $('anotherElement');
	
	// Again we are able to create a morph instance
	var actie1 = new Fx.Morph('actie1');
	var actie2 = new Fx.Morph('actie2');
	var actie3 = new Fx.Morph('actie3');
	
	var winkelpunt1 = new Fx.Morph('winkelpunt-actie1');
	var winkelpunt2 = new Fx.Morph('winkelpunt-actie2');
	var winkelpunt3 = new Fx.Morph('winkelpunt-actie3');
		
	var morph_tekst = new Fx.Morph('tekst-actie1');
	var morph_tekst2 = new Fx.Morph('tekst-actie2');
	var morph_tekst3 = new Fx.Morph('tekst-actie3');
	
	terug1 = new Fx.Morph('terug-naar-overzicht1');
	terug2 = new Fx.Morph('terug-naar-overzicht2');
	terug3 = new Fx.Morph('terug-naar-overzicht3');
	
	actie1_knop = new Fx.Morph('tekst-actie1');
	actie2_knop = new Fx.Morph('tekst-actie2');
	actie3_knop = new Fx.Morph('tekst-actie3');
	
	
	$('actie1-knop').addEvent('click', function(e) {
		e.stop();
		actie2.start({
			display:'none'

		});
		actie3.start({
			display:'none'
		});
		winkelpunt1.start({
			display:'block'
		});
		terug1.start({
			display:'block'
		});
		actie1_knop.start({
			display:'none'
		});
		
	});
	$('terug1-knop').addEvent('click', function(e) {
		e.stop();
		actie2.start({
			display:'block'

		});
		actie3.start({
			display:'block'
		});
		winkelpunt1.start({
			display:'none'
		});
		terug1.start({
			display:'none'
		});
		actie1_knop.start({
			display:'block'
		});
		
	});
	$('actie2-knop').addEvent('click', function(e) {
		e.stop();
		actie1.start({
			display:'none'

		});
		actie3.start({
			display:'none'
		});
		winkelpunt2.start({
			display:'block'
		});
		terug2.start({
			display:'block'
		});
		actie2_knop.start({
			display:'none'
		});
		
	});
	$('terug2-knop').addEvent('click', function(e) {
		e.stop();
		actie1.start({
			display:'block'

		});
		actie3.start({
			display:'block'
		});
		winkelpunt2.start({
			display:'none'
		});
		terug2.start({
			display:'none'
		});
		actie2_knop.start({
			display:'block'
		});
		
	});
	$('actie3-knop').addEvent('click', function(e) {
		e.stop();
		actie1.start({
			display:'none'
		});
		actie2.start({
			display:'none'
		});
		winkelpunt3.start({
			display:'block'
		});
		terug3.start({
			display:'block'
		});
		actie3_knop.start({
			display:'none'
		});
		
	});
	$('terug3-knop').addEvent('click', function(e) {
		e.stop();
		actie1.start({
			display:'block'

		});	
		actie2.start({
			display:'block'
		});
		actie2.start({
			display:'block'
		});
		winkelpunt3.start({
			display:'none'
		});
		terug3.start({
			display:'none'
		});
		actie3_knop.start({
			display:'block'
		});
		
	});
	$('overlay').addEvent('click', function()
		{
			$('overlay').style.display = "none";
		});
	// Or we just use Element.morph
	/*$('CSSmorphEffect').addEvent('click', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		anotherEl.morph('.myClass');
	});
	
	$('resetEffect1').addEvent('click', function(e) {
		e.stop();
		// You need the same selector defined in the CSS-File
		anotherEl.morph('div.demoElement');
	});*/
});