var nameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
  var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
  var messageRegex = new RegExp(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/gim);
  var telRegex =  /^((\+|00)\d{2}(\s*|-)?0?|0)(\d\s*-?(\s*\d\s*){8}|\d{2}\s*-?(\s*\d\s*){7}|\d{3}\s*-?(\s*\d\s*){6}|\d{4}\s*-?(\s*\d\s*){5}|\d{5}\s*-?(\s*\d\s*){4})$/;
  var digits  = /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/;
  var postcodeRegExp = /^[1-9][0-9]{3}\s?[a-zA-Z]{2}$/;
  
  
	function showVariant(id,enkel,gevouwen){
		var messageList = $("#varianten");
		
		if(gevouwen){
		 $("#variant").html('2');
		 $("#srt").html('Klik hier voor <a href="javascript:;" onclick=\'showVariant("'+id+'",1,0);return false\'>enkel kaart</a>')
		}else{ 
		$("#variant").html('1');
		$("#srt").html('Klik hier voor <a href="javascript:;" onclick=\'showVariant("'+id+'",0,1);return false\'>gevouwen kaart</a>');
		}
		
		
		
		$.ajax({
			type: "GET", url: "pages/showVariant.php", data: "&id=" + id+"&enkel="+enkel+"&gevouwen="+gevouwen,
  			complete: function(data){
				messageList.html(data.responseText);
				messageList.fadeIn(2000);
				initLytebox();
			}
		});
	}
	
function postAanvraag(){


 var options = { 
 					target: '#outputKaart', 
 					 beforeSubmit:  showRequest,
					success:  showResponse  
				}; 

  
    $('form#aanvraag').submit(function() { 
          $(this).ajaxSubmit(options); 
        return false; 
    });
}

 
 function postVoorbeeldpakket(){
 var options = { 
 					target: '#outputKaart', 			
 					 beforeSubmit:  showRequest_voorbeeld,
 					 success:  showResponse  
				}; 

    $('form#voorbeeld').submit(function() { 
        $(this).ajaxSubmit(options); 
        return false; 
    });
}

function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
 
		 var id = $('#id').fieldValue(); 
		 var uitz = $('#uitlz').fieldValue();   
  	 var ttKaart = validateForm(2,uitz);
  		
    if(ttKaart == false)
       return false;
            
   $("#outputKaart").html("Formulier wordt verzonden....<br > <img src='images/loading.gif'>");
 
    return true; 
}

function showRequest_voorbeeld(formData, jqForm, options) { 
    var queryString = $.param(formData); 
  	 var ttKaart = validateForm(0,0);
  		
    if(ttKaart == false)
       return false;
            
   $("#outputKaart").html("Formulier wordt verzonden....<br > <img src='images/loading.gif'>");
 
    return true; 
}

function showResponse(responseText, statusText, xhr, $form)  { 
 
    $("#showForm").hide("slow");
      $("#outputKaart").html(responseText);
}  

function validateForm(srt,uitz) {

	var form 				= document.forms.f;
	var roepnaam  	= form.roepnaam.value;
	var adres 	  	= form.adres.value;
 	var postcode  	= form.postcode.value;
 	var telefoon		= form.telefoon.value;
 	var email				= form.email.value;
 	var woonplaats  = form.woonplaats.value;
 
 	if(srt == 2){
 	var uit_datum 	= form.uit_datum.value;
	var geslacht	 	= radioB(form.geslacht);
 	var aantal  		= form.aantal.value;
 	if(uitz == 2)
 	var bestand			= form.bestand.value;
 	
 	
	if(geslacht == null) {
    inlineMsg('jongen','Dit veld dient ingevuld te zijn!',2);
    return false;
  } 	  

	if(uit_datum == "") {
    inlineMsg('uit_datum','Dit veld dient ingevuld te zijn!',2);
    return false;
  }
}


	 if(roepnaam == "") {
    inlineMsg('roepnaam','Dit veld dient ingevuld te zijn!',2);
    return false;
  }
   if(adres == "") {
    inlineMsg('adres','Dit veld dient ingevuld te zijn!',2);
    return false;
  }
	  
	if(postcode == "") {
    inlineMsg('postcode','Dit veld dient ingevuld te zijn!',2);
    return false;
  }

	if(woonplaats == "") {
    inlineMsg('woonplaats','Dit veld dient ingevuld te zijn!',2);
    return false;
  }
  
 if(telefoon == "") {
    inlineMsg('telefoon','Dit veld dient ingevuld te zijn!',2);
    return false;
  }
   
	 if(email == "") {
    inlineMsg('email','Dit veld dient ingevuld te zijn!',2);
    return false;
  }
  
  if(!email.match(emailRegex)) {
    inlineMsg('email','E-mail is niet correct ingevuld!',2);
    return false;
  }
	
 	if(srt == 2){
 	 if(aantal == "") {
    inlineMsg('aantal','Dit veld dient ingevuld te zijn!',2);
    return false;
  }
	
	if(uitz == 2){
   if(bestand == "") {
    inlineMsg('bestand','Dit veld dient ingevuld te zijn!',2);
    return false;
  	}
  }
 }
    
	return true;
}



