/**
 * jQuery Fi slidingTabs Plugin
 * @author David Lindkvist (Fi)
 * @author Filip Michalowski (Fi)
 * @version 0.1
 * 
 * Quick prototype for a sliding tabs components based on 2(!) containers.
 * 
 * NOTE: Only works with two tab sections!
 * 
 * First element in each tab container will be used as tab trigger (title link)
 
 * 
 * OPTIONS
 * -----------------------------------------------------------------------------
 * 
 * 1. {String}		inactiveStyleclass		Style class added to inactive tab
 * 2. {String}		activeStyleclass		Style class added to active tab (currently visible)
 * 
 * EXAMPLES
 * -----------------------------------------------------------------------------
 * 
 * HTML:
 *	<div class="myList">
 *		<h3>My first list</h3>
 *		<ul/>
 *	</div>
 *	<div class="myList">
 *		<h3>My second list</h3>
 *		<ul/>
 *	</div>
 * 
 * JS:
 * $('div.myList').slidingTabs({
 *     inactiveStyleclass: 'myInactiveClassOverride'
 * });
 * 
 */

(function ($) {
	
	$.fn.slidingTabs = function (options) {
		
// Properties __________________________________________________________________
		
		$.fn.slidingTabs.defaults = {
			inactiveStyleclass: 'inactive',
			activeStyleclass: 'active'
		};
		
		var opts = $.extend({}, $.fn.slidingTabs.defaults, options);	
		
// Private Methods _____________________________________________________________
		
	
		/* Makes element positioned absolute without moving */
		function makeAbsolute(elm) {
		
	        var el = $(elm);
	
	        var pos = el.position();
	
	        el.css({ 
				position: "absolute",
	            marginLeft: 0, 
				marginTop: 0,
	            top: pos.top, 
				left: pos.left
			});
	    }


		/* Wires last tab to be a link */
		function wireTrigger(ul, tabs, triggers, trigger) {
			
			trigger.click(function () {
				
				$(this).unbind().removeClass(opts.inactiveStyleclass).addClass(opts.activeStyleclass);
				
				var index = $(this).data('index');

				tabs.hide();

				makeAbsolute(this);
		
				ul.find('li:first').fadeOut(100, function () {
					
					trigger.animate({
							left: 0
						}, 
						500, 
						function () { 
						
							ul.prepend(this);
							trigger.css('position', 'relative');
							
							ul.find('li:last').fadeIn(200).addClass(opts.inactiveStyleclass).removeClass(opts.activeStyleclass);
							
							$(tabs[index]).fadeIn(200);
							
							wireTrigger(ul, tabs, triggers, ul.find('li:last'));
							
							ul.find('li:first');
						}
					);
					
				});
				
			})
		}

		

// Plugin Initialization _______________________________________________________
				
		// each item in the selection is a tab section
		var $this = $(this);
		
		if ( $this.length < 1 ){
			return;
		}
		
		$this.addClass('tabSection').removeClass('noJS');	
		
		// set the height on parent container (to height of the biggest tabSection)	
		var maxHeight = 0;
		var bottomPadding = 6;		
		$this.each(function () { 
			
			maxHeight = Math.max(maxHeight, $(this).height());
			
		}).parent().height(maxHeight + bottomPadding);
		
		// first child element in each section will be used as tab trigger
		var triggers = $this.find(':first');
		var tabs = triggers.next();
		$(tabs[1]).hide();
		
		// build nav list
		var ul = $('<ul class="tabNav">');
		triggers.each(function (i) {
			
			ul.append($('<li>').append(this));
			$(this).parent().data('index', i);
			
		});
		
		ul.css('position', 'relative');
		$($this[0]).before(ul);
		
		ul.find('li:first').addClass(opts.activeStyleclass);
		ul.find('li:last').addClass(opts.inactiveStyleclass);
		
		wireTrigger(ul, tabs, triggers, ul.find('li:last'));		
	};
	
})(jQuery);