// JavaScript Document
// provides cross-browser focusin and focusout events
// IE has native support, in other browsers, use event caputuring (neither bubbles)

// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target 

// provides triggerEvent(type: String, target: Element) to trigger delegated events
;(function($) {
	$.each({
		focus: 'focusin',
		blur: 'focusout'	
	}, function( original, fix ){
		$.event.special[fix] = {
			setup:function() {
				if ( $.browser.msie ) return false;
				this.addEventListener( original, $.event.special[fix].handler, true );
			},
			teardown:function() {
				if ( $.browser.msie ) return false;
				this.removeEventListener( original,
				$.event.special[fix].handler, true );
			},
			handler: function(e) {
				arguments[0] = $.event.fix(e);
				arguments[0].type = fix;
				return $.event.handle.apply(this, arguments);
			}
		};
	});
})(jQuery);

$(document).ready(function()
{
	var emailRegExp = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
	$("#frmPeople").submit(function()
	{
		var emailValue = document.getElementById('txtEmail').value;
		var flag = 0;
		if($("#peopleName").val()=='')
		{
			$("#spanPeopleValid").remove();
			$("#spanPeopleName").remove();
			$("#peopleName").after("<span id='spanPeopleName'>&nbsp;<img src='Images/unchecked.gif' title='Controleer dit veld'>&nbsp;<label class='lblClassError'>Geef uw naam op</label></span>");
			flag = 1;
		}
		else
		{
			$("#spanPeopleValid").remove();
			$("#spanPeopleName").remove();
			$("#peopleName").after("<span id='spanPeopleValid'>&nbsp;<img src='Images/check.gif' /></span>");
		}
		if($("#peopleCity").val()=='')
		{
			$("#spanCityValid").remove();
			$("#spanErrorCity").remove();
			$("#peopleCity").after("<span id='spanErrorCity'>&nbsp;<img src='Images/unchecked.gif' title='Controleer dit veld'>&nbsp;<label class='lblClassError'>Geef uw woonplaats op</label></span>");
			flag = 1;
		}
		else
		{
			$("#spanCityValid").remove();
			$("#spanErrorCity").remove();
			$("#peopleCity").after("<span id='spanCityValid'>&nbsp;<img src='Images/check.gif' /></span>");
		}
		if(emailValue=='')
		{
			$("#spanEmailValid").remove();
			$("#spanEmailError").remove();
			$("#txtEmail").after("<span id='spanEmailError'>&nbsp;<img src='images/unchecked.gif' title='Controleer dit veld' /><label class='lblClassError'>Geef uw e-mailadres op</label></span>");
			flag = 1;
		}
		else if(!emailValue.match(emailRegExp))
		{
			$("#spanEmailValid").remove();
			$("#spanEmailError").remove();
			$("#txtEmail").after("<span id='spanEmailError'>&nbsp;<img src='images/unchecked.gif' title='Controleer dit veld' /><label class='lblClassError'>Geef een geldig e-mailadres op, bijvoorbeeld abc@mail.nl</label></span>");
			flag = 1;
		}
		else if(document.getElementById('hdnEmailExist').value==1)
		{
			$("#spanEmailValid").remove();
			$("#spanEmailError").remove();
			$("#txtEmail").after("<span id='spanEmailError'>&nbsp;<img src='images/unchecked.gif' title='Controleer dit veld' /><label class='lblClassError'>U hebt de petitie al ondertekend; uw e-mailadres staat al op de lijst</label></span>");
			flag = 1;
		}
		else
		{
			$("#spanEmailValid").remove();
			$("#spanEmailError").remove();
			$("#txtEmail").after("<span id='spanEmailValid'>&nbsp;<img src='images/check.gif' /></span>");
		}
		if($("#txtAreaRemarks").val()!='')
		{
			if($("#txtAreaRemarks").length>500)
			{
				$("#spanTextAreaValid").remove();
				$("#spanErrorTextArea").remove();
				$("#txtAreaRemarks").after("<span id='spanErrorTextArea'>&nbsp;<img src='Images/unchecked.gif' title='Controleer dit veld'>&nbsp;<label class='lblClassError'>Uw opmerking mag niet langer zijn dan 500 karakters.</label></span>");
				flag = 1;
			}
		}
		else
		{
			$("#spanTextAreaValid").remove();
			$("#spanErrorTextArea").remove();
			//$("#txtAreaRemarks").after("<span id='spanTextAreaValid'>&nbsp;<img src='Images/check.gif' /></span>");
		}
		if(flag==1)
			return false;
	});
	$("#txtEmail").blur(function(event)
	{
		var emailValue = document.getElementById('txtEmail').value;
		if(emailValue!='')
		{
			if(emailValue=='')
			{
				$("#spanEmailValid").remove();
				$("#spanEmailError").remove();
				$("#txtEmail").after("<span id='spanEmailError'>&nbsp;<img src='images/unchecked.gif' title='Controleer dit veld' /><label class='lblClassError'>Geef uw e-mailadres op</label></span>");
			}
			else if(!emailValue.match(emailRegExp))
			{
				$("#spanEmailValid").remove();
				$("#spanEmailError").remove();
				$("#txtEmail").after("<span id='spanEmailError'>&nbsp;<img src='images/unchecked.gif' title='Controleer dit veld' /><label class='lblClassError'>Geef een geldig e-mailadres op, bijvoorbeeld abc@mail.nl</label></span>");
			}
			else if(emailValue.match(emailRegExp))
			{
				$("#spanEmailError").remove();
				$("#spanEmailValid").remove();
				$("#spanEmailExist").html("");
				$("#spanLoadGif").html("");
				$("#txtEmail").after("<span id='spanLoadGif'>&nbsp;<img src='images/loading.gif' style='width:14px;height:14px' /></span>");
				var eml = $("#txtEmail").val();
				$.get('emailExist.cfm',{email:eml},function(data,status) 
				{
					$("#spanEmailExist").html(data);
					$("#spanLoadGif").remove();
				});
			}
			else
			{
				$("#spanEmailValid").remove();
				$("#spanEmailError").remove();
				$("#txtEmail").after("<span id='spanEmailValid'>&nbsp;<img src='images/check.gif' /></span>");
			}
		}
		else
		{
			$("#spanEmailValid").remove();
			$("#spanEmailError").remove();
		}
	});
	$("#peopleName").keyup(function(event)
	{
		var key = event.charCode ? event.charCode : event.keyCode;
		if(key!=9 && key!=16 && key!=17)
		{
			if($("#peopleName").val()=='')
			{
				$("#spanPeopleValid").remove();
				$("#spanPeopleName").remove();
				$("#peopleName").after("<span id='spanPeopleName'>&nbsp;<img src='Images/unchecked.gif' title='Controleer dit veld'>&nbsp;<label class='lblClassError'>Geef uw naam op</label></span>");
			}
			else
			{
				$("#spanPeopleValid").remove();
				$("#spanPeopleName").remove();
				$("#peopleName").after("<span id='spanPeopleValid'>&nbsp;<img src='Images/check.gif' /></span>");
			}
		}
	});
	$("#peopleCity").keyup(function(event)
	{
		var key = event.charCode ? event.charCode : event.keyCode;
		if(key!=9 && key!=16 && key!=17)
		{
			if($("#peopleCity").val()=='')
			{
				$("#spanCityValid").remove();
				$("#spanErrorCity").remove();
				$("#peopleCity").after("<span id='spanErrorCity'>&nbsp;<img src='Images/unchecked.gif' title='Controleer dit veld'>&nbsp;<label class='lblClassError'>Geef uw woonplaats op</label></span>");
			}
			else
			{
				$("#spanCityValid").remove();
				$("#spanErrorCity").remove();
				$("#peopleCity").after("<span id='spanCityValid'>&nbsp;<img src='Images/check.gif' /></span>");
			}
		}
	});
	$("#txtAreaRemarks").keyup(function(event)
	{
		var key = event.charCode ? event.charCode : event.keyCode;
		if($("#txtAreaRemarks").val()!='' && (key!=9 && key!=16 && key!=17))
		{
			if($("#txtAreaRemarks").length>500)
			{
				$("#spanTextAreaValid").remove();
				$("#spanErrorTextArea").remove();
				$("#txtAreaRemarks").after("<span id='spanErrorTextArea'>&nbsp;<img src='Images/unchecked.gif' title='Controleer dit veld'>&nbsp;<label class='lblClassError'>Uw opmerking mag niet langer zijn dan 500 karakters.</label></span>");
			}
		}
		else
		{
			$("#spanTextAreaValid").remove();
			$("#spanErrorTextArea").remove();
			//$("#txtAreaRemarks").after("<span id='spanTextAreaValid'>&nbsp;<img src='Images/check.gif' /></span>");
		}
	});
});