var GTSteps = new Class({
	Implements: [Options, Events],
	options: {
		boxSelector: 'li img',
		startStep: 2
	},
	initialize: function(boxHolder, options) {
		this.setOptions(options);
		this.boxHolder = $$(boxHolder)[0];
		this.boxes = this.boxHolder.getElements(this.options.boxSelector);
		this.currentStep = this.options.startStep.limit(1, this.boxes.length);
		this.activeBox = this.boxes[(this.currentStep - 1)];
		this.animationDone = true;
		this.prepareContainers();
	},
	// public
	showNext: function() {
		this.show(this.currentStep + 1);
	},
	// public
	showPrev: function() {
		this.show(this.currentStep - 1);
	},
	// private
	prepareContainers: function() {
		this.boxes.each(function (box, key, array) {
			this.addBoxEvents(box);
		}, this);
	},
	// private
	show: function(passedStep) {
		var step = (passedStep.toInt()).limit(1, this.boxes.length);
		if (!$type(step)) step = 1;
		var currentBox = this.boxes[(step - 1)];
		var transitionType = (this.currentStep > step) ? 'prev' : 'next';

		if (this.activeBox == currentBox) return;

		if (this.animationDone) {
			this.animationDone = false;
			this.currentStep = step;
			
			$('stagePrev').removeClass('inactive');
			$('stageNext').removeClass('inactive');
			if (1 === step) {
				$('stagePrev').addClass('inactive');
			}
			if (this.boxes.length === step) {
				$('stageNext').addClass('inactive');
			}
			
			if (this.activeBox) {
				if ('prev' === transitionType) {
					this.activeBox.fireEvent('hidePrev', [this.activeBox, currentBox]);
				} else {
					this.activeBox.fireEvent('hideNext', [this.activeBox, currentBox]);
				}
			}

			if ('prev' === transitionType) {
				currentBox.fireEvent('showPrev', [currentBox, this.activeBox]);
			} else {
				currentBox.fireEvent('showNext', [currentBox, this.activeBox]);
			}

			this.activeBox = currentBox;
		}
	},
	// private
	addBoxEvents: function(box) {
		box.addEvents({
			showNext: function() {
				var elem = arguments[0];
				elem.set('morph', {
						duration: 'normal',
						onComplete: function() {
							this.animationDone = true;
							elem.set('class', 'mainPos');
						}.bind(this)
					});
				elem.morph('.mainPos');
			}.bind(this),
			showPrev: function() {
				var elem = arguments[0];
				elem.set('morph', {
						duration: 'normal',
						onComplete: function() {
							this.animationDone = true;
							elem.set('class', 'mainPos');
						}.bind(this)
					});
				elem.morph('.mainPos');
			}.bind(this),
			hideNext: function() {
				var elem = arguments[0];
				elem.set('morph', {
						duration: 'normal',
						onComplete: function() {
							this.animationDone = true;
							elem.set('class', 'prevPos');
						}.bind(this)
					});
				elem.morph('.prevPos');
			}.bind(this),
			hidePrev: function() {
				var elem = arguments[0];
				elem.set('morph', {
						duration: 'normal',
						onComplete: function() {
							this.animationDone = true;
							elem.set('class', 'nextPos');
						}.bind(this)
					});
				elem.morph('.nextPos');
			}.bind(this)
		});
	},
	// public
	toElement: function() {
		return this.activeStep;
	}
});