var AjaxTabs = Class.create();
AjaxTabs.prototype =
{
	// Constructor
	initialize: function(tabs, panes, activepane)
	{
		this.tabs = $A($(tabs).getElementsByTagName('li'));
		this.panes = $A($(panes).getElementsByTagName('li'));
		this.activepane = activepane;

		this.inRequest = false;

		var name;
		this.tabs.each(function(node)
		{
			name = node.id.substring(node.className.indexOf('-')+1);

			node.onclick = function (name)
			{
				if(window.event)
					Event.stop(window.event);

				if (!this.inRequest)
					this.tabselect(name);

				return false;
			}.bind(this, name);
		}.bind(this));
	},

	tabselect: function(name)
	{
		tab = $('tab-'+name);

		this.tabs.each(function(node)
		{
			if (node.id == tab.id) {
			  tab.className='tab-selected';
			} else {
			  node.className='tab-unselected';
			};
		});

		this.paneselect(name);
	},

	paneselect: function(name)
	{
		pane = $('pane-'+name);
		this.activepane = name;

		if (pane.innerHTML=='')
		{
			this.inRequest = true;

			// load contents by ajax and rerun function when done
  			this.paneload(pane.attributes.url.value, function(request){this.paneselect(name)}.bind(this));
		}

		this.inRequest = false;

		this.panes.each(function(node)
		{
			if (node.id == pane.id)
				pane.className='tabpane-selected';
			else
				node.className='tabpane-unselected';
		});
	},

	paneload: function (url, onComplete)
	{
		return new Ajax.Updater($('pane-'+this.activepane), url, {asynchronous:1, onComplete:onComplete});
	}
}