/*
	Tabs jQuery Plugin.
	
	Usage:
		Call the tabs() function on the parent of the tab elements. Each tab
		element should contain a link to it's body using the normal fragment
		identifier style.
		
		For example
		
		<div>
			<ul id="tab-header">
				<li><a href="#one">Tab One</a></li>
				<li><a href="#two">Tab Two</a></li>
				<li><a href="#three">Tab Three</a></li>
			</div>
			
			<div id="one">#1 Body Content</div>
			<div id="two">#2 Body Content</div>
			<div id="three">#3 Body Content</div>
		</div>
		
		should be used:
		
		$("#tab-header").tabs();
	
	Options:
		changeOn
			The type of event (click, mouseover, etc) that should trigger the
			tab change.
		
		linkSelector
			The selector used to select the link within the tab. Usually there
			will only be a single link within a tab, so the default "a:first"
			will be fine.
*/

(function($) {
	
	$.fn.tabs = function(options) {
		var opts = $.extend({}, $.fn.tabs.defaults, options);
		
		this.each(function() {
			var tabs = $(this).children();
			var bodies = $(opts.linkSelector, tabs).map(function() {
				return $(this.hash);
			});
			
			//bodies.not(".active").hide();
			function activeBody(i) {
				for (var b=0; b<bodies.length; b++) {
					if (b == i) { 
						bodies[b].show();
					} else {
						bodies[b].hide();
					}
				}
			}
			
			// Now bind the event
			tabs.each(function(i) {
				$(this).bind(opts.changeOn, function(e) {
					e.preventDefault();
					if (i >= bodies.length) { return; }

					$(tabs[i]).addClass("active").siblings().removeClass("active");
					activeBody(i);
				});
			});
			
			//activeBody(0);
		});
		
		return this;
	};
	
	// Allow access to defaults.
	$.fn.tabs.defaults = {
		changeOn: "click",
		linkSelector: "a:first"
	};
	
})(jQuery);