var TabNav = new Class({
	Implements: [Events, Options],

	/**
	 * Options
	 */
	options: {
		show: 0,
		list: 'tertiary-nav',
		listId: '1',
		onSelect: function(container) {
			$(container).addClass('on');
			//$(container + '_content').effect('opacity').start(0, 1); // 1) first start the effect
			$(container + '_content').setStyle('display', ''); // 2) then show the element, to prevent flickering
		},
		onDeselect: function(container) {
			$(container).removeClass('on');
			$(container + '_content').setStyle('display', 'none');
		}
	},

	/**
	 * Constructor
	 *
	 * @param {Element} The parent Element that holds the tab elements
	 * @param {Object} Options
	 */
	initialize: function(element, options) {
		this.element = $(element);
		this.setOptions(options);
		this.selected = null;
		this.build();
	},
	
	build: function() {
		this.links = [];
		this.element.getElements('a').each(function(el) {
			if (el.id) { this.addLink(el); }
		}, this);
		
		if (this.links.length) { this.select(this.options.show); }
	},
	
	onClick: function(evt, index) {
		this.select(index);
		return false;
	},
	
	addLink: function(e) {
		var pos = this.links.length;
		var evt = (this.options.hover) ? 'mouseenter' : 'click';
		var link = {
			id: e.id
		}
		
		e.addEvent(evt, this.onClick.bindWithEvent(this, [pos]));
		
		this.links.push(link);
	},
	
	select: function(index) {
		if (this.links[this.selected]) {
			this.fireEvent('onDeselect', this.links[this.selected].id)
		}
		this.fireEvent('onSelect', this.links[index].id);
		this.selected = index;
	}                      
	
});