/**
 *
 * Routes Online - Tabr.js
 * Copyright © Fluid Creativity 2008
 *
 * Simple Tab functionality - Uses Mootools 1.2dev
 * This is WEB TWO POINT OOOOH.
 *
 */

var Tabr = new Class({

	Implements: [Options, Events],

	currentTab: 0,
	tabs: [],
	el: null,

	options: {
		initialTab: 0,
		tabTitle: '.tabTitle',
		tabContent: '.tabContent',
		tabListClass: 'tabList',
		firstTabClass: 'firstItem', // necessary as IE6 has no :first-child pseudo class
		lastTabClass: 'lastItem' // as above
	},

	initialize: function (el, options) {
		this.el = $(el);
		this.setOptions(options);
		this.buildStruct();
	},

	buildStruct: function () {
		this.el.addClass("active");
		var tabTitles  = this.el.getChildren(this.options.tabTitle).dispose();
		var tabContent = this.el.getChildren(this.options.tabContent);
		var tabList = new Element('ul', { 'class': this.options.tabListClass }).inject(this.el, 'before');
		tabTitles.each(function (tabTitle, i) {
			var className = '';

			if (tabTitle.hasClass('disabled')) className = 'disabled';
			
			if (i == 0) className += ' ' + this.options.firstTabClass;
			else if (i == tabTitles.length - 1) className += ' ' + this.options.lastTabClass;
			var trigger = new Element('li', {
				'class': className,
				'events': { 'click': this.go.bindWithEvent(this, i) }
			}).inject(tabList);
			new Element('a').set('text', tabTitle.get('text')).inject(trigger);
			this.tabs.push({
				trigger: trigger,
				content: tabContent[i]
			});
		}, this);
		this.showTab(this.options.initialTab);
	},

	go: function (event, i) {
		event.stop();
		this.showTab(i);
	},

	nextTab: function () {
		this.showTab(this.currentTab + 1);
	},

	previousTab: function () {
		this.showTab(this.currentTab - 1);
	},

	showTab: function (i) {
		if (i < 0 || i > this.tabs.length - 1 || this.tabs[i].trigger.hasClass('selected')) return;
		if (this.tabs[i].trigger.hasClass('disabled')) return;
		
		this.currentTab = i;

		this.tabs.each(function (tab, j) {
			if (i === j) {
				tab.trigger.addClass('selected');
				tab.content.setStyle('display', 'block');
			} else {
				tab.trigger.removeClass('selected');
				tab.content.setStyle('display', 'none');
			}
		});
		
		this.fireEvent('select', this);
	}

});