text: /**
   * 
   */
  
  // global counter
  var counter = 1;
  
  var questions = { "questions" : []};
  
  function showSavedQuestions(){
  	var div = document.getElementById('questionListSaved');
  	div.innerHTML = "";
  	for (var i = 0; i < questions["questions"].length; i++) {
  		var panel = createQuestion(questions["questions"][i]);
  		questions["questions"][i].index = i+1;
  		panel.removeAttribute('class');
  		panel.setAttribute('class','panel panel-success')
  		panel.id = counter;
  		div.appendChild(panel);
  	}
  }
  
  function createDiv(className) {
  	var div = document.createElement('div');
  	div.setAttribute('class',className);
  	return div;
  }
  
  function createTitle(data, className) {
  	var h1 = document.createElement('h1');
  	h1.setAttribute('class', 'panel-title');
  	var index = (data == undefined) ? counter : data.index;
  	h1.innerHTML = "Vraag " + index;
  	return h1;
  }
  
  
  function createQuestion(data) {	
  	//var panelClass = saved ? "panel panel-success" : "panel panel-primary"; 
  	var panel = createDiv('panel panel-primary');
  	panel.id = counter; 
  	
  	var inputType = createInputElement('text','hide');
  	inputType.id = "vraag" + counter + "type";
  	if (data == undefined) {
  		inputType.value = document.getElementById('questionSelector').value;
  	}
  	panel.appendChild(inputType);
  			
  	var panelHeader = createDiv('panel-heading');
  	var panelTitle = createTitle(data, 'panel-title');
  	var type = (data == undefined) ? inputType.value : data.type; //data.type = input or form, it needs to be questionType
  	
  	panelHeader.appendChild(panelTitle);
  	
  	var questionType = createDiv('hide');
  	questionType.innerHTML = document.getElementById('questionSelector').value;
  	
  	var panelBody = createDiv('panel-body');
  	
  	var input =	(type == 'multipleSelect' || type == 'multipleChoice')  ? createInput(data, false) : createInput(data, true);
  	
  	panelBody.appendChild(input);
  	panel.appendChild(panelHeader);
  	panel.appendChild(panelBody)
  	
  	return panel;
  }
  
  function addQuestion(){
  	var div = createQuestion();
  	var resultArea = document.getElementById('questionList');
  	resultArea.innerHTML = "";
  	resultArea.appendChild(div);
  }
  
  function createInputElement(type, className){
  	var input = document.createElement('input');
  	input.type = type;
  	input.setAttribute('class', className);
  	return input;
  }
  
  function createInput(data, isNormal) {
  	
  	var sVraag = 'vraag';
  	var sType = 'type';
  	var sValue = 'value';
  	
  	var div = createDiv('row');
  	
  	//attachment
  	var labelAttachment = document.createElement('label');
  	labelAttachment.setAttribute('class','control-label col-sm-1');
  	labelAttachment.innerHTML = "Illustratie:";
  	
  	var inputAttachmentDiv = document.createElement('div');
  	inputAttachmentDiv.setAttribute('class','col-sm-7');
  	
  	var inputAttachment = createInputElement('file','file');
  	inputAttachment.accept = "file_extension|audio/*|video/*|image/*|media_type";
  	//if (data !== undefined) inputAttachment.value = data.attachment.value;
  	inputAttachmentDiv.appendChild(inputAttachment);
  	//attachment
  	
  	//question
  	var labelQuestion = document.createElement('label');
  	labelQuestion.setAttribute('class','control-label col-sm-1');
  	labelQuestion.innerHTML = "Vraag:";
  	
  	var inputDiv = createDiv('col-sm-5');
  	
  	var input = createInputElement('text','form-control');
  	input.placeholder = "Vul hier de vraag in";
  	if (data !== undefined) input.value = data.value;
  	//question
  	
  	var buttonDiv = createDiv('col-sm-4');
  	
  	var buttonAdd = document.createElement('button');
  	buttonAdd.setAttribute('class','btn btn-success col-sm-5');
  	buttonAdd.type = "button";
  	if (data !== undefined) {
  		buttonAdd.onclick = changeQuestion;
  		buttonAdd.innerHTML = "Sla wijziging op";
  	} else {
  		buttonAdd.onclick = saveQuestion;
  		buttonAdd.innerHTML = "Sla vraag op";
  	}
  	
  	var buttonDelete = document.createElement('button');
  	buttonDelete.setAttribute('class','btn btn-danger col-sm-5 col-sm-offset-2');
  	buttonDelete.type = "button";
  	buttonDelete.innerHTML = "Verwijder vraag"
  	buttonDelete.onclick = deleteQuestion;
  	
  	buttonDiv.appendChild(buttonAdd);
  	buttonDiv.appendChild(buttonDelete);
  	
  	div.appendChild(labelAttachment);
  	div.appendChild(inputAttachmentDiv);
  	
  	div.appendChild(buttonDiv);
  	
  	div.appendChild(labelQuestion);
  	div.appendChild(inputDiv);
  	inputDiv.appendChild(input);
  	
  	
  	
  	if (isNormal) {
  		input.id = sVraag+counter+sValue;
  		
  		return div;
  	} else {
  		var form = document.createElement('form');
  		form.id = sVraag+counter+sValue
  		form.setAttribute('class','form-horizontal');
  		form.action = "";
  		
  		form.appendChild(div);
  		
  		var optionDiv = document.createElement('div');
  		form.appendChild(optionDiv);
  		
  		var button = document.createElement('button');
  		button.type = "button";
  		button.onclick = addOption;
  		button.innerHTML = "Voeg optie toe";
  		button.setAttribute('class','btn btn-success');
  		
  		form.appendChild(button);
  		
  		if (data !== undefined) {
  			for (var i = 0; i < data.options.length; i++){
  				addOption(button, data.options[i]);
  			}
  		}
  		
  		return form;
  		
  	}
  	
  }
  
  function addOption(optionBtn, value) {
  	
  	var row = createDiv('row')
  	
  	var label = document.createElement('label');
  	label.setAttribute('class', 'control-label col-sm-2');
  	label.innerHTML = "Optie:";
  	
  	var inputDiv = createDiv('col-sm-3');
  	
  	var input = createInputElement('text','form-control');
  	input.placeholder = "Vul hier je optie in";
  	row.appendChild(document.createElement('br'));
  	
  	row.appendChild(label);
  	row.appendChild(inputDiv);
  	inputDiv.appendChild(input);
  	
  	var form;
  	if (optionBtn.target == undefined) {
  		form = optionBtn.parentNode; //form
  		input.value = value;
  	} else {
  		form = optionBtn.target.parentNode;
  	}
  	
  	form.children[1].appendChild(row);
  }
  
  function createSurvey() {
  	$.ajax({
  		url: "http://localhost:8080/NTR_application/rest/Research/survey",
  		type: "PUT",
  		data: questions,
  		dataType: "json",
  		contentType: "application/json",
  		success: function(){
  			alert("survey toegevoegd!");
  		},
  		failure: function(){
  			alert("Er ging iets mis...");
  		}
  	});
  }
  
  function saveQuestion(){
  	var vraagid = 'vraag' + counter + 'value';
  	var element = document.getElementById(vraagid);
  	var type = element.nodeName.toLowerCase();
  	var obj = {};
  	if (type === "input"){ //open, photo, image, audio questions
  		
  		obj["value"] = element.value;
  	
  	} else if (type == "form") { //multiple select/choice 
  		var length = element.elements.length -1; //last element is add another option
  		var arr = [];
  		for (var x = 4; x < length; x++){  //start at 4th element to skip question and buttons
  			var inputText = element.elements[x].value;
  			arr.push(inputText);
  		}
  		obj["options"] = arr;
  		obj["value"] = element.elements[3].value;
  		
  	}
  	var id = "vraag" + counter + "type";
  	obj["type"] = document.getElementById(id).value;
  	obj["index"] = counter;
  	
  	questions["questions"][counter-1] = obj;
  	showSavedQuestions();
  	document.getElementById('questionList').innerHTML = "";
  	counter++;
  }
  
  function deleteQuestion(element){
  	var index = element.target.parentNode.parentNode.parentNode.parentNode.id - 1; //id of the div minus 1 for index for JSON obj
  	questions["questions"].splice(index, 1);
  	counter--;	
  	showSavedQuestions();
  }
  
  function changeQuestion(element){
  	//TODO: allow changing the element.
  }