/**
 *  Javascript Navigation
 */

var Navigator = new Class({
	classBackButton: 'navigator-back-button',
	classForwardButton: 'navigator-forward-button',
	classInput: 'navigator-input',
	container: null,
	elements: [],
	input: null,
	left: 0,
	right: 2,

	initialize: function(container) {
		this.container = container;
		this.container.setStyle('overflow', 'hidden');
		$$('#' + this.container.id + ' .' + this.classBackButton)[0].addEvent('click', this.previous.bind(this) );
		$$('#' + this.container.id + ' .' + this.classForwardButton)[0].addEvent('click', this.next.bind(this) );
		$$('#' + this.container.id + ' .navigator-element').each(function(el) {
			el.addEvent('click', function() { this.select(el); }.bind(this) );
			this.elements.push(el);
		}.bind(this));
		this.hideAll();

		var inputs = $$('#' + this.container.id + ' .' + this.classInput);
		if (inputs.length > 0) {
			this.input = inputs[0];
			var preSelected = this.input.value;
			if (preSelected) {
				var preSelectedNSed = 'navigator-' + preSelected;
				if ($(preSelectedNSed)) {
					this.select($(preSelectedNSed));
				} else if ($(preSelected)) {
					this.select($(preSelected));
				}
			} else {	// select the first one
				this.select(this.elements[0]);
			}
		}
	},

	next: function() {
		var nextItem = this.right + 1;
		if (nextItem >= this.elements.length) return;
		var el = this.elements[nextItem];
		var elWidth = el.getSize().size.x + el.getStyle('marginLeft').toInt() + el.getStyle('marginRight').toInt();
		var parent = el.getParent();
		var leftOffset = this.calculateLeftOffset();
		var effect = new Fx.Style(parent, 'left', { duration: 200 } );
		effect.start(leftOffset, leftOffset - elWidth);
		this.left++;
		this.right++;
	},


	previous: function() {
		var nextItem = this.left - 1;
		if (nextItem < 0) return;
		var el = this.elements[nextItem];
		var elWidth = el.getSize().size.x + el.getStyle('marginLeft').toInt() + el.getStyle('marginRight').toInt();
		var parent = el.getParent();

		var leftOffset = this.calculateLeftOffset();
		var effect = new Fx.Style(parent, 'left', { duration: 200 } );
		effect.start(leftOffset, leftOffset + elWidth);
		this.left--;
		this.right--;
	},

	calculateLeftOffset: function() {
		var left = 0;
		for (var i = 0; i < this.left; i++) {
			left -= this.elements[i].getSize().size.x;
			left -= this.elements[i].getStyle('marginLeft').toInt();
			left -= this.elements[i].getStyle('marginRight').toInt();
		}
		return left;
	},


	select: function(el) {
		this.hideAll();
		if (el.getProperty('rel') != '') {
			var contentId = el.getProperty('rel');
			$(contentId).setStyle('display', 'block');
		}
		el.addClass('selected');
		if (el.id && this.input) {
			this.input.value = (el.id.substr(0, 10) == 'navigator-' ? el.id.substring(10) : el.id);
		}
	},

	hideAll: function() {
		this.elements.each( function(el) {
			if (el.getProperty('rel')) {
				var contentId = el.getProperty('rel');
				$(contentId).setStyle('display', 'none');
			}
			el.removeClass('selected');
		});
	}

});

window.addEvent('domready', function() {
	$$('.navigator').each(function(container) {
		new Navigator(container);
	});
});