window.onload = function(){
	
	// create preview
	var input_area = document.getElementById('tekst');
	
	input_area.onkeyup = function preview(){
	document.getElementById('preview').innerHTML = '<p>'+input_area.value.replace(/(\n|\r)/g,'<br />').replace(/(<br \/>){2,}/gi,'<'+'/p><p>')+'<'+'/p>';
	}

	
	// create input type="button" to replace type="submit"
	var make_button = document.createElement('input');
  	
  make_button.setAttribute('type', 'button');
	make_button.setAttribute('id', 'verzenden');
	make_button.setAttribute('value', 'Verzenden');
	make_button.style.width='80px';
	make_button.style.marginTop='0';
	make_button.style.marginBottom='50px';
	make_button.style.marginLeft='220px';
	
	var find_button = document.getElementById('verzend');
	find_button.style.display='none';
 
  document.reactie.insertBefore(make_button,find_button);
	
	
	// validate input	
	var find_naam = document.getElementById('naam');
	var find_bericht = document.getElementById('tekst');
	var find_email = document.getElementById('email');
	var find_website = document.getElementById('website');

	find_naam.onfocus = function(){
		if(find_naam.value == 'naam, verplicht veld'){
			find_naam.value = '';
			}														
		}
		
	find_naam.onblur = function(){
		if(find_naam.value == ''){
			find_naam.value = 'naam, verplicht veld';
			}														
		}
		
	find_naam.onchange = function(){
		var make_par = document.createElement('p');
		var warning_text = document.createTextNode('Je bent vergeten je naam in te vullen.');	
		make_par.appendChild(warning_text);	
		if (find_naam.previousSibling.nodeType == 1 && (find_naam.value != ''  || find_naam.value == 'naam, verplicht veld')){
			find_naam.previousSibling.style.display='none';			
			}
			else if (find_naam.previousSibling.nodeType == 1 && find_naam.value == '' && find_naam.value != 'naam, verplicht veld'){
				find_naam.previousSibling.style.display='block';
				}													
		}
		
	find_email.onfocus = function(){
		if(find_email.value == 'e-mailadres, niet verplicht'){
			find_email.value = '';
			}														
		}
		
	find_email.onblur = function(){
		if(find_email.value == ''){
			find_email.value = 'e-mailadres, niet verplicht';
			}														
		}
		
	find_website.onfocus = function(){
		if(find_website.value == 'website, niet verplicht'){
			find_website.value = 'http://';
			}														
		}
		
	find_website.onblur = function(){
		if(find_website.value == '' || find_website.value == 'http://'){
			find_website.value = 'website, niet verplicht';
			}														
		}

	find_bericht.onfocus = function(){
		if(find_bericht.value == 'bericht, verplicht veld'){
			find_bericht.value = '';
			}														
		}
		
	find_bericht.onblur = function(){
		if(find_bericht.value == ''){
			find_bericht.value = 'bericht, verplicht veld';
			}														
		}
		
	find_bericht.onchange = function(){
		var make_par = document.createElement('p');
		var warning_text = document.createTextNode('Je moet wel even een berichtje schrijven.');	
		make_par.appendChild(warning_text);	
		if (find_bericht.previousSibling.nodeType == 1 && (find_bericht.value != ''  || find_bericht.value == 'bericht, verplicht veld')){
			find_bericht.previousSibling.style.display='none';			
			}
			else if (find_bericht.previousSibling.nodeType == 1 && find_bericht.value == '' && find_bericht.value != 'bericht, verplicht veld'){
				find_bericht.previousSibling.style.display='block';
				}													
		}
		
		document.reactie.verzenden.onclick = function(){
			var make_par_naam = document.createElement('p');
			var warning_text_naam = document.createTextNode('Je bent vergeten je naam in te vullen.');	
			make_par_naam.setAttribute('class','error');
			make_par_naam.appendChild(warning_text_naam);	
				if(find_naam.previousSibling.nodeType != 1 && (find_naam.value == '' || find_naam.value == 'naam, verplicht veld')) {
				document.reactie.insertBefore(make_par_naam,find_naam);
				}
				else if (find_naam.previousSibling.nodeType == 1 && (find_naam.value != '' && find_naam.value != 'naam, verplicht veld')){
					find_naam.previousSibling.style.display='none';
					}
					else if (find_naam.previousSibling.nodeType == 1 && (find_naam.value == '' || find_naam.value == 'naam, verplicht veld')){
						find_naam.previousSibling.style.display='block';
						}

			var make_par_bericht = document.createElement('p');
			var warning_text_bericht = document.createTextNode('Je moet wel even een berichtje schrijven.');	
			make_par_bericht.setAttribute('class','error');
			make_par_bericht.appendChild(warning_text_bericht);	
						
				if(find_bericht.previousSibling.nodeType != 1 && (find_bericht.value == '' || find_bericht.value == 'bericht, verplicht veld')) {
				document.reactie.insertBefore(make_par_bericht,find_bericht);
				}
				else if (find_bericht.previousSibling.nodeType == 1 && (find_bericht.value != '' && find_bericht.value != 'bericht, verplicht veld')){
					find_bericht.previousSibling.style.display='none';
					}
					else if (find_bericht.previousSibling.nodeType == 1 && (find_bericht.value == '' || find_bericht.value == 'bericht, verplicht veld')){
						find_bericht.previousSibling.style.display='block';
						}
						
					if(find_naam.value != '' && find_naam.value != 'naam, verplicht veld' && find_bericht.value != '' && find_bericht.value != 'bericht, verplicht veld'){
						document.reactie.submit();
						}
				}
}