/*
 e24ClaimRotatorFx
	- MooTools version required: 1.2.2
	- MooTools components required: 
		Core: Fx.Tween and dependencies
		More: Asset (only if we use safeStart method)

	Changelog:
		- 1.0: First release
*/

/* Copyright: equipo24 S.L.N.E <http://equipo24.com/> - Distributed under MIT License - Keep this message! */

var e24ClaimRotatorFx = new Class({

	Implements: [Chain, Options],

	options: {
		container: undefined,
		basePath: 'img/subclaims/',
		left: 0,
		top: 0,
		yearWidth: 47,
		yearHeight: 21, 
		claimWidth: 400,
		claimHeight: 30, 
		margin: 10,
		yearDelay: 2800,
		claimDelay: 3200,
		claims: []		
	},

	initialize: function(options){
		this.setOptions(options);
		this.container = $(this.options.container);
		this.stepsCount = 0;
		
		this.yearWrapperEl = new Element('div', {
			'style': 	'position:absolute;' + 
						'left: ' + this.options.left + 'px;' +
						'top: ' + this.options.top + 'px;' + 
						'width: ' + this.options.yearWidth + 'px;' + 
						'height: ' + this.options.yearHeight + 'px;' + 
						'overflow:hidden;'
		});				
		this.container.grab(this.yearWrapperEl);									
		this.yearWrapperEl.tween('opacity', 0, 1);
		
		this.yearScrollerEl = new Element('div', {
			'style': 	'position:absolute;' + 
						'top: ' + (-this.options.yearHeight * this.options.claims.length) +  'px;' +
						'left: 0px;' +
						'width: ' + this.options.yearWidth + 'px;' + 
						'height: ' + (this.options.yearHeight * this.options.claims.length) + 'px;'
		});				
		this.yearWrapperEl.grab(this.yearScrollerEl);									
		
		this.claimWrapperEl = new Element('div', {
			'style': 	'position:absolute;' + 
						'left: ' + (this.options.left + this.options.yearWidth + this.options.margin) + 'px;' +
						'top: ' + this.options.top + 'px;' + 
						'width: ' + this.options.claimWidth + 'px;' + 
						'height: ' + this.options.claimHeight + 'px;' + 
						'overflow:hidden;'
		});				
		this.container.grab(this.claimWrapperEl);		
		this.claimWrapperEl.tween('opacity', 0, 1);
									
		this.claimScrollerEl = new Element('div', {
			'style': 	'position:absolute;' + 
			
			
						'top: ' + (-this.options.claimHeight * this.options.claims.length) +  'px;' +
						'left: 0px;' +
						'width: ' + this.options.claimWidth + 'px;' + 
						'height: ' + (this.options.claimHeight * this.options.claims.length) + 'px;'
		});				
		this.claimWrapperEl.grab(this.claimScrollerEl);									
		
		this.options.claims.each(function(claim, index) {
				if (claim.year) {
					var yearEl = new Element('div', {
						'style': 'float:left;' +
						'background: url(' +
						this.options.basePath +
						claim.year +
						') 0 center no-repeat;' +
						'width: ' +
						this.options.yearWidth +
						'px;' +
						'height: ' +
						this.options.yearHeight +
						'px;'
					});
					Browser.fixPNG(yearEl);										
					this.yearScrollerEl.grab(yearEl, 'top');
				}	
				
				var claimLeft = this.options.left + this.options.yearWidth + this.options.margin;
				
				if (claim.claim) {				
					var claimEl = new Element('div', {
						'style': 'float:left;' +
						'background: url(' +
						this.options.basePath +
						claim.claim +
						') 0 center no-repeat;' +
						'width: ' +
						this.options.claimWidth +
						'px;' +
						'height: ' +
						this.options.claimHeight +
						'px;'
					});
					Browser.fixPNG(claimEl);					
					this.claimScrollerEl.grab(claimEl, 'top');					
				}	
				
		}, this);
		
		this.yearScrollerEl.set('tween', {
			duration: this.options.yearDelay,
			onComplete: function(){
				this.callChain();
			}.bindWithEvent(this)
		});	
		
		this.claimScrollerEl.set('tween', {
			duration: this.options.claimDelay,
			onComplete: function(){
				if (this.stepsCount == this.options.claims.length) {
					if (this.options.onComplete) {
						this.options.onComplete();
					}
				}
				(function() { this.callChain()}.delay(1500, this));
				this.stepsCount++;				
			}.bindWithEvent(this)
		});			
		
	},
	
	start: function(){
		for (var i = 0; i <= this.options.claims.length;i++) {	
			this.chain(
				function(index) {
					//this.yearScrollerEl.tween('top', this.options.yearHeight * i);
					this.yearScrollerEl.tween('top', -this.options.yearHeight * this.options.claims.length + this.options.yearHeight * index);
				}.bind(this, [i]),
				function(index) {
					this.claimScrollerEl.tween('top', -this.options.claimHeight * this.options.claims.length + this.options.claimHeight * index);
				}.bind(this, [i])
			);
		}
		this.callChain();
	},
	
	destroy: function(fade, delay) {
		if (fade) {
			this.yearWrapperEl.set('tween', {
				duration: this.options.yearDelay,
				onComplete: function(){
					this.yearWrapperEl.dispose();
				}.bindWithEvent(this)
			});	
			this.yearWrapperEl.tween('opacity', 1, 0);
			
			this.claimWrapperEl.set('tween', {
				duration: delay?delay:2000,
				onComplete: function(){
					this.claimWrapperEl.dispose();
				}.bindWithEvent(this)
			});	
			this.claimWrapperEl.tween('opacity', 1, 0);
			
		}
		else {
			this.yearWrapperEl.dispose();
			this.claimWrapperEl.dispose();
		}
	}
});