/*
 e24DiscoverFx (Bubble Images Transition Effect)
	- MooTools version required: 1.2.2
	- MooTools components required: 
		Core: Fx.Transitions, 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 e24DiscoverFx = new Class({

	Implements: [Options, Events],

	options: {
		container: undefined,
		img: 'img/back.jpg',
		width: 775,
		height: 151,
		transition: 'quad:out',
		stepDuration: 1500,
		infinite: false,
		infiniteDelay: 2000,
		initStep: {x:0, w:100}
	},

	initialize: function(options){
		this.setOptions(options);
		
		this.options.container = $(this.options.container);
		this.curStep = 0;
		this.stepsCount = 0;
		this.stop = false;		

		this.width1 = this.options.initStep.x ;
		this.back1El = new Element('div', {
			'style': 'position:absolute;left:0px;top:0px;width:' + this.width1 + 'px;height:' + this.options.height + 'px;overflow:hidden'
		});		
		this.options.container.adopt(this.back1El);	
		var img1El = new Element('img', {
			'src': this.options.img,
			'width': this.options.width,
			'height': this.options.height
		});				
		this.back1El.adopt(img1El);
		this.back1Fx = new Fx.Tween(this.back1El, {duration: this.options.stepDuration, link: 'chain', transition: this.options.transition});


		this.width2 = Math.max(this.options.width - this.options.initStep.x - this.options.initStep.w, 0);
		this.back2El = new Element('div', {
			'style': 'position:absolute;border:none;right:0px;top:0px;width:' + this.width2 + 'px;height:' + this.options.height + 'px;overflow:hidden'
		});		
		this.options.container.adopt(this.back2El);	
		
		var img2El = new Element('img', {
			'src': this.options.img,
			'width': this.options.width,
			'height': this.options.height,
			'style': 'position:absolute;right:0px'
		});				
		this.back2El.adopt(img2El);
		this.back2Fx = new Fx.Tween(this.back2El, {duration: this.options.stepDuration, link: 'chain', transition: this.options.transition, onComplete: this.fxCompleted.bind(this)});
	},

	fxCompleted: function() {		
		this.curStep++;
		
		this.fireEvent('onStep', this.curStep);
		
		if (this.curStep == this.stepsCount) {
			this.fireEvent('onCompleted', this);
			
			if (this.options.infinite && !this.stop) {
				this.start.delay(this.options.infiniteDelay, this, [this.steps]);
			}			
		}
		else {
			var step = this.steps[this.curStep];
			this.back1Fx.options.duration = step.d1;
			this.back2Fx.options.duration = step.d2;
		}
	},
	
	step: function(x, w, d1, d2) {
		if (!this.stop) {
			this.back1Fx.start('width', this.width1, x);		
			this.width1 = x;
			var width2 = Math.max(this.options.width - x - w, 0);
			this.back2Fx.start('width', this.width2, width2);		
			this.width2 = width2;
		}	
	},

	//TODO: esto hay que mejorarlo	
	safeStart: function(steps) {
		var myImages = new Asset.images([this.options.img], {
		    onComplete: function(){        		
				this.start(steps);
		    }.bind(this)
		});
	},
	
	start: function(steps){
		this.curStep = 0;
		this.stop = false;		
		if (steps) {
			this.stepsCount = steps.length;
			this.steps = steps;
			this.back1Fx.options.duration = steps[0].d1;
			this.back2Fx.options.duration = steps[0].d2;	
		}	
		this.steps.each(function(step){
			this.step(step.x, step.w, step.d1, step.d2);
		}, this);
	},

	//TODO: Now it only cancels the infinite loop, but i want it to completly cancel the effect	
	cancel: function() {
		this.stop = true;
		this.back1Fx.Cancel();		
		this.back1Fx.clearChain();				
		this.back2Fx.Cancel();		
		this.back2Fx.clearChain();		
	}	
});