/* --------------------------------------------------------------------
	FAQ portlet
-------------------------------------------------------------------- */

$(document).ready(function() {
	
	if ( $('#faq .questions').length < 1 ) return;
	
	var tabHeight = $('#faq .questions:first').height();
	var lis = $('#faq .questions li');
	var tabListHeight = 0;
	var animation = true;
	$('#faq .questions')
		.css('overflow', 'hidden')
		.parent()
		.mouseover(function() {
			animation = false;
		});
	
	createTabs();
	
	// RESET TABS ON RESIZE
	$('.txtSizeUp, .txtSizeDown').bind('click', 'faq-portlet', function() {
			
		tabListHeight = 0;
		animation = false;
		
		if ($('#faq .questions .tab').length > 1) {
			$('#faq .questions .tab').remove();
			$('#faq .questions').append('<div class="tab"><ol></ol></div>');
			for (var i=0; i < $(lis).length; i++) {
				var li = $(lis)[i];
				// add the question to the first tab
				$('#faq .questions .tab:first>ol').append(li);
			}
			$('#faq .questions .tab').css('marginTop', 'auto');
		};
		
		createTabs();

	});
	
	// CREATE TABS
	function createTabs() {
		// loop threw all the questions
		for (var i=0; i < $(lis).length; i++) {
			var li = $(lis)[i];
			
			// fill the tabs but be careful for overflowing them
			tabListHeight += $(li).outerHeight();
			if (tabListHeight >= tabHeight ) {
				$('#faq .questions').append('<div class="tab"><ol></ol></div>');
				tabListHeight = $(li).outerHeight();
			};
			
			// add the question to the latest tab
			$('#faq .questions .tab:last ol').append(li);

            //For keyboard navigation, animate and select the correct tab, when tabbing links.
            $('#faq .questions .tab:last ol li:last a').bind('focus', function(event) {
                animation = false;
                var index = $(this).closest(".tab").index();
                var tabSpan = $('#faq .tabNav span').eq(index);
                if (!tabSpan.hasClass('active'))
                {
                    tabSpan.trigger("click");
                }
            });
		};

		var allTabs = $('#faq .questions .tab');
		
		tabNavigation();
	};
	
	
	// TAB NAVIGATION
	function tabNavigation() {
		// remove tab navigation when present
		$('#faq .tabNav').remove();
	
		// build a tab navigation when there are two or more tabs
		$('#faq .questions').after('<div class="tabNav"></div>');
		if ($('#faq .questions .tab').length > 1) {
			for (var i=0; i < $('#faq .questions .tab').length; i++) {
				$('#faq .tabNav').append('<span title="ga naar tab ' + (i+1) + '">' + (i+1) +'</span> ');
			};
			
			var allTabTriggers = $('#faq .tabNav span');
			$('#faq .tabNav span:first').addClass('active');
			
			// tab navigation behavior
			$(allTabTriggers).each(function(i) {
				$(this).
				hover(function() {
					animation = false;
					$(this).addClass('hover').siblings().addClass('siblingHover');
				}, function() {
					$(this).removeClass('hover').siblings().removeClass('siblingHover');
				})
				.click(function() {
					$(this).addClass('active').siblings().removeClass('active');
					animateTabs(i);
				})
			});
		};
	};
	
	// TAB ANIMATION
	function animateTabs(i) {
        //Some browsers scroll the div when using the keyboard for tabbing to links.
        //This offset should be substracted from the scrolling
        var prevOffset = i == 0 ? 0 : -(i - 1) * tabHeight;
        var targetOffset = (tabHeight * -i) + ($('#faq .questions').scrollTop() - prevOffset);

		$('#faq .questions .tab:first').animate({
			marginTop: targetOffset + "px"
		}, tabHeight*3);
	};
	

	// AUTO ANIMATION
	if ($('#faq .questions .tab').length > 1) {
		var interval = 3000;
		
		$('#faq .tabNav span').each(function(i) {
			if (i < 1) {
				// the first span must be triggered the last
				var time = interval*($('#faq .tabNav span').length);
				var span = $('#faq .tabNav span:first');
			} else {
				var time = interval*i;
				var span = $(this);
			}
				
			var timer = setTimeout(function () {
				if (animation)$(span).trigger('click');
				clearTimeout(this);
			}, time);
		});
	};
	
});