//document ready shorthand
$(function(){

  //on submit
  $("$commentForm").find("form").submit(function(){
  
    //the name field
    //if it's empty
    if($(this).find("#name").val() == "")
    {
      //make it fade in and color it
      $(this).find("#name").hide().fadeIn("slow").css({ background: "#fff4b6" }).focus();
      
      //block the submit
      return false;
    
    //if it's not empty
    }else{
      //reset the background
      $(this).find("#name").css({ background: "#fff" });
    }
    
    
    //the email field
    
    //find the at symbol
    at = $(this).find("#email").val().indexOf("@")
      
    //the dot
    dot = $(this).find("#email").val().lastIndexOf(".")
      
      
    if($(this).find("#email").val() == "")
    {
      //color it
      $(this).find("#email").hide().fadeIn("slow").css({ background: "#fff4b6" }).focus();
      return false;
 
    //check the email value
    }else if(at<1 || dot-at<2){
    
      //color it
      $(this).find("#email").hide().fadeIn("slow").css({ background: "#fff4b6" }).focus();
      return false;
        
    //if it's ok
    }else{
      //reset
      $(this).find("#email").css({ background: "#fff" });
    }
    
    //the comment field    
    if($(this).find("#comment").val() == "")
    {
      //color
      $(this).find("#comment").hide().fadeIn("slow").css({ background: "#fff4b6" }).focus();
      return false;
    }else{
      //reset
      $(this).find("#comment").css({ background: "#fff" });
    }
    
  });

});