function openPage(pageName, elmnt) {
            var i, tabcontent, tablinks;
            // Get all elements with class="tabcontent" and hide them
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
             //Get all elements with class="tablinks" and remove the class "active"
            tablinks = document.getElementsByClassName("tablink");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].style.backgroundColor = "";
            }
            // Show the specific tab content
            document.getElementById(pageName).style.display = "block";
             // Add the specific color to the button used to open the tab content
            elmnt.style.backgroundColor = "white";
        }

      // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();





var formulars = [ [{ formularName: "melisa"}] ];
var formularForHide = "null";
var elementNum = 1, btnId = 0; // elementNum is the order number of Element, and btnId is for setting add button


 function searchFormular(fName){
	if ( document.getElementById('Administration').getElementsByTagName('div').length != 0 ) {
		hideFormular(formularForHide);
	}
	for (var j = 0; j < formulars.length; j++){
		if ( fName == formulars[j][0].formularName ){
			if ( formularForHide != "null") {
				//hideFormular(formularForHide);
				//fName.parentNode.getElementsByName
				document.getElementById('Administration').getElementsByName(formularForHide)[0].style.display = "none";
			}
			/* displaysFormular(fName);
			return;
			 */
			document.getElementById('Administration').getElementsByName(formularForHide)[0].style.display = "block";
			formularForHide = fName;
			return;
		}
	}
	// make a template for new formular
	/* elementNum = 1;
	btnId = 0;
 	var d = document.getElementById('Administration');
	document.getElementById('saveButton').style.display = "block";
	addElement(); */
	makeFormular(fName);
 }

function displaysFormular(fName){
	var formElements = document.getElementsByClassName(fName);
	var max = formElements.length;
	for (var i = 0; i < max; i++ ){
		formElements[i].style.display = "block";
	}
	//document.getElementsByTagName('div')[1].getElementsByTagName('button')[0].style.visibility = "";
	var d = document.getElementById('Administration');
	document.getElementById('saveButton').style.display = "block";
	formularForHide = fName;
 }

 // This function make a template for new formular
function makeFormular(fName){
	elementNum = 1;
	btnId = 0;
	var tab = document.getElementById('Administration');
	var div = document.createElement('div');
	div.setAttribute("class",fName);
	div.style.display = "block";
	//tab.insertBefore(div,document.getElementById("saveButton"));
	tab.appendChild(div);

	var saveBtn = document.createElement('button');
	saveBtn.setAttribute("id",'saveButton');
	saveBtn.setAttribute("onclick",'saveFormular(this)');
	saveBtn.innerHTML = "Save";
	div.appendChild(saveBtn);
	//saveBtn.style.display = "block";
	addElement(div);
}


// Adds an element to the document
function addElement(parent) {
	var fName = document.getElementById('formularName').value;
    var div = document.createElement('div');
	//var parent = document.getElementById('Administration').getElementByName(fName);
	//div.setAttribute("class",fName);
	div.innerHTML = "Element " + elementNum + ": ";
	parent.insertBefore(div,parent.getElementsByTagName('button')[0]);
	//div.style.display = "block";

	var input = document.createElement('input');
	div.appendChild(input);

	var slc1 = addSelect(div,'firstSelect',['Textbox','Checkbox','Radio buttons']);
	slc1.setAttribute("onchange",'onChange(this)');
	var adSlc = addSelect(div,'additionalSelect',['',2,3,4,5,6,7]);
	adSlc.setAttribute("onchange",'onChange(this)');
	adSlc.style.visibility = "hidden";
	var slc2 = addSelect(div,'secondSelect',['Mandatory','None','Numeric']);

	var butn = document.createElement('button');
	butn.innerHTML = "Add";
	console.log(btnId);
	if ( btnId != 0 ){
		document.getElementById(btnId).style.visibility = "hidden";
	}
	btnId = "btnId" + elementNum;
	console.log(btnId);
	butn.setAttribute("id",btnId);
	butn.setAttribute("onclick",'addElement(this.parentNode)');

	div.appendChild(butn);
	elementNum += 1;
}

// This function create select element
function addSelect(parent,id,options){
	var select = document.createElement('select');
	for ( var j = 0; j < options.length; j++){
		var opt = document.createElement('option');
		opt.value = j + 1;
		opt.innerHTML = options[j];
		select.appendChild(opt);
	}
	select.setAttribute("id",id);
	parent.appendChild(select);
	return select;
}

// This function show/hide third select
//  and it adds corresponding number of inputs
function onChange(temp){

	if (  temp.id == "firstSelect"  ){
		if ( temp.selectedIndex == 2 ){							// show additionalSelect
			temp.nextElementSibling.style.visibility = "";
			temp.nextElementSibling.selectedIndex = 0;
	     }
		else {													// hide additionalSelect and inputs
			temp.nextElementSibling.style.visibility = "hidden";
			var max = temp.parentNode.getElementsByTagName('p').length;
			for (var k = 0; k < max; k++){
				 var last = temp.parentNode.lastChild;
				 temp.parentNode.removeChild(last);
		    }
	    }
	}

	if ( temp.id == "additionalSelect"){			// add corresponding number of inputs
		var num = temp.selectedIndex + 1;
		var div = temp.parentNode;
		var numbOfInputs = div.getElementsByTagName("p").length;
		if ( num != 1 ){
														// if current number of inputs is bigger than previous
			if ( num > numbOfInputs ){ 					// add remainder inputs
				for (var k = numbOfInputs; k < num; k++){
					var p = document.createElement('p');

					p.setAttribute("value",'');
					var input = document.createElement('input');
					p.appendChild(input);
					div.appendChild(p);
				}

			}											// if previous number of inputs is bigger than current
			else {										// remove remainder inputs
				for (var k = num; k < numbOfInputs; k++){
					var last = div.lastChild;
					div.removeChild(last);
				}

			}
		}
		else {  		 								// if we select one input, than remove all inputs
			 for (var k = 0; k < numbOfInputs; k++){
					var last = div.lastChild;
					div.removeChild(last);
				}
		}
	}
}


// this function create array formular, where we store all inputs of client
function saveFormular(saveBtn){
	var newLabel;
	var fName = document.getElementById('formularName').value;
	var parent = saveBtn.parentNode;
	var labels = parent.getElementsByTagName('div');
	var formular = [ { formularName: fName} ];
	for (var i=0; i < labels.length ; i++){
		var name = labels[i].getElementsByTagName('input')[0].value;    // name of label
		var s = labels[i].getElementsByTagName('select');
		var type = s[0].value;											// input type of label
		if ( type == '3'){
			var rBtn = []; 												// additional inputs for radio buttons
			nameRBtn = labels[i].getElementsByTagName('p');
			for (var j = 0; j < nameRBtn.length; j++){
				rBtn.push(nameRBtn[j].getElementsByTagName('input')[0].value);
			}
		}
		else {
			var rBtn = 'null' ;
		}
		var req = s[s.length-1].value;									// required input
		newLabel = { labName: name, inputType: type, radBtn: rBtn, requiredInput: req};
		formular.push(newLabel);
	}
	formulars.push(formular); 		// store formular in one array named formulars

	//hideFormular(fName);
	parent.style.display = "none";
	console.log(parent);
	//saveBtn.style.display = "none";
	alert('Saved');
}

function hideFormular(fName){
	var formElements = document.getElementById('Administration').getElementsByClassName(fName);
	var max = formElements.length;
	for (var i = 0; i < max; i++ ){
		formElements[i].style.display = "none";
	}
	formularForHide = "null";
}