$(function() {
  //$('#mail').hide().fadeIn(2000);
   
  // loader --------------------------------------------------------------------
  var img = new Image();
      img.src = "../z/img/working.gif"; // path relativo a la página HTML
  var loader = '<p style="text-align: center">Delivering mail</p><img class="icon" src="'+img.src+'" alt="..." />';
  
  $('#respuesta').empty().append(loader); // oculta inicialmente con CSS

  // validar ------------------------------------------------------------------- 
  var v = $("#mail").validate({
    event: "blur",
    rules: {
    		nombre: "required",
    		email: { 
          required: true, 
          email: true 
        },
    		comentarios: "required"
    },
    messages: { 
        nombre: {
          required: "[!] Name is a required field"
        }, 
        email: {
          required: "[!] Email not valid",
          email: "[!] The email must be account_name@domain.extension"
        },
        comentarios: "[!] Comments are required" 
    },
    errorPlacement: function(label, element) { 
      label.insertBefore(element);
    },
    submitHandler: function(form) {
      // envío via AJAX   
      var mailOpts = {
          target: "#respuesta",
          resetForm: true,
          beforeSubmit: process
      };
      
      $(form).ajaxSubmit(mailOpts);
            
      function process() {
        $("#mail").hide();
        $("#respuesta").show();
      };
    } 
 
  });

});