initTabNavigation = function(containerSelector, contentSelector, contentIdPrefix, headingSelector, showHeadings, selectedIndex) {
	// 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
	
	var hasSelected = false;
	var $list = $(document.createElement('ul')); // The navigation list.
	var navigationElementId = contentIdPrefix + '-tabnav';
	var $content = $(contentSelector);

	if ($content.length < selectedIndex) {
		selectedIndex = -1;
	}

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

	$content.each(function(j) {
		var currentContentId = $(this).attr("id");
		var selected = false;

		if (selectedIndex > -1) {
			selected = selectedIndex == j;
		}
		else {
			selected = $(this).hasClass('selected');
		}

		$(this).find(headingSelector).each(function(i) {
			var $item = $(document.createElement('li'));
			var $link = $(document.createElement('a'));
			var $span = $(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) {
				$content.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;
			});

			$link.append($span);
			$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();
		}
	});

	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;
	}

	$(containerSelector).prepend($list);
}