/*!
	*****************************************************************************
	formstrap.js functions © 2024 by Steve Burgess
	This file is not redistributable and only licenced for use when using
	the formstrap form designer at formstrap.com
	*****************************************************************************
*/
var sform;
var field=0;
var sec=0;
var pagecol=0;
var row=0;
var formcol=0;
function formaudit(silent)
{	offcanvasList[0].hide();
	if(typeof silent=="undefined")
	{
		silent=false;
	}
	error="<h1 class='text-start'><i class='fal fa-list-check fa-fw '></i> Review the quality audit report below.</h1><p class='text-start'>Click the fix button to fix each item. Remember to save your changes before running the audit again. If the highlighted issues are as you intended them to be, just click OK to dismiss the report.</p><table class='m-0 table table-sm table-striped table-bordered'><thead><tr><th class='text-start'>Field</th><th class='text-start'>Label</th><th>Page</th><th class='text-start' colspan='2' >Issue</th></tr></thead><tbody>";
	
	errors=0;
	$("#formcontainer").find(".form-group").each(function() {
		key=$(this).attr("id");
		keyd=key
		if($(this).attr("data-customid"))
		{	
			keyd=keyd+" ("+$(this).attr("data-customid")+")";
		}
		page=$(this).closest(".formpage").attr("data-page");
		if($(this).attr("data-name")!="")
		{
			count=$("#formcontainer").find(".form-group[data-name=" + $(this).attr("data-name") + "]").length;
		}
		
		if($(this).attr("data-form")=="checkbox" || $(this).attr("data-form")=="radio")
		{
			label=$(this).find("legend").text();
			if($(this).find(".checks").find("input").length==0)
			{
				error=error+`<tr><th class='px-2 py-1 text-start'>#`+keyd + `</th><td class='px-2 py-1  text-start'>`+label+`</td><td class='text-center px-2 py-1'>`+page+`</td><td class='text-start px-2 py-1 '>This ` + $(this).attr("data-form") + ` field has selectable options</td><td class="text-center px-2 py-1 " style="vertical-align:middle"><button class="w-100 btn btn-primary btn-sm" onclick="auditfix('options','`+key + `','`+page+`')">Fix</button></tr>`;
				errors++;
			}
		}
		else
		{
			label=$(this).find("label").text();
		}
		if($(this).attr("data-inputgroup")=="true" && ($(this).attr("data-customclass")=="" || typeof $(this).attr("data-customclass")=="undefined"))
		{
			error=error+`<tr><th class='px-2 py-1 text-start'>#`+keyd + `</th><td class='px-2 py-1  text-start'>`+label+`</td><td class='text-center px-2 py-1'>`+page+`</td><td class='text-start px-2 py-1 '>This ` + $(this).attr("data-form") + ` field has been set to be a part of an <strong>input group</strong> but the group name has not been specified.</td><td class="text-center px-2 py-1 " style="vertical-align:middle"><button class="w-100 btn btn-primary btn-sm" onclick="auditfix('group','`+key + `','`+page+`')">Fix</button></tr>`;
			errors++;
		}
		if(label.trim()=="Label")
		{
			error=error+`<tr><th class='px-2 py-1 text-start'>#`+keyd + `</th><td class='px-2 py-1  text-start'>`+label+`</td><td class='text-center px-2 py-1'>`+page+`</td><td class='text-start px-2 py-1 '>This field seems to have the <strong>default label</strong>. </td><td class="text-center px-2 py-1 " style="vertical-align:middle"><button class="w-100 btn btn-primary btn-sm" onclick="auditfix('label','`+key + `','`+page+`')">Fix</button></tr>`;
			errors++;
		}
		if($(this).attr("data-name")=="" || typeof $(this).attr("data-name")=="undefined")
		{
			
			
			
			error=error+`<tr><th class='px-2 py-1 text-start'>#`+keyd + `</th><td class='px-2 py-1  text-start'>`+label+`</td><td class='text-center px-2 py-1'>`+page+`</td><td class='text-start px-2 py-1 '>This field does not have a <strong>name</strong> attribute. Data entered in this field will, therefore, not be submitted.</td><td class="text-center px-2 py-1 " style="vertical-align:middle"><button class="w-100 btn btn-primary btn-sm" onclick="auditfix('name','`+key + `','`+page+`')">Fix</button></tr>`;
			errors++;
		}
		if(count>1) 
		{
			key=$(this).attr("id");
			keyd=key
			if($(this).attr("data-customid"))
			{	
				keyd=keyd+" ("+$(this).attr("data-customid")+")";
			}
			error=error+`<tr><th class='px-2 py-1 text-start'>#`+keyd + `</th><td class='px-2 py-1  text-start'>`+$(this).find("label").text()+`</td><td class='text-center px-2 py-1'>`+page+`</td><td class='text-start px-2 py-1 '>The name attribute (<strong>` + $(this).attr("data-name") + `</strong>) used on this field  is also used on other field(s). This is not an error but may not be what you intended. This is an advisory notice.</td><td class="text-center px-2 py-1 " style="vertical-align:middle"><button class="w-100 btn btn-primary btn-sm" onclick="auditfix('name','`+key + `','`+page+`')">Fix</button></tr>`;
			errors++;
		}
		
	});
	error=error+"</tbody></table>"
	if(errors>0)
	{
		if(silent==false)
		{
			messagepop(error,null,null,null,null,null,null,"modal-xl");
		}
		else
		{
			return false;
		}
	}
	else
	{
		if(silent==false)
		{
			messagepop("Everything looks OK<br><br><small>...but the audit tool won't catch all errors. Please test the form on the preview before publishing.</small>","check-circle");
		}
		else
		{
			return true;
		}
	}
}
function auditfix(type,field,page)
{
	if(page!=document.getElementById("selectedpage").value)
	{
		gotopage(page);
	}
	
	$('#messageModal').modal('hide');
	getcontext($('#'+field).get(0),true);
	if(type=="options")
	{
		setTimeout(function() { location.href="#optionstable"; },1000);
		setTimeout(function() { $("#optionstable").parent().parent().css("background-color","pink"); },2000);
		setTimeout(function() { $("#optionstable").parent().parent().css("background-color","transparent"); },8000);
		
	}
	if(type=="group")
	{
		setTimeout(function() { $("#fieldcontextclass").focus(); },1000);
	}
	if(type=="name")
	{
		setTimeout(function() { $("#fieldcontextname").focus(); },1000);
	}
	if(type=="label")
	{
		setTimeout(function() { $("#fieldcontextlabel").focus(); },1000);
	}
	
}
function getformdata(formid)
{
	fdata={};
	replicable={};
	$("#"+formid).find(".form-group").each(function()
		{
			if($(this).data("name")!="")
			{
				replicableob=$(this).closest(".replicable");
				replicableid=$(replicableob).attr("id");
				if($(replicableob).hasClass("pagecol"))
				{
					replicablecount=$(replicableob).find(".formrowcontainer").length;
					replicabletype="col";
				}
				if($(replicableob).hasClass("formrow"))
				{
					replicablecount=$(replicableob).find(".formcolcontainer").length;
					replicabletype="row";
				}
				if(typeof replicableid!="undefined")
				{
					if(typeof replicable[replicableid]=="undefined")
					{
						replicable[replicableid]={};
						replicable[replicableid]["groups"]=replicablecount;
						replicable[replicableid]["type"]=replicabletype;
						replicable[replicableid]["fields"]=[];
					}
					if(replicable[replicableid]["fields"].includes($(this).data("name"))==false)
					{
						replicable[replicableid]["fields"].push($(this).data("name"));
					}
				}
				if(typeof fdata[$(this).data("name")]=="undefined")
				{
					if(typeof $(this).data("name")!="undefined")
					{
						fdata[$(this).data("name")]=[];
					}
					that=this;
					$("#"+formid).find("[name='"+$(this).data("name") + "']").each(function()
						{
							if($(this).prop("disabled")==false && $(this).val()!=""	)
							{
								if($(that).data("form")=="checkbox" || $(that).data("form")=="radio")
								{
									fdata[$(that).data("name")].push({"Value":this.value,"Checked":this.checked,"ID":this.id,"replicable":replicableid});
								}
								else
								{
									fdata[$(that).data("name")].push({"Value":this.value,"ID":this.id,"replicable":replicableid});
								}
							}
						});
						if(fdata[$(that).data("name")].length==0)
						{
							delete fdata[$(that).data("name")];
						}
				}
			}
		});
		object={"data":fdata,"replicable":replicable};
		return object;
}
function uploadlogo(event)
{
	event.stopPropagation();
	event.preventDefault();
	$("#uplogo").trigger("click");
}
function doupload()
{
	e=document.getElementById("uplogo");
	var last
	var file = e.files[0];
	e.value=null
	var xhr = new XMLHttpRequest();
	xhr.open('post', '/scripts/uplogo.php', true);
	(xhr.upload || xhr).addEventListener('progress', function(e) {
		var done = e.position || e.loaded
		var total = e.totalSize || e.total;
		if(done<total)
		{
			document.getElementById("uplogobutton").innerHTML=Math.round(done/total*100) + "%";
			$("#uplogobutton").css("background-color","orange");
		}
		else
		{
			document.getElementById("uplogobutton").innerHTML="Processing";
			$("#uplogobutton").css("background-color","orange");
		}
	});
	xhr.addEventListener('load', function(e) {
		msg=JSON.parse(this.responseText);
		if(this.status!="200")
		{
			document.getElementById("uplogobutton").innerHTML="Fatal Error!";
			$("#uplogobutton").css("background-color","red");
			setTimeout(function() { 	document.getElementById("uplogobutton").innerHTML="<i class='fal fa-fw fa-file-arrow-up'></i> Upload";
			$("#uplogobutton").css("background-color","lightBlue"); },5000);
			return false;
		}
		if(msg.response=="OK")
		{
			document.getElementById("uplogobutton").innerHTML="<i class='fal fa-fw fa-file-arrow-up'></i> Upload";
			$("#uplogobutton").css("background-color","lightBlue");
			$("#uplogobutton").hide();
			document.getElementById("formcontextlogo").value=msg.logo;
			document.getElementById("formcontextfavicon").value=msg.favicon;
			$("#formcontextlogo").trigger("change");
			$("#formcontextfavicon").trigger("change");
		}
		else
		{
			document.getElementById("uplogobutton").innerHTML="Image Error!";
			$("#uplogobutton").css("background-color","red");
			messagepop(msg.message,"exclamation-circle");
			setTimeout(function() { 	document.getElementById("uplogobutton").innerHTML="<i class='fal fa-fw fa-file-arrow-up'></i> Upload";
			$("#uplogobutton").css("background-color","lightBlue"); },5000);
		}
	});
	xhr.addEventListener('error', function(e) {
		document.getElementById("uplogobutton").innerHTML="Fatal Error!";
		$("#uplogobutton").css("background-color","red");
		setTimeout(function() { 	document.getElementById("uplogobutton").innerHTML="<i class='fal fa-fw fa-file-arrow-up'></i> Upload";
		$("#uplogobutton").css("background-color","lightBlue"); },5000);
	});
	var fd=new FormData;
	fd.append("file",file);
	xhr.send(fd);
}

function unselect()
{
	document.getElementById("selectedcomponent").value="";
	
	offcanvasList[0].hide();
	$("#formcontainer").find(".formpage").css("border-color","black");
	$("#formcontainer").find(".pagecol").css("border-color","#333333");
	$("#formcontainer").find(".formrow").css("border-color","#666666");
	$("#formcontainer").find(".formcol").css("border-color","#999999");
	$("#formcontainer").find(".form-group").css("border-color","#bbbbbb");
}
function headerbox()
{
	if($("#formlogo").parent().hasClass("d-none") &&  $("#formtitle").hasClass("d-none")  && $("#formdescription").hasClass("d-none"))
	{
		$("#formlogo").parent().parent().addClass("d-none");
	}
	else
	{
		$("#formlogo").parent().parent().removeClass("d-none");
	}
}
function sort_sections(a, b){
	return ($(b).attr('data-page')) <= ($(a).attr('data-page')) ? 1 : -1;
}
function saveformula(e,attribute)
{
	if(document.getElementById("formulaincrement").value=="")
	{
		$(e).removeAttr("data-"+attribute.toLowerCase()+"-formula");
		$(e).removeAttr("data-"+attribute.toLowerCase()+"-formula-custom");
		getcontext(e);
		return false;
	}
	$(e).attr("data-"+attribute.toLowerCase()+"-formula",document.getElementById("formulastart").value+"|"+document.getElementById("formulaoperator").value+"|"+document.getElementById("formulaincrement").value+"|"+document.getElementById("formulaunit").value);
	$(e).attr("data-"+attribute.toLowerCase()+"-formula-custom",document.getElementById("customstring").value);
	$("#messageModal").modal("hide");
	getcontext(e);
}
function charcount(str)
{
	str = str.split("")
	str = new Set(str);
	str = [...str].join("");
	return str;
}
function testlogreg(register,but)
{
	if(document.getElementById("email"))
	{
		document.getElementById("email").setCustomValidity("");
		if(document.getElementById("email").validity.valid==false )
		{
			document.getElementById("email").setCustomValidity("Please enter a valid email address ");
			document.getElementById("email").reportValidity();
			return false;
		}
	}
	document.getElementById("password").setCustomValidity("");
	if(register)
	{
		document.getElementById("confirmpassword").setCustomValidity("");
	}
	if(register )
	{
		if(document.getElementById("password").validity.valid==false || document.getElementById("password").value.length<10 || charcount(document.getElementById("password").value).length<8)
		{
			document.getElementById("password").setCustomValidity(charcount(document.getElementById("password").value)+"Your password must be at least 10 characters long and have at least 8 unique characters.");
			document.getElementById("password").reportValidity();
			return false;
		}
		if(document.getElementById("confirmpassword").validity.valid==false || document.getElementById("password").value!=document.getElementById("confirmpassword").value)
		{
			document.getElementById("confirmpassword").setCustomValidity("Your confirmation does not match the password you have provided.");
			document.getElementById("confirmpassword").reportValidity();
			return false;
		}
	}
	else
	{
		if(document.getElementById("password").validity.valid==false && $("#password").attr("disabled")==false)
		{
			document.getElementById("password").setCustomValidity("Please enter your password. Passwords are at least 10 characters long.");
			document.getElementById("password").reportValidity();
			return false;
		}
	}
	$(but).attr("disabled",true);			$(but).html("Please Wait...");
	$.ajax({
		method:"POST",
		url:"/login.php",
		data:$("#loginform").serializeArray(),
		dataType: "json"
	}).done(function(msg)
	{
		if(msg.result=="NotEmail")
		{
			$("#loginerror").html(msg.message);
			$(but).html("Log In");
			$(but).attr("disabled",false);		
			return false;
		}
		if(msg.result=="OK")
		{
			$("#messageModal").modal("hide");
			window.open("/dashboard","dashboard");
		}
		else
		{
			if(msg.result=="OK-MFA")
			{
				$("#loginmessage").html("<strong>Multi Factor Authentication</strong><br>Enter the 6 digit passcode from your authenticator app");
				$("#email").parent().after(`<div class="mb-3"><input class="form-control text-center" required minlength="6" maxlength="6" id="mfacode"  autocomplete="off" pattern="[0-9]{6}"></div>`);
				$("#mfacode").on("keyup",function() { $("#loginerror").html(""); this.value=this.value.trim();  if(this.value.length==6) { $("#loginbut").prop("disabled",false); } else { $("#loginbut").prop("disabled",true);  } } );
				$("#email").parent().remove();
				$("#password").parent().remove();
				$("#mfacode").focus();
				$("#loginbut").html("Check Passcode");
				$("#loginbut").prop("disabled",true);
				$("#loginerror").html("");
				$("#loginbut").off("click");
				$("#loginbut").removeAttr("onclick");
				$("#loginbut").on("click",function()
					{
						document.getElementById("mfacode").setCustomValidity("");
						if(document.getElementById("mfacode").validity.valid==false) { document.getElementById("mfacode").setCustomValidity("Enter the 6 NUMBERS from the authenticator app - ignore spaces");document.getElementById("mfacode").reportValidity(); }
						else
						{
							qrcheck($("#mfacode").val(),msg.hash);
						}
					});
					toolovers();
					$("#forgotpass").parent().parent().parent().remove();
					return false;
			}
			if(msg.result=="emailFailed" || msg.result=="accountCreatedEmailFailed")
			{
				$("#loginerror").html(msg.message);
				$("#loginbut").parent().hide();
				return false;
			}
			if(msg.result=="resetSuccess")
			{
				login(false);
				setTimeout(function() { 	$("#loginerror").html(msg.message); },500)
			$(but).attr("disabled",false);				}
			if(msg.result=="resetFailed")
			{
				setTimeout(function() { 	$("#loginerror").html(msg.message); },500)
				$(but).attr("disabled",false);					$(but).html("Change Password");
				$("#password").val("");
			$("#confirmpassword").val("");							}
			if(msg.result=="passwordReset")
			{
				$("#loginerror").html(msg.message);
				$(but).attr("disabled",false);						$(but).html("Log In");
				$("#loginmessage").html("Please enter your email address and password to login.");
				$('#password').parent().show();$('#password').attr('disabled',false);
			}
			if(msg.result=="unrecognised")
			{
				$("#loginerror").html(msg.message);
				$(but).attr("disabled",false);						$(but).html("Log In");
				$("#forgotpass").parent().show();
			}
			if(msg.result=="accountCreated")
			{
				login(false);
				setTimeout(function() { 	$("#loginerror").html(msg.message); },500)
			}
			if(msg.result=="accountFailed")
			{
				setTimeout(function() { 	$("#loginerror").html(msg.message); },500)
				$(but).html("Register");
			$(but).attr("disabled",false);					}
		}
	});
}
function qrcheck(passcode,hash)
{
	if(passcode.length!=6)
	{
		return false;
	}
	$.ajax({
		method:"POST",
		url:"/scripts/totp.php",
		data:{code:passcode,hash:hash},
		dataType:"json"
	}).done(function(msg)
	{
		if(msg.response=="OK")
		{
			setTimeout(function() { location.reload(); },1000);
			window.open("/dashboard","dashboard");
		}
		else
		{
			$("#loginerror").html(`<p style="margin-bottom:10px;text-align:center;color:red">The code is incorrect or has expired</p>`);$("#mfacode").val("");$("#mfacode").focus();
		}
	});
}
function logout()
{
	location.href="/logout.php";
}
function login(register,id)
{
	if(typeof id=="undefined")
	{
		id="";
	}
	$("#messageModal").find(".modal-header").addClass("d-none");
	$("#messagedia").removeClass("modal-sm modal-xl modal-md modal-lg");
	$("#messagedia").addClass("modal-sm");
	if(register)
	{
		
		
		if(register=="reset" && id!="")
		{
			$("#messagebod").html(`<form id="loginform"><div class="row justify-content-center"><div class="col-lg-12"><p style="text-align:center;font-family:EduBold;color:black;background-color:pink;padding:0px 10px;line-height:0.95em;font-size:3em;border-radius:5px;vertical-align:baseline;font-weight:bold">f<span  style="font-weight:normal;font-family:EduBold;" class="hidden">orm</span>s<span style="font-family:EduBold;font-weight:normal" class="hidden">trap</span></p><div id="loginerror"></div><p class="mt-4 text-center">Please provide a new complex password. It needs to be at least 10 characters long and have at least 8 unique characters</p><div id="loginerror"></div>
				<div class="form-floating mb-3"><input type="hidden" name="ID" value="`+id+`">
				<input    minlength="10" autocomplete="new-password" name="Password" type="password"  class="form-control" required id="password" placeholder="Password">
				<label for="password">Password</label>
				</div><div class="form-floating">
				<input  minlength="10" autocomplete="new-password" name="PasswordConfirm"  type="password" class="form-control" required id="confirmpassword" placeholder="Confirm Password">
				<label for="confirmpassword">Confirm Password</label>
			</div></div></div><div class="mt-3 row gx-2"><div class="col-8"><button  type="button" id="loginbut" onclick= "testlogreg('reset',this)"  class="w-100 btn btn-success">Change Password</button></div><div class="col"><button  type="button" onclick="$('#messageModal').modal('hide');" class="w-100 btn btn-danger">Cancel</button></div></div></form>`); 
		}
		else
		{
			$("#messagebod").html(`<form id="loginform"><div class="row justify-content-center"><div class="col-lg-12"><p style="text-align:center;font-family:EduBold;color:black;background-color:pink;padding:0px 10px;line-height:0.95em;font-size:3em;border-radius:5px;vertical-align:baseline;font-weight:bold">f<span  style="font-weight:normal;font-family:EduBold;" class="hidden">orm</span>s<span style="font-weight:normal;font-family:EduBold;" class="hidden">trap</span></p><div id="loginerror"></div><p class="mt-4 text-center">Please enter your email address and specify a complex password to create  a new account.</p><div id="loginerror"></div><div class="form-floating mb-3">
				<input  type="email" name="EmailAddress" autocomplete="off" class="form-control" id="email" required placeholder="name@example.com">
				<label for="email">Email Address</label>
				</div>
				<div class="form-floating mb-3">
				<input    minlength="10" name="Password" autocomplete="new-password" type="password"  class="form-control" required id="password" placeholder="Password">
				<label for="password">Password</label>
				</div><div class="form-floating">
				<input  minlength="10" name="PasswordConfirm" autocomplete="new-password"  type="password" class="form-control" required id="confirmpassword" placeholder="Confirm Password">
				<label for="confirmpassword">Confirm Password</label>
			</div></div></div><div class="mt-3 row gx-2"><div class="col-8"><button  type="button" id="loginbut" onclick= "testlogreg(true,this)"  class="w-100 btn btn-success">Register</button></div><div class="col"><button  type="button" onclick="$('#messageModal').modal('hide');" class="w-100 btn btn-danger">Cancel</button></div></div></form>`);
		}
	}
	else
	{
		$("#messagebod").html(`<form id="loginform"><div class="row justify-content-center"><div class="col-lg-12"><p style="text-align:center;font-family:EduBold;color:black;background-color:pink;padding:0px 10px;line-height:0.95em;font-size:3em;border-radius:5px;vertical-align:baseline;font-weight:bold">f<span  style="font-weight:normal;font-family:EduBold;" class="hidden">orm</span>s<span style="font-weight:normal;font-family:EduBold;" class="hidden">trap</span></p><p id="loginmessage" class="mt-4 text-center">Please enter your email address and password to login.</p><div id="loginerror"></div><div class="form-floating mb-3">
			<input type="email" name="EmailAddress" class="form-control" id="email" required placeholder="name@example.com">
			<label for="email">Email Address</label>
			</div>
			<div class="form-floating mb-3">
			<input minlength="10" name="Password" type="password" class="form-control" required id="password" placeholder="Password">
			<label for="password">Password</label>
		</div></div></div><div class="row gx-2"><div class="col-8"><button id="loginbut" type="button" onclick= "testlogreg(false,this)"  class="w-100 btn btn-primary">Log In</button></div><div class="col"><button type="button"  onclick="$('#messageModal').modal('hide');" class="w-100 btn btn-danger">Cancel</button></div></div><div class="row"><div class="col mt-3"><p class="text-center"><a id="forgotpass" onclick="$(this).parent().hide();	$('#loginmessage').html('Enter your email address to request a password reset');$('#loginerror').html('');$('#loginbut').html('Reset Password');$('#password').parent().hide();$('#password').attr('disabled',true)" href="#">I have forgotten my password</a></p></div></div></form>`);
	}
	$("#messageModal").modal("show"); 
	$("#loginform").on("submit",function(e)
		{
			e.preventDefault();
		});
		$("#loginform").on("keyup",function(e)
			{
				if(e.keyCode==13)
				{
				$("#loginbut").trigger("click");					}
			});
}
function minmaxfunction(e,attribute,fieldtype)
{
	$("#messagebod").find("btn").off("*");
	$(".modal-header").removeClass("d-none");
	$(".modal-header").html(`<h5 class="modal-title">Formula for the <strong>` + attribute + `</strong> value of the field <strong>`+e.id + `</strong></h5>
	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>`);
	$("#messagedia").removeClass("modal-sm modal-md");
	$("#messagedia").addClass("modal-lg");
	if(fieldtype=="date")
	{
		$("#messagebod").html(`<div class="row gx-1"><div class="col-6 col-lg-2 mb-1">Set <strong>`+ attribute+`</strong> to:</div><div class="col-6 col-lg-2  mb-1"><select id="formulastart" class="form-select form-select-sm"><option value="Today">Today</option><option value="custom">Custom</option></select></div><div class="col-6 col-lg-2  mb-1 formulaform"><select id="formulaoperator" class="form-select form-select-sm"><option value="Plus">Plus</option><option value="Minus">Minus</option></select></div><div class="col-6 col-lg-2  mb-1 formulaform"><input value="1" id="formulaincrement" class="form-control form-control-sm" type="number"></div><div class="col-6 col-lg-2  mb-1 formulaform"><select id="formulaunit" class="form-select form-select-sm"><option value="Seconds">Seconds</option><option value="Minutes">Minutes</option><option value="Hours">Hours</option><option selected value="Days">Days</option><option value="Weeks">Weeks</option><option value="Months">Months</option><option value="Years">Years</option></select></div><div style="display:none" class="customstring col-6 col-lg-6  mb-1"><input placeholder="e.g. First Day of This Month" class="form-control form-control-sm" id="customstring"></div><div class="col-6 col-lg-2  mb-1"><button id="formtest" class="w-100 btn btn-warning btn-sm" >Test</button><button  id="formgo" style="display:none" class="w-100 btn btn-primary btn-sm" >Save</button></div></div><div  class="row mt-3"><div class="col" id="formtestdiv"></div></div><p><small>Note that this will be the evaluated when the form is first loaded. To set or change the value of <strong>`+ attribute+`</strong> during form completion, use <strong>Field Events</strong>.</small></p>`);
	}
	if(fieldtype=="datetime-local")
	{
		$("#messagebod").html(`<div class="row gx-1"><div class="col-6 col-lg-2 mb-1">Set <strong>`+ attribute+`</strong> to:</div><div class="col-6 col-lg-2  mb-1"><select id="formulastart" class="form-select form-select-sm"><option value="Now">Now</option><option value="custom">Custom</option></select></div><div class="col-6 col-lg-2  mb-1 formulaform"><select id="formulaoperator" class="form-select form-select-sm"><option value="Plus">Plus</option><option value="Minus">Minus</option></select></div><div class="col-6 col-lg-2  mb-1 formulaform"><input value="1" id="formulaincrement" class="form-control form-control-sm" type="number"></div><div class="col-6 col-lg-2  mb-1 formulaform"><select id="formulaunit" class="form-select form-select-sm"><option value="Seconds">Seconds</option><option value="Minutes">Minutes</option><option value="Hours">Hours</option><option selected value="Days">Days</option><option value="Weeks">Weeks</option><option value="Months">Months</option><option value="Years">Years</option></select></div><div style="display:none" class="customstring col-6 col-lg-6  mb-1"><input  class="form-control form-control-sm" id="customstring"></div><div class="col-6 col-lg-2  mb-1"><button id="formtest" class="w-100 btn btn-warning btn-sm" >Test</button><button  id="formgo" style="display:none" class="w-100 btn btn-primary btn-sm" >Save</button></div></div><div  class="row mt-3"><div class="col" id="formtestdiv"></div></div><p><small>Note that this will be the evaluated when the form is first loaded. To set or change the value of <strong>`+ attribute+`</strong> during form completion, use <strong>Field Events</strong>.</small></p>`);
	}
	if(fieldtype=="time")
	{
	$("#messagebod").html(`<div class="row gx-1"><div class="col-6 col-lg-2 mb-1">Set <strong>`+ attribute+`</strong> to:</div><div class="col-6 col-lg-2  mb-1"><select id="formulastart" class="form-select form-select-sm"><option value="Now">Now</option><option value="custom">Custom</option></select></div><div class="col-6 col-lg-2  mb-1 formulaform"><select id="formulaoperator" class="form-select form-select-sm"><option value="Plus">Plus</option><option value="Minus">Minus</option></select></div><div class="col-6 col-lg-2  mb-1 formulaform"><input value="1" id="formulaincrement" class="form-control form-control-sm" type="number"></div><div class="col-6 col-lg-2  mb-1 formulaform"><select id="formulaunit" class="form-select form-select-sm"><option value="Seconds">Seconds</option><option value="Minutes">Minutes</option><option value="Hours">Hours</option></select></div><div style="display:none" class="customstring col-6 col-lg-6  mb-1"><input  class="form-control form-control-sm" id="customstring"></div><div class="col-6 col-lg-2  mb-1"><button id="formtest" class="w-100 btn btn-warning btn-sm" >Test</button><button  id="formgo" style="display:none" class="w-100 btn btn-primary btn-sm" >Save</button></div></div><div  class="row mt-3"><div class="col" id="formtestdiv"></div></div><p><small>Note that this will be the evaluated when the form is first loaded. To set or change the value of <strong>`+ attribute+`</strong> during form completion, use <strong>Field Events</strong>.</small></p>`);		}
	$("#messageModal").modal("show");
	if($(e).attr("data-"+attribute.toLowerCase()+"-formula"))
	{
		
		data=$(e).attr("data-"+attribute.toLowerCase()+"-formula").split("|");
		$("#formulastart").val(data[0]);
		$("#formulaoperator").val(data[1]);
		$("#formulaincrement").val(data[2]);
		$("#formulaunit").val(data[3]);		
		$("#customstring").val($(e).attr("data-"+attribute.toLowerCase()+"-formula-custom"));
		
	}		
	$("#messagebod").find("input,select").on("change blur keyup",function() {
		$(".btn#formgo").hide();
		$(".btn#formtest").show();
		$("#formtestdiv").html("");
	});
	$("#messagebod #formulastart").on("change blur",function() { if(this.value=="custom")
		{
			$(".formulaform").hide();
			$(".customstring").show();
		}
		else
		{
			$(".formulaform").show();
			$(".customstring").hide();
		}
		$("#formtestdiv").html("");
	});
	$("#formulastart").trigger("change");
	$("#messagebod").find(".btn#formgo").on("click",function() { saveformula(e,attribute);  });
	$("#messagebod").find(".btn#formtest").on("click",function() { testformula(e,attribute); });
	
}
function testformula(e,attr)
{
	var dispdate;
	
	months=["January","Feburary","March","April","May","June","July","August","September","October","November","December"];
	if(document.getElementById("formulaoperator").value=="" || document.getElementById("formulastart").value=="" || document.getElementById("formulaincrement").value=="" || document.getElementById("formulaunit").value=="")
	{
		$("#formtestdiv").html("<p style='text-align:center;border-radius:10px;padding:5px;border:2px dotted red'><small>Please Complete all Parts of the Formula</small></p>");
		$(".btn#formgo").hide();
		$(".btn#formtest").show();
		return false;
	}
	if(document.getElementById("formulastart").value=="custom" && document.getElementById("customstring").value=="")
	{
		$("#formtestdiv").html("<p style='text-align:center;border-radius:10px;padding:5px;border:2px dotted red'><small>Please enter a custom string</small></p>");
		$(".btn#formgo").hide();
		$(".btn#formtest").show();
		return false;
	}
	string=document.getElementById("formulastart").value;
	if(document.getElementById("formulaoperator").value=="Plus")
	{
		string=string+" +";
	}
	else
	{
		string=string+" -";
	}
	string=string+"" + document.getElementById("formulaincrement").value + " " + document.getElementById("formulaunit").value;
	if(document.getElementById("formulastart").value=="custom")
	{
		string=document.getElementById("customstring").value;
	}
	if(strtotime(string))
	{
		calcdate=new Date(strtotime(string)*1000);
		$(".btn#formgo").show();
		$(".btn#formtest").hide();
	}
	else
	{
		if(document.getElementById("formulastart").value=="custom")
		{
			$("#formtestdiv").html(`<p style='text-align:center;border-radius:10px;padding:5px;border:2px dotted red'><small><strong>The custom string could not be evaluated</strong><br>Provide a text description of the date you wish to be used.<br><br>The custom string is evaluated using the Locutus JavaScript port of the PHP strtotime() function.<br>For more information on how these functions work, visit:<br><a href="https://locutus.io/php/datetime/strtotime/" target="help" >https://locutus.io/php/datetime/strtotime/</a><br><a target="help"   href="https://www.php.net/manual/en/function.strtotime.php">https://www.php.net/manual/en/function.strtotime.php</a></small></p>`);
		}
		else
		{
			$("#formtestdiv").html(`<p style='text-align:center;border-radius:10px;padding:5px;border:2px dotted red'><small><strong>The formula could not be evaluated</strong></small></p>`);
		}
		$(".btn#formgo").hide();
		$(".btn#formtest").show();
		return false;
	}
	if($(e).data("form")=="date")
	{
		dispdate=calcdate.getFullYear()+"-"+str_pad(calcdate.getMonth()+1,2,"0","STR_PAD_LEFT")+"-"+str_pad(calcdate.getDate(),2,"0","STR_PAD_LEFT");
	}
	if($(e).data("form")=="datetime-local")
	{
		dispdate=calcdate.getFullYear()+"-"+str_pad(calcdate.getMonth()+1,2,"0","STR_PAD_LEFT")+"-"+str_pad(calcdate.getDate(),2,"0","STR_PAD_LEFT")+"T"+str_pad(calcdate.getHours(),2,"0","STR_PAD_LEFT")+":"+str_pad(calcdate.getMinutes(),2,"0","STR_PAD_LEFT");
	}
	if($(e).data("form")=="time")
	{
		dispdate=str_pad(calcdate.getHours(),2,"0","STR_PAD_LEFT")+":"+str_pad(calcdate.getMinutes(),2,"0","STR_PAD_LEFT");
	}
	document.getElementById("customstring").value=string;
	$("#formtestdiv").html("<p style='text-align:center;border-radius:10px;padding:5px;border:2px dotted green'><small>If you started the form now, the <strong>"+ attr + "</strong> attribute of the field would be set to <input  style='text-align:center;display:inline;width:auto;' class='form-control form-control-sm' type='" + $(e).data("form") + "' value='" + dispdate + "'></strong></small></p>");
}
function publish()
{
	saveform(true);
	$("#popupModal").find(".modal-header").removeClass("d-none");
	$("#popupModal").find(".modal-header").html(`<h5 class="d-flex modal-title flex-grow-1">Choose your Publishing Preference</h5>
		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
	`);
	offcanvasList[0].hide();
	offcanvasList[1].hide();
	$("#popupdia").removeClass("modal-sm modal-md modal-xl modal-xxl");
	$("#popupdia").addClass("modal-lg");
	$("#popupbod").css("height","auto");
			$("#popupbod").css("overflow","");
	$("#popupbod").html(`<div id="publishcompare"><div class="row gx-5"><div class="hosted col text-center"><i style="color:green" class="fal fa-10x fa-cloud-arrow-up"></i><p><strong>managed by formstrap</strong></p><button onclick='$("#publishcompare").find(".hosted").toggleClass("d-none")
		;$("#publishcompare").find(".selfhost").toggleClass("d-none")' class="d-md-none btn btn-sm btn-warning">View Self-Hosting Options</button><p class="mt-3">Upload your form to  <strong>formstrap</strong>.<br><strong>formstrap</strong> will host your form and process and store all form submissions. Various options are available for you to retrieve the data.</div><div class="selfhost d-none  d-md-block col text-center"><i class="fal fa-10x fa-folder-arrow-down" style="color:red"></i><p><strong>self-hosted</strong></p><button onclick=' $("#publishcompare").find(".hosted").toggleClass("d-none")
		;$("#publishcompare").find(".selfhost").toggleClass("d-none")' class=" d-md-none btn btn-sm btn-warning">View Hosted Options</button><p class="mt-3">Download <strong>almost</strong> everything you need for the client-side to publish the form on your own website. You just need to handle the processing of the submitted form data.</div></div><div class="row"><div class="col text-center hosted "><strong>Between 1p and 17p per form per day</strong></span><br><small>based on the number of active forms you have each day</small><br><br></div><div class="selfhost d-none d-md-block col text-center"><strong>Free! </strong><br><small>you can make an optional donation on the next page</small><br><br></div></div><div class="row"><div class="hosted col text-center"><button onclick="login(false)"  class="btn  btn-primary">Log In</button>&nbsp;&nbsp;or&nbsp;&nbsp;<button onclick="login(true)" class="btn  btn-success">Register</button></div><div class="selfhost d-none d-md-block  col text-center"><button class="btn  btn-danger" onclick="download()">Download</button></div></div><div class="row "><div class="col text-center"><hr><h3>Compare</h3><button onclick='$("#publishcompare").find(".hosted").toggleClass("d-none")
		;$("#publishcompare").find(".selfhost").toggleClass("d-none")' class="d-md-none btn btn-sm btn-warning">Toggle</button><hr></div></div>
		<table class="table table-bordered table-striped">
		<tr><td class="hosted w-50 text-center align-middle">create, edit and manage multiple forms at the same time</td><td class=" selfhost d-none d-md-table-cell w-50 text-center align-middle">create one form at a time</td></tr>
		<tr><td class="hosted text-center align-middle"><strong>formstrap</strong> hosts your forms at a custom URL: https://formstrap.com/<strong>yourcompany</strong>.<br><small>you can download the forms too if you want to self-host</small></td><td class="selfhost d-none d-md-table-cell  text-center align-middle">you publish the form on your website<br><small>(client-side scripts and instructons provided)</small></td></tr>
		<tr><td class="hosted text-center align-middle">edit live forms on the fly using the <strong>formstrap</strong> WYSIWYG editor</td><td class="selfhost d-none d-md-table-cell  text-center align-middle">to edit live forms you need to edit the raw html provided in the download</td></tr>
		<tr><td class="hosted text-center align-middle"><strong>formstrap</strong> processes the form and stores the submitted data in our UK datacentre<br><small>even if you are self-hosting the client-side</small></td><td class=" selfhost d-none d-md-table-cell text-center align-middle">you create your own server-side script to process submitted POST data</td></tr>
		<tr><td class="hosted text-center align-middle">access to support</td><td class="selfhost d-none d-md-table-cell text-center align-middle" rowspan="7"></td></tr>
		<tr><td class="hosted text-center align-middle">unlimited form submissions while forms are active</td></tr>
		<tr><td class="hosted text-center align-middle"><strong>formstrap</strong> hosted forms are optionally protected from SPAM by Google reCAPTCHA v3</td></tr>
		<tr><td class="hosted text-center align-middle">embedding - get a  <strong>formstrap</strong> managed form with a seamless user experience</td></tr>
		<tr><td class="hosted text-center align-middle"><strong>formstap</strong> can send an email confirmation to the person completing the form on successful submission</td></tr>
		<tr><td class="hosted text-center align-middle">receive a PDF of the submitted form by email each time a form is submitted</td></tr>
		<tr><td class="hosted text-center align-middle">log in to download the data for importing into excel, SPSS etc</td></td></tr>
		<tr class="d-none"><td class="hosted text-center align-middle">analyse data using <strong>formstrap</strong> analytics<br>(coming soon)</td></tr></table><div class="text-center"><button onclick='$("#publishcompare").find(".hosted").toggleClass("d-none")
	;$("#publishcompare").find(".selfhost").toggleClass("d-none")' class="d-md-none btn btn-sm btn-warning">Toggle</button></div></div>`);
	$("#popupModal").modal("show");
}
function tour()
{
	$("#popupModal").find(".modal-header").removeClass("d-none");
	$("#popupModal").find(".modal-header").html(`<h5 class="modal-title"><i class="fal fa-fw fa-bus"></i> formstrap tour</h5>
		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
	`);
	offcanvasList[0].hide();
	offcanvasList[1].hide();
	$("#popupdia").removeClass("modal-sm modal-md");
	$("#popupdia").addClass("modal-lg");
	$("#popupbod").html(`<div id="carouselExampleCaptions" data-bs-theme="dark" class="carousel slide">
		<div class="carousel-indicators">
		<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
		<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
		<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
		<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
		<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
		<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5" aria-label="Slide 6"></button>
		<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="6" aria-label="Slide 7"></button>
		<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="7" aria-label="Slide 8"></button>
		</div>
		<div class="carousel-inner">
		<div class="carousel-item active">
		<img src="/images/tour/slide1.png" class="d-block w-100" alt="...">
		<div class="carousel-caption d-none d-md-block">
		<h5>Create responsive, multi-page forms</h5>
		<p>Uses the <a href="https://getbootstrap.com" target="bootstrap">Bootstrap 5</a> grid system for complex layouts</p>
		</div>
		</div>
		<div class="carousel-item">
		<img src="/images/tour/slide2.png" class="d-block w-100" alt="...">
		<div class="carousel-caption d-none d-md-block">
		<h5>Enclose form components or sections in cards</h5>
		<p>Colour coordinate sections of your form with Bootstrap semantic classes.</p>
		</div>
		</div>
		<div class="carousel-item">
		<img src="/images/tour/slide3.png" class="d-block w-100" alt="...">
		<div class="carousel-caption d-none d-md-block">
		<h5>Use a wide range of HTML5 input types</h5>
		<p>Amend the full range of attributes for each input type.</p>
		</div>
		</div>
		<div class="carousel-item">
		<img src="/images/tour/slide4.png" class="d-block w-100" alt="...">
		<div class="carousel-caption d-none d-md-block">
		<h5>Create events based on user input</h5>
		<p>Change attributes, show/hide other components, change form flow.</p>
		</div>
		</div>
		<div class="carousel-item">
		<img src="/images/tour/slide5.png" class="d-block w-100" alt="...">
		<div class="carousel-caption d-none d-md-block">
		<h5>Create Multi Page Forms</h5>
		<p>Set preferred pagination and submission buttons.</p>
		</div>
		</div><div class="carousel-item">
		<img src="/images/tour/slide6.png" class="d-block w-100" alt="...">
		<div class="carousel-caption d-none d-md-block">
		<h5>Create Custom Validation Errors</h5>
		<p>Specify a variety of validation errors based on field type.</p>
		</div>
		</div>
		<div class="carousel-item">
		<img src="/images/tour/slide7.png" class="d-block w-100" alt="...">
		<div class="carousel-caption d-none d-md-block">
		<h5>Download Files for Self-Hosting for Free</h5>
		<p>All you have to do is handle the form submission.</p>
		</div>
		</div>
		<div class="carousel-item">
		<img src="/images/tour/slide8.png" class="d-block w-100" alt="...">
		<div class="carousel-caption d-none d-md-block">
		<h5>Or register to host with formstrap</h5>
		<p>Manage multipe forms, view submitted data and much more in the dashboard.</p>
		</div>
		</div>
		</div>
		<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
		<span class="carousel-control-prev-icon" ></span>
		<span class="visually-hidden">Previous</span>
		</button>
		<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
		<span class="carousel-control-next-icon" ></span>
		<span class="visually-hidden">Next</span>
		</button>
	</div>`);
	$("#popupModal").modal("show");
	$('#carouselExampleControls').carousel()
}
function serialiseform(save)
{
	
	$("#formcontainer").find(".formpage").sort(sort_sections) // sort elements
	.appendTo('#formcontainer'); // append again to the list
	layout={};
	fields={};
	pagination={"Scroll":$("#formcontainer").attr("data-paginationscroll"),"Position":$("#formcontainer").attr("data-paginationposition"),"Submit":$("#formcontainer").attr("data-paginationsubmit"),"Format":$("#formcontainer").attr("data-pagination"),"Pages":$("#formcontainer").attr("data-pages")};
	formcontainerclasses=getclass($("#fullformcontainer"),3);
	logocontainerclasses=getclass($("#formlogocontainer"),3);
	textcontainerclasses=getclass($("#formintrocontainer"),3);
	texttitleclasses=getclass($("#formtitle"),3);
	textdescclasses=getclass($("#formdescription"),3);
	
	
	heading={
		"logo":{
			"src":$("#formlogo").attr("src"),
			"alt":$("#formlogo").attr("alt"),
			"icon":$("#formcontainer").attr("data-favicon"),
			"aspect":$("#formlogo").attr("data-aspectratio"),
			"containerclasses":logocontainerclasses
		},
		"text":{
			"containerclasses": textcontainerclasses,
			"title":{
				"text":$("#formtitle").html(),
				"classes":$("#formtitle").attr("class")
			},						
			"description":{
				"renderHTML":$("#formcontainer").attr("data-renderhtml"),
				"text":$("#formdescription").html(),
				"classes":	$("#formdescription").attr("class")
			}
		}
	};
	
	sections=[];
	seccols=[];
	rows=[];
	customids={};
	rowcols=[];
	redactions="no";
	fieldorder=[];
	// THE FORM
	$("#formcontainer").find(".formpage").each(function()
		{
			if($(this).attr("data-customid"))
			{
				customids[$(this).attr("id")]={"ID":$(this).attr("data-customid"),Type:".formpage"}; 
			}
			// FIND SECTIONS (pagecols)
			seccols=[];
			$(this).find(".pagecol").each(function()
				{
					if($(this).attr("data-customid"))
					{
						customids[$(this).attr("id")]={"ID":$(this).attr("data-customid"),Type:".pagecol"};
					}
					// FIND ROWS (formrow)
					rows=[];
					$(this).find(".formrow").each(function()
						{
							if($(this).attr("data-customid"))
							{
								customids[$(this).attr("id")]={"ID":$(this).attr("data-customid"),Type:".formrow"};
							}
							// FIND COLUMNS
							rowcols=[];
							$(this).find(".formcol").each(function()
								{
									if($(this).attr("data-customid"))
									{
										customids[$(this).attr("id")]={"ID":$(this).attr("data-customid"),Type:".formcol"};
									}
									// FIND FIELDS
									fieldorder=[];
									$(this).find(".form-group").each(function() {
										if($(this).attr("data-customid"))
										{
											customids[$(this).attr("id")]={"ID":$(this).attr("data-customid"),Type:".form-group"};
										}
										if($(this).hasClass("otherselectgroup")==false)
										{
											fieldorder.push({"SystemID":$(this).attr("id")});
										}
									});
									classes=getclass(this,1);
									containerclasses=getclass(this,2);
									if($(this).attr("data-card")=="Yes")
									{
										
										$(this).find(".columncard").attr("data-colour");
										rowcols.push({"SystemID":$(this).attr("id"),"CustomID":$(this).attr("data-customid"),"CustomClass":$(this).attr("data-customclass"),"Title":$(this).find(".column-header").html(),"Description":$(this).find(".column-description").html(),"DescriptionHTML":$(this).attr("data-renderhtml"),"Visible":$(this).attr("data-initiallyvisible"),"CardColour":$(this).attr("data-cardcolour"),"Flex":$(this).find("[data-auto-height=true]").length>0,"Card":$(this).attr("data-card"),"Class":classes,"ContainerClass":containerclasses,"Fields":fieldorder}); 
									}
									else
									{
										rowcols.push({"SystemID":$(this).attr("id"),"CustomID":$(this).attr("data-customid"),"CustomClass":$(this).attr("data-customclass"),"Title":$(this).find(".column-header").html(),"Description":$(this).find(".column-description").html(),"Flex":$(this).find("[data-auto-height=true]").length>0,"DescriptionHTML":$(this).attr("data-renderhtml"),"Visible":$(this).attr("data-initiallyvisible"),"Class":classes,"ContainerClass":containerclasses,"Fields":fieldorder});
									}
								});
								classes=getclass(this,1);
								containerclasses=getclass(this,2);
								if($(this).attr("data-card")=="Yes")
								{
									rows.push({"SystemID":$(this).attr("id"),"CustomID":$(this).attr("data-customid"),"CustomClass":$(this).attr("data-customclass"),"Title":$(this).find(".row-header").html(),"Description":$(this).find(".row-description").html(),"DescriptionHTML":$(this).attr("data-renderhtml"),"Replicable":$(this).attr("data-replicable"),"ReplicableAdd":$(this).attr("data-replicableadd"),"ReplicableDelete":$(this).attr("data-replicabledelete"),"Visible":$(this).attr("data-initiallyvisible"),"Gutter-X":$(this).attr("data-gx"),"Gutter-Y":$(this).attr("data-gy"),"CardColour":$(this).attr("data-cardcolour"),"Flex":$(this).find("[data-auto-height=true]").length>0,"Card":$(this).attr("data-card"),"Class":classes,"ContainerClass":containerclasses,"RowColumns":rowcols});
								}
								else
								{
									rows.push({"SystemID":$(this).attr("id"),"CustomID":$(this).attr("data-customid"),"CustomClass":$(this).attr("data-customclass"),"Title":$(this).find(".row-header").html(),"Description":$(this).find(".row-description").html(),"DescriptionHTML":$(this).attr("data-renderhtml"),"Replicable":$(this).attr("data-replicable"),"ReplicableAdd":$(this).attr("data-replicableadd"),"ReplicableDelete":$(this).attr("data-replicabledelete"),"Visible":$(this).attr("data-initiallyvisible"),"Gutter-X":$(this).attr("data-gx"),"Gutter-Y":$(this).attr("data-gy"),"Class":classes,"ContainerClass":containerclasses,"Flex":$(this).find("[data-auto-height=true]").length>0,"RowColumns":rowcols});
								}
						});
						classes=getclass(this,1);
						containerclasses=getclass(this,2);
						if($(this).attr("data-card")=="Yes")
						{
							seccols.push({"SystemID":$(this).attr("id"),"CustomID":$(this).attr("data-customid"),"CustomClass":$(this).attr("data-customclass"),"Title":$(this).find(".sectioncolumn-header").html(),"Description":$(this).find(".sectioncolumn-description").html(),"DescriptionHTML":$(this).attr("data-renderhtml"),"Visible":$(this).attr("data-initiallyvisible"),"CardColour":$(this).attr("data-cardcolour"),"Card":$(this).attr("data-card"),"Flex":$(this).find("[data-auto-height=true]").length>0,"Class":classes,"ContainerClass":containerclasses,"Rows":rows,"Replicable":$(this).attr("data-replicable"),"ReplicableAdd":$(this).attr("data-replicableadd"),"ReplicableDelete":$(this).attr("data-replicabledelete")});
						}
						else
						{
							seccols.push({"SystemID":$(this).attr("id"),"CustomID":$(this).attr("data-customid"),"CustomClass":$(this).attr("data-customclass"),"Title":$(this).find(".sectioncolumn-header").html(),"Description":$(this).find(".sectioncolumn-description").html(),"Flex":$(this).find("[data-auto-height=true]").length>0,"DescriptionHTML":$(this).attr("data-renderhtml"),"Visible":$(this).attr("data-initiallyvisible"),"Class":classes,"ContainerClass":containerclasses,"Rows":rows,"Replicable":$(this).attr("data-replicable"),"ReplicableAdd":$(this).attr("data-replicableadd"),"ReplicableDelete":$(this).attr("data-replicabledelete")});
						}
				});
				classes=getclass(this,1);
				containerclasses=getclass(this,2);
				
				if($(this).attr("data-nopdf")=="yes")
				{
					redactions="yes";
				}
				if($(this).attr("data-card")=="Yes")
				{
					sections.push({"Page":$(this).attr("data-page"),"SystemID":$(this).attr("id"),"NoPDF":$(this).attr("data-nopdf"),"CustomID":$(this).attr("data-customid"),"Visible":$(this).attr("data-initiallyvisible"),"CustomClass":$(this).attr("data-customclass"),"Flex":$(this).find("[data-auto-height=true]").length>0,"Title":$(this).find(".section-header").html(),"Description":$(this).find(".section-description").html(),"DescriptionHTML":$(this).attr("data-renderhtml"),"Gutter-X":$(this).attr("data-gx"),"Gutter-Y":$(this).attr("data-gy"),"CardColour":$(this).attr("data-cardcolour"),"Card":$(this).attr("data-card"),"Class":classes,"ContainerClass":containerclasses,"SectionColumns":seccols}); 
				}
				else
				{
					sections.push({"Page":$(this).attr("data-page"),"SystemID":$(this).attr("id"),"NoPDF":$(this).attr("data-nopdf"),"CustomID":$(this).attr("data-customid"),"Visible":$(this).attr("data-initiallyvisible"),"Flex":$(this).find("[data-auto-height=true]").length>0,"CustomClass":$(this).attr("data-customclass"),"Title":$(this).find(".section-header").html(),"Description":$(this).find(".section-description").html(),"DescriptionHTML":$(this).attr("data-renderhtml"),"Class":classes,"ContainerClass":containerclasses,"Gutter-X":$(this).attr("data-gx"),"Gutter-Y":$(this).attr("data-gy"),"SectionColumns":seccols});
				}
		}
	);
	layout["Form"]={"hasRedactions":redactions,"ID":$("#formcontainer").attr("data-id"),"Name":$("#formcontainer").attr("data-name"),"SaveToLocal":$("#formcontainer").attr("data-localsave"),"SaveOpt":	$("#formcontainer").attr("data-localsaveopt"),"TextColour":$("#formcontainer").attr("data-textcolour"),"Colour":$("#formcontainer").attr("data-colour"),"Class":formcontainerclasses,"Sections":sections,"Heading":heading,"Pagination":pagination,"POSTURL":$("#formcontainer").attr("data-posturl"),"SuccessURL":$("#formcontainer").attr("data-successurl"),"FailureURL":$("#formcontainer").attr("data-failureurl"),"reCAPTCHA":$("#formcontainer").attr("data-recaptchakey")};
	fieldgroups={};
	x=0;
	$("#formcontainer").find(".form-group").each(function()
		{
			if($(this).hasClass("otherselectgroup")==false)
			{
				b=$(this);
				c=$(this).attr("id");
				classes=getclass(this,1);
				containerclasses=getclass(this,2)
				fields[c]={};
				fields[c]["Order"]=x;
				fields[c]["Parent"]=b.closest(".formcol").attr("id");
				fields[c]["Type"]=b.attr("data-form");
				fields[c]["Attributes"]={};
				if(b.closest("[data-replicable=yes]").length>0)
				{
					fields[c]["Attributes"]["replicablegroup"]=b.closest("[data-replicable=yes]").attr("id");
					fields[c]["Attributes"]["replicablegroupname"]=b.closest("[data-replicable=yes]").attr("data-replicablename");
				}
				fields[c]["Attributes"]["required"]=b.attr("data-required");
				fields[c]["Attributes"]["readonly"]=b.attr("data-readonly");
				fields[c]["Attributes"]["disabled"]=b.attr("data-disabled");
				fields[c]["Attributes"]["donotdisable"]=b.attr("data-enabled-on-hide");
				if( b.attr("data-form")=="checkbox" || b.attr("data-form")=="radio")
				{
					fields[c]["Attributes"]["twocols"]=b.attr("data-twocols");
				}
				if(b.attr("data-form")=="textarea")
				{
					fields[c]["Attributes"]["autoheight"]=b.attr("data-auto-height");
					fields[c]["Attributes"]["height"]=b.attr("data-height-numeric");
				}
				fields[c]["Attributes"]["sendmail"]=b.attr("data-sendmail");
				fields[c]["Attributes"]["html"]=b.attr("data-html");
				fields[c]["Attributes"]["visible"]=b.attr("data-initiallyvisible");
				if(b.attr("data-form")=="select" || b.attr("data-form")=="checkbox" || b.attr("data-form")=="radio")
				{
					fields[c]["Attributes"]["otherspecify"]=b.attr("data-other-specify");
				}
				fields[c]["Attributes"]["customid"]=b.attr("data-customid");
				fields[c]["Attributes"]["customclass"]=b.attr("data-customclass");
				if(b.attr("data-customclass")!="" && typeof b.attr("data-customclass")!="undefined")
				{
					if(typeof fieldgroups["."+b.attr("data-customclass")]=="undefined")
					{
						fieldgroups["."+b.attr("data-customclass")]=[];
					}
					fieldgroups["."+b.attr("data-customclass")].push(b.attr("id"));
				}
				fields[c]["Attributes"]["floatinglabel"]=b.attr("data-floatinglabel");
				fields[c]["Attributes"]["autocomplete"]=b.attr("data-autocomplete");
				fields[c]["Attributes"]["defaultvalue"]=b.attr("data-defaultvalue");
				fields[c]["Attributes"]["minformula"]=b.attr("data-min-formula");
				fields[c]["Attributes"]["mincustomformula"]=b.attr("data-min-formula-custom");
				fields[c]["Attributes"]["min"]=b.find("input").eq(0).attr("min");
				fields[c]["Attributes"]["max"]=b.find("input").eq(0).attr("max");
				fields[c]["Attributes"]["step"]=b.find("input").eq(0).attr("step");
				fields[c]["Attributes"]["minlength"]=b.find("input,textarea").eq(0).attr("minlength");
				fields[c]["Attributes"]["maxlength"]=b.find("input,textarea").eq(0).attr("maxlength");
				fields[c]["Attributes"]["class"]=classes;
				fields[c]["Attributes"]["maxformula"]=b.attr("data-max-formula");
				fields[c]["Attributes"]["maxcustomformula"]=b.attr("data-max-formula-custom");
				fields[c]["Attributes"]["defaultformula"]=b.attr("data-default-formula");
				fields[c]["Attributes"]["defaultcustomformula"]=b.attr("data-default-formula-custom");
				fields[c]["Attributes"]["name"]=b.attr("data-name");
				fields[c]["Attributes"]["inputid"]=b.find("input,select,textarea").eq(0).attr("id");
				fields[c]["Attributes"]["inputsize"]=b.attr("data-input-size");
				fields[c]["Attributes"]["prepend"]=b.attr("data-prepend");
				fields[c]["Attributes"]["append"]=b.attr("data-append");
				fields[c]["Attributes"]["inputgroup"]=b.attr("data-inputgroup");
				if(b.attr("data-form")=="checkbox" || b.attr("data-form")=="radio")
				{
					fields[c]["Attributes"]["inputid"]=b.attr("id")+"-options";
					fields[c]["Legend"]=b.find("legend").find(".labeltext").eq(0).html();
					fields[c]["Options"]=[];
					b.find(".checks").find(".form-check").each(function() {
						fields[c]["Options"].push({"Value":$(this).find("input").val(),"Label":$(this).find("label").html()});
					});
				}
				else
				{
					if(b.attr("data-form")=="select")
					{
						fields[c]["Options"]=[];
						b.find("select").eq(0).find("option").each(function() {
							fields[c]["Options"].push({"Value":$(this).val(),"Label":$(this).html()});
						});
					}
					else
					{
						fields[c]["Attributes"]["placeholder"]=b.find("input,textarea").eq(0).attr("placeholder");
						fields[c]["Attributes"]["pattern"]=b.find("input,select,textarea").eq(0).attr("pattern");
					}
					fields[c]["Label"]=b.find("label").find(".labeltext").html();
				}
				fields[c]["Note"]=b.attr("data-note");
				fields[c]["NotePosition"]=b.attr("data-note-position");
				fields[c]["CustomValidation"]={};
				fields[c]["CustomValidation"]["Required"]=b.find("input,select,textarea").eq(0).attr("data-required");
				fields[c]["CustomValidation"]["RangeOver"]=b.find("input,select,textarea").eq(0).attr("data-rangeover");
				fields[c]["CustomValidation"]["RangeUnder"]=b.find("input,select,textarea").eq(0).attr("data-rangeunder");
				fields[c]["CustomValidation"]["TooLong"]=b.find("input,select,textarea").eq(0).attr("data-toolong");
				fields[c]["CustomValidation"]["TooShort"]=b.find("input,select,textarea").eq(0).attr("data-tooshort");
				fields[c]["CustomValidation"]["TypeMismatch"]=b.find("input,select,textarea").eq(0).attr("data-mismatch");
				fields[c]["CustomValidation"]["StepMismatch"]=b.find("input,select,textarea").eq(0).attr("data-stepmismatch");
				fields[c]["CustomValidation"]["Pattern"]=b.find("input,select,textarea").eq(0).attr("data-pattern");
				fields[c]["CustomValidation"]["CustomEvent"]=b.find("input,select,textarea").eq(0).attr("data-customevent");
			}
			x++;
		});
		form={};
		form["layout"]=layout;
		form["fields"]=fields;
		form["fieldgroups"]=fieldgroups;
		form["events"]=JSON.parse(localStorage.getItem("events"));
		form["customids"]=customids;
		return form;
}
function fieldcontext(e)
{
	$("#fieldcontextbody").find(".all").show();
	$("#fieldcontextbody").find("div." + $(e).data("form")).show();
	$("#fieldcontextbody").find("i." + $(e).data("form")).show();
	if($(e).data("form")=="checkbox" || $(e).data("form")=="radio"  || $(e).data("form")=="range"  || $(e).data("form")=="select")
	{
		$("#fieldcontextplaceholder").parent().hide();
		$("#fieldcontextplaceholder").val("");
	}
	else
	{
		$("#fieldcontextplaceholder").parent().show();
	}
	if($(e).data("form")=="checkbox" || $(e).data("form")=="radio"  || $(e).data("form")=="range"  || $(e).hasClass("form-floating"))
	{
		$("#fieldcontextsize").parent().hide();
		$("#fieldcontextsize").val("");
	}
	else
	{
		$("#fieldcontextsize").parent().show();
	}
	if($(e).data("form")=="range" || $(e).data("form")=="select")
	{
		$("#fieldcontextreadonly").parent().parent().hide();
		$("#fieldcontextreadonly").prop("checked",false);
	}
	else
	{
		$("#fieldcontextreadonly").parent().parent().show();
	}
	if($(e).data("form")=="number" ||  $(e).data("form")=="range" || $(e).data("form")=="date" || $(e).data("form")=="time" || $(e).data("form")=="datetime-local")
	{
		$("#fieldcontextmin").parent().parent().show();
		$("#fieldcontextrangeunderalert").parent().parent().show();
		$("#fieldcontextrangeoveralert").parent().parent().show();
	}
	else
	{
		$("#fieldcontextmin").parent().parent().hide();
		if($(e).data("form")!="checkbox" && $(e).data("form")!="radio" && $(e).data("form")!="select" || $(e).data("form")!="range")
		$("#fieldcontextrangeunderalert").parent().parent().hide();
		$("#fieldcontextrangeoveralert").parent().parent().hide();
	}
	if($(e).data("form")=="text" ||  $(e).data("form")=="date" ||  $(e).data("form")=="email" || $(e).data("form")=="tel" || $(e).data("form")=="url"  || $(e).data("form")=="password" || $(e).data("form")=="textarea")
	{
		if($(e).data("form")!="date")
		{
			$("#fieldcontextminlength").parent().parent().show();
			$("#fieldcontextmaxlength").parent().parent().show();
			$("#fieldcontexttoolongalert").parent().parent().show();
			$("#fieldcontexttooshortalert").parent().parent().show();
		}
		else
		{
			$("#fieldcontextminlength").parent().parent().hide();
			$("#fieldcontextmaxlength").parent().parent().hide();
			$("#fieldcontexttoolongalert").parent().parent().hide();
			$("#fieldcontexttooshortalert").parent().parent().hide();
		}
		if($(e).data("form")=="email" || $(e).data("form")=="url")
		{
			$("#fieldcontextmismatchalert").parent().parent().show();
		}
		else
		{
			$("#fieldcontextmismatchalert").parent().parent().hide();
		}
		if($(e).data("form")!="textarea")
		{
			$("#fieldcontextpattern").parent().parent().show();
			$("#fieldcontextpatternalert").parent().parent().show();
		}
		else
		{
			$("#fieldcontextpattern").parent().parent().hide();
			$("#fieldcontextpatternalert").parent().parent().hide();
		}
	}
	else
	{
		$("#fieldcontextminlength").parent().parent().hide();
		$("#fieldcontextmaxlength").parent().parent().hide();
		$("#fieldcontextpattern").parent().parent().hide();
		$("#fieldcontextpatternalert").parent().parent().hide();
		$("#fieldcontextrangeunderalert").parent().parent().hide();
		$("#fieldcontextrangeoveralert").parent().parent().hide();
		$("#fieldcontextmismatchalert").parent().parent().hide();
	}
	if($(e).data("form")=="number" ||  $(e).data("form")=="range" || $(e).data("form")=="date" || $(e).data("form")=="time" || $(e).data("form")=="datetime-local")
	{
		$("#fieldcontextmin").parent().parent().show();
		$("#fieldcontextrangeunderalert").parent().parent().show();
		$("#fieldcontextrangeoveralert").parent().parent().show();
	}
	else
	{
		$("#fieldcontextmin").parent().parent().hide();
		if($(e).data("form")!="checkbox" && $(e).data("form")!="radio" && $(e).data("form")!="select" || $(e).data("form")!="range")
		$("#fieldcontextrangeunderalert").parent().parent().hide();
		$("#fieldcontextrangeoveralert").parent().parent().hide();
	}
	$(".fa-function").hide();
	$(".fa-calendar-days").hide();
	$("#fieldcontext").show();
	if($(e).data("form")=="date" || $(e).data("form")=="datetime-local" || $(e).data("form")=="time")
	{
		if($(e).attr("data-default-formula")!="" && typeof $(e).attr("data-default-formula")!="undefined")
		{
			$("#fieldcontextbody #fieldcontextdefault").hide();
			$("#fieldcontextbody #fieldcontextdefault").siblings(".btn").show();
			$("#fieldcontextbody #fieldcontextdefault").siblings("label").find("i.fa-function").hide();
			$("#fieldcontextbody #fieldcontextdefault").siblings("label").find("i.fa-calendar-days").show();
		}
		else
		{
			$("#fieldcontextbody #fieldcontextdefault").show();
			$("#fieldcontextbody #fieldcontextdefault").siblings(".btn").hide();
			$("#fieldcontextbody #fieldcontextdefault").siblings("label").find("i.fa-function").show();
			$("#fieldcontextbody #fieldcontextdefault").siblings("label").find("i.fa-calendar-days").hide();
		}
		if($(e).attr("data-min-formula")!="" && typeof $(e).attr("data-min-formula")!="undefined")
		{
			$("#fieldcontextbody #fieldcontextmin").hide();
			$("#fieldcontextbody #fieldcontextmin").siblings(".btn").show();
			$("#fieldcontextbody #fieldcontextmin").siblings("label").find("i.fa-function").hide();
			$("#fieldcontextbody #fieldcontextmin").siblings("label").find("i.fa-calendar-days").show();
		}
		else
		{
			$("#fieldcontextbody #fieldcontextmin").show();
			$("#fieldcontextbody #fieldcontextmin").siblings(".btn").hide();
			$("#fieldcontextbody #fieldcontextmin").siblings("label").find("i.fa-function").show();
			$("#fieldcontextbody #fieldcontextmin").siblings("label").find("i.fa-calendar-days").hide();
		}
		if($(e).attr("data-max-formula")!="" && typeof $(e).attr("data-max-formula")!="undefined")
		{
			$("#fieldcontextbody #fieldcontextmax").hide();
			$("#fieldcontextbody #fieldcontextmax").siblings(".btn").show();
			$("#fieldcontextbody #fieldcontextmax").siblings("label").find("i.fa-function").hide();
			$("#fieldcontextbody #fieldcontextmax").siblings("label").find("i.fa-calendar-days").show();
		}
		else
		{
			$("#fieldcontextbody #fieldcontextmax").show();
			$("#fieldcontextbody #fieldcontextmax").siblings(".btn").hide();
			$("#fieldcontextbody #fieldcontextmax").siblings("label").find("i.fa-function").show();
			$("#fieldcontextbody #fieldcontextmax").siblings("label").find("i.fa-calendar-days").hide();
		}
	}
}
function getcsv()
{
	$("#messagedia").removeClass("modal-sm");
	$("#messagedia").addClass("modal-md");
	$("#messagebod").html("<div class='row'><div class='col-lg-12'><p>Paste or enter a <strong>2 column, tab-delimited</strong> list below. The first column is the value that will be submitted. The second is the descriptive label.</p><p>If you are entering the list manually, the tab key functionality has been changed to allow tabs to be input. To move to the next field using the keyboard, press the  tab key twice in succession.</p><p>You can also choose from lists created by <strong>formstrap</strong> or other users.</p></div></div><select onchange='getlist(this.value)' id='presclists' class='form-select'><option value=''>Select from Prescribed Category Lists</option></select><textarea style='font-family:Courier New;height:15em;white-space: pre;   overflow-wrap: normal;  overflow-x: scroll;'	onkeyup='$(\"#savebut\").show()' id='csvinput' class='mt-2 mb-2 form-control'></textarea><div class='mb-2 form-check'><input type='checkbox' class='form-check-input' id='clearlist'><label for='clearlist'>Clear List of Existing Entries</label></div><button onclick='processcsv()' class='btn btn-primary'>Process List</button> <button onclick='$(\"#messageModal\").modal(\"hide\")' class='ms-2 btn btn-danger float-end'>Cancel</button> <button id='savebut' style='display:none' onclick='savelist()' class='btn btn-success float-end'>Share List</button><div id='savenote'></div>");
	$("#messageModal").modal("show");
	$("#csvinput").off();
	$("#csvinput").on("keydown",function(e)
		{
			if(e.keyCode==9 || e.which==9)
			{
				e.preventDefault();
				last=this.value.substring(this.selectionStart-1,this.selectionStart);
				if(last=="\t")
				{
					this.value=this.value.replace(/\t$/gm,"");
					$("#clearlist").focus();
					return false;
				}
				var s = this.selectionStart;
				this.value = this.value.substring(0,this.selectionStart) + "\t" + this.value.substring(this.selectionEnd);
				this.selectionEnd = s+1; 
			}
		});
		$("#csvinput").on("keyup",function(e)
			{
				if(e.keyCode==9 || e.which==9)
				{	
					max=0;
					lines=this.value.split("\n");
					
					if(lines.length>1)
					{
						$.each(lines,function(a,b)
							{
								
								first=b.split("\t");
								if(first[0].length>max)
								{
									max=first[0].length;
								}
							});
							
							this.style.tabSize=max+2;
							this.style.fontFamily="Courier New";
					}
				}
			});
			$.ajax({
				method:"POST",
				url:"/getlists.php"
			}).done(function(msg)
			{
				$("#presclists").html(msg);
			})
}
function savelist()
{
	$.ajax({
		method:"POST",
		url:"/savelist.php",
		data:{list:document.getElementById("csvinput").value,label:document.getElementById("fieldcontextlabel").value}
	}).done(function(msg)
	{
		if(msg=="OK")
		{
			$("#savebut").hide();
			$("#savenote").html("<p style='margin-top:1em;	text-align:center'>Thank you. Your list has been saved. It will be reviewed before being made available to others.</p>");
		}
	})
}
function getlist(list)
{
	$("#csvinput").html("");
	if(list)
	{
		$.ajax({
			method:"POST",
			data:{id:list},
			dataType:"json",
			url:"/getlist.php"
			}).done(function(msg) {
			
			if(msg.response=="OK")
			{
				$("#csvinput").val(msg.list);
				document.getElementById("csvinput").style.tabSize=parseInt(msg.firstcol)+2;
				$("#csvinput").css("font-family","Courier");
			}
			else
			{
				messagepop("The list could not be retrieved","bug");
			}
		})
	}
}
function processcsv()
{
	csv=document.getElementById("csvinput").value;
	csv=csv.split("\n");
	cnt=$("#fieldcontextoptions").find(".descriptor").length;
	added=0;j=0;
	html="";
	for(i=0;i<csv.length;i++)
	{
		if(csv[i].trim()!="")
		{
			html=html+`<tr style=""><td style="width:25%"><input onchange="dirty();setoptions('#`+document.getElementById("selectedcomponent").value + `')" class="value" data-entry="`+(j+cnt) +`" style="width:100%;border:1px solid rgb(222, 226, 230);" id="fieldoptionvalue`+(j+cnt)+`" value="value"></td><td><input onchange="dirty();setoptions('#`+document.getElementById("selectedcomponent").value+ `')" class="descriptor" style="width:100%;border:1px solid rgb(222, 226, 230);" id="fieldoptiondesc`+(j+cnt)+`" data-entry="`+(j+cnt)+`" value="label"></td><td style="cursor:pointer;text-align:right"><i style="color:blue;cursor:move" class="listhandle fal fa-fw fa-arrows-up-down"></i>&nbsp;&nbsp;<i style="cursor:pointer;color:red" class="fal fa-fw fa-trash-can"></i></td></tr>`;
			j++;
		}
	}
	if(document.getElementById("clearlist").checked)
	{
		$("#fieldcontextoptions").html(html);
	}
	else
	{
		$("#fieldcontextoptions").append(html);
	}
	j=0;
	for(i=0;i<csv.length;i++)
	{
		if(csv[i].trim()!="")
		{
			opt=csv[i].split("\t");
			
			if(opt.length==1)
			{
				opt=csv[j].split(",");
			}
			if(opt.length==1)
			{
				$("#fieldoptiondesc"+(j+cnt)).val(opt[0]);
			}
			else
			{
				$("#fieldoptiondesc"+(j+cnt)).val(opt[1]);
			}
			$("#fieldoptionvalue"+(j+cnt)).val(opt[0]);
			
			j++
		}
	}
	
	$("#messageModal").modal("hide");
	
	$("#messagedia").removeClass("modal-md");
	$("#messagedia").addClass("modal-sm");
	$("#fieldcontextoptions").find("i.fa-trash-can").off();
	$("#fieldcontextoptions").find("i.fa-trash-can").on("click",function() { deleteoption(this,"#"+document.getElementById("selectedcomponent").value); });
	optionsreindex("#"+document.getElementById("selectedcomponent").value);
	
	
}
function optionsreindex(e)
{
	dirty();
	i=0;
	$("#fieldcontextoptions").find("tr").each(function()
		{
			$(this).find("input").eq(0).attr("id","fieldoptionvalue"+i);
			$(this).find("input").eq(1).attr("id","fieldoptiondesc"+i);
			i++
		});
		setoptions(e);
}
function countpages(g) {
	$("#formcontextpagination").val("numbersprevnext");
	$("#formcontextpaginationsubmit").val("last");
	$("#formcontextpaginationposition").val("bottomcentre");;	    if ($("#formcontainer").attr("data-pagination")!="") {
		$("#formcontextpagination").val($("#formcontainer").attr("data-pagination"))
	}
	if ($("#formcontainer").attr("data-paginationsubmit")!="") {
		$("#formcontextpaginationsubmit").val($("#formcontainer").attr("data-paginationsubmit"))
	}
	if ($("#formcontainer").attr("data-paginationposition")!="") {
		$("#formcontextpaginationposition").val($("#formcontainer").attr("data-paginationposition"))
	}
	optionsselect = "";
	htmlpage = {};
	options = {};
	next = 0;
	htmllist = "";
	subtype = "";
	if ($("#formcontextpaginationsubmit").val() == "last") {
		subtype = " d-none onlast "
	}
	$("#fullform").find(".formpagenav").remove();
	html = `<nav class='my-3 formpagenav' aria-label="Navigation for form pages"><ul class="pagination"><li class="page-previous  page-item "><a href="#" onclick="prevpage()" class="page-link">Previous</a></li>#PAGES#<li class="page-item page-next "><a class="rightradius page-link" onclick="nextpage()" href="#">Next</a></li><li class="page-item border-success"><button  type="button" class="ms-3 ` + subtype + ` fullradius submitbutton page-link border-success bg-success text-white" href="#">Submit</button></li></ul></nav>`;
	var page;
	var css = "";
	max = 0;
	options[1] = `<option value="1">Page 1</option>`;
	$("[data-page]").each(function() {
		page = parseInt($(this).attr("data-page"));
		
		if (page == $("[data-page]").length && $("#formcontainer").attr("data-pagination") == "numbers") {
			css = "rightradius"
			} else {
			css = ""
		}
		htmlpage[page] = `<li onclick="gotopage(` + page + `)" class="d-none d-sm-inline pagenum` + page + ` page-number page-item"><a class="` + css + ` page-link" href="#">` + page + `</a></li>`;
		if (page > max) {
			max = page
		}
		next = max + 1
	});
	$("#formcontainer").attr("data-pages",max);
	if (next > 0) {
		for (i = 1; i <= next; i++) {
			if (htmlpage[i]) {
				htmllist = htmllist + htmlpage[i]
			}
			options[i] = `<option value="` + (i) + `">Page ` + (i) + `</option>`;
			optionsselect = optionsselect + options[i]
		}
		html = html.replace("#PAGES#", htmllist);
		$("#formcontextpaginationcontainer").hide();
		if(next==2)
		{
			html = `<nav class='my-3 formpagenav' aria-label="Navigation for form pages"><button  type="button" class="btn btn-success submitbutton " href="#">Submit</button></nav>`;
		}
		if (next > 0) {
			$("#fullform").find(".formpage").hide();
			$("#fullform").find(".formpage[data-page='" + document.getElementById("selectedpage").value + "']").show();
			$("#formcontextpaginationcontainer").show();
			if (document.getElementById("formcontextpaginationposition").value.substring(0, 3) == "top" || document.getElementById("formcontextpaginationposition").value.substring(0, 4) == "both") {
				$(html).insertBefore("#formcontainer")
			}
			if (document.getElementById("formcontextpaginationposition").value.substring(0, 4) == "bott" || document.getElementById("formcontextpaginationposition").value.substring(0, 4) == "both") {
				$(html).insertAfter("#formcontainer")
			}
			if (document.getElementById("formcontextpagination").value == "numbers") {
				$("#fullform").find(".page-next").remove();
				$(".page-previous").remove();
				$("#fullform").find(".page-number").removeClass("d-sm-inline");
				$("#fullform").find(".page-number").removeClass("d-none")
			}
			if (document.getElementById("formcontextpagination").value == "prevnext") {
				$("#fullform").find(".page-number").removeClass("d-sm-inline")
			}
			if (document.getElementById("formcontextpagination").value == "next") {
				$("#fullform").find(".page-number").removeClass("d-sm-inline");
				$("#fullform").find(".page-previous").remove();
				$("#fullform").find(".page-next a").addClass("fullradius");
				$("#fullform").find(".page-next a").removeClass("rightradius")
			}
			if (document.getElementById("selectedpage").value == 1) {
				$("#fullform").find(".page-previous").addClass("disabled")
			}
			$("#fullform").find(".page-item").removeClass("active");
			$("#fullform").find(".pagenum" + document.getElementById("selectedpage").value).addClass("active")
		}
		document.getElementById("sectioncontextpage").innerHTML = optionsselect;
		if (document.getElementById("formcontextpaginationposition").value.substring(document.getElementById("formcontextpaginationposition").value.length - 1) == "t") {
			$("#fullform").find(".formpagenav").find("ul").addClass("justify-content-start");
			$("#fullform").find(".formpagenav").addClass("text-start");
		}
		if (document.getElementById("formcontextpaginationposition").value.substring(document.getElementById("formcontextpaginationposition").value.length - 1) == "d") {
			$("#fullform").find(".formpagenav").find("ul").addClass("justify-content-end");
			$("#fullform").find(".formpagenav").addClass("text-end");
		}
		if (document.getElementById("formcontextpaginationposition").value.substring(document.getElementById("formcontextpaginationposition").value.length - 1) == "e") {
			$("#fullform").find(".formpagenav").find("ul").addClass("justify-content-center");
			$("#fullform").find(".formpagenav").addClass("text-center");
		}
	}
	if(typeof g!="undefined")
	{
		
		gotopage(g);
	}
}
function prevpage() {
	if ($("#fullform").find(".page-item.active").prev().hasClass("page-number")) {
		$("#fullform").find(".page-item.active").prev().trigger("click")
	}
}
function nextpage() {
	if ($("#fullform").find(".page-item.active").next().hasClass("page-number")) {
		$("#fullform").find(".page-item.active").next().trigger("click")
	}
}
function gotopage(page,uns) {
	if($("[data-page="+page+"]").length==0)
	{	
		return false;	
	}
	if(typeof uns=="undefined")
	{
		uns=true;
	}
	if(uns)
	{
		unselect();
	}
	offcanvasList[0].hide();
	document.getElementById("selectedpage").value = page;
	$("#fullform").find(".page-next").removeClass("disabled");
	$("#fullform").find(".page-previous").removeClass("disabled");
	$("#fullform").find(".formpage").hide();
	$("#fullform").find(".formpage[data-page='" + page + "']").show();
	$(".page-item").removeClass("active");
	$("#fullform").find(".pagenum" + page).addClass("active");
	if ($("#fullform").find(".pagenum" + page).next().hasClass("page-next")) {
		$("#fullform").find(".page-next").addClass("disabled");
		$("#fullform").find(".submitbutton").removeClass("d-none")
		} else {
		if (getstorage("paginationsubmit") == "last") {
			$("#fullform").find(".submitbutton").addClass("d-none")
		}
	}
	if ($("#fullform").find(".pagenum" + page).prev().hasClass("page-previous")) {
		$("#fullform").find(".page-previous").addClass("disabled")
	}
}
function toggleoffcanvas() {
	if (localStorage.getItem("saveto") == "session") {
		$(".offcanvascontextarrow").toggle();
		if ($('#offcanvascontext').hasClass('offcanvas-start')) {
			sessionStorage.setItem('offcanvas', 'end');
			offcanvasList[0].hide();
			setTimeout(function() {
				$('#offcanvascontext').removeClass('offcanvas-start');
				$('#offcanvascontext').addClass('offcanvas-end')
			}, 400);
			setTimeout(function() {
				offcanvasList[0].show()
			}, 700)
			} else {
			sessionStorage.setItem('offcanvas', 'start');
			offcanvasList[0].hide();
			setTimeout(function() {
				$('#offcanvascontext').removeClass('offcanvas-end');
				$('#offcanvascontext').addClass('offcanvas-start')
			}, 400);
			setTimeout(function() {
				offcanvasList[0].show()
			}, 700)
		}
		} else {
		$(".offcanvasarrow").toggle();
		if ($('#offcanvascontext').hasClass('offcanvas-start')) {
			localStorage.setItem('offcanvas', 'end');
			offcanvasList[0].hide();
			setTimeout(function() {
				$('#offcanvascontext').removeClass('offcanvas-start');
				$('#offcanvascontext').addClass('offcanvas-end')
			}, 400);
			setTimeout(function() {
				offcanvasList[0].show()
			}, 700)
			} else {
			localStorage.setItem('offcanvas', 'start');
			offcanvasList[0].hide();
			setTimeout(function() {
				$('#offcanvascontext').removeClass('offcanvas-end');
				$('#offcanvascontext').addClass('offcanvas-start')
			}, 400);
			setTimeout(function() {
				offcanvasList[0].show()
			}, 700)
		}
	}
}
function presubmitvalidity(formid,justcheck,posturl)
{
	var success={};
	var failure={};
	if (typeof justcheck=="undefined")
	{
		justcheck=false
	}
	formvalid=true;
	$("#"+formid +" input,#" +formid+" select,#" +formid+" textarea").each(function(index)
		{
			if(this.disabled==false)
			{
				if($(this).data("valid")==false)
				{
					if($(this).data("custom	"))
					{
						this.setCustomValidity($(this).data("customevent"));
					}
					else
					{
						this.setCustomValidity("Your response to this field is not valid");
					}
				}
				else
				{
					this.setCustomValidity("")
				}
				if(this.validity.valid==false)
				{
					if(this.validity.valueMissing)
					{
						if($(this).data("required"))
						{
							this.setCustomValidity($(this).data("required"));
						}
						else
						{
							this.setCustomValidity("You must complete this part of the form");
						}
					}
					if(this.validity.rangeUnderflow)
					{
						if($(this).data("rangeunder"))
						{
							this.setCustomValidity($(this).data("rangeunder"));
						}
						else
						{
							this.setCustomValidity("The value entered is too low");
						}
					}
					if(this.validity.rangeOverflow)
					{
						if($(this).data("rangeover"))
						{
							this.setCustomValidity($(this).data("rangeover"));
						}
						else
						{
							this.setCustomValidity("The value entered is too high");
						}
					}
					if(this.validity.tooShort)
					{
						if($(this).data("tooshort"))
						{
							this.setCustomValidity($(this).data("tooshort"));
						}
						else
						{
							this.setCustomValidity("Your response is too short.");
						}
					}
					if(this.validity.tooLong)
					{
						if($(this).data("toolong"))
						{
							this.setCustomValidity($(this).data("toolong"));
						}
						else
						{
							this.setCustomValidity("Your response is too long.");
						}
					}
					if(this.validity.stepMismatch)
					{
						if($(this).data("stepmismatch"))
						{
							this.setCustomValidity($(this).data("stepmismatch"));
						}
						else
						{
							this.setCustomValidity("The value you have entered doesn't comply with the required step interval.");
						}
					}
					if(this.validity.typeMismatch)
					{
						if($(this).data("typemismatch"))
						{
							this.setCustomValidity($(this).data("typemismatch"));
						}
						else
						{
							this.setCustomValidity("The value you have entered doesn't match the input type requested");
						}
					}
					if(this.validity.patternMismatch)
					{
						if($(this).data("pattern"))
						{
							this.setCustomValidity($(this).data("pattern"));
						}
						else
						{
							this.setCustomValidity("The information you have provided does not match the required format.");
						}
					}
					formvalid=false
					that=this
					that.reportValidity();
					return false;
				}
			}
		}
	)
	if(formvalid && justcheck==false)
	{
		$.ajax({
			method:"post",
			url:posturl,
			data:{formid:formid,record:document.getElementById(formid+"-record").value,data:getformdata(formid)},
			dataType:"json"
		}).done(function(msg)
		{
			if(msg.response=="OK")
			{
				$("#"+formid+"-dirty").val("");
				if(typeof formsuccess!="undefined")
				{
					if(typeof formsuccess[formid.replace("fsform-","")]=="function")
					{
						formsuccess[formid.replace("fsform-","")]();
					}
					else 
					{
						$("#"+formid).find(".formcontainer").html(`<p class="fw-bold mx-5 text-center"><i class="text-success fal fa-10x fa-check-circle"></i><br><br>The form was successfully submitted</p>`);
						$("#"+formid).find(".formpagenav").remove();
						localStorage.removeItem(formid+"-data");
					}
				}
				else
				{
					$("#"+formid).find(".formcontainer").html(`<p class="fw-bold mx-5 text-center"><i class="text-success fal fa-10x fa-check-circle"></i><br><br>The form was successfully submitted</p>`);
					$("#"+formid).find(".formpagenav").remove();
					localStorage.removeItem(formid+"-data");
				}
			}
			else
			{
				if(typeof formfailure!="undefined")
				{
					if(typeof formfailure[formid.replace("fsform-","")]=="function")
					{
						formfailure[formid.replace("fsform-","")]();
					}
					else
					{
						if(msg.error)
						{
							messagepop(msg.error,msg.icon);
						}
						else
						{
							messagepop("The form submission failed.<br><br>Please try again later.","circle-xmark");
						}
					}
				}
				else
				{
					if(msg.error)
					{
						messagepop(msg.error,msg.icon);
					}
					else
					{
						messagepop("The form submission failed.<br><br>Please try again later.","circle-xmark");
					}
				}
			}
		});
		return false;
	}
	if(formvalid)
	{
		return true;
	}
	else
	{
		return false;
	}
}

function initialiseform(formid,posturl,json)
{
	if(typeof userevents[formid]=="function")
	{
		userevents[formid]();
	}
	// ADD EVENT TO SUBMIT BUTTON TO INVOKE CUSTOM FORM VALIDATION
	$("#"+formid).find(".submitbutton").on("click",function(){
		presubmitvalidity(formid,false,posturl);
		return false;
	});
	// RESET PAGINATION AND SHOW PAGE 1
	$("#"+formid).find(".formcontainer").find(".formpage").hide();
	if(document.getElementById(formid+"-selectedpage"))
	{
		$("#"+formid).find(".formcontainer").find(".formpage.visibleyes[data-page='" +document.getElementById(formid+"-selectedpage").value +"']").show();
		gotopage(formid,1,true);
	}
	toolovers();
	$("#formcontainer").find(".formpage").sort(sort_sections)
	.appendTo("#formcontainer");
	$("#"+formid).find(".formcontainer").find("[data-min-formula-custom]").each(function() {
		if($(this).data("min-formula-custom")!="")
		{
			$(this).find("input").attr("min",date($(this).data("min-formula-custom"),$(this).data("form")));
		}
	});
	$("#"+formid).find(".formcontainer").find("[data-max-formula-custom]").each(function() {
		if($(this).data("max-formula-custom")!="")
		{
			$(this).find("input").attr("max",date($(this).data("max-formula-custom"),$(this).data("form")));
		}
	});
	$("#"+formid).find(".formcontainer").find("[data-default-formula-custom]").each(function() {
		if($(this).data("default-formula-custom")!="")
		{
			$(this).find("input").attr("value",date($(this).data("default-formula-custom"),$(this).data("form")));
		}
	});
}
function reporterror(e)
{
	messagepop("<p>There has been an error:<br><strong> "+e.error.message+"</strong></p><div class='mb-2'><label for='erroruseraction' class='text-start'>What were you doing when this message popped up (optional)?</label><textarea class='form-control' id='erroruseraction'></textarea></div><div class='mb-2'><label for='erroruseremail' class='text-start'>Do you want us to let you know when the error is fixed?</label><input type='email' placeholder='Email Address' class='form-control' id='erroruseremail'></div><div class='mb-2'><label class='text-start' for='errorstack'>Error Report</label><textarea id='errorstack' readonly class=' form-control'>"+e.error.message+" in " + e.filename + " at line "+ e.lineno + "\r\n\r\nStack:\r\n" + e.error.stack+"</textarea></div><div class='form-check mb-2'><input type='checkbox' class='form-check-input' checked id='errorincludedata'><label for='errorincludedata' class='text-start form-check-label'>Send form design and metadata with error report?</label></div>","bug",function() { submiterror(); },function() { return false; },"Submit","Cancel",null,"modal-md");
}
function submiterror()
{
	html="";
	json="";
	if($("#errorincludedata").attr("checked")=="checked")
	{
		html=localStorage.getItem("formstrap");
		json=localStorage.getItem("formstrapjson");
	}
	$.ajax({
		url:"/scripts/reportjserror.php",
		method:"POST",
		data:{realm:"editor",email:document.getElementById("erroruseremail").value,error:document.getElementById("errorstack").value,useraction:document.getElementById("erroruseraction").value,html:html,json:json},
		dataType:"json"
	}).done(function(msg)
	{
		if(msg.response=="OK")
		{
			messagepop("Thank you for helping us to identify and fix formstrap errors","thumbs-up");
		}
		else
		{
			messagepop("The error could not be reported","bug");
		}
	});
}
function toggleFullscreen(e) {
	let elem = document.querySelector('body');
	if (!document.fullscreenElement) {
		elem.requestFullscreen().catch(err=>{
			alert(`Error attempting to enable full-screen mode:${err.message}(${err.name})`)
		}
		);
		$(e).find("i").removeClass("fa-expand-wide");
		$(e).find("i").addClass("fa-compress-wide");
		} else {
		document.exitFullscreen();
		$(e).find("i").addClass("fa-expand-wide");
		$(e).find("i").removeClass("fa-compress-wide");
	}
}
var beforeUnloadHandler;
$(document).ready(function() {
	window.addEventListener("keyup",function(e)
		{
			if($("#fullform").is(":visible")==false)
			{ 
				return false;
			}
			if(e.code=="KeyF" && e.altKey && e.ctrlKey)
			{
				formsettings();
			}
			if(e.code=="KeyS" && e.altKey && e.ctrlKey)
			{
				saveform();
			}
			if(e.code=="KeyP" && e.altKey && e.ctrlKey)
			{
				preview();
			}
			
			if(document.getElementById("selectedcomponent").value && $("#offcanvascontext").hasClass("show")==false)
			{
				if($("#"+document.getElementById("selectedcomponent").value).hasClass("form-group"))
				{
					container="fieldcontainer";
					context="field";
					desc="Field";
				}
				if($("#"+document.getElementById("selectedcomponent").value).hasClass("pagecol"))
				{
					container="pagecolcontainer";
					context="sectioncolumn";
					desc="Section Column";
					
				}
				if($("#"+document.getElementById("selectedcomponent").value).hasClass("formrow"))
				{
					container="formrowcontainer";
					context="row";
					desc="Row";
				}
				if($("#"+document.getElementById("selectedcomponent").value	).hasClass("formcol"))
				{
					container="formcolcontainer";
					context="column";
					desc="Column";
				}
				if(e.code=="KeyX" && e.altKey && e.ctrlKey)
				{
					deletecomponent($("#"+document.getElementById("selectedcomponent").value	)	,context,desc);
				}
				if(e.code=="KeyM" && e.altKey && e.ctrlKey)
				{
					offcanvasList[0].show();
				}
				if(e.code=="KeyC" && e.altKey && e.ctrlKey)
				{
					clone($("#"+document.getElementById("selectedcomponent").value	));
				}
				if(e.code=="ArrowUp" && e.altKey && e.ctrlKey)
				{
					
					p=$("#"+document.getElementById("selectedcomponent").value).index();
					if(p==0 )
					{
						
						element=$("#"+document.getElementById("selectedcomponent").value)
						
						currentcontainer=$("#"+document.getElementById("selectedcomponent").value).closest("."+container);
						elems=$("#formcontainer").find("."+container);
						
						previous= elems.eq(elems.index(currentcontainer) -1);
						
						if($(previous).hasClass(container) && elems.index(currentcontainer)>0) 
						{
							
							$(previous).append(element);
							gotopage($(previous).closest(".formpage").attr("data-page"),false);
							element.get(0).scrollIntoView(true);
						}
						
						
						
					}
					if(p>0)
					{
						previous=$("#"+document.getElementById("selectedcomponent").value).prev();
						
						$("#"+document.getElementById("selectedcomponent").value).after(previous);
					}
					dirty();
				}
				if(e.code=="ArrowDown" && e.altKey && e.ctrlKey)
				{
					
					p=$("#"+document.getElementById("selectedcomponent").value).index();
					t=$("#"+document.getElementById("selectedcomponent").value).siblings().length;
					
					if(p==t )
					{
						element=$("#"+document.getElementById("selectedcomponent").value) 
						
						currentcontainer=$("#"+document.getElementById("selectedcomponent").value).closest("."+container);
						elems=$("#formcontainer").find("."+container);
						
						next= elems.eq(elems.index(currentcontainer) +1);
						
						if($(next).hasClass(container))
						{
							
							$(next).prepend(element);
							gotopage($(next).closest(".formpage").attr("data-page"),false);
							element.get(0).scrollIntoView(true);
						}
					}
					if(p>=0 && p<t)
					{
						
						next=$("#"+document.getElementById("selectedcomponent").value).next()
						
						$(next).after($("#"+document.getElementById("selectedcomponent").value));
					}
					dirty();
				}
			}
			
		});
		window.addEventListener("error", function (e) {
			reporterror(e);
			return false;
		})
		window.addEventListener("focus",checksession);
		document.addEventListener("fullscreenchange",function()
			{
				if(document.fullscreenElement==null)
				{
					$("#fstoggle").find("i").addClass("fa-expand-wide");
				$("#fstoggle").find("i").removeClass("fa-compress-wide");				}
				else
				{
					$("#fstoggle").find("i").removeClass("fa-expand-wide");
					$("#fstoggle").find("i").addClass("fa-compress-wide");
				}
			}
		);
		window.name = 'editor';
		beforeUnloadHandler = (event) => {
			// Recommended
			event.preventDefault();
			// Included for legacy support, e.g. Chrome/Edge < 119
			event.returnValue = true;
		};
		if (localStorage.getItem("offcanvas")) {
			$("#offcanvascontext").removeClass("offcanvas-end");
			$("#offcanvascontext").removeClass("offcanvas-start");
			$("#offcanvascontext").addClass("offcanvas-" + localStorage.getItem("offcanvas"));
			if (localStorage.getItem("offcanvas") == "end") {
				$("#offcanvasarrowright").hide()
				} else {
				$("#offcanvasarrowleft").hide()
			}
			} else {
			$("#offcanvascontext").removeClass("offcanvas-end");
			$("#offcanvascontext").removeClass("offcanvas-start");
			$("#offcanvascontext").addClass("offcanvas-end");
			$("#offcanvasarrowright").hide()
		}
		$(".savenote").toggle();
		if (localStorage.getItem("formstrap")) {
			json=JSON.parse(localStorage.getItem("formstrapjson"));
			if(typeof json=="undefined" || json==null)
			{
				json={};
			}
			if(typeof json["events"]!="undefined")
			{
				events=json["events"];
			}
			else
			{
				events={};
			}
			localStorage.setItem("events",JSON.stringify(events));
			$("#home").addClass("d-none");
			$("#fullform").html(localStorage.getItem("formstrap"));
			
			$("#fullform").removeClass("d-none");
			pagesort();
			setTimeout(function() {
				propagate(true)
			}, 500)
			} else {
			$("#home").removeClass("d-none");
			localStorage.removeItem("events");
			runsortable();
		}
		if(localStorage.getItem("storagewarned")==null)
		{
			privacypop();
		}
		countpages();
		toolovers();
		gotopage(1);
		field=$("#formcontainer").attr("data-field");
		sec=$("#formcontainer").attr("data-sec");
		pagecol=$("#formcontainer").attr("data-pagecol");
		row=$("#formcontainer").attr("data-row");
		formcol=$("#formcontainer").attr("data-formcol");
		if($("#formcontainer").attr("data-favicon"))
		{
			$("#favicon").attr("href",$("#formcontainer").attr("data-favicon"));
		}
		if($("#formcontainer").attr("data-colour"))
		{
			$("body").css("background-color",$("#formcontainer").attr("data-colour"));
		}		if($("#formcontainer").attr("data-textcolour"))
		{
			$("#fullform").css("color",$("#formcontainer").attr("data-textcolour"));
		}			unselect();
		if($("#formcontainer").is(":visible"))
		{
			$(".start").toggle();
		}
		checksession();
		if(location.hash=="#About")
		{
			aboutpop();
		}
		$("#context").on("scroll",function()
			{
				if(this.scrollTop<50)
				{
					$("#goup").addClass("d-none");
				}
				else
				{
					if($("#goup").is(":visible")==false)
					{
						$("#goup").removeClass("d-none"); 
					}
				}
			});
});
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'));
var offcanvasList = offcanvasElementList.map(function(offcanvasEl) {
	return new bootstrap.Offcanvas(offcanvasEl)
});
spelled = false;

function preview()
{
	saveform();
	$.ajax({
		url: "save.php",
		method: "POST",
		data: {
			structure: JSON.stringify(serialiseform())
		}
		}).done(function(msg) {
		window.open("/preview","formstrappreview");
	})
}
function aboutpop()
{
	messagepop(`<div class="row" ><h3 class="mb-3 text-center" style="text-transform:lowercase">About Formstrap</h3><div class="col"><p class="text-start">As a jobbing, self-taught developer who worked in the public and third sectors for longer than I care to mention, I developed a lot of bespoke browser-based, database-driven systems (e.g. client records systems, personnel management systems, intranets
	etc).</p><p class="text-start">These systems often required many forms so I developed a rudimentary, browser based editor to help me create, modify and deploy these forms quickly.</p><p  class="text-start">When I decided to give up the 9-to-5, I thought others may find such a system useful. <strong>formstrap</strong> was conceived. The idea has been completely reworked from scratch using Bootstrap 5.3, jQuery and jQuery-UI, PHP and MySQL. The editor mostly runs on the client (the earlier version made lots of server calls) so is quick and has a low impact on metered connections.</p><p class="text-start"><strong>formstrap</strong> has no financial, legal or any other connection with Bootstrap. I just love the library and have been building browser-based applications using it for years.</p><p class="text-start">I hope you find <strong>formstrap</strong> useful. I would welcome your constructive <a href="#fsfeedback" onclick="getfeedbackform()">feedback, comments, suggestions for developments</a> and, of course, <a href="#donate" onclick="donate()">donations</a> are always gratefully received if you want to support my work <i class="fal fa-smile fa-fw"></i>.</p><p class="text-start"><strong>Steve @ SPBCodes</strong></p></div></div>`,`info-circle`,null,null,null,null,null,"modal-md",null,"green");
	location.href="#popupmessage";
}

function getfeedbackform()
{
	messagepop(`Please complete the form shown below<div  id='commentform'><iframe style="overflow:hidden;width:100%;height:450px" src="https://formstrap.com/system/Feedback"></iframe></div>`,`comments`,function() {  if(cf) { 	clearInterval(cf); } return false;},null,`Cancel`,null,null,`modal-md`,null,`blue`,null,`danger`);
	cf=setInterval(function() {
		$.ajax({
			url:"/scripts/checkfeedback.php",
			method:"POST",
		}).done(function(msg)
		{
			if(msg=="OK")
			{
				clearInterval(cf);
				setTimeout(function() {
					$("#messageModal").modal("hide");
					$("#messagebod").html("");
				},5000);
				
			}
		})
	},5000);
}
function privacypop()
{
	messagepop(`<div class="row" ><h3 class="mb-3 text-center" style="text-transform:lowercase">Cookie and Privacy Policy</h3><div class="col"><p class="text-start">This site uses an <strong>essential, first-party session cookie</strong> to maintain your session <strong>if and when</strong> you create an account and log in. A session cookie is also used when you preview your form to allow the preview page to access your form metadata without having to store it in the formstrap database. This information is immediately discarded  from the server-side once the preview page is loaded.</p> <p class="text-start">No third party cookies are used.</p><p class="text-start">The site uses your browser's <strong>local storage</strong>  to store the form and its settings while you are using the editor. Data is also stored here to indicate you have clicked "OK" on this privacy policy; and also when you click to agree to the Terms of Use. By proceeding, you agree that the formstrap website can access, edit and delete formstrap data saved in your browser's local storage. Please note that formstrap cannot access local storage used by other websites.</p><p class="text-start">The form design data saved in local storage is only sent in full to the <strong>formstrap</strong> server (UK datacentre) when you publish or preview the form. Once the self-host package or preview is completed, the data is discarded. When creating events,  a server-side "helper" function is used but the data that is sent to it is not retained.</p><input type="hidden" id="storpref"  value="local"></div></div>`,"cookie-bite",function () {  localStorage.setItem("storagewarned",new Date()); $("#messageModal").modal("hide"); },null,"I Agree",null,null,"modal-md",null,"green");
	location.href="#popupmessage";
}
function tandcpop()
{
	messagepop(`<div class="row" ><h3 class="mb-3 text-center" style="text-transform:lowercase">Terms of Use</h3><div class="col" ><p class="text-start">The formstrap "self-host" free service is offered "as-is" and is intended to be a helpful tool. It is offered  with no warranty or guarantee of support. </p><p class="text-start">By using this service you agree to indemnify formstrap and its owner against any negative outcome arising from the use a form you have created using the free "self-host" service.</p><p  class="text-start">You may use the formstrap editor as you wish - but your use must be fair and proportionate. The owner of formstrap reserves the right to withdraw the service if your use of the service has excessive or negative impact on the formstrap server(s) or other users.</p><p class="text-start">The code and scripts that are provided when you download the self-hosting package are free from viruses, tracking scripts* or malicious code when they are delivered to you. Once you have the code you could modify it. Doing this might break the form or cause it to behave in a way not anticipated or intended by formstrap.</p><p class="text-start">The form scripts provided do not contain advertising or promotional material except for a link at the bottom of the rendered form stating "made by formstrap" with a link to the formstrap website. You MAY remove this link if you wish by editing the index.html file in the package. Some of the scripts in the package are from third parties. The licence and copyright notices in these documents MUST be left intact when you publish the package on your own website. The readme.pdf document in the package provides more information about this.</p><p class="text-start">"Self-hosted" forms  are not saved to the formstrap servers. As such, it will not be possible for formstrap to recover your work if, for example, you delete the formstrap local storage from your device's browser. It is also not be possible for formstrap to assist you in transferring your work from one device to another. If you wish to do this please sign up for an account. Separate Terms of Use apply to account holders. You will be asked to agree to these terms if you decide to create an account.</p><p ><em>* if you enable Google reCAPTCHA on your form then Google may store data or cookies on the devices of form users in order to provide the reCAPTCHA service.</em></div></div>`,`signature`,function () {  localStorage.setItem("selfhosttandc",new Date()); $("#messageModal").modal("hide"); },function () {  localStorage.removeItem("selfhosttandc"); $("#messageModal").modal("hide"); },"I Agree","I Don't Agree",null,"modal-xl",null,"green");
	location.href="#popupmessage";
}

function help()
{
	
	if(document.getElementById("mainlogout"))
	{ 
		messagepop(`<div class="row gx-3 gy-3" ><div class="col-12 col-md-7" ><div class="flex-grow-1 card d-flex flex-column"><div class="text-start card-header"><i class="fab fa-youtube"></i> <strong>formstrap</strong> YouTube Playlist</div><div class="card-body flex-grow-1"><p class="text-center"><a href="/videos" target="help"><img src="/images/getstarted.webp" class="w-100"><br><br>View the formstrap tutorial playlist<br>(work in progress)</a></p></div></div></div><div class="col-12 col-md-5 d-flex flex-column"><div class="card flex-grow-1 d-flex flex-column"><div class="text-start card-header">Keyboard Shortcuts</div><div class="card-body flex-grow-1 text-start"><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">F</span></strong> to edit form settings<br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">S</span></strong> to save form changes<br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">P</span></strong> to preview form<br><br><strong>Click an element and then:</strong><br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">&#8593;</span></strong> to move it up<br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">&#8595;</span></strong> to move it down<br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">M</span></strong> to view its metadata<br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">X</span></strong> to delete it<br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">C</span></strong> to clone it</div> </div></div><div class="col-12"><div class="card"><div class="card-header text-start">Tooltips and More Support</div><div class="card-body"><p class="text-start">You can get some help from the <i class="fal fa-info-circle fa-fw"></i> Tooltips in the metadata forms for each component type.</p><p  class="text-start">You can also view the sample forms in the editor.</p><div class="mb-2"><label id="ticketsubjectlabel" class="text-start" for="ticketsubject"><strong>Need a bit more help...?<br></strong>Submit a support ticket.</label><textarea required class="form-control" style="height:10em" minlength="50" placeholder="Please describe the problem in as much detail as possible" id="ticketsubject" class="form-control"></textarea></div><div class="form-check "><input checked type="checkbox" id="ticketsenddata" class="form-check-input"><label class="text-start form-check-label" for="ticketsenddata">Submit the form design and metadata with the ticket?</label></div><div  id='ticketerror'></div> </div></div></div></div></div>`,null,function () {  $("#offcanvascontext").find("i.fa-info-circle").removeClass("fa-bounce"); },null,"Cancel",null,null,"modal-lg",null,"green",null,"danger",null,null,null,function() {  if(localStorage.getItem("formstrap")==null) {  $("#ticketsenddata").parent().hide();  } 		  $("#messageYes").parent().parent().prepend(`<div class="col-7"><button onclick="ticket()" id="submitticket" type="button" class="btn btn-xs w-100 btn-success">Submit Ticket</button></div>`); $("#submitticket").off("*");   } );
		$("#offcanvascontext").find("i.fa-info-circle").addClass("fa-bounce");
		location.href="#popupmessage";
	}
	else
	{			$("#offcanvascontext").find("i.fa-info-circle").addClass("fa-bounce");
		messagepop(`<div class="row gx-3 gy-3" ><div class="col-12 col-md-7 d-flex" ><div class="card flex-grow-1 d-flex flex-column"><div		class="text-start card-header"><i class="fab fa-youtube"></i> <strong>formstrap</strong> YouTube Playlist</div><div class="card-body flex-grow-1"><p class="text-center"><a href="/videos" target="help"><img src="/images/getstarted.webp" class="w-100"><br><br>View the formstrap tutorial playlist <br>(work in progress)</a></p></div></div></div><div class="col-12 col-md-5 d-flex"><div class="d-flex flex-column flex-grow-1 card text-start "><div class="text-start card-header">Keyboard Shortcuts</div><div class="card-body flex-grow-1"><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">F</span></strong> to edit form settings<br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">S</span></strong> to save form changes<br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">P</span></strong> to preview form<br><br><strong>Click an element and then:</strong><br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">&#8593;</span></strong> to move it up<br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">&#8595;</span></strong> to move it down<br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">M</span></strong> to view its metadata<br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">X</span></strong> to delete it<br><strong><span class="key">Ctrl</span> <span class="key">Alt</span> <span class="key">C</span></strong> to clone it</div> </div></div><div class="col-12"><div class="card"><div class="card-header text-start">Tooltips </div><div class="card-body"><p class="text-start">You can get some help from the <i class="fal fa-info-circle fa-fw"></i> tooltips in the metadata forms for each component type.</p><p  class="text-start">You can also view the sample forms in the editor.</p><p  class="text-start">To view the metadata form, use your mouse to invoke the context menu (e.g. right button click) on the component you want to edit - or tap and hold on touch devices.</p><p  class="text-start">Registered users can submit support tickets.</p></div></div></div></div>`,null,function() { 			$("#offcanvascontext").find("i.fa-info-circle").removeClass("fa-bounce"); offcanvasList[0].hide();login(true) ; },function () {  $("i.fa-info-circle").removeClass("fa-bounce"); },"Register","Close",null,"modal-lg",null,"green");
		location.href="#popupmessage";
	}
}
var conhtml;
var actionhtml;
var newee


function dosavetemplate(e,context,f)
{
	event.preventDefault();
	jsone={};
	document.getElementById("templatename").setCustomValidity("");
	if(f.checkValidity()==false)
	{
		if(document.getElementById("templatename").validity.valueMissing)
		{
			document.getElementById("templatename").setCustomValidity("Please provide a name for the template");
		}
		if(document.getElementById("templatename").validity.tooShort)
		{
			document.getElementById("templatename").setCustomValidity("The template name should be at least 10 characters long");
		}
		if(document.getElementById("templatename").validity.tooLong)
		{
			document.getElementById("templatename").setCustomValidity("The template name should a maximum of 150 characters long");
		}
		if(document.getElementById("templatename").validity.patternMismatch)
		{
			document.getElementById("templatename").setCustomValidity("Please use only letters, numbers and spaces.");
		}
		f.reportValidity();
		return false;
	}
	var lookup={};
	lookup["sectioncolumn"]="Section Column";
	lookup["form"]="Form";
	lookup["row"]="Row";
	lookup["section"]="Section";
	lookup["column"]="Column";
	var sec,seccol,row,col,field;
	
	field=$(e).closest(".form-group");
	col=$(e).closest(".formcol");
	prevcol=$(e).closest(".formcol").prevAll().length;
	row=$(e).closest(".formrow");
	prevrow=$(e).closest(".formrow").prevAll().length;
	seccol=$(e).closest(".pagecol");
	prevseccol=$(e).closest(".pagecol").prevAll().length;
	sec=$(e).closest(".formpage");
	prevsec=$(e).closest(".formpage").prevAll().length;
	json=serialiseform();
	if(context=="column")
	{
		jsone={"layout":
			{
				"Form":
				{
					"Sections":
					[{"SectionColumns":
						[{"Rows":
							[{"RowColumns":
								[json["layout"]["Form"]["Sections"][prevsec]["SectionColumns"][prevseccol]["Rows"][prevrow]["RowColumns"][prevcol]]
							}]
						}]
					}]
				}
			},"fields":json["fields"],"events":json["events"]
		}
		
		jsone["fields"]=json["fields"];
	}
	else
	{
		if(context=="row")
		{
			jsone={"layout":
				{
					"Form":
					{
						"Sections":
						[{"SectionColumns":
							[{"Rows":[json["layout"]["Form"]["Sections"][prevsec]["SectionColumns"][prevseccol]["Rows"][prevrow]]
								
							}]
						}]
					}
				},"fields":json["fields"],"events":json["events"]
			}
		}
		else
		{
			if(context=="sectioncolumn")
			{
				jsone={"layout":
					{
						"Form":
						{
							"Sections":
							[{"SectionColumns":[json["layout"]["Form"]["Sections"][prevsec]["SectionColumns"][prevseccol]]
							}]
						}
					},"fields":json["fields"],"events":json["events"]
				}
				
			}
			else
			{
				if(context=="section")
				{
					
					jsone={"layout":
						{
							"Form":
							{
								"Sections":[json["layout"]["Form"]["Sections"][prevsec]["SectionColumns"][prevseccol]]
							}
							
						}
						,"fields":json["fields"],"events":json["events"]
					}
				}
				else
				{
					if(context="form")
					{
						jsone=json;
					}
				}
			}
		}
	}
	var post=$(f).serializeArray();
	post.push({name:"HTML",value:$(e).prop("outerHTML")});
	post.push({name:"Context",value:context});
	post.push({name:"JSON",value:JSON.stringify(jsone)});
	$.ajax({
		url:"/scripts/savetemplate.php",
		method:"POST",
		data:post,
		dataType:"json"
	}).done(function(msg)
	{
		
		if(msg.response=="OK")
		{
			$('#messageModal').modal('hide');
			setTimeout(function() {
				messagepop("Your template has been saved.","circle-check");
			},1000);
		}
		else
		{
			if(msg.response=="dup")
			{
				document.getElementById("templatename").setCustomValidity("This template name has already been used");
				f.reportValidity();
				return false;
			}
			else
			{
				$("#templatesaveerror").html(msg.response);
			}
		}
	}).fail(function(e)
	{
		$("#templatesaveerror").html("There has been a fatal server error. The template could not be saved.<br><br>Please Try again Later");
	});
}
function savetemplate(e,context)
{
	if($("#mainlogout").length>0)
	{
		lookup={};
		lookup["sectioncolumn"]="Section Column";
		lookup["form"]="Form";
		lookup["row"]="Row";
		lookup["section"]="Section";
		lookup["column"]="Column";
		offcanvasList[0].hide();
		messagepop(`<div class="text-start"><form id="template"><p class="text-center">Save <strong style="text-transform:capitalize">`+lookup[context]+`</strong> as a Template</p><div class="mb-2 "><label>Name of Template</label><input id="templatename" pattern="[a-zA-Z0-9 ]+" name="Name" required minlength="10" maxlength="150" class="form-control"></div><div class="mb-2"><label>Availability</label><select name="Type" class="form-select"><option value="public">Public</option><option class="private">Private</option></select></div></form><p id="templatesaveerror" class="text-center text-danger"></p></div>`,"save",function() { return false;  },null,"Cancel",null,null,null,null,null,null,"danger");
		$("#messageYes").parent().before("<div class=\"col d-flex\"><button type=\"button\" id=\"savetemplate\" class=\"flex-grow-1 w-100 btn-sm btn btn-success\">Save</button>");
		
		$("#savetemplate").on("click",function() {  dosavetemplate(e,context,document.getElementById("template"));});
	}
	else
	{
		offcanvasList[0].hide(); 
		messagepop(`Only logged in users can create templates.<br><br>Please register or login first`,`circle-xmark`);
	}
}
function dosavetemplateold(e,context,f)
{
	event.preventDefault();
	document.getElementById("templatename").setCustomValidity("");
	if(f.checkValidity()==false)
	{
		if(document.getElementById("templatename").validity.valueMissing)
		{
			document.getElementById("templatename").setCustomValidity("Please provide a name for the template");
		}
		if(document.getElementById("templatename").validity.tooShort)
		{
			document.getElementById("templatename").setCustomValidity("The template name should be at least 10 characters long");
		}
		if(document.getElementById("templatename").validity.tooLong)
		{
			document.getElementById("templatename").setCustomValidity("The template name should a maximum of 150 characters long");
		}
		if(document.getElementById("templatename").validity.patternMismatch)
		{
			document.getElementById("templatename").setCustomValidity("Please use only letters, numbers and spaces.");
		}
		f.reportValidity();
		return false;
	}
	
	
	var post=$(f).serializeArray();
	post.push({name:"HTML",value:$(e).prop("outerHTML")});
	post.push({name:"Context",value:context});
	$.ajax({
		url:"/scripts/savetemplate.php",
		method:"POST",
		data:post,
		dataType:"json"
	}).done(function(msg)
	{
		
		if(msg.response=="OK")
		{
			$('#messageModal').modal('hide');
			setTimeout(function() {
				messagepop("Your template has been saved.","circle-check");
			},1000);
		}
		else
		{
			if(msg.response=="dup")
			{
				document.getElementById("templatename").setCustomValidity("This template name has already been used");
				f.reportValidity();
				return false;
			}
			else
			{
				$("#templatesaveerror").html(msg.response);
			}
		}
	}).fail(function(e)
	{
		$("#templatesaveerror").html("There has been a fatal server error. The template could not be saved.<br><br>Please Try again Later");
	});
}
function viewtemplates(e,context)
{
	offcanvasList[0].hide(); 
	$.ajax({
		method:"POST",
		data:{context:context},
		url:"/scripts/gettemplates.php",
		dataType:"json"
	}).done(function(msg)
	{	
		if(msg.response=="OK")
		{
			$("#popupcon").find(".modal-header").removeClass("d-none");
			$("#popupcon").find(".modal-title").html(`<span class="flex-grow-1">Choose a template</span> <a class="	 btn  btn-primary mx-2" href="#carouselExampleControls" onclick="$('.carousel').carousel('prev')"><i class="bi bi-caret-left"></i></a>  <a id="templatebutton" class="btn btn-success mx-2">Add to FORM</a> <a class="mx-2 btn  btn-primary href="#carouselExampleControls" role="button" onclick="$('.carousel').carousel('next')" ><i class="bi bi-caret-right"></i></a>`);
			$("#popupdia").removeClass("modal-sm modal-md modal-lg modal-xl modal-xxl");
			$("#popupdia").addClass("modal-xl");
			$("#popupbod").html(msg.html);
			$("#carouselExampleControls").find("input,select,textarea").attr("disabled",true);
			$("#carouselExampleControls").find("a").off();
			$("#carouselExampleControls").find("a").attr("onclick","");
			$("#templatebutton").on("click",function() { usetemplate(e,context,$("#carouselExampleControls").find(".active").attr("id"));});
			toolovers();
			$("#popupbod").css("height","75vh");
			$("#popupbod").css("overflow","auto");
			$("#popupModal").modal("show");
			$('.carousel').carousel();
		}
		else
		{
			messagepop(msg.error,"circle-exclamation");
		}
	});
}
function usetemplate(e,context,templateid)
{
	$.ajax({
		method:"POST",
		url:"/scripts/gettemplate.php",
		data:{id:templateid,context:context},
		dataType:"json"
	}
	).done(function(msg)
	{
		$("#popupModal").modal("hide");
		if(msg.response=="OK")
		{
			
			unselect();
			
			$(e).find(".subcontainer").eq(0).append(msg.html);
			newe=$(e).find(".subcontainer").eq(0).children().last();
			newe=$(newe).find("div[id]").addBack();
			renumbertemplate(newe,msg.json.events,msg.html);
		}
	});
	
}
function clone(e)
{
	unselect();
	newee=e;
	$(e).after($(e).prop("outerHTML"));
	newe=$(e).next();
	cloned=$(newe).find("div[id]").addBack();
	renumber(cloned,e);
}
function renumbertemplate(template,events,html)
{
	types={};
	oldids={};
	types["form-group"]=parseInt($("#formcontainer").attr("data-field"));
	types["formpage"]=parseInt($("#formcontainer").attr("data-sec"));
	types["pagecol"]=parseInt($("#formcontainer").attr("data-pagecol"));
	types["formrow"]=parseInt($("#formcontainer").attr("data-row"));
	types["formcol"]=parseInt($("#formcontainer").attr("data-formcol"));
	$.each(events,function(a,b) {
		console.log(a);
		console.log($(html));
		if($(html).find(a).length==0 && $(html).find("[data-customclass='"+a.replace(".","") + "']").length==0)
		{
			delete events[a];
		}
	});
	$(template).each(function() {
		
		$(this).removeAttr("data-customid");
		if($(this).hasClass("form-group"))
		{
			
			oid=$(this).attr("id");
			types["form-group"]++;
			oldids["#"+$(this).attr("id")]="#field"+types["form-group"];
			$(this).attr("id","field"+types["form-group"]);
			$(this).find("textarea,select,input").eq(0).attr("id","input-field"+types["form-group"]);
			$(this).find("label").eq(0).attr("for","input-field"+types["form-group"]);
			o=0;
			$(this).find(".checks").find(".form-check").each(function()
				{
					$(this).find("input").attr("id","option-"+o+"-field"+types["form-group"]);
					$(this).find("label").attr("for","option-"+o+"-field"+types["form-group"]);
					o++;
				});
				
		}
		if($(this).hasClass("formpage"))
		{
			types["formpage"]++;
			oldids["#"+$(this).attr("id")]="#section"+types["formpage"];
			$(this).attr("id","section"+types["formpage"]);
			$(this).find("div.sectioncard").eq(0).attr("id","cardsection"+types["formpage"]);
		}
		if($(this).hasClass("pagecol"))
		{
			types["pagecol"]++;
			oldids["#"+$(this).attr("id")]="#sectioncol"+types["pagecol"];
			$(this).attr("id","sectioncol"+types["pagecol"]);
			$(this).find("div.sectioncolumncard").eq(0).attr("id","cardpagecol"+types["pagecol"]);
		}
		if($(this).hasClass("formrow")) 
		{
			types["formrow"]++;
			oldids["#"+$(this).attr("id")]="#formrow"+types["formrow"];
			$(this).attr("id","formrow"+types["formrow"]);
			$(this).find("div.rowcard").eq(0).attr("id","cardformrow"+types["formrow"]);
		}
		if($(this).hasClass("formcol"))
		{
			types["formcol"]++;
			oldids["#"+$(this).attr("id")]="#formcol"+types["formcol"];
			$(this).attr("id","formcol"+types["formcol"]);
			$(this).find("div.columncard").eq(0).attr("id","cardformcol"+types["formcol"]);
		}
	});
	$("#formcontainer").attr("data-field",types["form-group"]);
	$("#formcontainer").attr("data-sec",types["formpage"]);
	$("#formcontainer").attr("data-pagecol",types["pagecol"]);
	$("#formcontainer").attr("data-row",types["formrow"]);
	$("#formcontainer").attr("data-formcol",types["formcol"]);
	json=serialiseform();
	if(json["events"])
	{
		events=Object.assign(events,json["events"]);
	}
	
	eventstext=replaceAll(JSON.stringify(events),oldids)
		
		localStorage.setItem("events",(eventstext));
		propagate(false,template);
		dirty();
	}
	function renumber(cloned,e)
	{
		
		var json=serialiseform();
		if(typeof newevents=="undefined")
		{
			var newevents={};
		}
		if(json["events"])
		{
			var events=json["events"];
		}
		else
		{
			events={};
		}
		var oid;
		var replace={};
		var	types={};
		
		
		types["form-group"]=parseInt($("#formcontainer").attr("data-field"));
		types["formpage"]=parseInt($("#formcontainer").attr("data-sec"));
		types["pagecol"]=parseInt($("#formcontainer").attr("data-pagecol"));
		types["formrow"]=parseInt($("#formcontainer").attr("data-row"));
		types["formcol"]=parseInt($("#formcontainer").attr("data-formcol"));
		$(cloned).each(function() {
			$(this).removeAttr("data-customid");
			if($(this).hasClass("form-group"))
			{
				oid=$(this).attr("id");
				types["form-group"]++;
				$(this).attr("id","field"+types["form-group"]);
				$(this).find("textarea,select,input").eq(0).attr("id","input-field"+types["form-group"]);
				$(this).find("label").eq(0).attr("for","input-field"+types["form-group"]);
				o=0;
				$(this).find(".checks").find(".form-check").each(function()
					{
						$(this).find("input").attr("id","option-"+o+"-field"+types["form-group"]);
						$(this).find("label").attr("for","option-"+o+"-field"+types["form-group"]);
						o++;
					});
					if(json["events"])
					{
						if(json["events"]["#"+oid])
						{
							replace["#"+oid]="#field"+types["form-group"];
							newevents["#field"+types["form-group"]]=json["events"]["#"+oid];
							
						}
					}
			}
			if($(this).hasClass("formpage"))
			{
				types["formpage"]++;
				$(this).attr("id","section"+types["formpage"]);
				$(this).find("div.sectioncard").eq(0).attr("id","cardsection"+types["formpage"]);
			}
			if($(this).hasClass("pagecol"))
			{
				types["pagecol"]++;
				$(this).attr("id","sectioncol"+types["pagecol"]);
				$(this).find("div.sectioncolumncard").eq(0).attr("id","cardpagecol"+types["pagecol"]);
			}
			if($(this).hasClass("formrow"))
			{
				types["formrow"]++;
				$(this).attr("id","formrow"+types["formrow"]);
				$(this).find("div.rowcard").eq(0).attr("id","cardformrow"+types["formrow"]);
			}
			if($(this).hasClass("formcol"))
			{
				types["formcol"]++;
				$(this).attr("id","formcol"+types["formcol"]);
				$(this).find("div.columncard").eq(0).attr("id","cardformcol"+types["formcol"]);
			}
		});
		if($(newevents).length>0)
		{
			newevents=JSON.stringify(newevents);
			newevents=replaceAll(newevents,replace);
			newevents=JSON.parse(newevents);
			events=Object.assign(events,newevents);
			
			localStorage.setItem("events",JSON.stringify(events));
		}
		$("#formcontainer").attr("data-field",types["form-group"]);
		$("#formcontainer").attr("data-sec",types["formpage"]);
		$("#formcontainer").attr("data-pagecol",types["pagecol"]);
		$("#formcontainer").attr("data-row",types["formrow"]);
		$("#formcontainer").attr("data-formcol",types["formcol"]);
		propagate(false,e);
		
		dirty();
	}
	function replaceAll(string, replaceObj) {
		return Object.keys(replaceObj).reduce(
			(f, s, i) =>
			`${f}`.replace(new RegExp(s, 'ig'), replaceObj[s]),
			string
		)
	}
	function normalise(e)
	{
		//	
		if($(e).hasClass("form-group"))
		{
			$(e).attr("id",e.id);
			$(e).find("textarea,select,input").eq(0).attr("id","input-"+e.id);
			$(e).find("label").eq(0).attr("for","input-"+e.id);
			o=0;
			$(e).find(".checks").find(".form-check").each(function()
				{
					$(this).find("input").attr("id","option-"+o+"-"+e.id);
					$(this).find("label").attr("for","option-"+o+"-"+e.id);
					o++;
				});
		}
		if($(e).hasClass("formpage"))
		{
			$(e).attr("id",e.id)
			$(e).find("div.sectioncard").eq(0).attr("id","card"+e.id);
		}
		if($(e).hasClass("pagecol"))
		{
			$(e).attr("id",e.id);
			$(e).find("div.sectioncolumncard").eq(0).attr("id","card"+e.id);
		}
		if($(e).hasClass("formrow"))
		{
			$(e).attr("id",e.id);
			$(e).find("div.rowcard").eq(0).attr("id","card"+e.id);
		}
		if($(e).hasClass("formcol"))
		{
			$(e).attr("id",e.id)
			$(e).find("div.columncard").eq(0).attr("id","card"+e.id);
		}
		
		$(e).removeAttr("data-id");
		
	}
	function ticket()
	{
		document.getElementById("ticketsubject").setCustomValidity("");
		$("#offcanvascontext").find("i.fa-info-circle").addClass("fa-bounce");
		if(document.getElementById("checksession").value!="OK")
		{
			document.getElementById("ticketsubject").setCustomValidity("You are not logged in. Only logged in users may submit tickets.");
			document.getElementById("ticketsubject").reportValidity();
			return false;
		}
		if(document.getElementById("ticketsubject").validity.valid==false)
		{
			document.getElementById("ticketsubject").setCustomValidity("Please provide more information about the problem. The more info we have the more quickly we can help.");
			document.getElementById("ticketsubject").reportValidity();
			return false;
		}
		ticketdetail=document.getElementById("ticketsubject").value;
		html="";
		json="";
		if($("#ticketsenddata").attr("checked")=="checked" && localStorage.getItem("formstrap")!=null)
		{
			html=localStorage.getItem("formstrap");
			json=localStorage.getItem("formstrapjson");
		}
		$.ajax({
			method:"POST",
			url:"/scripts/saveticket.php",
			data:{ticket:ticketdetail,html:html,json:json},
			dataType:"json"
		}).done(function(msg)
		{
			if(msg.response=="OK")
			{
				$("#messageModal").modal("hide");
				
				setTimeout(function() { 		messagepop("Thank you for submitting a ticket.<br><br>Please check your email for confirmation and further information.<br><br>You can also view the status of the ticket in your dashboard.","ticket",null,null,null,null,null,null,null,"green"); } ,500);
			}
			else
			{
				$("#ticketerror").html("<p><strong style='color:red'>Your ticket could not be submitted</strong><br><br>"+msg["error"] + "</p>");
				$("#submitticket").parent().remove();
			}
		});
	}
	function eventmeta(e)
	{
		offcanvasList[0].hide();
		$(".conditions").html("");
		offcanvasList[1].show();
		if($(e).attr("data-customclass")=="" || typeof $(e).attr("data-customclass")=="undefined")
		{
			$("#eventtrigger").find("select").trigger("change");
		}
	}
	function getevents(e)
	{
		
		offcanvasList[0].hide();
		formdata=serialiseform();
		
		events=JSON.parse(localStorage.getItem("events"));
		if(events=="" || events==null || typeof events=="undefined")
		{
			events={};
		}
		$.ajax({
			data:{formdata:JSON.stringify(formdata),id:e,events:JSON.stringify(events[e])},
			method:"POST",
		url:"/events.php"		}).done(function(msg)
		{
			msg=msg.split("||||");
			
			$(".conditions").html(msg[0]);
			conhtml=msg[1];
			actionhtml=msg[2];
			offcanvasList[1].show();
			$(".conditions").sortable(
				{ "axis":"y",
					"stop":function() { saveevents(this); }
				});
				$(".actions").sortable({ "axis":"y",
					"stop":function() { saveevents(this); }
				});
				toolovers();
		});
	}
	var json;
	function editevent(e,type)
	{
		action=$(e).parent().parent().find("select.action").val();
		subject=$(e).parent().parent().find("select.subject").val();
		attribute=$(e).parent().parent().find("select.attrlist").val();
		attrvals=$(e).parent().parent().find("select.attrvals").val();
		attrbool=$(e).parent().parent().find("select.attrboolean").val();
		attrval=$(e).parent().parent().find("select.attrvalue").val();
		$(e).parent().parent().find(".attrvals").hide();
		if(type=="action")
		{
			$(e).parent().parent().find(".subject").val("");
			$(e).parent().parent().find(".subject").find("optgroup").removeClass("d-none");
			$(e).parent().parent().find(".subject").parent().show();
		}
		if(type=="action" && action=="delete")
		{
			$(e).closest("div.action").remove();
			saveevents(e);
			return false;
		}
		if(action=="show" || action=="hide")
		{
			$(e).parent().parent().find(".subject").find("optgroup").removeClass("d-none");
			$(e).parent().parent().find(".subject").find("optgroup.pages").addClass("d-none");
			$(e).parent().parent().find(".custfunc").parent().hide();
			$(e).parent().parent().find(".custfunc").val("");
		}
		if(action=='goto' && type=="action")
		{
			$(e).parent().parent().find(".subject").val("");
			$(e).parent().parent().find(".attrlist").val("");
			$(e).parent().parent().find(".attrlist").parent().hide();
			$(e).parent().parent().find(".attrrvalue").val("");
			$(e).parent().parent().find(".attrvalue").parent().hide();
			$(e).parent().parent().find(".attrboolean").val("");
			$(e).parent().parent().find(".attrboolean").parent().hide();
			$(e).parent().parent().find(".attrvaltype").val("");
			$(e).parent().parent().find(".attrvaltype").parent().hide();
			$(e).parent().parent().find(".custfunc").parent().hide();
			$(e).parent().parent().find(".custfunc").val("");
			$(e).parent().parent().find(".subject").find("optgroup").addClass("d-none");
			$(e).parent().parent().find(".subject").find("optgroup.pages").removeClass("d-none");
		}
		if(action=="stop" || action=="" || action=="continue" || action=="reportvalidity")
		{
			$(e).parent().parent().find(".attrpanel").hide();
			$(e).parent().parent().find(".subject").parent().hide();
			$(e).parent().parent().find(".custfunc").parent().hide();
			$(e).parent().parent().find(".custfunc").val("");
			saveevents(e);
			return false;
		}
		if(action=="function")
		{
			$(e).parent().parent().find(".attrpanel").hide();
			$(e).parent().parent().find(".custfunc").parent().show();
			$(e).parent().parent().find(".subject").parent().hide();
			saveevents(e);
			return false;
		}
		if(action=="changeattr")
		{
			$(e).parent().parent().find(".subject").find("optgroup").addClass("d-none");
			$(e).parent().parent().find(".subject").find("optgroup.fields").removeClass("d-none");
			$(e).parent().parent().find(".attrpanel").show();
			$(e).parent().parent().find(".custfunc").parent().hide();
			$(e).parent().parent().find(".custfunc").val("");
			$(e).parent().parent().find(".subject").parent().show();
			if(type=="action")
			{
				$(e).parent().parent().find(".subject").val("");
				$(e).parent().parent().find(".attrlist").val("");
				$(e).parent().parent().find(".attrlist").parent().hide();
				$(e).parent().parent().find(".attrrvalue").val("");
				$(e).parent().parent().find(".attrvalue").parent().hide();
				$(e).parent().parent().find(".attrboolean").val("");
				$(e).parent().parent().find(".attrboolean").parent().hide();
				$(e).parent().parent().find(".attrvaltype").val("");
				$(e).parent().parent().find(".attrvaltype").parent().hide();
			}
			if(type=="subject")
			{
				$(e).parent().parent().find(".attrvaltype").find("option.all").hide();
				$(e).parent().parent().find(".attrvaltype").find("option."+$(subject).data("form")).show();
				$(e).parent().parent().find(".attrlist").val("");
				if(subject=="")
				{
					$(e).parent().parent().find(".attrpanel").hide();
				}
				else
				{
					$(e).parent().parent().find(".attrpanel").show();
					$(e).parent().parent().find(".attrlist").parent().show();
					$(e).parent().parent().find("select.attrlist").find(".all").removeClass("d-none");
					$(e).parent().parent().find("select.attrlist").find(".not-"+$(subject).data("form")).addClass("d-none");
				}
			}
			if(type=="attribute")
			{
				if(attribute=="")
				{
					$(e).parent().parent().find(".attrvals").hide();
				}
				else
				{
					if(attribute=="disabled" || attribute=="readonly" || attribute=="customvalid" || attribute=="required")
					{
						$(e).parent().parent().find(".attrboolean").show();
						if(attribute=="customvalid")
						{
							$(e).parent().parent().find(".attrboolean").find("option[value=null]").show();
						}
						else
						{
							$(e).parent().parent().find(".attrboolean").find("option[value=null]").hide();
						}
					}
					else
					{
						if(attribute=="value" || attribute=="max" || attribute=="min")
						{
							$(e).parent().parent().find(".attrvaltype").show();
							$(e).parent().parent().find(".attrvaltype").val("");
							$(e).parent().parent().find(".attrvalue").hide();
							$(e).parent().parent().find("input.attrvalue").attr("type",$(subject).find("input").attr("type"));
						}
						else
						{
							if(attribute!="")
							{
								$(e).parent().parent().find(".attrvaltype").hide();
								$(e).parent().parent().find(".attrvaltype").val("");
								$(e).parent().parent().find(".attrvalue").show();
								if(attribute=="max" || attribute=="min")
								{
									$(e).parent().parent().find("input.attrvalue").attr("type",$(subject).find("input").attr("type"));
								}
								else
								{
									$(e).parent().parent().find("input.attrvalue").attr("type","number");
								}
							}
						}
					}
				}
			}
		}
		saveevents(e,true);
	}
	function actionvalid(e)
	{
		if($(e).find("select.action").eq(0).val()=="")
		{
			return false;
		}
		if($(e).find("select.action").eq(0).val()=="stop" || $(e).find("select.action").eq(0).val()=="continue" || $(e).find("select.action").eq(0).val()=="reportvalidity" )
		{
			return true;
		}
		if($(e).find("select.action").eq(0).val()=="function")
		{
			var r=new RegExp(/^[a-zA-Z_]+$/);
			if(r.test($(e).find("input.custfunc").val())==false || $(e).find("input.custfunc").val().trim()=="" || $(e).find("input.custfunc").get(0).validity.valid==false)
			{
				return false;
			}
			else
			{
				if(localStorage.getItem("custfuncwarn")!="do not warn")
				{
					if(typeof window[$(e).find("input.custfunc").val().trim()]!="function")
					{
					messagepop("The custom function specified does not exist in the current context.<br><br>You need to write this function.<br><br>If you are self-hosting you can edit the functions in your <strong>/js/events.js</strong> file in the package download.<br><br>If you are hosting on formstrap, add it to the <strong>On Load</strong> JavaScript field in Form Settings in the dashboard.","exclamation-circle",function() { return false },function() { localStorage.setItem("custfuncwarn","do not warn"); return false; },"<big>OK</big><br>I Understand","<small>Don't Show This Warning Again</small>"); };
				}
				return true;
			}
		}
		
		if($(e).find("select.subject").eq(0).val()=="")
		{
			return false;
		}
		
		
		
		if($(e).find("select.action").eq(0).val()=="changeattr")
		{
			if($(e).find("select.attrlist").eq(0).val()=="")
			{
				return false;
			}
			if(($(e).find("select.attrlist").eq(0).val()=="maxlength" || $(e).find("select.attrlist").eq(0).val()=="minlength" || $(e).find("select.attrlist").eq(0).val()=="step" ) &&  $(e).find("input.attrvalue").eq(0).val()=="")
			{
				return false;
			}
			if(($(e).find("select.attrlist").eq(0).val()=="disabled" || $(e).find("select.attrlist").eq(0).val()=="customvalid" || $(e).find("select.attrlist").eq(0).val()=="readonly" || $(e).find("select.attrlist").eq(0).val()=="required" ) &&  $(e).find("select.attrboolean").eq(0).val()=="")
			{
				return false;
			}
			if($(e).find("select.attrlist").eq(0).val()=="value"  &&  $(e).find("select.attrvaltype").eq(0).val()=="")
			{
				return false;
			}
			if($(e).find("select.attrvaltype").is(":visible") && $(e).find("select.attrvaltype").val()=="")
			{
				return false;
			}
		}
		return true;
	}
	function eventvalid(e)
	{
		if($(e).find(".object").eq(0).val()=="")
		{
			return false;
		}
		if( $(e).find(".compare").eq(0).val()=="" && $(e).find(".object").eq(0).val()!="DO"  && $(e).find(".object").eq(0).val()!="customfunc" && $(e).find(".object").eq(0).val()!="customfuncfalse")
		{
			return false;
		}
		if(($(e).find(".object").eq(0).val()=="customfunc" || $(e).find(".object").eq(0).val()=="customfuncfalse") && $(e).find(".custfuncname").eq(0).val()!=""  && $(e).find(".custfuncname").get(0).validity.valid==true)
		{
			if(localStorage.getItem("custfuncwarn")!="do not warn")
			{
				if(typeof window[$(e).find(".custfuncname").val().trim()]!="function")
				{
					messagepop("The custom function specified does not exist in the current context.<br><br>You need to write this function.<br><br>If you are self-hosting you can edit the functions in your <strong>/js/events.js</strong> file in the package download.<br><br>If you are hosting on formstrap, add it to the <strong>On Load</strong> JavaScript field in Form Settings in the dashboard.","exclamation-circle",function() { return false },function() { localStorage.setItem("custfuncwarn","do not warn"); return false; },"<big>OK</big><br>I Understand","<small>Don't Show This Warning Again</small>"); 
				};
			}
			
			return true;
		}
		if(($(e).find(".object").eq(0).val()=="customfunc" || $(e).find(".object").eq(0).val()=="customfuncfalse") && ($(e).find(".custfuncname").eq(0).val()=="" || $(e).find(".custfuncname").get(0).validity.valid==false))
		{
			return false;
		}
		
		if( ($(e).find(".compare").eq(0).val()=="=" ||  $(e).find(".compare").eq(0).val()=="!=" || $(e).find(".compare").eq(0).val()=="contains" || $(e).find(".compare").eq(0).val()=="notcontains" || $(e).find(".compare").eq(0).val()==">" || $(e).find(".compare").eq(0).val()==">=" || $(e).find(".compare").eq(0).val()=="<" || $(e).find(".compare").eq(0).val()=="<=") && $(e).find("input.value").eq(0).attr("type")!="checkbox" &&  ($(e).find("input.value").eq(0).val()=="" && $(e).find("select.fieldvalue").eq(0).val()=="fixed"))
		{
			return false;
		}
		if(($(e).find(".compare").eq(0).val()=="="  ||  $(e).find(".compare").eq(0).val()=="any"  ||  $(e).find(".compare").eq(0).val()=="all"  ||  $(e).find(".compare").eq(0).val()=="none"    ||  $(e).find(".compare").eq(0).val()=="!=" || $(e).find(".compare").eq(0).val()=="contains" || $(e).find(".compare").eq(0).val()=="notcontains" || $(e).find(".compare").eq(0).val()==">" || $(e).find(".compare").eq(0).val()==">=" || $(e).find(".compare").eq(0).val()=="<" || $(e).find(".compare").eq(0).val()=="<=") && $(e).find("input.value").eq(0).attr("type")=="checkbox" &&  $(e).find("input.value:checked").length==0)
		{
			return false;
		}
		if(($(e).find(".compare").eq(0).val()=="between" || $(e).find(".compare").eq(0).val()=="betweenx" || $(e).find(".compare").eq(0).val()=="betweenx-i" || $(e).find(".compare").eq(0).val()=="between-i"   ))
		{
			if($(e).find("select[name=fieldfrom]").val()=="" || $(e).find("select[name=fieldto]").val()=="")
			{
				return false;
			}
			if($(e).find("select[name=fieldfrom]").val()=="fixed" && $(e).find("input[name=valuefrom]").val()=="")
			{
				return false;
			}
			if($(e).find("select[name=fieldto]").val()=="fixed" && $(e).find("input[name=valueto]").val()=="")
			{
				return false;
			}
		}
		return true;
	}
	var events;
	var ce;
	function saveevents(e,save)
	{
		if(typeof save=="undefined")
		{
			save=false;
		}
		events=[];
		nosave=false;
		if(localStorage.getItem("events")==null || localStorage.getItem("events")=="null")
		{
			eventjson={};
		}
		else
		{
			eventjson=JSON.parse(localStorage.getItem("events"));
		}
		z=0;
		a=0;
		$(".condition").each(function()
			{
				$(this).find(".error").html("");
				if(eventvalid(this))
				{
					events[z]={};
					value=[];
					$(this).find("input.value,select.value").each(function()
						{
							
							if(this.type=="checkbox" )
							{
								value.push({[$(this).attr("name")]:this.value,"checked":this.checked});
							}
							else
							{
								value.push({[$(this).attr("name")]:this.value});
							}
						})
						events[z]["Condition"]={"customfunction":$(this).find(".custfuncname").eq(0).val(),"object":$(this).find(".object").eq(0).val(),"compare":$(this).find(".compare").eq(0).val(),"fieldvalue":$(this).find(".fieldvalue").eq(0).val(),"value":value};
						events[z]["Actions"]=[];
						$(this).find("div.action").each(function() {
							$(this).find(".actionerror").html("");
							if(actionvalid(this))
							{
								events[z]["Actions"].push({"action":$(this).find("select.action").val(),"customfunction":$(this).find("input.custfunc").val(),"subject":$(this).find("select.subject").val(),"attribute":$(this).find("select.attrlist").val(),"attrvaluetype":$(this).find(".attrvaltype").val(),"attrvalueboolean":$(this).find(".attrboolean").val(),"attributevalue":$(this).find(".attrvalue").val()});
							}
							else
							{
								$(this).find(".actionerror").html("<div style='border-radius:5px;margin-top:0.5em;background-color:white;border:2px solid red;padding:3px;font-size:0.8em;'>This action is not valid. It will not be saved.</div>");
								nosave=true;
							}
						});
						z++;
				}
				else
				{
					$(this).find(".error").html("<div style='border-radius:5px;margin-bottom:0.5em;background-color:white;border:2px solid red;padding:3px;font-size:0.8em;'>This condition is not valid. It will not be saved.</div>");
					nosave=true;
				}
			});
			if(events)
			{
				eventjson[document.getElementById("eventid").value]=events;
			}
			localStorage.setItem("events",JSON.stringify(eventjson));
			$(".conditions").sortable(
				{ "axis":"y",
					"stop":function() { saveevents(this); }
				});
				$(".actions").sortable({ "axis":"y",
					"stop":function() { saveevents(this); }
				});
				
				
				
				dirty(); 
	}
	function geteventvalue(e,justcompare)
	{
		
		if(typeof justcompare=="undefined")
		{
			justcompare=false;
		}
		if(e.value=="delete")
		{
			$(e).closest(".condition").remove();
			saveevents(e);
			return false;
		}
		if(e.value=="customfunc" || e.value=="customfuncfalse")
		{
			$(e).closest(".condition").find(".value").hide();
			$(e).closest(".condition").find(".compare").hide();
			$(e).closest(".condition").find(".custfunccont").show();
			saveevents(e);
			return false;
		}
		$(e).closest(".condition").find(".custfunccont").hide();
		$(e).closest(".condition").find(".value").hide();
		$(e).closest(".condition").find(".compare").hide();
		if(e.value=="DO") { 
			$(e).closest(".condition").find(".value").hide();
			$(e).closest(".condition").find(".compare").hide();
			saveevents(e);
			return false;
		}
		if(e.value=="")
		{
			saveevents(e);
			return false;
		}
		
		$(e).closest(".condition").find(".compare").show();
		$(e).parent().parent().find("select.compare").find(".all").show();
		$(e).parent().parent().find("select.compare").find(".not-"+$(""+e.value).data("form")).hide();
		if($(e).parent().parent().find("select.compare").find(":selected").css("display")=="none")
		{
			$(e).parent().parent().find("select.compare").val(""); 
		}
		
		if($(e).closest(".condition").find(".compare").val()=="valid" || $(e).closest(".condition").find(".compare").val()=="!valid" || $(e).closest(".condition").find(".compare").val()=="null" || $(e).closest(".condition").find(".compare").val()=="!null" ||  $(e).closest(".condition").find(".compare").val()=="")
		{
			saveevents(e);
			return false;
		}			else
		{
			$(e).closest(".condition").find(".value").show();
		}
		$(e).parent().parent().find("select.compare").find("option.all").show();
		$(e).parent().parent().find("select.compare").find("option.not-"+$(""+e.value).data("form")).hide();
		if(justcompare)
		{
			saveevents(e);
			return false;
		}
		if(e.value=="")
		{
			$(e).parent().parent().parent().find(".action").addClass("d-none");
		}
		else
		{
			$(e).parent().parent().parent().find(".action").removeClass("d-none");
		}
		html="";
		$(e).parent().parent().find("div.value").css("display","none");
		$(e).parent().parent().find(">div.value").html(html);
		if(e.value=="")
		{
			saveevents(e);
			return false;
		}
		if($(""+e.value).data("form")=="select" )
		{
			$(""+e.value).find("option").each(function()
				{
					ellip="";
					if($(this).html().length>20)
					{
						ellip="&hellip;";
					}
					html=html+`<label data-bs-toggle="tooltip" title="`+$(this).html() + `" style="cursor:pointer;border-radius:4px;border:1px solid brown;background-color:Ivory;font-size:0.7em;padding-bottom:2px;display:inline-block;width:auto;" class="me-2 px-2"><input style="vertical-align:middle;" onclick="saveevents(this)" class="value" name="values" type="checkbox" value="` + $(this).val() + `"> `+$(this).html().substring(0,20) +ellip+ `</label>`;
				})
				$(e).parent().parent().find("div.value").html(html);
				$(e).parent().parent().find("div.value").css("display","block");
		}
		else
		{
			if($(""+e.value).data("form")=="radio" || $(""+e.value).data("form")=="checkbox")
			{
				$(""+e.value).find(".form-check").each(function()
					{
						ellip="";
						if($(this).find("label").html().length>20)
						{
							ellip="&hellip;";
						}
						html=html+`<label data-bs-toggle="tooltip" title="`+$(this).find("label").html() + `" style="margin-bottom:1px;cursor:pointer;border-radius:4px;border:1px solid brown;background-color:Ivory;font-size:0.7em;padding-bottom:2px;display:inline-block;width:auto;" class="me-2 px-2"><input style="vertical-align:middle;" onclick="saveevents(this)" class="value" name="values" type="checkbox" value="` + $(this).find("input").val() + `"> `+$(this).find("label").html().substring(0,20) +ellip+ `</label>`;
					})
					$(e).parent().parent().find("div.value").html(html);
					$(e).parent().parent().find("div.value").css("display","block");
			}
			else
			{
				if($(e).parent().parent().find("select.compare").eq(0).val()=="between" || $(e).parent().parent().find("select.compare").eq(0).val()=="betweenx" || $(e).parent().parent().find("select.compare").eq(0).val()=="betweenx-i" || $(e).parent().parent().find("select.compare").eq(0).val()=="between-i")
				{
					
					$(e).parent().parent().find("div.value").html(`<div class="row gx-1"><div class="col" style="position:relative"><span><select onchange="if(this.value=='fixed') { $(this).parent().hide();$(this).parent().next().show(); };saveevents(this);" name="fieldfrom" class="value form-select form-select-sm"><option value="">Select</option><option value="fixed" value="fixed">Fixed Value</option><optgroup class="fieldlist" label="Value of Field..."></optgroup></select></span><span style="display:none"><input type="`+ $(""+e.value).data("form") + `" onchange="saveevents(this)"    name="valuefrom"  class="value form-control form-control-sm"><i onclick=" $(this).parent().hide();$(this).parent().prev().show();$(this).parent().prev().find('select').val('');" style="cursor:pointer;position:absolute;right:5px;top:7px" class="fal fa-fw fa-list"></i></span></div><div class="col-2 text-center pt-2"><span class="align-text-middle">and</span></div><div  style="position:relative" class="col"><span><select onchange="if(this.value=='fixed') { $(this).parent().hide();$(this).parent().next().show(); };saveevents(this);"  name="fieldto" class="value form-select form-select-sm"><option value="">Select</option><option value="fixed" value="fixed">Fixed Value</option><optgroup label="Value of Field..." class="fieldlist"></optgroup></select></span><span style="display:none"><input onchange="saveevents(this)" type="`+ $(""+e.value).data("form") + `" name="valueto"  class="value form-control form-control-sm"><i onclick=" $(this).parent().hide();$(this).parent().prev().show();$(this).parent().prev().find('select').val('');" style="cursor:pointer;position:absolute;right:5px;top:7px" class="fal fa-fw fa-list"></i></span></div></div>`);
					$(e).parent().parent().find("div.value").css("display","block");
					$("#formcontainer").find(".form-group").each(function()
						{
							$(e).parent().parent().find(".fieldlist").append(`<option value="`+this.id+`">Value of `+ ($(this).attr("data-customid") ? $(this).attr("data-customid") : this.id ) +`</option>`);
						});
				}
				else
				{
					//$(e).parent().parent().find("div.value").html(`<input onchange="saveevents()" name="value" style="width:40%;display:inline-block;"  type="`+ $("#"+e.value).data("form") + `" class="value form-control form-control-sm">`);
					$(e).parent().parent().find("div.value").html(`<div class="row gx-1"><div class="col"><select onchange="if(this.value=='fixed') { $(this).parent().parent().find('.value').parent().show();  } else { $(this).parent().parent().find('.value').parent().hide(); } saveevents(this);" name="fieldvalue"  class="form-select form-select-sm fieldvalue"><option value="fixed" value="fixed">Fixed Value</option><optgroup class="fieldlist" label="Value of Field..."></optgroup></select></div><div   class="col"><input onchange="saveevents(this)" name="value" value=""  type="`+ $(""+e.value).data("form") + `"  class="value form-control form-control-sm"></div></div>`);
					$(e).parent().parent().find("div.value").css("display","block");
					$("#formcontainer").find(".form-group").each(function()
						{
							$(e).parent().parent().find(".fieldlist").append(`<option value="`+this.id+`">Value of `+ ($(this).attr("data-customid") ? $(this).attr("data-customid") : this.id ) +`</option>`);
						});
				}
			}
		}
		if($(e).parent().parent().find(".compare").find(":selected").hasClass("d-none"))
		{
			$(e).parent().parent().find(".compare").val("=");
		}
		setTimeout(function() { toolovers();saveevents(e); },100);
	}
	function eventchangesubject(e)
	{
		$(e).parent().parent().find("select.attrlist").val("");
		$(e).parent().parent().find("select.attrlist").find(".all").removeClass("d-none");
		$(e).parent().parent().find("select.attrlist").find(".not-"+$(""+e.value).data("form")).addClass("d-none");
		$(e).parent().parent().find("select.attrlist").trigger("change");
		$(e).parent().parent().find("input.attrvalue").attr("type",$(e.value).find("input").attr("type"));
		saveevents(e);
	}
	function eventchangeattr(e)
	{
		$(e).parent().parent().find("input.attrvalue").attr("type",$($(e).parent().parent().find("select.subject").val()).attr("type"));
		$(e).parent().parent().find(".attrvalue").val("");
		$(e).parent().parent().find(".attrboolean").val("");
		$(e).parent().parent().find(".attrvaltype").val("");
		if(e.value=="step" || e.value=="minlength" || e.value=="maxlength")
		{
			$(e).parent().parent().find(".attrvalue").prop("type","number");
		}
		$(e).parent().parent().find(".attrvals").hide();
		$(e).parent().parent().find(".attrvalue").show();
		if(e.value=="disabled" || e.value=="readonly" || e.value=="required")
		{
			$(e).parent().parent().find(".attrboolean").show();
			$(e).parent().parent().find(".attrvalue").hide();
		}
		if(e.value=="min" || e.value=="max" || e.value=="value")
		{
			if($(e).parent().parent().find(".attrvaltype").val()=="value")
			{
				$(e).parent().parent().find(".attrvaltype").hide();
				$(e).parent().parent().find(".attrvalue").show();
			}
			else
			{
				$(e).parent().parent().find(".attrvaltype").show();
				$(e).parent().parent().find(".attrvalue").hide();
			}
		}
		saveevents(e);
	}
	function spell(e) {
		if (!spelled) {
			spelled = true;
			$(e).find(".hidden").show(500);
			setTimeout(function() {
				unspell(e)
			}, 5000)
		}
	}
	function unspell(e) {
		$(e).find(".hidden").hide(500);
		setTimeout(function() {
			spelled = false
		}, 2000)
	}
	function dirty()
	{
		$("#menudonatebutton").hide();
		document.getElementById("dirty").value="yes";
		$("#savebutton").show();
		document.getElementById("savebutton").innerHTML=`<i class="fal fa-exclamation-circle"></i> Unsaved`;
		$("#savebutton").addClass("btn-danger");
		$("#savebutton").removeClass("btn-warning btn-primary btn-success");
		window.addEventListener("beforeunload", beforeUnloadHandler);
	}
	function saveform(publish)
	{
		if(typeof publish=="undefined")
		{
			publish=false;
		}
		if(document.getElementById("dirty").value=="")
		{
			return true;
		}
		$("#savebutton").show();
		document.getElementById("savebutton").innerHTML=`<i class="fal fa-spin fa-spinner"></i> Saving`;
		$("#savebutton").addClass("btn-warning");
		$("#savebutton").removeClass("btn-danger btn-primary btn-success");
		if($("#offcanvascontext").hasClass("show")==false)
		{
			unselect();
		}
		localStorage.setItem("formstrap", $("#fullform").html().trim())
		localStorage.setItem("formstrapjson",JSON.stringify(serialiseform()));
		localStorage.setItem("saved",new Date);
		if(localStorage.getItem("formid")!=null)
		{
			localStorage.setItem("status","unsaved");
			if(publish==false)
			{
				if(document.getElementById("mainlogin"))
				{
					messagepop("Changes  to the form have been saved in your browser's local storage.<br><br>To upload changes to your formstrap account, please login to your dashboard.","computer",function() { login() ;},function() { return false; },"Log In","Not Now");
				}
				else
				{
					messagepop("Changes to the form have been saved to your browser's local storage.<br><br>To upload changes to your formstrap account, please view your dashboard","computer",function() { window.open("/dashboard","dashboard");},function() { return false; },"Dashboard","Not Now");
				}
			}
		}
		$(".savenote").toggle();
		propagate(true);
		setTimeout(function() {
			$("#savebutton").show();
			document.getElementById("savebutton").innerHTML=`<i class="fal fa-check-circle fa-fw"></i> Saved`;
			$("#savebutton").addClass("btn-success");
		$("#savebutton").removeClass("btn-danger btn-warning btn-primary"); },500);
		document.getElementById("dirty").value="";
		$("#menudonatebutton").show();
		window.removeEventListener("beforeunload", beforeUnloadHandler);
	}
	function createnewform() {
		$.ajax({
			method: "POST",
			url: "/scripts/createnewform.php",
			}).done(function(msg) {
			if (msg) {
				designform(msg)
				} else {
				alert("There has been an error")
			}
		})
	}
	function updatename(value) {
		if (document.getElementById("fieldcontextname").value == "") {
			document.getElementById("fieldcontextname").value = value.replace(/[^A-Z0-9]+/ig, "_");
			$("#fieldcontextname").trigger("keyup")
		}
	}
	function propagate(sort,clone) {
		$("#formcontainer").find(".form-control,form-select").attr("autocomplete","off");
		$("#formcontainer .formpage,#formcontainer .pagecol,#formcontainer .formrow,#formcontainer .formcol,#formcontainer .form-group").off();
		$("#formcontainer .formpage,#formcontainer .pagecol,#formcontainer .formrow,#formcontainer .formcol,#formcontainer .form-group").on("contextmenu dblclick", function(e) {
			position=e.pageX;
			if(typeof position=="undefined")
			{
				position=$(this).offset().left;
			}
			
			if( typeof position!="undefined")
			{
				if(position<(window.innerWidth/2))
				{
					$("#offcanvascontext").removeClass("offcanvas-start");
					$("#offcanvascontext").addClass("offcanvas-end");
					$("#offcanvasevents").removeClass("offcanvas-start");
					$("#offcanvasevents").addClass("offcanvas-end");
				}
				else
				{
					$("#offcanvascontext").removeClass("offcanvas-end");
					$("#offcanvascontext").addClass("offcanvas-start");
					$("#offcanvasevents").removeClass("offcanvas-end");
					$("#offcanvasevents").addClass("offcanvas-start");
				}
			}
			
			unselect();
			e.stopPropagation();
			e.preventDefault();
			
			that=this;
			if($("#offcanvascontext").hasClass("show"))
			{
				getcontext(this);
			}
			else
			{
				setTimeout(function() {  getcontext(that);},500);
			}
			return false
		});
		$("#formcontainer .formpage,#formcontainer .pagecol,#formcontainer .formrow,#formcontainer .formcol,#formcontainer .form-group").on("click", function(e) { 
			e.stopPropagation(); 
			getcontext(this,false);
		});
		$("#formcontainer").find(".form-group").each(function() {
			
			normalise(this);
		});
		toolovers();
		if(sort)
		{
			runsortable();
		}
		toolovers();
		if(typeof clone!="undefined")
		{
			$(clone).next().trigger("contextmenu"); 
		}
	}
	function addpage(id) {
		
		$("#formcontainer").attr("data-sec",parseInt($("#formcontainer").attr("data-sec"))+1);
		if(typeof id=="undefined")
		{
			id=$("#formcontainer").attr("data-sec")
		}
		$('#formcontainer').append(`<div data-gx="gx-3" data-gy="gy-0" data-renderhtml="yes"  data-page="` + document.getElementById("selectedpage").value + `"    id="section`+id+`"  class="visibleyes    formpage section"><h2 class="d-none section-header"></h2><div   class="d-none section-description mb-3"></div><div class="pagecolcontainer subcontainer row gx-2 gy-0" ></div></div>`);
		propagate(true);
		
		$("#formcontainer").find(".section").last().trigger("contextmenu");
		dirty();
	}
	function highlightdropzone(e)
	{
		if($(e.item[0]).hasClass("form-group"))
		{
			$(".fieldcontainer").css("border","2px dashed green");
			$(".fieldcontainer").css("padding","5px");
			
		} 
		if($(e.item[0]).hasClass("pagecol"))
		{
			$(".pagecolcontainer").css("border","2px dashed green");
			$(".pagecolcontainer").css("padding","5px");
		} 
		if($(e.item[0]).hasClass("formcol"))
		{
			$(".formcolcontainer").css("border","2px dashed green");
			$(".formcolcontainer").css("padding","5px");
		}
		if($(e.item[0]).hasClass("formrow"))
		{
			$(".formrowcontainer").css("border","2px dashed green");
			$(".formrowcontainer").css("padding","5px");
		}
	}
	function unhighlightdropzone(e)
	{
		if($(e.item[0]).hasClass("form-group"))
		{
			$(".fieldcontainer").css("border","2px dotted red");
			$(".fieldcontainer").css("padding","2px");
		} 
		if($(e.item[0]).hasClass("formcol"))
		{
			$(".formcolcontainer").css("border","2px dotted red");
			$(".formcolcontainer").css("padding","2px");
		}
		if($(e.item[0]).hasClass("pagecol"))
		{
			$(".pagecolcontainer").css("border","2px dotted  red");
			$(".pagecolcolcontainer").css("padding","2px");
		} 
		if($(e.item[0]).hasClass("formrow"))
		{
			$(".formrowcontainer").css("border","2px dotted red");
			$(".formrowcontainer").css("padding","2px");
		}
	}
	function addfield(e,id) {
		$("#formcontainer").attr("data-field",parseInt($("#formcontainer").attr("data-field"))+1);
		if(typeof id=="undefined")
		{
			id=$("#formcontainer").attr("data-field")
		}
		$(e).find(".fieldcontainer").append(`<div data-mb="mb-2" data-mt="mt-0" data-ms="ms-0" data-me="me-0" data-input-size="reg"   data-note-position="under"  id="field`+id+`"  data-form='text' class='form-group mb-2 me-0 ms-0 mt-0'><label class="form-label"><i class="labelnote d-none fal fa-fw fa-info-circle"></i> <span class="labeltext">Label</span></label><input  id="input`+field+`"   class='form-control inputcomponent' type='text'name=''><div  class='d-none form-text'></div></div>`);
		propagate(true);
		dirty();
		$(e).find(".form-group").last().trigger("contextmenu");
		
	}
	ri = 0;
	rj = 0;
	function addpagecolumn(e,id) {
		
		$("#formcontainer").attr("data-pagecol",parseInt($("#formcontainer").attr("data-pagecol"))+1);
		if(typeof id=="undefined")
		{
			id=$("#formcontainer").attr("data-pagecol");
		}
		$(e).find(".pagecolcontainer").append(`<div data-renderhtml="yes" data-width-xs="col"   id="sectioncol`+id+`" data-replicable='no' class='visibleyes pagecol col'><h3 class="d-none sectioncolumn-header"></h3><div  class="d-none sectioncolumn-description mb-3"></div><div class="col formrowcontainer subcontainer"></div></div>`);
		
		propagate(true);
		dirty();
		$(e).find(".pagecol").last().trigger("contextmenu");
	}
	var sorted = false;
	function runsortable() {
		
		$("#formcontainer").sortable({
			items: ".formpage:visible",
			tolerance: "pointer",
			helper: "original",
			zIndex:10000,
			cursor: "move",
			delay:200,
			scroll:true,
			sort: function(event,ui)
			{
				checkscreen(event,ui);
			},
			stop: function(event,ui) {
				propagate(false);
				unhighlightdropzone(ui);
				dirty();
			},
			start:function(event,ui)
			{
				highlightdropzone(ui)
			}
		});
		$(".pagecolcontainer").each(function() {
			$(this).sortable({
				items: ".pagecol",
				tolerance: "pointer",
				helper: "original",
				cursor: "move",
				connectWith: ".pagecolcontainer",
				delay:200,
				scroll:true,
				sort: function(event,ui)
				{
					checkscreen(event,ui);
				},
				stop: function(event,ui) {
					unhighlightdropzone(ui);
					propagate(false);
					dirty();
				},
				start:function(event,ui)
				{
					highlightdropzone(ui)
				}
			})
		});
		$(".formrowcontainer").each(function() {
			$(this).sortable({
				items: ".formrow",
				tolerance: "pointer",
				helper: "original",
				cursor: "move",
				connectWith: ".formrowcontainer",
				delay:200,
				scroll:true,
				sort: function(event,ui)
				{
					checkscreen(event,ui);
				},
				stop: function(event,ui) {
					unhighlightdropzone(ui);
					propagate(false);
					dirty();
				},
				start:function(event,ui)
				{
					highlightdropzone(ui)
				}
			})
		});
		$(".formcolcontainer").each(function() {
			$(this).sortable({
				items: ".formcol",
				connectWith: ".formcolcontainer",
				helper: "original",
				cursor: "move",
				tolerance: "pointer",
				delay:200,
				scroll:true,
				stop: function(event,ui) {
					unhighlightdropzone(ui);
					propagate(false);dirty();
				},
				sort: function(event,ui)
				{
					checkscreen(event,ui);
				},
				start:function(event,ui)
				{
					highlightdropzone(ui)
				}
			})
		});
		$(".fieldcontainer").each(function() {
			$(this).sortable({
				items: ".form-group",
				connectWith: ".fieldcontainer",
				helper: "original",
				
				cursor: "move",
				tolerance: "pointer",
				delay:200,
				scroll:true,
				sort: function(event,ui)
				{
					checkscreen(event,ui);
				},
				stop: function(event,ui) {
					unhighlightdropzone(ui);
					propagate(false);
					if(sortablechange["parent"]!=$(ui.item[0]).parent()[0] || (sortablechange["parent"]==$(ui.item[0]).parent()[0]  && sortablechange["position"]!=$(ui.item[0]).index()))
					{
						dirty();
					}
				},
				start:function(event,ui)
				{
					highlightdropzone(ui);
					sortablechange={"parent":$(ui.item[0]).parent()[0],"position":$(ui.item[0]).index()}
					
				}
			})
		})
	}
	sortablechange={};
	function checkscreen(a,b)
	{
		height=document.documentElement.scrollHeight;
		viewport=window.innerHeight;
		offset=b.offset.top;
		scrollposition=window.scrollY;
		if(offset>scrollposition+viewport)
		{
			window.scroll(0,scrollposition+50);
		}
		
		if(offset<scrollposition)
		{
			
			window.scroll(0,scrollposition-50);
		}
		
	}
	function SortTable(table, icon, nr,ele) {
		
		if($(icon).hasClass("fa-sort-up"))
		{
			$(icon).removeClass("fa-sort-up");
			$(icon).addClass("fa-sort-down");
			order="asc";
		}
		else
		{
			$(icon).removeClass("fa-sort-down");
			$(icon).addClass("fa-sort-up");
			order="desc"
		}			var asc = order === 'asc',
		tbody = table.find('tbody');
		tbody.find('tr').sort(function (a, b) {
			if ($('td:nth-child('+ nr +')', a).find("input").val() == "Name") return $('td:nth-child('+ nr +')', a).find("input").val();
			else if (asc) {
				return $('td:nth-child('+ nr +')', a).find("input").val().localeCompare($('td:nth-child('+ nr +')', b).find("input").val());
				} else {
				return $('td:nth-child('+ nr +')', b).find("input").val().localeCompare($('td:nth-child('+ nr +')', a).find("input").val());
			}
		}).appendTo(tbody);
		optionsreindex(ele);
	}
	function pagesort()
	{
		$("#formcontainer").sort(sort_sections)
		.appendTo("#formcontainer");
	}
	function sort_sections(a, b){
		return ($(b).data('page')) <= ($(a).data('page')) ? 1 : -1;
	}
	function addcolumn(e,id) {
		$("#formcontainer").attr("data-formcol",parseInt($("#formcontainer").attr("data-formcol"))+1);
		if(typeof id=="undefined")
		{
			$("#formcontainer").attr("data-formcol");
		}
		
		$(e).find(".formcolcontainer").append(`<div data-renderhtml="yes" data-width-xs="col"  id="formcol`+id+`" class='visibleyes formcol col'><h5 class="d-none column-header"></h5><div class="d-none column-description mb-3"></div><div class="fieldcontainer subcontainer"></div></div>`);
		dirty();
		propagate(true);
		$(e).find(".formcol").last().trigger("contextmenu");
	}
	function convert(desc)
	{
		
		var string="";
		var html="";
		$(desc).each(function()
			{
				html=$(this).html();
				attrib=this.attributes;
				string="";
				that=this;
				$(attrib).each(function(x,y)
					{
						attr=y.nodeName || y.name;
						
						value=$(that).attr(attr);
						if(attr=="class")
						{
							value=value+" mb-3";
						}
						string=string+attr + `="` + value + `" `;
						
					});
					
					$(this).replaceWith("<div " + string + ">" + html + "</div>");
					
			});
			
	}
	function addrow(e,id) {
		
		$("#formcontainer").attr("data-row",parseInt($("#formcontainer").attr("data-row"))+1);
		if(typeof id=="undefined")
		{
			id=$("#formcontainer").attr("data-row");
		}
		$(e).find(".formrowcontainer").append(`<div data-gx="gx-3" data-gy="gy-0" data-renderhtml="yes"   id="formrow`+id+`" data-replicable="no" class='visibleyes   formrow' ><h4 class="d-none row-header"></h4><div    class="mb-3 d-none row-description"></div><div  class="row gx-2 gy-0 formcolcontainer subcontainer"></div></div>`);
		propagate(true);
		dirty();
		$(e).find(".formrow").last().trigger("contextmenu");
	}
	var that;
	function deletecheck(check) {
		$(check).parent().parent().remove();
		propagate(true)
	}
	function changecss(css, container, id, value) {
		$("#" + id).find(container).css(css, value)
	}
	function changevalue(n, id, value) {
		$("#" + id).find("input").eq(n).val(value)
	}
	function changechecklabel(n, id, value) {
		$("#" + id).find(".checklabel").eq(n).html(value)
	}
	function getoptions(e)
	{
		$("#addoptionbuttontop").off();
		$("#addoptionbuttonbottom").off();
		$("#addoptionbuttontop").on("click",function() { addoption(e,"top"); });
		$("#addoptionbuttonbottom").on("click",function() { addoption(e,"bottom"); })
		$("#sortoptval").off();
		$("#sortoptdesc").off();
		$("#sortoptval").on("click",function() {   SortTable($('#optionstable'),this,1,e.value)  } );
		$("#sortoptdesc").on("click",function() { SortTable($('#optionstable'),this,2,e.value)  } );
		
		var options=$(e).find(".form-check,option");
		$("#fieldcontextoptions").html("");
		unsortable("#fieldcontextoptions");
		if($(options).length>0)
		{
			extra = `<i style="color:blue;cursor:move" class="listhandle fal fa-fw fa-arrows-up-down"></i>&nbsp;&nbsp;`
			i=0;
			$(options).each(function(m,n)
				{
					if($(n).find("label").length>0)
					{
						value=$(n).find("label").html();
						key=$(n).find("input").val();
					}
					else
					{
						value=$(n).html();
						key=$(n).val();
					}
					$("#fieldcontextoptions").append(`<tr><td><input onchange="dirty();setoptions('#` + $(e).attr("id") + `')" data-entry="` + i + `" style="width:100%;border:1px solid rgb(222, 226, 230);" id="fieldoptionvalue` + i + `" class="value" ></td><td><input onchange="dirty();setoptions('#` + $(e).attr("id") + `')" class="descriptor" id="fieldoptiondesc` + i + `" data-entry="` + i + `"  style="width:100%;border:1px solid rgb(222, 226, 230);"></td><td  style="text-align:right;cursor:pointer">` + extra + `<i  style="color:red;cursor:pointer" class="fal fa-fw fa-trash-can"></i></td></tr>`);
					$("#fieldoptionvalue"+i).val(key);
					$("#fieldoptiondesc"+i).val(value);
					
					i++
				});
				$("#fieldcontextoptions").sortable({ "axis":"y",
					"stop":function() { optionsreindex(e); },
					"handle":".listhandle"
				} );
				$("#fieldcontextoptions").find("i.fa-trash-can").off();
				$("#fieldcontextoptions").find("i.fa-trash-can").on("click",function() { deleteoption(this,e); });
		}
	}
	function setoptions(e)
	{
		
		i=0;
		if($(e).attr("data-form")=="select")
		{
			$(e).find("select").html("");
			$("#fieldcontextoptions").find("tr").each(function(n,m)
				{
					key=$(this).find("input").eq(0).val();
					value=$(this).find("input").eq(1).val();
					
					$(e).find("select").append(`<option>`+value +`</option>`);
					$(e).find("select").find("option").last().attr("value",key);
					i++;
				});
		}
		else
		{
			i=0;
			if($(e).find(".checks").length==0)
			{
				$(e).append(`<div class="checks"></div>`);
			}
			$(e).find(".checks").html("");
			$("#fieldcontextoptions").find("tr").each(function(n,m)
				{
					key=$(this).find("input").eq(0).val();
					value=$(this).find("input").eq(1).val();
					$(e).find(".checks").append(`<div class="form-check"><input name="`+$(e).attr("data-name") + `" type="` + $(e).attr("data-form") + `" id="option-`+i+`-`+$(e).attr("id") + `" class="form-check-input" value="`+key + `"><label for="option-`+i+`-`+$(e).attr("id") + `" class="w-100 form-check-label">`+value + `</label></div>`);
					
					i++;
				});
				
		}
		
		
	}
	var toopen = "";
	
	var getcontextfunction={};
	getcontextfunction["enableonhide"]=function(a,b,c)
	{
		
		if(a.id=="fieldcontextenabled" && $("#fieldcontextenabled").is(":checked"))
		{
			$("#fieldcontextrequired").prop("checked",false);
			$(b).attr("data-required",false);
		}
		if(a.id=="fieldcontextrequired" && $("#fieldcontextrequired").is(":checked"))
		{
			$("#fieldcontextenabled").prop("checked",false);
			$(b).attr("data-enabled-on-hide",false);
		}
	}
	getcontextfunction["size"]=function(a,b,c)
	{
		
		$(b).removeClass("form-control-sm form-control-lg form-select-sm form-select-lg");
		if($(b).attr("data-form")=="select")
		{
			if(a.value!="reg")
			{
				$(b).find("select").addClass("form-select-"+a.value);
			}
		}
		if($(b).attr("data-form")=="email" || $(b).attr("data-form")=="tel" || $(b).attr("data-form")=="text" || $(b).attr("data-form")=="url" || $(b).attr("data-form")=="date" || $(b).attr("data-form")=="datetime-local" || $(b).attr("data-form")=="time" || $(b).attr("data-form")=="number")
		{
			if(a.value!="reg")
			{
				$(b).find("input").addClass("form-control-"+a.value);
			}
		}
	}
	getcontextfunction["fieldnote"]=function(a,b,c) 
	{
		
		$(b).find(".labelnote").addClass("d-none");
		$(b).find(".form-text").addClass("d-none");
		
		
		if($("#fieldcontextnoteshow").val()=="under")
		{
			$(b).find(".form-text").removeClass("d-none");
		}
		if($("#fieldcontextnoteshow").val()=="tooltip")
		{
			
			$(b).find(".labelnote").removeClass("d-none");
			
		}
	}
	getcontextfunction["changetype"]=function(a,b,c)
	{
		
		$(b).find("input.form-control,select,textarea").attr("autocomplete","off");
		if(a.value!="textarea" && a.value!="radio" && a.value!="select"  && a.value!="checkbox"  && $(b).attr("data-original")!="textarea" && $(b).attr("data-original")!="checkbox" && $(b).attr("data-original")!="radio"  && $(b).attr("data-original")!="select")
		{
			$(b).find("input").val("");
			if(a.value=="password")
			{
				
				$(b).find("input"). attr("autocomplete","new-password");
			}
		}
	}
	getcontextfunction["newlines"]=function(a,b,c)
	{
		if($(a).val()=="yes") 
		{
			$(b).find("#"+c +"description").css("white-space","pre-wrap");
			
			$(b).find("."+c +"-description").css("white-space","pre-wrap");
		}
		else
		{
			$(b).find("#"+c +"description").css("white-space","");
			
			$(b).find("."+c +"-description").css("white-space","");
		}
	}
	getcontextfunction["width"]=function(a,b,c)
	{  
		
		component=JSON.parse($(a).attr("data-component").replaceAll("'",'"'));
		
		breakpoints=[];
		breakpoints[0]="-xs";
		breakpoints[1]="-sm";
		breakpoints[2]="-md";
		breakpoints[3]="-lg";
		breakpoints[4]="-xl";
		breakpoints[5]="-xxl";
		$(component).each(function(j,k) {
			if(k=="this")
			{
				ob=$(b);
			}
			else
			{
				ob=$(b).find(k);
			}
			
			$(breakpoints).each(function(x,y) {
				
				r=y;
				if(y=="-xs")
				{
					r="";
					$(ob).removeClass("col");
				}
				$(ob).removeClass("col"+r+"-1 col"+r+"-2 col"+r+"-3 col"+r+"-4 col"+r+"-5 col"+r+"-6 col"+r+"-7 col"+r+"-8 col"+r+"-9 col"+r+"-10 col"+r+"-11 col"+r+"-12");
				if($(ob).attr("data-width"+y))
				{
					$(ob).addClass($(ob).attr("data-width"+y));
				}
			});
			if(k=="#formlogocontainer" && $("#formcontextlogo").val()=="")
			{
				$(ob).addClass("d-none");
			}
		});
		
		
	}
	
	getcontextfunction["alignment"]=function(a,b,c)
	{  
		component=JSON.parse($(a).attr("data-component").replaceAll("'",'"'));
		
		breakpoints=[];
		breakpoints[0]="";
		breakpoints[1]="-sm";
		breakpoints[2]="-md";
		breakpoints[3]="-lg";
		breakpoints[4]="-xl";
		breakpoints[5]="-xxl";
		$(component).each(function(j,k) {
			
			$(breakpoints).each(function(x,y) {
				$(b).find(k).removeClass("text"+y+"-start text"+y+"-end text"+y+"-center");
				if($(k).attr("data-align"+y))
				{
					$(b).find(k).addClass($(k).attr("data-align"+y));
				}
			});
		});
	}
	getcontextfunction["changepage"]=function(a,b,c)
	{
		if($("[data-page]").length>1)
		{
			$("#sectioncontextpage").parent().parent().show();
		}
		else
		{
			$("#sectioncontextpage").parent().parent().hide();
		}
	}
	getcontextfunction["taheight"]=function(a,b,c)
	{
		if(document.getElementById("fieldcontextautoheight").checked)
		{
			
			if(parseInt(document.getElementById("fieldcontexttextareaheight").value)>0)
			{
				$(b).find("textarea").css("min-height",parseInt(document.getElementById("fieldcontexttextareaheight").value)+"px");
				$(b).find("textarea").css("height","");
				
			}
			else
			{
				$(b).find("textarea").css("min-height","");
			}
		}
		else
		{
			if(parseInt(document.getElementById("fieldcontexttextareaheight").value)>0)
			{
				$(b).find("textarea").css("height",parseInt(document.getElementById("fieldcontexttextareaheight").value)+"px");
			}
			else
			{
				$(b).find("textarea").css("height","");
				
			}
		}
		
		$(b).attr("data-rendered-height",$(b).find("textarea").css("height"));
		$(b).find("textarea").off();
		$(b).find("textarea").on("mouseup",function() 
			{
				if(parseInt($(b).find("textarea").css("height"))!=parseInt(document.getElementById("fieldcontexttextareaheight").value))
				{
					document.getElementById("fieldcontexttextareaheight").value=parseInt($(b).find("textarea").css("height"));
					$("#fieldcontexttextareaheight").trigger("blur");
				}
			});
	}
	getcontextfunction["colours"]=function(a,b,c)
	{
		if(a.id=="formcontextpagecolour")
		{
			$("body").css("background-color",a.value);
		}
		if(a.id=="formcontexttextcolour")
		{
			$("#fullformcontainer").css("color",a.value);
		}
	}
	getcontextfunction["replicable"]=function(a,b,c)
	{
		
		if(c=="sectioncolumn")
		{
			$("#sectioncolumncontextreplicable").parent().parent().show();
			if($(b).find(".formrow[data-replicable=yes]").length>0 || $(b).find("[data-form=checkbox]").length>0)
			{
				$("#sectioncolumncontextreplicable").val("no");
				$("#sectioncolumncontextreplicable").parent().parent().hide();
				$(b).attr("data-replicable","no");
			}
		}
		if(c=="row")
		{
			$("#rowcontextreplicable").parent().parent().show();
			if($(b).closest(".pagecol[data-replicable=yes]").length>0 || $(b).find("[data-form=checkbox]").length>0)
			{
				$("#rowcontextreplicable").val("no");
				$("#rowcontextreplicable").parent().parent().hide();
				$(b).attr("data-replicable","no");
			}
		}
		
		if($(b).attr("data-replicable")=="yes")
		{
			$("#"+c+"context").find(".replbutts").closest(".row").show();
		}
		else
		{
			$("#"+c+"context").find(".replbutts").closest(".row").hide();
			$(b).removeAttr("data-replicabledelete");
			$(b).removeAttr("data-replicableadd");
		}
	}
	getcontextfunction["twocolumns"]=function(a,b,c)
	{
		if(a.checked)
		{
			$(b).find(".checks").addClass("twocols");
		}
		else
		{
			$(b).find(".checks").removeClass("twocols");	
		}
	}
	getcontextfunction["pagination"]=function(a,b,c)
	{
		
		$("#formcontextpagination").find("a,button").attr("disabled",true);
		if($(a).attr("id")=="formcontextpagination")
		{
			
			if($("[data-page]").length>1)
			{
				$(".formcontextpaginationitems").show();
				countpages();
			}
			else
			{
				$(".formcontextpaginationitems").hide();
				
			}
			$("#formcontextpaginationcontainer").find("nav").hide();
			if(a.value)
			{
				$("#formcontextpaginationcontainer").find("nav#"+a.value).show();
			}
		}
		
	}
	
	getcontextfunction["logo"]=function(a,b,c)
	{
		if(a.value=="")
		{
			$("#formlogocontainer").addClass("d-none");
			$("#uplogobutton").css("display","inline");
			return false;
		}
		else
		{
			$("#formlogo").css("aspect-ratio","");
			$("#formlogocontainer").removeClass("d-none");
			$("#uplogobutton").css("display","none");
			$("#formlogo").attr("data-aspectratio",$("#formlogo").width()/$("#formlogo").height());
			$("#formlogo").css("aspect-ratio",parseFloat($("#formlogo").width())/parseFloat($("#formlogo").height()));
			
		}
	}
	getcontextfunction["cardify"]=function(a,b,c)
	{
		
		if($("#"+c+"contextcard").val()=="Yes")
		{
			$("."+c+"contextcardoptions").show();
		}
		else
		{
			$("."+c+"contextcardoptions").hide();
		}
		if($(b).find("."+c+"-header").html()=="")
		{
			
			if($(b).find("."+c+"-header").addClass("d-none"));
		}
		else
		{
			
			if($(b).find("."+c+"-header").addClass("d-block"));
		}
		if($(b).find("."+c+"-description").html()=="")
		{
			
			if($(b).find("."+c+"-description").addClass("d-none"));
		}
		else
		{
			
			if($(b).find("."+c+"-description").addClass("d-block"));
		}
	};
	var setcontextfunction={};
	setcontextfunction["inputgroup"]=function(a,b,c)
	{
		var t,s;
		if($(b).find(".input-group").length>0)
		{
			$(b).find(".input-group").removeClass("input-group-sm input-group-lg")
			s=$(b).attr("data-input-size");
			
			if(s!="reg" && s!="" && typeof s!="undefined")
			{
				s="input-group-"+s;
				$(b).find(".input-group").addClass(s);
			}
			
			if(a.id=="fieldcontextprepend")
			{
				$(b).find(".group-prepend").remove();
				if(a.value)
				{
					$(b).find(".input-group").prepend(`<div class="input-group-text group-prepend">` + a.value + `</div>`);
				}
			}
			else
			{
				$(b).find(".group-append").remove();
				if(a.value)
				{
					$(b).find(".input-group").append(`<div class="input-group-text group-append">` + a.value + `</div>`);
				}
			}
		}
		else
		{
			
			t=$(b).find("select,input,textarea").eq(0).prop("outerHTML");
			s=$(b).attr("data-input-size");
			if(s!="reg" && s!="" && typeof s!="undefined")
			{
				s="input-group-"+s;
			}
			else
			{
				s="";
			}
			
			$(b).find("select,input,textarea").eq(0).replaceWith(`<div class="input-group ` + s + `">` + t + `</div>`);
			setcontextfunction["inputgroup"](a,b,c);
		}
	}
	setcontextfunction["enableonhide"]=function(a,b,c)
	{
		
		if(a.id=="fieldcontextenabled" && $("#fieldcontextenabled").is(":checked"))
		{
			$("#fieldcontextrequired").prop("checked",false);
			$(b).attr("data-required",false);
		}
		if(a.id=="fieldcontextrequired" && $("#fieldcontextrequired").is(":checked"))
		{
			$("#fieldcontextenabled").prop("checked",false);
			$(b).attr("data-enabled-on-hide",false);
		}
	}
	setcontextfunction["classcheck"]=function (a,b,c)
	{
		$.ajax({
			method:"POST",
			url:"/scripts/checkbsclass.php",
			dataType:"json",
			data:{group:a.value}		
		}	).done(function(msg)
		{
			if(msg.response!="OK")
			{
				messagepop("The group you have specified is a reserved value and has been removed.<br><br>Please choose another name for the group<br><br><small><strong>Why?</strong><br>formstrap groups are stored in HTML class attributes so cannot clash with class names used by loaded libraries (e.g. Bootstrap).</small>","exclamation-circle");
				a.value="";
			}
		});
		
	}
	setcontextfunction["size"]=function(a,b,c)
	{
		$(b).find("input,select").removeClass("form-control-sm form-control-lg form-select-sm form-select-lg");
		if($(b).find(".input-group").length>0)
		{
			$(b).find(".input-group").removeClass("input-group-sm input-group-lg");
			if(a.value!="reg")
			{		
				$(b).find(".input-group").addClass("input-group-"+a.value);
			}
		}
		else
		{
			if($(b).attr("data-form")=="select")
			{
				if(a.value!="reg")
				{
					$(b).find("select").addClass("form-select-"+a.value);
				}
			}
			if($(b).attr("data-form")=="email" || $(b).attr("data-form")=="tel" || $(b).attr("data-form")=="text" || $(b).attr("data-form")=="url" || $(b).attr("data-form")=="date" || $(b).attr("data-form")=="datetime-local" || $(b).attr("data-form")=="time" || $(b).attr("data-form")=="number")
			{
				if(a.value!="reg")
				{
					$(b).find("input").addClass("form-control-"+a.value);
				}
			}
		}
	}
	setcontextfunction["fieldnote"]=function(a,b,c)
	{
		$(b).find(".labelnote").addClass("d-none");
		$(b).find(".form-text").addClass("d-none");
		
		if($("#fieldcontextnoteshow").val()=="under")
		{
			$(b).find(".form-text").removeClass("d-none");
		}
		if($("#fieldcontextnoteshow").val()=="tooltip")
		{
			$(b).find(".labelnote").removeClass("d-none");
		}
	}
	setcontextfunction["newlines"]=function(a,b,c)
	{
		if($(a).val()=="yes")
		{
			$(b).find("#"+c +"description").css("white-space","pre-wrap");
			
			$(b).find("."+c +"-description").css("white-space","pre-wrap");
		}
		else
		{
			$(b).find("#"+c +"description").css("white-space","");
			
			$(b).find("."+c +"-description").css("white-space","");
		}
	}
	setcontextfunction["width"]=function(a,b,c)
	{  
		component=JSON.parse($(a).attr("data-component").replaceAll("'",'"'));
		breakpoints=[];
		breakpoints[0]="-xs";
		breakpoints[1]="-sm";
		breakpoints[2]="-md";
		breakpoints[3]="-lg";
		breakpoints[4]="-xl";
		breakpoints[5]="-xxl";
		$(component).each(function(j,k) {
			if(k=="this")
			{
				ob=$(b);
			}
			else
			{
				ob=$(b).find(k);
			}
			$(breakpoints).each(function(x,y) {
				r=y;
				if(y=="-xs")
				{
					r="";
					ob.removeClass("col");
				}
				
				ob.removeClass("col"+r+"-1 col"+r+"-2 col"+r+"-3 col"+r+"-4 col"+r+"-5 col"+r+"-6 col"+r+"-7 col"+r+"-8 col"+r+"-9 col"+r+"-10 col"+r+"-11 col"+r+"-12");
				
				if(ob.attr("data-width"+y))
				{	
					
					ob.addClass(ob.attr("data-width"+y));
					
				}
			});
			if(k=="#formlogocontainer" && $("#formcontextlogo").val()=="")
			{
				ob.addClass("d-none");
			}
		});
	}
	
	setcontextfunction["alignment"]=function(a,b,c)
	{  
		component=JSON.parse($(a).attr("data-component").replaceAll("'",'"'));
		
		breakpoints=[];
		breakpoints[0]="";
		breakpoints[1]="-sm";
		breakpoints[2]="-md";
		breakpoints[3]="-lg";
		breakpoints[4]="-xl";
		breakpoints[5]="-xxl";
		$(component).each(function(j,k) {
			
			$(breakpoints).each(function(x,y) {
				$(b).find(k).removeClass("text"+y+"-start text"+y+"-end text"+y+"-center");
				if($(k).attr("data-align"+y))
				{
					$(b).find(k).addClass($(k).attr("data-align"+y));
				}
			});
		});
	}
	setcontextfunction["taheight"]=function(a,b,c)
	{
		if(document.getElementById("fieldcontextautoheight").checked)
		{
			
			if(parseInt(document.getElementById("fieldcontexttextareaheight").value)>0)
			{
				$(b).find("textarea").css("min-height",parseInt(document.getElementById("fieldcontexttextareaheight").value)+"px");
				$(b).find("textarea").css("height","");
				
			}
			else
			{
				$(b).find("textarea").css("min-height","");
			}
		}
		else
		{
			if(parseInt(document.getElementById("fieldcontexttextareaheight").value)>0)
			{
				$(b).find("textarea").css("height",parseInt(document.getElementById("fieldcontexttextareaheight").value)+"px");
			}
			else
			{
				$(b).find("textarea").css("height","");
			}
		}
	}
	
	setcontextfunction["replicable"]=function(a,b,c)
	{
		
		if(c=="sectioncolumn")
		{
			$("#sectioncolumncontextreplicable").parent().parent().show();
			if($(b).find(".formrow[data-replicable=yes]").length>0 || $(b).find("[data-form=checkbox]").length>0)
			{
				
				$("#sectioncolumncontextreplicable").val("no");
				$("#sectioncolumncontextreplicable").parent().parent().hide();
				$(b).attr("data-replicable","no");
			}
		}
		if(c=="row")
		{
			$("#rowcontextreplicable").parent().parent().show();
			if($(b).closest(".pagecol[data-replicable=yes]").length>0 || $(b).find("[data-form=checkbox]").length>0)
			{
				
				
				$("#rowcontextreplicable").val("no");
				$("#rowcontextreplicable").parent().parent().hide();
				$(b).attr("data-replicable","no");
			}
		}
		
		
		
		if($(b).attr("data-replicable")=="yes")
		{
			$("#"+c+"context").find(".replbutts").closest(".row").show();
		}
		else
		{
			$("#"+c+"context").find(".replbutts").closest(".row").hide();
			$(b).removeAttr("data-replicabledelete");
			$(b).removeAttr("data-replicableadd");
		}
		dirty();
	}
	setcontextfunction["twocolumns"]=function(a,b,c)
	{
		if(a.checked)
		{
			$(b).find(".checks").addClass("twocols");
		}
		else
		{
			$(b).find(".checks").removeClass("twocols");
		}
		dirty();
		checkfield(b);
	}
	setcontextfunction["changetype"]=function(a,b,c)
	{
		if(typeof $(b).find("input,textarea").attr("placeholder")!="undefined")
		{
			placeholder=`placeholder="`+$(b).find("input,textarea").attr("placeholder") + `" `;
		}
		else
		{
			placeholder=``;
		}
		if($(b).attr("data-floatinglabel")=="true" && placeholder=="")
		{
			placeholder=$(b).find(".label-text").text();
		}
		// if the original type and the new type are INPUT elements of any type - just change the type
		if(a.value!="textarea" && a.value!="radio" && a.value!="select"  && a.value!="checkbox"  && $(b).attr("data-original")!="textarea" && $(b).attr("data-original")!="checkbox" && $(b).attr("data-original")!="radio"  && $(b).attr("data-original")!="select")
		{
			if(a.value=="range")
			{
				$(b).find("input").eq(0).removeClass("form-control form-control-lg form-control-sm");
				$(b).find("input").eq(0).addClass("form-range");
				$(b).removeAttr("data-size");
			}
			if($(b).attr("data-original")=="range")
			{
				$(b).find("input").eq(0).removeClass("form-range");
				$(b).find("input").eq(0).addClass("form-control");
				$(b).attr("data-size","reg");
			}
			if(a.value=="password")
			{
				$(b).find("input"). attr("autocomplete","new-password");
			}
			else
			{
				$(b).find("input").attr("autocomplete","off");
			}
			$(b).find("input").eq(0).attr("type",a.value);
		}
		else
		{
			if(typeof $(b).attr("data-name")!="undefined")
			{
				name=`name="`+$(b).attr("data-name") + `" `;
			}
			else
			{
				name="";
			}
			
			if($(b).attr("data-floatinglabel")=="true" && placeholder=="")
			{
				placeholder=$(b).find(".label-text").text();
			}
			if(typeof $(b).attr("data-input-size")!="undefined")
			{
				
				size=$(b).attr("data-input-size");
			}
			else
			{
				size="";
			}
			if(a.value=="textarea")
			{
				// if the new type is a text area and the original is INPUT (not check/radio) or SELECT
				if($(b).attr("data-original")=="checkbox" || $(b).attr("data-original")=="radio")
				{
					$(b).removeAttr("data-twocols");
					label=$(b).find("legend").html()
					
					$(b).find("fieldset").replaceWith(`<label   class="form-label" for="input-` + $(b).attr("id") + `">` + label + `</label><textarea  ` + placeholder + name + ` class="form-control ` + size + `"  id="input-` + $(b).attr("id") + `"></textarea>`);
				}
				else
				{
					
					$(b).find("input.form-control,select.form-select").eq(0).replaceWith(`<textarea   `+ placeholder + name + `   class="form-control" id="input-` + $(b).attr("id") + `"></textarea>`);
				}
			}
			if(a.value=="select")
			{	
				//	if the new type is a SELECT
				if(size=="reg")
				{
					size=""
				}
				else
				{
					if(size!="")
					{
						size="form-select-"+size;
					}
					else
					{
						size="";
					}
				}
				if($(b).attr("data-original")=="radio" || $(b).attr("data-original")=="checkbox")
				{
					// and the old type is radio or check
					$(b).removeAttr("data-twocols");
					label=$(b).find("legend").html()
					
					$(b).find("fieldset").replaceWith(`<label class="form-label" for="input-` + $(b).attr("id") + `">` + label + `</label><select  ` + placeholder + name + ` class="form-select ` + size + `"  id="input-` + $(b).attr("id") + `"></select>`);
					setoptions(b);
				}
				else
				{
					// and the old type is INPUT (not radio/check) , TEXTAREA 
					$(b).find("input.form-control,textarea.form-control").eq(0).replaceWith(`<select  ` + name + ` class="form-select ` + size + `"  id="input-` + $(b).attr("id") + `"><option value="">Please Select</option></select>`);
				}
			}
			
			// if the new type is check or radio
			if(a.value=="checkbox" || a.value=="radio")
			{	
				var t;
				t=$(b).find(".input-group").find("input,select,textarea").eq(0).prop("outerHTML");
				if(t)
				{
					$(b).removeAttr("data-prepend");
					$(b).removeAttr("data-append");
					
					$("#fieldcontextprepend").val("");
					$("#fieldcontextappend").val("");
					$(b).find(".input-group").replaceWith(t);
				}
				if($(b).attr("data-original")=="checkbox" || $(b).attr("data-original")=="radio")
				{	
					// and old type is check or radio - just redraw the options
					setoptions(b);
				}
				else
				{
					// and the old type is SOMETHING else create the fieldset and legend and check container and then redraw the options.
					legend=$(b).find("label").html();
					note=$(b).find(".form-text").prop("outerHTML");
					
					$(b).find(".form-control,.form-select").parent().html("");
					$(b).append(`<fieldset><legend class="form-label w-100">`+legend+`</legend><div class="checks"></div></fieldset>`+note);
					setoptions(b);
				}
			}
			if(a.value=="email" || a.value=="tel" || a.value=="text" || a.value=="url" ||  a.value=="range" ||  a.value=="password" || a.value=="date" || a.value=="datetime-local" || a.value=="time" || a.value=="number"   )
			{
				newclass="form-control ";
				if(size=="reg" )
				{
					size=""
				}
				else
				{ 
					if(size!="")
					{
						size="form-control-"+size;
					}
					else
					{
						size="";
					}
				}
				if(a.value=="range")
				{
					
					newclass="form-range ";
					size="";
				}
				if($(b).attr("data-original")=="checkbox" || $(b).attr("data-original")=="radio")
				{
					$(b).removeAttr("data-twocols");
					label=$(b).find("legend").html()
					
					$(b).find("fieldset").replaceWith(`<label class="form-label" for="input-` + $(b).attr("id") + `">` + label + `</label><input  ` + placeholder + name + ` class="` + newclass + size + `"  id="input-` + $(b).attr("id") + `">`);
					
				}
				else
				{
					
					$(b).find("select.form-select,textarea.form-control").eq(0).replaceWith(`<input type="` + a.value + `" ` + placeholder + name + ` class="form-control `+size + `" id="input-` + $(b).attr("id") + `">`);
				}
			}
			
			
		}
		if($(b).attr("data-form")=="number" || $(b).attr("data-form")=="date" || $(b).attr("data-form")=="datetime-local" || $(b).attr("data-form")=="time" ||  $(b).attr("data-form")=="range" || $(b).attr("data-form")=="checkbox" || $(b).attr("data-form")=="radio" || $(b).attr("data-form")=="select")
		{
			$(b).find("input").removeAttr("minlength maxlength data-tooshort data-toolong  ");
			
		}
		if($(b).attr("data-form")=="text" || $(b).attr("data-form")=="url" || $(b).attr("data-form")=="email" || $(b).attr("data-form")=="select" || $(b).attr("data-form")=="checkbox" || $(b).attr("data-form")=="radio" || $(b).attr("data-form")=="textarea"  || $(b).attr("data-form")=="tel"  || $(b).attr("data-form")=="password")
		{
			$(b).find("input,select,textarea").eq(0).removeAttr("min max step data-rangeover data-rangeunder data-stepmismatch");
		}
		$(b).attr("data-original",$(b).attr("data-form"));
		$(b).data("form",$(b).attr("data-form"));
		getcontext(b);
		dirty();
	}
	setcontextfunction["pagination"]=function(a,b,c)
	{
		$("#formcontextpagination").find("a,button").attr("disabled",true);
		
		countpages();
		dirty();
		getcontext(b);
	}
	setcontextfunction["changepage"]=function(a,b,c)
	{
		z=a.value;
		$("#formcontainer").find(".formpage").sort(sort_sections)
		.appendTo("#formcontainer");
		setTimeout(function() { countpages(z); } ,250);
		dirty();
		
	}
	setcontextfunction["favicon"]=function(a,b,c)
	{
		if(a.value=="")
		{
			a.value="https://formstrap.com/favicon.png";
			$("#favicon").attr("href",a.value);
			dirty();
			return false;
		}
		$.ajax({
			method:"GET",
		url:a.value}).done(function(c,d,e) 
		{
			if(e.getResponseHeader("content-type")!="image/png" && e.getResponseHeader("content-type")!="image/vnd.microsoft.icon"  && e.getResponseHeader("content-type")!="image/x-icon")
			{
				messagepop("The URL provided is not a valid image file type for the icon<br><br>Valid file types: PNG and ICO","exclamation-circle");
				$(a).val("");
				return false;
			}
			$("#favicon").attr("href",a.value);
			}).fail(function(e) {
			messagepop("The URL provided for the Icon<br><br>" + a.value + "<br><br>has returned an error code : " + e.status,"exclamation-circle");
			$(a).val("");
		})
		dirty();
	}
	setcontextfunction["logo"]=function(a,b,c)
	{
		
		if(a.value=="")
		{
			$("#formlogocontainer").addClass("d-none");
			$("#uplogobutton").css("display","inline");
			dirty();
			return false;
		}
		
		$.ajax({
			method:"GET",
			type:"HEAD",
		url:a.value}).done(function(c,d,e) 
		{
			if(e.getResponseHeader("content-type")!="image/png" && e.getResponseHeader("content-type")!="image/jpeg" && e.getResponseHeader("content-type")!="image/webp" && e.getResponseHeader("content-type")!="image/gif" )
			{
				messagepop("The URL provided is not a valid image file type.<br><br>Valid file types: PNG, JPEG, WEBP, and GIF","exclamation-circle");
				$(a).val("");
				return false;
			}
			$("#formlogo").css("aspect-ratio","");
			$("#formlogo").attr("src",a.value);
			$("#formlogocontainer").removeClass("d-none");
			$("#uplogobutton").css("display","none");
			
			$("#formlogo").on("load",function() {
				$("#formlogo").attr("data-aspectratio",$("#formlogo").width()/$("#formlogo").height());
				$("#formlogo").css("aspect-ratio",$("#formlogo").width()/$("#formlogo").height());
			} );
			}).fail(function(e) {
			if(e.status>0)
			{
				messagepop("The URL provided for the Logo<br><br><strong>" + a.value.replaceAll("/","&#8203;/") + "</strong><br><br>has returned an error code : " + e.status,"exclamation-circle");
			}
			else
			{
				messagepop("The URL provided for the Logo<br><br><strong>" + a.value.replaceAll("/","&#8203;/") + "</strong><br><br>has returned an undefined error. Please inspect the browser's console.","exclamation-circle");
				
				
			}
			$(a).val("");
			$("#uplogobutton").css("display","inline");
		$("#formlogocontainer").addClass("d-none");	});
		dirty();
	}
	
	setcontextfunction["colours"]=function(a,b,c)
	{
		if(a.id=="formcontextpagecolour")
		{
			$("body").css("background-color",a.value);
		}
		if(a.id=="formcontexttextcolour")
		{
			$("#fullformcontainer").css("color",a.value+"!important");
		}
		dirty();
	}
	setcontextfunction["floatinglabel"]=function(a,b,c)
	{
		$(b).removeClass("form-floating");
		if($(a).is(":checked"))
		{
			$(b).addClass("form-floating");
			label=$(b).find("label");
			note=$(b).find("div.form-text");
			input=$(b).find("input,select,textarea").not("[type=checkbox]").not("[type=radio]").eq(0);
			if($(input).attr("placeholder")=="" || typeof $(input).attr("placeholder")=="undefined")
			{
				$(input).attr("placeholder",$(label).text().trim());
			}
			$(b).html("");
			$(b).append($(input).prop("outerHTML"));
			$(b).append($(label).prop("outerHTML"));
			$(b).append($(note).prop("outerHTML"));
		}
		else
		{
			label=$(b).find("label");
			input=$(b).find("input,select,textarea").not("[type=checkbox]").not("[type=radio]").eq(0);
			note=$(b).find("div.form-text");
			$(b).html("");
			
			$(b).append($(label).prop("outerHTML"));
			$(b).append($(input).prop("outerHTML"));
			$(b).append($(note).prop("outerHTML"));
		}
		dirty();
		checkfield(b);
	}
	
	setcontextfunction["margin"]=function(a,b,c)
	{
		$(b).removeClass (function (index, className) {
			return (className.match (/(^|\s)m(b|e|s|t)-\S+/g) || []).join(' ');
		});
		if($("#"+c+"contextmargintop").val())
		{
			$(b).addClass($("#"+c+"contextmargintop").val());
		}
		if($("#"+c+"contextmarginstart").val())
		{
			$(b).addClass($("#"+c+"contextmarginstart").val());
		}
		if($("#"+c+"contextmarginbottom").val())
		{
			$(b).addClass($("#"+c+"contextmarginbottom").val());
		}
		if($("#"+c+"contextmarginend").val())
		{
			$(b).addClass($("#"+c+"contextmarginend").val());
		}
		dirty();
		
	}
	setcontextfunction["padding"]=function(a,b,c)
	{
		return false;
		$(b).removeClass (function (index, className) {
			return (className.match (/(^|\s)p(b|e|s|t)-\S+/g) || []).join(' ');
		});
		if($("#"+c+"contextpaddingtop").val())
		{
			$(b).addClass($("#"+c+"contextpaddingtop").val());
		}
		if($("#"+c+"contextpaddingstart").val())
		{
			$(b).addClass($("#"+c+"contextpaddingstart").val());
		}
		if($("#"+c+"contextpaddingbottom").val())
		{
			$(b).addClass($("#"+c+"contextpaddingbottom").val());
		}
		if($("#"+c+"contextpaddingend").val())
		{
			$(b).addClass($("#"+c+"contextpaddingend").val());
		}
		dirty();
		
	}
	setcontextfunction["initiallyvisible"]=function(a,b,c)
	{
		
		$(b).removeClass("visibleyes visibleno");
		if(($(a).get(0).tagName=="SELECT" && $(a).val()=="yes") || ( $(a).get(0).tagName=="INPUT" && $(a).is(":checked")) )
		{
			$(b).addClass("visibleyes");
		}
		else
		{
			$(b).addClass("visibleno");
		}
		dirty();
		
	}
	setcontextfunction["inputclass"]=function(a,b,c)
	{
		if($(b).data("form")!="checkbox" && $(b).data("form")!="radio" && $(b).data("form")!="textarea")
		{
			$(b).find("input,textarea,select").removeClass("form-control-sm form-control-lg form-select-sm form-select-lg");
			if($(a).val()!="reg")
			{
				$(b).find("input,textarea").addClass("form-control-"+$(a).val());	
				$(b).find("select").addClass("form-select-"+$(a).val());
			}
		}
		dirty();
		if(c=="field")
		{
			checkfield(b);
		}
	};
	setcontextfunction["cardify"]=function(a,b,c)
	{
		
		if($("#"+c+"contextcard").val()=="Yes")
		{
			$("."+c+"contextcardoptions").show();
			if($(b).attr("data-card")=="yes")
			{
				
				titleobject=$(b).find("."+c+"-header").eq(0);
				descobject=$(b).find("."+c+"-description").eq(0);
				$(titleobject).addClass("card-header");
				if($(titleobject).html()!="")
				{
					$(titleobject).removeClass("d-none");
				}
				else
				{
					$(titleobject).addClass("d-none");
				}
				if($(descobject).html()!="")
				{
					$(descobject).removeClass("d-none");
				}
				else
				{
					$(descobject).addClass("d-none");
				}
				return false;
			}
			else
			{
				
				titleobject=$(b).find("."+c+"-header").eq(0);
				descobject=$(b).find("."+c+"-description").eq(0);
				$(titleobject).addClass("card-header");
				if($(titleobject).html()!="")
				{
					$(titleobject).removeClass("d-none");
				}
				else
				{
					$(titleobject).addClass("d-none");
				}
				if($(descobject).html()!="")
				{
					$(descobject).removeClass("d-none");
				}
				else
				{
					$(descobject).addClass("d-none");
				}
				title=$(titleobject).prop("outerHTML");
				description=$(descobject).prop("outerHTML");
				
				container=$(b).find(".subcontainer").eq(0).prop("outerHTML");
				$(b).find("."+c+"-description").eq(0).remove();
				$(b).find("."+c+"-header").eq(0).remove();
				cardcolour="";
				if(typeof $(b).data("cardcolour")!="undefined")
				{
					cardcolour=$(b).data("cardcolour")
				}
				html=`<div class="card `+c+`card `+ cardcolour +`">`+title+`<div class="card-body">`+description+container+`</div></div>`;
				$(b).html(html);
				$(b).attr("data-card","Yes");
			}
		}
		else
		{
			
			$("."+context+"contextcardoptions").hide();
			titleobject=$(b).find("."+c+"-header");
			descobject=$(b).find("."+c+"-description").eq(0);
			$(titleobject).removeClass("card-header").eq(0);
			if($(titleobject).html())
			{
				$(titleobject).removeClass("d-none");
			}
			if($(descobject).html())
			{
				$(descobject).removeClass("d-none");
			}
			title=$(titleobject).prop("outerHTML");
			description=$(b).find("."+c+"-description").prop("outerHTML");
			container=$(b).find(".subcontainer").eq(0).prop("outerHTML");
			$(b).find("."+c+"-description").eq(0).remove();
			$(b).find("."+c+"-header").eq(0).remove();
			
			html=title+description+container;
			$(b).html(html);
		}
		propagate(true);
		dirty(); 
	};
	
	function getcontext(e,cshow)
	{
		unselect();
		$(e).css("border-color", "red");
		
		document.getElementById("selectedcomponent").value=e.id;
		if(typeof cshow=="undefined")
		{
			cshow=true;
		}
		var subcomponent;
		$("#contextsubbuttons").show();
		$("#fieldeventbutton").parent().hide();
		$("#addsiblingbutton").parent().show();
		$("#fieldeventbutton").off();
		$("#addsiblingbutton").off();
		$("#saveastemplate").off();
		$("#addsomethingbutton").off();
		$("#deletebutton").off();
		if(typeof $(e).attr("data-customid")!="undefined" && $(e).attr("data-customid")!="" )
		{
			$(".contextid").html(""+$(e).attr("data-customid"));
			$(".contextsystemid").html("#"+e.id);
		}
		else
		{
			$(".contextsystemid").html("#"+e.id);
			$(".contextid").html("#"+e.id);
		}
		
		if(typeof cshow=="undefined")
		{
			cshow=true;
		}
		$("#offcanvascontext").find("input,select,textarea").off();
		$("#context").find(".card").hide();
		if($(e).hasClass("form-group"))
		{
			
			$("#eventtrigger").html(`<select onchange="getevents(this.value)" style="font-weight:bold;border-color:gray;border-radius:3px;padding:3px" id='eventid'>` + (($(e).attr("data-customclass")!="" && typeof $(e).attr("data-customclass")!="undefined") ? `<option value="">Please Select Trigger`: `` ) + `<option value="#`+ $(e).attr("id") + `">` + (($(e).attr("data-customid")!="" && typeof $(e).attr("data-customid")!="undefined" ) ?  ""+$(e).attr("data-customid") : "#"+$(e).attr("id")) + `</option>` + (($(e).attr("data-customclass")!="" && typeof $(e).attr("data-customclass")!="undefined") ? `<option value=".`+$(e).attr("data-customclass") + `">.`+$(e).attr("data-customclass") + `</option>`: `` ) + `</select>`);
			
			context="field";
			desc="Field"; 
			$("#fieldcontextbody").find(".row").hide();
			$("#fieldcontextbody").find(".all").show();
			$("#fieldcontextbody").find("."+$(e).data("form")).show();
			$("#fieldeventbutton").parent().show();
			$("#addsomethingbutton").parent().hide();
			$("#addsiblingbutton").parent().show();
			subcomponent="";
			if($(e).closest("[data-replicable=yes]").length>0)
			{
				$("#fieldeventbutton").parent().hide();
			}
			else
			{
				$("#fieldeventbutton").parent().show(); 
				
				$("#fieldeventbutton").on("click",function()
					{
						eventmeta(e);
					});
			}
			$("#addsiblingbutton").parent().show();
			$("#saveastemplate").parent().show();
			$("#addfromtemplatebutton").parent().hide();
		}
		if($(e).hasClass("formpage"))
		{
			context="section";
			desc="Section";
			subcomponent="Section Column";
			
			subcomponentfn=function() { addpagecolumn(e); }
			subcomponenttemplatefn=function() { viewtemplates(e,"sectioncolumn"); }
			$("#addsiblingbutton").parent().show();
			$("#saveastemplate").parent().show();
			$("#addfromtemplatebutton").parent().show();
		}
		if($(e).hasClass("pagecol"))
		{
			context="sectioncolumn";
			desc="Section Column";
			subcomponent="Row";
			subcomponentfn=function() { addrow(e); }
			subcomponenttemplatefn=function() { viewtemplates(e,"row"); }
			$("#addsiblingbutton").parent().show();
			$("#saveastemplate").parent().show();
			$("#addfromtemplatebutton").parent().show();
		}
		if($(e).hasClass("formrow"))
		{
			context="row";
			desc="Row";
			subcomponent="Column";
			subcomponentfn=function() { addcolumn(e); }
			subcomponenttemplatefn=function() { viewtemplates(e,"column"); }
			$("#addsiblingbutton").parent().show();
			$("#saveastemplate").parent().show();
			$("#addfromtemplatebutton").parent().show();
		}
		if($(e).hasClass("formcol"))
		{
			context="column";
			desc="Column";
			subcomponent="Field";
			subcomponentfn=function() { addfield(e); }
			subcomponenttemplatefn=function() { viewtemplates(e,"field"); }
			$("#addsiblingbutton").parent().show();
			$("#saveastemplate").parent().show();
			$("#addfromtemplatebutton").parent().show();
		}
		if($(e).attr("id")=="fullform")
		{
			context="form";
			desc="Form";
			subcomponent="Section";
			subcomponentfn=function() { addpage(); }
			$(".contextsystemid").html("#"+$(e).find("#formcontainer").attr("data-id"));
			subcomponenttemplatefn=function() { viewtemplates(e,"section"); }
			if($(e).find("#formcontainer").attr("data-name"))
			{
				$(".contextid").html(""+$(e).find("#formcontainer").attr("data-name"));
			}
			else
			{
				$(".contextid").html("#"+$(e).find("#formcontainer").attr("data-id"));
			}
			$("#contextsubbuttons").show();
			$("#addsiblingbutton").parent().hide();
			$("#saveastemplate").parent().hide();
			$("#addfromtemplatebutton").parent().show();
		}
		if(context)
		{
			setTimeout(function() {	e.scrollIntoView(true); },1000);
			$("#addsiblingbutton").on("click",function() { clone(e); });
			$("#saveastemplate").on("click",function() { savetemplate(e,context); });
			$("#deletebutton").on("click",function() { deletecomponent(e,context,desc); });
			if(subcomponent)
			{
				$(".subcomponent").html(subcomponent);
				$("#addsomethingbutton").parent().show();
				$("#addsomethingbutton").on("click",subcomponentfn);
				
			}
			
			if(typeof subcomponenttemplatefn=="function")
			{
				$("#addfromtemplatebutton").off();
				$("#addfromtemplatebutton").on("click",subcomponenttemplatefn);
				
			}
			else
			{
				$("#addfromtemplatebutton").parent().hide();
			}
			$(".contexttype").html(desc);
			
			$("#"+context+"context").show();
			$("#"+context+"context").find("input:checkbox").on("change",function(event) { docontext(context,this,e); });
			$("#"+context+"context").find("textarea,input:not(:checkbox)").on("change",function(event) {  docontext(context,this,e); });
			$("#"+context+"context").find("select").on("change",function(event) { docontext(context,this,e); });
			$("#"+context+"context").find("textarea,select,input:not(:checkbox)").on("focus",function(event) {  
				
			$(this).css("background-color","lightGreen");}); 
			
			$("#"+context+"context").find("textarea,select,input:not(:checkbox)").on("blur",function(event) {  
				
				
			$(this).css("background-color","");}); 
			retrievecontext(e,context,cshow);
		}
		else
		{
			offcanvasList[0].hide();
		}
	}
	function deletecomponent(e,context,type)
	{
		var temp=e;
		
		if(type=="Form")
		{
			m="the <strong>Form</strong>? All form data will be deleted.";
			n="the Form";
		}
		else
		{
			m="the highlighted "+ type +" component?";
			n="it";
		}
		messagepop("Are you sure that you want to delete "+m+"<br><br>It will <strong>NOT</strong> be possible to recover it.","trash",function() { dodelete(e,context,type); },function() { $("#messagebod").html("");return false ; },"Delete","Cancel",null,"modal-sm",null,null,null,null,null,null);
		
	}
	function dodelete(e,context,type)
	{
		unselect();
		id=$(e).attr("id");
		$(e).fadeOut(500,function() {
			$(e).remove(); 
			dirty();
			propagate(true);
			
			if(type=="Form")
			{
				localStorage.removeItem('formstrap');
				localStorage.removeItem('formstrapjson');
				localStorage.removeItem("storagewarned");
				localStorage.removeItem("formid");
				localStorage.removeItem("saved");
				localStorage.removeItem("events");
				localStorage.removeItem("name");
				localStorage.removeItem("status");
				localStorage.removeItem('saveto');
				window.removeEventListener("beforeunload", beforeUnloadHandler);
				location.reload();
			}
			if(type=="Field")
			{
				events=JSON.parse(localStorage.getItem("events"));
				if(typeof events["#"+id]!=undefined)
				{
					delete events["#"+id];
				}
				localStorage.setItem("events",JSON.stringify(events));
			}
			if(type=="Section")
			{
				
				if($(".section[data-page="+document.getElementById("selectedpage").value+"]").length==0)
				{
					countpages($(".section").data("page"));
					
				}
			}
			
		});
	} 
	function retrievecontext(e,context,cshow)
	{
		$("#offcanvascontext").find("form").trigger("reset");
		
		var booleanlookup={};
		booleanlookup["disabled"]=true;
		booleanlookup["readonly"]=true;
		booleanlookup["true"]=true;
		booleanlookup["false"]=false;
		$("#"+context+"context").find("input,select,textarea").each(function() {
			if(typeof $(this).data("component")!="undefined")
			{
				
				components=JSON.parse($(this).data("component").replaceAll("'",'"'));
				if(typeof $(this).data("attr")!="undefined")
				{
					attributes=JSON.parse($(this).data("attr").replaceAll("'",'"'));
					if(components[0]=="this")
					{
						z=$(e);
					}
					else
					{
						z=$(e).find(components[0]);
					}
					if(attributes[0]=="html")
					{
						
						if(typeof $(z).html()!="undefined")
						{	
							if($(this).get(0).tagName=="TEXTAREA")
							{
								$(this).html($(z).html());
							}
							else
							{
								$(this).val($(z).html());
							}
							$(z).removeClass("d-none");
						}
						else
						{
							$(this).val("");
							$(z).addClass("d-none");
						}
					}
					else
					{
						if(typeof $(z).attr(attributes[0])!="undefined")
						{
							if($(this).attr("type")=="checkbox")
							{
								$(this).prop("checked",booleanlookup[$(z).attr(attributes[0])]);
							}
							else
							{
								$(this).val($(z).attr(attributes[0]).replaceAll("[]","")); 
							}
						}	
					}
				}
			}
			
			if($(this).data("fn"))
			{
				if(typeof getcontextfunction[$(this).data("fn")]=="function")
				{
					
					getcontextfunction[$(this).data("fn")](this,e,context);
				}
			} 
		});
		if(cshow)
		{
			offcanvasList[0].show();
		}
		//location.href="#metadata";  
		if(context=="field"  )
		{
			$(e).attr("data-original",$(e).attr("data-form"));
			checkfield(e);
			getoptions(e);
		}
	}
	function checkfield(e)
	{
		// show fields known to be initially releveant for the field type of the component e
		$("#fieldcontext").find(".fieldcon").hide();
		$("#fieldcontext").find(".all").show();
		$("#fieldcontext").find("."+$(e).attr("data-form")).show();
		$("#fieldcontext").find(".fa-function,.formulabutton").off();
		$(".fa-calendar-days").off();
		$(".fa-calendar-days").hide();
		$(".fa-function").hide();
		$(".formulabutton").hide();
		$("#fieldcontextmin").show();
		$("#fieldcontextmax").show();
		$("#fieldcontextdefault").show();
		if($(e).attr("data-floatinglabel")=="true" && ($(e).find("input,textarea").attr("placeholder")=="" || typeof $(e).find("Input,textarea").attr("placeholder")=="undefined"))
		{
			$(e).find("input,textarea").attr("placeholder",$(e).find(".label-text").text());
		}
		if($(e).attr("data-input-size")=="reg")
		{
			$("#fieldcontextfloatinglabel").closest("."+$(e).attr("data-form")).show();
		}
		else
		{
			$("#fieldcontextfloatinglabel").closest("."+$(e).attr("data-form")).hide();
		}
		if($(e).find("label").find(".labeltext").html()=="")
		{
			$(e).find("label").hide();
		}
		else
		{
			$(e).find("label").show();
		}
		if($(e).attr("data-floatinglabel")=="true" && $("#fieldcontextfloatinglabel").is(":visible"))
		{
			$("#fieldcontexttype").find("option").hide();
			$("#fieldcontexttype").find("optgroup.otherfield").hide();
			$("#fieldcontexttype").find("option.floating").show();
			$("#fieldcontextsize").parent().hide();
			$("#fieldcontextprepend").parent().parent().hide();
			$("#fieldcontextprepend").val("");
			$("#fieldcontextappend").val("");
			$(e).removeAttr("data-append");
			$(e).removeAttr("data-prepend");
			$("#fieldcontextinputgroup").parent().parent().hide();
			if($("#fieldcontextplaceholder").val()=="" )
			{ 	
				$("#fieldcontextplaceholder").val($("#fieldcontextlabel").val());
			}
		}
		else
		{
			$("#fieldcontexttype").find("option").show();
			$("#fieldcontextsize").closest("."+$(e).attr("data-form")).show();
			$("#fieldcontexttype").find("optgroup.otherfield").show();
		}
		if($(e).attr("data-form")!="range")
		{
			if($(e).attr("data-form")=="radio")
			{
				$("#fieldcontextmin").attr("type","text");
			}
			else
			{
				if($(e).attr("data-form")!="checkbox")
				{
					$("#fieldcontextmin").attr("type",$(e).attr("data-form"));
					$("#fieldcontextmax").attr("type",$(e).attr("data-form"));
					
					$("#fieldcontextdefault").attr("type",$(e).attr("data-form"));
				}
			}
		}
		else
		{
			$("#fieldcontextmin").attr("type","number");
			$("#fieldcontextmax").attr("type","number");
		}
		
		if($(e).attr("data-form")=="date" || $(e).attr("data-form")=="datetime-local" || $(e).attr("data-form")=="time")
		{
			if(typeof $(e).attr("data-min-formula")!="undefined" && $(e).attr("data-min-formula")!="")
			{
				
				$("#fieldcontextmin").parent().find("i.fa-function").hide();
				$("#fieldcontextmin").hide();
				$("#fieldcontextmin").parent().find("i.fa-calendar-days").show();
				$("#fieldcontextmin").parent().find(".formulabutton").show();
			}
			else
			{
				$("#fieldcontextmin").parent().find("i.fa-function").show();
				$("#fieldcontextmin").show();
				$("#fieldcontextmin").parent().find("i.fa-calendar-days").hide();
				$("#fieldcontextmin").parent().find(".formulabutton").hide();
			}
			if(typeof $(e).attr("data-max-formula")!="undefined" && $(e).attr("data-max-formula")!="")
			{
				
				$("#fieldcontextmax").parent().find("i.fa-function").hide();
				$("#fieldcontextmax").hide();
				$("#fieldcontextmax").parent().find("i.fa-calendar-days").show();
				$("#fieldcontextmax").parent().find(".formulabutton").show();
			}
			else
			{
				$("#fieldcontextmax").parent().find("i.fa-function").show();
				$("#fieldcontextmax").show();
				$("#fieldcontextmax").parent().find("i.fa-calendar-days").hide();
				$("#fieldcontextmax").parent().find(".formulabutton").hide();
			}
			if(typeof $(e).attr("data-default-formula")!="undefined" && $(e).attr("data-default-formula")!="")
			{
				
				$("#fieldcontextdefault").parent().find("i.fa-function").hide();
				
				$("#fieldcontextdefault").hide();
				$("#fieldcontextdefault").parent().find("i.fa-calendar-days").show();
				$("#fieldcontextdefault").parent().find(".formulabutton").show();
				
			}
			else
			{
				$("#fieldcontextdefault").parent().find("i.fa-function").show();
				$("#fieldcontextdefault").show();
				$("#fieldcontextdefault").parent().find("i.fa-calendar-days").hide();
				$("#fieldcontextdefault").parent().find(".formulabutton").hide();
			}
			$("#fieldcontextbody #fieldcontextmin").parent().find("i.fa-function,.formulabutton").on("click",function() {
				minmaxfunction(e,"Min",document.getElementById('fieldcontexttype').value);
			});	
			
			$("#fieldcontextbody #fieldcontextdefault").parent().find("i.fa-function,.formulabutton").on("click",function() {
				minmaxfunction(e,"Default",document.getElementById('fieldcontexttype').value);
			});	
			
			$("#fieldcontextbody #fieldcontextmax").parent().find("i.fa-function,.formulabutton").on("click",function() {
				minmaxfunction(e,"Max",document.getElementById('fieldcontexttype').value);
			});	
			
			
			$("#fieldcontextbody #fieldcontextdefault").parent().find("i.fa-calendar-days").on("click",function() {
				$(e).removeAttr("data-default-formula");
				$(e).removeAttr("data-default-formula-custom");
				getcontext(e);
			});	
			$("#fieldcontextbody #fieldcontextmin").parent().find("i.fa-calendar-days").on("click",function() {
				$(e).removeAttr("data-min-formula");
				$(e).removeAttr("data-min-formula-custom");
				getcontext(e);
			});	
			$("#fieldcontextbody #fieldcontextmax").parent().find("i.fa-calendar-days").on("click",function() {
				$(e).removeAttr("data-max-formula");
				$(e).removeAttr("data-max-formula-custom");
				getcontext(e);
			});	
			
		}
	}
	function checkurl(type,url)
	{
		docheckurl(type,url)
		.then ((data) => { 
			return "OK";
		})
		.catch((error) =>
			{
				return error.status;
			});
			
	}
	
	
	function docheckurl(type,url)
	{ 
		return new Promise((resolve,reject) => {
			$.ajax({
				method:type,
				url:url}).done(function() { 
				resolve("OK") ;
				}).fail(function(e) { 
				reject(e);
			});
		});
	}
	function docontext(c,a,b)
	{
		e=event;
		dirty();
		var response;
		if(typeof $(a).data("component")!="undefined" )
		{
			a.value=a.value.trim();
			components=JSON.parse($(a).data("component").replaceAll("'",'"'));
			attributes=JSON.parse($(a).data("attr").replaceAll("'",'"'));
			
			$(components).each(function(x,y)
				{
					
					if(typeof $(a).data("valid")!="undefined")
					{
						var valid=JSON.parse($(a).data("valid").replaceAll("'",'"'));
						
						$(valid).each(function(i,j)
							{
								if(j=="geturl" && a.value!="")
								{
									if(a.validity.valid==false)
									{
										messagepop("The value entered is not a valid URL. Please provide the full URL including https://","exclamation-circle");
										return false;
									}
									docheckurl("get",a.value).then((data) => {
									}).catch((error) => {  if(error.status>0) { messagepop("The URL provided returned a <strong>"+ error.status + "</strong> error when a GET request was attempted.<br><br>The URL will be retained as it is appreciated you may not have created the script yet.","bug")  } else { messagepop("The URL provided returned an undefined error when a GET request was attempted. For more information, inspect the browser's console.<br><br>The URL will be retained as it is appreciated you may not have created the script yet.","bug");  } });
								}
								if(j=="posturl" && a.value!="")
								{
									if(a.validity.valid==false)
									{
										messagepop("The value entered is not a valid URL. Please provide the full URL including https://","exclamation-circle");
										return false;
									}
									docheckurl("post",a.value).then((data) => {		}).catch((error) => {  if(error.status>0) { messagepop("The URL provided returned a <strong>"+ error.status + "</strong> error when a POST request was attempted.<br><br>The URL will be retained as it is appreciated you may not have created the script yet.","bug")  } else { messagepop("The URL provided returned an undefined error when a POST request was attempted. For more information, inspect the browser's console.<br><br>The URL will be retained as it is appreciated you may not have created the script yet.","bug");  } });
								}
								if(j=="usspaces" && a.value!="")
								{
									a.value=a.value.replaceAll(" ","-").trim();
									
								}
								if(j=="whitespace" && a.value!="") 
								{
									a.value=a.value.replaceAll(/[\n]+/g,"\n");
								}
								if(j=="tolower" && a.value!="")
								{
									a.value=a.value.toLocaleLowerCase(); 
								}
								if(j=="unique" && a.value!="")
								{ 
									if( $("#formcontainer").find("div["+attributes[0] +" ='"+a.value + "']").not($(b)).length>0)
									{
										
										messagepop("The value of <br><strong>"+ $(a).siblings("label").text() + "</strong><br> must be unique.<br><br>The value <strong>" + a.value + "</strong> is already in use on component <strong>#"+ $("#formcontainer").find("div["+attributes[0] +" ='"+a.value + "']").not($(b)).eq(0).attr("id") + "</strong><br><br>Please try again","exclamation-circle");
										$(a).val("");
										return false;
									}
								}
								
								if(j=="alphanum" && a.value!="")
								{
									var r=new RegExp(/^[a-zA-Z0-9-]+$/);
									if(r.test(a.value)==false)
									{
										messagepop("Only letters, numbers and hyphens are permitted in <br><strong>" + $(a).siblings("label").text() + "</strong><br><br>Invalid characters have been removed. Please check the santised entry.","exclamation-circle");
										$(a).val( $(a).val().replace(/[^a-zA-Z0-9-]/g,"").trim() );
										
										return false;
									}
								}
								
								if(j=="regexp" && a.value!="")
								{
									
									try {
										r=new RegExp(a.value,"v");
									}
									catch(err)
									{
										messagepop("The pattern entered could not be evaluated as a valid regular expression.<br><br>Please do not use delimiters. These are added automatically.<br><br>The pattern is compiled using the \"v\" flag. Get <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern' target='help'>more information</a> about how this influences how the pattern should be constructed.<br><br>Please try again.","exclamation-circle");
										
									}
								}
							});
					}	
					if(y=="this")
					{
						z=$(b).eq(0);
					}
					else
					{
						z=$(b).find(y).eq(0);
					}
					if(z.length>0)
					{
						if($(a).attr("type")=="checkbox")
						{
							
							$(z).attr(attributes[x],a.checked);
						}
						else
						{
							
							
							if(attributes[x]=="html")
							{
								$(z).html(a.value);
								if(a.value)
								{
									$(z).removeClass("d-none");
								}
								else
								{
									$(z).addClass("d-none");
									
								}
							}
							else
							{
								if(attributes[x]=="class")
								{	
									
									if(typeof $(a).attr("data-class-remove")!="undefined")
									{
										$(z).removeClass($(a).attr("data-class-remove")); 
									}
									
									$(z).addClass(a.value);
								}
								else
								{
									
									$(z).attr(attributes[x],a.value);
									
								}
							}
						}
					}
				});
		}
		if($(a).data("fn"))
		{
			if(typeof setcontextfunction[$(a).data("fn")]=="function")
			{
				setcontextfunction[$(a).data("fn")](a,b,context);
			}
		}
		else
		{
			if(c=="field")
			{
				
				checkfield(b);
			}
		}
	}
	
	function optionsmoved(field)
	{
		dirty();
		$("#fieldcontextoptions").find("input").attr("disabled",true);
		if($(field).attr("data-form")=="select")
		{
			$(field).find("select").html("");
			$("#fieldcontextoptions").find("tr").each(function() {
				$(field).find("select").append(`<option value="` + $(this).find("input").eq(0).val()  + `">`+ $(this).find("input").eq(1).val()  + `</option>`);
			});
		}
		else
		{
			z=0;
			$(field).find(".checks").html("");
			$("#fieldcontextoptions").find("tr").each(function() {
				$(field).find(".checks").append(`<div class="form-check"><input name="` + $(field).attr("data-name") + `"  type="` + $(field).attr("data-form") + `" value="` + $(this).find("input").eq(0).val()  + `" class="form-check-input"  id="option-`+z +`-` + $(field).attr("id") + `"><label for="option-`+z +`-` + $(field).attr("id") + `" class="w-100 form-check-label">`+ $(this).find("input").eq(1).val()  + `</label>`);
				z++;
			});
		}
		$("#fieldcontextoptions").find("input").attr("disabled",false);
	}
	function unsortable(elem) {
		if($(elem).hasClass("ui-sortable"))
		{
			$(elem).removeClass("ui-sortable");
			$(elem).sortable("destroy"); //call widget-function destroy
		}
	}
	function getselectedclass(id,e,prefix,notfound)
	{
		found=false;
		$(id).find("option").each(function()
			{
				if($(e).hasClass(prefix+this.value))
				{
					found=this.value;
				}
			})
			if(found)
			{
				return found;
			}
			else
			{
				return notfound;
			}
	}
	function getcolumnclass(ele, find) {
		if (find == "xs") {
			tfind = "col-"
			} else {
			tfind = "col-" + find + "-"
		}
		for (i = 1; i <= 12; i++) {
			if (ele.hasClass(tfind + i)) {
				return i
			}
		}
		if (find == "xs") {
			return "auto"
			} else {
			return "inherit"
		}
	}
	function orderdown(p) {
		dstart = $("#fieldcontextbody #fieldcontextoptions").find(".descriptor").eq(p).val();
		dswap = $("#fieldcontextbody #fieldcontextoptions").find(".descriptor").eq(p + 1).val();
		vstart = $("#fieldcontextbody #fieldcontextoptions").find(".value").eq(p).val();
		vswap = $("#fieldcontextbody #fieldcontextoptions").find(".value").eq(p + 1).val();
		$("#fieldcontextbody #fieldcontextoptions").find(".descriptor").eq(p).val(dswap);
		$("#fieldcontextbody #fieldcontextoptions").find(".descriptor").eq(p + 1).val(dstart);
		$("#fieldcontextbody #fieldcontextoptions").find(".value").eq(p).val(vswap);
		$("#fieldcontextbody #fieldcontextoptions").find(".value").eq(p + 1).val(vstart);
		$("#fieldcontextbody #fieldcontextoptions").find(".descriptor").eq(p).trigger("keyup");
		$("#fieldcontextbody #fieldcontextoptions").find(".descriptor").eq(p + 1).trigger("keyup");
		$("#fieldcontextbody #fieldcontextoptions").find(".value").eq(p).trigger("keyup");
		$("#fieldcontextbody #fieldcontextoptions").find(".value").eq(p + 1).trigger("keyup")
	}
	function orderup(p) {
		dstart = $("#fieldcontextbody #fieldcontextoptions").find(".descriptor").eq(p).val();
		dswap = $("#fieldcontextbody #fieldcontextoptions").find(".descriptor").eq(p - 1).val();
		vstart = $("#fieldcontextbody #fieldcontextoptions").find(".value").eq(p).val();
		vswap = $("#fieldcontextbody #fieldcontextoptions").find(".value").eq(p - 1).val();
		$("#fieldcontextbody #fieldcontextoptions").find(".descriptor").eq(p).val(dswap);
		$("#fieldcontextbody #fieldcontextoptions").find(".descriptor").eq(p - 1).val(dstart);
		$("#fieldcontextbody #fieldcontextoptions").find(".value").eq(p).val(vswap);
		$("#fieldcontextbody #fieldcontextoptions").find(".value").eq(p - 1).val(vstart);
		$("#fieldcontextbody #fieldcontextoptions").find(".descriptor").eq(p).trigger("keyup");
		$("#fieldcontextbody #fieldcontextoptions").find(".descriptor").eq(p - 1).trigger("keyup");
		$("#fieldcontextbody #fieldcontextoptions").find(".value").eq(p).trigger("keyup");
		$("#fieldcontextbody #fieldcontextoptions").find(".value").eq(p - 1).trigger("keyup")
	}
	function updateoptions(id, ele) {
		if ($("#" + id).data("form") == "select") {
			if ($(ele).hasClass("value")) {
				$("#" + id).find("option").eq($(ele).data("entry")).val($(ele).val())
			}
			if ($(ele).hasClass("descriptor")) {
				$("#" + id).find("option").eq($(ele).data("entry")).html($(ele).val())
			}
			} else {
			if ($(ele).hasClass("value")) {
				$("#" + id).find(".checks").find("input").eq($(ele).data("entry")).val($(ele).val())
			}
			if ($(ele).hasClass("descriptor")) {
				$("#" + id).find(".checks").find("label").eq($(ele).data("entry")).html($(ele).val())
			}
		}
	}
	function addoption(ele,loc) {
		dirty();
		if(typeof loc=="undefined")
		{
			loc="bottom";
		}
		if(loc=="bottom")
		{
			$("#fieldcontextoptions").append(`<tr style=""><td style="width:25%"><input onchange="dirty();setoptions('#` + ele.id+ `')" class="value" data-entry="` + (parseInt($("#fieldcontextoptions").find("tr").length)) + `" style="width:100%;border:1px solid rgb(222, 226, 230);" id="fieldoptionvalue` + (parseInt($("#fieldcontextoptions").find("tr").length)) + `" value="value"></td><td><input onchange="dirty();setoptions('#` + ele.id+ `')" class="descriptor" style="width:100%;border:1px solid rgb(222, 226, 230);" id="fieldoptiondesc` + (parseInt($("#fieldcontextoptions").find("tr").length)) + `" data-entry="` + (parseInt($("#fieldcontextoptions").find("tr").length)) + `" value="label"></td><td style="cursor:pointer;text-align:right"><i style="color:blue;cursor:move" class="listhandle fal fa-fw fa-arrows-up-down"></i>&nbsp;&nbsp;<i style="cursor:pointer;color:red" class="fal fa-fw fa-trash-can"></i></td></tr>`);
		}
		else
		{
			$("#fieldcontextoptions").prepend(`<tr style=""><td style="width:25%"><input onchange="dirty();setoptions('#` + ele.id+ `')" class="value" data-entry="` + (parseInt($("#fieldcontextoptions").find("tr").length)) + `" style="width:100%;border:1px solid rgb(222, 226, 230);" id="fieldoptionvalue` + (parseInt($("#fieldcontextoptions").find("tr").length)) + `" value="value"></td><td><input onchange="dirty();setoptions('#` + ele.id+ `')" class="descriptor" style="width:100%;border:1px solid rgb(222, 226, 230);" id="fieldoptiondesc` + (parseInt($("#fieldcontextoptions").find("tr").length)) + `" data-entry="` + (parseInt($("#fieldcontextoptions").find("tr").length)) + `" value="label"></td><td style="cursor:pointer;text-align:right"><i style="color:blue;cursor:move" class="listhandle fal fa-fw fa-arrows-up-down"></i>&nbsp;&nbsp;<i style="cursor:pointer;color:red" class="fal fa-fw fa-trash-can"></i></td></tr>`);
		}
		$("#fieldcontextoptions").find("i.fa-trash-can").off();
		$("#fieldcontextoptions").find("i.fa-trash-can").on("click",function() { deleteoption(this,ele); });
		optionsreindex(ele);
		
	}
	function deleteoption(item,ele) {
		dirty();
		$(item).closest("tr").remove();
		optionsreindex(ele);
	}
	function addcheck(check, type) {
		that = check;
		if (type == 1) {
			$(check).parent().parent().find(".checks").append("<div class='form-check'><label class='w-100 form-check-label'><input  class='form-check-input' type='radio' name=''><span class='checklabel'  >Radio Button Label</span> <i onclick='deletecheck(this)' class='control float-end fal fa-fw fa-minus-circle' style='margin-right:1em;margin-top:3px;color:red'></i></label></div>")
			} else {
			$(check).parent().parent().find(".checks").append("<div class='form-check'><label  class='w-100 form-check-label'><input  class='form-check-input' type='checkbox' name=''><span  class='checklabel'>Tick Box Label</span> <i onclick='deletecheck(this)' class='control float-end fal fa-fw fa-minus-circle' style='margin-right:1em;margin-top:3px;color:red'></i></label></div>")
		}
		propagate(true)
	}
	function designform(formid) {
		$.ajax({
			method: "GET",
			url: "/forms/edit.php",
			data: {
				subsubfolder: formid
			}
			}).done(function(msg) {
			document.getElementById("formcontainer").innerHTML = msg;
			initsort(formid)
		})
	}
	function initialise(formid, callback) {
		if (document.getElementById("form-" + formid)) {
			$('#form-' + formid + ' input,#form-' + formid + ' textarea,#form-' + formid + ' select').filter('[required]:not(:disabled)').css({
				"borderColor": "red",
				"border-style": "dotted"
			});
			toolovers();
			$('#form-' + formid).on('keyup change paste', '.form-' + formid, function() {
				document.getElementById('dirty-' + formid).value = "yes"
			});
			if (document.getElementById("fc-script-" + formid)) {
				jQuery.globalEval(document.getElementById("fc-script-" + formid).innerHTML)
			}
			if (document.getElementById("autosave-" + formid)) {
				jQuery.globalEval(document.getElementById("autosave-" + formid).innerHTML)
			}
			if (document.getElementById("inlinescripts-" + formid)) {
				jQuery.globalEval(document.getElementById("inlinescripts-" + formid).innerHTML)
			}
			if (typeof callback == "function") {
				callback()
			}
			$("#form-" + formid).submit(function(event) {
				event.preventDefault()
			})
			} else {
			return false
		}
	}
	function getalignment(formcomponent, context) {
		var align = {};
		var size = {};
		size = {
			"xs": "",
			"sm": "sm-",
			"md": "md-",
			"lg": "lg-",
			"xl": "xl-",
			"xxl": "xxl-"
		};
		align.start = "start";
		align.end = "end";
		align.center = "center";
		align.start = "start";
		var newclass = "";
		$.each(size, function(sindex, svalue) {
			$.each(align, function(aindex, avalue) {
				if ($("#" + formcomponent).hasClass("text-" + svalue + aindex)) {
					$("#" + context + "align" + sindex).val("text-" + svalue + avalue)
				}
			});
			$("#" + context + "align" + sindex).on("change", function() {
				$("#" + formcomponent).removeClass("text-" + svalue + "start text-" + svalue + "center text-" + svalue + "end");
				$("#" + formcomponent).addClass(this.value)
			})
		})
	}
	function getwidth(formcomponent, context, parent) {
		var align = {};
		var size = {};
		size = {
			"xs": "",
			"sm": "sm-",
			"md": "md-",
			"lg": "lg-",
			"xl": "xl-",
			"xxl": "xxl-"
		};
		var newclass = "";
		$.each(size, function(sindex, svalue) {
			if (sindex == "xs") {
				$("#" + context + "width" + sindex).val("auto")
				} else {
				$("#" + context + "width" + sindex).val("inherit")
			}
			for (w = 1; w <= 12; w++) {
				if (parent) {
					that = $("#" + formcomponent).parent();
					if ($("#" + formcomponent).parent().hasClass("col-" + svalue + w)) {
						$("#" + context + "width" + sindex).val(w)
					}
					} else {
					if ($("#" + formcomponent).hasClass("col-" + svalue + w)) {
						$("#" + context + "width" + sindex).val(w)
					}
				}
			}
			ele = "#" + context + "width" + sindex;
			$(ele).on("change", eventhandler(context, that, sindex, svalue))
		})
	}
	
	function getmargin(e,context)
	{
		var side = {};
		side = {
			"top": "mt-",
			"bottom": "mb-",
			"start": "ms-",
			"end": "me-",
		};
		var newclass="";
		$.each(side,function(sindex,svalue) {
			$("#"+context+"margin"+sindex).on("change",function()
				{
					$(e).removeClass(svalue+"1 "+svalue+"2 "+ svalue+"3 "+svalue+"4 "+svalue+"5");
					$(e).addClass(svalue+this.value);
				});
				for (m = 0; m <= 5; m++) {
					if($(e).hasClass(svalue+m))
					{
						$("#"+context+"margin"+sindex).val(m);
					}
				}
		});
	}
	
	function getmarginold(formcomponent, context, parent) {
		var side = {};
		side = {
			"top": "mt-",
			"bottom": "mb-",
			"start": "ms-",
			"end": "me-",
		};
		var newclass = "";
		$.each(side, function(sindex, svalue) {
			for (m = 0; m <= 5; m++) {
				if (parent) {
					that = $("#" + formcomponent).parent();
					if ($("#" + formcomponent).parent().hasClass(svalue + m)) {
						$("#" + context + "margin" + sindex).val(m)
					}
					} else {
					if ($("#" + formcomponent).hasClass(svalue + m)) {
						$("#" + context + "margin" + sindex).val(m)
					}
				}
			}
			$("#" + context + "margin" + sindex).on("change", function() {
				$("#" + formcomponent).removeClass(svalue + "0 " + svalue + "1 " + svalue + "2 " + svalue + "3 " + svalue + "4 " + svalue + "5");
				$("#" + formcomponent).addClass(svalue + this.value)
			})
		})
	}
	function eventhandler(context, component, index, value) {
		return function(event) {
			if (index == "xs") {
				$(component).removeClass("col")
			}
			$(component).removeClass("col-" + value + "1 col-" + value + "2 col-" + value + "3 col-" + value + "4 col-" + value + "5 col-" + value + "6 col-" + value + "7 col-" + value + "7  col-" + value + "8 col-" + value + "9 col-" + value + "10 col-" + value + "11 col-" + value + "12");
			if (document.getElementById(context + "width" + index).value == "auto") {
				$(component).addClass("col")
				} else {
				if (document.getElementById(context + "width" + index).value == "inherit") {} else {
					$(component).addClass("col-" + value + document.getElementById(context + "width" + index).value)
				}
			}
		}
	}
	function checkstorage(key) {
		if (localStorage.getItem(key)) {
			return true
			} else {
			return false
		}
	}
	function getstorage(key) {
		if (localStorage.getItem(key)) {
			return localStorage.getItem(key)
			} else {
			return false
		}
	}
	function setstorage(key, value) {
		if (localStorage.setItem(key, value)) {
			localStorage.getItem(key)
			} else {
			return false
		}
	}
	function addfirstfield()
	{
		$(".start").toggle();
		$("#home").addClass("d-none");
		$("#fullform").removeClass("d-none");
		$("#formcontainer").attr("data-id","yourform");
		$("#formcontainer").attr("data-name","Your Form");
		$("#formcontainer").append(`<div data-page="1" data-renderhtml="yes"  data-gx="gx-3" data-gy="gy-0"   class="visibleyes formpage section " id="section0"><h2 class="d-none section-header"></h2><div  data-renderhtml="yes"  class="d-none mb-3 section-description"></div><div class="pagecolcontainer subcontainer row gx-2 gy-0" >
			<div data-renderhtml="yes"  data-replicable="no" class="visibleyes pagecol col" data-width-xs="col"    id="sectioncol0" ><h3 class="d-none sectioncolumn-header"></h3><div class="d-none sectioncolumn-description mb-3"></div>
			<div class="col formrowcontainer subcontainer ">
			<div data-renderhtml="yes"  data-gx="gx-3" data-gy="gy-0"   data-replicable="no" class="visibleyes   formrow"  id="formrow0" ><h4 class="d-none row-header"></h4><div  data-renderhtml="yes"  class="d-none row-description mb-3"></div><div class="row gx-2 gy-0 formcolcontainer subcontainer ">
		<div data-renderhtml="yes"  class="visibleyes formcol col" data-width-xs="col" id="formcol0" ><h5 class="d-none column-header"></h5><div  data-renderhtml="yes"  class="d-none column-description mb-3"></div><div class="fieldcontainer  subcontainer"><div data-input-size="reg" data-note-position="under" data-form="text" class="form-group mb-2 " data-mb="mb-2" id="field0" ><label class="form-label"   for="input-field0"><i data-bs-toggle="tooltip" class="labelnote float-end d-none fal fa-fw fa-info-circle" ></i> <span class="labeltext">Label</span></label><input   class="form-control inputcomponent" type="text" name="" id="input-field0"><div class="d-none form-text"></div></div></div></div></div></div></div></div></div></div>`);
		$.ajax({
			method:"POST",
			url:"/newform.php",
		});
		propagate(true);
		countpages();
		checksession();
		dirty();
		getcontext(document.getElementById("fullform"));
		
	}
	function download()
	{
		
		$("#popupModal").modal("hide");
		json=JSON.parse(localStorage.getItem("formstrapjson"));
		if(localStorage.getItem("selfhosttandc")==null)
		{
			messagepop("Please review the Terms of Use first","signature",function() { tandcpop() },function() { return false},"Terms of Use","Cancel");
			return false;
		}
		if(json["layout"]["Form"]["SuccessURL"]=="" || typeof json["layout"]["Form"]["SuccessURL"]=="undefined")
		{
			messagepop("You must specify the URL the browser will redirect to when the form has successfully been submitted by the user.<br><br>Please do this first in <strong style='display:inline-block'><i class='fal fa-fw fa-cog'></i> Form Settings</strong>.","exclamation-circle",function() { getcontext(document.getElementById("fullform"));$("#popupModal").modal("hide");setTimeout(function() { $("#formcontextsuccessurl").focus(); },1000); },function() { return false; },"Settings","Cancel");
			return false;
		}
		if(json["layout"]["Form"]["FailureURL"]=="" || typeof json["layout"]["Form"]["FailureURL"]=="undefined")
		{
			messagepop("You must specify the URL the browser will redirect to when the form submission is rejected by the server.<br><br>Please do this first in <strong style='display:inline-block'><i class='fal fa-fw fa-cog'></i> Form Settings</strong>.","exclamation-circle",function() { getcontext(document.getElementById("fullform"));$("#popupModal").modal("hide");setTimeout(function() { $("#formcontextfailureurl").focus(); },1000); },function() { return false; },"Settings","Cancel");
			return false;
		}
		if(json["layout"]["Form"]["POSTURL"]=="" || typeof json["layout"]["Form"]["POSTURL"]=="undefined")
		{
			messagepop("You must specify the URL of the server-side script that will process the form submission.<br><br>Please do this first in <strong style='display:inline-block'><i class='fal fa-fw fa-cog'></i> Form Settings</strong>.","exclamation-circle",function() { getcontext(document.getElementById("fullform"));$("#popupModal").modal("hide");setTimeout(function() { $("#formcontextposturl").focus(); },1000); },function() { return false; },"Settings","Cancel");
			return false;
		}
		if($("#formcontainer").find(".form-group").length==0)
		{
			messagepop("Your form has no fields","exclamation-circle");
			return false;
		}
		if(localStorage.getItem("formstrapjson")=="")
		{
			messagepop("You have unsaved changes. Please save your form first","exclamation-circle");
			return false;
		}
		if($("#formcontainer").attr("data-name")=="" || typeof $("#formcontainer").attr("data-name")=="undefined")
		{
			messagepop("You must give your form a name.<br><br>Please do this first in <strong style='display:inline-block'><i class='fal fa-fw fa-cog'></i> Form Settings</strong>.","exclamation-circle",function() { getcontext(document.getElementById("fullform"));$("#popupModal").modal("hide");setTimeout(function() { $("#formcontextname").focus(); },1000); },function() { return false; },"Settings","Cancel");
			return false;
		}
		json=serialiseform();
		$.ajax({
			method:"post",
			url:"/scripts/package.php",
			dataType:"json",
			data:{formdata:JSON.stringify(json)}
		}).done(function(msg)
		{
			if(msg.response=="OK")
			{
				imagehtml="";
				if(json["layout"]["Form"]["Heading"]["logo"]["src"])
				{
					filename=json["layout"]["Form"]["Heading"]["logo"]["src"].split("/");
					imagehtml=`<tr><td class="text-center"><i class="fal fa-sm fa-turn-down-right"></i></td><td class="text-center"><i class="fal fa-fw fa-folder-open"></i></td><td colspan="2">images</td></tr>
					<tr><td class="text-center"></td><td class="text-center"><i class="fal fa-sm fa-turn-down-right"></i></td><td class="text-center"><i class="fal fa-file-image fa-fw"></i> </td><td>` + filename[filename.length-1] +`</td></tr>`;
				}
				setTimeout(function() { location.href=msg.url; },1500);
				$("#popupModal").find(".modal-header").removeClass("d-none");
				$("#popupModal").find(".modal-header").html(`<h5 class="modal-title"><i class="fa fa-fw fa-folder-arrow-down"></i> Check your downloads folder...</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>`);
				$("#popupdia").removeClass("modal-sm modal-md");
				$("#popupdia").addClass("modal-lg");
				i
				$("#popupbod").html(`
					<div class="row"><div class="col-12 col-md-12"><p><strong>A zip file  has been downloaded to your computer.</strong></p><p>This contains most of  the files you need to publish your form. <strong>You need to create the  script that  processes the form and the pages for success/failure redirects.</strong></p><p>The "readme.pdf" file provides more detail about each file and deployment instructions.</p><p>If you are unable to self-host the form please consider <a href="#" onclick="login(true)">creating an acount</a> or <a href="#" onclick="login()">logging in</a> and hosting with formstrap for a small "pay as you go" fee.</p><p>If you successfully self-host and are happy with the result please consider <a href="#" onclick="donate()">making an affordable donation</a> to support the free self-hosting service. All contributions are very gratefully received.</p></div><div class="col-12 col-md-12"><div class="card"><div class="card-header">What's in the zip file?</div><div class="card-body">
					<table class="table  table-sm "><tr><th ><i class="fas fa-lg fa-file-zip"></i></th><th colspan="4">` + msg.filename + `</th>
					<tr><td class="text-center"><i class="fal fa-sm fa-turn-down-right"></i></td><td class="text-center"><i class="fal fa-fw fa-folder-open"></i></td><td colspan="2">css</td></tr>
					<tr><td class="text-center"></td><td class="text-center"><i class="fal fa-sm fa-turn-down-right"></i></td><td class="text-center"><i class="fal fa-file-lines fa-fw"></i> </td><td>selfhost.css</td></tr>
					<tr><td class="text-center"><i class="fal fa-sm fa-turn-down-right"></i></td><td class="text-center"><i class="fal fa-fw fa-folder-open"></i></td><td colspan="2">font</td></tr>
					<tr><td class="text-center"></td><td class="text-center"><i class="fal fa-sm fa-turn-down-right"></i></td><td class="text-center"><i class="fal fa-file-binary fa-fw"></i> </td><td>EduVICWANTBeginner-Regular.ttf</td></tr>
					<tr><td class="text-center"></td><td class="text-center"><i class="fal fa-sm fa-turn-down-right"></i></td><td class="text-center"><i class="fal fa-file-lines fa-fw"></i> </td><td>OFL.txt</td></tr>`+imagehtml+`											<tr><td class="text-center"><i class="fal fa-sm fa-turn-down-right"></i></td><td class="text-center"><i class="fal fa-fw fa-folder-open"></i></td><td colspan="2">js</td></tr>
					<tr><td class="text-center"></td><td class="text-center"><i class="fal fa-sm fa-turn-down-right"></i></td><td class="text-center"><i class="fal fa-file-lines fa-fw"></i> </td><td>easing.js</td></tr>
					<tr><td class="text-center"></td><td class="text-center"><i class="fal fa-sm fa-turn-down-right"></i></td><td class="text-center"><i class="fal fa-file-lines fa-fw"></i> </td><td>events.js</td></tr>
					<tr><td class="text-center"></td><td class="text-center"><i class="fal fa-sm fa-turn-down-right"></i></td><td class="text-center"><i class="fal fa-file-lines fa-fw"></i> </td><td>selfhost.js</td></tr>
					<tr><td class="text-center"></td><td class="text-center"><i class="fal fa-sm fa-turn-down-right"></i></td><td class="text-center"><i class="fal fa-file-lines fa-fw"></i> </td><td>strtotime.js</td></tr>
					<tr><td class="text-center"></td><td class="text-center"><i class="fal fa-fw fa-file-image"></i></td><td colspan="2">favicon.png</td></tr>
					<tr><td class="text-center"></td><td class="text-center"><i class="fal fa-fw fa-file-code"></i></td><td colspan="2">form.html</td></tr>
					<tr><td class="text-center"></td><td class="text-center"><i class="fal fa-fw fa-file-code"></i></td><td colspan="2">index.html</td></tr>
					<tr><td class="text-center"></td><td class="text-center"><i class="fal fa-fw fa-file-pdf"></i></td><td colspan="2">readme.pdf</td></tr>
					</table>
				</div></div></div></div><p class="mt-2 mb-2 text-center"><button class=" btn btn-success" onclick="$('#popupModal').modal('hide');login(true);">Register</button> <button class="ms-3 btn btn-primary" onclick="$('#popupModal').modal('hide');login();">Log In</button>  <button onclick="donate()" class="btn btn-warning ms-3"><i class="fa-brands fa-paypal fa-fw"></i> Donate</button></p>`);
				setTimeout(function() { $("#popupModal").modal("show"); },1000);
				toolovers();
			}
			else
			{
				messagepop("There was a problem creating your form","bug");
			}
		}).fail(function(msg)
		{
			messagepop("There was a problem creating your form","bug");
		});
	}
	function donateoutcome(outcome,icon,colour)
	{
		messagepop(outcome,icon,null,null,null,null,null,null,null,colour);
	}
	function donate()
	{
		location.href="https://www.paypal.com/donate/?hosted_button_id=PAFGYQZ6AJM3A";
	}
	function paypaliframe()
	{
		if($("#donationce").val()<1)
		{
			$("#donateerror").html("The minimum donation that we can accept is £1.00");
			$("#donationce").val("1");
			$("#donationce").trigger("blur");
			$("#donationce").focus();
			return false;
		}
		$("#ganopay").prop("disabled",true);
		$("#ganopay").html(`<i class="fa fa-fw fa-spin fa-spinner"></i> Creating PayPal Order`);
		$.ajax({
			method:"POST",
			url:"/scripts/donate.php",
			data:{amount:$("#donationce").val(),name:$("#donatename").val(),note:$("#donatenote").val(),fee:$("#feetick").prop("checked")},
			dataType:"json"
		}).done(function(msg)
		{
			if(msg.status=="PAYER_ACTION_REQUIRED")
			{
				$("#popupModal").find(".modal-header").html(`<h5 class="modal-title"><i class="fa-brands fa-fw fa-paypal"></i> Donation Order Created</h5>`);
				$("#popupbod").html(`<p>Your Donation Order has successfully been created by PayPal.</p><table class="table table-striped"><tr><td>One off donation</td><td style="text-align:right">£`+msg.amount+`</td></tr><tr><th>Total to be Paid</th><th style="text-align:right">£`+msg.amount+`</th></tr></table><p>Click the button below to visit PayPal and authorise the payment.</p><p>Please note you do not need to have a PayPal account to donate with PayPal.</p><button class="btn btn-success" onclick="location.href='` + msg.link +`'"><i class="fa-brands fa-fw fa-paypal"></i> Authorise Payment at PayPal</button><button onclick="$('#popupModal').modal('hide')" class="float-end btn btn-danger">Cancel Donation</button>`);
			}
		})
	}
	function formsettings()
	{
		
		unselect();
		$("#offcanvascontext").removeClass("offcanvas-start");				
		$("#offcanvascontext").addClass("offcanvas-end");				
		$("#offcanvasevents").removeClass("offcanvas-start");				
		$("#offcanvasevents").addClass("offcanvas-end");
		
		getcontext(document.getElementById("fullform"));
		
	}
	function viewdemo()
	{
		messagepop(`<p class="text-start">The form will open in a new window or tab. It is a fully functioning, formstrap-hosted form. You can complete the form and the data you enter will be submitted. Please don\'t use real information (though if you want to see how the form-to-pdf function works you\'ll need to enter a real email address).</p><p class="text-start">The form only works if accessed from the buttons below as a referrer restriction has been added to the form.</p><p class="text-start">Do you want to proceed? You can choose to view an empty form or one that has been completed (the data is about a fictional person - any similarity to a real person is entirely coincidental).</p>`,`question-circle`,function() { getdemonodata();  },function() { getdemowithdata(); },`View Empty Form`,`View Completed Form`,true,`modal-md`,null,`green`,null,`primary`,`primary`);
	}
	function getdemowithdata()
	{
		$.ajax({
			method:"POST",
			url:"/scripts/sampledata.php",
			dataType:"json"
			}).done(function(msg) {
			if(msg.response=="OK")
			{
				localStorage.setItem("demoapplication-data",msg.data);
				window.open(`https://formstrap.com/samples/DemoForm`,`demo`);
			}
		});
	}
	function getdemonodata()
	{
		$.ajax({
			method:"POST",
			url:"/scripts/sampledata.php",
			dataType:"json"
			}).done(function(msg) {
			if(msg.response=="OK")
			{
				localStorage.removeItem("demoapplication-data");
				window.open(`https://formstrap.com/samples/DemoForm`,`demo`);
			}
		});
	}
	function getdemoform()
	{
		localStorage.removeItem("sampleform-data");
		messagepop("The Demonstration Job Application Form will be loaded into the designer.<br><br>The form's metadata will be saved to your browser's local storage.<br><br>Are you sure you want to edit a fresh copy of the demo form?","circle-question",function() {
			$.ajax({
				method:"POST",
				url:"/scripts/getdemo.php",
				dataType:"json"
			}).done(function(msg)
			{
				localStorage.setItem("formstrap",msg.HTML);
				localStorage.setItem("formstrapjson",msg.JSON);
				localStorage.setItem("name",msg.Name);
				localStorage.setItem("events",msg.Events);
				location.href="#"
				location.reload();
			});
		},function() { return false; },"Yes","No",null,null,null,"green");
	}
	
	function getsamplerform()
	{
		localStorage.removeItem("sampleform-data");
		messagepop("The Sampler Form will be loaded into the designer.<br><br>The form's metadata will be saved to your browser's local storage.<br><br>Are you sure you want to edit a fresh copy of the sampler form?","circle-question",function() {
			$.ajax({
				method:"POST",
				url:"/scripts/getdemo.php",
				data:{sampler:"true"},
				dataType:"json"
			}).done(function(msg)
			{
				localStorage.setItem("formstrap",msg.HTML);
				localStorage.setItem("formstrapjson",msg.JSON);
				localStorage.setItem("name",msg.Name);
				localStorage.setItem("events",msg.Events);
				location.href="#";
				location.reload();
			});
		},function() { return false; },"Yes","No",null,null,null,"green");
	}
	function checksession()
	{
		$.ajax({
			url:"/scripts/checksession.php",
			method:"POST"
		}).done(function(msg)
		{
			document.getElementById("checksession").value=msg;
			if(msg!="OK")
			{
				$("#navcont").html(`<nav class="fixed-top navbar navbar-expand-lg bg-body-tertiary">
					<div class="container-fluid">
					<a class="navbar-brand" href="#" onmouseover="spell(this)" style="font-family:EduBold;color:black;background-color:pink;padding:0px 10px;line-height:0.95em;font-size:2em;border-radius:5px;vertical-align:baseline;font-weight:bold">f<span style="font-weight: normal; display: none;" class="hidden">orm</span>s<span style="font-weight: normal; display: none;" class="hidden">trap</span></a>
					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav me-auto mb-2 mb-lg-0">
					<li class="nav-item">
					<a class="nav-link active" aria-current="page" href="/"><i class="fal fa-home fa-fw"></i> Home</a>
					</li>
					<li class="previewmenu nav-item">
					<a onclick="formsettings()" class="nav-link" href="#"><i class="fal fa-cog"></i> Form Settings</a>
					</li>
					<li class="previewmenu nav-item">
					<a onclick="formaudit()" class="nav-link" href="#"><i class="fal fa-list-check"></i> Check Form</a>
					</li>
					<li class="previewmenu nav-item">
					<a onclick="preview(true)" class="nav-link" href="#"><i class="fal fa-clipboard-list"></i> Preview</a>
					</li>
					<li class="previewmenu nav-item">
					<a onclick="publish()" class="nav-link" href="#"><i class="fal fa-code fa-fw"></i> Publish</a>
					</li>
					<li class="nav-item">
					<a onclick="help()" class="nav-link" href="#"><i class="fal fa-handshake-angle  fa-fw"></i> Help</a>
					</li>
					</ul><button type="button" class="btn btn-success btn-sm me-2" style="display:none" onclick="saveform()" id="savebutton"><i class="fal fa-fw fa-check-circle"></i> Saved</button> <button type="button" class="btn btn-primary btn-sm me-3" onclick="toggleFullscreen(this)"><a data-bs-toggle="tooltip" id="fstoggle" class="nav-link" href="#" aria-label="Toggle Fullscreen Mode" data-bs-original-title="Toggle Fullscreen Mode"><i class="fal fa-lg fa-expand-wide"></i></a></button>
					<button type="button" id="mainlogin" class=" mx-1 btn btn-primary" onclick="login(false)">Log In</button> <button type="button" class="mx-1 btn btn-success" onclick="login(true)">Register</button> <button id="menudonatebutton" type="button" class="btn btn-warning mx-1" onclick="donate()"><i class="fa-brands fa-fw fa-paypal"></i> Donate</button>
					</div>
					</div>
				</nav>`);
			}
			else
			{
				$("#navcont").html(`<nav class="fixed-top navbar navbar-expand-lg bg-body-tertiary">
					<div class="container-fluid">
					<a class="navbar-brand" href="#" onmouseover="spell(this)" style="font-family:EduBold;color:black;background-color:pink;padding:0px 10px;line-height:0.95em;font-size:2em;border-radius:5px;vertical-align:baseline;font-weight:bold">f<span style="display:none;font-weight:normal" class="hidden">orm</span>s<span style="display:none;font-weight:normal" class="hidden">trap</span></a>
					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav me-auto mb-2 mb-lg-0">
					<li class=" nav-item">
					<a class="nav-link active" aria-current="page" href="/"><i class="fal fa-home fa-fw"></i> Home</a>
					</li>
					<li class="previewmenu nav-item">
					<a onclick="unselect();getcontext(document.getElementById(&quot;fullform&quot;))" class="nav-link" href="#"><i class="fal fa-cog"></i> Form Settings</a>
					</li>
					<li class="previewmenu nav-item">
					<a onclick="formaudit()" class="nav-link" href="#"><i class="fal fa-list-check"></i> Check Form</a>
					</li>
					<li class="previewmenu nav-item">
					<a onclick="preview(true)" class="nav-link" href="#"><i class="fal fa-clipboard-list"></i> Preview</a>
					</li>
					<li class="nav-item">
					<a class="nav-link" onclick="window.open('/dashboard','dashboard')" href="#"><i class="fal fa-chart-mixed-up-circle-currency"></i> Dashboard</a>
					</li>			<li class=" nav-item">
					<a onclick="help()" class="nav-link" href="#"><i class="fal fa-handshake-angle  fa-fw"></i> Help</a>
					</li>
					</ul><button type="button" class="btn btn-success btn-sm me-2" style="display:none" onclick="saveform()" id="savebutton"><i class="fal fa-fw fa-check-circle"></i> Saved</button> <button type="button" class="btn btn-primary btn-sm me-3" onclick="toggleFullscreen(this)"><a data-bs-toggle="tooltip" id="fstoggle" class="nav-link" href="#" aria-label="Toggle Fullscreen Mode" data-bs-original-title="Toggle Fullscreen Mode"><i class="fal fa-lg fa-expand-wide"></i></a></button>
					<button id="mainlogout" class="  mx-1 btn btn-danger" type="button" onclick="logout()">Log Out</button>									</div>
					</div>
				</nav>`);
			}
			if(document.getElementById("dirty").value=="yes")
			{
				dirty();
			}
			if($("#home").is(":visible"))
			{
				$("#navcont").find(".previewmenu").hide();
			}
			else
			{
				$("#navcont").find(".previewmenu").show();
			}
		});
	}					
	
	
	
	function defined(v,prefix,suffix)
	{
		if(typeof prefix=="undefined")
		{
			prefix="";
		}
		if(typeof suffix=="undefined")
		{
			suffix="";
		}
		if(typeof v!="undefined" && typeof v!="")
		{
			return prefix+v+suffix;
		}
		else
		{
			return "";		
		}
	}
	
	function getclass(component,container)
	{
		classlist=[];
		if(container==1 || container==3)
		{
			classlist[0]="data-width-xs";
			classlist[1]="data-width-sm";
			classlist[2]="data-width-md";
			classlist[3]="data-width-lg";
			classlist[4]="data-width-xl";
			classlist[5]="data-width-xxl";
			classlist[6]="data-align";
			classlist[7]="data-align-sm";
			classlist[8]="data-align-md";
			classlist[9]="data-align-lg";
			classlist[10]="data-align-xl";
			classlist[11]="data-align-xxl";
			classlist[12]="data-mt";
			classlist[13]="data-me";
			classlist[14]="data-mb";
			classlist[15]="data-ms";
		}
		if(container==2)
		{
			classlist[0]="data-pt";
			classlist[1]="data-pe";
			classlist[2]="data-pb";
			classlist[3]="data-ps";
		}
		if(container==3)
		{
			classlist[16]="data-pt";
			classlist[17]="data-pe";
			classlist[18]="data-pb";
			classlist[19]="data-ps";
		}
		classesfound="";
		$.each(classlist,function(i,v)
			{ 
				classesfound=(classesfound.trim()+" "+defined($(component).attr(v))).trim()
			});
			return classesfound;
	}		 
	
	function preparebuild(id)
	{
		p=1;
		$("#metadata").get(0).reset();
		$("#section0").remove();
		$("#formcontextdescription").val("");
		$("#formcontextlogo").val("");
		$("#formcontextdescription").html("");
		$("#formcontextdescription").trigger("change");
		$("#formcontextlogo").trigger("change")
		$("#formtitle").addClass("d-none");
		$("#formtitle").removeClass("d-block");
		$("#formtitle").html("");
		$("#formdescription").removeClass("d-block");
		$("#formdescription").html("");
		$("#formlogo").attr("src","");
		$("#formlogocontainer").removeClass("d-block");
		$("#formlogocontainer").addClass("d-none");
		$("#formlogocontainer").removeAttr("class");
		$("#formintrocontainer").removeAttr("class");
		$("#formlogocontainer").removeData("width-xs width-sm width-md width-lg width-xl width-xxl");
		$("#formlogocontainer").removeAttr("data-width-xs data-width-sm data-width-md data-width-lg data-width-xl data-width-xxl");
		$("#formintroontainer").removeAttr("data-width-xs data-width-sm data-width-md data-width-lg data-width-xl data-width-xxl");
		$("#formintrocontainer").removeData("width-xs width-sm width-md width-lg width-xl width-xxl");
		buildfields={};
		$.ajax({
			method:"POST",
			url:"/scripts/getbuildjson.php",
			data:{id:id},
			dataType:"json"
		}).done(function(msg)
		{
			buildfields["form"]={};
			$("#formcontextbody").find("input,select,textarea").each(function(a,b) {
				buildfields["form"][$(b).attr("id")]=$(b).val();
			});
			buildfields["section"]={};
			$("#sectioncontextbody").find("input,select,textarea").each(function(a,b) {
				buildfields["section"][$(b).attr("id")]=$(b).val();
			});
			buildfields["sectioncolumn"]={};
			$("#sectioncolumncontextbody").find("input,select,textarea").each(function(a,b) {
				buildfields["sectioncolumn"][$(b).attr("id")]=$(b).val();
			});
			buildfields["row"]={};
			$("#rowcontextbody").find("input,select,textarea").each(function(a,b) {
				buildfields["row"][$(b).attr("id")]=$(b).val();
			});
			buildfields["column"]={};
			$("#columncontextbody").find("input,select,textarea").each(function(a,b) {
				buildfields["column"][$(b).attr("id")]=$(b).val();
			});
			buildfields["field"]={};
			$("#fieldcontextbody").find("input,select,textarea").each(function(a,b) {
				if($(b).attr("type")=="checkbox")
				{
					buildfields["field"][$(b).attr("id")]=b.checked;
				}
				else
				{
					buildfields["field"][$(b).attr("id")]=$(b).val();
				}
			});
			json=JSON.parse(msg.json);
			layout=json.layout;
			fields=json.fields;
			schedule={};
			schedule["form"]=[];
			schedule["form"].push({"add":"form"});
			if(layout["Form"]["Name"] && layout["Form"]["Name"]!=buildfields["form"]["formcontextname"])
			{
				schedule["form"].push({"field":"#formcontextname","value":layout["Form"]["Name"]});
			}
			if(layout["Form"]["ID"] && layout["Form"]["ID"]!=buildfields["form"]["formcontextid"])
			{
				schedule["form"].push({"field":"#formcontextid","value":layout["Form"]["ID"]});
			}
			
			if(layout["Form"]["SaveToLocal"] && layout["Form"]["SaveToLocal"]!=buildfields["form"]["formcontextsave"])
			{
				schedule["form"].push({"field":"#formcontextsave","value":layout["Form"]["SaveToLocal"]});
			}
			if(layout["Form"]["SaveOpt"] && layout["Form"]["SaveOpt"]!=buildfields["form"]["formcontextsaveopt"])
			{
				schedule["form"].push({"field":"#formcontextsaveopt","value":layout["Form"]["SaveOpt"]});
			}
			if(layout["Form"]["Colour"] && layout["Form"]["Colour"]!=buildfields["form"]["formcontextpagecolour"])
			{
				schedule["form"].push({"field":"#formcontextpagecolour","value":layout["Form"]["Colour"]});
			}
			if(layout["Form"]["TextColour"] && layout["Form"]["TextColour"]!=buildfields["form"]["formcontexttextcolour"])
			{
				schedule["form"].push({"field":"#formcontexttextcolour","value":layout["Form"]["TextColour"]});
			}
			if(layout["Form"]["Class"])
			{
				classes=layout["Form"]["Class"].split(" ");
				$.each(classes,function(a,b)
					{
						type=b.split("-");
						if(type.length<3)
						{
							if(b && b!=buildfields["form"]["formcontextcontainercontextwidthxs"])
							{
								schedule["form"].push({"field":"#formcontextcontainercontextwidthxs","value":b});
							}
						}
						if(type.length==3)
						{
							if(b && b!=buildfields["form"]["formcontextcontainercontextwidth"+type[1]])
							{
								schedule["form"].push({"field":"#formcontextcontainercontextwidth"+type[1],"value":b});
							}
						}
					});
					
			}
			
			
			if(layout["Form"]["Heading"]["logo"]["containerclasses"])
			{
				classes=layout["Form"]["Heading"]["logo"]["containerclasses"].split(" ");
				$.each(classes,function(a,b)
					{
						type=b.split("-");
						if(type.length<3)
						{
							if(b && b!=buildfields["form"]["formcontextlogocontextwidthxs"])
							{
								schedule["form"].push({"field":"#formcontextlogocontextwidthxs","value":b});
							}
						}
						if(type.length==3)
						{
							if(b && b!=buildfields["form"]["formcontextlogocontextwidth"+type[1]])
							{
								schedule["form"].push({"field":"#formcontextlogocontextwidth"+type[1],"value":b});
							}
						}
					});
					
			}
			if(layout["Form"]["Heading"]["logo"]["src"] && layout["Form"]["Heading"]["logo"]["src"]!=buildfields["form"]["formcontextlogo"])
			{
				schedule["form"].push({"field":"#formcontextlogo","value":layout["Form"]["Heading"]["logo"]["src"]});
			}
			if(layout["Form"]["Heading"]["logo"]["alt"] && layout["Form"]["Heading"]["logo"]["alt"]!=buildfields["form"]["formcontextlogoalt"])
			{
				schedule["form"].push({"field":"#formcontexttextlogoalt","value":layout["Form"]["Heading"]["logo"]["alt"]});
			}
			if(layout["Form"]["Heading"]["logo"]["icon"] && layout["Form"]["Heading"]["logo"]["icon"]!=buildfields["form"]["formcontextfavicon"])
			{
				schedule["form"].push({"field":"#formcontextfavicon","value":layout["Form"]["Heading"]["logo"]["icon"]});
			}
			
			
			if(layout["Form"]["Heading"]["text"]["containerclasses"])
			{
				classes=layout["Form"]["Heading"]["text"]["containerclasses"].split(" ");
				$.each(classes,function(a,b)
					{
						type=b.split("-");
						if(type.length<3)
						{
							if(b && b!=buildfields["form"]["formcontexttextcontextwidthxs"])
							{
								schedule["form"].push({"field":"#formcontexttextcontextwidthxs","value":b});
							}
						}
						if(type.length==3)
						{
							if(b && b!=buildfields["form"]["formcontexttextcontextwidth"+type[1]])
							{
								schedule["form"].push({"field":"#formcontexttextcontextwidth"+type[1],"value":b});
							}
						}
					});
					
			}
			if(layout["Form"]["Heading"]["text"]["title"]["text"] && layout["Form"]["Heading"]["text"]["title"]["text"]!=buildfields["form"]["formcontexttitle"])
			{
				schedule["form"].push({"field":"#formcontexttitle","value":layout["Form"]["Heading"]["text"]["title"]["text"]});
			}
			if(layout["Form"]["Heading"]["text"]["title"]["classes"])
			{
				classes=layout["Form"]["Heading"]["text"]["title"]["classes"].replaceAll("m-0 p-0 ","").split(" ");
				$.each(classes,function(a,b)
					{
						type=b.split("-");
						if(type.length<3)
						{
							if(b && b!=buildfields["form"]["formcontexttitlecontextalignxs"])
							{
								schedule["form"].push({"field":"#formcontexttitlecontextalignxs","value":b});
							}
						}
						if(type.length==3)
						{
							if(b && b!=buildfields["form"]["formcontexttitlecontextalign"+type[1]])
							{
								schedule["form"].push({"field":"#formcontexttitlecontextalign"+type[1],"value":b});
							}
						}
					});
					
			}
			
			if(layout["Form"]["Heading"]["text"]["description"]["text"] && layout["Form"]["Heading"]["text"]["description"]["text"]!=buildfields["form"]["formcontextdescription"])
			{
				schedule["form"].push({"field":"#formcontextdescription","value":layout["Form"]["Heading"]["text"]["description"]["text"]});
			}
			if(layout["Form"]["Heading"]["text"]["description"]["renderHTML"] && layout["Form"]["Heading"]["text"]["description"]["renderHTML"]!=buildfields["form"]["formcontextdescriptionhtml"])
			{
				schedule["form"].push({"field":"#formcontextdescriptionhtml","value":layout["Form"]["Heading"]["text"]["description"]["renderHTML"]});
			}
			if(layout["Form"]["Heading"]["text"]["description"]["classes"])
			{
				classes=layout["Form"]["Heading"]["text"]["description"]["classes"].replaceAll("m-0 p-0 ","").split(" ");
				$.each(classes,function(a,b)
					{
						type=b.split("-");
						if(type.length<3)
						{
							if(b && b!=buildfields["form"]["formcontextdescriptioncontextalignxs"])
							{
								schedule["form"].push({"field":"#formcontextdescriptioncontextalignxs","value":b});
							}
						}
						if(type.length==3)
						{
							if(b && b!=buildfields["form"]["formcontextdescriptioncontextalign"+type[1]])
							{
								schedule["form"].push({"field":"#formcontextdescriptioncontextalign"+type[1],"value":b});
							}
						}
					});
					
			}
			
			if(layout["Form"]["Pagination"]["Scroll"] && layout["Form"]["Pagination"]["Scroll"]!=buildfields["form"]["formcontextpaginationscroll"])
			{
				schedule["form"].push({"field":"#formcontextpaginationscroll","value":layout["Form"]["Pagination"]["Scroll"]});
			}
			if(layout["Form"]["Pagination"]["Position"] && layout["Form"]["Pagination"]["Position"]!=buildfields["form"]["formcontextpaginationposition"])
			{
				schedule["form"].push({"field":"#formcontextpaginationposition","value":layout["Form"]["Pagination"]["Position"]});
			}
			if(layout["Form"]["Pagination"]["Submit"] && layout["Form"]["Pagination"]["Submit"]!=buildfields["form"]["formcontextpaginationsubmit"])
			{
				schedule["form"].push({"field":"#formcontextpaginationsubmit","value":layout["Form"]["Pagination"]["Submit"]});
			}
			if(layout["Form"]["Pagination"]["Format"] && layout["Form"]["Pagination"]["Format"]!=buildfields["form"]["formcontextpagination"])
			{
				schedule["form"].push({"field":"#formcontextpagination","value":layout["Form"]["Pagination"]["Format"]});
			}
			
			$.each(layout["Form"]["Sections"],function(a,b)
				{
					secid=b.SystemID;
					schedule["form"].push({"add":"section","id":b.SystemID});
					
					if(b["Page"] && b["Page"]!=buildfields["section"]["sectioncontextpage"])
					{
						schedule["form"].push({"field":"#sectioncontextpage","value":b["Page"],"delay":3,"id":secid});
					}
					if(b["CustomID"] && b["CustomID"]!=buildfields["section"]["sectioncontextid"])
					{
						schedule["form"].push({"field":"#sectioncontextid","value":b["CustomID"]});
					}
					if(b["CustomClass"] && b["CustomClass"]!=buildfields["section"]["sectioncontextclass"])
					{
						schedule["form"].push({"field":"#sectioncontextclass","value":b["CustomClass"]});
					}
					if(b["Title"] && b["Title"]!=buildfields["section"]["sectioncontexttitle"])
					{
						schedule["form"].push({"field":"#sectioncontexttitle","value":b["Title"]});
					}
					if(b["Description"] && b["Description"]!=buildfields["section"]["sectioncontextdescription"])
					{
						schedule["form"].push({"field":"#sectioncontextdescription","value":b["Description"]});
					}
					if(b["DescriptionHTML"] && b["DescriptionHTML"]!=buildfields["section"]["sectioncontextdescriptionhtml"])
					{
						schedule["form"].push({"field":"#sectioncontextdescriptionhtml","value":b["DescriptionHTML"]});
					}
					if(b["Visible"] && b["Visible"]!=buildfields["section"]["sectioncontextvisible"])
					{
						schedule["form"].push({"field":"#sectioncontextvisible","value":b["Visible"]});
					}
					if(b["Card"] && b["Card"]!=buildfields["section"]["sectioncontextcard"])
					{
						schedule["form"].push({"field":"#sectioncontextcard","value":b["Card"]});
					}
					if(b["CardColour"] && b["CardColour"]!=buildfields["section"]["sectioncontextcardcolour"])
					{
						schedule["form"].push({"field":"#sectioncontextcardcolour","value":b["CardColour"]});
					}
					
					if(b["Class"])
					{
						classes=b["Class"].split(" ");
						$.each(classes,function(a,b)
							{		
								type=b.split("-");
								if(type[0]=="mb")
								{
									type="bottom";
								}
								if(type[0]=="mt")
								{
									type="top";
								}
								if(type[0]=="ms")
								{
									type="start";
								}
								if(type[0]=="me")
								{
									type="end";
								}
								if(b && b!=buildfields["section"]["sectioncontextmargin"+type])
								{
									schedule["form"].push({"field":"#sectioncontextmargin"+type,"value":b});
								}
							});
					}
					
					if(b["ContainerClass"])
					{
						classes=b["ContainerClass"].split(" ");
						$.each(classes,function(a,b)
							{		
								type=b.split("-");
								if(type[0]=="pb")
								{
									type="bottom";
								}
								if(type[0]=="pt")
								{
									type="top";
								}
								if(type[0]=="ps")
								{
									type="start";
								}
								if(type[0]=="pe")
								{
									type="end";
								}
								if(b && b!=buildfields["section"]["sectioncontextpadding"+type])
								{
									schedule["form"].push({"field":"#sectioncontextpadding"+type,"value":b});
								}
							});
					}
					if(b["Gutter-X"] && b["Gutter-X"]!=buildfields["section"]["sectioncontextgutterx"])
					{
						schedule["form"].push({"field":"#sectioncontextgutterx","value":b["Gutter-X"]});
					}
					if(b["Gutter-Y"] && b["Gutter-Y"]!=buildfields["section"]["sectioncontextguttery"])
					{
						schedule["form"].push({"field":"#sectioncontextguttery","value":b["Gutter-Y"]});
					}	
					$.each(b["SectionColumns"],function(a,b)
						{
							schedule["form"].push({"add":"sectioncolumn","id":b.SystemID,"to":secid});
							seccolid=b.SystemID;
							if(b["CustomID"] && b["CustomID"]!=buildfields["sectioncolumn"]["sectioncolumncontextid"])
							{
								schedule["form"].push({"field":"#sectioncolumncontextid","value":b["CustomID"]});
							}
							if(b["CustomClass"] && b["CustomClass"]!=buildfields["sectioncolumn"]["sectioncolumncontextclass"])
							{
								schedule["form"].push({"field":"#sectioncolumncontextclass","value":b["CustomClass"]});
							}
							if(b["Title"] && b["Title"]!=buildfields["sectioncolumn"]["sectioncolumncontexttitle"])
							{
								schedule["form"].push({"field":"#sectioncolumncontexttitle","value":b["Title"]});
							}
							if(b["Description"] && b["Description"]!=buildfields["sectioncolumn"]["sectioncolumncontextdescription"])
							{
								schedule["form"].push({"field":"#sectioncolumncontextdescription","value":b["Description"]});
							}
							if(b["DescriptionHTML"] && b["DescriptionHTML"]!=buildfields["sectioncolumn"]["sectioncolumncontextdescriptionhtml"])
							{
								schedule["form"].push({"field":"#sectioncolumncontextdescriptionhtml","value":b["DescriptionHTML"]});
							}
							if(b["Visible"] && b["Visible"]!=buildfields["sectioncolumn"]["sectioncolumncontextvisible"])
							{
								schedule["form"].push({"field":"#sectioncolumncontextvisible","value":b["Visible"]});
							}
							if(b["Replicable"] && b["Replicable"]!=buildfields["sectioncolumn"]["sectioncolumncontextreplicable"])
							{
								schedule["form"].push({"field":"#sectioncolumncontextreplicable","value":b["Replicable"]});
							}
							if(b["ReplicableAdd"] && b["ReplicableAdd"]!=buildfields["sectioncolumn"]["sectioncolumncontextreplicableadd"])
							{
								schedule["form"].push({"field":"#sectioncolumncontextreplicableadd","value":b["ReplicableAdd"]});
							}
							if(b["ReplicableDelete"] && b["ReplicableDelete"]!=buildfields["sectioncolumn"]["sectioncolumncontextreplicabledelete"])
							{
								schedule["form"].push({"field":"#sectioncolumncontextreplicabledelete","value":b["ReplicableDelete"]});
							}
							if(b["Card"] && b["Card"]!=buildfields["sectioncolumn"]["sectioncolumncontextcard"])
							{
								schedule["form"].push({"field":"#sectioncolumncontextcard","value":b["Card"]});
							}
							if(b["CardColour"] && b["CardColour"]!=buildfields["sectioncolumn"]["sectioncolumncontextcardcolour"])
							{
								schedule["form"].push({"field":"#sectioncolumncontextcardcolour","value":b["CardColour"]});
							}
							
							if(b["ContainerClass"])
							{
								classes=b["ContainerClass"].split(" ");
								$.each(classes,function(a,b)
									{		
										type=b.split("-");
										if(type[0]=="pb")
										{
											type="bottom";
										}
										if(type[0]=="pt")
										{
											type="top";
										}
										if(type[0]=="ps")
										{
											type="start";
										}
										if(type[0]=="pe")
										{
											type="end";
										}
										if(b && b!=buildfields["sectioncolumn"]["sectioncolumncontextpadding"+type])
										{
											schedule["form"].push({"field":"#sectioncolumncontextpadding"+type,"value":b});
										}
									});
							}
							
							
							if(b["Class"])
							{
								classes=b["Class"].split(" ");
								$.each(classes,function(a,b)
									{
										type=b.split("-");
										if(type.length<3)
										{
											if(b && b!=buildfields["sectioncolumn"]["sectioncolumncontextcontextwidthxs"])
											{
												schedule["form"].push({"field":"#sectioncolumncontextcontextwidthxs","value":b});
											}
										}
										if(type.length==3)
										{
											if(b && b!=buildfields["sectioncolumn"]["sectioncolumncontextcontextwidth"+type[1]])
											{
												schedule["form"].push({"field":"#sectioncolumncontextcontextwidth"+type[1],"value":b});
											}
										}
									});
									
							}
							
							
							
							
							
							$.each(b["Rows"],function(a,b)
								{
									schedule["form"].push({"add":"row","id":b.SystemID,"to":seccolid});
									rowid=b.SystemID;
									
									
									if(b["CustomID"] && b["CustomID"]!=buildfields["row"]["rowcontextid"])
									{
										schedule["form"].push({"field":"#rowcontextid","value":b["CustomID"]});
									}
									if(b["CustomClass"] && b["CustomClass"]!=buildfields["row"]["rowcontextclass"])
									{
										schedule["form"].push({"field":"#rowcontextclass","value":b["CustomClass"]});
									}
									if(b["Title"] && b["Title"]!=buildfields["row"]["rowcontexttitle"])
									{
										schedule["form"].push({"field":"#rowcontexttitle","value":b["Title"]});
									}
									if(b["Description"] && b["Description"]!=buildfields["row"]["rowcontextdescription"])
									{
										schedule["form"].push({"field":"#rowcontextdescription","value":b["Description"]});
									}
									if(b["DescriptionHTML"] && b["DescriptionHTML"]!=buildfields["row"]["rowcontextdescriptionhtml"])
									{
										schedule["form"].push({"field":"#rowcontextdescriptionhtml","value":b["DescriptionHTML"]});
									}
									if(b["Visible"] && b["Visible"]!=buildfields["row"]["rowcontextvisible"])
									{
										schedule["form"].push({"field":"#rowcontextvisible","value":b["Visible"]});
									}
									
									if(b["Replicable"] && b["Replicable"]!=buildfields["row"]["rowcontextreplicable"])
									{
										schedule["form"].push({"field":"#rowcontextreplicable","value":b["Replicable"]});
									}
									if(b["ReplicableAdd"] && b["ReplicableAdd"]!=buildfields["row"]["rowcontextreplicableadd"])
									{
										schedule["form"].push({"field":"#rowcontextreplicableadd","value":b["ReplicableAdd"]});
									}
									if(b["ReplicableDelete"] && b["ReplicableDelete"]!=buildfields["row"]["rowcontextreplicabledelete"])
									{
										schedule["form"].push({"field":"#rowcontextreplicabledelete","value":b["ReplicableDelete"]});
									}
									
									if(b["Card"] && b["Card"]!=buildfields["row"]["rowcontextcard"])
									{
										schedule["form"].push({"field":"#rowcontextcard","value":b["Card"]});
									}
									if(b["CardColour"] && b["CardColour"]!=buildfields["row"]["rowcontextcardcolour"])
									{
										schedule["form"].push({"field":"#rowcontextcardcolour","value":b["CardColour"]});
									}
									
									if(b["Class"])
									{
										classes=b["Class"].split(" ");
										$.each(classes,function(a,b)
											{		
												type=b.split("-");
												if(type[0]=="mb")
												{
													type="bottom";
												}
												if(type[0]=="mt")
												{
													type="top";
												}
												if(type[0]=="ms")
												{
													type="start";
												}
												if(type[0]=="me")
												{
													type="end";
												}
												if(b && b!=buildfields["row"]["rowcontextmargin"+type])
												{
													schedule["form"].push({"field":"#rowcontextmargin"+type,"value":b});
												}
											});
									}
									
									if(b["ContainerClass"])
									{
										classes=b["ContainerClass"].split(" ");
										$.each(classes,function(a,b)
											{		
												type=b.split("-");
												if(type[0]=="pb")
												{
													type="bottom";
												}
												if(type[0]=="pt")
												{
													type="top";
												}
												if(type[0]=="ps")
												{
													type="start";
												}
												if(type[0]=="pe")
												{
													type="end";
												}
												if(b && b!=buildfields["row"]["rowcontextpadding"+type])
												{
													schedule["form"].push({"field":"#rowcontextpadding"+type,"value":b});
												}
											});
									}
									if(b["Gutter-X"] && b["Gutter-X"]!=buildfields["row"]["rowcontextgutterx"])
									{
										schedule["form"].push({"field":"#rowcontextgutterx","value":b["Gutter-X"]});
									}
									if(b["Gutter-Y"] && b["Gutter-Y"]!=buildfields["row"]["rowcontextguttery"])
									{
										schedule["form"].push({"field":"#rowcontextguttery","value":b["Gutter-Y"]});
									}	
									
									
									
									$.each(b["RowColumns"],function(a,b)
										{
											schedule["form"].push({"add":"column","id":b.SystemID,"to":rowid});
											colid=b.SystemID
											if(b["CustomID"] && b["CustomID"]!=buildfields["column"]["columncontextid"])
											{
												schedule["form"].push({"field":"#columncontextid","value":b["CustomID"]});
											}
											if(b["CustomClass"] && b["CustomClass"]!=buildfields["column"]["columncontextclass"])
											{
												schedule["form"].push({"field":"#columncontextclass","value":b["CustomClass"]});
											}
											if(b["Title"] && b["Title"]!=buildfields["column"]["columncontexttitle"])
											{
												schedule["form"].push({"field":"#columncontexttitle","value":b["Title"]});
											}
											if(b["Description"] && b["Description"]!=buildfields["column"]["columncontextdescription"])
											{
												schedule["form"].push({"field":"#columncontextdescription","value":b["Description"]});
											}
											if(b["DescriptionHTML"] && b["DescriptionHTML"]!=buildfields["column"]["columncontextdescriptionhtml"])
											{
												schedule["form"].push({"field":"#columncontextdescriptionhtml","value":b["DescriptionHTML"]});
											}
											if(b["Visible"] && b["Visible"]!=buildfields["column"]["columncontextvisible"])
											{
												schedule["form"].push({"field":"#columncontextvisible","value":b["Visible"]});
											}
											
											if(b["Card"] && b["Card"]!=buildfields["column"]["columncontextcard"])
											{
												schedule["form"].push({"field":"#columncontextcard","value":b["Card"]});
											}
											if(b["CardColour"] && b["CardColour"]!=buildfields["column"]["columncontextcardcolour"])
											{
												schedule["form"].push({"field":"#columncontextcardcolour","value":b["CardColour"]});
											}
											
											if(b["ContainerClass"])
											{
												classes=b["ContainerClass"].split(" ");
												$.each(classes,function(a,b)
													{		
														type=b.split("-");
														if(type[0]=="pb")
														{
															type="bottom";
														}
														if(type[0]=="pt")
														{
															type="top";
														}
														if(type[0]=="ps")
														{
															type="start";
														}
														if(type[0]=="pe")
														{
															type="end";
														}
														if(b && b!=buildfields["column"]["columncontextpadding"+type])
														{
															schedule["form"].push({"field":"#columncontextpadding"+type,"value":b});
														}
													});
											}
											
											
											if(b["Class"])
											{
												classes=b["Class"].split(" ");
												$.each(classes,function(a,b)
													{
														type=b.split("-");
														if(type.length<3)
														{
															if(b && b!=buildfields["column"]["columncontextcontextwidthxs"])
															{
																schedule["form"].push({"field":"#columncontextcontextwidthxs","value":b});
															}
														}
														if(type.length==3)
														{
															if(b && b!=buildfields["column"]["columncontextcontextwidth"+type[1]])
															{
																schedule["form"].push({"field":"#columncontextcontextwidth"+type[1],"value":b});
															}
														}
													});
													
											}
											
											
											
											
											$.each(b["Fields"],function(a,b)
												{
													
													schedule["form"].push({"add":"field","id":b.SystemID,"to":colid});
													f=fields[b.SystemID];
													fi=b.SystemID;
													if(f["Type"] && f["Type"]!=buildfields["field"]["fieldcontexttype"])
													{
														schedule["form"].push({"field":"#fieldcontexttype","value":f["Type"],"delay":2,"id":fi,"options":f.Options});
													}
													if(f["Attributes"]["name"] && f["Attributes"]["name"]!=buildfields["field"]["fieldcontextname"])
													{
														schedule["form"].push({"field":"#fieldcontextname","value":f["Attributes"]["name"]});
													}
													if(f["Attributes"]["customid"] && f["Attributes"]["customid"]!=buildfields["field"]["fieldcontextid"])
													{
														schedule["form"].push({"field":"#fieldcontextid","value":f["Attributes"]["customid"]});
													}
													if(f["Attributes"]["customclass"] && f["Attributes"]["customclass"]!=buildfields["field"]["fieldcontextclass"])
													{
														schedule["form"].push({"field":"#fieldcontextclass","value":f["Attributes"]["customclass"]});
													}
													if( f["Label"]!=buildfields["field"]["fieldcontextlabel"])
													{
														schedule["form"].push({"field":"#fieldcontextlabel","value":f["Label"]});
													}
													if(f["Note"] && f["Note"]!=buildfields["field"]["fieldcontextnote"])
													{
														schedule["form"].push({"field":"#fieldcontextnote","value":f["Note"]});
													}
													if(f["NotePosition"] && f["NotePosition"]!=buildfields["field"]["fieldcontextnoteposition"])
													{
														schedule["form"].push({"field":"#fieldcontextnoteposition","value":f["NotePosition"]});
													}
													if(f["Attributes"]["placeholder"] && f["Attributes"]["placeholder"]!=buildfields["field"]["fieldcontextplaceholder"])
													{
														schedule["form"].push({"field":"#fieldcontextplaceholder","value":f["Attributes"]["placeholder"]});
													}
													if(f["Attributes"]["defaultvalue"] && f["Attributes"]["defaultvalue"]!=buildfields["field"]["fieldcontextdefault"])
													{
														schedule["form"].push({"field":"#fieldcontextdefault","value":f["Attributes"]["defaultvalue"]});
													}
													if(f["Attributes"]["autocomplete"] && f["Attributes"]["autcomplete"]!=buildfields["field"]["fieldcontextautcomplete"])
													{
														schedule["form"].push({"field":"#fieldcontextautocomplete","value":f["Attributes"]["autocomplete"]});
													}
													if(f["Attributes"]["autoheight"] && f["Attributes"]["autoheight"]!=buildfields["field"]["fieldcontextautoheight"])
													{
														schedule["form"].push({"field":"#fieldcontextautoheight","value":f["Attributes"]["autoheight"]});
													}
													if(f["Attributes"]["html"] && f["Attributes"]["html"]!=buildfields["field"]["fieldcontexthtml"])
													{
														schedule["form"].push({"field":"#fieldcontexthtml","value":f["Attributes"]["html"]});
													}
													if(f["Attributes"]["disabled"] && f["Attributes"]["disabled"]!=buildfields["field"]["fieldcontextdisabled"])
													{
														schedule["form"].push({"field":"#fieldcontextdisabled","value":f["Attributes"]["disabled"]});
													}
													if(f["Attributes"]["donotdisable"] && f["Attributes"]["donotdisable"]!=buildfields["field"]["fieldcontextenabled"])
													{
														schedule["form"].push({"field":"#fieldcontextenabled","value":f["Attributes"]["donotdisable"]});
													}
													if(f["Attributes"]["floatinglabel"] && f["Attributes"]["floatinglabel"]!=buildfields["field"]["fieldcontextfloatinglabel"])
													{
														schedule["form"].push({"field":"#fieldcontextfloatinglabel","value":f["Attributes"]["floatinglabel"]});
													}
													if(f["Attributes"]["visible"] && f["Attributes"]["visible"]!=buildfields["field"]["fieldcontextvisible"])
													{
														schedule["form"].push({"field":"#fieldcontextvisible","value":f["Attributes"]["visible"]});
													}
													if(f["Attributes"]["readonly"] && f["Attributes"]["readonly"]!=buildfields["field"]["fieldcontextreadonly"])
													{
														schedule["form"].push({"field":"#fieldcontextreadonly","value":f["Attributes"]["readonly"]});
													}
													if(f["Attributes"]["required"] && f["Attributes"]["required"]!=buildfields["field"]["fieldcontextrequired"])
													{
														schedule["form"].push({"field":"#fieldcontextrequired","value":f["Attributes"]["required"]});
													}
													
													if(f["Attributes"]["height"] && f["Attributes"]["height"]!=buildfields["field"]["fieldcontexttextareaheight"])
													{
														schedule["form"].push({"field":"#fieldcontexttextareaheight","value":f["Attributes"]["height"]});
													}
													
													if(f["Attributes"]["min"] && f["Attributes"]["min"]!=buildfields["field"]["fieldcontextmin"])
													{
														schedule["form"].push({"field":"#fieldcontextmin","value":f["Attributes"]["min"]});
													}
													if(f["Attributes"]["max"] && f["Attributes"]["max"]!=buildfields["field"]["fieldcontextmax"])
													{
														schedule["form"].push({"field":"#fieldcontextmax","value":f["Attributes"]["max"]});
													}
													if(f["Attributes"]["step"] && f["Attributes"]["step"]!=buildfields["field"]["fieldcontextstep"])
													{
														schedule["form"].push({"field":"#fieldcontextstep","value":f["Attributes"]["step"]});
													}
													
													if(f["Attributes"]["minlength"] && f["Attributes"]["minlength"]!=buildfields["field"]["fieldcontextminlength"])
													{
														schedule["form"].push({"field":"#fieldcontextminlength","value":f["Attributes"]["minlength"]});
													}
													if(f["Attributes"]["maxlength"] && f["Attributes"]["maxlength"]!=buildfields["field"]["fieldcontextmaxlength"])
													{
														schedule["form"].push({"field":"#fieldcontextmaxlength","value":f["Attributes"]["maxlength"]});
													}
													
													if(f["CustomValidation"]["Required"] && f["CustomValidation"]["Required"]!=buildfields["field"]["fieldcontextrequiredalert"])
													{
														schedule["form"].push({"field":"#fieldcontextrequiredalert","value":f["CustomValidation"]["Required"]});
													}
													if(f["CustomValidation"]["RangeUnder"] && f["CustomValidation"]["RangeUnder"]!=buildfields["field"]["fieldcontextrangeunderalert"])
													{
														schedule["form"].push({"field":"#fieldcontextrangeunderalert","value":f["CustomValidation"]["RangeUnder"]});
													}
													if(f["CustomValidation"]["RangeOver"] && f["CustomValidation"]["RangeOver"]!=buildfields["field"]["fieldcontextrangeoveralert"])
													{
														schedule["form"].push({"field":"#fieldcontextrangeoveralert","value":f["CustomValidation"]["RangeOver"]});
													}
													if(f["CustomValidation"]["StepMismtach"] && f["CustomValidation"]["StepMismatch"]!=buildfields["field"]["fieldcontextstepmismatchalert"])
													{
														schedule["form"].push({"field":"#fieldcontextstepmismatchalert","value":f["CustomValidation"]["StepMismatch"]});
													}
													if(f["CustomValidation"]["TooShort"] && f["CustomValidation"]["TooShort"]!=buildfields["field"]["fieldcontexttooshortalert"])
													{
														schedule["form"].push({"field":"#fieldcontexttooshortalert","value":f["CustomValidation"]["TooShort"]});
													}
													if(f["CustomValidation"]["TooLong"] && f["CustomValidation"]["TooLong"]!=buildfields["field"]["fieldcontexttoolongalert"])
													{
														schedule["form"].push({"field":"#fieldcontexttoolongalert","value":f["CustomValidation"]["TooLong"]});
													}
													if(f["CustomValidation"]["CustomEvent"] && f["CustomValidation"]["CustomEvent"]!=buildfields["field"]["fieldcontexteventcustomalert"])
													{
														schedule["form"].push({"field":"#fieldcontexteventcustomalert","value":f["CustomValidation"]["CustomEvent"]});
													}
													
													if(f["Attributes"]["class"])
													{
														classes=f["Attributes"]["class"].split(" ");
														$.each(classes,function(a,b)
															{		
																type=b.split("-");
																if(type[0]=="mb")
																{
																	type="bottom";
																}
																if(type[0]=="mt")
																{
																	type="top";
																}
																if(type[0]=="ms")
																{
																	type="start";
																}
																if(type[0]=="me")
																{
																	type="end";
																}
																if(b && b!=buildfields["row"]["fieldcontextmargin"+type])
																{
																	schedule["form"].push({"field":"#fieldcontextmargin"+type,"value":b});
																}
															});
													}
													
													
												});		
										});		
								});		
						});		
				});
				runschedule(schedule);
		}
		);
		
	}
	var p=1;
	function runschedule(sched)
	{
		
		p=1;
		$.each(sched,function(a,b)
			{
				
				
				$.each(b,function(c,d)
					{
						
						if(d.add=="form")
						{
							setTimeout(function() {  formsettings(); $("#metadata").get(0).reset(); },250*p);
							p++;
						}
						if(d.add=="section")
						{
							setTimeout(function() { addpage(d["id"].replaceAll("section","")); $("#metadata").get(0).reset();},p*250);
							p++;
						}
						if(d.add=="sectioncolumn")
						{
							
							setTimeout(function() { 	addpagecolumn(document.getElementById(d["to"]),d["id"].replaceAll("sectioncol",""));$("#metadata").get(0).reset(); },p*250);
							p++;
						}
						if(d.add=="row")
						{
							
							setTimeout(function() {   addrow(document.getElementById(d.to),d["id"].replaceAll("formrow",""));$("#metadata").get(0).reset(); },p*250);
							p++;
						}
						if(d.add=="column")
						{
							
							setTimeout(function() {   addcolumn(document.getElementById(d.to),d["id"].replaceAll("formcol","")); $("#metadata").get(0).reset();},p*250);
							p++;
						}
						if(d.add=="field")
						{
							
							setTimeout(function() {  addfield(document.getElementById(d.to),d["id"].replaceAll("field","")); $("#metadata").get(0).reset();},p*250);
							p++;
						}
						if(d.field)
						{
							update(d.field,d.value);
							
							if(d.field=="#sectioncontextpage")
							{
								p=p+2;
								setTimeout(function() {   getcontext(document.getElementById(d.id)); },p*250);
								
							}
							if(d.field=="#fieldcontexttype")
							{
								if(d.value=="select" || d.value=="radio" || d.value=="checkbox")
								{
									p++;
									setTimeout(function() {
										optionsupdate("#"+d.id,d["options"]);
									},250*p);
									p++;
								}
							}
							if(d.delay)
							{
								p=p+d.delay;
							}
							else
							{
								p++;
							}
						}
					});
			});
			
			setTimeout(function() { gotopage(1) },p*250);
			p=p+2;
			setTimeout(function() { preview() }, p*250);
			
	}
	
	
	function buildform(id)
	{
		
		formmapping={};
		sectionmapping={};
		formmapping["ID"]="formcontextid";
		formmapping["Name"]="formcontextname";
		formmapping["SaveToLocal"]="formcontextsave";
		formmapping["SaveOpt"]="formcontextsaveopt";
		formmapping["Colour"]="formcontextpagecolour";
		formmapping["TextColour"]="formcontexttextcolour";
		formmapping["Class"]="formcontextcontainercontextwidth";
		formmapping["Heading|logo|src"]="formcontextlogo";
		formmapping["Heading|logo|alt"]="formcontextlogoalt";
		formmapping["Heading[logo|containerclasses"]="formcontextlogocontextwidth";
		formmapping["Heading|text|containerclasses"]="formcontexttextcontextwidth";
		formmapping["Heading|text|title|text"]="formcontexttitle";
		formmapping["Heading|text|title|classes"]="formcontexttitlecontextalign";
		formmapping["Heading|text|description|text"]="formcontextdescription";
		formmapping["Heading|text|description|classes"]="formcontextdescriptioncontextalign";
		formmapping["Heading|text|description|renderHTML"]="formcontextdescriptionhtml";
		formmapping["Pagination|Position"]="formcontextpaginationposition";
		formmapping["Pagination|Format"]="formcontextpagination";
		formmapping["Pagination|Submit"]="formcontextpaginationsubmit";
		formmapping["Pagination|Scroll"]="formpaginationscroll";
		sectionmapping["CustomID"]="sectioncontextid";
		sectionmapping["CustomClass"]="sectioncontextclass";
		sectionmapping["Title"]="sectioncontexttitle";
		sectionmapping["Description"]="sectioncontextdescription";
		sectionmapping["DescriptionHTML"]="sectioncontextdescriptionhtml";
		sectionmapping["Gutter-X"]="sectioncontextgutterx";
		sectionmapping["Gutter-Y"]="sectioncontextguttery";
		sectionmapping["Class"]="sectioncontextmargin";
		sectionmapping["ContainerClas"]="sectioncontextpadding";
		sectionmapping["Visible"]="sectioncontextvisible";
		sectionmapping["Card"]="sectioncontextcard";
		sectionmapping["CardColour"]="sectioncontextcardcolour";
		sectionmapping["NoPDF"]="sectioncontextdescriptionhtml";
		
		$.ajax({
			method:"POST",
			url:"/scripts/getbuildjson.php",
			data:{id:id},
			dataType:"json"
		}).done(function(msg)
		{
			
			offcanvasList[0].show();
			$("#formcontext").show();
			$("#metadata").get(0).reset();
			if(msg.response=="OK")
			{
				
				json=JSON.parse(msg.json);
				$("#section0").remove();
				fields=json["fields"];
				
				$.each(json["layout"]["Form"],function(a,b) {
					if(typeof b=="object")
					{
						if(a=="Heading")
						{
							if(b["logo"]["src"])
							{
								update("#"+formmapping["Heading|logo|src"],b["logo"]["src"]);
							}
							if(b["logo"]["alt"])
							{
								update("#"+formmapping["Heading|logo|alt"],b["logo"]["alt"]);
							}
							if(b["logo"]["containerclasses"])
							{
								classupdate("#"+formmapping["Heading[logo|containerclasses"],b["logo"]["containerclasses"]);
							}
							if(b["text"]["containerclasses"])
							{
								classupdate("#"+formmapping["Heading|text|containerclasses"],b["text"]["containerclasses"]);
							}
							if(b["text"]["title"]["text"])
							{
								update("#"+formmapping["Heading|text|title|text"],b["text"]["title"]["text"]);
							}
							
							if(b["text"]["title"]["classes"])
							{
								alignupdate("#"+formmapping["Heading|text|title|classes"],b["text"]["title"]["classes"]);
							}
							if(b["text"]["description"]["text"])
							{
								update("#"+formmapping["Heading|text|description|text"],b["text"]["description"]["text"]);
							}
							
							if(b["text"]["description"]["classes"])
							{
								alignupdate("#"+formmapping["Heading|text|description|classes"],b["text"]["description"]["classes"]);
							}
						}
						if(a=="Pagination")
						{
							$.each(b,function(c,d)
								{
									if(typeof d!="undefined")
									{
										update("#"+formmapping[a+"|"+c],d);
									}
								});
						}
					}
					else
					{
						if(a=="Class" && typeof b!="undefined")
						{
							classupdate("#"+formmapping[a],b);
						}
						else
						{
							if(typeof b!="undefined")
							{
								update("#"+formmapping[a],b);
							}
						}
					}
				});
				
				$.each(json["layout"]["Form"]["Sections"],function(secid,secdetail)
					{
						
						setTimeout(function() { addpage(secdetail["SystemID"].replaceAll("section","")); $("#metadata").get(0).reset();},p*250);
						p++;
						update("#sectioncontextpage",secdetail["Page"]);
						p=p+2;
						setTimeout(function() { getcontext(document.getElementById(secdetail["SystemID"])); $("#metadata").get(0).reset();},p*250);
						p=p+2;
						$.each(secdetail,function(a,b)
							{
								if(a=="Class" && typeof b!="undefined")
								{
									marginsupdate("#"+sectionmapping[a],b);
								}
								else
								{
									if(a=="ContainerClass"&& typeof b!="undefined")
									{
										paddingupdate("#"+sectionmapping[a],b);
									}
									else
									{
										if(typeof b!="undefined")
										{
											update("#"+sectionmapping[a],b);
										}
									}
								}
							});
							
							$.each(secdetail["SectionColumns"],function(seccolid,seccoldetail)
								{
									setTimeout(function() { addpagecolumn(document.getElementById(secdetail["SystemID"]),seccoldetail["SystemID"].replaceAll("sectioncol","")); $("#metadata").get(0).reset();},p*250);
									p++;
									
									update("#sectioncolumncontextid",seccoldetail["CustomID"],);
									update("#sectioncolumncontextclass",seccoldetail["CustomClass"]);
									update("#sectioncolumncontexttitle",seccoldetail["Title"]);
									update("#sectioncolumncontextdescription",seccoldetail["Description"]);
									update("#sectioncolumncontextdescriptionhtml",seccoldetail["DescriptionHTML"]);
									update("#sectioncolumncontextvisible",seccoldetail["Visible"]);
									update("#sectioncolumncontextreplicable",seccoldetail["Replicable"]);
									update("#sectioncolumncontextreplicableadd",seccoldetail["ReplicableAdd"]);
									update("#sectioncolumncontextreplicabledelete",seccoldetail["ReplicableDelete"]);
									update("#sectioncolumncontextcard",((seccoldetail["Card"]==true) ? "Yes" : "No"));
									update("#sectioncolumncontextcardcolour",seccoldetail["CardColour"]);
									paddingupdate("#sectioncolumncontextpadding",seccoldetail["ContainerClass"]);
									classupdate("#sectioncolumncontextcontextwidth",seccoldetail["Class"]);
									
									$.each(seccoldetail["Rows"],function(rowid,rowdetail)
										{
											setTimeout(function() { addrow(document.getElementById(seccoldetail["SystemID"]),rowdetail["SystemID"].replaceAll("formrow","")); $("#metadata").get(0).reset();},p*250);
											p++;
											
											update("#rowcontextid",rowdetail["CustomID"]);
											update("#rowcontextclass",rowdetail["CustomClass"]);
											update("#rowcontexttitle",rowdetail["Title"]);
											update("#rowcontextdescription",rowdetail["Description"]);
											update("#rowcontextdescriptionhtml",rowdetail["DescriptionHTML"]);
											update("#rowcontextvisible",rowdetail["Visible"]);
											update("#rowcontextreplicable",rowdetail["Replicable"]);
											update("#rowcontextreplicableadd",rowdetail["ReplicableAdd"]);
											update("#rowcontextreplicabledelete",rowdetail["ReplicableDelete"]);
											update("#rowcontextcard",((rowdetail["Card"]==true) ? "Yes" : "No"));
											update("#rowcontextcardcolour",rowdetail["CardColour"]);
											marginsupdate("#rowcontextmargin",rowdetail["Class"]);
											paddingupdate("#rowcontextpadding",rowdetail["ContainerClass"]);
											update("#rowcontextgutterx",((rowdetail["Gutter-X"]) ? rowdetail["Gutter-X"] : 0));
											update("#rowcontextguttery",((rowdetail["Gutter-Y"]) ? rowdetail["Gutter-Y"] : 0));
											
											$.each(rowdetail["RowColumns"],function(colid,coldetail)
												{
													setTimeout(function() { addcolumn(document.getElementById(rowdetail["SystemID"]),coldetail["SystemID"].replaceAll("formcol","")); $("#metadata").get(0).reset();},p*250);
													p++;
													
													
													update("#columncontextid",coldetail["CustomID"]);
													update("#columncontextclass",coldetail["CustomClass"]);
													update("#columncontexttitle",coldetail["Title"]);
													update("#columncontextdescription",coldetail["Description"]);
													update("#columncontextdescriptionhtml",coldetail["DescriptionHTML"]);
													update("#columncontextvisible",coldetail["Visible"]);
													update("#columncontextcard",((coldetail["Card"]==true) ? "Yes" : "No"));
													update("#columncontextcardcolour",coldetail["CardColour"]);
													paddingupdate("#columncontextpadding",coldetail["ContainerClass"]);
													classupdate("#columncontextcontextwidth",coldetail["Class"]);
													
													$.each(coldetail["Fields"],function(fieldid,fielddetail)
														{
															setTimeout(function() { $("#metadata").get(0).reset(); $("#fieldcontextoptions").html(""); addfield(document.getElementById(coldetail["SystemID"]),fielddetail["SystemID"].replaceAll("field",""));  },p*250);
															p++;
															
															update("#fieldcontexttype",fields[fielddetail["SystemID"]]["Type"]);
															
															update("#fieldcontextsize",fields[fielddetail["SystemID"]]["Attributes"]["inputsize"]);
															
															update("#fieldcontextname",fields[fielddetail["SystemID"]]["Attributes"]["name"]);
															update("#fieldcontextid",fields[fielddetail["SystemID"]]["Attributes"]["customid"]);
															update("#fieldcontextclass",fields[fielddetail["SystemID"]]["Attributes"]["customclass"]);
															update("#fieldcontextlabel",fields[fielddetail["SystemID"]]["Label"]);
															update("#fieldcontextnote",fields[fielddetail["SystemID"]]["Note"]);
															update("#fieldcontextnoteshow",fields[fielddetail["SystemID"]]["NotePosition"]);
															update("#fieldcontextplaceholder",fields[fielddetail["SystemID"]]["Attributes"]["placeholder"]);
															update("#fieldcontextdefault",fields[fielddetail["SystemID"]]["Attributes"]["defaultvalue"]);
															update("#fieldcontextautocomplete",fields[fielddetail["SystemID"]]["Attributes"]["autocomplete"]);
															update("#fieldcontextmin",fields[fielddetail["SystemID"]]["Attributes"]["min"]);
															update("#fieldcontextmax",fields[fielddetail["SystemID"]]["Attributes"]["max"]);
															update("#fieldcontextstep",fields[fielddetail["SystemID"]]["Attributes"]["step"]);
															update("#fieldcontextminlength",fields[fielddetail["SystemID"]]["Attributes"]["minlength"]);
															update("#fieldcontextmaxlength",fields[fielddetail["SystemID"]]["Attributes"]["maxlength"]);
															update("#fieldcontextpattern",fields[fielddetail["SystemID"]]["Attributes"]["pattern"]);
															boolupdate("#fieldcontextautoheight",fields[fielddetail["SystemID"]]["Attributes"]["autoheight"]);
															boolupdate("#fieldcontextdisabled",fields[fielddetail["SystemID"]]["Attributes"]["disabled"]);
															boolupdate("#fieldcontextenabled",fields[fielddetail["SystemID"]]["Attributes"]["donotdisable"]);
															boolupdate("#fieldcontextcheckcols",fields[fielddetail["SystemID"]]["Attributes"]["twocols"]);
															boolupdate("#fieldcontextotherspecify",fields[fielddetail["SystemID"]]["Attributes"]["otherspecify"]);
															boolupdate("#fieldcontextfloatinglabel",fields[fielddetail["SystemID"]]["Attributes"]["floatinglabel"]);
															boolupdate("#fieldcontextvisible",fields[fielddetail["SystemID"]]["Attributes"]["visible"]);
															boolupdate("#fieldcontextreadonly",fields[fielddetail["SystemID"]]["Attributes"]["readonly"]);
															boolupdate("#fieldcontextrequired",fields[fielddetail["SystemID"]]["Attributes"]["required"]);
															
															optionsupdate("#"+fielddetail["SystemID"],fields[fielddetail["SystemID"]]["Options"]);
															
															
															
															update("#fieldcontexttextareaheight",fields[fielddetail["SystemID"]]["Attributes"]["height"])
															update("#fieldcontextrequiredalert",fields[fielddetail["SystemID"]]["CustomValidation"]["Required"]);
															update("#fieldcontextpatternalert",fields[fielddetail["SystemID"]]["CustomValidation"]["Pattern"]);
															update("#fieldcontexttooshortdalert",fields[fielddetail["SystemID"]]["CustomValidation"]["TooShort"]);
															update("#fieldcontexttoolongalert",fields[fielddetail["SystemID"]]["CustomValidation"]["TooLong"]);
															
															update("#fieldcontexttoorangerunderalert",fields[fielddetail["SystemID"]]["CustomValidation"]["RangeUnder"]);
															update("#fieldcontexttoorangeroveralert",fields[fielddetail["SystemID"]]["CustomValidation"]["RangeOver"]);
															update("#fieldcontextstepmismatchalert",fields[fielddetail["SystemID"]]["CustomValidation"]["StepMismatch"]);
															update("#fieldcontextmismatchalert",fields[fielddetail["SystemID"]]["CustomValidation"]["TypeMismatch"]);
															update("#fieldcontexteventcustomalert",fields[fielddetail["SystemID"]]["CustomValidation"]["CustomEvent"]);
															
															marginsupdate("#fieldcontextmargin",fields[fielddetail["SystemID"]]["Attributes"]["class"]);
														});
														
												});
												
												
										});
										
										
								});
								
								
					});
					
					
					
					// Pagination at the end when pages have been added
					update("#formcontextdescription",json["layout"]["Form"]["Heading"]["text"]["description"]["text"]);
					
			};
		});
	}
	function optionsupdate(e,options)
	{
		
		if($(options).length>0)
		{
			extra = `<i style="color:blue;cursor:move" class="listhandle fal fa-fw fa-arrows-up-down"></i>&nbsp;&nbsp;`
			$("#fieldcontextoptions").html("");
			i=0;
			$.each(options,function(a,b)
				{
					
					$("#fieldcontextoptions").append(`<tr><td><input value="`+b["Value"] + `" onchange="dirty();setoptions('` +e+ `')" data-entry="` + i + `" style="width:100%;border:1px solid rgb(222, 226, 230);" id="fieldoptionvalue` + i + `" class="value" ></td><td><input value='` + b["Label"] + `' onchange="dirty();setoptions('` + e + `')" class="descriptor" id="fieldoptiondesc` + i + `" data-entry="` + i + `"  style="width:100%;border:1px solid rgb(222, 226, 230);"></td><td  style="text-align:right;cursor:pointer">` + extra + `<i  style="color:red;cursor:pointer" class="fal fa-fw fa-trash-can"></i></td></tr>`);
					i++;
				});
				setoptions(e);
		}
		
		
	}
	function boolupdate(id,value)
	{
		
		if(typeof value=="undefined" || (value=="true" && $(id).is(":checked")) || (value=="false" && $(id).is(":checked")==false))
		{
			setTimeout(function() { 
				$(id).trigger("change");
				return false;
			},250*p);
			
		}
		else
		{
			setTimeout(function()
				{
					
					$(id).addClass("fa-beat");
					
					$(id).css("--fa-animation-duration","0.25s");
					$(id).css("background-color","lightGreen");
				},(250*p)-200);
				setTimeout(function() {
					if(value=="true")
					{
						
						$(id).prop("checked",true);
					}
					else
					{
						
						$(id).prop("checked",false);
					}
					$(id).trigger("change"); 
					$(id).removeClass("fa-beat");
					
					$(id).css("--fa-animation-duration","0.25s");
					$(id).css("background-color","");
				},250*p);
				p++;
		}
	}
	
	
	function sleep (time) {
		return new Promise((resolve) => setTimeout(resolve, time));
	}
	
	function update(id,value,defaultvalue)
	{
		if(typeof defaultvalue=="undefined")
		{
			defaultvalue="";
		}
		
		setTimeout(function() 
			{
				
				
				$(id).addClass("fa-beat");
				
				$(id).css("--fa-animation-duration","0.25s");
				$(id).css("background-color","lightGreen");
				
			},(250*p)-225);
			
			
			setTimeout(function() {
				
				$(id).focus();
				if($(id).attr("type")=="checkbox")
				{
					if(value=="true")
					{
						
						$(id).prop("checked",true);
					}
					else
					{
						$(id).prop("checked",false);
					}
				}
				else
				{
					$(id).val(value);
					
				}
				
				$(id).trigger("change");
				
				$(id).removeClass("fa-beat");
				$(id).css("background-color","");
			},250*p);
			
			
	}
	function classupdate(id,classes,defaultvalue)
	{
		
		classlist={};
		classlist["xxl"]="col-xxl";
		classlist["xl"]="col-xl";
		classlist["lg"]="col-lg";
		classlist["md"]="col-md";
		classlist["sm"]="col-sm";
		
		classlist["xs"]="col-";
		var val={};
		if(typeof classes=="undefined" || classes==defaultvalue)
		{
			return false;
		}
		classes=classes.split(" ");
		
		$.each(classlist,function(a,b)
			{
				$.each(classes,function(c,d)
					{
						if(d.indexOf(b)>=0)
						{
							val[a]=d;
							classes[c]="";
							return false;
						}
						else
						{
							if(d=="col")
							{
								val["xs"]="col";
								classes[c]="";
								return false;
							}
						}
					});
					if(typeof val[a]=="undefined")
					{
						
						val[a]="";
						
					}
			});
			newval={};
			newval["xs"]=val["xs"];
			newval["sm"]=val["sm"];
			newval["md"]=val["md"];
			newval["lg"]=val["lg"];
			newval["xl"]=val["xl"];
			newval["xxl"]=val["xxl"];
			$.each(newval,function(a,b)
				{
					update(id+a,b);
				})
	}	
	
	
	function alignupdate(id,classes,defaultvalue)
	{
		classlist={};
		classlist["xxl"]="text-xxl";
		classlist["xl"]="text-xl";
		classlist["lg"]="text-lg";
		classlist["md"]="text-md";
		classlist["sm"]="text-sm";
		
		classlist["xs"]="text-";
		var val={};
		if(typeof classes=="undefined" || classes==defaultvalue)
		{
			return false;
		}
		
		classes=classes.split(" ");
		
		$.each(classlist,function(a,b)
			{
				$.each(classes,function(c,d)
					{
						if(d.indexOf(b)>=0)
						{
							val[a]=d;
							classes[c]="";
							return false;
						}
						else
						{
							if(d=="col")
							{
								val["xs"]="col";
								classes[c]="";
								return false;
							}
						}
					});
					if(typeof val[a]=="undefined")
					{
						
						val[a]="";
						
					}
			});
			
			newval={};
			newval["xs"]=val["xs"];
			newval["sm"]=val["sm"];
			newval["md"]=val["md"];
			newval["lg"]=val["lg"];
			newval["xl"]=val["xl"];
			newval["xxl"]=val["xxl"];
			$.each(newval,function(a,b)
				{
					update(id+a,b);
				});
				
	}
	
	
	function marginsupdate(id,classes,defaultvalue)
	{
		classlist={};
		classlist["top"]="mt-"
		classlist["end"]="me-";
		classlist["bottom"]="mb-";
		classlist["start"]="ms-";
		if(typeof classes=="undefined" || defaultvalue==classes)
		{
			
			return false;
		}
		
		var val={};
		
		classes=classes.split(" ");
		
		$.each(classlist,function(a,b)
			{
				$.each(classes,function(c,d)
					{
						if(d.indexOf(b)>=0)
						{
							val[a]=d;
							classes[c]="";
							return false;
						}
						
					});
					if(typeof val[a]=="undefined")
					{
						
						val[a]=b+"0";
						
					}
			});
			
			
			$.each(val,function(a,b)
				{
					
					update(id+a,b);
					
				})
				
	}
	
	
	function paddingupdate(id,classes,defaultvalue)
	{
		classlist={};
		classlist["top"]="pt-"
		classlist["end"]="pe-";
		classlist["bottom"]="pb-";
		classlist["start"]="ps-";
		
		
		var val={};
		if(typeof classes=="undefined" || classes==defaultvalue)
		{
			return false;
		}
		classes=classes.split(" ");
		
		$.each(classlist,function(a,b)
			{
				$.each(classes,function(c,d)
					{
						if(d.indexOf(b)>=0)
						{
							val[a]=d;
							classes[c]="";
							return false;
						}
						
					});
					if(typeof val[a]=="undefined")
					{
						
						val[a]=b+"0";
						
					}
			});
			
			
			$.each(val,function(a,b)
				{
					update(id+a,b);
				})
	}									
	
	function icons(ele)
	{
		$("#icons").parent().addClass("d-none");
		if(typeof icondelay!="undefined")
		{
			clearTimeout(icondelay);
		}
		icondelay=setTimeout(function() {
			if(ele.value.trim()!="" )
			{
				$.ajax({
					method:"POST",
					url:"/findicons.php",
					data:{search:ele.value,format:"html",nonce:document.getElementById("inonce").value},
					
				}).done(function(msg)
				{
					
					if(msg.trim())
					{
						$("#icons").html(msg);
						$("#icons").parent().removeClass("d-none");
						toolovers();
						$("#icons").find("i").on("click",function()
							{
								ele.value=$(this).data("value");
								$(ele).trigger("change");
								$("#icons").parent().addClass("d-none");
								
							});
					}
					else
					{
						$("#icons").parent().addClass("d-none");
					}
				})
			}
			else
			{
				$("#icons").parent().addClass("d-none");
			}
		},500);
	}