var e24Energia = new Class({

	Implements: [Options],
	
	options: {
		container: undefined,
		imgs: [
			'../img/energia_eng/1.jpg',
			'../img/energia_eng/2.png',
			'../img/energia_eng/3.png',
		//	'../img/energia_eng/5.png',
			'../img/energia_eng/6.png',
		//	'img/energia/7.png',
			'../img/energia_eng/8.png',
			'../img/energia_eng/9.png',
			'../img/energia_eng/10.png',
			'../img/energia_eng/11.png',
			'../img/energia_eng/12.png',
			'../img/energia_eng/m1.png',
			'../img/energia_eng/m2.png',
			'../img/energia_eng/m3.png',
			'../img/energia_eng/m4.png',
			'../img/energia_eng/m5.png',
			'../img/energia_eng/p1.png',
			'../img/energia_eng/p2.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: 0px;' +
			'background: url(../img/energia_eng/1.jpg) center no-repeat;' +
			'width: 775px;' +
			'height: 267px;' +
			'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: 0px;' +
			'top: 0px;' +
			'background: url(../img/energia_eng/2.png) center no-repeat;' +
			'width: 755px;' +
			'height: 151px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso1El);
		Browser.fixPNG(this.paso1El);					
		this.paso1El.set('tween', {onComplete: this.paso2.delay(2500,this)})
		this.paso1El.tween('opacity', 0, 1);
	},
	
	//Del paso 2 nos vamos a las placas fotovoltacaicas paso 5
	paso2: function() {
		this.paso2El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 150px;' +
			'top: 60px;' +
			'background: url(../img/energia_eng/3.png) center no-repeat;' +
			'width: 192px;' +
			'height: 30px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso2El);
		Browser.fixPNG(this.paso2El);					
		this.paso2El.set('tween', {onComplete: this.move.delay(3000,this)})
		this.paso2El.tween('opacity', 0, 1);
	},
	
	move: function() {
		this.hide(this.paso1El);
		this.hide(this.paso2El);

		this.backEl.set('tween', {onComplete: this.paso5.delay(2500,this), duration: 1000})
		this.backEl.tween('top', -90);
	},

	//Pasa a ser el paso5 realmente
	paso3: function() {
		
		this.hide(this.paso5aEl);
		this.hide(this.paso5bEl);
		this.hide(this.paso6El);
		
		this.paso3aEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 300px;' +
			'top: 20px;' +
			'background: url(../img/energia_eng/m1.png) center no-repeat;' +
			'width: 54px;' +
			'height: 85px;' +
			'visibility: hidden;'
		});
		
		this.containerEl.grab(this.paso3aEl);
		Browser.fixPNG(this.paso3aEl);	
		this.paso3aEl.set('tween', {duration: 500})				
		this.paso3aEl.tween('opacity', 0, 1);
		
		this.paso3bEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 360px;' +
			'top: -28px;' +
			'background: url(../img/energia_eng/m2.png) center no-repeat;' +
			'width: 84px;' +
			'height: 132px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso3bEl);
		Browser.fixPNG(this.paso3bEl);	
		this.paso3bEl.set('tween', {duration: 1000});				
		this.paso3bEl.tween('opacity', 0, 1);
		
		this.paso3cEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 90px;' +
			'top: 22px;' +
			'background: url(../img/energia_eng/m3.png) center no-repeat;' +
			'width: 53px;' +
			'height: 83px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso3cEl);
		Browser.fixPNG(this.paso3cEl);	
		this.paso3cEl.set('tween', {duration: 1200});				
		this.paso3cEl.tween('opacity', 0, 1);
		
		this.paso3dEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 180px;' +
			'top: -27px;' +
			'background: url(../img/energia_eng/m4.png) center no-repeat;' +
			'width: 89px;' +
			'height: 131px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso3dEl);
		Browser.fixPNG(this.paso3dEl);	
		this.paso3dEl.set('tween', {duration: 1500});				
		this.paso3dEl.tween('opacity', 0, 1);
		
		this.paso3eEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 468px;' +
			'top: 20px;' +
			'background: url(../img/energia_eng/m5.png) center no-repeat;' +
			'width: 58px;' +
			'height: 85px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso3eEl);
		Browser.fixPNG(this.paso3eEl);	
		this.paso3eEl.set('tween', {onComplete: this.paso4.delay(2500,this),duration: 1700});				
		this.paso3eEl.tween('opacity', 0, 1);
		
	/*	this.paso3El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: -50px;' +
			'background: url(../img/energia_eng/5.png) center no-repeat;' +
			'width: 1280px;' +
			'height: 250px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso3El);
		Browser.fixPNG(this.paso3El);					
		this.paso3El.set('tween', {onComplete: this.paso4.delay(2500,this)})
		this.paso3El.tween('opacity', 0, 1);*/
		
		
		
	},
	
	paso4: function() {
		this.paso4El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 590px;' +
			'top: 60px;' +
			'background: url(../img/energia_eng/6.png) center no-repeat;' +
			'width: 149px;' +
			'height: 30px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso4El);
		Browser.fixPNG(this.paso4El);					
		this.paso4El.set('tween', {onComplete: this.paso7.delay(3000,this)})
		this.paso4El.tween('opacity', 0, 1);
	},
	
	paso5: function() {
		
		
		this.paso5aEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 60px;' +
			'top: 54px;' +
			'background: url(../img/energia_eng/p1.png) center no-repeat;' +
			'width: 177px;' +
			'height: 90px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso5aEl);
		Browser.fixPNG(this.paso5aEl);					
		this.paso5aEl.set('tween', {duration: 700})
		this.paso5aEl.tween('opacity', 0, 1);
		
		this.paso5bEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 225px;' +
			'top: 84px;' +
			'background: url(../img/energia_eng/p2.png) center no-repeat;' +
			'width: 109px;' +
			'height: 40px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso5bEl);
		Browser.fixPNG(this.paso5bEl);					
		this.paso5bEl.set('tween', {onComplete: this.paso6.delay(2500,this),duration:1300});
		this.paso5bEl.tween('opacity', 0, 1);
		
		
		/*
		this.paso5El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: 0px;' +
			'background: url(../img/energia_eng/7.png) center no-repeat;' +
			'width: 1280px;' +
			'height: 250px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso5El);
		Browser.fixPNG(this.paso5El);					
		this.paso5El.set('tween', {onComplete: this.paso6.delay(2500,this)})
		this.paso5El.tween('opacity', 0, 1);*/
	},
	
	paso6: function() {
		this.paso6El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 390px;' +
			'top: 60px;' +
			'background: url(../img/energia_eng/8.png) center no-repeat;' +
			'width: 224px;' +
			'height: 30px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso6El);
		Browser.fixPNG(this.paso6El);					
		this.paso6El.set('tween', {onComplete: this.paso3.delay(3000,this)})
		this.paso6El.tween('opacity', 0, 1);
	},
	
	paso7: function() {
		
		this.hide(this.paso3aEl);
		this.hide(this.paso3bEl);
		this.hide(this.paso3cEl);
		this.hide(this.paso3dEl);
		this.hide(this.paso3eEl);
		this.hide(this.paso4El);
		
		

		this.paso7El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: -9px;' +
			'background: url(../img/energia_eng/9.png) center no-repeat;' +
			'width: 775px;' +
			'height: 151px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso7El);
		Browser.fixPNG(this.paso7El);					
		this.paso7El.set('tween', {onComplete: this.paso8.delay(2500,this)})
		this.paso7El.tween('opacity', 0, 1);
	},
	
	paso8: function() {
		this.paso8El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 60px;' +
			'top: 60px;' +
			'background: url(../img/energia_eng/10.png) center no-repeat;' +
			'width: 203px;' +
			'height: 30px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso8El);
		Browser.fixPNG(this.paso8El);					
		this.paso8El.set('tween', {onComplete: this.paso9.delay(3000,this)})
		this.paso8El.tween('opacity', 0, 1);
	},
	
	paso9: function() {
		this.hide(this.paso7El);
		this.hide(this.paso8El);
		this.paso9El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 72px;' +
			'top: 21px;' +
			'background: url(../img/energia_eng/12.png) center no-repeat;' +
			'width: 159px;' +
			'height: 95px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso9El);
		Browser.fixPNG(this.paso9El);					
		this.paso9El.set('tween', {onComplete: this.paso10.delay(3000,this)})
		this.paso9El.tween('opacity', 0, 1);
	},
	
	paso10: function() {
		this.paso10El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 300px;' +
			'top: 72px;' +
			'background: url(../img/energia_eng/11.png) center no-repeat;' +
			'width: 246px;' +
			'height: 23px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso10El);
		Browser.fixPNG(this.paso10El);					
		//this.paso10El.set('tween', {onComplete: this.paso11.delay(2000,this)})
		this.paso10El.tween('opacity', 0, 1);
	}	
});