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',
						
					
		]		
		
	},
	
	initialize: function(options){
		this.setOptions(options);

		this.jaceFx = new e24JaceFx({
			container: this.options.container,
			img: '../img/colage/4.jpg',	
			imgs: [
				{img:'../img/colage/1.jpg', w:633, h:149},	
				{img:'../img/colage/2.jpg', w:1032, h:149},	
				{img:'../img/colage/3.jpg', w:759, h:149},	
				{img:'../img/colage/4.jpg', w:632, h:170},	
				{img:'../img/colage/5.jpg', w:1032, h:170},	
				{img:'../img/colage/6.jpg', w:759, h:170},	
				{img:'../img/colage/7.jpg', w:632, h:149},	
				{img:'../img/colage/8.jpg', w:1032, h:149},	
				{img:'../img/colage/9.jpg', w:759, h:149},	
				{img:'../img/colage/10.jpg', w:632, h:181},	
				{img:'../img/colage/11.jpg', w:1032, h:181},	
				{img:'../img/colage/12.jpg', w:759, h:181},	
				{img:'../img/colage/13.jpg', w:632, h:80},	
				{img:'../img/colage/14.jpg', w:1032, h:80},	
				{img:'../img/colage/15.jpg', w:759, h:80}			
			],		
			width: 2424,
			height: 730,
			initStep: {
				x: 72,
				y: 166
			},
			transition: Fx.Transitions.linear.easeOut,
			stepDuration: 2000,
			infinite: false,
			onReady: this.ready.bind(this),
			onCompleted: function(){
			},
			onStep: function(index){
			}
		});
		this.jaceFx.safeStart([{
			x: 72,
			y: 166
		}, {
			x: 847,
			y: 24
		}, {
			x: 1467,
			y: 204
		}, {
			x: 672,
			y: 293
		}, {
			x: 1572,
			y: 442
		}, {
			x: 797,
			y: 538
		}, {
			x: 24,
			y: 485
		}], 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: 18,
			stepHeight: 27,
			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: 306px;' +
			'top: 189px;' +
			'background: url(../img/claims/NUEVOS-RETOS.png) center no-repeat;' +
			'width: 300px;' +
			'height: 84px;' + 
			'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.flechasFx.start([
			{
				x: 63,
				y: 183
			}, {
				x: 291,
				y: 183
			}
		]);
	},

	/*
	 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: 291,
				y: 183
			}, {
				x: 291,
				y: 300
			}
		]);		
		//this.claimGrandePaso1();
		this.flechasAbajoPaso1();
	},
	
	/*
	Después del rotador de claims con años, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso1: function() {
		(function(){
			if (this.claimEl) {
				this.claimEl.dispose();
			}
			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 310px;' +
				'top: 177px;' +
				'background: url(../img/claims/pocos-anos.png) center no-repeat;' +
				'width: 212px;' +
				'height: 72px;' +
				'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: 307,
				y: 267
			}, {
				x: 840,
				y: 267
			}
		]]);
	},
	
	/********************************************************************************
	FIN PASO 1
	 ********************************************************************************/


	/********************************************************************************
	PASO 2: Diferentes por naturaleza
	 ********************************************************************************/
	
	/*
	 Comienza el paso2 con la animacion de flechas
	 */
	paso2: function() {

		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: 842,
				y: 40
			}, {
				x: 1053,
				y: 40
			}
		]]);
	},
	
	/*
	 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: 848px;' +
			'top: 72px;' +
			'background: url(../img/claims/somosunequipo.png) center no-repeat;' +
			'width: 202px;' +
			'height: 106px;' +
			'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: 1056,
				y: 40
			}, {
				x: 1056,
				y: 157
			}
		]);		
		this.claimGrandePaso2();
	},
	
	/*
	Después del rotador de claims del paso2, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso2: function() {
		(function(){
			if (this.claimEl) {
				this.claimEl.dispose();
			}			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 1074px;' +
				'top: 38px;' +
				'background: url(../img/claims/diferentes.png) center no-repeat;' +
				'width: 210px;' +
				'height: 58px;' +
				'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: 1070,
				y: 128
			}, {
				x: 1610,
				y: 128
			}
		]]);
	},
	
	/********************************************************************************
	FIN PASO 2
	 ********************************************************************************/
	
	/********************************************************************************
	PASO 3: Montealto Infraestructuras
	 ********************************************************************************/
	/*
	 Comienza el paso3 con la animacion de flechas
	 */	
	paso3: function() {
		

		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: 1493,
				y: 219
			}, {
				x: 1650,
				y: 219
			}
		]]);		
	},
	
	/*
	 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: 1488px;' +
			'top: 252px;' +
			'background: url(../img/logospng/infraestructuras.png) center no-repeat;' +
			'width: 160px;' +
			'height: 83px;' +
			'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: 1656,
				y: 219
			}, {
				x: 1656,
				y: 339
			}
		]);		
		this.claimGrandePaso3();		
	},
	
	/*
	Después del rotador de claims del paso3, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso3: function() {
		(function(){
			this.fixClaimEl.tween('opacity', 1, 0);
			
			if (this.claimEl) {
				this.claimEl.dispose();
			}			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 1668px;' +
				'top: 210px;' +
				'background: url(../img/claims/MONTEALTO-INFRAESTRUCTURAS.png) center no-repeat;' +
				'width: 375px;' +
				'height: 40px;' +
				'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: 1670px;' +
				'top: 264px;' +
				'background: url(../img/claims/hacemos-realidad.png) center no-repeat;' +
				'width: 334px;' +
				'height: 22px;' +
				'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: 1674,
				y: 310
			}, {
				x: 2263,
				y: 310
			}
		]]);
	},	
	/********************************************************************************
	FIN PASO 3
	 ********************************************************************************/
	
	/********************************************************************************
	PASO 4: Montealto Energía
	 ********************************************************************************/
	/*
	 Comienza el paso4 con la animacion de flechas
	 */	
	paso4: function(){
		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: 666,
				y: 306
			}, {
				x: 852,
				y: 306
			}
		]]);				
	},

	/*
	 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: 684px;' +
			'top: 342px;' +
			'background: url(../img/logospng/energia.png) center no-repeat;' +
			'width: 160px;' +
			'height: 83px;' +
			'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: 852,
				y: 306
			}, {
				x: 852,
				y: 426
			}
		]);		
		this.claimGrandePaso4();
	},
	
	/*
	Después del rotador de claims del paso4, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso4: function() {
		(function(){
			this.fixClaimEl.tween('opacity', 1, 0);
			
			if (this.claimEl) {
				this.claimEl.dispose();
			}			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 861px;' +
				'top: 297px;' +
				'background: url(../img/claims/MONTEALTO-ENERGIA.png) center no-repeat;' +
				'width: 247px;' +
				'height: 43px;' +
				'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: 863px;' +
				'top: 360px;' +
				'background: url(../img/claims/energia-que-nos-hace-crecer.png) center no-repeat;' +
				'width: 246px;' +
				'height: 23px;' +
				'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.paso6.bind(this);
		this.flechasFx.start.delay(this.options.bottomArrowsWait, this.flechasFx, [[
			{
				x: 867,
				y: 398
			}, {
				x: 1437,
				y: 398
			}
		]]);
	},		
	/********************************************************************************
	FIN PASO 4
	 ********************************************************************************/
	
	/********************************************************************************
	PASO 5: Montealto Inmobiliaria
	 ********************************************************************************/
	/*
	 Comienza el paso5 con la animacion de flechas
	 */	
	paso5: function(){
		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: 1566,
				y: 460
			}, {
				x: 1740,
				y: 460
			}
		]]);				
	},

	/*
	 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: 1579px;' +
			'top: 492px;' +
			'background: url(../img/logospng/inmobiliaria.png) center no-repeat;' +
			'width: 161px;' +
			'height: 83px;' +
			'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: 1746,
				y: 458
			}, {
				x: 1746,
				y: 579
			}
		]);		
		this.claimGrandePaso5();
	},
	
	/*
	Después del rotador de claims del paso5, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso5: function() {
		(function(){
			
			this.fixClaimEl.tween('opacity', 1, 0);//Quito el logo
			
			if (this.claimEl) {
				this.claimEl.dispose();
			}			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 1758px;' +
				'top: 448px;' +
				'background: url(../img/claims/MONTEALTO-INMOBILIARIA.png) center no-repeat;' +
				'width: 306px;' +
				'height: 41px;' +
				'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: 1760px;' +
				'top: 504px;' +
				'background: url(../img/claims/vive-con-nosotros.png) center no-repeat;' +
				'width: 146px;' +
				'height: 23px;' +
				'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: 1764,
				y: 552
			}, {
				x: 2335,
				y: 552
			}
		]]);
	},
	/********************************************************************************
	FIN PASO 5
	 ********************************************************************************/
	
	/********************************************************************************
	PASO 6: Montealto Capital Riesgo
	 ********************************************************************************/
	/*
	 Comienza el paso6 con la animacion de flechas
	 */	
	paso6: function(){
		

		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: 795,
				y: 552
			}, {
				x: 975,
				y: 552
			}
		]]);				
	},

	/*
	 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: 810px;' +
			'top: 588px;' +
			'background: url(../img/logospng/capitalriesgo.png) center no-repeat;' +
			'width: 161px;' +
			'height: 83px;' +
			'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: 975,
				y: 552
			}, {
				x: 975,
				y: 672
			}
		]);		
		this.claimGrandePaso6();
	},
	
	/*
	Después del rotador de claims del paso6, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso6: function() {
		(function(){
			
			this.fixClaimEl.tween('opacity', 1, 0); //Quito el logo
			
			if (this.claimEl) {
				this.claimEl.dispose();
			}			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 984px;' +
				'top: 543px;' +
				'background: url(../img/claims/MONTEALTO-CAPITAL-RIESGO.png) center no-repeat;' +
				'width: 321px;' +
				'height: 39px;' +
				'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: 989px;' +
				'top: 600px;' +
				'background: url(../img/claims/ensenamos-crecer.png) center no-repeat;' +
				'width: 174px;' +
				'height: 23px;' +
				'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: 990,
				y: 645
			}, {
				x: 1563,
				y: 645
			}
		]]);
	},
	/********************************************************************************
	FIN PASO 6
	 ********************************************************************************/
		
	/********************************************************************************
	PASO 7: Montealto Ingeniería
	 ********************************************************************************/
	/*
	 Comienza el paso7 con la animacion de flechas
	 */	
	paso7: function(){
		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: 17,
				y: 495
			}, {
				x: 192,
				y: 495
			}
		]]);				
	},

	/*
	 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: 32px;' +
			'top: 531px;' +
			'background: url(../img/logospng/ingenieria.png) center no-repeat;' +
			'width: 161px;' +
			'height: 83px;' +
			'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: 198,
				y: 495
			}, {
				x: 198,
				y: 615
			}
		]);		
		this.claimGrandePaso7();
	},
	
	/*
	Después del rotador de claims del paso7, se desaparece el ultimo claim y aparece el claim grande
	*/
	claimGrandePaso7: function() {
		(function(){
			
			this.fixClaimEl.tween('opacity', 1, 0); //Quito el logo
			
			if (this.claimEl) {
				this.claimEl.dispose();
			}			
			this.claimEl = new Element('div', {
				'style': 'position:absolute;' +
				'left: 210px;' +
				'top: 486px;' +
				'background: url(../img/claims/MONTEALTO-INGENIERIA.png) center no-repeat;' +
				'width: 279px;' +
				'height: 45px;' +
				'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: 210px;' +
				'top: 555px;' +
				'background: url(../img/claims/idea-proyectos.png) center no-repeat;' +
				'width: 309px;' +
				'height: 23px;' +
				'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: 192,
				y: 594
			}, {
				x: 784,
				y: 594
			}
		]]);
	},
	/********************************************************************************
	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: 306px;' +
				'top: 189px;' +
				'background: url(../img/claims/NUEVOS-RETOS.png) center no-repeat;' +
				'width: 300px;' +
				'height: 84px;' +
				'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);		
	}		
});
