/*
 e24JaceFx - Just another cool effect
	- 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 e24JaceFx = new Class({

	Implements: [Options],

	options: {
		container: undefined,
		img: 'img/colage/4.jpg',	
		imgs: [
			{img:'img/colage/1.jpg', w:1044, h:246},	
			{img:'img/colage/2.jpg', w:1704, h:246},	
			{img:'img/colage/3.jpg', w:1252, h:246},	
			{img:'img/colage/4.jpg', w:1043, h:281},	
			{img:'img/colage/5.jpg', w:1704, h:281},	
			{img:'img/colage/6.jpg', w:1253, h:281},	
			{img:'img/colage/7.jpg', w:1043, h:246},	
			{img:'img/colage/8.jpg', w:1704, h:246},	
			{img:'img/colage/9.jpg', w:1253, h:246},	
			{img:'img/colage/10.jpg', w:1043, h:299},	
			{img:'img/colage/11.jpg', w:1704, h:299},	
			{img:'img/colage/12.jpg', w:1252, h:299},	
			{img:'img/colage/13.jpg', w:1043, h:132},	
			{img:'img/colage/14.jpg', w:1704, h:132},	
			{img:'img/colage/15.jpg', w:1253, h:132}			
		],		
		width: 4000,
		height: 1204,
		transition: 'quad:out',
		stepDuration: 1500,
		infinite: false,
		infiniteDelay: 2000,
		initStep: {x:0, y:100},
		onReady: undefined,
		onStep: undefined,
		onCompleted: undefined		
	},

	initialize: function(options){
		this.setOptions(options);
		this.containerEl = $(this.options.container);
		this.curPos = {
			x: -this.options.initStep.x,
			y: -this.options.initStep.y
		};
		this.backEls = new Array();
		this.curStep = 0;
		this.stepsCount = 0;
		this.stop = false;		
				
		this.backEl = new Element('div', {
			'style': 	'position:relative;' + 
						'left:' + this.curPos.x + 'px;' +
						'top:' + this.curPos.y + 'px;' + 
						'width:' +  this.options.width + 'px;' + 
						'height:' + this.options.height + 'px;'
		});				
		this.containerEl.grab(this.backEl);
		
		this.options.imgs.each(function(img) {
			var divEl = new Element('div', {
				'style': 	'float:left;display:block;' + 
							'width:' +  img.w + 'px;' + 
							'height:' + img.h + 'px;'
			});				
			if (img.img) {
				divEl.setStyle('background', 'url(' + img.img + ') no-repeat');
			}
			this.backEl.grab(divEl);
			this.backEls.include(divEl); 
		}, this);
		
		this.backFx = new Fx.Morph(this.backEl, {duration: this.options.stepDuration, link: 'chain', transition: this.options.transition, onComplete: this.fxCompleted.bind(this)});
	},

	fxCompleted: function() {		
		this.curStep++;
		
		if (this.options.onStep) {
			this.options.onStep(this.curStep);
		}
		
		if (this.curStep >= this.stepsCount - 1) {
			if (this.options.onCompleted) {
				this.options.onCompleted();
			}
			
			if (this.options.infinite && !this.stop) {
				this.start.delay(this.options.infiniteDelay, this, [this.steps]);
			}			
		}
		else {
			var step = this.steps[this.curStep];
			if (step.d) {
				this.backFx.options.duration = step.d;
			}
			else {
				this.backFx.options.duration = this.options.stepDuration;
			}	
		}
	},
	

	step: function(step) {
		this.curPos = step;		
		this.backFx.start({
			left: -step.x, 
			top: -step.y
		});		
		/*
		this.backFx.start({
			left: [this.curPos.x, -step.x], 
			top: [this.curPos.y, -step.y]
		});		*/
	},

	safeStart: function(steps, stoped) {
		var myImages = new Asset.images([this.options.img], {
		    onComplete: function(){
        		this.start(steps, stoped);
				if (this.options.onReady) {
					this.options.onReady(this.backEl);
				}				
		    }.bind(this)
		});
	},
			
	start: function(steps, stoped){
		this.curStep = 0;
		this.stop = false;		
		this.stepsCount = steps.length;
		this.steps = steps;
		//this.backFx.options.duration = steps[0].d;
		if (!stoped) {
			steps.each(function(step){
				this.step(step);
			}, this);
		}	
	},
	
	next: function(index) {
		this.curStep = index;
		if (this.curStep < this.stepsCount) {
			this.step(this.steps[index]);
		}	
	},
	
	stop: function() {
		this.stop = true;
		this.backFx.Cancel();
	}	
});