$(document).ready(function() {
     $(":input[type=text]").click(function () { 
       $(":input[type=text]").removeClass('error');
     });      
   });

  $(function() {
		$( "#datepicker" ).datepicker({ dateFormat: 'dd-mm-yy' });
	});

  function alertError(){
  $("#sendReservation input").removeClass('error');
        
		var name  = $("#name");
		var email = $("#email");
		var date  = $("#datepicker");
		var month = $("#month");
		var error = 0;
		
	  if (name.val() == ''){
           name.addClass('error');
	   error = error +1;	  
	  }
	   
	  if(email.val() == ''){
	    email.addClass('error');
	    error = error +1;	  
	  } 
	  
	  if (date.val() == ''){
	    date.addClass('error');
	    error = error +1;
      } 
	  
	  if (month.val() == ''){
	    month.addClass('error');
	    error = error +1;
	  }
	  
	  if (error > 0){
	    alert("Please enter information into the highlighted fields");	  
	  }else {	  
 		$("#sendReservation").submit();
	  }
	 }
	 
	// prepare the form when the DOM is ready 
	$(document).ready(function() { 
		var options = { 
			target:        '#reservation',   // target element(s) to be updated with server response         
			success:        showResponse,  // post-submit callback 
			resetForm: true			
		};  
		// bind to the form's submit event 
		$('#sendReservation').submit(function() {        
			$(this).ajaxSubmit(options);
			$("#reservation").html("<div id='reservation'><h2>Quick reservation</h2><p>Your reservation is being submitted</p><p><img src='http://james-gilmore.co.uk/KallaBellaRedesign/images/ajax-loader.gif'/></p></div>");
			return false; 
		}); 
	}); 
	 
	// post-submit callback 
	function showResponse(responseText, statusText, xhr, $form)  {  		  
		$("#reservation").html("<div id='reservation'><h2>Quick reservation</h2><p>Thank you for your reservation</p><br/><strong>PLEASE NOTE:</strong><br/><p><strong>If your booking isn't confirmed within 24 hours please contact us on 02920 560 000</strong></div>");
		  

	}