// START OF MESSAGE SCRIPT //

var MSGTIMER = 20;
var MSGSPEED = 5;
var MSGOFFSET = 3;
var MSGHIDE = 3;

// build out the divs, set attributes and call the fade function //
function inlineMsg(target,string,autohide) {
  var msg;
  var msgcontent;
  if(!document.getElementById('msg')) {
    msg = document.createElement('div');
    msg.id = 'msg';
    msgcontent = document.createElement('div');
    msgcontent.id = 'msgcontent';
    document.body.appendChild(msg);
    msg.appendChild(msgcontent);
    msg.style.filter = 'alpha(opacity=0)';
    msg.style.opacity = 0;
    msg.alpha = 0;
  } else {
    msg = document.getElementById('msg');
    msgcontent = document.getElementById('msgcontent');
  }
  msgcontent.innerHTML = string;
  msg.style.display = 'block';
  var msgheight = msg.offsetHeight;
  var targetdiv = document.getElementById(target);
  targetdiv.focus();
  var targetheight = targetdiv.offsetHeight;
  var targetwidth = targetdiv.offsetWidth;
  var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
  var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
  msg.style.top = topposition + 'px';
  msg.style.left = leftposition + 'px';
  clearInterval(msg.timer);
  msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
  if(!autohide) {
    autohide = MSGHIDE;  
  }
  window.setTimeout("hideMsg()", (autohide * 1000));
}

// hide the form alert //
function hideMsg(msg) {
  var msg = document.getElementById('msg');
  if(!msg.timer) {
    msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
  }
}

// face the message box //
function fadeMsg(flag) {
  if(flag == null) {
    flag = 1;
  }
  var msg = document.getElementById('msg');
  var value;
  if(flag == 1) {
    value = msg.alpha + MSGSPEED;
  } else {
    value = msg.alpha - MSGSPEED;
  }
  msg.alpha = value;
  msg.style.opacity = (value / 100);
  msg.style.filter = 'alpha(opacity=' + value + ')';
  if(value >= 99) {
    clearInterval(msg.timer);
    msg.timer = null;
  } else if(value <= 1) {
    msg.style.display = "none";
    clearInterval(msg.timer);
  }
}

// calculate the position of the element in relation to the left of the browser //
function leftPosition(target) {
  var left = 0;
  if(target.offsetParent) {
    while(1) {
      left += target.offsetLeft;
      if(!target.offsetParent) {
        break;
      }
      target = target.offsetParent;
    }
  } else if(target.x) {
    left += target.x;
  }
  return left;
}

// calculate the position of the element in relation to the top of the browser window //
function topPosition(target) {
  var top = 0;
  if(target.offsetParent) {
    while(1) {
      top += target.offsetTop;
      if(!target.offsetParent) {
        break;
      }
      target = target.offsetParent;
    }
  } else if(target.y) {
    top += target.y;
  }
  return top;
}

function radioB(btn) {
var cnt = -1;
for (var i=btn.length-1; i > -1; i--) {

if (btn[i].checked) 
	{
	cnt = i; i = -1;
	}
}
if (cnt > -1) 
	return btn[cnt].value;
else 
	return null;
}