dL.contactForm = (function namespace() { var formWidth = 600; var formHeight = 500; var formMarginTop = 450; var keyDownListener = function (event) { if (event.keyCode === 27) hideContactForm(); } var displayContactForm = function () { var container = document.getElementById("container"); var contactForm = document.getElementById("contactForm"); var opacityScreen = document.createElement("div"); opacityScreen.id = "opacityScreen"; container.insertBefore(opacityScreen, contactForm); dL(opacityScreen).style({position: "absolute", top: 0, height: dL("").getStyle("height"), width: dL("").getStyle("width"), backgroundColor: "#000000", opacity: 0}) .tween({opacity: 0.8, duration: 500}); dL(contactForm).style({height: 2, overflow: "hidden", display: "block", position: "absolute", top: formMarginTop, left: dL("").getStyle("width") / 2}) .tween({easing: "cubic", duration: 700, backgroundColor: "#FFFFFF", width: formWidth, left: "-=" + formWidth / 2}) .tween({easing: "overshoot", height: formHeight, top: "-=" + formHeight / 2, duration: 500}) dL.addEventListener("keydown", document, keyDownListener); var cancelButton = document.getElementById("cancelButton"); dL(cancelButton).addEventListener("click", hideContactForm); } var hideContactForm = function () { var container = document.getElementById("container"); var contactForm = document.getElementById("contactForm"); var opacityScreen = document.getElementById("opacityScreen"); dL.removeEventListener("keydown", document, keyDownListener); dL(opacityScreen).tween({opacity: 0, duration: 500, finish: function () {container.removeChild(opacityScreen)}}); dL(contactForm).tween({easing: "cubic", height: 0, width: 0, left: "+=300", top: "+=150", duration: 400, onfinish: function () { dL("#sentMessage").style({display: "none"}); dL("#form").style({display: "block"}); }}); /*return false;*/ } var displaySentMessage = function () { var contactForm = document.getElementById("contactForm"); var height = dL(contactForm).getStyle("height"); dL(contactForm).tween({height: 0, easing: "cubic", duration: 500, finish: function () { dL("#sentMessage").style({display: "block"}); dL(document.forms[0]).style({display: "none"}); dL("#closeButton").addEventListener("click", hideContactForm); dL(contactForm).tween({height: height, easing: "cubic", duration: 500}); }}); } var encodeFormData = function (formData) { var dataString = ""; for (var property in formData) { if(formData.hasOwnProperty(property) && typeof formData[property] === "string") { var value = formData[property].toString(); property = encodeURIComponent(property.replace(" ", "+")); value = encodeURIComponent(value.replace(" ", "+")); dataString += ((dataString === "") ? "" : "&") + property + "=" + value; } } return dataString; } var isValidEmailAddress = function (emailAddress) { return (emailAddress.match(/\w+@\w+(\.\w{2,3}|"")$/)); } var postFormData = function (form) { // I'm sure this can be done a more appropriate way, but I'm not familiar with classic ASP so I'm glad it works var formData = { email: form.email.value, name: form.name.value, message: form.message.value }; var errorMessage; var emailInput = document.getElementById("email"); if (!isValidEmailAddress(formData.email)) { // incorrect email address var parentNode = emailInput.parentNode; var verifyEmailListener = function (event) { var value = emailInput.value + String.fromCharCode(event.keyCode); if (isValidEmailAddress(value)) { dL(emailInput).style({backgroundColor: "#4DFF4D"}); parentNode.removeChild(errorMessage); dL(form).removeEventListener("keypress", verifyEmailListener) } } dL(emailInput).style({backgroundColor: "#FF4848"}); if (!document.getElementById("errorMessage")) { errorMessage = document.createElement("div"); errorMessage.id = "errorMessage"; parentNode.appendChild(errorMessage); errorMessage.innerHTML = "vul een kloppend adres is"; dL(form).addEventListener("keypress", verifyEmailListener); } return; } var request = new XMLHttpRequest(); request.open("post", "/contactForm.asp"); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.send(encodeFormData(formData)); dL(emailInput).style({backgroundColor: "#FFFFFF"}); displaySentMessage(); } return { initialize: function () { dL("#sentMessage").style({display: "none"}); dL(".contactFormLink").addEventListener("click", displayContactForm); var contactForm = document.forms[0]; //document.getElementById("form"); contactForm.onsubmit = function () { return false; }; //contactForm.submit = null; dL(contactForm).addEventListener("submit", function () { postFormData(contactForm); //displaySentMessage(); }); } }; }()); dL.addEventListener("load", window, dL.contactForm.initialize)