// *******************************************
// 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:4000, transition: Fx.Transitions.Back.easeInOut, wait:false});
	var montanas = new Fx.Styles($('montanas'), {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 enredadera = new Fx.Styles($('enredadera'), {duration:3000, transition: Fx.Transitions.Back.easeInOut, wait:false});
	var hojas = new Fx.Styles($('montanas'), {duration:3000, transition: Fx.Transitions.Back.easeInOut, wait:false});
	var personas = new Fx.Styles($('personas'), {duration:3300, 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
		});
		montanas.start({
			'margin-left': 0
		});
		ciudad.start({
			'margin-left': 0
		});
		enredadera.start({
			'margin-left': 0
		});
		hojas.start({
			'margin-left': 0
		});
		personas.start({
			'margin-left': 0
		});
	});
	
	$('btn_dos').addEvent('click', function(){
		nube.start({
			'margin-left': -100
		});
		montanas.start({
			'margin-left': -200
		});
		ciudad.start({
			'margin-left': -300
		});
		enredadera.start({
			'margin-left': -400
		});
		hojas.start({
			'margin-left': -1000
		});
		personas.start({
			'margin-left': -500
		});
	});

	$('btn_tres').addEvent('click', function(){
		nube.start({
			'margin-left': -500
		});
		montanas.start({
			'margin-left': -600
		});
		ciudad.start({
			'margin-left': -700
		});
		enredadera.start({
			'margin-left': -800
		});
		hojas.start({
			'margin-left': -1500
		});
		personas.start({
			'margin-left': -900
		});
	});
	
	$('btn_quatro').addEvent('click', function(){
		nube.start({
			'margin-left': -900
		});
		montanas.start({
			'margin-left': -800
		});
		ciudad.start({
			'margin-left': -1100
		});
		enredadera.start({
			'margin-left': -1000
		});
		hojas.start({
			'margin-left': -2000
		});
		personas.start({
			'margin-left': -1300
		});
	});
		
	$('btn_cinco').addEvent('click', function(){
		nube.start({
			'margin-left': -1200
		});
		montanas.start({
			'margin-left': -1100
		});
		ciudad.start({
			'margin-left': -1300
		});
		enredadera.start({
			'margin-left': -1200
		});
		hojas.start({
			'margin-left': -2300
		});
		personas.start({
			'margin-left': -1600
		});
	});
		
});