var e24Montealto = new Class({

	Implements: [Options],
	
	options: {
		container: undefined,
		yearDelay: 300, //Cuanto tarda en rotar los claims de la izquierda del claim rotator
		claimDelay: 800, //Cuanto tarda en rotar los claims de la derecha del claim rotator
		claimDestroyDelay: 1200, //cuanto tarda en desaparecer los claims pequeños
		bigClaimDelay: 1500, //Cuanto tardan en aparecer los claims grandes
		bigClaimWait: 1000, //Tiempo de espera para comenzar a aparecer los claims grandes
		bottomArrowsWait: 1800, //Tiempo de espera para que comience la animacion de flechas de abajo		
		scrollWait: 900, //Tiempo de espera para que se mueva el visor despues de llegar la flecha al final
		topArrowsWait: 2500, //Tiempo de espera para que comience la animacion de flechas de arriba		
		imgs: [
			'img/punto.png',
			'img/arrows/left.png',
			
			'img/claims/pocos-anos.png',
			'img/claims/somosunequipo.png',
			'img/claims/diferentes.png',
			'img/claims/energia-que-nos-hace-crecer.png',
			'img/claims/ensenamos-crecer.png',
			'img/claims/idea-proyectos.png',
			'img/claims/MONTEALTO-CAPITAL-RIESGO.png',
			'img/claims/MONTEALTO-ENERGIA.png',
			'img/claims/MONTEALTO-INGENIERIA.png',
			'img/claims/MONTEALTO-INMOBILIARIA.png',
			'img/claims/NACIDOS.png',
			'img/claims/NUEVOS-RETOS.png',
			'img/claims/vive-con-nosotros.png',
			
			'img/subclaims/primera-residencia.png',
			'img/subclaims/segunda-residencia.png',
			'img/subclaims/INMOBILIARIA.png',
			'img/subclaims/INFRAESTRUCTURAS.png',
			'img/subclaims/INGENIERIA.png',
			'img/subclaims/ENERGIA.png',
			'img/subclaims/CAPITAL-RIESGO.png',
			'img/subclaims/CONSOLIDACION.png',
			'img/subclaims/1995.png',
			'img/subclaims/2001.png',
			'img/subclaims/2003.png',
			'img/subclaims/2004.png',
			'img/subclaims/2006.png',
			'img/subclaims/2007.png',
			'img/subclaims/CORDOBA.png',
			'img/subclaims/MAS-DE-350-EMPLEADOS.png',
			'img/subclaims/termosolar.png',
			'img/subclaims/biomasa.png',
			'img/subclaims/eolica.png',
			'img/subclaims/fotovoltagica.png',
			'img/subclaims/infraestructuras2.png',
			'img/subclaims/energia2.png',
			'img/subclaims/i-d-i.png',
			'img/subclaims/british.png',
			'img/subclaims/vidisa.png',
			'img/subclaims/gestion-integral-proyectos.png',
			'img/subclaims/arquitectura-y-servicios.png',
			'img/subclaims/obracivil.png',
			//'img/subclaims/obracivil2.png',
			'img/subclaims/edificacion.png',
			//'img/subclaims/edificacion2.png',
			
			'img/logospng/project-manager.png',			
			'img/logospng/capitalriesgo.png',			
			'img/logospng/energia.png',			
			'img/logospng/infraestructuras.png',			
			'img/logospng/ingenieria.png',			
			'img/logospng/inmobiliaria.png',			
			'img/logospng/inmobiliaria.png',			
			'img/logospng/patrimonio.png'			
		]		
		
	},
	
	initialize: function(options){
		this.setOptions(options);

		this.jaceFx = new e24JaceFx({
			container: this.options.container,
			width: 4000,
			height: 1208,
			initStep: {
				x: 120,
				y: 276
			},
			transition: Fx.Transitions.linear.easeOut,
			stepDuration: 2000,
			infinite: false,
			onReady: this.ready.bind(this),
			onCompleted: function(){
			},
			onStep: function(index){
			}
		});
		this.jaceFx.safeStart([{
			x: 120,
			y: 276
		}, {
			x: 1412,
			y: 44
		}, {
			x: 2448,
			y: 340
		}, {
			x: 1120,
			y: 488
		}, {
			x: 2620,
			y: 736
		}, {
			x: 1328,
			y: 896
		}, {
			x: 40,
			y: 808
		}], true);
	},
	
	preload: function() {
		new Asset.images(this.options.imgs, {
			onCompleted: function() {
			}.bind(this)
		});
	
	},
	
	getBackEl: function() {
		return this.backEl;
	},
	ready: function(backEl){
		this.backEl = backEl;

		this.preload();
		
		this.flechasFx = new e24WalkerFx({
			container: this.backEl,
			basePath: 'img/arrows/',
			images: {
				'up': 'left.png',
				'right': 'left.png',
				'down': 'left.png',
				'left': 'left.png'
			},
			stepWidth: 29,
			stepHeight: 44,
			longSteps: true,
			stepDuration: 1000,
			stepDelay: 50,
			tailDelay: 800,
			startPos: {
				'x': 0,
				'y': 0,
				'dir': 'right'
			},
			onCompleted: this.fxPuntosPaso1.bind(this)
		});
		
		this.puntosFx = new e24WalkerFx({
			container: this.backEl,
			basePath: 'img/',
			images: {
				'up': 'punto.png',
				'right': 'punto.png',
				'down': 'punto.png',
				'left': 'punto.png'
			},
			stepWidth: 12,
			stepHeight: 10,
			longSteps: true,
			stepDuration: 1000,
			stepDelay: 50,
			tailDelay: 0,
			destroy: false,
			startPos: {
				'x': 0,
				'y': 0,
				'dir': 'down'
			},
			onCompleted: undefined
		});
		
		this.paso0();
	},
	

	/********************************************************************************
	PASO 0: Logo montealto
	 ********************************************************************************/
	
	/*
	Aparece el logo de montealto durante un rato y da paso a la animación de la flechas
	*/
	paso0: function() {
		if (this.claimEl) {
			this.claimEl.dispose();
		}			

		this.claimEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 510px;' +
			'top: 315px;' +
			'background: url(img/claims/NUEVOS-RETOS.png) center no-repeat;' +
			'width: 500px;' +
			'height: 140px;' + 
			'visibility: hidden;'			
		});
		Browser.fixPNG(this.claimEl);						
		this.claimEl.set('tween', {
			duration: this.options.bigClaimDelay,
			onComplete: this.paso1.delay(3000, this)			
		});
		
		this.backEl.grab(this.claimEl);
		this.claimEl.tween('opacity', 0, 1);	
	},
	/********************************************************************************
	FIN PASO 0
	 ********************************************************************************/
	
	
	/********************************************************************************
	PASO 1: Pocos años grandes cosas
	 ********************************************************************************/
	
	/*
	Aparece el visor y comienza la animación de la flechas
	*/
	paso1: function() {
		this.claimEl.tween('opacity', 1, 0);	
		
		this.claimRotatorPaso1 = new e24ClaimRotatorFx({
			container: this.backEl,
			basePath: 'img/subclaims/',
			left: 500,
			top: 315,
			yearWidth: 71,
			yearHeight: 37,
			claimWidth: 481,
			claimHeight: 37,
			margin: 0,
			yearDelay: this.options.yearDelay,
			claimDelay: this.options.claimDelay,
			claims: [{
				year: '1995.png',
				claim: 'INMOBILIARIA.png'
			}, {
				year: '2001.png',
				claim: 'INFRAESTRUCTURAS.png'
			}, {
				year: '2003.png',
				claim: 'INGENIERIA.png'
			}, {
				year: '2004.png',
				claim: 'ENERGIA.png'
			}, {
				year: '2006.png',
				claim: 'CAPITAL-RIESGO.png'
			}, {
				year: '2007.png',
				claim: 'CONSOLIDACION.png'
			} ],
			onComplete: this.claimGrandePaso1.bind(this)
		});

		this.flechasFx.start([
			{
				x: 105,
				y: 305
			}, {
				x: 485,
				y: 305
			}
		]);
	},

	/*
	 Despues de las flechas del paso1 y comienzan en paralelo la animacion de los puntos y los claims con años
	 */
	fxPuntosPaso1: function() {
		this.puntosFx.destroy();
		this.puntosFx.start([
			{
				x: 485,
				y: 305
			}, {
				x: 485,
				y: 500
			}
		]);		
		this.claimRotatorPaso1.start();
	},
	
	/*
	Después del rotador de claims con años, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso1: function() {
		(function(){
			this.claimRotatorPaso1.destroy(true, this.options.claimDestroyDelay);
			if (this.claimEl) {
				this.claimEl.dispose();
			}
			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 500px;' +
				'top: 295px;' +
				'background: url(img/claims/pocos-anos.png) center no-repeat;' +
				'width: 463px;' +
				'height: 96px;' +
				'visibility: hidden;'
			});
			Browser.fixPNG(this.claimEl);			
			this.backEl.grab(this.claimEl);
			
			this.claimEl.set('tween', {
				duration: this.options.bigClaimDelay,
				onComplete: this.flechasAbajoPaso1.bind(this)
			});
			this.claimEl.tween('opacity', 0, 1);
		}).delay(this.options.bigClaimWait, this);
		
	},
	
	/*
	 Las segundas flechas del paso1 que aparecen despues del claim grande y que lleva al paso2
	*/ 
	flechasAbajoPaso1: function() {
		this.flechasFx.options.onCompleted = this.paso2.bind(this);
		this.flechasFx.start.delay(this.options.bottomArrowsWait, this.flechasFx, [[
			{
				x: 512,
				y: 448
			}, {
				x: 1400,
				y: 448
			}
		]]);
	},
	
	/********************************************************************************
	FIN PASO 1
	 ********************************************************************************/


	/********************************************************************************
	PASO 2: Diferentes por naturaleza
	 ********************************************************************************/
	
	/*
	 Comienza el paso2 con la animacion de flechas
	 */
	paso2: function() {

		this.claimRotatorPaso2 = new e24ClaimRotatorFx({
			container: this.backEl,
			basePath: 'img/subclaims/',
			left: 1780,
			top: 70,
			yearWidth: 300,
			yearHeight: 140,
			claimWidth: 0,
			claimHeight: 0,
			margin: 0,
			yearDelay: 700,
			claimDelay: this.options.claimDelay,
			claims: [{
				year: 'CORDOBA.png',
				claim: ''
			}, {
				year: 'MAS-DE-350-EMPLEADOS.png',
				claim: ''
			}],
			onComplete: this.claimGrandePaso2.bind(this)
		});
		
		
		this.jaceFx.next.delay(this.options.scrollWait, this.jaceFx, [1]);
		this.flechasFx.options.onCompleted = this.fxPuntosPaso2.bind(this);
		
		this.flechasFx.start.delay(this.options.topArrowsWait, this.flechasFx, [[
			{
				x: 1404,
				y: 66
			}, {
				x: 1755,
				y: 66
			}
		]]);
	},
	
	/*
	 Despues de las flechas del paso2 y comienzan en paralelo la animacion de los puntos y los claims con años
	 */
	fxPuntosPaso2: function() {
		
		if (this.fixClaimEl) {
			this.fixClaimEl.dispose();
		}			
		this.fixClaimEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 1414px;' +
			'top: 120px;' +
			'background: url(img/claims/somosunequipo.png) center no-repeat;' +
			'width: 333px;' +
			'height: 177px;' +
			'visibility: hidden;'
		});
		Browser.fixPNG(this.fixClaimEl);			
		this.backEl.grab(this.fixClaimEl);
		this.fixClaimEl.set('tween', {
			duration: this.options.bigClaimDelay
		});
		this.fixClaimEl.tween('opacity', 0, 1);
		
		this.puntosFx.destroy();
		this.puntosFx.start([
			{
				x: 1760,
				y: 66
			}, {
				x: 1760,
				y: 261
			}
		]);		
		this.claimRotatorPaso2.start();
	},
	
	/*
	Después del rotador de claims del paso2, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso2: function() {
		(function(){
			this.claimRotatorPaso2.destroy(true, this.options.claimDestroyDelay);
			if (this.claimEl) {
				this.claimEl.dispose();
			}			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 1780px;' +
				'top: 63px;' +
				'background: url(img/claims/diferentes.png) center no-repeat;' +
				'width: 350px;' +
				'height: 96px;' +
				'visibility: hidden;'
			});
			Browser.fixPNG(this.claimEl);			
			this.backEl.grab(this.claimEl);
			this.claimEl.set('tween', {
				duration: this.options.bigClaimDelay,
				onComplete: this.flechasAbajoPaso2.bind(this)
			});
			this.claimEl.tween('opacity', 0, 1);
		}).delay(this.options.bigClaimWait, this);
	},
	
	/*
	 Las segundas flechas del paso2 que aparecen despues del claim grande y que lleva al paso3
	*/ 
	flechasAbajoPaso2: function() {
		this.flechasFx.options.onCompleted = this.paso3.bind(this);
		this.flechasFx.start.delay(this.options.bottomArrowsWait, this.flechasFx, [[
			{
				x: 1783,
				y: 213
			}, {
				x: 2684,
				y: 213
			}
		]]);
	},
	
	/********************************************************************************
	FIN PASO 2
	 ********************************************************************************/
	
	/********************************************************************************
	PASO 3: Montealto Infraestructuras
	 ********************************************************************************/
	/*
	 Comienza el paso3 con la animacion de flechas
	 */	
	paso3: function() {
		

		this.claimRotatorPaso3 = new e24ClaimRotatorFx({
			container: this.backEl,
			basePath: 'img/subclaims/',
			left: 2780,
			top: 365,
			yearWidth: 141,
			yearHeight: 51,
			claimWidth: 246,
			claimHeight: 204,
			margin: 0,
			yearDelay: 700,
			claimDelay: this.options.claimDelay,
			claims: [{
				year: 'obracivil.png',
				claim: ''
			}, {
				year: 'edificacion.png',
				claim: ''
			}],
			onComplete: this.claimGrandePaso3.bind(this)
		});
		
		
		this.jaceFx.next.delay(this.options.scrollWait, this.jaceFx, [2]);
		this.flechasFx.options.onCompleted = this.fxPuntosPaso3.bind(this);
		
		this.flechasFx.start.delay(this.options.topArrowsWait, this.flechasFx, [[
			{
				x: 2488,
				y: 365
			}, {
				x: 2750,
				y: 365
			}
		]]);		
	},
	
	/*
	 Despues de las flechas del paso3 y comienzan en paralelo la animacion de los puntos y los claims con años
	 */
	fxPuntosPaso3: function() {
		if (this.fixClaimEl) {
			this.fixClaimEl.dispose();
		}			
		this.fixClaimEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 2480px;' +
			'top: 420px;' +
			'background: url(img/logospng/infraestructuras.png) center no-repeat;' +
			'width: 267px;' +
			'height: 138px;' +
			'visibility: hidden;'
		});
		Browser.fixPNG(this.fixClaimEl);			
		this.backEl.grab(this.fixClaimEl);
		this.fixClaimEl.set('tween', {
			duration: this.options.bigClaimDelay
		});
		this.fixClaimEl.tween('opacity', 0, 1);
		
		this.puntosFx.destroy();
		this.puntosFx.start([
			{
				x: 2760,
				y: 365
			}, {
				x: 2760,
				y: 565
			}
		]);		
		this.claimRotatorPaso3.start();
	},
	
	/*
	Después del rotador de claims del paso3, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso3: function() {
		(function(){
			this.claimRotatorPaso3.destroy(true, this.options.claimDestroyDelay);
			
			this.fixClaimEl.tween('opacity', 1, 0);
			
			if (this.claimEl) {
				this.claimEl.dispose();
			}			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 2780px;' +
				'top: 350px;' +
				'background: url(img/claims/MONTEALTO-INFRAESTRUCTURAS.png) center no-repeat;' +
				'width: 625px;' +
				'height: 66px;' +
				'visibility: hidden;'
			});
			Browser.fixPNG(this.claimEl);			
			this.backEl.grab(this.claimEl);
			this.claimEl.set('tween', {
				duration: this.options.bigClaimDelay,
				onComplete: this.flechasAbajoPaso3.bind(this)
			});
			this.claimEl.tween('opacity', 0, 1);
			
			if (this.claimEl2) {
				this.claimEl2.dispose();
			}			
			this.claimEl2 = new Element('div', {
				'style': 'position:absolute;' +
				'left: 2783px;' +
				'top: 440px;' +
				'background: url(img/claims/hacemos-realidad.png) center no-repeat;' +
				'width: 787px;' +
				'height: 37px;' +
				'visibility: hidden;'
			});
			Browser.fixPNG(this.claimEl2);			
			this.backEl.grab(this.claimEl2);
			this.claimEl2.set('tween', {
				duration: this.options.bigClaimDelay
			});
			this.claimEl2.tween('opacity', 0, 1);			

		}).delay(this.options.bigClaimWait, this);
	},
	
	/*
	 Las segundas flechas del paso3 que aparecen despues del claim grande y que lleva al paso4
	*/ 
	flechasAbajoPaso3: function() {
		this.flechasFx.options.onCompleted = this.paso4.bind(this);
		this.flechasFx.start.delay(this.options.bottomArrowsWait, this.flechasFx, [[
			{
				x: 2790,
				y: 518
			}, {
				x: 3772,
				y: 518
			}
		]]);
	},	
	/********************************************************************************
	FIN PASO 3
	 ********************************************************************************/
	
	/********************************************************************************
	PASO 4: Montealto Energía
	 ********************************************************************************/
	/*
	 Comienza el paso4 con la animacion de flechas
	 */	
	paso4: function(){
		

	
		this.claimRotatorPaso4 = new e24ClaimRotatorFx({
			container: this.backEl,
			basePath: 'img/subclaims/',
			left: 1435,
			top: 520,
			yearWidth: 372,
			yearHeight: 50,
			claimWidth: 0,
			claimHeight: 0,
			margin: 0,
			yearDelay: this.options.yearDelay,
			claimDelay: this.options.claimDelay,
			claims: [{
				year: 'fotovoltaica.png',
				claim: ''
			},{
				year: 'termosolar.png',
				claim: ''
			}, {
				year: 'eolica.png',
				claim: ''
			},{
				year: 'biomasa.png',
				claim: ''
			} ],
			onComplete: this.claimGrandePaso4.bind(this)
		});
		
		
		this.jaceFx.next.delay(this.options.scrollWait, this.jaceFx, [3]);
		this.flechasFx.options.onCompleted = this.fxPuntosPaso4.bind(this);
		
		this.flechasFx.start.delay(this.options.topArrowsWait, this.flechasFx, [[
			{
				x: 1110,
				y: 510
			}, {
				x: 1420,
				y: 510
			}
		]]);				
	},

	/*
	 Despues de las flechas del paso4 y comienzan en paralelo la animacion de los puntos y los claims con años
	 */
	fxPuntosPaso4: function() {
		
		if (this.fixClaimEl) {
			this.fixClaimEl.dispose();
		}			
		this.fixClaimEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 1140px;' +
			'top: 570px;' +
			'background: url(img/logospng/energia.png) center no-repeat;' +
			'width: 267px;' +
			'height: 138px;' +
			'visibility: hidden;'
		});
		Browser.fixPNG(this.fixClaimEl);			
		this.backEl.grab(this.fixClaimEl);
		this.fixClaimEl.set('tween', {
			duration: this.options.bigClaimDelay
		});
		this.fixClaimEl.tween('opacity', 0, 1);
		
		
		this.puntosFx.destroy();
		this.puntosFx.start([
			{
				x: 1420,
				y: 510
			}, {
				x: 1420,
				y: 710
			}
		]);		
		this.claimRotatorPaso4.start();
	},
	
	/*
	Después del rotador de claims del paso4, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso4: function() {
		(function(){
			this.claimRotatorPaso4.destroy(true, this.options.claimDestroyDelay);
			
			this.fixClaimEl.tween('opacity', 1, 0);
			
			if (this.claimEl) {
				this.claimEl.dispose();
			}			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 1435px;' +
				'top: 495px;' +
				'background: url(img/claims/MONTEALTO-ENERGIA.png) center no-repeat;' +
				'width: 412px;' +
				'height: 71px;' +
				'visibility: hidden;'
			});
			Browser.fixPNG(this.claimEl);						
			this.backEl.grab(this.claimEl);
			this.claimEl.set('tween', {
				duration: this.options.bigClaimDelay,
				onComplete: this.flechasAbajoPaso4.bind(this)
			});
			this.claimEl.tween('opacity', 0, 1);
			
			if (this.claimEl2) {
				this.claimEl2.dispose();
			}						
			this.claimEl2 = new Element('div', {
				'style': 'position:absolute;' +
				'left: 1438px;' +
				'top: 600px;' +
				'background: url(img/claims/energia-que-nos-hace-crecer.png) center no-repeat;' +
				'width: 433px;' +
				'height: 50px;' +
				'visibility: hidden;'
			});
			Browser.fixPNG(this.claimEl2);						
			this.backEl.grab(this.claimEl2);
			this.claimEl2.set('tween', {
				duration: this.options.bigClaimDelay
			});			
			this.claimEl2.tween('opacity', 0, 1);
			
		}).delay(this.options.bigClaimWait, this);
	},
	
	/*
	 Las segundas flechas del paso4 que aparecen despues del claim grande y que lleva al paso5
	*/ 
	flechasAbajoPaso4: function() {
		this.flechasFx.options.onCompleted = this.paso5.bind(this);
		this.flechasFx.start.delay(this.options.bottomArrowsWait, this.flechasFx, [[
			{
				x: 1445,
				y: 663
			}, {
				x: 2395,
				y: 663
			}
		]]);
	},		
	/********************************************************************************
	FIN PASO 4
	 ********************************************************************************/
	
	/********************************************************************************
	PASO 5: Montealto Inmobiliaria
	 ********************************************************************************/
	/*
	 Comienza el paso5 con la animacion de flechas
	 */	
	paso5: function(){
		
	
		this.claimRotatorPaso5 = new e24ClaimRotatorFx({
			container: this.backEl,
			basePath: 'img/subclaims/',
			left: 2930,
			top: 767,
			yearWidth: 400,
			yearHeight: 37,
			claimWidth: 0,
			claimHeight: 0,
			margin: 0,
			yearDelay: this.options.yearDelay,
			claimDelay: this.options.claimDelay,
			claims: [{
				year: 'primera-residencia.png',
				claim: ''
			}, {
				year: 'segunda-residencia.png',
				claim: ''
			}],
			onComplete: this.claimGrandePaso5.bind(this)
		});
		
		
		this.jaceFx.next.delay(this.options.scrollWait, this.jaceFx, [4]);
		this.flechasFx.options.onCompleted = this.fxPuntosPaso5.bind(this);
		
		this.flechasFx.start.delay(this.options.topArrowsWait, this.flechasFx, [[
			{
				x: 2610,
				y: 767
			}, {
				x: 2900,
				y: 767
			}
		]]);				
	},

	/*
	 Despues de las flechas del paso5 y comienzan en paralelo la animacion de los puntos y los claims con años
	 */
	fxPuntosPaso5: function() {
		
		if (this.fixClaimEl) {
			this.fixClaimEl.dispose();
		}			
		this.fixClaimEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 2632px;' +
			'top: 820px;' +
			'background: url(img/logospng/inmobiliaria.png) center no-repeat;' +
			'width: 267px;' +
			'height: 138px;' +
			'visibility: hidden;'
		});
		Browser.fixPNG(this.fixClaimEl);			
		this.backEl.grab(this.fixClaimEl);
		this.fixClaimEl.set('tween', {
			duration: this.options.bigClaimDelay
		});
		this.fixClaimEl.tween('opacity', 0, 1);
		
		this.puntosFx.destroy();
		this.puntosFx.start([
			{
				x: 2910,
				y: 763
			}, {
				x: 2910,
				y: 965
			}
		]);		
		this.claimRotatorPaso5.start();
	},
	
	/*
	Después del rotador de claims del paso5, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso5: function() {
		(function(){
			this.claimRotatorPaso5.destroy(true, this.options.claimDestroyDelay);
			
			this.fixClaimEl.tween('opacity', 1, 0);//Quito el logo
			
			if (this.claimEl) {
				this.claimEl.dispose();
			}			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 2930px;' +
				'top: 747px;' +
				'background: url(img/claims/MONTEALTO-INMOBILIARIA.png) center no-repeat;' +
				'width: 510px;' +
				'height: 68px;' +
				'visibility: hidden;'
			});
			Browser.fixPNG(this.claimEl);			
			this.backEl.grab(this.claimEl);
			
			this.claimEl.set('tween', {
				duration: this.options.bigClaimDelay,
				onComplete: this.flechasAbajoPaso5.bind(this)
			});
			this.claimEl.tween('opacity', 0, 1);
			
			if (this.claimEl2) {
				this.claimEl2.dispose();
			}			
			this.claimEl2 = new Element('div', {
				'style': 'position:absolute;' +
				'left: 2933px;' +
				'top: 840px;' +
				'background: url(img/claims/vive-con-nosotros.png) center no-repeat;' +
				'width: 350px;' +
				'height: 45px;' +
				'visibility: hidden;'
			});
			Browser.fixPNG(this.claimEl2);						
			this.backEl.grab(this.claimEl2);
			this.claimEl2.set('tween', {
				duration: this.options.bigClaimDelay
			});
			this.claimEl2.tween('opacity', 0, 1);
			
		}).delay(this.options.bigClaimWait, this);
	},
	
	/*
	 Las segundas flechas del paso5 que aparecen despues del claim grande y que lleva al paso6
	*/ 
	flechasAbajoPaso5: function() {
		this.flechasFx.options.onCompleted = this.paso6.bind(this);
		this.flechasFx.start.delay(this.options.bottomArrowsWait, this.flechasFx, [[
			{
				x: 2940,
				y: 920
			}, {
				x: 3892,
				y: 920
			}
		]]);
	},
	/********************************************************************************
	FIN PASO 5
	 ********************************************************************************/
	
	/********************************************************************************
	PASO 6: Montealto Capital Riesgo
	 ********************************************************************************/
	/*
	 Comienza el paso6 con la animacion de flechas
	 */	
	paso6: function(){
		

		this.claimRotatorPaso6 = new e24ClaimRotatorFx({
			container: this.backEl,
			basePath: 'img/subclaims/',
			left: 1640,
			top: 930,
			yearWidth: 321,
			yearHeight: 53,
			claimWidth: 0,
			claimHeight: 0,
			margin: 0,
			yearDelay: this.options.yearDelay,
			claimDelay: this.options.claimDelay,
			claims: [{
				year: 'british.png',
				claim: ''
			}],
			onComplete: this.claimGrandePaso6.bind(this)
		});
		
		
		this.jaceFx.next.delay(this.options.scrollWait, this.jaceFx, [5]);
		this.flechasFx.options.onCompleted = this.fxPuntosPaso6.bind(this);
		
		this.flechasFx.start.delay(this.options.topArrowsWait, this.flechasFx, [[
			{
				x: 1325,
				y: 920
			}, {
				x: 1625,
				y: 920
			}
		]]);				
	},

	/*
	 Despues de las flechas del paso6 y comienzan en paralelo la animacion de los puntos y los claims con años
	 */
	fxPuntosPaso6: function() {
		
		if (this.fixClaimEl) {
			this.fixClaimEl.dispose();
		}			
		this.fixClaimEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 1350px;' +
			'top: 980px;' +
			'background: url(img/logospng/capitalriesgo.png) center no-repeat;' +
			'width: 267px;' +
			'height: 138px;' +
			'visibility: hidden;'
		});
		Browser.fixPNG(this.fixClaimEl);			
		this.backEl.grab(this.fixClaimEl);
		this.fixClaimEl.set('tween', {
			duration: this.options.bigClaimDelay
		});
		this.fixClaimEl.tween('opacity', 0, 1);
	
		
		this.puntosFx.destroy();
		this.puntosFx.start([
			{
				x: 1625,
				y: 920
			}, {
				x: 1625,
				y: 1120
			}
		]);		
		this.claimRotatorPaso6.start();
	},
	
	/*
	Después del rotador de claims del paso6, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso6: function() {
		(function(){
			this.claimRotatorPaso6.destroy(true, this.options.claimDestroyDelay);
			
			this.fixClaimEl.tween('opacity', 1, 0); //Quito el logo
			
			if (this.claimEl) {
				this.claimEl.dispose();
			}			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 1640px;' +
				'top: 905px;' +
				'background: url(img/claims/MONTEALTO-CAPITAL-RIESGO.png) center no-repeat;' +
				'width: 535px;' +
				'height: 65px;' +
				'visibility: hidden;'
			});
			Browser.fixPNG(this.claimEl);						
			this.backEl.grab(this.claimEl);
			this.claimEl.set('tween', {
				duration: this.options.bigClaimDelay,
				onComplete: this.flechasAbajoPaso6.bind(this)
			});
			this.claimEl.tween('opacity', 0, 1);
			
			if (this.claimEl2) {
				this.claimEl2.dispose();
			}			
			this.claimEl2 = new Element('div', {
				'style': 'position:absolute;' +
				'left: 1640px;' +
				'top: 1000px;' +
				'background: url(img/claims/ensenamos-crecer.png) center no-repeat;' +
				'width: 455px;' +
				'height: 37px;' +
				'visibility: hidden;'
			});
			Browser.fixPNG(this.claimEl2);						
			this.backEl.grab(this.claimEl2);
			this.claimEl2.set('tween', {
				duration: this.options.bigClaimDelay
			});
			this.claimEl2.tween('opacity', 0, 1);			
		}).delay(this.options.bigClaimWait, this);
	},
	
	/*
	 Las segundas flechas del paso6 que aparecen despues del claim grande y que lleva al paso7
	*/ 
	flechasAbajoPaso6: function() {
		this.flechasFx.options.onCompleted = this.paso7.bind(this);
		this.flechasFx.start.delay(this.options.bottomArrowsWait, this.flechasFx, [[
			{
				x: 1650,
				y: 1075
			}, {
				x: 2605,
				y: 1075
			}
		]]);
	},
	/********************************************************************************
	FIN PASO 6
	 ********************************************************************************/
		
	/********************************************************************************
	PASO 7: Montealto Ingeniería
	 ********************************************************************************/
	/*
	 Comienza el paso7 con la animacion de flechas
	 */	
	paso7: function(){
		

		this.claimRotatorPaso7 = new e24ClaimRotatorFx({
			container: this.backEl,
			basePath: 'img/subclaims/',
			left: 350,
			top: 835,
			yearWidth: 300,
			yearHeight: 97,
			claimWidth: 0,
			claimHeight: 0,
			margin: 0,
			yearDelay: this.options.yearDelay,
			claimDelay: this.options.claimDelay,
			claims: [{
				year: 'gestion-integral-proyectos.png',
				claim: ''
			}, {
				year: 'arquitectura-y-servicios.png',
				claim: ''
			}, {
				year: 'infraestructuras2.png',
				claim: ''
			}, {
				year: 'energia2.png',
				claim: ''
			}, {
				year: 'i-d-i.png',
				claim: ''
			}],
			onComplete: this.claimGrandePaso7.bind(this)
		});
		
		
		this.jaceFx.next.delay(this.options.scrollWait, this.jaceFx, [6]);
		this.flechasFx.options.onCompleted = this.fxPuntosPaso7.bind(this);
		
		this.flechasFx.start.delay(this.options.topArrowsWait, this.flechasFx, [[
			{
				x: 28,
				y: 825
			}, {
				x: 320,
				y: 825
			}
		]]);				
	},

	/*
	 Despues de las flechas del paso7 y comienzan en paralelo la animacion de los puntos y los claims con años
	 */
	fxPuntosPaso7: function() {
		
		if (this.fixClaimEl) {
			this.fixClaimEl.dispose();
		}			
		this.fixClaimEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 53px;' +
			'top: 885px;' +
			'background: url(img/logospng/ingenieria.png) center no-repeat;' +
			'width: 267px;' +
			'height: 138px;' +
			'visibility: hidden;'
		});
		Browser.fixPNG(this.fixClaimEl);			
		this.backEl.grab(this.fixClaimEl);
		this.fixClaimEl.set('tween', {
			duration: this.options.bigClaimDelay
		});
		this.fixClaimEl.tween('opacity', 0, 1);
		
		this.puntosFx.destroy();
		this.puntosFx.start([
			{
				x: 330,
				y: 825
			}, {
				x: 330,
				y: 1025
			}
		]);		
		this.claimRotatorPaso7.start();
	},
	
	/*
	Después del rotador de claims del paso7, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso7: function() {
		(function(){
			this.claimRotatorPaso7.destroy(true, this.options.claimDestroyDelay);
			
			this.fixClaimEl.tween('opacity', 1, 0); //Quito el logo
			
			if (this.claimEl) {
				this.claimEl.dispose();
			}			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 350px;' +
				'top: 810px;' +
				'background: url(img/claims/MONTEALTO-INGENIERIA.png) center no-repeat;' +
				'width: 465px;' +
				'height: 75px;' +
				'visibility: hidden;'
			});
			Browser.fixPNG(this.claimEl);						
			this.backEl.grab(this.claimEl);
			this.claimEl.set('tween', {
				duration: this.options.bigClaimDelay,
				onComplete: this.flechasAbajoPaso7.bind(this)
			});
			this.claimEl.tween('opacity', 0, 1);
			
			if (this.claimEl2) {
				this.claimEl2.dispose();
			}			
			this.claimEl2 = new Element('div', {
				'style': 'position:absolute;' +
				'left: 350px;' +
				'top: 925px;' +
				'background: url(img/claims/idea-proyectos.png) center no-repeat;' +
				'width: 605px;' +
				'height: 44px;' +
				'visibility: hidden;'
			});
			Browser.fixPNG(this.claimEl2);						
			this.backEl.grab(this.claimEl2);
			this.claimEl2.set('tween', {
				duration: this.options.bigClaimDelay
			});
			this.claimEl2.tween('opacity', 0, 1);			
		}).delay(this.options.bigClaimWait, this);
	},
	
	/*
	 Las segundas flechas del paso7 que aparecen despues del claim grande y que lleva al paso8 que es el mismo de inicio
	*/ 
	flechasAbajoPaso7: function() {
		this.flechasFx.options.onCompleted = this.paso8.bind(this);
		this.flechasFx.start.delay(this.options.bottomArrowsWait, this.flechasFx, [[
			{
				x: 320,
				y: 990
			}, {
				x: 1307,
				y: 990
			}
		]]);
	},
	/********************************************************************************
	FIN PASO 7
	 ********************************************************************************/

	/********************************************************************************
	PASO 8: Regreso al paso1
	 ********************************************************************************/
	/*
	 Comienza el paso8 con la animacion de flechas
	 */	
	paso8: function(){
		this.jaceFx.next.delay(this.options.scrollWait, this.jaceFx, [0]);
		(function(){
			this.puntosFx.destroy();
			if (this.claimEl) {
				this.claimEl.dispose();
			}			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 510px;' +
				'top: 315px;' +
				'background: url(img/claims/NUEVOS-RETOS.png) center no-repeat;' +
				'width: 500px;' +
				'height: 140px;' +
				'visibility: hidden;'
			});
			Browser.fixPNG(this.claimEl);						
			this.backEl.grab(this.claimEl);
			this.claimEl.set('tween', {
				duration: this.options.bigClaimDelay,
				onComplete: undefined//this.flechasAbajoPaso7.bind(this)
			});
			this.claimEl.tween('opacity', 0, 1);
		}).delay(3500, this);		
	}		
});