$(document).ready(function() {
	// form is "valid" in the beginning
	var valid = true;
	
	// clear form (when user returns to the contact page for re-submit)
	$('#contact_form [type=text]').each(function() {
		$(this).attr('value', '');
	})
	
	// Title
	$('#contact_form [type=radio]').click(function() {
		// always valid, because it's a radiobutton
		/*
		if(($(this).attr('value') == 'm') || ($(this).attr('value') == 'v')) {
			$(this).parent().next().children('.valid').show();
			$(this).parent().next().children('.invalid').hide();
		} else {
			$(this).parent().next().children('.valid').hide();
			$(this).parent().next().children('.invalid').show();
		}
		*/
	})

	// Name
	$('#contact_form [name=company]').blur(function() {
		// remove multiple whitespace
		$(this).attr('value', $(this).attr('value').replace(/\s{2,}/ig, ' '));
		
		// remove multiple dots
		$(this).attr('value', $(this).attr('value').replace(/\.{2,}/ig, '.'));

		if($(this).attr('value').length > 0) {
			// show image
			$(this).parent().next().children('.valid').show();
		} else {
			// hide image
			$(this).parent().next().children('.valid').hide();
		}
	})
	
	// Name
	$('#contact_form [name=name]').blur(function() {
		// remove multiple whitespace
		$(this).attr('value', $(this).attr('value').replace(/\s{2,}/ig, ' '));
		
		// remove multiple dots
		$(this).attr('value', $(this).attr('value').replace(/\.{2,}/ig, '.'));

		if(/^([a-z]|\s|\.){1,}$/i.test($(this).attr('value'))) {
			// show image
			$(this).parent().next().children('.valid').show();
			$(this).parent().next().children('.invalid').hide();
			
			// hide text
			$(this).parent().next().next().html('');
		} else {
			// field is invalid
			valid = false;
			
			// show image
			$(this).parent().next().children('.valid').hide();
			$(this).parent().next().children('.invalid').show();
			
			// show text
			$(this).parent().next().next().html('Voorbeeld: <strong>B Bos</strong>');
		}
	})
	
	// Address
	$('#contact_form [name=address]').blur(function() {
		// remove multiple whitespace
		$(this).attr('value', $(this).attr('value').replace(/\s{2,}/ig, ' '));

		if($(this).attr('value').length > 1) {
			// show image
			$(this).parent().next().children('.valid').show();
			$(this).parent().next().children('.invalid').hide();

			// hide text
			$(this).parent().next().next().html('');
		} else {
			// field is invalid
			valid = false;
			
			// show image
			$(this).parent().next().children('.valid').hide();
			$(this).parent().next().children('.invalid').show();
			
			// show text
			$(this).parent().next().next().html('Voorbeeld: <strong>Stationsweg 24</strong>');
		}
	})
	
	// Zipcode 1234AB or 1234 AB
	$('#contact_form [name=zipcode]').blur(function() {
		// remove multiple whitespace
		$(this).attr('value', $(this).attr('value').replace(/\s{2,}/ig, ' '));

		if(/(^[0-9]{4}(\s){0,1}[a-zA-Z]{2}$)/i.test($(this).attr('value'))) {
			// remove space in zipcode
			$(this).attr('value', $(this).attr('value').replace(' ', ''));
			
			// show image
			$(this).parent().next().children('.valid').show();
			$(this).parent().next().children('.invalid').hide();
			
			// hide text
			$(this).parent().next().next().html('');
		} else {
			// field is invalid
			valid = false;
			
			// show image
			$(this).parent().next().children('.valid').hide();
			$(this).parent().next().children('.invalid').show();
			
			// show text
			$(this).parent().next().next().html('Voorbeeld: <strong>1234AB</strong>');
		}
	})
	
	// City
	$('#contact_form [name=city]').blur(function() {
		// remove multiple whitespace
		$(this).attr('value', $(this).attr('value').replace(/\s{2,}/ig, ' '));
		
		// remove multiple dots
		$(this).attr('value', $(this).attr('value').replace(/\.{2,}/ig, '.'));

		if($(this).attr('value').length > 1) {
			// show image
			$(this).parent().next().children('.valid').show();
			$(this).parent().next().children('.invalid').hide();

			// hide text
			$(this).parent().next().next().html('');
		} else {
			// field is invalid
			valid = false;
			
			// show image
			$(this).parent().next().children('.valid').hide();
			$(this).parent().next().children('.invalid').show();
			
			// show text
			$(this).parent().next().next().html('Voorbeeld: <strong>Groningen</strong>');
		}
	})
	
	// Phone 0123456789
	$('#contact_form [name=phone]').blur(function() {
		// remove +31
		$(this).attr('value', $(this).attr('value').replace('+31', '0'));

		// remove anything but a digit
		$(this).attr('value', $(this).attr('value').replace(/[\D]{1,}/ig, ''));

		if((/(^[0-9]{10}$)/i.test($('#contact_form [name=mobile]').attr('value'))) && ($(this).attr('value').length == 0)) {
			// hide images
			$(this).parent().next().children('.valid').hide();
			$(this).parent().next().children('.invalid').hide();

			// show text
			$(this).parent().next().next().html('');
			
			// return, don't validate
			return;
		}

		if(/(^[0-9]{10}$)/i.test($(this).attr('value'))) {
			// show image
			$(this).parent().next().children('.valid').show();
			$(this).parent().next().children('.invalid').hide();

			// hide text
			$(this).parent().next().next().html('');
		} else {
			// field is invalid
			valid = false;
			
			// show image
			$(this).parent().next().children('.valid').hide();
			$(this).parent().next().children('.invalid').show();
			
			// show text
			$(this).parent().next().next().html('Voorbeeld: <strong>0123456789</strong>');
		}
	})
	
	// Mobile 0123456789
	$('#contact_form [name=mobile]').blur(function() {
		// remove +31
		$(this).attr('value', $(this).attr('value').replace('+31', '0'));

		// remove anything but a digit
		$(this).attr('value', $(this).attr('value').replace(/[\D]{1,}/ig, ''));

		if((/(^[0-9]{10}$)/i.test($('#contact_form [name=phone]').attr('value'))) && ($(this).attr('value').length == 0)) {
			// hide images
			$(this).parent().next().children('.valid').hide();
			$(this).parent().next().children('.invalid').hide();

			// show text
			$(this).parent().next().next().html('');
			
			// return, don't validate
			return;
		}
	
		if(/[0-9]{10}/i.test($(this).attr('value'))) {
			// show image
			$(this).parent().next().children('.valid').show();
			$(this).parent().next().children('.invalid').hide();

			// show text
			$(this).parent().next().next().html('');
		} else {
			// field is invalid
			valid = false;
			
			// show image
			$(this).parent().next().children('.valid').hide();
			$(this).parent().next().children('.invalid').show();
			
			// show text
			$(this).parent().next().next().html('Voorbeeld: <strong>0612345678</strong>');
		}
	})
	
	// E-mail
	$('#contact_form [name=email]').blur(function() {
		// remove multiple whitespace
		$(this).attr('value', $(this).attr('value').replace(/[\s]{1,}/ig, ''));
		
		// remove multiple whitespace
		$(this).attr('value', $(this).attr('value').replace(/[\.]{1,}/ig, '.'));
		
		if(/^(("[\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.test($(this).attr('value'))) {
			// show image
			$(this).parent().next().children('.valid').show();
			$(this).parent().next().children('.invalid').hide();

			// hide text
			$(this).parent().next().next().html('');
		} else {
			// field is invalid
			valid = false;
			
			// show image
			$(this).parent().next().children('.valid').hide();
			$(this).parent().next().children('.invalid').show();
			
			// show text
			$(this).parent().next().next().html('Voorbeeld: <strong>info@domein.nl</strong>');
		}
	})
	
	// Type question
	$('#contact_form [name=type]').click(function() {
		// always valid because it's a radiobutton
	})
	
	// Comment
	$('#contact_form [name=comment]').blur(function() {
		if($(this).attr('value').length < 1001) {
			// show image
			$(this).parent().parent().parent().children('tr:second').children('td:second').children('.valid').show();
			$(this).parent().parent().parent().children('tr:second').children('td:second').children('.invalid').hide();

			// hide text
			$(this).parent().parent().parent().children().children('.comment').html('');
		} else {
			// field is invalid
			valid = false;
			
			// show image
			$(this).parent().parent().parent().children('tr:second').children('td:second').children('.valid').hide();
			$(this).parent().parent().parent().children('tr:second').children('td:second').children('.invalid').show();
			
			// show text
			$(this).parent().parent().parent().children().children('.comment').html('<strong>De opmerking heeft een maximum van 1000 tekens!</strong>');
		}
	})
	
	
	// Before form submit check the values again
	$('#contact_form').submit(function() {
		// reset form to valid
		valid = true;
		
		// check (everything, except radiobuttons) if there is any invalid value
		$('#contact_form input[type=text], textarea').each(function() {
			$(this).blur();
		})
		
		if(!valid) {
			return false;
		}
		
		return true;
	})
});