// 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
litium.initTabNavigation = function(containerSelector, contentSelector, contentIdPrefix, headingSelector, showHeadings) {	

	$(containerSelector).each(function() {
		var hasSelected = false;
		var $container = $(this);
		var containerId = $container.attr('id');
		var navigationElementId = containerId + '-tabnav';
		var $list = $(document.createElement('ul')); // The navigation list.
		$list.attr('id', navigationElementId);
		$list.addClass('clearbox tabnav');

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

			$(this).find(headingSelector).each(function(i) {
				console.log($(this).text());
				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,}-*\d*/)) {
					$item.attr('id', navigationElementId + currentContentId.match(/\d{1,}-*\d*/));
				}
				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', function(e) {
					console.log(currentContentId);
					$container.find(contentSelector).hide(); // Hide all content elements.
					$('#' + 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();
			}
		});

		$container.prepend($list);

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