$(document).ready(function(){
	
	////// SHOWCASE ///////
	$('#showcase-images').exposure({
		controlsTarget : '#controls',
		controls : {prevNext:true, pageNumbers:false, firstLast:false},
		imageControls : true,
		showCaptions : false, 
		showControls : true,
		carouselControls: true,
		pageSize: 7,
		onThumb : function(thumb) {
			var li = thumb.parents('li');				
			var fadeTo = li.hasClass('active') ? 1 : 0.5;
			
			thumb.css({display:'none', opacity:fadeTo}).stop().fadeIn(200);
			
			thumb.hover(function() { 
				thumb.fadeTo('fast',1); 
			}, function() { 
				li.not('.active').children('img').fadeTo('fast', 0.5); 
			});
		},
		onImage : function(image, imageData, thumb) {
			// Check if wrapper is hovered.
			var hovered = $('.exposureWrapper').hasClass('exposureHover');
			
			// Fade out the previous image.
			$('.exposureWrapper > .exposureLastImage').stop().fadeOut(500, function() {
				$(this).remove();
			});
			
			// Fade in the current image.
			image.hide().stop().fadeIn(1000);
			
			var hasCaption = function() {
				var caption = imageData.find('.caption').html();
				var extra = imageData.find('.extra').html();
				return (caption && caption.length > 0) || (extra && extra.length > 0);
			}
			
			var showImageData = function() {
				imageData.stop().show().animate({bottom:0+'px'},{queue:false,duration:160});
			}
			var hoverOver = function() {
				$('.exposureWrapper').addClass('exposureHover');
				// Show image data as an overlay when image is hovered.
				var hasCpt = hasCaption();
				
				if (hasCpt) {
					showImageData.call();
				}
			};
			
			var hideImageData = function() {
				var imageDataBottom = -imageData.outerHeight();
				imageData.stop().show().animate({bottom:imageDataBottom+'px'},{queue:false,duration:160});
			}
			var hoverOut = function() { 
				$('.exposureWrapper').removeClass('exposureHover');
				// Hide image data on hover exit.
				if (hasCaption()) {
					hideImageData.call();
				}
			};
			
			$('.exposureWrapper').hover(hoverOver,hoverOut);
			imageData.hover(hoverOver,hoverOut);
									
			if (hovered) {
				if (hasCaption()) {
					showImageData.call();
				} else {
					hideImageData.call();	
				}	
			}

			if ($.exposure.showThumbs && thumb && thumb.length) {
				thumb.parents('li').siblings().children('img.selected').stop().fadeTo(200, 0.3, function() { $(this).removeClass('selected'); });			
				thumb.fadeTo('fast', 1).addClass('selected');
			}
		}

	});
	
	
	////// NAV ///////
	var style = 'easeOutElastic';
	
	//positie .active
	var pos = Math.round($('#nav li.active').offset().top - $('#nav').offset().top);
	
	//zet #nav-bg op .active
	$('#nav-bg').css({top: pos});

	$('#nav ul li').hover(function(){
		//positie li waar je over hoverd
		var hoverpos = Math.round($(this).offset().top - $('#nav').offset().top);
		
		$('#nav-bg').stop(false, true).animate({top: hoverpos},{duration:1000, easing:style});     
	
	}).click(function(){
		$('#nav ul li').removeClass('active');
		$(this).addClass('active');
	});
	
	$('nav').mouseleave(function(){
		//positie .active na click
		var pos = Math.round($('#nav li.active').offset().top - $('#nav').offset().top);		
		
		$('#nav-bg').stop(false, true).animate({top: pos},{duration:1500, easing:style});
	});
	
});

