$(document).ready(function() { 
    $("input#username").focus();

    // validate signup form on keyup and submit 
    var validator = $("#RegisterForm").validate({
		submitHandler:  function(form) {
			$('#RegisterForm input[type=submit]').attr('disabled','disabled');
			form.submit();
		},
        rules: { 
            fname: "required", 
            lname: "required",      
            username: { 
                required: true, 
                minlength: 3, 
                remote: {
								url: "/summer/drivers/check_username.cfm",
								type: "get"				
							}
						}, 
            password: { 
                required: true, 
                minlength: 4 
            }, 
            password_confirm: { 
                required: true, 
                minlength: 4, 
                equalTo: "#password" 
            }, 
            email: { 
                required: true, 
                email: true
            }, 
						zip: {
							required: true,
							digits: true,
							minlength: 5
						},	            
						phone: {
							required: true,
							remote: "/summer/drivers/check_phone.cfm"
						},	
						age: {
											required: true, 
							remote: "/summer/drivers/check_validselect.cfm"
						},	
						grade: {
											required: true, 
							remote: "/summer/drivers/check_validselect.cfm"
						},	
						school: {
											required: true, 
							remote: "/summer/drivers/check_validselect.cfm"
						},	
						library: {
											required: true, 
							remote: "/summer/drivers/check_validselect.cfm"
						},
						goal: {
							required: true, 
							digits: true 
						},
						club: "required"
        }, 
        messages: { 
            fname: "* Enter your first name", 
            lname: "* Enter your last name", 
            username: { 
                required: "* Enter a username", 
                minlength: jQuery.format("* Enter at least {0} characters"), 
                remote: jQuery.format("* {0} is already in use") 
            }, 
            password: { 
                required: "* Provide a password", 
                rangelength: jQuery.format("* Enter at least {0} characters") 
            }, 
            password_confirm: { 
                required: "* Repeat your password", 
                minlength: jQuery.format("* Enter at least {0} characters"), 
                equalTo: "* Enter the same password as above" 
            }, 
            email: { 
                required: "* Enter a valid email address", 
                email: "* Enter a valid email address"
            }, 
						zip: {
							required: "* Enter a valid zip code", 
							digits: "* Enter a valid zip code",
							minlength: "* Enter a valid zip code"
						},	
						phone: {
							required: "* Enter a valid phone number",
							remote: "* Enter a valid phone number"
						},
						age: {
							required: "* Select a valid age",
							remote: "* Select a valid age"
						},	
						grade: {
							required: "* Select a valid grade",
							remote: "* Select a valid grade"
						},	
						school: {
							required: "* Select a valid school",
							remote: "* Select a valid school"
						},	
						library: {
							required: "* Select a valid library",
							remote: "* Select a valid library"
						},
						goal: {
							required: "* Enter a valid number", 
							digits: "* Enter a valid number" 
						},
						club: {
							required: "* Select a reading club"
						}
							}
    }); 

	//toggle SCHOOL field based on value chosen for GRADE
	$("select#grade").change(function(){
		if(this.value == "Not in school") 
			$("select#school").val(999);
		else if(this.value == "Preschool") 
			$("select#school").val(0);		
	});
	
	$("select").change(function(){
		if(this.id == "school") {
			if(this.value == 0)
				$(".other-school").show(500);
			else {
				$("input#otherschool").val("");
				$(".other-school").hide(500);
			}
		}
		
		else if(this.id == "library" ){
			if(this.value == 0)
				$(".other-library").show(500);
			else {
				$("input#otherlibrary").val("");
				$(".other-library").hide(500);
			}
		}
	});
	
	
	//update SCHOOL value based on chose GRADE on page load
	if($("select#grade").val() == "Not in school") 
		$("select#school").val(999);
	else if($("select#grade").val() == "Preschool") 
			$("select#school").val(0);	
		
	
	//show the OTHER fields if selected value is OTHER on page load
	if($("#school").val() == 0)
		$(".other-school").show();
	if($("#library").val() == 0)
		$(".other-library").show();
});