(function($) {  // Start our namespace

	/*
	 *
	 * // Custom jQuery plugin to do super simple accordian that only supports fade in. If you want to have any more features use a proper accordian
	 * // This works out to be 1kb packed compared to the 9kb packed of http://docs.jquery.com/UI/Accordion
	 *
	 * // It expects a list of items, for example:
	 * <ul>
	 *   <li id="some-id-1" title="tab name 1">
	 *     The Content of each tab goes here 1
	 *	 </li>
	 *   <li id="some-id-2" title="tab name 2">
	 *     The Content of each tab goes here 2
	 *	 </li>
	 *   <li id="some-id-3" title="tab name 3">
	 *     The Content of each tab goes here 3
	 *	 </li>
	 * </ul>
	 *
	 *
	 * // It then creates a nav in the following format
	 * <ul id="tab-nav" class="tabs">
	 *   <li><a class="active" href="#some-id-1"><span>tab name 1</span></a></li>
	 *   <li><a href="#some-id-2"><span>tab name 2</span></a></li>
	 *   <li><a href="#some-id-2"><span>tab name 3</span></a></li>
	 * </ul>
	 *
	 */
	 
	$.fn.areebaTabs = function(options) {
		
		// Options
		settings = jQuery.extend({
			tabNavAppend:			'body',
			tabNavID:				'tab-nav',
			tabNavClass:			'clearfix',
			tabNavImageReplace:		false,
			tabNav:					'#tab-nav a',
			animationSpeed:			800,
			animation:				{ 
										opacity: 'show'
									},
			output:					''
		}, options);
		
		// Make sure we have the correct scope
		var $el = this;
		
		// Iterate through each li and get the id and title to create the tab navigation
		$el.each(function(){
			if(settings.tabNavImageReplace){
				settings.output = settings.output + '<li id="' + $(this).attr('id') + '-nav"><a href="#' + $(this).attr('id') + '" class="image-replaced">' + $(this).attr('title') + '<span></span></a></li>';
			} else {
				settings.output = settings.output + '<li><a href="#' + $(this).attr('id') + '"><span>' + $(this).attr('title') + '</span></a></li>';
			}
		});
		
		// Append the tab navigation
		$(settings.tabNavAppend).prepend('<ul id="'+ settings.tabNavID +'" class="'+ settings.tabNavClass +'">' + settings.output + '</ul>');
		
		// Hide all the tabs except the first one
		$($el).not(':first').hide();
		$(settings.tabNav + ':first').addClass('active');
		
		// Add the event handler to show the clicked item
		$(settings.tabNav).click(function(){
			if(!$(this).is('.active')){ // Make sure we are not on the active one
				$($el).stop().hide().css('opacity', 1); // Hide everything but make sure the opacity is set to 1, so when you click through fast it still works
				$(settings.tabNav).removeClass('active');
				$(this).addClass('active'); // Add an active class
				var href = this.getAttribute('href').split('#')[1]; // Get the href, IE returns the full path of .attr() so use old dom scripting
				$('#' + href).animate(settings.animation, settings.animationSpeed).trigger('show');
			}
			return false; // Don't follow the #
		});
		
		// Return this so we can chain
		return $el;

	 };
	 
})(jQuery); // End our namespace