/*
 e24WalkerFx
	- 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 e24WalkerFx = new Class({

	Implements: [Chain, Options],

	options: {
		container: undefined,
		basePath: 'img/arrows/',
		images: {
			'up': 'left.png',
			'right': 'left.png',
			'down': 'left.png',
			'left': 'left.png'
		},
		stepWidth: 57,
		stepHeight: 89,
		stepDelay: 800,
		stepDuration: 1000,
		tailDelay: 300,
		longSteps: true,
		startPos: {
			'x': 0,
			'y': 0,
			'dir': 'right'
		},
		onCompleted: undefined				
	},

	initialize: function(options){
		this.setOptions(options);
		this.options.container = $(this.options.container);
		this.stack = [];
		this.els = new Array();
		this.curPos = {
			x: this.options.startPos.x,
			y: this.options.startPos.y
		};

	},


	addStepImg: function(x, y, dir) {
		var imgPath = this.options.basePath + this.options.images.left;
		switch (dir) {
			case 'up':
				imgPath = this.options.basePath + this.options.images.up;
			break;
			case 'right':
				imgPath = this.options.basePath + this.options.images.right;
			break;
			case 'down':
				imgPath = this.options.basePath + this.options.images.down;
			break;
			case 'left':
				imgPath = this.options.basePath + this.options.images.left;
			break;
		}
		
		var imgEl;
		imgEl = new Element('div', {
			'style': 'background: url(' + imgPath + ') no-repeat;width:' + this.options.stepWidth+ 'px;height:' + this.options.stepHeight + 'px;position:absolute;left:' + x + 'px;top:' + y + 'px;visibility:hidden;'
		});		
		Browser.fixPNG(imgEl);							
		this.options.container.grab(imgEl, 'top');	
		
		
		
		this.els.include(imgEl);
		return imgEl;
	},
	
	calcDir: function(x, y) {
		if (this.curPos.x == x && this.curPos.y <= y)	return 'down';
		if (this.curPos.x == x && this.curPos.y > y)	return 'up';
		if (this.curPos.y == y && this.curPos.x <= x)	return 'left';
		if (this.curPos.y == y && this.curPos.x > x)	return 'right';
	},

	step: function(step) {
		this.curStepEl = this.addStepImg(step.x, step.y, this.calcDir(step.x, step.y));
		this.curPos = step;

		this.curStepEl.set('tween', {
			duration: this.options.stepDuration,
			link: 'chain',
			onComplete: function(el){
				if (el.retrieve('status', 0) != 1) {
					el.store('status', 1);
				}
				else {
					//el.dispose();
				}
			}.bindWithEvent(this, [this.curStepEl])
		});	
			
			
		this.curStepEl.tween('opacity', 0, 1);		
		this.curStepEl.tween('visibility', 'visible');		
		if (this.options.tailDelay > 0) {
			(function(el){
				el.tween('opacity', 1, 0);

			}).delay(this.options.tailDelay, this, this.curStepEl);
		}	
	},
	
	nextStep: function() {
		if (this.curStep < this.stack.length) {
			var step = this.stack[this.curStep];
			this.step(step);
			this.curStep++;			
		}	
		else {
			$clear(this.timer);
			if (this.options.onCompleted) {
				this.options.onCompleted();
			}			
		}
		
	},
	
	start: function(steps){
		this.stack = [];
		for (var i = 0; i < steps.length;i++) {	
			var step = steps[i];
			if (this.options.longSteps) {
				var nextStep = (i < steps.length - 1) ? steps[i + 1] : undefined;
				if (nextStep && step.x == nextStep.x) {
					for (var j = 0; j < Math.floor((nextStep.y - step.y) / this.options.stepHeight); j++) {
						this.stack.include({
							x: step.x,
							y: (j * this.options.stepHeight + step.y)
						});
					}
				}
				else 
					if (nextStep && step.y == nextStep.y) {
						for (var j = 0; j < Math.floor((nextStep.x - step.x) / this.options.stepWidth); j++) {
							this.stack.include({
								y: step.y,
								x: (j * this.options.stepWidth + step.x)
							});
						}
					}
			}
			else {
				this.stack.include(step);
			}	
		}
		this.curStep = 0;
		this.timer = this.nextStep.periodical(this.options.stepDelay, this);
	},
	
	destroy: function() {
		this.els.each(function(el) {
			if (el) {
				el.dispose();
			}
		}, this);
		this.els.empty();
	}
});