var e24Capital = new Class({

	Implements: [Options],
	
	options: {
		container: undefined,
		imgs: [
			'img/capital/1.png',
			'img/capital/2.png',
			'img/capital/4.png',
			'img/capital/fondo1.jpg',
			'img/capital/fondo2.jpg',
			'img/capital/fondo3.jpg',
			'img/capital/fondo4.jpg',
			'img/capital/logo.png',
			'img/capital/movil.png'
		]				
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.containerEl = $(this.options.container);		
		this.stop = false;
		this.preload();		
	},
	
	cancel: function() {
		this.stop = true;
		this.containerEl.empty();
	},
	
	preload: function() {
		new Asset.images(this.options.imgs, {
			onComplete: function() {
				if (this.stop) return;	
				this.containerEl.empty();
				this.start();
			}.bind(this)
		});
	
	},
	
	start: function() {
		if (this.stop) return;
		this.backEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: 0px;' +
			'background: url(img/capital/fondo1.jpg) center no-repeat;' +
			'width: 1280px;' +
			'height: 250px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.backEl);
		//this.backEl.set('tween', {onComplete: this.paso1.delay(500, this)})
		this.backEl.set('tween', {onComplete: this.paso3.delay(2000, this)})
		this.backEl.tween('opacity', 0, 1);
	},
	
	hide: function(el, callBack) {
		if (this.stop) return;
		el.set('tween', {onComplete: function() {
			el.dispose();
			if (callBack) {
				callBack();
			}
		}.bind(this)});
		el.tween('opacity', 1, 0)
	},

	paso1: function() {
		if (this.stop) return;
		this.paso1El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: 0px;' +
			'background: url(img/capital/movil.png) center no-repeat;' +
			'width: 1280px;' +
			'height: 250px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso1El);
		Browser.fixPNG(this.paso1El);					
		this.paso1El.set('tween', {duration: 1000, onComplete: this.paso2.delay(2000,this)})
		this.paso1El.tween('opacity', 0, 1);
	},
	
	paso2: function() {
		if (this.stop) return;
		this.paso2El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 345px;' +
			'top: 16px;' +
			'background: url(img/capital/2.png) center no-repeat;' +
			'width: 400px;' +
			'height: 200px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso2El);
		Browser.fixPNG(this.paso2El);					
		this.paso2El.set('tween', {duration: 1500, onComplete: this.paso3.delay(2500,this)})
		this.paso2El.tween('opacity', 0, 1);
	},
	
	paso3: function() {
		if (this.stop) return;
		//this.backEl.setStyle('background', 'url(img/capital/fondo2.jpg) center no-repeat');
		this.discoverFx1 = new e24DiscoverFx({
			container: this.containerEl, 
			width: 1280,
			height: 250,		
			initStep: {x:0, w:1280},
			img: 'img/capital/fondo2.jpg', 
			transition: 'quad:out',
			infinite: false
		});
		
		this.discoverFx1.addEvent('onCompleted', function(){
				this.paso4.delay(1000, this);
		}.bind(this));
		
		this.discoverFx1.start([{x:0, w:270, d1:800, d2:800} , {x:500, w:270, d1:800, d2:700} , {x:0, w:0, d1:800, d2:1100}]);
	},
	
	paso4: function() {
		if (this.stop) return;
		//this.hide(this.paso1El);
		//this.hide(this.paso2El);

		this.paso4El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 23px;' +
			'top: 96px;' +
			'background: url(img/capital/1.png) center no-repeat;' +
			'width: 321px;' +
			'height: 53px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso4El);
		Browser.fixPNG(this.paso4El);					
		this.paso4El.set('tween', {duration: 1000, onComplete: this.paso6.delay(2000,this)})
		this.paso4El.tween('opacity', 0, 1);
	},
	/* No hay hotel los patos
	paso5: function() {
		if (this.stop) return;
		this.hide(this.paso4El);

		//this.backEl.setStyle('background', 'url(img/capital/fondo3.jpg) center no-repeat');
		this.discoverFx2 = new e24DiscoverFx({
			container: this.containerEl, 
			width: 1280,
			height: 250,		
			initStep: {x:0, w:1280},
			img: 'img/capital/fondo3.jpg', 
			transition: 'quad:out',
			infinite: false
		});
		
		this.discoverFx2.addEvent('onCompleted', function(){
				this.paso6.delay(2000, this);
		}.bind(this));
		
		this.discoverFx2.start([{x:0, w:270, d1:800, d2:800} , {x:500, w:270, d1:800, d2:700} , {x:0, w:0, d1:800, d2:1100}]);
	},*/
	
	paso6: function() {
		if (this.stop) return;
		this.paso6El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 0px;' +
			'top: 0px;' +
			'background: url(img/capital/fondo4.jpg) center no-repeat;' +
			'width: 1280px;' +
			'height: 250px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso6El);
		Browser.fixPNG(this.paso6El);					
		this.paso6El.set('tween', {duration: 1000, onComplete: this.paso7.delay(2000,this)})
		this.paso6El.tween('opacity', 0, 1);
	},	
	
	paso7: function() {
		if (this.stop) return;
		this.paso7aEl = new Element('div', {
			'style': 'position:absolute;' +
			'left: 586px;' +
			'top: 116px;' +
			'background: url(img/capital/4.png) center no-repeat;' +
			'width: 445px;' +
			'height: 37px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso7aEl);
		Browser.fixPNG(this.paso7aEl);
		
		this.paso7El = new Element('div', {
			'style': 'position:absolute;' +
			'left: 135px;' +
			'top: 30px;' +
			'background: url(img/capital/logo.png) center no-repeat;' +
			'width: 303px;' +
			'height: 161px;' +
			'visibility: hidden;'
		});
		this.containerEl.grab(this.paso7El);
		Browser.fixPNG(this.paso7El);					
		this.paso7aEl.tween('opacity', 0, 1);
		//this.paso7El.set('tween', {duration: 1000, onComplete: this.paso7.delay(2000,this)})
		this.paso7El.tween('opacity', 0, 1);
	}	
		
	
});