$(document).ready(function() {
	$("#support_form").validate({
        rules: { 
            fname: "required",// simple rule, converted to {required:true} 
            email: {// compound rule 
                required: true, 
                email: true 
            }, 
            message: { 
				required: true
            },
            security_code: { 
				required: true,
				remote: {
					url: "ajaxcaptcha.php",
					type: "post"
				}
            }
        }, 
        messages: { 
			security_code: { 
                remote: jQuery.format("Incorrect"),
				required: jQuery.format("Required")
            },
			fname: { 
                required: jQuery.format("Required") 
            },
			email: { 
                required: jQuery.format("Required"),
				email: jQuery.format("Invalid")
            }, 
            message: { 
				required: jQuery.format("Required")
            }
        },
		// the errorPlacement has to take the table layout into account 
        errorPlacement: function(error, element) { 
            error.appendTo( element.parent().next() ); 
        },
        submitHandler: function(form) {
	        //remove all the class add the messagebox classes and start fading
	        $("#msgbox").removeClass().addClass('messagebox').text('Validating....').fadeIn(1000);
			$.post("form.php",{fname:$('#fname').val(),email:$('#email').val(),message:$('#message').val(),security_code:$('#security_code').val(),user:$('#user').val()} ,function(data)
	        {
	          if(data=='yes') //if correct login detail
	          {
	                $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
	                {
	                  //add message and change the class of the box and start fading
	                  $(this).html('Message Submitted!!').addClass('messageboxok').fadeTo(900,1,
	                  function()
	                  {
	                     //redirect to secure page
	                     document.getElementById('support_form').reset();
	                  });
	                });
	          }
	          else
	          {
					$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
	                {
						//add message and change the class of the box and start fading
						if (data=='noname') {
							$(this).html('A name must be entered...').addClass('messageboxerror').fadeTo(900,1);
						} else if (data=='noemail') {
							$(this).html('We need a valid email address to get back to you...').addClass('messageboxerror').fadeTo(900,1);
						} else if (data=='nomess') {
							$(this).html('Please enter a message...').addClass('messageboxerror').fadeTo(900,1);
						} else if (data=='wrongstr') {
							$(this).html('Security code incorrect. Please try again...').addClass('messageboxerror').fadeTo(900,1); 
						} else if (data=="Message failed to send") {
                            $(this).html(data).addClass('messageboxerror').fadeTo(900,1);
                        }
						
	                });
				}
				$('#captchaImage').attr('src','classes/CaptchaSecurityImages.php?random=' + (new Date).getTime());
				$('.status').html(null);
			});
			return false;//not to post the  form physically
        }, 
        // the errorPlacement has to take the table layout into account 
        errorPlacement: function(error, element) { 
            error.appendTo( element.parent().next() ); 
        }, 
		// set this class to error-labels to indicate valid fields 
        success: function(label) { 
            // set as text for IE 
            label.html("<span style='color:white'>.</span>").addClass("checked");  
        },
		onkeyup: false 
    });
});