window.addEvent('domready', function() {
									 
	var el = $('myElement');
	var el2 =$('myElement2');
	var el3 =$('myElement3');
	var el4 =$('myElement4');
	// MooTools is able to handle effects without the use of a wrapper,
	// so you are able to do effects with just one easy line.
	$('myElement').tween('opacity', 1);
	$('myElement2').tween('opacity', 0);
	$('myElement3').tween('opacity', 0);
	$('myElement4').tween('opacity', 0);
	//FIRST EXAMPLE
	
	// There are different ways to add a fading opacity effect to an element click
	
	// Long version
	$('tweenOpacity').addEvent('click', function(e) {
		// You often will need to stop propagation of the event
		e.stop();
		el.fade(1);
		el2.fade(0);
		el3.fade(0);
		el4.fade(0);
		document.getElementById("journey"). style. background = "url(/__components/images/menu-selected.jpg) no-repeat";
		document.getElementById("zone"). style. background = "none";
		document.getElementById("park"). style. background = "none";	
		document.getElementById("walking"). style. background = "none";
		document.getElementById("tweenOpacity4"). style. color = "#fff";
		document.getElementById("tweenOpacity5"). style. color = "#58585a";
		document.getElementById("tweenOpacity6"). style. color = "#58585a";
		document.getElementById("tweenOpacity7"). style. color = "#58585a";
		
	});
	
	$('tweenOpacity1').addEvent('click', function(e) {
		e.stop();
		el.fade(0);
		el2.fade(1);
		el3.fade(0);
		el4.fade(0);
		document.getElementById("journey"). style. background = "none";
		document.getElementById("zone"). style. background = "none";
		document.getElementById("park"). style. background =  "url(/__components/images/menu-selected.jpg) no-repeat";	
		document.getElementById("walking"). style. background = "none";
		document.getElementById("tweenOpacity4"). style. color = "#58585a";
		document.getElementById("tweenOpacity5"). style. color = "#fff";
		document.getElementById("tweenOpacity6"). style. color = "#58585a";
		document.getElementById("tweenOpacity7"). style. color = "#58585a";
	});
	$('tweenOpacity2').addEvent('click', function(e) {
		e.stop();
		el.fade(0);
		el2.fade(0);
		el3.fade(1);
		el4.fade(0);
		document.getElementById("journey"). style. background = "none";
		document.getElementById("zone"). style. background = "url(/__components/images/menu-selected.jpg) no-repeat";
		document.getElementById("park"). style. background =  "none";
		document.getElementById("walking"). style. background = "none";
		document.getElementById("tweenOpacity4"). style. color = "#58585a";
		document.getElementById("tweenOpacity5"). style. color = "#58585a";
		document.getElementById("tweenOpacity6"). style. color = "#fff";
		document.getElementById("tweenOpacity7"). style. color = "#58585a";
	});
	$('tweenOpacity3').addEvent('click', function(e) {
		e.stop();
		el.fade(0);
		el2.fade(0);
		el3.fade(0);
		el4.fade(1);
		document.getElementById("journey"). style. background = "none";
		document.getElementById("zone"). style. background = "none";
		document.getElementById("park"). style. background =  "none";
		document.getElementById("walking"). style. background = "url(/__components/images/menu-selected.jpg) no-repeat";
		document.getElementById("tweenOpacity4"). style. color = "#58585a";
		document.getElementById("tweenOpacity5"). style. color = "#58585a";
		document.getElementById("tweenOpacity6"). style. color = "#58585a";
		document.getElementById("tweenOpacity7"). style. color = "#fff";
	});
	$('tweenOpacity4').addEvent('click', function(e) {
		// You often will need to stop propagation of the event
		e.stop();
		el.fade(1);
		el2.fade(0);
		el3.fade(0);
		el4.fade(0);
		document.getElementById("journey"). style. background = "url(/__components/images/menu-selected.jpg) no-repeat";
		document.getElementById("zone"). style. background = "none";
		document.getElementById("park"). style. background = "none";	
		document.getElementById("walking"). style. background = "none";
		document.getElementById("tweenOpacity4"). style. color = "#fff";
		document.getElementById("tweenOpacity5"). style. color = "#58585a";
		document.getElementById("tweenOpacity6"). style. color = "#58585a";
		document.getElementById("tweenOpacity7"). style. color = "#58585a";
	});
	
	$('tweenOpacity5').addEvent('click', function(e) {
		e.stop();
		el.fade(0);
		el2.fade(1);
		el3.fade(0);
		el4.fade(0);
		document.getElementById("journey"). style. background = "none";
		document.getElementById("zone"). style. background = "none";
		document.getElementById("park"). style. background =  "url(/__components/images/menu-selected.jpg) no-repeat";	
		document.getElementById("walking"). style. background = "none";
		document.getElementById("tweenOpacity4"). style. color = "#58585a";
		document.getElementById("tweenOpacity5"). style. color = "#fff";
		document.getElementById("tweenOpacity6"). style. color = "#58585a";
		document.getElementById("tweenOpacity7"). style. color = "#58585a";
	});
	$('tweenOpacity6').addEvent('click', function(e) {
		e.stop();
		el.fade(0);
		el2.fade(0);
		el3.fade(1);
		el4.fade(0);
		document.getElementById("journey"). style. background = "none";
		document.getElementById("zone"). style. background = "url(/__components/images/menu-selected.jpg) no-repeat";
		document.getElementById("park"). style. background =  "none";
		document.getElementById("walking"). style. background = "none";
		document.getElementById("tweenOpacity4"). style. color = "#58585a";
		document.getElementById("tweenOpacity5"). style. color = "#58585a";
		document.getElementById("tweenOpacity6"). style. color = "#fff";
		document.getElementById("tweenOpacity7"). style. color = "#58585a";
	});
	$('tweenOpacity7').addEvent('click', function(e) {
		e.stop();
		el.fade(0);
		el2.fade(0);
		el3.fade(0);
		el4.fade(1);
		document.getElementById("journey"). style. background = "none";
		document.getElementById("zone"). style. background = "none";
		document.getElementById("park"). style. background =  "none";
		document.getElementById("walking"). style. background = "url(/__components/images/menu-selected.jpg) no-repeat";
		document.getElementById("tweenOpacity4"). style. color = "#58585a";
			document.getElementById("tweenOpacity5"). style. color = "#58585a";
			document.getElementById("tweenOpacity6"). style. color = "#58585a";
			document.getElementById("tweenOpacity7"). style. color = "#fff";
	});
	
});