/**
 * @author michelle
 * scripts/formulier.js
 * 
 * alle code voor validatie en werking van het formulier op de informatie-aanvragen en contact pagina's
 */

// code uitvoeren als document er klaar voor is (jquery)
$(document).ready(function(){
	

		
// foutmeldingstekst schrijven in verzendbericht
		$errortekst = $("<div class='formerror'><strong>Er is een fout gevonden in het formulier.</strong><br>Controleer of u alles juist hebt ingevuld.</div>")
		.appendTo("#verzendbericht");
		
		// eerst div met berichten over verzenden e-mail verbergen
		$("#verzendbericht").hide();

	/* ************************************************************************* 
	 * code voor verzenden via Ajax / lader laten zien 
	/* ************************************************************************* */
			
		var laden = $("<div class='laden'><img src='http://www.vierkante-meter.nl/klanten/trappenhulp/development/images/laden.gif' alt='laden' />&nbsp;&nbsp;Uw bericht wordt verzonden...</div>")
			.hide() /* verbergen als niet aan het laden */
			.appendTo("#verzendbericht");

			
		jQuery().ajaxStart(function() {
			// verberg foutmeldingsbalk
			$("#verzendbericht > .formerror").hide();
			laden.show(); /* start met ajaxverzenden, lader tonen */
			$("#verzendbericht").show("slow");
		}).ajaxStop(function() {
			laden.hide("slow"); /* klaar? lader verbergen */
		}).ajaxError(function(a, b, e) {
			throw e;
		});
		


	/* ************************************************************************* 
	 * code om jquery.validate plugin te gebruiken 
	/* ************************************************************************* */
	
	// zelf methode toevoegen voor het alleen gebruiken van letters
	jQuery.validator.addMethod("alleenletters", function(value, element) {
		return this.optional(element) || /^[a-z]+$/i.test(value); // zie http://regexlib.com/
	}, "Gebruik alleen letters."); 

	
	// formulier valideren
	$("#form_infoaanvragen").validate({
		
		// algemeen bericht wordt getoond als er fouten zijn
		errorContainer: $("#verzendbericht"),

		// regels bij het valideren
		rules: {
            // verplichte velden
            hoe_ontvangen: "required",
            
            // pas als aangegeven is hoe men de informatie wil ontvangen wordt de rest gechecked
            aanhef: {
                required: "input[@name='hoe_ontvangen']:checked"
            },
            voorletters: {
                required: "input[@name='hoe_ontvangen']:checked"
            },
            achternaam: {
                required: "input[@name='hoe_ontvangen']:checked",
                minlength: 2
            },
            
            // alleen als per post (@value='post') ontvangen is gekozen zijn volgende velden verplicht:
            postcode_cijfers: {
                required: "input[@value='post']:checked",
                minlength: 4,
                digits: true
            },
            postcode_letters: {
                required: "input[@value='post']:checked",
                minlength: 2,
				alleenletters: true
            },
            straat: {
                required: "input[@value='post']:checked",
                minlength: 2
            },
            huisnummer: {
                required: "input[@value='post']:checked"
            },
            woonplaats: {
                required: "input[@value='post']:checked"
            },
            
            // alleen als per email ontvangen is gekozen is volgend veld verplicht:
            emailadres: {
                required: "input[@value='e-mail']:checked",
                email: true
            },
            
            // niet verplicht maar wel 'regels':
            telefoonnummer: {
                required: false,
                digits: true,
                minlength: 10,
                maxlength: 10
            }
        },
		// error berichten bij elk van de velden
        messages: {
            hoe_ontvangen: "Maak een keuze.",
            aanhef: "Maak een keuze.",
            voorletters: "Vul uw voorletter(s) in.",
            achternaam: {
                required: "Vul uw achternaam in.",
                minlength: "Uw achternaam moet uit minstens 2 letters bestaan."
            },  
            postcode_cijfers: {
                required: "Vul de cijfers van uw postcode in.",
            	minlength: "Vul 4 cijfers in.",
				digits: "Vul alleen cijfers in."
            },
			postcode_letters: {
                required: "Vul de letters van uw postcode in.",
            	minlength: "Vul 2 letters in."
            },
            straat: {
                required: "Vul uw straatnaam in.",
                minlength: "Uw straatnaam moet uit minstens twee letters bestaan."
            },
            huisnummer: "Vul uw huisnummer in.",
            woonplaats: {
                required: "Vul uw woonplaats in."
            },
            emailadres: {
                required: "Vul uw e-mailadres in.",
                email: "Vul een geldig e-mailadres in."
            },
            telefoonnummer: {
                digits: "Gebruik alleen cijfers.",
                minlength: "Uw telefoonnummer moet uit 10 cijfers bestaan.",
                maxlength: "Uw telefoonnummer moet uit 10 cijfers bestaan."
            }
        },
        // soms moet de error op een andere plek komen te staan
        errorPlacement: function(error, element){
            if (element.parent("td").length) { // stukje 'Mijn gegevens'
                error.appendTo(element.parent("td").parent("tr").next("tr").children("td.errormsg"));
            }
            else { // eerste radiobuttons voor keuze post/email
                error.insertAfter(element.next().next().next());
            }
        },
		
		// wat gebeurt er als op submit wordt geklikt (AJAX submit)
		submitHandler: function(form_infoaanvragen){
			// berichtbalk verbergen zodat je verandering ziet bij 2x op de knop drukken
			$("#verzendbericht").hide();
			jQuery(form_infoaanvragen).ajaxSubmit({
				target: "#verzendbericht",
				url: "../../scripts/stuurEmail.php?js=1"
			});
		} 
    });
	
	
	
	// valideren formulier contact opnemen
	$("#form_contact").validate({
		
		// algemeen bericht wordt getoond als er fouten zijn
		errorContainer: $("#verzendbericht"),

		// regels bij het valideren
		rules: {
            aanhef: {
                required: true
            },
            voorletters: {
                required: true
            },
            achternaam: {
                required: true,
                minlength: 2
            },
			opmerkingen: {
				required: true
			},
                    
            // alleen als per email ontvangen is gekozen is volgend veld verplicht:
            emailadres: {
                required: "input[@name='telefoonnummer']:blank",
                email: true
            },
            
            // niet verplicht maar wel 'regels':
            telefoonnummer: {
                required: "input[@name='emailadres']:blank",
                digits: true,
                minlength: 10,
                maxlength: 10
            }
        },
		// error berichten bij elk van de velden
        messages: {
            aanhef: "Maak een keuze.",
            voorletters: "Vul uw voorletter(s) in.",
            achternaam: {
                required: "Vul uw achternaam in.",
                minlength: "Uw achternaam moet uit minstens 2 letters bestaan."
            },  
            emailadres: {
                required: "Vul uw telefoonnummer of e-mailadres in.",
				email: "Vul een geldig e-mailadres in."
            },
            telefoonnummer: {
                required: "Vul uw telefoonnummer of e-mailadres in.",
			    digits: "Gebruik alleen cijfers.",
                minlength: "Uw telefoonnummer moet uit 10 cijfers bestaan.",
                maxlength: "Uw telefoonnummer moet uit 10 cijfers bestaan."
            },
			opmerkingen: {
				required: "Vul uw bericht in."
			}
        },
        // soms moet de error op een andere plek komen te staan
        errorPlacement: function(error, element){
            if (element.parent("td").length) { // stukje 'Mijn gegevens'
                error.appendTo(element.parent("td").parent("tr").next("tr").children("td.errormsg"));
            }
            else { // eerste radiobuttons voor keuze post/email
                error.insertAfter(element.next().next().next());
            }
        },
		
		// wat gebeurt er als op submit wordt geklikt (AJAX submit)
		submitHandler: function(form_contact){
			// berichtbalk verbergen zodat je verandering ziet bij 2x op de knop drukken
			$("#verzendbericht").hide();
			jQuery(form_contact).ajaxSubmit({
				target: "#verzendbericht",
				url: "scripts/stuurEmail.php?js=1"
			});
		} 
    });
	
	
    
   
	
	
    /* ************************************************************************* 
	 * code om delen van het formulier te verbergen / tonen bij keuze email/post
	 * en sterretje toe te voegen of te verwijderen
	/* ************************************************************************* */
    
    // acties bij selecteren ontvangen per email of post
    $("input[@name='hoe_ontvangen']").click(
		function(){
	
        // acties als gebruiker 'post' klikt
        if ($("input[@value='post']:checked").val()) {
            
			// toon de invulvelden voor de adresgegevens
			$(".veldenPost").show();
			
			// voeg een sterretje toe aan de velden voor adresgegevens
            $(".ReqPost").append(" <span> *</span>");
			
			// verwijder het sterretje bij email
            $(".ReqEmail > span").remove();
			
			// en verwijder de eventuele foutmelding bij email
			$(".ReqEmail").parent("th").parent("tr").next("tr").children("td.errormsg").children("label.error").replaceWith("");
			
			// en valideer meteen nog een keer het emailveld (dit is nu niet meer verplicht)
			$(".ReqEmail").valid();
           
			$(this).blur();
        }
        // acties als gebruiker 'email' klikt
        if ($("input[@value='e-mail']:checked").val()) {
			
			// verberg adresgegevens invulvenden
            $(".veldenPost").hide();
			
			// voeg sterretje toe bij e-mail (is nu verplicht)
            $(".ReqEmail").append(" <span> *</span>");
			
			// en verwijder sterretje bij adresgegevens
            $(".ReqPost > span").remove();
			
			// en valideer deze (want ze zijn niet meer verplicht)
			$(".ReqPost").valid();
			
            $(this).blur();          
        }		
    });
	
	/* ************************************************************************* 
	 * code voor plugin jquery.autotab
	/* ************************************************************************* */
	
	// spring na postcode cijfers ingevuld te hebben direct naar postcode letters
	$('#postcode_cijfers').autotab({ target: 'postcode_letters', format: 'all' });
	
});