////// COMMENT FORM //////
function commentForm(){
	$('#commentform input,#cbericht').removeClass('invalid');
	$('.error-message').hide();
	
	var cnaam = $('input#cnaam').val();
	if(cnaam==""||cnaam=="Naam *"||cnaam==" "||cnaam=="  "){
		$('input#cnaam').addClass('invalid');
		$('input#cnaam').after('<span class="error-message"><br />U heeft geen of een onjuiste naam ingevuld</span>');
		$('input#cnaam').focus();  
		return false;
	};
	
	var cbericht = $("#cbericht").val();
	if(cbericht==""||cbericht==" "||cbericht=="  "){
		$('#cbericht').addClass('invalid');
		$('#cbericht').after('<span class="error-message"><br />U heeft geen bericht achtergelaten</span>');
		$('#cbericht').focus();
		return false;
	};
	
	var dataString ='naam=' + cnaam + '&bericht=' + cbericht;
	
	$.ajax({
		type: "POST",
		url: "scripts/php/gastenboek.php",
		data: dataString,
		success:function(){
			location.reload();
			/*$('#comments').load('gastenboek #comment-count');
			$('#commentlist').load('gastenboek .comment-body');*/
		}
	});
	return false;
};

////// CONTACT MAIL FORM //////
function contactForm(){	
	$('#contactform input,#bericht').removeClass('invalid');
	$('.error-message').hide();
	
	var naam = $('input#naam').val();
	if(naam==""||naam=="Uw naam *"||naam==" "||naam=="  "){
		$('input#naam').addClass('invalid');
		$('input#naam').after('<span class="error-message"><br />U heeft geen of een onjuiste naam ingevuld</span>');
		$('input#naam').focus();  
		return false;
	};
	
	var email = $('input#email').val();
	if(!validMail(email)){
		$('input#email').addClass('invalid');
		$('input#email').after('<span class="error-message"><br />U heeft geen of een onjuist emailadres ingevuld</span>');
		$('input#email').focus();
		return false;
	};

	var bericht = $("#bericht").val();
	if(bericht==""||bericht==" "||bericht=="  "){
		$('#bericht').addClass('invalid');
		$('#bericht').after('<span class="error-message"><br />U heeft geen bericht achtergelaten</span>');
		$('#bericht').focus();
		return false;
	};
	
	var klantmail = $("input#klantmail").val();
	var dataString ='naam=' + naam + '&email=' + email + '&bericht=' + bericht + '&klantmail=' + klantmail;
	
	$.ajax({
		type: "POST",
		url: "scripts/php/mail.php",
		data: dataString,
		success: function(){
			$('.btn[name="contactForm"]').hide();
			$('#contactform').html("<div id='message'></div><a style='text-decoration:underline;' onclick='newContactForm()'>Stuur nog een mail</a>");
			$('#message').html("<br/><h1>Uw mail is verzonden!</h1>")
			.append("<br/>Dank u wel voor uw bericht.<br/>We zullen zo snel mogelijk reageren.<br /><br />")
			.hide()  
			.fadeIn(1000, function() {  
				$('#message');  
			}); 
		}	
	});
	return false;
}; // end: send contact mail function

function newContactForm(){
	$('#message').html("<form id='contactform' name='mailen' action='' method='post' enctype='text/plain'></form><button name='contactForm' class='btn' onclick='contactForm()'>Verstuur</button>");
	$('#contactform').html("<p>Gebruik het formulier hieronder voor al uw vragen</p>")
	.append("<input class='input-text round5' type='text' name='naam' id='naam' value='Uw naam *' onfocus=\"this.value=this.value==\'Uw naam *\'?\'\':this.value;\" onblur=\"this.value = this.value==\'\'?\'Uw naam *\':this.value;\" />")
	.append("<input class='input-text round5' type='text' name='email' id='email' value='Uw email adres *' onfocus=\"this.value = this.value==\'Uw email adres *\'?\'\':this.value;\" onblur=\"this.value = this.value==\'\'?\'Uw email adres *\':this.value;\" />")
	.append("<textarea class='input-text textarea round5' name='bericht' id='bericht'></textarea>")
	.hide()
	.fadeIn(1000, function(){  
		$('#contactform');  
	}); 
	$('.btn[name="contactForm"]').fadeIn(1000);
}; // end: make contact new email form

function validMail(email){
	var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
	if(pattern.test(email)){
		return true;
	}
	return false;
};

$.fn.berichtGo = function(){
	var offset = $('#respond').offset().top;
	$('html,body').animate({scrollTop: offset}, 'fast');
	return false;
};