
	$(document).ready(function(){
		
		replace_submit($('#form-search,#form-search-inline'));
		
		entireDivClick(	$('.news-item-latest, .link-block-a > li, .link-block-b li, .link-block-c li, .link-block-d li'));
		
		clear_inputs_on_focus();
		
		position_footer();
		
		if(window.print) { $('#print').show().click( function () { window.print(); return false; }) };

		if ($('#googleMap').length) {
			/**
			 *
			 * - het rel attribuut van de div #location-gmap is de zoomfactor [optioneel]
			 * - als in de div #location-gmap een link met de class "kml_url" bevat wordt die KML geladen
			 *
			 */			 			 			 			 			
			opts = {
				zoom: $('#googleMap').attr('rel'),
				kml: $('#googleMap').find('a.kml_url').attr('href'),
				markers: []
			};
			
			/**
			 *
			 * Standaard zoom optie instellen
			 * 
			 */			 			 			 			
			if (opts.zoom == undefined) {
				opts.zoom = 10;
			} else {
				opts.zoom = parseInt(opts.zoom);
			}
			
			/**
			 *
			 * Controleren of er markers geplaatst zijn
			 * 
			 */			 			 			 			
			$('#googleMap div.gmap_marker').each(function() {
				opts.markers.push({ latlng: new google.maps.LatLng($(this).attr('width'), $(this).attr('height')), title: $(this).attr('title'), icon: $(this).attr('rel'),  content: $(this).html() });
			});
			
			init_maps(opts);
		}
		
		$("#carrousel img").carrouselAnimation();
		
		$('#carrousel-slider').tinycarousel({ duration: 750 });
		$('#carrousel-slider .overview a').fancybox({
			overlayColor: '#fff',
			overlayOpacity: 0.5,
			centerOnScroll: true,
			showCloseButton: false,
			titlePosition: 'inside',
			titleFormat: function(title, currentArray, currentIndex, currentOpts) {
				return  '<span id="fancyClose">close</span><strong>'+(currentIndex + 1) + '<span> / </span>' + currentArray.length +'</strong>&nbsp;&nbsp;'+ title;
			},
			onComplete : function () { $('#fancyClose').click($.fancybox.close); }
		});
		
		$('#gmap-infowindow a.hdr').live('click', function() {
			window.location = $(this).parent().find('.descr a:first').attr('href');
			return false;
		});
		
	});
	

	/*
	 * Position footer aligned with background
	 */
	function position_footer() { 
		var footerOffset =$('#footer-container').offset();
		newOffset = Math.ceil((footerOffset.top) / 41) * 41;
		extraPadding = (newOffset - footerOffset.top) + 21;
		$('#footer-container').css('padding-top', extraPadding);
	}
	
	
	/*
	 * Replace standard submit buttons with custom buttons
	 */
	 
	function replace_submit(jObj) {
		jObj.find('input.submit').hide();
		jObj.find('div.submit').show().click(function() {
			$(this).closest('form').submit();
			return false;
		});
	}
	
	/*
	 * Clear input fields on focus
	 */
	function clear_inputs_on_focus () {
		$("input[type=text].clear").focus(function () { 
			if(!$(this).attr("startvalue")) {  
				$(this).attr("startvalue", $(this).val());
			} 
			if($(this).val() == $(this).attr("startvalue")) {
				$(this).val('');	
			}
		}).blur(function () { 
			if($(this).val() == '') {
				$(this).val($(this).attr("startvalue"));
			}
		});
	}
	
	
	/*
	 * Make an entire element clickable
	 */
	function entireDivClick (jObj) {
		jObj.hover( function () { 
			$(this).addClass('hover'); 
		}, 
		function () { 
			$(this).removeClass('hover'); 
		})
		.click( function(el) {
			if (el.target.type != 'text' && el.target.type != 'submit' && el.target.type != 'checkbox') {
				if($(this).find("a").attr("target") == '_blank'){
					window.open($(this).find("a").attr("href"));
				}else{
					window.location=$(this).find("a").attr("href");
				}
				return false;
			}
			return true;
		})
	}
	
	
	
	/*
	 * Carrousel
	 */
	(function($) {
		
			$.fn.carrouselAnimation = function(options) { 
				var defaults = {
					speed: 			5000,
					fadeSpeed: 		1000,
					activeImage:	0,
					imageCount:		0,
					TO:				''
				};	
				
				var options = $.extend(defaults, options);
				var jQueryMatchedObj = this; 
				options.imageCount = jQueryMatchedObj.length;
							
				function start() {
					window.clearTimeout(options.TO);
					options.TO = window.setTimeout(function() { animate() }, options.speed); 
				} 	
				
				function animate() {
					
					if(options.activeImage+1 < options.imageCount) {
						myId = $(jQueryMatchedObj[options.activeImage+1]).attr('id');
						num = parseInt(options.activeImage) + 1;
						$('#carrousel .slide-text').hide().removeClass('active');
						$('#text-'+myId).addClass('active').fadeIn(options.fadeSpeed);
						$(jQueryMatchedObj[num]).fadeIn(options.fadeSpeed, endAnimation);
						$('#slide-list li').removeClass('active');
						$('#slide-list li:eq('+num+')').addClass('active');
					} else {


						num = parseInt(options.imageCount) - 1;
						myId = $(jQueryMatchedObj[0]).attr('id'); 
						$('#carrousel .slide-text').hide().removeClass('active');
						$('#text-'+myId).addClass('active').fadeIn(options.fadeSpeed);
						$(jQueryMatchedObj[num]).fadeOut(options.fadeSpeed, endAnimation);
						$('#slide-list li').removeClass('active');
						$('#slide-list li:eq(0)').addClass('active');
					}
				
				}
				
				function endAnimation() {
					if(parseInt(options.activeImage) > 0 ) {
						$(jQueryMatchedObj[options.activeImage]).hide(1);
					} 
					
					if(options.activeImage+1 < options.imageCount) {
						options.activeImage++;
					} else {
						options.activeImage = 0;	
					}
					start();
				}
				
				function pauseAnimation() { 
					window.clearTimeout(options.TO);
				}
				
				$('#slide-list li a').hover( function () {
						pauseAnimation();
						hoverId = $("#slide-list li a").index(this);
						$('#carrousel img:not(.first)').hide(); 
						$('#carrousel img').eq(hoverId).show();
						myId = $('#carrousel img').eq(hoverId).attr('id');
						$('#carrousel .slide-text').hide();
						$('#text-'+myId).show();
					}, function() { 
						$('#carrousel img:not(.first)').hide(); 
						$(jQueryMatchedObj[num]).show();
						$('#carrousel .slide-text:not(.active)').hide();
						$('#carrousel .slide-text.active').show();
						 start();
					}
				);


				
				
				start(jQueryMatchedObj);
			}
	})(jQuery);



	/*
	 * GOOGLE MAPS
	 */
	function init_maps(opts) {
		kmlLayer = null;
		overlay = null; 
						
		var latlng = new google.maps.LatLng(51.582617,4.653053);
		var myOptions = {
			zoom: opts.zoom,
			center: latlng,
			mapTypeControl: false,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			streetViewControl: true
		};
		
		var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
		
		overlay = new location_overlay(map);
		
		/**
		 *
		 * KML laden
		 * 
		 */		 		 		 		
		if (opts.kml != undefined) {
			load_kml(opts.kml, map);
			
			/**
			 * 
			 * Bij zoomen opnieuw de KML ophalen
			 * 
			 */			 			 			 					
			google.maps.event.addListener(map, 'zoom_changed', function() {				
				load_kml(opts.kml, map);
			});
				
		/**
		 *
		 * Anders, markers laden
		 * 
		 */		 		 		 		
		} else if (opts.markers.length) {
			var bounds = new google.maps.LatLngBounds();
			var markers = [];
			
			for (var i = 0; i < opts.markers.length; ++i) {
				marker = make_marker (opts.markers[i], map);
				markers.push(marker);
				bounds.extend(opts.markers[i].latlng);
			}
			
			if (opts.markers.length == 1) {
				google.maps.event.addListener(map, 'idle', function() {
					var content = '<a href="" class="hdr"><span>' + marker.infoWindow + '</span><span class="icon small"></span></a><div class="descr">' + marker.infoWindowContent +'</div>';
					overlay.show(marker.getPosition(),content );
					
					if (bounds) {
						map.setCenter(bounds.getCenter());
						bounds = null;
					}
				});
			} else {			
				google.maps.event.addListener(map, 'idle', function() {
					if (bounds) {
						map.setCenter(bounds.getCenter());
						map.fitBounds(bounds);
						bounds = null;
					}
					
					if (map.getZoom() > 13) {
						for (var i = 0; i < markers.length; ++i) {
							var icon = markers[i].icon.replace(/small/, 'large');
							markers[i].setIcon(icon);
						}
					} else {
						for (var i = 0; i < markers.length; ++i) {
							var icon = markers[i].icon.replace(/large/, 'small');
							markers[i].setIcon(icon);
						}
					}
				});
			}
			
			
		}	
				
		$('#googleMap a').live('click', function() {
			$(this).attr('target', '_self');
		});
	}
	
	
		
	function make_marker(marker, map) {
	
	
		/**
		 *
		 * Marker aanmaken
		 * 
		 */		 		 		 	
		var marker_obj = new google.maps.Marker({
			position: marker.latlng,       
			map: map,       
			icon: marker.icon, 
			infoWindow: marker.title,
			infoWindowContent: marker.content
		});
		
		/**
		 *
		 * Klik event toevoegen
		 * 
		 */
		 	 		 		 							
		google.maps.event.addListener(marker_obj, 'click', function(event) {
			var content = '<a href="" class="hdr"><span>' + marker_obj.infoWindow + '</span><span class="icon small"></span></a><div class="descr">' + marker_obj.infoWindowContent +'</div>';
			overlay.show(marker_obj.getPosition(),content );
		});	
		

		
		return marker_obj;
	
	}
	
	/**
	 *
	 * KML inladen
	 * 
	 */	 	 	 	
	function load_kml(kml, map) {
		/**
		 *
		 * Type markers bepalen
		 * 
		 */		 		 		 		
		var marker = 'small';
		if (map.getZoom() > 13) {
			marker = 'large';
		}
		
		/**
		 *
		 * Als de map verder als zoom level 13 is ingezoomd en de KML wordt voor de eerste keer geladen, 
		 * dan wordt na inladen de kaart opnieuw gecentreerd, zodat op de locatie detail de kaart goed 
		 * geladen wordt. Dit is zo gedaan, omdat de optie "preserveViewport" op false zetten een 
		 * foutmelding oplevert
		 * 
		 */		 		 		 		 		 		 		
		var set_center = false;
		if(kmlLayer != null) { 
			kmlLayer.setMap(null); 
		} else if (map.getZoom() > 13) {
			set_center = true;
		}
		
		/**
		 *
		 * KML laden
		 * 
		 */
		kmlLayer = new google.maps.KmlLayer(kml+'&marker='+marker, { preserveViewport:true, suppressInfoWindows: true });
		kmlLayer.setMap(map);
		
		/**
		 *
		 * Opnieuw centreren, hierbij wachten op het event "metadata_changed" omdat dan de data geladen is		 
		 * 
		 */		 		 	 		
		if (set_center) {
			google.maps.event.addListener(kmlLayer, 'metadata_changed', function() {
				map.setCenter(kmlLayer.getDefaultViewport().getCenter());
			});
		}
		
		/**
		 *
		 * Klik event toevoegen
		 * 
		 * Inhoud van het event.featureData object:
		 * 
		 * {   
		 * 		author: {     
		 *			email: "nobody@google.com",     
		 *			name: "Mr Nobody",     
		 *			uri: "http://example.com"   
		 *		},   
		 *		description: "description",   
		 *		id: "id",   
		 *		infoWindowHtml: "html",   
		 *		name: "name",   
		 *		snippet: "snippet" 
		 * }	 		 		 
		 * 
		 */		 		 		 							
		google.maps.event.addListener(kmlLayer, 'click', function(event) {
			var content = '<a href="" class="hdr"><span>' + event.featureData.name + '</span><span class="icon small"></span></a><div class="descr">' + event.featureData.description +'</div>';
			
			overlay.show(event.latLng, content, event.pixelOffset);
		});
		
	}
	
	/**
	 *
	 * Overlay voor de custom infowindow
	 * 
	 */	 	 	 	
	function location_overlay(map) {	
		this.map_ = map;    
		this.div_ = null;   
		this.latlng_ = null; 
		
		this.setMap(map); 
	}  
	
	location_overlay.prototype = new google.maps.OverlayView();
		
	/**
	 *
	 * Op de onAdd van de overlay de DIV aanmaken die als infowindow 
	 * wordt gebruikt en op de map pane zetten
	 * 
	 */	 	 	 	 			
	location_overlay.prototype.onAdd = function() {    
		// Note: an overlay's receipt of onAdd() indicates that   
		// the map's panes are now available for attaching   
		// the overlay to the map via the DOM.    
		// Create the DIV and set some basic attributes.   
		var div = document.createElement('DIV'); 
		div.id = 'gmap-infowindow';
								 
		// Set the overlay's div_ property to this DIV   
		this.div_ = div;    
		
		$(this.div_).html('<div class="top"></div><div class="content"></div><div class="bot"></div><div class="arrow"></div><a class="close">'+$('#googleMap').attr('title')+'</a>');
		$('#googleMap').attr('title','');
		
		$('.close', $(this.div_)).click(function() {
			overlay.hide();
		});
				 
		// We add an overlay to a map via one of the map's panes.   
		// We'll add this overlay to the overlayImage pane.   
		var panes = this.getPanes();   
		panes.overlayLayer.appendChild(div); 
		panes.overlayLayer.style.zIndex = 9998;
	}
	
	/**
	 *
	 * Verplichte draw functie
	 * 
	 */	 	 	 	
	location_overlay.prototype.draw = function() {    
		if (this.latlng_) {
			overlay.position();
		}
	}
	
	/**
	 *
	 * Bij verwijderen van de overlay de div ook echt verwijderen
	 * 
	 */	 	 	 	
	location_overlay.prototype.onRemove = function() {   
		this.div_.parentNode.removeChild(this.div_);   
		this.div_ = null; 
		this.latlng_ = null;
	}
	
	/**
	 *
	 * Verbergen van de overlay
	 * 
	 */	 	 	 	
	location_overlay.prototype.hide = function() {   
		if (this.div_) {     
			$(this.div_).hide();
			this.latlng_ = null;
		} 
	}  
	
	/**
	 *
	 * Tonen van de overlay	 	 	 
	 * 
	 */	 	 	 	
	location_overlay.prototype.show = function(latLng, content, pixelOffset) {   
		if (this.div_) {
			this.latlng_ = latLng;
								
			$('.content', $(this.div_)).html(content);
			
			overlay.position(pixelOffset);
			$(this.div_).show();
			
			this.map_.panTo(this.latlng_);
		} 
	}
	
	/**
	 *
	 * Positioneren van de DIV
	 * 
	 */	 	 	 	
	location_overlay.prototype.position = function(pixelOffset) {		
		if (pixelOffset == undefined) {
			pixelOffset = new google.maps.Size(0, -32);
		}
	
		var overlayProjection = this.getProjection();
		var position = overlayProjection.fromLatLngToDivPixel(this.latlng_);
			
		var x_pos = position.x;
		var y_pos = position.y - ($(this.div_).height() / 2);
		
		if (this.map_.getZoom() > 13) {
			x_pos += 6;
			y_pos += (pixelOffset.height /2) - 12;
		} else { 
			x_pos += 16;
			y_pos += (pixelOffset.height /8) - 16;
		}
				
		this.div_.style.left = x_pos + 'px';   
		this.div_.style.top = y_pos + 'px';
	}
	

