// Slider settings
$(document).ready(function() { 
	var pauze = 5000; // Lengte pauze
	var animatie = 500; // Lengte animatie	
	Slider(pauze, animatie);	
});

function Slider(pauze, animatie) {
	// Grootte van de lijst 
	var sizeList = $('.output li').size() - 1;
	
	// Volgende
	$('#next').click(function() {
		// Welk item is actief
		var currentTab = $('.output li.active').index(); // Momenteel actief
		var nextTab = currentTab + 1; // Volgend actief
		
		// Huidige image laten uitfade 
		$('.output li.active').fadeOut(animatie, function() {
			// Check of de volgende foto de laatste is
			if ( currentTab == sizeList) {
				// Laatste tab is bereikt, ga terug naar de eerste tab
				var tab = 0;
			} else {
				var tab = nextTab;
			}
			
			// Animeer de image
			$('.output li').eq(tab).fadeIn(animatie, function() {
				$('.output li.active').removeClass('active').css('display', 'none'); // Verwijder de huidige actieve image
				$('.output li').eq(tab).addClass('active'); // Zorg dat de nieuwe image actief wordt	
			});
			
			// Animeer de tabs 
			$('.tabs li.active').removeClass('active');
			$('.tabs li').eq(tab).addClass('active');
		});
	});
	
	// Vorige
	$('#prev').click(function() {
		// Welk item is actief
		var currentTab = $('.output li.active').index(); // Momenteel actief
		var prevTab = currentTab - 1; // Volgend actief
		
		// Huidige image laten uitfade 
		$('.output li.active').fadeOut(animatie, function() {
			// Check of de volgende foto de laatste is
			if ( currentTab == 0 ) {
				var tab = sizeList;
			} else {
				var tab = prevTab;
			}
			
			// Animeer de image
			$('.output li').eq(tab).fadeIn(animatie, function() {
				$('.output li.active').removeClass('active').css('display', 'none'); // Verwijder de huidige actieve image
				$('.output li').eq(tab).addClass('active'); // Zorg dat de nieuwe image actief wordt	
			});
			
			// Animeer de tabs 
			$('.tabs li.active').removeClass('active');
			$('.tabs li').eq(tab).addClass('active');
		});
	});
	
	// Hover 
	$('.tabs li').hover(function() {
		
		// check of het item al actief is
		if(!$(this).hasClass('active')) {		
		
		// Ga naar dit item toe
		var newTab = $(this).index();
		
			// Animeer de image
			$('.output li').eq(newTab).fadeIn(animatie, function() {
				$('.output li.active').removeClass('active').css('display', 'none'); // Verwijder de huidige actieve image
				$('.output li').eq(newTab).addClass('active'); // Zorg dat de nieuwe image actief wordt	
			});
			
			// Animeer de tabs 
			$('.tabs li.active').removeClass('active');
			$(this).addClass('active');			
		}		
	});
	
	$('.tabs').hover(function(){
		$('.tabs').addClass('hover');
	}, function(){
		$('.tabs').removeClass('hover');
	});	
	
	setTimeout (function() {
		autoPlay(animatie, pauze);
	}, pauze );	
}
	
function autoPlay(animatie, pauze) {	
	// Grootte van de lijst 
	var sizeList = $('.output li').size() - 1;	
	
	if(!$('.tabs').hasClass('hover')) {
		// Welk item is actief
		var currentTab = $('.output li.active').index(); // Momenteel actief
		var nextTab = currentTab + 1; // Volgend actief
				
			// Huidige image laten uitfade 
			$('.output li.active').fadeOut(animatie, function() {
				// Check of de volgende foto de laatste is
				if ( currentTab == sizeList) {
					// Laatste tab is bereikt, ga terug naar de eerste tab
					var tab = 0;
				} else {
					var tab = nextTab;
				}
				
				// Animeer de image
				$('.output li').eq(tab).fadeIn(animatie, function() {
					$('.output li.active').removeClass('active').css('display', 'none'); // Verwijder de huidige actieve image
					$('.output li').eq(tab).addClass('active'); // Zorg dat de nieuwe image actief wordt	
				});
				
				// Animeer de tabs 
				$('.tabs li.active').removeClass('active');
				$('.tabs li').eq(tab).addClass('active');
			});			
	}
	
	setTimeout (function() {
		autoPlay(animatie, pauze);
	}, pauze );	
}