var e24Ingenieria = new Class({

	Implements: [Options],
	
	options: {
		container: undefined,
		imgs: [
			'img/ingenieria/fondo.jpg',
			'img/ingenieria/logo.png',
			'img/ingenieria/1.png',
			'img/ingenieria/2.png',
			'img/ingenieria/3.png',
			'img/ingenieria/4.png',
			'img/ingenieria/5.png',
			'img/ingenieria/6.png',
			'img/ingenieria/7.png',
			'img/ingenieria/f2.png',
			'img/ingenieria/f3.png',
			'img/ingenieria/f4.png',
			'img/ingenieria/f5.png',
			'img/ingenieria/f6.png',
			'img/ingenieria/f6a.png',
			'img/ingenieria/f7.png',
			'img/ingenieria/tuerca.jpg'
		]		
		
	},
	
	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: 0px;' +
			'background: url(img/ingenieria/fondo.jpg) center no-repeat;' +
			'width: 1280px;' +
			'height: 250px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.backEl);
		this.backEl.set('tween', {onComplete: this.texto1.bind(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)
	},

	//Project management
	texto1: function() {
		this.texto1El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 40px;' +
			'top: 25px;' +
			'background: url(img/ingenieria/1.png) center no-repeat;' +
			'width: 321px;' +
			'height: 100px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.texto1El);
		Browser.fixPNG(this.texto1El);					
		this.texto1El.set('tween', {onComplete: this.fondo2.delay(1000,this)})
		this.texto1El.tween('opacity', 0, 1);
	},
	
	//Edificio en blanco
	fondo2: function() {
		this.fondo2El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: 0px;' +
			'background: url(img/ingenieria/f2.png) top no-repeat;' +
			'overflow: hidden;' +
			'visibility: hidden;' +						
			'width: 1280px;' +
			'height: 250px;'			
		});
		this.containerEl.grab(this.fondo2El);
		Browser.fixPNG(this.fondo2El);					
		this.fondo2El.setStyle('height', 0);
		
		this.fondo2El.set('morph', {duration: 1500, onComplete: this.texto2.delay(1500, this)})
		//this.fondo2El.tween('top', 250, 0);
		this.fondo2El.morph({
			'height':250,
			'visibility':'visible'
		});
		
	},
	
	//Edificio pintado
	fondo3: function() {
		this.fondo3El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: 0px;' +
			'background: url(img/ingenieria/f3.png) top no-repeat;' +
			'overflow: hidden;' +
			'visibility: hidden;' +						
			'width: 1280px;' +
			'height: 250px;'
		});
		this.containerEl.grab(this.fondo3El);
		Browser.fixPNG(this.fondo3El);					
		this.fondo3El.setStyle('height', 0);		
		this.fondo3El.set('morph', {duration: 1500, onComplete: this.fondo4.delay(2000, this)})
		this.fondo3El.morph({
			'height':250,
			'visibility':'visible'
		});
	},

	//Area de arquitect y servicios
	texto2: function() {
		//this.hide(this.texto1El);
		this.texto2El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 83px;' +
			'top: 130px;' +
			'background: url(img/ingenieria/2.png) center no-repeat;' +
			'width: 260px;' +
			'height: 97px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.texto2El);
		Browser.fixPNG(this.texto2El);					
		this.texto2El.set('tween', {onComplete: this.fondo3.delay(2000, this)})
		this.texto2El.tween('opacity', 0, 1);
	},
	
	//Puente en blanco
	fondo4: function() {
		this.hide(this.texto2El);
		this.fondo2El.dispose();
		this.hide(this.fondo3El);
		this.fondo4El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: 250px;' +
			'background: url(img/ingenieria/f4.png) top no-repeat;' +
			'width: 1280px;' +
			'height: 250px;'
		});
		this.containerEl.grab(this.fondo4El);
		Browser.fixPNG(this.fondo4El);					
		this.fondo4El.set('tween', {duration: 1500, onComplete: this.texto3.delay(2000, this)})
		this.fondo4El.tween('top', 250, 0);
	},

	//Area de infraestructuras
	texto3: function() {
		this.hide(this.texto2El);

		this.texto3El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 83px;' +
			'top: 130px;' +
			'background: url(img/ingenieria/3.png) center no-repeat;' +
			'width: 310px;' +
			'height: 44px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.texto3El);
		Browser.fixPNG(this.texto3El);					
		this.texto3El.set('tween', {onComplete: this.fondo5.delay(2000, this)})
		this.texto3El.tween('opacity', 0, 1);
	},	

	//Puente color
	fondo5: function() {
		this.fondo5El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: 0px;' +
			'background: url(img/ingenieria/f5.png) top no-repeat;' +
			'overflow: hidden;' +
			'visibility: hidden;' +						
			'width: 1280px;' +
			'height: 250px;'
		});
		this.containerEl.grab(this.fondo5El);
		Browser.fixPNG(this.fondo5El);					
		this.fondo5El.setStyle('height', 0);
		
		this.fondo5El.set('tween', {duration: 1000, onComplete: this.texto4.delay(1500, this)})
		this.fondo5El.morph({
			'height':250,
			'visibility':'visible'
		});
	},

	//Area de energia
	texto4: function() {
		this.hide(this.texto3El);
		this.hide(this.fondo5El);
		this.fondo4El.dispose();

		this.texto4El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 96px;' +
			'top: 130px;' +
			'background: url(img/ingenieria/4.png) center no-repeat;' +
			'width: 208px;' +
			'height: 44px;' + 
			'visibility: hidden;'						
		});
		this.containerEl.grab(this.texto4El);
		Browser.fixPNG(this.texto4El);					
		this.texto4El.set('tween', {duration: 1000, onComplete: this.fondo6a.delay(1000, this)})
		this.texto4El.tween('opacity', 0, 1);
	},

	//Paneles solares
	fondo6a: function() {
		this.fondo6aEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 500px;' +
			'top: -30px;' +
			'background: url(img/ingenieria/f6a.png) top no-repeat;' +
			'width: 585px;' +
			'height: 344px;' +
			'visibility: hidden;'			
		});
		this.containerEl.grab(this.fondo6aEl);
		Browser.fixPNG(this.fondo6aEl);					
		this.fondo6aEl.set('tween', {duration: 1000, onComplete: this.fondo6.delay(2500, this)})
		this.fondo6aEl.tween('opacity', 0, 1);
	},

	//Microscopio en blanco
	fondo6: function() {
		this.hide(this.texto4El);
		this.hide(this.fondo6aEl);
		this.fondo6El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: 250px;' +
			'background: url(img/ingenieria/f6.png) top no-repeat;' +
			'width: 1280px;' +
			'height: 250px;'
		});
		this.containerEl.grab(this.fondo6El);
		Browser.fixPNG(this.fondo6El);					
		this.fondo6El.set('tween', {duration: 1500, onComplete: this.texto5.delay(1500, this)})
		this.fondo6El.tween('top', 250, 0);
	},

	//Area de I+D+I
	texto5: function() {
		this.texto5El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 83px;' +
			'top: 120px;' +
			'background: url(img/ingenieria/5.png) center no-repeat;' +
			'width: 180px;' +
			'height: 44px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.texto5El);
		Browser.fixPNG(this.texto5El);					
		this.texto5El.set('tween', {onComplete: this.fondo7.delay(2000, this)})
		this.texto5El.tween('opacity', 0, 1);
	},
		
	//Microscopio a color	
	fondo7: function() {
		this.hide(this.fondo6aEl);

		this.fondo7El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: 0px;' +
			'background: url(img/ingenieria/f7.png) top no-repeat;' +
			'overflow: hidden;' +
			'visibility: hidden;' +						
			'width: 1280px;' +
			'height: 250px;'
		});
		this.containerEl.grab(this.fondo7El);
		Browser.fixPNG(this.fondo7El);					
		this.fondo7El.setStyle('height', 0);
		
		this.fondo7El.set('morph', {duration: 1500, onComplete: this.fondo7a.delay(2000, this)})
		this.fondo7El.morph({
			'height':250,
			'visibility':'visible'
		});
	},

	//Tuerca
	fondo7a: function() {
		this.hide(this.fondo7El);

		this.fondo7aEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: 0px;' +
			'background: url(img/ingenieria/tuerca.jpg) top no-repeat;' +
			'width: 1280px;' +
			'height: 250px;' + 
			'visibility: hidden;'						
		});
		this.containerEl.grab(this.fondo7aEl);
		this.fondo7aEl.set('tween', {duration: 1500, onComplete: this.logo.delay(1500, this)})
		this.fondo7aEl.tween('opacity', 0, 1);
	},

	//Logo
	logo: function() {
		this.hide(this.texto1El);
		this.hide(this.texto4El);
		this.hide(this.texto5El);
		this.hide(this.fondo7El);
		this.fondo6El.dispose();

		this.logoEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 125px;' +
			'top: 25px;' +
			'background: url(img/ingenieria/logo.png) center no-repeat;' +
			'width: 298px;' +
			'height: 159px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.logoEl);
		Browser.fixPNG(this.logoEl);					
		this.logoEl.set('tween', {onComplete: this.texto7.delay(1500, this)})
		this.logoEl.tween('opacity', 0, 1);
	},

	//De tus ideas---
	texto7: function() {
		this.texto7El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 470px;' +
			'top: 110px;' +
			'background: url(img/ingenieria/7.png) center no-repeat;' +
			'width: 515px;' +
			'height: 37px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.texto7El);
		Browser.fixPNG(this.texto7El);					
		//this.texto7El.set('tween', {onComplete: this.fondo7.bind(this)})
		this.texto7El.tween('opacity', 0, 1);
	}
});