/* JS degradating tab switcher

	Initial structure of:

	<div class="tS container">
		<div class="tS content selected" id="ID1">
			<h2 class="tS title">Local file</h2>
			-- content 1 --
		</div>

		<div class="tS content" id="ID2">
			<h2 class="tS title">Remote URL</h2>
			-- content 2 --
		</div>
	</div>

	Will be converted to:

	<div class="tS container">
		<ul class="tS header">
			<li class="selected"><a rel="ID1">Local file</a></li>
			<li><a rel="ID2">Remote URL</a></li>
		</ul>

		<div class="tS content selected" id="ID1">
			-- content 1 --
		</div>

		<div class="tS content" id="ID1">
			-- content 2 --
		</div>
	</div>
*/


TabSwitcher = {
	init: function(count) {
		// no prototype loaded - wait for 5 seconts trying every 0.5 sec - then fail
		if(typeof Prototype != 'object' && count < 10) {
			window.setTimeout(TabSwitcher.init, 500, ++count);
			return;
		}

		if(typeof Prototype == 'object') {
			// for each found tab object remake it for tabs
			Event.observe(window, 'load', function() {
				$$('div.tS.container').each(TabSwitcher.remake);
			});

		} else {
			alert('TabSwitcher requires Prototype 1.6 to be loaded');
		}
	},

	remake: function(container) {
		var header = new TabSwitcher.header(container);

		container.select('.tS.title').each(function(titleElement) {

			// get first parent wich rule .tS.content - it'll be our target
			var tsContent = titleElement.up('.tS.content');

			// return when cant get proper structure
			if(tsContent == null || typeof tsContent == 'undefined')
				return;

			// create new tab entry
			header.addTab(
				titleElement.firstChild.nodeValue,
				tsContent.id,
				tsContent.hasClassName('selected')
			);

			// remove title element
			titleElement.remove();
		});
	},

	header: function(container) {
		this.ul = $(container.insertBefore(document.createElement('ul'),container.firstChild));
		this.ul.addClassName('tS header');

		this.addTab = function(tabName,tabTarget,tabSelected) {
			var tab	= $(this.ul.appendChild(document.createElement('li')));

			var a = $(tab.appendChild(document.createElement('a')));
				a.appendChild(document.createTextNode(tabName));
				a.setAttribute('rel',tabTarget);

			// add selected class
			if(tabSelected == true) tab.addClassName('selected');

			// observe tab click
			a.observe('click',TabSwitcher.handleTabClick);
		}
	},

	handleTabClick: function(ev) {
		// stop click event
		ev.stop();

		// get required objects
		var tabClicked	 = ev.element();
		var tabPreviuous = $(tabClicked.up('.tS.container')).down('.tS.header li.selected a');

		// remove selected mark from previous tab and content
		tabPreviuous.up('li').removeClassName('selected');
		$(tabPreviuous.rel).removeClassName('selected');

		// add selected class to current tab and content
		tabClicked.up('li').addClassName('selected');
		$(tabClicked.rel).addClassName('selected');
	}
}

/* init... */
TabSwitcher.init(0);