var TabView = Class.create();

function createElement(tag, options)
{
	var elem = Element.extend(document.createElement(tag));
	Object.extend(elem, options);

	return elem;
}

TabView.prototype = Object.extend(createElement('div'), {
	_tabs: undefined,
	_parent: undefined,
	_tabbar: undefined,
	_tabcont: undefined,

	_curtab: undefined,

	initialize: function(parent, options) {
		Object.extend(this, options);

		this._tabs = new Array();

		this._parent = parent;
		this._parent.appendChild(this);

		this.className = "tab-view-container";

		this._tabbar = createElement('div', { className: 'tab-bar' });

		// FIXME: code seems to be ignoring the css?
		this._tabbar.style.height = "24px";

		this.appendChild(this._tabbar);

		this._tabcont = createElement('div', { className: 'tab-container' });

		this.appendChild(this._tabcont);

   },

	addTab: function(tab) {
		this._tabs.push(tab);

		this._tabcont.appendChild(tab.contentElement());
		this._tabbar.appendChild(tab.buttonElement());

		tab.setTabView(this);
		this.raiseTab(tab);
		
	},

	onResize: function() {
		this._tabcont.style.height = (parseInt(this.style.height) - parseInt(this._tabbar.style.height) + 4) + "px";
		//for(var i = 0; i < _tabs.length; i++) {
		//	_tabs[i].contentElement().style.height = (parseInt(_tabcont.style.height) - parseInt(_tabbar.style.height)) + "px";
		//}
	},

	raiseTab: function(tab) {
		if(typeof(tab) == 'number') {
			tab = _tabs[tab];
		}

		if(!tab) {
			return;
		}

		if(typeof(this._curtab) == 'object') {
			this._curtab.contentElement().addClassName('hidden');
			this._curtab.buttonElement().removeClassName('tab-active');
		}

		this._curtab = tab;
		//debug(tab.inspect());
		tab.contentElement().removeClassName('hidden');
		tab.buttonElement().addClassName('tab-active');
	}
});

TabView.Tab = Class.create();
TabView.Tab.prototype = Object.extend(Element, {
	_button: undefined,
	_tcontent: undefined,
	_view: undefined,

	initialize: function(title) {
		this._button = createElement('span', { className: 'tab-button' });
		this._button.innerHTML = title;

		Event.observe(this._button, 'click', this.onButtonClick.bindAsEventListener(this));

		this._tcontent = createElement('span', { className: 'tab-content hidden' });
   },

	buttonElement: function() { return this._button; },
	contentElement: function() { return this._tcontent; },

	onButtonClick: function(event) {
		var elem = Event.element(event);
		if(this._view) {
			this._view.raiseTab(this);
		}
   },

	// private:
	setTabView: function(tv) { this._view = tv; }
});

// And later:

var tabview = new TabView();