/*
 * tabulate plug-in for jQuery
 * tested with jQuery 1.2.6
 * author: Peter Anderhagen (peter_anderhagen@hotmail.com)
 *
 * Creates an <ul> width clickable <li>'s that control show/hide of divs.
 * Makes it possible to get tabs and keep the code clean for non-js-capable clients.
 * returns jQuery
 * reasonable defaults
 *
 * Usage
 *
 * 	$('#TabContainer').tabulate({
 * 		panelElement: 'div',		// html element to control show/hide for, default: '<div>'
 * 		panelListId: 'PanelList',	// id of <ul> holding the <li>'s, default: 'PanelList'
 * 		fadeSpeed: 500,				// fade in speed on show, default: 500
 * 		activeItemIndex: 0			// zero based index of the item that should be active onload, default: 0 (first item)
 *	});
 *
 * Note: panelElement should have a "title" attribute, which will become the text for the li element.
 *
 * Examples 
 *
 * Create tabs using default values on all
 * 	$('#TabContainer').tabulate();
 *
 * Create tabs out of divs contained in an element with an id of "Features", using default values on all but activeItemIndex:
 * 	$('#Features').tabulate({
 * 		activeItemIndex: 2
 *	});
 *
 *
 */

(function($){ 
	$.fn.extend({  
		tabulate: function(arguments){ 
 
			// Default settings.
			var defaults = ({
				panelElement: 'div',
				panelListId: 'PanelList',
				panelContainerId: 'PanelContainer',
				fade: true,
				fadeSpeed: 500,
				activeItemIndex: 0
			});
			
			// Override defaults for passed arguments.
			var settings = $.extend(defaults, arguments);
 
 			// Set a reference to the local root item.
			var container = $(this);

			// Create some new html elements (unordered list and items).
			var sHtml = '';
			container.find(settings.panelElement).each(function(i){
				// Set an id to the div, if not already set.
				if( $(this).attr('id') == ''){
					$(this).attr('id', 'tab' + i);
				}

				// Get the text for the new element (list item), and add the rel attribute value we set for the div.
				sHtml += '<li rel="' + $(this).attr('id') + '"';
				// Find and mark active item.
				if(i == settings.activeItemIndex){
					sHtml += ' class="active Tab' + i + '"';
				}
				else{
					sHtml += ' class="Tab' + i + '"';
					// Hide all divs but the active
					$(this).hide();
				}
				sHtml += '><span>' + $(this).attr("title") + '</span></li>\n';
			});
			container.prepend('\n<div id="PanelContainer">\n<ul id="' + settings.panelListId + '">\n' + sHtml + '</ul>\n</div>\n');
			
			// Make items clickable.
			container.find('ul#' + settings.panelListId + ' li').click(function(){			
				if(!$(this).hasClass('active'))
					container.find(settings.panelElement).hide();
					container.find('ul#' + settings.panelListId + ' li.active').removeClass('active');
					if(settings.fade){
						container.find(settings.panelElement + '#' + $(this).attr('rel')).fadeIn(settings.fadeSpeed);
					}
					else{
						container.find(settings.panelElement + '#' + $(this).attr('rel')).show();
					}
					$(this).addClass('active');
			});
        } 
    }); 
})(jQuery);