/**
 * Tabr.js
 * Copyright (c) Fluid Creativity, 2009
 *
 * Allows structured content to be displayed using tabs
 */

var Tabr = new Class({

	Implements: [Options, Events],

	tabs: [],
	el: null,
	currentTab: 0,
	
	options: {
		initialTab: 0,
		removeOriginalTitles: true,
		tabListPosition: 'before', // Where the tabs are positioned
		tabTitle: '.tabTitle', // Selector to use to retrieve titles
		tabContent: '.tabContent', // Selector to use to retrieve contents
		tabListClass: 'tabList', // CSS Class for the tab list
		firstTabClass: 'firstItem', // CSS class for the first tab
		lastTabClass: 'lastItem', // CSS class for the last tab
		selectedClass: 'selected' // CSS class for the selected tab
	},

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

	buildStruct: function() {
		var tabTitles  = this.el.getElements(this.options.tabTitle);
		var tabContent = this.el.getElements(this.options.tabContent);
		
		if (this.options.removeOriginalTitles) tabTitles.dispose();
		
		var tabList = new Element('ul', { 'class': this.options.tabListClass }).inject(this.el, this.options.tabListPosition);
		
		tabTitles.each(function(tabTitle, i) {
			var className = null;
			
			if (i == 0) {
				className = this.options.firstTabClass;
			} else if (i == tabTitles.length - 1) {
				className = this.options.lastTabClass;
			}
			
			var trigger = new Element('li', { 'class': className }).inject(tabList);
			
			trigger.adopt(
				new Element('a', { href: '#' }).addEvent('click', this.go.bindWithEvent(this, i)).adopt(
					new Element('span', { 'text': tabTitle.get('text') })
				)
			);
			
			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(this.options.selectedClass)) return;
		
		this.currentTab = i;

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