Element.implement({

	makeCollapsible: function(close) {
		this.getFirst().getChildren('h2').addEvent('click', function() {
			this.toggleClass('closed');
		}.bind(this));
		return (close) ? this.addClass('closed') : this;
	},

	/*
	---------------------------------------------------------------------
	MAKE TABS
	---------------------------------------------------------------------
	Turns the elements into tabs to show and hide content with
	---------------------------------------------------------------------
	*/
	makeTabbed: function(show)	{
		this.getParent().addClass('tabContainer');
		var tabs = this.getElements('LI A'); // added href for keyboard navigation
		var contents = this.getAllNext('.tabcontent').slice(0, tabs.length);
		tabs.each(function(tab, i)	{
			tab.addEvent('click', function(e)	{ // added e to cancel default browser behaviour
				e.stop();
				tabs.getParent().removeClass('selected')[i].addClass('selected');
				$$(contents).removeClass('selected')[i].addClass('selected');
			});
		});
		if($defined(show))	tabs[show].fireEvent('click');
		return this;
	},

	/*
	---------------------------------------------------------------------
	CHANGE INTO TABS
	---------------------------------------------------------------------
	Changes a series of lists with headings into a tabbed block
	---------------------------------------------------------------------
	*/
	changeIntoTabs: function(selector)	{
		var tabs = this.getElements('.active_block > H2');
		var blocks = this.getElements('.active_block');
		var tabContainer = new Element('DIV').addClass('tab_block').set('html', '<ul></ul>').inject(this, 'top');
		tabs.each(function(tab, i)	{
			new Element('LI').grab(tab).inject(tabContainer.getElement('UL'));
			tab.addEvent('click', function()	{
				blocks.setStyle('display', 'none');
				blocks[i].setStyle('display', '');
				tabs.getParents().each(function(el)	{
					el.removeClass('selected');
				});
				this.getParent().addClass('selected');
			});
		});
		if($defined(selector))
			this.getElement(selector).fireEvent('click');
		else
			tabs[0].fireEvent('click');
		return this;
	},

	/*
	---------------------------------------------------------------------
	SET AS LOADING
	----------------------------------------------------------------------
	Allows you to define an element as loading. A div with a class of
	'loading' will be absolutely positioned above the element.
	---------------------------------------------------------------------
	*/
	setAsLoading: function()	{
		var loadingElement = this.retrieve('abacus:ui:loading');
		if(!$defined(loadingElement))	{
			loadingElement = new Element('DIV');
			this.store('abacus:ui:loading', loadingElement);
		}
		loadingElement.setStyles(this.getCoordinates()).setStyles({
			position: 'absolute',
			opacity: 0.7
		}).addClass('loading').addClass('ajax_loading_white').inject(document.id(document.body));
		return this;
	}

});

window.addEvent('domready', function() {
	$$('.panel').makeCollapsible();
	$$('.tabs').makeTabbed();
});