// http://papermashup.com/simple-jquery-tabs/
$(document).ready(function(){
	// hide all tab content, display first
	$('#tabs #tab-content div').addClass("hidden");
	$('#tabs #tab-content div:first').removeClass("hidden");
	
	//sets the correct width for the "selected" tab
	var width = $('#tabs ul li:first').width();
	$('.followTab').css({
		width: width,
		opacity: 0.25
	});
	
	
	$('#tabs ul li').each(function(){
		// display full tab content header on mouseover
		var tabTitle = $( $(this).find('a').attr('href') + ' h3').text();  // <-- gotta love jQuery!
		$(this)
			.attr('alt',tabTitle)
			.attr('title',tabTitle);
	});
	$('#tabs ul li a:first').children('span').addClass('activeTab');

	// on click, make current tab active & display content
	$('#tabs ul li a').click(function(){
		$('#tabs ul li a').children('span').removeClass('activeTab');
		$(this).children('span').addClass('activeTab');
		
		//Animates the "selected" tab to the correct position
		var followTab = $(this).parent().siblings('.followTab');
		var left = $(this).offset().left - $(this).parent().parent().offset().left;
		var width = $(this).width();

		//Animates the "selected" tab with an x tween
//		followTab.animate({
//			left: left,
//			width: width + 20
//		});

		//Animates the "selected" tab with a fade in/out tween
		followTab.animate({
				opacity: 0
			}, 250, function(){
				followTab.css({
					left: left,
					width: width + 20
				});
				followTab.animate({
					opacity: .25				  
				}, 350);
				
			});
		
		var currentTab = $(this).attr('href');
		// TODO: slicker animation
		$('#tabs #tab-content div').addClass("hidden");
		$(currentTab).removeClass("hidden");
		return false;
	});
});