$(function(){
	
	// hover an recent item
	$(document).ready(function() {		
		$('.recent').mouseenter(function() {			
			// Place the active class
			$(this).find('img').addClass('active-image');			
		});
		
		$('.recent').mouseleave(function() {			
			// Find other active images 
			$('.recent').find('.active-image').removeClass('active-image');			
		});				
	}); // end hover recent item
	
});

// SLIDER HOMEPAGE //
$(document).ready(function() { 
	var pause = 3000; // Lengte pauze
	var animatie = 700; // Lengte animatie
	Slider(pause, animatie);
});

// Slider functie
function Slider(pause, animatie) {
	
	// Hover-effect functie
	$('#slider-box .tabs li').hover(function(){

		if (!$(this).hasClass('active')) {
		// Als element geen active class heeft, geef hem die
			$('#slider-text-home .tabs').find('li.active').removeClass('active');
			$(this).parent().children('li.active').removeClass('active');
			
			$(this).addClass('active'); // active class toevoegen
			$('#slider-text-home .tabs li').eq( $('#slider-content .tabs li.active').index() ).addClass('active');
			
			// Laat het image wegfaden
			$('#slider-pictures .output li.active').fadeOut(animatie, function(){
				$(this).removeClass('active');
				$('#slider-pictures .output li').eq( $('#slider-box .tabs li.active').index() ).fadeIn(animatie, function(){
					$(this).addClass('active');
				});
			});
		}
	}, function(){}); // Einde hover-effect functie
	
	// Als er met muis over element gegaan wordt, dan extra class
	$('#slider-content .tabs').hover(function(){
		$(this).addClass('hover');
		$('#slider-home-text .tabs').addClass('hover');
	}, function(){
		$(this).removeClass('hover');
		$('#slider-home-text .tabs').removeClass('hover');
	});

	// Maak een timeout
	setTimeout (function(){ Slide(pause, animatie); }, pause);

}

// Slide naar de volgende
function Slide(pause, animatie) {

	if (!$('#slider-text-home .tabs').hasClass('hover') && !$('#slider-content .tabs').hasClass('hover') && !$('#slider-nav .tabs').hasClass('hover')) {
		// Muis zit niet op element
		if ($(".tabs li.active").hasClass('last')) {
			var supper = 0;
		} else {
			var supper = $('#slider-content .tabs li.active').index() + 1;
		}

		$('#slider-content .tabs li.active').removeClass('active'); // Verwijder active class
		$('#slider-text-home .tabs li.active').removeClass('active'); // Verwijder active class
		
		$('#slider-content .tabs li').eq(supper).addClass('active'); // Voeg nieuwe active class toe
		$('#slider-text-home .tabs li').eq(supper).addClass('active'); // Voeg nieuwe active class toe
		
		$('#slider-pictures .output li.active').fadeOut(animatie, function(){
			$(this).removeClass('active');
			$('#slider-pictures .output li').eq(supper).fadeIn(animatie, function(){
				$(this).addClass('active');
			});
		});
	}

	// Maak een timeout
	setTimeout (function(){ Slide(pause, animatie); }, pause);
}
//////////////////////// SLIDER HOMEPAGE ////////////////////////////////////////////////////

//////////////////////// SLIDER SUB CONTENT /////////////////////////////////////////////////

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

// Slider functie
function SubSlider(pause, animatie) {
	
	// Hover-effect functie
	$('#slider-nav .tabs li').hover(function(){

		if (!$(this).hasClass('active')) {
		// Als element geen active class heeft, geef hem die
			$(this).parent().children('li.active').removeClass('active');
			$(this).addClass('active'); // active class toevoegen
			
			// Laat het image wegfaden
			$('#slider-sub .output li.active').fadeOut(animatie, function(){
				$(this).removeClass('active');
				$('#slider-sub .output li').eq( $('#slider .tabs li.active').index() ).fadeIn(animatie, function(){
					$(this).addClass('active');
				});
			});
		}
	}, function(){}); // Einde hover-effect functie
	
	// Als er met muis over element gegaan wordt, dan extra class
	$('#slider-nav .tabs').hover(function(){
		$(this).addClass('hover');
	}, function(){
		$(this).removeClass('hover');
	});

	// Maak een timeout
	setTimeout (function(){ slideNext(pause, animatie); }, pause);

}

// Slide naar de volgende
function slideNext(pause, animatie) {

	if (!$('#slider-nav .tabs').hasClass('hover')) {
		// Muis zit niet op element
		if ($("#slider-nav .tabs li.active").hasClass('last')) {
			var index = 0;
		} else {
			var index = $('#slider-nav .tabs li.active').index() + 1;
		}
		
		$('#slider-nav .tabs li.active').removeClass('active'); // Verwijder active class
		$('#slider-nav .tabs li').eq(index).addClass('active'); // Voeg nieuwe active class toe
		$('#slider-sub .output li.active').fadeOut(animatie, function(){
			$(this).removeClass('active');
			$('#slider-sub .output li').eq(index).fadeIn(animatie, function(){
				$(this).addClass('active');
			});
		});
	}

	// Maak een timeout
	setTimeout (function(){ slideNext(pause, animatie); }, pause);
}
	// project slider
	$(document).ready(function() {
		$('.project-image').cycle({ 
			fx:     'scrollHorz', 
			speed:  'slow', 
			timeout: 6000, 
			next:   '#scroll-right', 
			prev:   '#scroll-left',
			delay:  -2000
		});
	});