hydroscand = {}

// summary
// initTabNavigation
// Initalizes tabs
// /summary
// params
// containerSelector: (string) selector of element that contains the tabs
// contentSelector: (string) selector that matches all tab elements
// contentIdPrefix: (string) id prefix of respective tab element, e.g. an given an id of "foo1" the id prefix is "foo"
// headingSelector: (string) selector that matches the heading inside a tab
// showHeadings: (bool) show/hide the heading elements inside the tab elements
// /params
hydroscand.initTabNavigation = function(containerSelector, contentSelector, contentIdPrefix, headingSelector, showHeadings)
{
	var hasSelected = false;
	var $list = $(document.createElement('ul')); // The navigation list.
	var navigationElementId = contentIdPrefix + '-tabnav';

	$list.attr('id', navigationElementId);
	$list.addClass('clearbox tabnav');

	$(contentSelector).each(function(j)
	{
		var selected = $(this).hasClass('selected');
		var currentContentId = $(this).attr("id");

		$(this).find(headingSelector).each(function(i)
		{
			var $item = $(document.createElement('li'));
			var $link = $(document.createElement('a'));
			var $span = $(document.createElement('span'));
			var $span2 = $(document.createElement('span'));

			var text = $(this).attr('title'); // Get the title attribute from the heading element.

			// If the title attribute is missing, get the text content.
			if (text == '')
			{
				text = $(this).text();
			}
			
			// Add id attribute to li element
			if(currentContentId.match(/\d{1,}\.{0,}\d{0,}/))
			{
				$item.attr('id', navigationElementId + currentContentId.match(/\d{1,}\.{0,}\d{0,}/));
			}	
			if (selected)
			{
				$item.addClass('selected');
			}

			$span.text(text);
			$link.attr('href', '#' + currentContentId);

			// Bind a function to each of the a elements click event.
			$link.bind('click', { currentContentId: currentContentId }, function(e)
			{
				$(contentSelector).hide(); // Hide all content elements.
				$('#' + e.data.currentContentId).show(); // Show the content element that corresponds to the clicked a element.
				$('#' + navigationElementId + ' > li').removeClass('selected'); // Remove the 'selected' class from all of the navigation links.
				$(this).parent(0).addClass('selected'); // And add it to the one that was clicked.
				return false;
			});

			$span2.append($span);
			$link.append($span2);
			$item.append($link);
			$list.append($item);

			if (!showHeadings)
			{
				// Hide the actual heading element within the content element.
				// Since hide() fails in Safari, we do css instead...
				//	see http://dev.jquery.com/ticket/3038
				//$(this).hide();
				$(this).css('display', 'none');
			}
		});

		// Show or hide the content element.
		if (selected)
		{
			hasSelected = true;
			$(this).show();
		}
		else
		{
			$(this).hide();
		}
	});

	$(containerSelector).prepend($list);

	if (!hasSelected) // We found no element with class 'selected', so we show the first tab.
	{
		$list.find('ul.tabnav > li:first').addClass('selected'); // And add the class selected to that tab.
		$(contentSelector + ':first').show(); // show the matching element
		hasSelected = true;
	}
}