/* About this script */
/*******
1. Loads a enquiry form as a overlay. Form data is submitted using AJAX, email is sent using PHP SendMail 
2. Line 59 sets dialog box size and title text
3. Make sure field names in JS below that require valiating match up with field names in form-field.html
4. can display multiple forms


/* customise here  */


//JQuery UI Dialog contact form with client side validation and AJAX POST

$(document).ready(function(){
	
$enquireonline = $("<div class='dialog' title='Subscribe to Newsletter'></div>").load('form/onlinenquiry.html');
$('body').append($enquireonline);


// id of the button trigger
$('#enquireonline').click(function() {
  $enquireonline.dialog("open");
  return false;
});


// dialog options
var options = {
	 autoOpen: false,
	 height: 350,
	 width:  450,
	 modal: true,
	 buttons: {
	  "Submit" : function() {
		  // get id container div
		  $dialog = $(this).closest("div");
		  var username ="";
		  var bValid = true;
		  
		  
          // validation functions
		  function updateTips( t ) {
			  tips
				  .text( t )
				  .addClass( "ui-state-highlight" );
			  setTimeout(function() {
				  tips.removeClass( "ui-state-highlight", 1500 );
			  }, 500 );
		  }
  
		  function checkLength( o, n, min, max ) {
			  if ( o.val().length > max || o.val().length < min ) {
				  o.addClass( "ui-state-error" );
				  updateTips( "Length of " + n + " must be between " +
					  min + " and " + max + "." );
				  return false;
			  } else {
				  return true;
			  }
		  }
  
		  function checkRegexp( o, regexp, n ) {
			  if ( !( regexp.test( o.val() ) ) ) {
				  o.addClass( "ui-state-error" );
				  updateTips( n );
				  return false;
			  } else {
				  return true;
			  }
		  }	
		  
		  // validation checking
		 
		  // validation issue might be in line below to id can exist
		  // var name = $( "#name" ), email = $( "#email" ), allFields = $( [] ).add( name ).add( email ),tips = $( ".validateTips" );
		  var name = $dialog.find("#name"), email = $dialog.find("#email"), allFields = $( [] ).add( name ).add( email ), tips = $dialog.find(".validateTips");
		  
		  allFields.removeClass( "ui-state-error" );
		  
		  bValid = bValid && checkLength( name, "name", 3, 80 );
		  bValid = bValid && checkLength( email, "email", 6, 80 );
		  
 		  bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "must be a valid email address eg. ui@jquery.com" );
		  

		  if ( bValid ) {	   
			  var datastr ="";	   
			  $dialog.find("input, textarea, input[type='checkbox']:checked").each(function(i){ 
				  $this = $(this);
				  if  ($this.attr('name') == "name"){ username = $this.val()}
				  if (i == 0)
				  {
					  datastr = datastr + $this.attr('name') + "=" + $this.val(); 
				  }
				  else
				  {
					  datastr = datastr + "&" + $this.attr('name') + "=" + $this.val(); 		
				  }
			  });
			  
			  
			  $.ajax({
				type: "POST",
				url: "form/form-send.php",
				data: datastr,
				cache: false,
				success: function(message){
	
				//var $savedform = $dialog.closest("form").detach();

				var $submitting = $("<img src='form/images/ajax-loader.gif' align='middle'/>")
				.css({'display' :'block','margin-top':'50%', 'margin-left':'auto', 'margin-right':'auto'});
				
				var $confirmation = $("<h3>" + username + ", " + message + "</h3>")
				.css({'margin-top':'20%', 'margin-left':'auto', 'margin-right':'auto' , 'display' :'block' , 'width':'300px' , 'text-align':'center'});
				
				$dialog.empty().append($submitting);
				window.setTimeout(function(){	
				$dialog.empty().append($confirmation)},2000); 
				window.setTimeout(function(){ $dialog.dialog( "close" )},6000);
				}
			});
		  }
	  },
	  Cancel: function() {
		  $(this).dialog( "close" );
	  }
  },
  close: function() {
	  //$dialog.empty().append($savedform);
	  allFields.val( "" ).removeClass( "ui-state-error" );
  }	 
}

// setup an instance of dialog - after option have been set
$enquireonline.dialog(options);	
	

	
});