var e24Infraestructura = new Class({

	Implements: [Options],
	
	options: {
		container: undefined,
		imgs: [
			'img/infraestructura/1.png',
			'img/infraestructura/2.png',
			'img/infraestructura/3.png',
			'img/infraestructura/4.png',
			'img/infraestructura/5.png',
			'img/infraestructura/8.png',
			'img/infraestructura/fondo.jpg',
			'img/infraestructura/hacemos-realidad.png',
			'img/infraestructura/logo.png',
			'img/infraestructura/puente.png'
		]		
		
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.containerEl = $(this.options.container);		
		this.preload();		
	},
	
	preload: function() {
		new Asset.images(this.options.imgs, {
			onComplete: function() {
				this.containerEl.empty();
				this.start();
			}.bind(this)
		});
	
	},
	
	start: function() {
		this.backEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: -174px;' +
			'background: url(img/infraestructura/fondo.jpg) center no-repeat;' +
			'width: 1280px;' +
			'height: 540px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.backEl);
		this.backEl.set('tween', {onComplete: this.paso1.delay(2000, this)})
		this.backEl.tween('opacity', 0, 1);
	},
	
	hide: function(el, callBack) {
		el.set('tween', {onComplete: function() {
			el.dispose();
			if (callBack) {
				callBack();
			}
		}.bind(this)});
		el.tween('opacity', 1, 0)
	},

	paso1: function() {
		this.paso1El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 394px;' +
			'top: 158px;' + //158px;' +
			'background: url(img/infraestructura/5.png) top no-repeat;' +
			'overflow: hidden;' +
			'visibility: hidden;' +			
			'width: 400px;' +
			'height: 92px;'
		});
		this.containerEl.grab(this.paso1El);
		Browser.fixPNG(this.paso1El);					
		this.paso1El.setStyle('height', 0);
		this.paso1El.set('morph', {duration: 1000, onComplete: this.paso2.delay(2000,this)})
		this.paso1El.morph({
			'height':92,
			'visibility':'visible'
		});
	},
	
	paso2: function() {
		this.paso2El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 150px;' +
			'top: 50px;' +
			'background: url(img/infraestructura/1.png) center no-repeat;' +
			'width: 135px;' +
			'height: 51px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso2El);
		Browser.fixPNG(this.paso2El);					
		this.paso2El.set('tween', {duration: 1000, onComplete: this.paso6.delay(2000,this)})
		this.paso2El.tween('opacity', 0, 1);
	},
	/* Se elimina el paso3
	paso3: function() {
		this.paso3El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 185px;' +
			'top: 60px;' +
			'background: url(img/infraestructura/2.png) center no-repeat;' +
			'width: 207px;' +
			'height: 204px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso3El);
		Browser.fixPNG(this.paso3El);					
		this.paso3El.set('tween', {duration: 1000, onComplete: this.paso6.delay(2000,this)})
		this.paso3El.tween('opacity', 0, 1);
	},*/
	
	paso6: function() {
		this.hide(this.paso1El);
		this.hide(this.paso2El);
	//	this.hide(this.paso3El);

		this.paso6El = new Element('div', {
			'style': 'position:absolute;' +
			'left: -50px;' +
			'top: 250px;' +
			'background: url(img/infraestructura/8.png) center no-repeat;' +
			'width: 813px;' +
			'height: 250px;'
		});
		this.containerEl.grab(this.paso6El);
		Browser.fixPNG(this.paso6El);					
		this.paso6El.set('tween', {duration: 1000, onComplete: this.paso4.delay(2000,this)})
		this.paso6El.tween('top', 0);
	},
	
	paso4: function() {
		this.paso4El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 700px;' +
			'top: 50px;' +
			'background: url(img/infraestructura/3.png) center no-repeat;' +
			'width: 141px;' +
			'height: 47px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso4El);
		Browser.fixPNG(this.paso4El);					
		this.paso4El.set('tween', {duration: 1000, onComplete: this.move.delay(2000,this)})
		this.paso4El.tween('opacity', 0, 1);
	},
/*Se elimina el paso 5
	paso5: function() {
		this.paso5El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 185px;' +
			'top: 60px;' +
			'background: url(img/infraestructura/4.png) center no-repeat;' +
			'width: 246px;' +
			'height: 198px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso5El);
		Browser.fixPNG(this.paso5El);					
		this.paso5El.set('tween', {duration: 1000, onComplete: this.move.delay(2000,this)})
		this.paso5El.tween('opacity', 0, 1);
	},*/
	
	move: function() {
		this.hide(this.paso6El);
		this.hide(this.paso4El);
	//	this.hide(this.paso5El);

		this.backEl.set('tween', {duration: 1000, onComplete: this.paso7.delay(2000,this)})
		this.backEl.tween('top', 0);
	},

	
	paso7: function() {
		this.paso7El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 500px;' +
			'top: 0px;' +
			'background: url(img/infraestructura/puente.png) top no-repeat;' +
			'overflow: hidden;' +
			'visibility: hidden;' +						
			'width: 370px;' +
			'height: 250px;'
		});
		this.containerEl.grab(this.paso7El);		
		Browser.fixPNG(this.paso7El);					
		this.paso7El.setStyle('height', 0);
		
		this.paso7El.set('morph', {duration: 1000, onComplete: this.paso8.delay(2000,this)})
		this.paso7El.morph({
			'height':250,
			'visibility':'visible'
		});
		
	},
	
	paso8: function() {
		this.paso8El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 30px;' +
			'top: 35px;' +
			'background: url(img/infraestructura/logo.png) center no-repeat;' +
			'width: 298px;' +
			'height: 153px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso8El);
		Browser.fixPNG(this.paso8El);					
		this.paso8El.set('tween', {duration: 1000, onComplete: this.paso9.delay(2000,this)})
		this.paso8El.tween('opacity', 0, 1);
	},
	
	paso9: function() {
		this.paso9El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 410px;' +
			'top: 120px;' +
			'background: url(img/infraestructura/hacemos-realidad.png) center no-repeat;' +
			'width: 556px;' +
			'height: 37px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso9El);
		Browser.fixPNG(this.paso9El);					
		//this.paso9El.set('tween', {onComplete: this.paso10.delay(2000,this)})
		this.paso9El.tween('opacity', 0, 1);
	}

});