// *******************************************
// CSSLab 2008 - Parallax con Mootools
// *******************************************

window.addEvent('domready', function(){
	
// opacidad del menu
	$('menu').setOpacity(0.8);

// transformamos en variable los id's y aspectos de rapidez y tipo de transicion
	var nube = new Fx.Styles($('nube'), {duration:3000, transition: Fx.Transitions.Back.easeInOut, wait:false});
	var ciudad = new Fx.Styles($('ciudad'), {duration:3000, transition: Fx.Transitions.Back.easeInOut, wait:false});
	var hierba = new Fx.Styles($('hierba'), {duration:3000, transition: Fx.Transitions.Back.easeInOut, wait:false});
	var carteles = new Fx.Styles($('carteles'), {duration:3000, transition: Fx.Transitions.Back.easeInOut, wait:false});
	
// ahora los aplicamos al evento 'click' del mouse de cada boton
	$('btn_uno').addEvent('click', function(){
		nube.start({
			'margin-left': 0
		});
		ciudad.start({
			'margin-left': 0
		});
		hierba.start({
			'margin-left': 0
		});
		
		carteles.start({
			'margin-left': 0
		});
	});
	
	$('btn_dos').addEvent('click', function(){
		nube.start({
			'margin-left': -100
		});
		ciudad.start({
			'margin-left': -200
		});
		hierba.start({
			'margin-left': -300
		});
		carteles.start({
			'margin-left': -400
		});
	});

	$('btn_tres').addEvent('click', function(){
		nube.start({
			'margin-left': -500
		});
		ciudad.start({
			'margin-left': -600
		});
		hierba.start({
			'margin-left': -700
		});
		carteles.start({
			'margin-left': -800
		});
	});
	
	
	// hacia posicion inicial
	
	nube.start({
			'margin-left': -100
		});
		ciudad.start({
			'margin-left': -200
		});
		hierba.start({
			'margin-left': -300
		});
		carteles.start({
			'margin-left': -400
		});
		
});