﻿$(document).ready(function() {
	// define regular expressions & other static data
	var emailRegex = new RegExp(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/);
	var numberRegex = new RegExp(/^\s*\d+\s*$/);
	var urlRegex = new RegExp(/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/);
	var supportedFileExtentions = '.pdf .doc .docx';
	
	var getFrmInputDefaultValue = function(input) {
		return input.parent().find('.default-value:first').val();
	}
	
	var resetForm = function(form) {
		form.trigger('reset').find('.frm-input').each(function(i, element) {
			var input = $(element);
			var row = input.closest('.frm-row');
			
			// set default value
			if (input.hasClass('frm-file-input')) {
				input.siblings('.frm-input-dummy-lbl:first').text(getFrmInputDefaultValue(input)).addClass('grey');
				input.data('file-to-big', false).data('file-name', '');
				
			} else {
				input.val('');
				resetFrmInputToDefaultIfEmpty(input);
			}
		
			// reset css classes and data
			row.removeClass('focus error-focus');
			input.data('focus-count', 0).data('valid', true).data('focused', false).data('blur-blocked', false);
			
			// reset status icon
			row.find('.frm-status-icon:first').attr('class', 'frm-status-icon');
		});
	}
	
	var resetFrmInputToDefaultIfEmpty = function(input) {
		if (input.val() == '') {
			if (input.attr('type') == 'file') {
				input.siblings('.frm-input-dummy-lbl:first').text(getFrmInputDefaultValue(input)).addClass('grey');

			} else {
				input.val(getFrmInputDefaultValue(input)).addClass('grey');
			}
		}
	}
	
	var emptyFrmInputIfValueIsDefault = function(input) {
		if (input.attr('type') != 'file' && input.val() == getFrmInputDefaultValue(input)) {
			input.val('');
		}
	}	
	
	var validateReqFrmInputs = function(form, ignoreFocusCount) {
		form.find('.frm-input.required').each(function(i, element) {
			var input = $(element);
			
			if (ignoreFocusCount ||input.data('focus-count') > 0) {
				var value = input.val();	
				
				if (value.length == 0 || value == getFrmInputDefaultValue(input)) {
					form.data('valid', false);
					input.data('valid', false).data('error-message', 'Verplicht veld');
					
				} else {
					input.data('valid', true).data('error-message', '');
				}
			}
		});
	}
	
	var validateForm = function(form, ignoreFocusCount) {	
		form.data('valid', true);
		var formId = form.attr('id');
		
		// validate required fields
		validateReqFrmInputs(form, ignoreFocusCount);
		console.debug('validateForm - 1 -' +  form.data('valid'));
		
		// validate email when available
		console.debug('[id$=' + formId + '-email]:first');
		var emailInput = form.find('[id$=' + formId + '-email]:first');
		
		if (emailInput.length > 0 && (ignoreFocusCount || emailInput.data('focus-count') > 0)) {			
			var email = jQuery.trim(emailInput.val());
			
			if (email != getFrmInputDefaultValue(emailInput)) {		
				console.debug(emailRegex.test(email));
				if (!emailRegex.test(email)) {				
					form.data('valid', false);
					emailInput.data('valid', false).data('error-message', 'Foutief formaat (vb.: lorem@ipsum.be)');								
				
				} else {
					emailInput.data('valid', true).data('error-message', '');
				}
			}
		}
		console.debug('validateForm - 2 -' + form.data('valid'));
		// validate contact number when available
		var contactNmbrInput = form.find('[id$=' + formId + '-contact-number]:first');
		
		if (contactNmbrInput.length > 0 && (ignoreFocusCount || contactNmbrInput.data('focus-count') > 0)) {			
			contactNmbrInput.data('valid', true).data('error-message', '');
			
			var contactNmbr = jQuery.trim(contactNmbrInput.val()).replace (/[^\d]/g, '');
			
			if (contactNmbr.length > 0 && contactNmbr != getFrmInputDefaultValue(contactNmbrInput) && (!numberRegex.test(contactNmbr) || contactNmbr.length < 9 || contactNmbr.length > 11 || (contactNmbr.length == 10 && contactNmbr[0] != '0') || (contactNmbr.length == 11 && contactNmbr[0] == '0'))) {				
				form.data('valid', false);
				contactNmbrInput.data('valid', false).data('error-message', 'Foutief formaat');				
			}
		}
		
		// validate website when available
		var websiteInput = form.find('[id$=' + formId + '-website]:first');
		
		if (websiteInput.length > 0 && (ignoreFocusCount || websiteInput.data('focus-count') > 0)) {
			websiteInput.data('valid', true).data('error-message', '');
			
			var website = jQuery.trim(websiteInput.val());			
			
			if (website != getFrmInputDefaultValue(websiteInput) && !urlRegex.test(website)) {				
				form.data('valid', false);
				websiteInput.data('valid', false).data('error-message', 'Foutief formaat (vb.: www... of http://...)');	
			}
		}
		
		// validate cv when available
		var cvFileInput = form.find('[id$=' + formId + '-cv]:first');
		
		if (cvFileInput.length > 0 && (ignoreFocusCount || cvFileInput.data('focus-count') > 0)) {			
			var cvFilePath = cvFileInput.val();
			
			if (cvFileInput.data('file-to-big') && cvFilePath == cvFileInput.data('prev-file-name')) {
				form.data('valid', false);
				
			} else {
				cvFileInput.data('valid', true).data('error-message', '').data('file-to-big', false).data('prev-file-name', '');
				
				if (cvFilePath != '') {		
					var cvFileExt = cvFilePath.substring(cvFilePath.lastIndexOf('.')).toLowerCase();
					var fileExtValid = false;
					
					jQuery.each(supportedFileExtentions.split(' '), function(i, supportedFileExt) {
						if (cvFileExt == supportedFileExt) {
							fileExtValid = true;							
							return;
						}
					});
					
					if (!fileExtValid) {
						form.data('valid', false);
						cvFileInput.data('valid', false).data('error-message', 'enkel .doc, .docx en .pdf bestanden zijn toegestaan');						
					}
				}
			}
		}
	}
	
	var updateForm = function(form, ignoreFocusCount) {
		form.find('.frm-row').each(function(i, elementI) {
			var row = $(elementI);
			
			// check if any input is invalid
			var inputsValid = true;
			var inputsFocusCount = 0;
			var inputErrorMsg = "";
			var statusIconEnabled = true;
						
			row.find('.frm-input').each(function(j, elementJ) {		
				var input = $(elementJ);
				
				if (!input.data('valid')) {
					inputsValid = false
					inputErrorMsg = input.data('error-message');
				}
				
				if (!input.hasClass('required') && ((input.attr('type') == 'file' && input.val() == '') || input.val() == getFrmInputDefaultValue(input))) {
					statusIconEnabled = false;
					
				} else {
					statusIconEnabled = true;
				}
				
				inputsFocusCount = inputsFocusCount + input.data('focus-count');
			});
			
			// reset and update status icon
			if (ignoreFocusCount || inputsFocusCount > 0) {
				var statusIcon = row.find('.frm-status-icon:first');
				statusIcon.removeClass('pencil-icon happy-face-icon sad-face-icon');
				
				if (statusIconEnabled) {
					if (inputsValid) {
						statusIcon.addClass('happy-face-icon');
						
					} else {
						statusIcon.addClass('sad-face-icon');
					}
				}
			}
			
			// update error message
			row.find('.frm-error-msg:first').text(inputErrorMsg);	
		});
	}
	
	var handleFormError = function(form) {
		form.find('.frm-input').each(function(i, element) {
			resetFrmInputToDefaultIfEmpty($(element));
		});
		
		updateForm(form, true);
		
		// focus first invalid field
		form.find('.frm-input').each(function(i, element) {
			var input = $(element);

			if (!input.data('valid')) {
				// delay fixes double focus bug in ie8
				setTimeout(function() {
					input.trigger('focus');
				  }, 1);
				return false;
			}
		});
	}
	
	// set events
	$('.frm-input').bind('focus', function(e) {
		// console.debug('request focus');
		var input = $(e.currentTarget);
		
		if (!input.data('focused')) {
			// console.debug('focus');			
			input.data('focused', true);
			
			var row = input.closest('.frm-row');
			var form = row.closest('.frm');
			
			// blur previous current input if blur blocked
			var prevCurrentInput = form.data('current-input');
			if (prevCurrentInput != null && (!prevCurrentInput.data('blur-blocked') || prevCurrentInput.data('focused'))) {
				prevCurrentInput.data('blur-blocked', true).trigger('blur');
			}
			
			// chrome & firefox fix
			if (input.hasClass('frm-file-input')) {
				input.data('blur-blocked', false);
			}

			
			// update current input
			form.data('current-input', input);
			
			// update focus count
			var focusCount = input.data('focus-count');
			input.data('focus-count', focusCount + 1);
			
			// update row class
			var focusClass = (input.data('valid')) ? 'focus' : 'error-focus';		
			row.addClass(focusClass);
			
			emptyFrmInputIfValueIsDefault(input);
			
			// remove grey class
			input.removeClass('grey');	
			
			// reset and update status icon
			row.find('.frm-status-icon:first').removeClass('happy-face-icon sad-face-icon').addClass('pencil-icon');
		}
	});
	
	$('.frm-input').bind('blur', function(e) {
		// console.debug('request blur');		
		var input = $(e.currentTarget);		
		
		if (input.data('focused') && input.data('blur-blocked')) {
			// console.debug('blur');
			input.data('focused', false);
			
			var row = input.closest('.frm-row');
			var form = row.closest('.frm');
					
			input.data('blurred', true);
			
			// update row class
			row.removeClass('focus error-focus');
			
			resetFrmInputToDefaultIfEmpty(input);
			
			// validate and update
			validateForm(form, false);
			updateForm(form, false);
		}
	});
	
	$('.frm-input').bind('keydown', function(e) {
		if (e.keyCode == 27) {
			$(e.currentTarget).trigger('blur');
		}
	});
	
	$('.frm').bind('submit', function(e) {
		e.preventDefault();
		
		var form = $(e.currentTarget);
		
		console.debug('submit - 1 -' + form.data('valid'));
		// validate
		validateForm(form, true);
		console.debug('submit - 2 -' + form.data('valid'));
		
		form.find('.frm-input').each(function(i, element) {
			emptyFrmInputIfValueIsDefault($(element));
		});
		
		if (form.data('valid')) {						
			var options = {
				dataType:  'json',
				error: function(jqXHR, textStatus, errorThrown) {
					handleFormError(form);
				},
				success: function(responseText, statusText, xhr, $form) {
					if (!responseText.status) {
						switch(responseText.errorCode) {
							case 1:
								// not enough argument supplied
								break;
							
							case 2:
								// cv file extention not supported
								break;
							
							case 3:
								// cv file size to high		
								var cvFileInput = form.find('[id$=cv]:first');
								cvFileInput.data('valid', false).data('error-message', 'bestand te groot (max 3mb)').data('file-to-big', true).data('prev-file-name', cvFileInput.val());
								break;
							
							default:
								break;
						}
						
						handleFormError(form);
					
					} else {
					    resetForm(form);
						
						switch(form.attr('id')) {
							case 'contact-frm':
								showThanksContactForm();
								break;
								
							case 'job-application-frm':
								showThanksSolliciteerForm();
								break;
								
							default:
								break;
						}
					}
				}
			}; 
			
			form.ajaxSubmit(options);

		} else {
			handleFormError(form);
		}
	});
	
	// init form file upload inputs
	$('.frm-file-input').each(function(i, element) {
		var fileInput = $(element);
		var fileInputParent = fileInput.closest('.frm-input-hldr');	
		var fileInputDummyBtn = fileInputParent.find('#[id$=cv-dummy-btn]');
		
		fileInput.css('opacity', 0);
		fileInputParent.css('overflow', 'hidden').css('cursor', 'pointer');
		
		fileInputParent.bind('mousemove', function(e) {
			// get data
			var inputParentWidth = fileInputParent.outerWidth();
			var inputParentHeight = fileInputParent.outerHeight();
			var inputParentOffset = fileInputParent.offset();
			
			// update dummy button
			fileInputDummyBtn.addClass('hover');
			
			// update file input
			fileInput.css('position', 'absolute');
				
			// continue when mouse is inside the parent
			if (e.pageX >= inputParentOffset.left && e.pageX <= (inputParentOffset.left + inputParentWidth) && e.pageY >= inputParentOffset.top && e.pageY <= (inputParentOffset.top + inputParentHeight)) {
				var x = e.pageX - fileInputParent.offset().left;
				var y = e.pageY - fileInputParent.offset().top;
				
				var inputWidth = fileInput.width();
				var inputHeight = fileInput.height();
				
				fileInput.css({			
					left: x - inputWidth + 50,
					top: y - (inputHeight / 2) - 5	
				});
			}
		});
		
		fileInputParent.bind('mouseleave', function(e) {
			fileInput.css('position', 'static');
			fileInputDummyBtn.removeClass('hover');
		});
		
		fileInput.bind('mousedown', function(e) {
			var input = $(e.currentTarget);
			
			// ensures focus on file input
			setTimeout(function() {
				input.trigger('focus');
			}, 1);
			
			fileInputDummyBtn.removeClass('hover').addClass('active');
		});
		
		fileInput.bind('mouseup', function(e) {
			fileInputDummyBtn.removeClass('hover active');
		});
		
		fileInput.bind('change', function(e) {
			var dummyLbl = fileInput.siblings('.frm-input-dummy-lbl:first');
			var filePath = fileInput.val();
			var filename = filePath.substring(filePath.lastIndexOf('\\') + 1);
					
			if (filename.length > 30) {
				filename = filename.substring(0, 29) + '...';
			}

			dummyLbl.text(filename).removeClass('grey');
		});
	});

	// init form buttons
	$('.frm-btn').each(function(i, element) {
		var button = $(element);
		button.after('<div class="bgd"><label>Verzenden</label></div>').css('text-indent', -10000);
		
		var bgd = button.parent().find('.bgd:first');
		bgd.bind('mousedown', function() {
			bgd.addClass('active');
			button.addClass('active');
		}).bind('mouseup', function() {
			bgd.removeClass('active');
			button.removeClass('active').trigger('submit');
		}).bind('mouseover', function() {
			bgd.addClass('hover');
			button.addClass('hover');
		}).bind('mouseleave', function() {
			bgd.removeClass('hover active');
			button.removeClass('hover active');
		});
	});
	
	// init numeric input fields
	if ($.fn.numeric) {
		$('.numeric').numeric({
			allow: ' '
		});
	}
	
	// init common
	$('.frm').each(function(i, element) {
		var form = $(element);		
		resetForm(form);
		form.data('valid', false);
	});
	
	// init feedback cycle
	if ($.fn.cycle && $('.feedback-lst').length > 0) {
		$('.feedback-lst').css('overflow', 'hidden').cycle({
			fx : 'fade',
			timeout : 12000,
			containerResize: false,
			cleartype:  true,
			cleartypeNoBg:  true
		});
	}
	
	// init job description, read more links and job application form
	var descriptionMaxHeight = 201;
	$('#jobs .description').each(function(i, element) {
		var description = $(element);
		
		description.data('init-height', description.height()).data('open', false).css({
			height: descriptionMaxHeight,
			overflow: 'hidden'
		});
	}).after('<a class="read-more-link closed" href="#" title="Lees meer"><span></span>Lees meer</a>');
	
	$('#jobs .description-hldr .read-more-link').click(function(e) {
		e.preventDefault();
		
		var link = $(this);		
		var description = link.siblings('.description:first');
		
		if (description.data('open')) {
			// close description
			description.animate({
				height: descriptionMaxHeight
			}, 250).data('open', false);
			
			link.removeClass('opened').addClass('closed').attr('title', 'Lees meer').html('<span></span>Lees meer');
			
		} else {
			// open description
			description.animate({
				height: description.data('init-height')
			}, 250).data('open', true);
			
			link.removeClass('closed').addClass('opened').attr('title', 'Lees minder').html('<span></span>Lees minder');	
		}
	});
	
	$('.apply-for-job-btn').bind('click', function(e) {
		e.preventDefault();
		
		var button = $(e.currentTarget);
		var currentJob = button.closest('.description-hldr').find('.title:first').text();
		
		$('#job-application-frm-job').val(currentJob);
		$('#selected-job-title').text(currentJob);
		$('#job-application-frm-hldr').slideDown(250);
		$('#job-application-sub-page').css('padding-bottom', 85);

		// scroll to job-application-frm-hldr
		$(getScrollElement()).animate({ scrollTop: $("#job-application-frm-hldr").offset().top }, 500);
		
		// focus first field
		var form = $('#job-application-frm');
		var firstInput = form.find('input[type!=submit]:visible:first');
		var firstTextArea = form.find('textarea:visible:first');
		var firstField = (firstInput.length > 0) ? firstInput : firstTextArea;
		
		$('#tube_solliciteer_split').show();
		$('#tube_solliciteer_no_split').hide();
		
		if (firstField.length > 0) {
			// focus first input field or textarea
			setTimeout(function() {
				firstField.focus();
			}, 250);
		}
	});
	
	$('#job-application-frm-hldr').slideUp();
});
