$(function(){
	$('.linked-list li').has('a').click(function () {
		window.location.href = $(this).children('a').attr('href');
	});
	if ($('.fancybox').length) {
		$('.fancybox').fancybox();
	}	
	$('.caroussel>div:not(#intro-caroussel)').hide();
	setTimeout(function() {homeCaroussel($('#intro-caroussel'))}, 7000);
	
	/*
		// intro animatie dmv Raphael 
	if ($('#intro-animatie').length) {
		//maak een canvas aan in het element met de id 'intro-animatie' van 741x428px
		var paper = Raphael('intro-animatie', 741, 428);
		
		//eigen attributen om makkelijker een arc te maken
		paper.customAttributes.arc = function (xloc, yloc, value, total, R) {
					var alpha = 360 / total * value,
							a = (90 - alpha) * Math.PI / 180,
							x = xloc + R * Math.cos(a),
							y = yloc - R * Math.sin(a),
							path;
					if (total == value) {
							path = [["M", xloc, yloc - R], ["A", R, R, 0, 1, 1, xloc - .01, yloc - R]];
					} else {
							path = [["M", xloc, yloc - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
					}
					return {path: path};
			};
		
		//de strokes moeten wit zijn
		var strokeOptions = { fill: '#fff', stroke: 'none' };
		
		//Maak een blauwe vierkant aan op positie x:250 y:212 van 34x34px
		var blue = paper.rect(250, 212, 34, 34);
		blue.attr({
				fill: '#0093D1',
				stroke: 'none'
		});
		
		//Twee witte balken die over de blauwe vierkant gaan schuiven (geen breedte of geen hoogte als beginstand)
		var bluebarh = paper.rect(265, 212, 4, 0).attr(strokeOptions),
				bluebarv = paper.rect(250, 227, 0, 4).attr(strokeOptions);
		
		//animeer de horizontale balk in 600ms, animeer vervolgens de verticale balk
		bluebarh.stop().animate({
			height: 34
		}, 600, function () { 
			bluebarv.stop().animate({
				width: 34
			}, 600);
		});
	 
		var yellow = paper.rect(322, 212, 34, 34);
		yellow.attr({
				fill: '#ffc423',
				stroke: 'none'
		});
		var yellowbar = paper.rect(320, 212, 4, 0);
		//draai de gele balk -45% met x:322 y:212 als draaipunt
		yellowbar.attr(strokeOptions).rotate(-45, 322, 212);
		//begin na 300ms te animeren en stop na 900ms
		yellowbar.stop().animate({
			'30%': { height: 0 },
			'90%': {height: 48 }
		}, 1000);
		
		
		var black = paper.rect(394, 212, 34, 34);
		black.attr({
				fill: '#231f20',
				stroke: 'none'
		});
		//Maak een arc op positie x:428 y:246, gevuld voor 75% (75 van de 100) met een radius van 25
		var blackarc = paper.path();
		blackarc.attr({
			stroke: "#fff", 
			"stroke-width" : 4, 
			arc: [428, 246, 75, 100, 25]});
		//animeer de arc van 75% tot 100% (75/100 tot 100/100)
		blackarc.stop().animate(
		{
			'45%': {arc: [428, 246, 75, 100, 25]},
			'90%': {arc: [428, 246, 100, 100, 25]}
		}, 1500);
		
		var pink = paper.rect(466, 212, 34, 34);
		pink.attr({
				fill: '#d60d8c',
				stroke: 'none'
		});
		var pinkbar = paper.rect(481, 212, 4, 0).attr(strokeOptions);
		
		//begin de animatie na 1000ms, begin dan ook gelijk met de text te animeren dmv jQuery
		pinkbar.stop().animate({ height:0 }, 1000, function () {
			$('.intro-text').animate({left: 227}, 700, function () { setTimeout(function() {homeCaroussel($('#intro-animatie'))}, 1500); } );
			pinkbar.stop().animate({ height:34 }, 600);
		});
	}*/
	
	function homeCaroussel ($current) {
		$current.fadeOut(1000, function () {
			$current.children('.low-text').css('bottom', -109).children('.loader').css('width', 0);
		});
		var $next = $current.next();
		if (!$next.length) {
			$next = $current.parent().children().first();
		}
		$next.fadeIn(1000, function () {
				
			$('.buttons a').removeClass('current');
			if ($next.attr('class')) {
				$('.buttons a.' + $next.attr('class')).addClass('current');
			}
			if ($next.children('.low-text').length) {			
				$next.children('.low-text').animate({bottom: 26}, function () {
					$(this).children('.loader').animate({width: 553}, 7000, 'linear', function () {
						homeCaroussel($next);
					});
				});
			} else {
				setTimeout(function() {homeCaroussel($next)}, 7000);
			}
		});
	}
});