/*

Mario's in-line form validator

date: 1/20/2010
author: Mario Edgar
website: http://www.marioedgar.com

Feel free to use this in any way

*/



jQuery(document).ready(function(){

    /* These are the only values that need to be edited */
    var formFieldWidth = 250;
    var defaultBorderColor = "#dddddd";
    var errorBorderColor = "#FFA2A2";
    var validBorderColor = "#ABE2AC";
    var formIdName = "jQueryValidate";
    
    /* No need to edit any other information */
    
    /* positioning of error and success images */
    var fOut = (formFieldWidth + 100) + "px 2px" ;
    var fIn = (formFieldWidth - 14) + "px 2px" ;
    
    /* Set the default width of the text fields and textArea fields */
    jQuery("form.jQueryValidate input").css("width",formFieldWidth);
    jQuery("form.jQueryValidate textArea").css("width",formFieldWidth);
 
    /* On focus of field, animate the border and image back to default */
    jQuery("form."+ formIdName +" .input").focus(function () { 
    jQuery("p#qcErrorMessage").fadeOut(1000);
    jQuery("p#qcValidMessage").fadeOut(1000);
               jQuery(this).animate({ 
                   borderTopColor: defaultBorderColor,
                   borderLeftColor: defaultBorderColor,
                   borderRightColor: defaultBorderColor,
                   borderBottomColor: defaultBorderColor,
                   backgroundPosition: fOut
               }, 500);
    });
    
    /* On blur of field validate the field */
    jQuery("form."+ formIdName +" .input").blur(function () {
        var phoneError = false;
        var zipError = false;
        var mailError = false;
        var haveError = false;        
        var tmp = jQuery(this).val();
        
        /* Check to see if the class contains "phone" if so validate using regular expressions */
        if(jQuery(this).hasClass("phone").toString() == "true")
        {
            if(tmp.match(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})$/)){phoneError = false;}
            else
            {
                haveError = true;
            }
        }
        /* Check to see if the class contains "zip" if so validate using regular expressions */
        else if (jQuery(this).hasClass("zip").toString() == "true")
        {
            if(tmp.match(/^\d{5}$/)){zipError = false;}
            else
            {
               haveError = true;
            }
        }
        /* Check to see if the class contains "email" if so validate using regular expressions */
        else if(jQuery(this).hasClass("email").toString() == "true")
        {
            if(tmp.match(/^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$/)){mailError = false;}
            else
            {
                haveError = true;
            }
        }
        /* Check to see if the class contains "required" if so validate */
        else if(jQuery(this).hasClass("required").toString() == "true") 
        {
            if(tmp=="")
            {
                haveError = true;
            }
        }
        /* If there were any errors above then fade the borders and slide in the error image in */
        if (haveError == true)
        {
             jQuery(this).css("background-image","url(http://www.marioedgar.com/images/error.jpg)");
             jQuery(this).css("background-repeat","no-repeat");
             jQuery(this).animate({ 
                 borderTopColor: errorBorderColor,
                 borderLeftColor: errorBorderColor,
                 borderRightColor: errorBorderColor,
                 borderBottomColor: errorBorderColor,
                 backgroundPosition: fIn
             }, 500); 
        }
        /* If there were no errors above then fade the borders and slide in the success image in */
        else
        {
            jQuery(this).css("background-image","url(http://www.marioedgar.com/images/valid.jpg)");
            jQuery(this).css("background-repeat","no-repeat");
            jQuery(this).animate({ 
                 borderTopColor: validBorderColor,
                 borderLeftColor: validBorderColor,
                 borderRightColor: validBorderColor,
                 borderBottomColor: validBorderColor,
                 backgroundPosition: fIn
             }, 500);
            return false;
        }
    });
    
    
    
    jQuery("#qcSubmit").click(function () {
    
        var haveError = false;
        var textArea = jQuery("#qcMessage").val();
        
        jQuery("form.jQueryValidate input").each(function () {

        /* Check to see if the class contains "email" if so validate using regular expressions */
        if(jQuery(this).hasClass("email").toString() == "true")
        {
            var tmp = jQuery(this).val();
            
            if(!tmp.match(/^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$/)){haveError = true;}

        }
        /* Check to see if the class contains "required" if so validate */
        else if(jQuery(this).hasClass("required").toString() == "true") 
        {
        var tmp = jQuery(this).val();
            if(!tmp || tmp=="")
            {
                haveError = true;  
            }
        }
      });
      
        if (textArea=="")
        {
          haveError = true; 
        }
        
        
      if (haveError == false)
      {
              jQuery("p#qcValidMessage").fadeIn(1000);
              
              jQuery("#qcButton").text("Loading...");
              var qcName = jQuery("#qcName").val();
              var qcEmail = jQuery("#qcEmail").val();
              var qcSubject = jQuery("#qcSubject").val();
              var qcMessage = jQuery("#qcMessage").val();
              
              var dataString = 'qcName='+ qcName + '&qcEmail=' + qcEmail + '&qcSubject=' + qcSubject + '&qcMessage=' + qcMessage; 
              //alert("qcName="+ qcName + "&qcEmail=" + qcEmail + "&qcSubject=" + qcSubject + "&qcMessage=" + qcMessage);
              
              jQuery.ajax({
                  url: "process.php",
                  type: "POST",
                  data: dataString,
                  success: function( data ) {
                    jQuery("#quickContact form").fadeOut(500);
                    jQuery("#qcButton").text("Thank You!");
                  }
              });
       }
        else
        {
            jQuery("p#qcErrorMessage").fadeIn(1000);
        }
        
        
    });
    
    
    
    
});