// JavaScript Document

/* 		HYBRID TABS			Darren			10/03/08
//
//		Just apply a class of 'hybrid-tab' to your tabs, and a class
//		of 'hybrid-tab-content' to your content.
//		Tabs and content can be put in any order for no-javascript mode and will automatically
//		be re-ordered for tabs.
*/

$(function()	{
	// Are there any tabs?
	if($('.hybrid-tab').length > 0)	{
		// Create a new UL for the tabs and stick it in above the first '.hybrid-tab'
		$('<ul></ul>')
			.addClass('hybrid-tab-container')
			.insertBefore($('.hybrid-tab').eq(0));
		// Go through the tabs, adding them to our new UL and removing them from the DOM
		$('.hybrid-tab').each(function()	{
			// Stick a new entry into the tab list
			$('<li></li>')
				.addClass('hybrid-tab')
				.html('<span>' + $(this).html() + '</span>')
				.appendTo($('ul.hybrid-tab-container'));
			// Remove the original
			$(this).remove();
		});
		// Hide all content..
		$('.hybrid-tab-content')
			.css('display', 'none');
		// Loop through these new ones, adding the event to show / hide relevant content
		$('li.hybrid-tab').each(function(i)	{
			$(this).click(function()	{
				$('li.hybrid-tab')
					.removeClass('selected');		// Turn off all tabs....
				$(this)
					.addClass('selected');			// Turn this on...
				$('.hybrid-tab-content')
					.css('display', 'none')			// Hide all content...
					.eq(i).css('display', '');		// Show this content
			});
		});
		$('li.hybrid-tab')
			.eq(0).click();							// Show the first tab
	}
});