MeasurementTesting

Sleeping

App Files Files Community

MeasurementTesting / templates /proposed-GUI.html

Marthee

Update templates/proposed-GUI.html

a7246a5 over 2 years ago

raw

history blame

117 kB


	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<link rel="stylesheet" href="https://use.typekit.net/zos0ars.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="static/style.css">
	<meta charset="utf-8">
	<title>ADR Console</title>

	</head>
	<body >
	<div id="all">
	<label id="pleasewait"> Please wait until the pdf is loaded onto the dropbox... </label>
	</div>
	<!--Main tab links-->
	<div class="tab">
	<button class="tablinks" id="pagetitle" onclick="openTab(event, 'home')">ADR Console <i class="fa fa-home" > </i></button>
	<button class="tablinks" id="LegendHist" onclick="openTab(event, 'legends')">Legends History <i class="fa fa-caret-down"></i></button>
	<button class="dropbtn" onclick="userguideclick()"><img id="infoImg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAHz0lEQVR4nNVbW0xVVxC9SAEfNPGRCJICGoWKRkUUNfEVFUnsn0ZjfARfAWmq8UNLfSUmxkLxCzDS6kcrDx8/xkeiaFujJia1ifFDRPyw0Fi0xjeliKi4mnU49+bcfeZwufeefaErmYQczt2zZ/bsPbNn5ng8mgFgAoDNAA4B+BnAnwBaYUer+b/L5rv8TYbn/wYA0QCWAKgG8DfCx2NzLI4Z7emvAJAEoNScsC5w7O8AjPL0FwBIAfA9gLeIHDoAHAaQ3JeCxwLYDaA90GyfPn2KM2fOoKSkBOvXr0dOTg6mT5+OjIwMg/g3n23YsMF45+zZs3j27FlvFPEvgG8AxERa+GwAjT3NrL6+HkVFRZg8eTKioqLAnwVD/M2UKVOwc+dO3L17N5AiGgBkRUr4AgCd0izev3+P6upqZGVlBS1wIJo2bRpqamoMHg7gFtwGIEqX4HEATkmcP378iGPHjmHMmDGuC67S2LFjDUWQpwOOc3u6LfynAH6RuN25cwezZ8/WLrhK8+bN62lrMN6Id1P43yUuR44cQVxcXMSF9xJ5l5WVOSnht7CVgG6z/1Ud+c2bN1i+fHmfCa7SypUrjTkJuBzydgAQJe35V69eYc6cOdqEiY2NRXx8fNC/mzVrFp4/fy4poTZUBWxTR3r58qXhmnSZc0VFBdrb231ny9SpU4MaIzMz01ggAV+F4uc7VbOfO3eutpU/dcruYJqbm4M+Y2gJXiUqLjIrmAivUR1B557nSjshWCvwngkOwVLgiBHd4a0faJq6hCcVFDC2ksEAKJQxKysrpeGKAgmfqsb23Iu6Xd2WLVtE4Z88eYKYmJiQxhw4cKAUJ/Du8FlPCvjB+jajrfnz52sVnsQLkRTirl27NqxxeWYJEWNFT/f5t9Y3Gd7qFt5LvAm2tbUZfOnOeGt0Y9za2lpVAQwYEiUFlFrf+vDhA8aNGxcxBZBo7qNHjw7Z7J3uDoJ1lajCf6Kmr6qqqiIqvE46fpz3Iz888kuvAfhCfUPHldaJoqOjkZycjKSkpJByB4GICRcBuVYF1Fj/w9MzEoJPmjTJsDRr9NbY2Ijx48e7zkvwCD9ZY34/82cmR6fgEydOxIULFxzv9Eyfuc1z925bePPIq4AM9T9cGR2C07x37dqFzk4xoeTDtWvXXOfNLS3gcyqg0PqELmjAgAGuT2DQoEHGyvYG5eXlrvOnTEKitcBjVmF8YEbWbeaDBw/GlStX/DjT/Lu6ukQFrFixQosFnj9/XmVV5jGTBj4UFxe7ynTIkCG4evWq35X64MGDxon/+vVrm/D02cOGDdOigNJSv1CHqKMCmq1P1q1b56rZX79+3Rj33r17KCwsNBTiDX8l3LhxQ4vwpI0bN6rs/qACuuNPE4sWLXKNIX37yZMnkZuba/PvO3bsEBWwd+9ebQpg8UVBKxXg54uys7O1TcBKXstQwaBFF8+ZM2eq7LqoAD/QNHULzz0u3f5YQtPhgbw0YQIr9f7w9IUCVq1aJa4+Cx46+TopoCvSW+DEiROiAtasWaOVr9MWaNN1CDpdfKT0NWOCkSNHauXtdAg2W5+4lYjoKUsj4datW9otb9OmTaIbvGx9wvq8zkkcOHBAVACf61YAAzApEDqkOxS20s2bN0UF6Kw5BAqFN0fiMkQaOnSokWpT0dra6moaLIjLUL54HWZXh45JLF26VFz906dPa1991hcEpHlzAsyR+cC2FB2TOHyYfU12sDCiWwF79uxR2bZYU2Lsw/OhoaFByyTu378vKiA1NVW7AphqU/CjVQFsQnSlJOVEw4cPF1NgTU1N2oVncCcgR+3ufKwzLF2yxKZjA0xZ61YAb6Sq+du6TtHdgekDT+u0tDTXJrFv3z5RAVu3brW9m5CQgP379yMvLy9svizuCJ7nW6kyNMrswPSBLW9uKeDixYuiAhYvXux7h+nwo0ePoqOjw8gWuREbCKvP0liCU32w0vom9+yCBQtcUcCDBw9EBfCsWbZsGerq6nw5wpaWFldcMTvJhHOnTBSeYO+tWUL2gQUFlprDmQizQVxVCepzeqCUlJSwheecmYZT8A+LwJ6egO7eWz/Qf4czmREjRqA3YJbIrYQoW/gEbO9ReEuLDNtJ/MC2k1AnwzD33bt3joLTTFkLcCscXr16tcSmvtdN1QCy1F4BNklxT4U6KV6yJDx8+BALFy50RXASGzqE7cYHmb0S3gsAtr4VFjHZihbKxBITE42Dji6J+cDbt28jPz/f1fYbzk2qNQD40hMK0N14bFNCOJbAWkG4h6rTyjsIXxWS8JbzgI3HULdDOGeC28Q97+BlLoX9MQWAeLPx2K7aqiqj7tdXgtOStDZLK0rwS51Z44RIdJKpxABN8PPWlXdHeGU72M4ErxtjN1YkmqrS09Ol8NbPMLV+QwQgz4ynbeAJz9udjvLWjBkzjHqClFKzfjKjTXAhTrAFS1bQPNmWwl7fUHKM/A27OpjJEZIZUpATnJ8PFwBiAHyt3h0kMNF67tw5oz7PEjVvgExSeD+b4+ryGfP2fIfZ2xcvXqAXYGy/PeKfzVnB3lsztS5uC00gr/KAF5tIAkAi6ypqgtVlMJNT7Hif7w9Ad3otl3145oTDxV9MYDJ30q8/nvY4gK1o5seWjFjon5sASDEruyX5vzrz3XwA6bon+B8RXxEBPsptqAAAAABJRU5ErkJggg=="></button>
	</div>


	<div id="home" class="tabcontent" >
	<!--

	<label hidden class=infotip >Choose whether this project contains levels or not. If you wish to measure all of the plan, let the number of plans equal to one. If you wish to measure certain regions of the plan or have the plan divided into levels,
	please type in a number greater than 1 (number of levels). </label> -->
	<div id="loading" hidden>

	</div>

	<div id="canvaswindow" hidden="until-found">
	<canvas id="myCanvas"></canvas>


	<input type="button" value="Draw New Shape" id="NewShapeButtonId" />
	<input type="button" value="Undo" id="undoButtonId" />
	<div id="colorpickers">
	<input type="color" id="color" value="#2FFFFF" >
	</div>
	<input type="button" value="save" id="savecanvas" />
	</div>
	<!-- <canvas id="myCanvas2"></canvas> -->


	<div id="rightside">
	<div id="backgroundimg" >

	<!-- <iframe id="pdfiframeid0" src="https://research.google.com/pubs/archive/44678.pdf" style=" visibility:hidden; width:700px; height: 400px;"> </iframe>
	-->
	</div>




	<div id="underimgbuttons">
	</div>

	</div>

	<form method="post" id="myForm" >
	<div id ="">
	<select name="selectproj" class="selectionsProj" required >

	<!-- </select>onchange="getproj()" > -->
	<option value="" disabled selected hidden >Project</option>
	<option value="2340 United Living Low Rise Building">2340 United Living Low Rise Building</option>
	<option value="2341 Bouygues-Cotswold">2341 Bouygues-Cotswold</option>
	<option value="2342 GF Tomlinson - Hardingstone Primary School">2342 GF Tomlinson - Hardingstone Primary School</option>


	<!--
	<option value="BMW job1">BMW job1</option>
	<option value="BMW job2">BMW job2</option> -->
	</select>
	</div>

	<div id ="projectpart">
	<select name="selectprojp" class="selectionsProjp" id="selectionsProjpid" required>
	<option value="" disabled selected hidden >Project Part</option>

	</select>
	</div>

	<div id ="projectsection">
	<select name="selectprojs" class="selectionsProjs" onchange=getproj() required>
	<option value="" disabled selected hidden>Section</option>
	<!-- <option value="NRM Section-A">NRM Section-A </option>
	<option value="NRM Section-B">NRM Section-B</option> -->
	</select>
	</div>


	<div id ="tomeasurediv">
	<label id="measureLabel">Document To Measure</label> <br>
	<div id="measureCheckbox">
	<select style="margin-left: -1%;" hidden name="measureselectname" id="measureselectid" multiple size="5" required>
	<!-- <option value="" disabled selected hidden>Measure this Document</option> -->
	</select>
	<select id='selectunitA' hidden>
	<option id="m2" value="m2" >m² </option>
	<option id="mm2" value="mm2" >mm² </option>
	</select>
	<select id='selectunitP' hidden>
	<option id="m" value="m" >m </option>
	<option id="mm"value="mm" >mm </option>
	</select>
	</div>
	</div>

	<div id ="relvDocdiv">
	<label id="relvDocLabel">Other Relevant Documents</label> <br>
	<div id ="relvdiv">
	<select style="margin-left: -1%;" hidden name="relvselectname" id="relvselectid" multiple size="5">

	</select>
	</div>
	</div>

	<div id="ratios">

	</div>
	<!-- <br> -->
	<div id="radiosColors" hidden="until-found">

	<input type="checkbox" id="levelcheckbox" >
	<label id=nLevels name="levelsnamelabel" >Leveled Plan </label>
	<i class="fa fa-info-circle" id="infotool" > <span class="tooltiptext">Choose whether this project contains levels or not. Leave the checkbox unchecked if you want to measure the entirety of the plan. <br> Please check the box on this line if you want to measure certain areas of the plan or have the plan divided into levels. Once the checkbox is ticked, a window will apear that will allow you to draw on the PDF. Click the save button at the bottom of the page when you are done. </span> </i>
	<!--
	<div id="colorpickers">
	</div> -->

	</div>
	<br>

	<div id ="saveOPdiv">
	<button id="measureADRbutton">Measure using ADR</button>
	<script src="https://cdn.lordicon.com/bhenfmcm.js"></script>
	<lord-icon
	src="https://cdn.lordicon.com/ynwbvguu.json"
	trigger="hover" colors="primary:black" id="addicon" onclick="duplicate()">
	</lord-icon>
	</div>
	<audio id="myAudio" autoplay></audio>

	</form>

	<div id ="duplicater" class="duplicaterclass" hidden="until-found">
	<label id="labelArrayId" hidden="until-found"> </label>
	<select name="measurementscripts" class="measurementselections" id="measurementselectionsid" oninput=get3rddropdown() >
	<option id="hiddenselect" value="" disabled selected hidden > Select </option>
	</select>

	<select name="select" class="selections" id="selectionsid" oninput=get3rddropdown()>
	</select>
	<select name="measureitem" class="measureitems" id="measureitemsid">
	</select>
	<br>
	<div id="repeatforloop" class="repeatforloopclass00" name="repeatforloopname " >
	<input type="text" id="text0" name="text1name" placeholder="GB-1" class=gb>
	<input type="text" id="text1" name="text2name" placeholder="A" class=a>
	<input type="text" id="text2" name="text3name" placeholder="Depth" class=depth>
	<script src="https://cdn.lordicon.com/bhenfmcm.js" ></script>
	<lord-icon
	onclick="addmctnameicon()"
	src="https://cdn.lordicon.com/mecwbjnp.json"
	trigger="hover"
	class="addmctnameclass"
	id="addmctnameid"
	colors="primary:black,secondary:black">
	</lord-icon>
	</div>

	</div>
	<button hidden id="doneebackground" onclick="getSecondData()" > Export Summary </button>

	<!-- </form> -->

	<div hidden id ="duplicaterhidden" class="duplicaterclasshidden">
	<label id="labelArrayId" hidden="until-found"> </label>
	<select name="measurementscripts" class="measurementselections" id="measurementselectionsid" oninput="get3rddropdown()">
	<option value="" disabled selected hidden>Select</option>

	</select>

	<select name="select" class="selections" id="selectionsid" oninput=get3rddropdown()>

	</select>
	<select name="measureitem" class="measureitems" id="measureitemsid">
	</select>

	<br>
	<div id="repeatforloophidden" class="repeatforloopclasshidden" name="repeatforloopnamehidden " > <!-- onchange="getmctName()"> -->


	<input type="text" id="text0" name="text1name" placeholder="GB-1" class=gb>
	<input type="text" id="text1" name="text2name" placeholder="A" class=a>
	<input type="text" id="text2" name="text3name" placeholder="Depth" class=depth>
	<script src="https://cdn.lordicon.com/bhenfmcm.js" ></script>
	<lord-icon
	onclick="addmctnameicon()"
	src="https://cdn.lordicon.com/mecwbjnp.json"
	trigger="hover"
	class="addmctnameclass"
	id="addmctnameid"
	colors="primary:black,secondary:black">
	</lord-icon>
	<script src="https://cdn.lordicon.com/bhenfmcm.js"></script>
	<lord-icon
	onclick="deletemctnameicon()"
	src="https://cdn.lordicon.com/rivoakkk.json"
	trigger="hover"
	class="deletemctnameclass"
	id="deletemctnameid"
	colors="primary:black,secondary:black">
	</lord-icon>
	</div>

	</div>

	</div>

	<div id="legends" class="tabcontent">
	<!-- <div class="dropbtnLinks-content">
	</div> -->
	<ul class="graynavbarLegend">
	<label class="label1">Project Name / Project Part / NRM Section /</label> <label class="label2">Legend</label>
	<div class="legendtime">
	<div style="display: inline-flex;">
	<label class="CreatedTime"> Created Time </label>
	<button id="sortBtnCreateDesc" class="sortbutton" onclick="sortlegends(this.id)"><i id="CreatesortDesc" class="fa fa-sort-amount-desc" aria-hidden="true" ></i> </button>
	<button id="sortBtnCreateAsc" class="sortbutton" onclick="sortlegends(this.id)"><i id="CreatesortAsc" class="fa fa-sort-amount-asc" aria-hidden="true" ></i></button>
	</div>
	<div style="display: inline-flex;">
	<label class="EditTime"> Last Edited Time </label>
	<button id="sortBtnEditDesc" class="sortbutton" onclick="sortlegends(this.id)"><i id="EditsortDesc" class="fa fa-sort-amount-desc" aria-hidden="true" ></i></button>
	<button id="sortBtnEditAsc"class="sortbutton" onclick="sortlegends(this.id)"><i id="EditsortAsc" class="fa fa-sort-amount-asc" aria-hidden="true" ></i> </button>
	</div>
	</div>

	</ul>

	</div>

	<div class="dropdown-content">
	<div id="userguidetext">
	<div id="textfirstpage">
	<label style="font-style: oblique;">
	<br> Before using this tool, kindly read the following. </label>
	<br><br>
	<label style="font-style: oblique;" >
	Note : The algorithm is based on detecting shapes and colors from the plan. Some shapes such as tables and textboxes carrying plan-related information, may also be viewed as shapes and so added to the algorithm. To avoid this, please tidy up the plan before choosing to measure it, by using an external tool to either erase them or to put a white rectangle over them.
	</label>
	<br>

	<br>
	The tool is divided into two main parts:
	<br>
	<li id="userguideheadings"> First Part </li>
	<label id="underlinedLables"> - Inputs: </label>
	<br>There are three dropdowns available that will allow you to select the name of the project you wish to measure, along with the project part, and the project section.

	<br > <br>
	<label style="font-style: italic;"> Please make sure the “Project Section” you select is correct because it will affect the code that will be applied to the plan. </label>
	<br>
	<br>
	Mark the project from the "To measure" section that you want to measure. Additionally, you have the ability to view any relevant documents you might need in Dropbox.(optional).

	<br> <label style="font-style: italic;"> * Pixel to Metric conversion important notes : </label> Once you have selected a specific plan to measure, you will be provided with a pdf with a colored rectangle drawn in it. Please open this PDF in Foxit Reader, Adobe, or any software that will allow you to measure shapes on a plan, and measure the given shape’s area and perimeter in the desired metric unit, then input those values in the textboxes that will be shown below the relevant documents.
	For the ease of conversion of metric units, you will find a dropdown with ‘m’ or ‘mm’ next to each textbox.
	This will allow the code to understand the ratio between the pixels to the metric unit you chose.

	<br>
	You may think of this rectangle's measurement as a scale check for Bluebeam.
	<br> <br>
	<label style="font-style: italic;"> * Notes for section 1.0 measurement (Section 3.2 does not yet support this feature): </label>
	<label id=info >You can measure several levels independently using checkbox labeled 'Leveled plan' under Scale document heading. </label>
	Leave the checkbox unchecked if you want to measure the entirety of the plan. <br>Please tick the box if you want to measure certain areas of the plan or have the plan divided into levels. Once the checkbox is ticked, a window will appear that will allow you to draw on the PDF. Click the save button at the bottom of the page when you are done.
	<br>

	<i id="secondpage" class="fa fa-arrow-right" aria-hidden="true"></i>
	<br> <br>
	</div>
	<div id="textsecondpage" hidden=until-found>

	<br>
	<label id="underlinedLables"> - Outputs: </label> <br>
	On the right side of the console, the output will be displayed. There are three primary components to it.
	You may have a sneak peek of the measured plan in the first section. There are two buttons underneath this picture. You may access the Google sheet that was created by clicking the "Legend and Data created" button. The "Click to view as PDF" second button directs you to the marked-up PDF that was created in Dropbox.
	<br> <br>
	ONLY IN DROPBOX VIEW. DO NOT DOWNLOAD THE PDF FOR THIS FEATURE.
	Any markup that you deem unnecessary in the pdf can be removed, and the legend will also be updated accordingly.

	<li id="userguideheadings" > Second part </li>
	<br>
	To open the Google sheet with the created legend, first click the button labeled "Legend and Data created." Names of each shape should go in the first column of the sheet labeled ‘Guess’.
	<br>Ex. GB-1.
	<br> Then, return to this page, the ADR Console, to finish entering the remaining data after you have finished entering the guessed names in the legend.
	<br> Three dropdown menus and three text boxes are present.


	<li style="list-style-type:square;"> You can select the type of the shape from the first dropdown by selecting either:
	<br> &emsp;&emsp; a. (1.0 Substructure) Ground Beam or Pile Cap
	<br> &emsp;&emsp; b. (3.2 Floor Finishes) Floor or Wall
	</li>
	<li style="list-style-type:square;"> In the second dropdown, you will find the first part of the MC-T Name. Ex: Ground Beams: m2.</li>
	<li style="list-style-type:square;"> The third dropdown menu has the options (Area-perimeter-Length-Count).</li>
	<br> Ex: If you selected Ground Beams: m2 , You are currently obtaining the total area value from the legend. If you selected Ground Beams: m, you may choose whether to extract perimeter or length data from the third selection.
	<br><br><label style="font-style: italic;"> Regarding the MC-T naming process: </label>
	Then add the relevant detail and depth to the rows underneath the dropdowns.
	You can add/ subtract rows by using the + and - button.

	<br>

	You can add another block and repeat the process for another item by clicking the button next to "Measure using ADR".


	<br><br>
	<i id="firstpage" class="fa fa-arrow-left" aria-hidden="true"></i>
	<br> <br>

	</div>

	</div>
	</div>
	</body>
	</html>
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script >
	///////////////////////////////////////////////BEGIN JS CODE//////////////////////////////////////////////////
	console.log(document.getElementById('duplicater').childNodes)
	document.getElementById('duplicater').childNodes[1].value=[0,0]
	//___________________________________________________________________________________________________________
	//___________________________________________________________________________________________________________
	/Tab View/
	document.getElementById('secondpage').addEventListener('click',function(){
	document.getElementById('textsecondpage').removeAttribute('hidden');
	document.getElementById('textfirstpage').setAttribute('hidden',true)

	});
	document.getElementById('firstpage').addEventListener('click',function(){
	document.getElementById('textfirstpage').removeAttribute('hidden');
	document.getElementById('textsecondpage').setAttribute('hidden',true)

	});


	//___________________________________________________________________________________________________________
	//___________________________________________________________________________________________________________
	/Red Alert to fill in the first 3 dropdowns: prj name, part, section/
	document.getElementById('measureADRbutton').addEventListener('click',function(){
	if (!document.getElementsByClassName('selectionsProj')[0].value)
	document.getElementsByClassName('selectionsProj')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
	if (!document.getElementsByClassName('selectionsProjp')[0].value)
	document.getElementsByClassName('selectionsProjp')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
	if (!document.getElementsByClassName('selectionsProjs')[0].value)
	document.getElementsByClassName('selectionsProjs')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';

	/Clear output everytime the user clicks on measureADR button/
	var rightside=document.getElementById('rightside');
	var rightchidren= rightside.children;
	for (let ch=0;ch<rightchidren.length; ch++)
	{
	if (rightchidren[ch].id == 'imgcanvas')
	{
	rightside.removeChild(rightchidren[ch])
	document.getElementById('underimgbuttons').innerHTML=''
	clearInterval()
	clearTimeout()
	}
	}
	});

	//___________________________________________________________________________________________________________
	//___________________________________________________________________________________________________________
	/Toggle Tab View/
	function openTab(evt, tabname) {
	// Declare all variables
	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("tablinks");
	for (i = 0; i < tablinks.length; i++) {
	tablinks[i].className = tablinks[i].className.replace(" active", "");
	}

	// Show the current tab, and add an "active" class to the button that opened the tab
	document.getElementById(tabname).style.display = "block";
	evt.currentTarget.className += " active";

	}
	document.getElementById("pagetitle").click();

	//___________________________________________________________________________________________________________
	//___________________________________________________________________________________________________________
	/Add icon to duplicate 'duplicater' div (big section that includes 3 dropdowns,3 textboxes, 2 buttons(add,delete)/
	var dupliatei = 0; // i
	var clonedDivId=0;
	var original = document.getElementById('duplicaterhidden');
	var addciconval=0; //div duplicate
	var jj=0;
	const vals = [];
	function duplicate() {
	/Create array of addciconval w jj /

	addciconval+=1;
	jj=0;

	// labelArrayId=document.createElement('label');
	// labelArrayId.id='labelArrayId';
	// labelArrayId.value=[addciconval,jj];
	// labelArrayId.setAttribute('hidden','until-found')

	var clone = original.cloneNode(true); // "deep" clone
	clone.id = 'duplicater' + ++dupliatei;
	clonedDivId=clone.id;
	console.log(clone.children)
	clone.children[0].value=[addciconval,jj]
	clone.children[5].style.marginLeft='2px';
	clone.children[1].style.marginBottom='10px';
	clone.children[5].children[4].id='addmctnameid'+dupliatei
	clone.children[5].children[6].style.display='none'
	clone.removeAttribute("hidden");
	clone.setAttribute('class','duplicaterclass'+dupliatei);
	clone.getElementsByClassName('measurementselections')[0].setAttribute('name', 'measurementscripts'+dupliatei);
	clone.getElementsByClassName('measurementselections')[0].setAttribute('class', 'measurementselections'+dupliatei);
	clone.getElementsByClassName('measureitems')[0].setAttribute('name', 'measureitem'+dupliatei);
	clone.getElementsByClassName('measureitems')[0].setAttribute('class', 'measureitems'+dupliatei);
	clone.getElementsByClassName('selections')[0].setAttribute('name', 'select'+dupliatei);
	clone.getElementsByClassName('selections')[0].setAttribute('class', 'selections'+dupliatei);
	clone.getElementsByClassName('repeatforloopclasshidden')[0].setAttribute('id', 'repeatforloop'+addciconval+'0');
	clone.getElementsByClassName('repeatforloopclasshidden')[0].setAttribute('name', 'repeatforloopname'+addciconval+'0');
	clone.getElementsByClassName('repeatforloopclasshidden')[0].setAttribute('class', 'repeatforloopclass'+addciconval+'0');
	console.log(clone.childNodes)
	// clone.childNodes
	// clone.append(labelArrayId);
	original.parentNode.appendChild(clone);
	clone.parentElement.insertBefore(clone, document.getElementById('doneebackground'));
	console.log( original.parentNode)

	var section = document.getElementsByClassName("selectionsProjs")[0]
	/Based on the NRM section , populate the second part of the interface/
	if (addciconval>0){
	var drpdwn1 = document.getElementsByClassName("measurementselections"+dupliatei)[0]; //groundbeams
	if (section.value.startsWith('1.0'))
	{
	var opt = document.createElement("OPTION");
	opt.text= 'Select';
	opt.value= "";
	opt.hidden=true;
	drpdwn1.add(opt);
	var optn = document.createElement("OPTION");
	optn.text= 'Ground Beams';
	optn.value= "ground beams";
	drpdwn1.add(optn);
	var optn1 = document.createElement("OPTION");
	optn1.text= 'Pile Caps';
	optn1.value= "pile caps";
	drpdwn1.add(optn1);
	}
	if (section.value.startsWith('3.2'))
	{
	var opt = document.createElement("OPTION");
	opt.text= 'Select';
	opt.value= "";
	opt.hidden=true;
	drpdwn1.add(opt);
	var optn = document.createElement("OPTION");
	optn.text= 'Floor';
	optn.value= "Floor";
	drpdwn1.add(optn);
	var optn1 = document.createElement("OPTION");
	optn1.text= 'Wall';
	optn1.value= "Wall";
	drpdwn1.add(optn1);
	}
	}
	}

	//___________________________________________________________________________________________________________
	//___________________________________________________________________________________________________________
	/User Guide button toggle/

	function userguideclick(){
	var acc = document.getElementsByClassName("dropdown-content")[0];
	var i;
	acc.classList.toggle("active");

	/* Toggle between hiding and showing the active panel */
	if (acc.style.display === "block") {
	acc.style.display = "none";

	} else {
	acc.style.display = "block";
	acc.style.backgroundColor=(0, 153, 255);
	}
	}
	//to be retrieved from python code
	var areainpixels=0;
	var prminpixels=0;

	///////////////temporary lists of prj names, parts, sections just to populate the dropdowns
	prjname1=['2340 United Living Low Rise Building','2341 Bouygues-Cotswold','2342 GF Tomlinson - Hardingstone Primary School']
	prjname1parts=['Block O Pumphouse','Hawthorn','Ling','Red Oak']
	prjname2parts=['Block B','Block G']
	prjname1sec1=['1.0 Substructure','2.2 RC Slabs','5.1 Sanitary','8.2 Roads, Paths, Pavings','8.4 Fencing, Railing, Walls','8.5 External Fixtures','8.6 External Drainage','8.7 External Services','8.8 Minor Buildings']
	prjname1sec2=['1.0 Substructure','2.2 RC Slabs','2.1 Frames','2.3 Roof','2.4 Stairs','2.5 External Walls','2.6 External Openings','2.7 Internal Walls','2.8 Internal Openings','3.1 Wall Finishes','3.2 Floor Finishes','3.3 Ceiling Finishes','4.0 Fittings, Furnishings and Equipments','7.0 Works to exisitng buildings','8.1 Site Preparation Works','8.2 Roads, Paths, Pavings','8.3 Soft Landscaping','8.5 External Fixtures','8.6 External Drainage','8.7 External Services','8.8 Minor Buildings']
	prjname1sec3=['1.0 Substructure','2.2 RC Slabs','2.3 Roof','2.4 Stairs','2.5 External Walls','2.6 External Openings','2.7 Internal Walls','3.1 Wall Finishes','3.2 Floor Finishes','3.3 Ceiling Finishes', '4.0 Fittings, Furnishings and Equipments','7.0 Works to existing buildings','8.1 Site Preparation Works','8.2 Roads, Paths, Pavings','8.3 Soft Landscaping','8.5 External Fixtures','8.6 External Drainage']
	prjname1sec4=['1.0 Substructure','2.2 RC Slabs','2.3 Roof','2.4 Stairs','2.5 External Walls','2.6 External Openings','2.7 Internal Walls','3.1 Wall Finishes','3.2 Floor Finishes','3.3 Ceiling Finishes', '4.0 Fittings, Furnishings and Equipments','7.0 Works to existing buildings','8.1 Site Preparation Works','8.2 Roads, Paths, Pavings','8.3 Soft Landscaping','8.5 External Fixtures','8.6 External Drainage']
	prjname2parts=['Block B','Block G']
	prjname2sec=['3.3 Ceiling Finishes']
	prjname3parts=['Community Center building','External Works','Primary School']
	prjname3sec1=['1.0 Substructure','2.2 RC Slabs','2.3 Roof','3.1 Wall Finishes','3.2 Floor Finishes','3.3 Ceiling Finishes','4.0 Fittings, Furnishings and Equipments','5.1 Sanitary']
	prjname3sec2=['2.2 RC Slabs','8.1 Site Preparation Works','8.4 Fencing, Railing, Walls','8.5 External Fixtures', ' 8.6 External Drainage']
	prjname3sec3=['1.0 Substructure','2.2 RC Slabs','2.3 Roof','2.4 Stairs','3.2 Floor Finishes','3.3 Ceiling Finishes','4.0 Fittings, Furnishings and Equipments','5.1 Sanitary']

	//___________________________________________________________________________________________________________
	//___________________________________________________________________________________________________________
	/Populate dropdowns/

	//get the 3 dropdown elements
	var proj = document.getElementsByClassName("selectionsProj")[0];
	var proj1 = document.getElementsByClassName("selectionsProjp")[0];
	var projsec = document.getElementsByClassName("selectionsProjs")[0];
	var pdfname;

	proj.addEventListener('input',function(){
	proj.style.boxShadow=( '2px 2px 2px gray')
	proj1.innerHTML='';
	projsec.innerHTML='';
	var optn = document.createElement("OPTION");
	optn.text= 'Project Part';
	optn.value= "";
	optn.hidden=true;
	proj1.add(optn);
	var opt = document.createElement("OPTION");
	opt.text= 'Section';
	opt.value= "";
	opt.hidden=true;
	projsec.add(opt);

	if (proj.value==prjname1[0]){
	for (let p=0 ; p<prjname1parts.length;p++)
	{
	var optn1 = document.createElement("OPTION");
	optn1.text= prjname1parts[p];
	optn1.value= prjname1parts[p];
	optn1.id= prjname1parts[p]+p;
	proj1.add(optn1);

	}
	}
	if (proj.value==prjname1[1]){
	for (let p=0 ; p<prjname2parts.length;p++)
	{
	var optn1 = document.createElement("OPTION");
	optn1.text= prjname2parts[p];
	optn1.value= prjname2parts[p];
	optn1.id= prjname2parts[p]+p;
	proj1.add(optn1);

	}
	}
	if (proj.value==prjname1[2]){
	for (let p=0 ; p<prjname3parts.length;p++)
	{
	var optn1 = document.createElement("OPTION");
	optn1.text= prjname3parts[p];
	optn1.value= prjname3parts[p];
	optn1.id= prjname3parts[p]+p;
	proj1.add(optn1);

	}
	}
	})
	proj1.addEventListener('input',function(){
	proj1.style.boxShadow=( '2px 2px 2px gray')
	projsec.innerHTML='';
	var optn = document.createElement("OPTION");
	optn.text= 'Section';
	optn.value= "";
	optn.hidden=true;
	projsec.add(optn);


	if (proj1.value==prjname1parts[0].toString())
	{
	for (let s=0;s<prjname1sec1.length;s++){
	var optn2 = document.createElement("OPTION");
	optn2.text= prjname1sec1[s];
	optn2.value= prjname1sec1[s];
	optn2.id= prjname1sec1[s]+s;
	if(!(prjname1sec1[s].startsWith('1.0') \|\| prjname1sec1[s].startsWith('3.2') \|\| prjname1sec1[s].startsWith('2.2') \|\| prjname1sec1[s].startsWith('2.1')))
	{
	optn2.style.color='#bdbcbc';
	optn2.style.cursor='not-allowed';
	optn2.setAttribute('disabled',true)
	}
	projsec.add(optn2);
	}
	}
	else if (proj1.value==prjname1parts[1])
	{
	for (let s=0;s<prjname1sec2.length;s++){
	var optn2 = document.createElement("OPTION");
	optn2.text= prjname1sec2[s];
	optn2.value= prjname1sec2[s];
	optn2.id= prjname1sec2[s]+s;
	if(!(prjname1sec2[s].startsWith('1.0') \|\| prjname1sec2[s].startsWith('3.2') \|\| prjname1sec2[s].startsWith('2.2') \|\| prjname1sec2[s].startsWith('2.1')))
	{
	optn2.style.color='#555';
	optn2.style.cursor='not-allowed';
	optn2.setAttribute('disabled',true)
	}
	projsec.add(optn2);
	}
	}
	else if (proj1.value==prjname1parts[2])
	{
	for (let s=0;s<prjname1sec3.length;s++){
	var optn2 = document.createElement("OPTION");
	optn2.text= prjname1sec3[s];
	optn2.value= prjname1sec3[s];
	optn2.id= prjname1sec3[s]+s;
	if(!(prjname1sec3[s].startsWith('1.0') \|\| prjname1sec3[s].startsWith('3.2')\|\| prjname1sec3[s].startsWith('2.2') \|\| prjname1sec2[s].startsWith('2.1')))
	{
	optn2.style.color='#555';
	optn2.style.cursor='not-allowed';
	optn2.setAttribute('disabled',true)
	}
	projsec.add(optn2);
	}
	}
	else if (proj1.value==prjname1parts[3])
	{
	for (let s=0;s<prjname1sec4.length;s++){
	var optn2 = document.createElement("OPTION");
	optn2.text= prjname1sec4[s];
	optn2.value= prjname1sec4[s];
	optn2.id= prjname1sec4[s]+s;
	if(!(prjname1sec4[s].startsWith('1.0') \|\| prjname1sec4[s].startsWith('3.2') \|\| prjname1sec4[s].startsWith('2.2') \|\| prjname1sec2[s].startsWith('2.1')))
	{
	optn2.style.color='#555';
	optn2.style.cursor='not-allowed';
	optn2.setAttribute('disabled',true)
	}
	projsec.add(optn2);
	}
	}
	else if (proj1.value==prjname2parts[0] \|\| proj1.value==prjname2parts[1])
	{
	for (let s=0;s<prjname2sec.length;s++){
	var optn2 = document.createElement("OPTION");
	optn2.text= prjname2sec[s];
	optn2.value= prjname2sec[s];
	optn2.id= prjname2sec[s]+s;
	if(!(prjname2sec[s].startsWith('1.0') \|\| prjname2sec[s].startsWith('3.2') \|\| prjname2sec[s].startsWith('2.2') \|\| prjname1sec2[s].startsWith('2.1')))
	{
	optn2.style.color='#555';
	optn2.style.cursor='not-allowed';
	optn2.setAttribute('disabled',true)
	}
	projsec.add(optn2);
	}
	}
	else if (proj1.value==prjname3parts[0])
	{
	for (let s=0;s<prjname3sec1.length;s++){
	var optn2 = document.createElement("OPTION");
	optn2.text= prjname3sec1[s];
	optn2.value= prjname3sec1[s];
	optn2.id= prjname3sec1[s]+s;
	if(!(prjname3sec1[s].startsWith('1.0') \|\| prjname3sec1[s].startsWith('3.2') \|\| prjname3sec1[s].startsWith('2.2') \|\| prjname1sec2[s].startsWith('2.1')))
	{
	optn2.style.color='#555';
	optn2.style.cursor='not-allowed';
	optn2.setAttribute('disabled',true)
	}
	projsec.add(optn2);
	}
	}
	else if (proj1.value==prjname3parts[1])
	{
	for (let s=0;s<prjname3sec2.length;s++){
	var optn2 = document.createElement("OPTION");
	optn2.text= prjname3sec2[s];
	optn2.value= prjname3sec2[s];
	optn2.id= prjname3sec2[s]+s;
	if(!(prjname3sec2[s].startsWith('1.0') \|\| prjname3sec2[s].startsWith('3.2') \|\| prjname3sec2[s].startsWith('2.2') \|\| prjname1sec2[s].startsWith('2.1')))
	{
	optn2.style.color='#555';
	optn2.style.cursor='not-allowed';
	optn2.setAttribute('disabled',true)
	}
	projsec.add(optn2);
	}
	}
	else if (proj1.value==prjname3parts[2])
	{
	for (let s=0;s<prjname3sec3.length;s++){
	var optn2 = document.createElement("OPTION");
	optn2.text= prjname3sec3[s];
	optn2.value= prjname3sec3[s];
	optn2.id= prjname3sec3[s]+s;
	if(!(prjname3sec3[s].startsWith('1.0') \|\| prjname3sec3[s].startsWith('3.2') \|\| prjname3sec3[s].startsWith('2.2') \|\| prjname1sec2[s].startsWith('2.1')))
	{
	optn2.style.color='#555';
	optn2.style.cursor='not-allowed';
	optn2.setAttribute('disabled',true)
	}
	projsec.add(optn2);
	}
	}


	})

	projsec.addEventListener('input',function(){
	projsec.style.boxShadow=( '2px 2px 2px gray')
	})

	var ratioAunit=1;
	var ratioPunit=1;

	function getproj(){

	var proj = document.getElementsByClassName("selectionsProj")[0];
	var projectVal=proj.value.toString() //selected project

	var inputs = document.getElementsByTagName("select")[1]; //second dropdown(project part)
	var p=document.getElementById("selectionsProjpid") //project part

	var sections = document.getElementsByClassName("selectionsProjs")[0];

	chooseFirstdrpdwn();
	$.get( '/getmethod/'+sections.value).then (function(data){

	var projectsfromname=data; // [0] name , [1] parts (array)

	var projname = document.getElementsByClassName("selectionsProj")[0];
	var projpart = document.getElementsByClassName("selectionsProjp")[0];
	var projsec = document.getElementsByClassName("selectionsProjs")[0];


	// var drp = document.getElementById("selectionsProjpid");
	//add a hidden option (not to be selected)


	var meas = document.getElementById("measureCheckbox") ;
	var relv = document.getElementById("relvdiv") ;
	const measids=[];
	const relvids=[];
	const measoptns=[];
	//add dropdown options== array
	// meas.innerHTML='';
	// relv.innerHTML='';
	var measSelect = document.getElementById("measureselectid");

	var relvSelect = document.getElementById("relvselectid");


	measSelect.removeAttribute("hidden");
	relvSelect.removeAttribute("hidden");
	measSelect.innerHTML='';
	var optn2 = document.createElement("OPTION");
	optn2.text= 'Select project to measure';
	optn2.value=''
	optn2.hidden=true;
	optn2.id='hidden';

	measSelect.add(optn2);
	document.getElementById("hidden").required = true;
	// console.log(measSelect)

	relvSelect.innerHTML='';
	for (i = 0; i < projectsfromname.length; i++) {

	//relevant documents
	var optn1 = document.createElement("OPTION");
	optn1.text= projectsfromname[i];
	optn1.value= projectsfromname[i] ;
	optn1.id=data[0] + i
	relvSelect.add(optn1);

	//to measure documents
	var optn2 = document.createElement("OPTION");

	optn2.text= projectsfromname[i];
	optn2.value= projectsfromname[i] ;
	optn2.id=data[0] ;
	measSelect.add(optn2);
	measoptns.push(optn2);

	}


	// console.log(measChecklbl);
	relvids.push(relvSelect) ;
	measids.push(measSelect);
	//to open pdf in a new tab (relevant documents)

	relvids.forEach(function(elem){
	elem.addEventListener("change", function() {

	console.log(projname.value, projpart.value,projsec.value, elem.value)
	var pdfpatharr=[]
	pdfpatharr.push(projname.value, projpart.value,projsec.value, elem.value)
	$.get( '/getdropboxurl/'+JSON.stringify(pdfpatharr)).then (function(data){
	console.log(data)
	window.open( data)
	});
	// window.open( 'https://arxiv.org/pdf/2102.13468v1.pdf')
	});
	});


	document.getElementById('measureADRbutton').onclick= function()
	{
	if (!measSelect.value)
	measSelect.style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';

	}
	measids.forEach(function(elem) {
	elem.addEventListener("change", function() {

	pdfname=elem.value;
	measSelect.style.boxShadow='none';

	document.getElementById("all").style.display = "block";
	pixelArr=[projname.value, projpart.value,projsec.value, elem.value]
	$.get( '/pixelimg/'+JSON.stringify(pixelArr)) .then( function(data) {
	// alert('Measure the white square drawn in the pdf on Bluebeam, then enter its area and perimeter in ur desired scale. \n' );
	if(window.confirm("Measure the white square drawn in the pdf on Bluebeam, then enter its area and perimeter in ur desired scale. \n")){
	// pdfname=data[2];
	window.open(data[2]);

	}
	document.getElementById("all").style.display = "none";

	document.getElementById('measureADRbutton').onclick= function()
	{
	if (!areaRatio.value)
	areaRatio.style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
	if (!prmRatio.value)
	prmRatio.style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';

	}
	document.getElementById('radiosColors').removeAttribute('hidden');
	var scalelbl= document.createElement("label");
	scalelbl.innerText='Scale Document';
	scalelbl.id='measureLabel';
	var br1= document.createElement("br");
	var areadiv=document.createElement("div");
	areadiv.id='areadiv'
	var areaRatiolbl= document.createElement("label");
	areaRatiolbl.innerText='Area:'
	areaRatiolbl.id='radiolbl';
	// areaRatiolbl.style.marginTop='50px';

	var areaRatio= document.createElement("input");
	areaRatio.type='number';
	areaRatio.id='lvlinput';
	areaRatio.name='areaRatio';
	areaRatio.style.marginLeft='78px';
	areaRatio.style.textAlign='right';
	areaRatio.step=".0000001";
	areaRatio.addEventListener('change',function(){
	areaRatio.value=(Number(areaRatio.value)).toFixed(7)
	areaRatio.style.boxShadow='none';
	})
	areaRatio.required=true;
	selectunitA=document.getElementById('selectunitA')
	selectunitA.removeAttribute('hidden')

	areadiv.append(areaRatiolbl,areaRatio,selectunitA)
	var br2= document.createElement("br");
	var br3= document.createElement("br");
	var prmdiv=document.createElement("div");
	prmdiv.id='prmdiv'
	var prmRatiolbl= document.createElement("label");
	prmRatiolbl.innerText='Perimeter:'
	prmRatiolbl.id='radiolbl';

	var prmRatio= document.createElement("input");
	prmRatio.type='number';
	prmRatio.id='lvlinput';
	prmRatio.name='prmRatio';
	prmRatio.style.textAlign='right';
	// prmRatio.onchange=setNumberDecimal();
	prmRatio.style.marginLeft='49px';
	prmRatio.step=".0000001";
	prmRatio.addEventListener('change',function(){
	prmRatio.value=(Number(prmRatio.value)).toFixed(7)
	prmRatio.style.boxShadow='none';
	})
	prmRatio.required=true;
	selectunitP=document.getElementById('selectunitP')
	selectunitP.removeAttribute('hidden')

	prmdiv.append(prmRatiolbl, prmRatio,selectunitP)
	var ratiosdiv= document.getElementById("ratios");
	ratiosdiv.innerHTML='';
	ratiosdiv.append(scalelbl);
	ratiosdiv.append(br1);
	ratiosdiv.append(areadiv)
	ratiosdiv.append(prmdiv)
	areainpixels=data[0];
	prminpixels=data[1];


	});
	selectunitA.addEventListener('change',function(){
	value=document.getElementById('selectunitA').value
	if (value=='mm2')
	ratioAunit=1000000;
	else
	ratioAunit=1;
	})
	selectunitP.addEventListener('change',function(){
	value=document.getElementById('selectunitP').value
	if (value=='mm')
	ratioPunit=1000;
	else
	ratioPunit=1;

	})
	});

	});

	});
	}


	function dataURItoBlob(dataURI)
	{
	// convert base64/URLEncoded data component to raw binary data held in a string
	var byteString;

	if(dataURI.split(',')[0].indexOf('base64') >= 0)
	byteString = atob(dataURI.split(',')[1]);
	else
	byteString = unescape(dataURI.split(',')[1]);

	// separate out the mime component
	var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

	// write the bytes of the string to a typed array
	var ia = new Uint8Array(byteString.length);
	for(var i = 0; i < byteString.length; i++)
	{
	ia[i] = byteString.charCodeAt(i);
	}

	return new Blob([ia], {type: mimeString});
	}




	var spreadsheetId='';
	var spreadsheetURL='';
	var colorsUsed='';
	var list1='';
	var SimilarAreaDictionary='';
	var tomeasureproj=''
	var pdfpath=[];
	var interval = null;
	var namepathArr=''
	var canvasimg;
	var allcolors=['#2FFFFF'];
	function getData(form) {


	document.getElementById("loading").hidden = false;

	document.getElementById('measureADRbutton').setAttribute('disabled',true);
	document.getElementById('measureADRbutton').style.cursor='not-allowed';
	document.getElementById('measureADRbutton').style.boxShadow = 'none';
	document.getElementById('measureADRbutton').style.color = 'white';
	document.getElementById('measureADRbutton').style.backgroundColor="rgb(154,152,152)";

	var underimg=document.getElementById('underimgbuttons');
	var formData = new FormData(form);
	clearInterval(interval)


	colorsarr=[];
	val=0;
	answers=[];
	var ratio1=0;
	var ratio2=0;
	tomeasureproj='';
	pdfpath=[];
	formvalues=Object.fromEntries(formData);


	// iterate through entries...
	for (var pair of formData.entries()) {

	if (pair[0].startsWith('color')){
	colorsarr.push(pair[1].substring(1));
	}
	}
	tomeasureproj=formvalues['measureselectname']; //proj name
	ratio1=(formvalues['areaRatio']/ratioAunit)/areainpixels;
	ratio2=(formvalues['prmRatio']/ratioPunit)/prminpixels;

	pdfpath.push(formvalues['selectproj'],formvalues['selectprojp'] ,formvalues['selectprojs'])

	if (canvasimg){
	buf=canvasimg.split("data:image/png;base64,")
	answers.push(tomeasureproj, 220,allcolors , ratio1, ratio2 ,pdfpath,buf[1]);
	} else{
	answers.push(tomeasureproj, 0,[] , ratio1, ratio2 ,pdfpath);
	}
	if (!formvalues['selectprojs'].startsWith('2.1'))
	{ $.ajax({
	type: "POST",
	url: "/savebase64Img/",

	// set content type header to use Flask response.get_json()
	contentType: "application/json",

	// convert data/object to JSON to send
	data: JSON.stringify({allvalues:answers}),

	// expect JSON data in return (e.g. Flask jsonify)
	dataType: "json",

	// handle response
	success: function(response) {
	console.log(response);
	},
	error: function(err) {
	console.log(err);
	}
	}).done(function(data){
	var backimg=document.getElementById('backgroundimg');
	var rightside=document.getElementById('rightside');
	document.getElementById("loading").hidden = true;

	document.getElementById('duplicater').removeAttribute('hidden');
	document.getElementById('doneebackground').removeAttribute('hidden');


	// clearInterval()
	document.getElementById('measureADRbutton').removeAttribute('disabled');
	document.getElementById('measureADRbutton').style.cursor='pointer';
	document.getElementById('measureADRbutton').style.color = 'white';
	document.getElementById('measureADRbutton').style.backgroundColor="#16c72e";
	document.getElementById('measureADRbutton').addEventListener('mouseover',function(){
	document.getElementById('measureADRbutton').style.color='black';
	document.getElementById('measureADRbutton').style.boxShadow=' 0 0 8px 2px #16c72e';
	})


	document.getElementById('measureADRbutton').addEventListener('mouseout',function(){
	document.getElementById('measureADRbutton').style.color='white';
	document.getElementById('measureADRbutton').style.boxShadow='none';
	});

	if (formvalues['selectprojs'].startsWith('3.2'))
	{
	// /* data[0]--> img , data[1]-->dataframe (goes to legend lsa ) , data [2] -->pdf dropbox shareable link ,data[3]-> spreadsheetId, data[4],spreadsheeturl */
	SimilarAreaDictionary=data[1];
	dropboxLink=data[2];
	spreadsheetId=data[3];
	spreadsheetURL=data[4];
	list1= data[5]
	}
	if (formvalues['selectprojs'].startsWith('2.2'))
	{
	//ignore data[0] --> img passed directly
	//dropboxLink=data[1]

	//spreadsheetId=data[2]
	//spreadsheetURL=data[3]


	}
	if (formvalues['selectprojs'].startsWith('2.1'))
	{
	//ignore data[0] --> img passed directly
	//dropboxLink=data[1]

	//spreadsheetId=data[2]
	//spreadsheetURL=data[3]
	spreadsheetURL=data[0]

	}
	else{
	SimilarAreaDictionary=data[1];
	spreadsheetURL= data[2];
	spreadsheetId= data[3];
	colorsUsed = data[4];
	list1 = data[5]; //list of pdf markups
	dropboxLink=data[6];
	namepathArr=data[8];
	}
	var imgcanvas= document.createElement("img");
	imgcanvas.src= 'data:image/gif;base64,' +data[0];
	// imgcanvas.width=700;
	imgcanvas.height=600;
	console.log(imgcanvas.width)
	imgcanvas.id='imgcanvas';
	imgcanvas.alt="Larry";
	imgcanvas.style.zIndex=999;


	backimg.style.backgroundColor="transparent";
	backimg.style.opacity="1";
	getlegendstoDirectory()
	// backimg.append(imgcanvas);
	var legendbutton= document.createElement("button");
	legendbutton.id='measureADRbutton2';
	legendbutton.innerText='Legend and Data created';
	legendbutton.style.backgroundColor='rgb(5, 43, 235)';
	legendbutton.addEventListener('mouseover',function(){
	legendbutton.style.boxShadow='0 0 8px 2px rgb(5, 43, 235)';
	})
	legendbutton.addEventListener('mouseout',function(){
	legendbutton.style.boxShadow='none';
	})


	// legendbutton.margin.horizontal='0';
	legendbutton.addEventListener('click',function(){
	window.open( spreadsheetURL);

	})

	// legendbutton.style.display='flex';

	var imgbutton= document.createElement("button");
	imgbutton.id='measureADRbutton2';
	imgbutton.innerText='Click to view as PDF';
	imgbutton.style.backgroundColor='rgb(255,0,255)';


	imgbutton.addEventListener('mouseover',function(){
	imgbutton.style.boxShadow='0 0 8px 2px rgb(255,0,255)';
	})
	imgbutton.addEventListener('mouseout',function(){
	imgbutton.style.boxShadow='none';
	})

	imgbutton.addEventListener('click',function(){
	window.open( dropboxLink);
	})

	underimg.append(legendbutton);
	underimg.append(imgbutton);
	underimg.style.display='flex';
	rightside.append(imgcanvas);
	rightside.insertBefore(imgcanvas,underimg);
	});
	}
	else{
	$.ajax({
	type: "POST",
	url: "/2.1Trial/",

	// set content type header to use Flask response.get_json()
	contentType: "application/json",

	// convert data/object to JSON to send
	data: JSON.stringify({allvalues:answers}),

	// expect JSON data in return (e.g. Flask jsonify)
	dataType: "json",

	// handle response
	success: function(response) {
	console.log(response);
	},
	error: function(err) {
	console.log(err);
	}
	}).done(function(data){
	spreadsheetURL=data[0];
	var backimg=document.getElementById('backgroundimg');
	var rightside=document.getElementById('rightside');
	document.getElementById("loading").hidden = true;

	document.getElementById('duplicater').removeAttribute('hidden');
	document.getElementById('doneebackground').removeAttribute('hidden');


	// clearInterval()
	document.getElementById('measureADRbutton').removeAttribute('disabled');
	document.getElementById('measureADRbutton').style.cursor='pointer';
	document.getElementById('measureADRbutton').style.color = 'white';
	document.getElementById('measureADRbutton').style.backgroundColor="#16c72e";
	document.getElementById('measureADRbutton').addEventListener('mouseover',function(){
	document.getElementById('measureADRbutton').style.color='black';
	document.getElementById('measureADRbutton').style.boxShadow=' 0 0 8px 2px #16c72e';
	})


	document.getElementById('measureADRbutton').addEventListener('mouseout',function(){
	document.getElementById('measureADRbutton').style.color='white';
	document.getElementById('measureADRbutton').style.boxShadow='none';
	});

	var legendbutton= document.createElement("button");
	legendbutton.id='measureADRbutton2';
	legendbutton.innerText='Legend and Data created';
	legendbutton.style.backgroundColor='rgb(5, 43, 235)';
	legendbutton.addEventListener('mouseover',function(){
	legendbutton.style.boxShadow='0 0 8px 2px rgb(5, 43, 235)';
	})
	legendbutton.addEventListener('mouseout',function(){
	legendbutton.style.boxShadow='none';
	})


	// legendbutton.margin.horizontal='0';
	legendbutton.addEventListener('click',function(){
	window.open( spreadsheetURL);

	})
	underimg.append(legendbutton);

	});
	}
	if (ratio1 ==0)



	$.get('/projecttomeasure/'+ JSON.stringify(answers)).then( function(data) {
	try{
	// var mp3_url = 'https://media.geeksforgeeks.org/wp-content/uploads/20190531135120/beep.mp3';
	// (new Audio(mp3_url)).play()
	// retrieveLinks()
	var backimg=document.getElementById('backgroundimg');
	var rightside=document.getElementById('rightside');
	document.getElementById("loading").hidden = true;

	document.getElementById('duplicater').removeAttribute('hidden');
	document.getElementById('doneebackground').removeAttribute('hidden');


	// clearInterval()
	document.getElementById('measureADRbutton').removeAttribute('disabled');
	document.getElementById('measureADRbutton').style.cursor='pointer';
	document.getElementById('measureADRbutton').style.color = 'white';
	document.getElementById('measureADRbutton').style.backgroundColor="#16c72e";
	document.getElementById('measureADRbutton').addEventListener('mouseover',function(){
	document.getElementById('measureADRbutton').style.color='black';
	document.getElementById('measureADRbutton').style.boxShadow=' 0 0 8px 2px #16c72e';
	})


	document.getElementById('measureADRbutton').addEventListener('mouseout',function(){
	document.getElementById('measureADRbutton').style.color='white';
	document.getElementById('measureADRbutton').style.boxShadow='none';
	});

	if (formvalues['selectprojs'].startsWith('3.2'))
	{
	// /* data[0]--> img , data[1]-->dataframe (goes to legend lsa ) , data [2] -->pdf dropbox shareable link ,data[3]-> spreadsheetId, data[4],spreadsheeturl */
	SimilarAreaDictionary=data[1];
	dropboxLink=data[2];
	spreadsheetId=data[3];
	spreadsheetURL=data[4];
	list1= data[5]
	}
	if (formvalues['selectprojs'].startsWith('2.2'))
	{
	//ignore data[0] --> img passed directly
	//dropboxLink=data[1]

	//spreadsheetId=data[2]
	//spreadsheetURL=data[3]


	}
	else{
	SimilarAreaDictionary=data[1];
	spreadsheetURL= data[2];
	spreadsheetId= data[3];
	colorsUsed = data[4];
	list1 = data[5]; //list of pdf markups
	dropboxLink=data[6];
	namepathArr=data[8];
	}
	var imgcanvas= document.createElement("img");
	imgcanvas.src= 'data:image/gif;base64,' +data[0];
	// imgcanvas.width=700;
	imgcanvas.height=600;
	console.log(imgcanvas.width)
	imgcanvas.id='imgcanvas';
	imgcanvas.alt="Larry";
	imgcanvas.style.zIndex=999;

	var underimg=document.getElementById('underimgbuttons');

	backimg.style.backgroundColor="transparent";
	backimg.style.opacity="1";
	getlegendstoDirectory()
	// backimg.append(imgcanvas);
	var legendbutton= document.createElement("button");
	legendbutton.id='measureADRbutton2';
	legendbutton.innerText='Legend and Data created';
	legendbutton.style.backgroundColor='rgb(5, 43, 235)';
	legendbutton.addEventListener('mouseover',function(){
	legendbutton.style.boxShadow='0 0 8px 2px rgb(5, 43, 235)';
	})
	legendbutton.addEventListener('mouseout',function(){
	legendbutton.style.boxShadow='none';
	})


	// legendbutton.margin.horizontal='0';
	legendbutton.addEventListener('click',function(){
	window.open( spreadsheetURL);

	})

	// legendbutton.style.display='flex';

	var imgbutton= document.createElement("button");
	imgbutton.id='measureADRbutton2';
	imgbutton.innerText='Click to view as PDF';
	imgbutton.style.backgroundColor='rgb(255,0,255)';


	imgbutton.addEventListener('mouseover',function(){
	imgbutton.style.boxShadow='0 0 8px 2px rgb(255,0,255)';
	})
	imgbutton.addEventListener('mouseout',function(){
	imgbutton.style.boxShadow='none';
	})

	imgbutton.addEventListener('click',function(){
	window.open( dropboxLink);
	})

	underimg.append(legendbutton);
	underimg.append(imgbutton);
	underimg.style.display='flex';
	rightside.append(imgcanvas);
	rightside.insertBefore(imgcanvas,underimg);
	} catch (error) {
	console.log(error)
	alert('Error '+error+' occured. Please Refresh the page')
	}
	//////////////////////////////////////////////////////////////////////////////////////////
	let delrows2 = {
	content : {},
	id : {},
	subject :{}
	};

	var delrows1='';
	var flag=0;
	pdfpath=[];
	pdfpath.push(formvalues['selectproj'],formvalues['selectprojp'] ,formvalues['selectprojs'])
	var rightsideids=[];
	/*
	if (formvalues['selectprojs'].startsWith('1.0') \|\| formvalues['selectprojs'].startsWith('3.2') )
	interval= setInterval( function() {

	const delay = ms => new Promise(res => setTimeout(res, ms));
	delay(2000)
	$.getJSON('/_submission', {

	// dict: JSON.stringify(SimilarAreaDictionary),
	dict1: JSON.stringify(list1),
	spreadsheetId:spreadsheetId,
	pdfpathpath:JSON.stringify(pdfpath),
	path:Object.fromEntries(formData)['measureselectname'],

	},function(data1){

	if(data1.length >0){
	delrows1=data1[0];
	console.log(data1, delrows1,delrows2)
	console.log(typeof delrows1)
	console.log(typeof delrows2)
	if (JSON.stringify(delrows1)=== JSON.stringify(delrows2))
	{
	console.log('same')
	}
	else{
	// if (data1[0]==1){
	// return data1[0];
	flag=1
	if (confirm("Changes have been made in the markups. Would you like to save and view them in the legend?")) {


	$.getJSON('/deletemarkupsroute', {
	dict: JSON.stringify(SimilarAreaDictionary),
	deletedrows: JSON.stringify(delrows1),
	path:Object.fromEntries(formData)['measureselectname'],
	spreadsheetId:spreadsheetId,
	areaPermArr: JSON.stringify(data[7]),
	section: Object.fromEntries(formData)['selectprojs'],
	pdfpathpath:JSON.stringify(pdfpath),



	}, function(data2){
	console.log(data2)
	})
	}
	}
	}
	});

	delay(6000);
	$.getJSON('/_submission', {
	// dict: JSON.stringify(SimilarAreaDictionary),
	dict1: JSON.stringify(list1),
	spreadsheetId:spreadsheetId,
	pdfpathpath:JSON.stringify(pdfpath),
	path:Object.fromEntries(formData)['measureselectname'],

	},function(data11){
	delrows2=data11[0];

	})
	},9000)
	*/


	/////////////////////////
	})

	}

	document.getElementById("myForm").addEventListener("submit", function (e) {
	e.preventDefault();
	getData(e.target);
	});

	// document.getElementById("myFormsecond").addEventListener("submit", function (e) {
	// e.preventDefault();
	// getSecondData(e.target);
	// });

	////////////////////////////////////////////
	var measitemVal=''

	function get3rddropdown(){
	var divduplicater= document.getElementsByClassName('duplicaterclass')[0].children;
	var inputs =divduplicater[1]; //1st dpdwn
	var selections = divduplicater[2]; //2nd dpdwn
	var measitem = divduplicater[3];//3rd dpdwn
	measitemVal=measitem.value.toString() //3rd dpdwn value


	if (addciconval>0){

	for (let i =1 ; i <=addciconval ; i++){
	var inputs1 = document.getElementsByClassName("measurementselections"+i)[0]; //1sr dpdwn
	var selections1 = document.getElementsByClassName("selections"+i)[0]; //2nd dropdown
	var measitem1 = document.getElementsByClassName("measureitems"+i)[0]; //3rd dpdwn
	measitemVal1=measitem1.value.toString() //3rd dpdwn value

	inputs1.addEventListener('change',function(){
	// window.onclick = elem => {
	// if(elem.target.className=="measurementselections")
	// {
	console.log('clickedfirst')
	if (inputs1.value.startsWith('ground') & (selections1.value.startsWith('Pile') \|\| !selections1.value )){ //has old option(pile caps or options are empty) add new options

	selections1.innerHTML=''
	var opt0 = document.createElement("OPTION") ;
	opt0.text= 'Ground Beams:m2';
	opt0.value= 'Ground Beams:m2';
	opt0.id='gbA' ;
	selections1.add(opt0);

	var opt1 = document.createElement("OPTION") ;
	opt1.text= 'Ground Beams:m';
	opt1.value= 'Ground Beams:m';
	opt1.id='gbP';
	selections1.add(opt1);
	}

	if (inputs1.value.startsWith('Floor') & (selections1.value.startsWith('Wall') \|\| !selections1.value )){
	selections1.innerHTML='';
	var opt2 = document.createElement("OPTION") ;
	opt2.text= 'Floor:m2';
	opt2.value= 'Floor:m2';
	opt2.id='floorA' ;
	selections1.add(opt2);

	}

	if (inputs1.value.startsWith('Wall') & (selections1.value.startsWith('Floor') \|\| !selections1.value ) ){
	selections1.innerHTML='';
	var opt3 = document.createElement("OPTION") ;
	opt3.text= 'Wall:m';
	opt3.value= 'Wall:m';
	opt3.id='WallP';
	selections1.add(opt3);

	}

	if (selections1.value=='Ground Beams:m' \|\| selections1.value=='Wall:m'){
	// measitem1.innerHTML='';
	var ii, L = measitem1.options.length - 1;
	for(ii = L; ii >= 0; ii--) {
	if (measitem1.options[ii].value=='Area')
	measitem1.remove(ii);
	}
	if (measitem1.options.length <2){
	var opt4= document.createElement("option");
	opt4.text= 'Length';
	opt4.value= 'Length';
	opt4.id= 'Length';
	measitem1.add(opt4);

	var opt5= document.createElement("option");
	opt5.text= 'Perimeter';
	opt5.value= 'Perimeter';
	opt5.id= 'Perimeter';
	measitem1.add(opt5);

	var opt6= document.createElement("option");
	opt6.text= 'Count';
	opt6.value= 'Count';
	opt6.id= 'Count';
	measitem1.add(opt6);
	}
	}

	if (selections1.value=='Ground Beams:m2' \|\| selections1.value=='Floor:m2'){
	measitem1.innerHTML='';
	var opt7= document.createElement("option");
	opt7.text= 'Area';
	opt7.value= 'Area';
	opt7.id= 'Area';
	measitem1.add(opt7);

	}

	});
	if (selections1.value=='Ground Beams:m' \|\| selections1.value=='Wall:m'){
	// measitem1.innerHTML='';
	var ii, L = measitem1.options.length - 1;
	for(ii = L; ii >= 0; ii--) {
	if (measitem1.options[ii].value=='Area')
	measitem1.remove(ii);
	}
	if (measitem1.options.length <2){
	var opt21= document.createElement("option");
	opt21.text= 'Length';
	opt21.value= 'Length';
	opt21.id= 'Length';
	measitem1.add(opt21);

	var opt22= document.createElement("option");
	opt22.text= 'Perimeter';
	opt22.value= 'Perimeter';
	opt22.id= 'Perimeter';
	measitem1.add(opt22);

	var opt23= document.createElement("option");
	opt23.text= 'Count';
	opt23.value= 'Count';
	opt23.id= 'Count';
	measitem1.add(opt23);

	}
	}

	if (selections1.value=='Ground Beams:m2' \|\| selections1.value=='Floor:m2'){
	measitem1.innerHTML='';
	var opt41= document.createElement("option");
	opt41.text= 'Area';
	opt41.value= 'Area';
	opt41.id= 'Area';
	measitem1.add(opt41);

	}
	// inputs1.addEventListener('change',function(){
	if (inputs1.value=='pile caps' & (selections1.value.startsWith('Ground') \|\| !selections1.value ) ){
	selections1.innerHTML='';
	var opt51 = document.createElement("OPTION") ;
	opt51.text= 'Pile Caps:m2';
	opt51.value= 'Pile Caps:m2';
	opt51.id='pcA' ;
	selections1.add(opt51);


	var opt61 = document.createElement("OPTION") ;
	opt61.text= 'Pile Caps:m';
	opt61.value= 'Pile Caps:m';
	opt61.id='pcP';
	selections1.add(opt61);


	}


	if (selections1.value=='Pile Caps:m2'){
	measitem1.innerHTML='';
	var opt91= document.createElement("option");
	opt91.text= 'Area';
	opt91.value= 'Area';
	opt91.id= 'Area';
	measitem1.add(opt91);

	}

	// });
	if (selections1.value=='Pile Caps:m'){
	// measitem1.innerHTML='';
	var ii, L = measitem1.options.length - 1;
	for(ii = L; ii >= 0; ii--) {
	if (measitem1.options[ii].value=='Area')
	measitem1.remove(ii);
	}
	if (measitem1.options.length <2){
	var opt72= document.createElement("option");
	opt72.text= 'Length';
	opt72.value= 'Length';
	opt72.id= 'Length';
	measitem1.add(opt72);

	var opt82= document.createElement("option");
	opt82.text= 'Perimeter';
	opt82.value= 'Perimeter';
	opt82.id= 'Perimeter';
	measitem1.add(opt82);

	var optk= document.createElement("option");
	optk.text= 'Count';
	optk.value= 'Count';
	optk.id= 'Count';
	measitem1.add(optk);
	}
	}

	if (selections1.value=='Pile Caps:m2'){
	measitem1.innerHTML='';
	var opt92= document.createElement("option");
	opt92.text= 'Area';
	opt92.value= 'Area';
	opt92.id= 'Area';
	measitem1.add(opt92);

	}


	}
	}
	inputs.addEventListener('click',function(){

	if (inputs.value=='ground beams' & (selections.value.startsWith('Pile') \|\| !selections.value )){
	selections.innerHTML='';
	var optn = document.createElement("OPTION") ;
	optn.text= 'Ground Beams:m2';
	optn.value= 'Ground Beams:m2';
	optn.id='gbA' ;
	selections.add(optn);
	// }
	// else if (measitemVal=='perimeter') {
	var opt = document.createElement("OPTION") ;
	opt.text= 'Ground Beams:m';
	opt.value= 'Ground Beams:m';
	opt.id='gbP';
	selections.add(opt);

	}

	if (inputs.value=='Floor' & (selections.value.startsWith('Wall') \|\| !selections.value )){
	selections.innerHTML='';
	var optn = document.createElement("OPTION") ;
	optn.text= 'Floor:m2';
	optn.value= 'Floor:m2';
	optn.id='floorA' ;
	selections.add(optn);

	}

	if (inputs.value=='Wall' & (selections.value.startsWith('Floor') \|\| !selections.value ) ){
	selections.innerHTML='';

	var opt = document.createElement("OPTION") ;
	opt.text= 'Wall:m';
	opt.value= 'Wall:m';
	opt.id='WallP';
	selections.add(opt);

	}
	if (inputs.value=='pile caps' & (selections.value.startsWith('Ground') \|\| !selections.value )){
	selections.innerHTML='';
	var optn = document.createElement("OPTION") ;
	optn.text= 'Pile Caps:m2';
	optn.value= 'Pile Caps:m2';
	optn.id='pcA' ;
	selections.add(optn);

	var opt = document.createElement("OPTION") ;
	opt.text= 'Pile Caps:m';
	opt.value= 'Pile Caps:m';
	opt.id='pcP';
	selections.add(opt);

	}

	if (selections.value=='Ground Beams:m' \|\| selections.value=='Wall:m'){
	measitem.innerHTML='';
	var op2= document.createElement("option");
	op2.text= 'Length';
	op2.value= 'Length';
	op2.id= 'Length';
	measitem.add(op2);

	var op3= document.createElement("option");
	op3.text= 'Perimeter';
	op3.value= 'Perimeter';
	op3.id= 'Perimeter';
	measitem.add(op3);

	var optk1= document.createElement("option");
	optk1.text= 'Count';
	optk1.value= 'Count';
	optk1.id= 'Count';
	measitem.add(optk1);
	}

	if (selections.value=='Ground Beams:m2' \|\|selections.value=='Floor:m2' ){
	measitem.innerHTML='';
	var op4= document.createElement("option");
	op4.text= 'Area';
	op4.value= 'Area';
	op4.id= 'Area';
	measitem.add(op4);

	}

	});
	selections.addEventListener('click',function(){

	if (selections.value=='Ground Beams:m'){
	measitem.innerHTML='';
	var op2= document.createElement("option");
	op2.text= 'Length';
	op2.value= 'Length';
	op2.id= 'Length';
	measitem.add(op2);

	var op3= document.createElement("option");
	op3.text= 'Perimeter';
	op3.value= 'Perimeter';
	op3.id= 'Perimeter';
	measitem.add(op3);

	var optk1= document.createElement("option");
	optk1.text= 'Count';
	optk1.value= 'Count';
	optk1.id= 'Count';
	measitem.add(optk1);


	}

	if (selections.value=='Ground Beams:m2'\|\| selections.value=='Floor:m2' ){
	measitem.innerHTML='';
	var op4= document.createElement("option");
	op4.text= 'Area';
	op4.value= 'Area';
	op4.id= 'Area';
	measitem.add(op4);

	}

	if (selections.value=='Pile Caps:m'){
	measitem.innerHTML='';
	var op2= document.createElement("option");
	op2.text= 'Length';
	op2.value= 'Length';
	op2.id= 'Length';
	measitem.add(op2);

	var op3= document.createElement("option");
	op3.text= 'Perimeter';
	op3.value= 'Perimeter';
	op3.id= 'Perimeter';
	measitem.add(op3);

	var optk1= document.createElement("option");
	optk1.text= 'Count';
	optk1.value= 'Count';
	optk1.id= 'Count';
	measitem.add(optk1);
	}

	if (selections.value=='Pile Caps:m2'){
	measitem.innerHTML='';
	var op4= document.createElement("option");
	op4.text= 'Area';
	op4.value= 'Area';
	op4.id= 'Area';
	measitem.add(op4);

	}
	})


	}


	var repeatforloopI=0;
	function getmctName(){
	var listofnames=[];
	var flag=0;
	arrallvalues=[];
	arrmctNames=[];
	arrFinalMCNames=[];

	var allmcnamestext= document.querySelectorAll('input[name="text1name"]');
	allmcnamestext.forEach(function(elem){
	if (elem.value)
	arrallvalues.push(elem.value);
	})

	for (ii=0 ; ii<=addciconval; ii++){
	if (ii==0){
	//first one -- not duplicated yet --first row onlyy
	var divduplicater= document.getElementsByClassName('duplicaterclass')[0].children;
	console.log(divduplicater)
	var selections = divduplicater[2];//ex: Gb:m
	measitemVal=divduplicater[3].value; // ex:area
	var div=divduplicater[5].children;// first repeatforloopclass

	var divValues=['text1'+div[0].value, div[1].value , div[2].value];
	mctname=[selections.value ,divValues , measitemVal ];
	if(div[0].value && div[1].value && div[2].value)
	{
	flag=1;
	arrmctNames.push( mctname);
	}
	else if (div[0].value && !div[1].value && !div[2].value) {
	mctname=[selections.value ,['text1'+div[0].value ], measitemVal ];
	flag=1;
	arrmctNames.push( mctname);
	}
	else if (div[0].value && div[1].value && !div[2].value) {
	mctname=[selections.value ,['text1'+div[0].value, div[1].value ] , measitemVal ];
	flag=1;
	arrmctNames.push( mctname);
	}
	//////////////////////////////////////////


	count=0;
	var ii0selections='';
	for (let child =1;child <divduplicater.length;child++)
	{
	if( divduplicater[child] instanceof(HTMLDivElement) )
	count++;
	ii0selections=divduplicater[2].value;
	measitemVal=divduplicater[3].value;

	// for (let i =1 ; i <=divduplicater.length ; i++){
	// console.log('inloop',ii.toString()+i.toString())

	// var replicatedDivChildren=document.getElementsByClassName('duplicaterclass')[0].children
	// for (child=0;child<replicatedDivChildren.length;child++)
	// {
	console.log('child',divduplicater[child])
	if (divduplicater[child].className.startsWith('repeatforloopclass') && child !=5)
	{
	console.log('c',divduplicater[child].children)
	var divValues2=['text1'+divduplicater[child].children[0].value, divduplicater[child].children[1].value , divduplicater[child].children[2].value];
	mctname1=[ii0selections ,divValues2 , measitemVal];
	if(divduplicater[child].children[0].value && divduplicater[child].children[1].value && divduplicater[child].children[2].value)
	{
	// console.log(mctname1);
	flag=1;
	arrmctNames.push(mctname1);
	}

	else if(divduplicater[child].children[0].value && !divduplicater[child].children[1].value && !divduplicater[child].children[2].value) {
	mctname1=[ii0selections ,[ 'text1'+divduplicater[child].children[0].value ], measitemVal ];
	flag=1;
	arrmctNames.push( mctname1);
	}
	else if(divduplicater[child].children[0].value && divduplicater[child].children[1].value && !divduplicater[child].children[2].value) {
	mctname1=[ii0selections ,['text1'+divduplicater[child].children[0].value , divduplicater[child].children[1].value] , measitemVal];
	flag=1;
	arrmctNames.push( mctname1);
	}
	}
	// }

	}

	}

	else if (ii>0){
	var divduplicater= document.getElementsByClassName('duplicaterclass'+ii)[0].children;

	console.log(divduplicater)
	selections = divduplicater[2];//document.getElementsByClassName("selections")[0];
	measitemVal=divduplicater[3].value;
	div=divduplicater[5].children;
	var divValues=['text1'+div[0].value, div[1].value , div[2].value];
	mctname=[selections.value ,divValues , measitemVal ];

	if(div[0].value && div[1].value && div[2].value)
	{
	flag=1;
	arrmctNames.push( mctname);
	}
	else if (div[0].value && !div[1].value && !div[2].value) {
	mctname=[selections.value ,['text1'+div[0].value ], measitemVal ];
	flag=1;
	arrmctNames.push( mctname);
	}
	else if (div[0].value && div[1].value && !div[2].value) {
	mctname=[selections.value ,['text1'+div[0].value, div[1].value ] , measitemVal ];
	flag=1;
	arrmctNames.push( mctname);
	}

	}

	if (ii>0 && addciconval >0 && jj>0)
	{
	count=0;
	var ii0selections='';
	var replicatedDivChildren=document.getElementsByClassName('duplicaterclass'+ii)[0].children;
	console.log('cc',replicatedDivChildren)

	for (let o =0;o <=replicatedDivChildren.length;o++)
	{
	if( replicatedDivChildren[o] instanceof(HTMLDivElement) )
	{ count++;
	// console.log('divvvv',cc[o])

	ii0selections=replicatedDivChildren[2].value;
	measitemVal=replicatedDivChildren[3].value;
	// count++;
	// ii0selections=cc[3].value;
	}
	}

	console.log(count);

	// for (let i =1 ; i < count ; i++){
	console.log('aaaanloop',addciconval.toString()+i.toString())

	// var replicatedDivChildren=document.getElementsByClassName('repeatforloopclass'+ii.toString()+i.toString())[0].children;
	// var replicatedDivChildren=document.getElementsByClassName('duplicaterclass'+i.toString())[0].children
	for (child=0;child<replicatedDivChildren.length;child++)
	{
	if (replicatedDivChildren[child].className.startsWith('repeatforloopclass') && child !=5)
	{

	// console.log(document.getElementsByClassName('repeatforloopclass'+ii.toString()+i.toString())[0].parentElement)
	// if
	var divValues2=['text1'+replicatedDivChildren[child].children[0].value, replicatedDivChildren[child].children[1].value , replicatedDivChildren[child].children[2].value];
	mctname1=[ii0selections ,divValues2 , measitemVal];
	if(replicatedDivChildren[child].children[0].value && replicatedDivChildren[child].children[1].value && replicatedDivChildren[child].children[2].value)
	{
	arrmctNames.push(mctname1);
	flag=1;
	}
	else if(replicatedDivChildren[child].children[0].value && !replicatedDivChildren[child].children[1].value && !replicatedDivChildren[child].children[2].value)
	{
	mctname1=[ii0selections ,['text1'+replicatedDivChildren[child].children[0].value] , measitemVal];
	arrmctNames.push(mctname1);
	flag=1;
	}
	else if(replicatedDivChildren[child].children[0].value && replicatedDivChildren[child].children[1].value && !replicatedDivChildren[child].children[2].value)
	{
	mctname1=[ii0selections ,['text1'+replicatedDivChildren[child].children[0].value, replicatedDivChildren[child].children[1].value] , measitemVal];
	arrmctNames.push(mctname1);
	flag=1;
	}

	}
	}
	// }

	}

	// }

	// else
	// {
	//first entry only
	arrFinalMCNames= arrmctNames.slice();


	if(arrmctNames.length >1){
	var name=[];
	allnames=[];
	arrFinalMCNames = arrmctNames.slice();
	// console.log('finalnameflawel',arrFinalMCNames)
	var newarr=[];
	// console.log('NAME = ' ,arrmctNames);
	for (let i=0;i<arrmctNames.length; i++)
	{ str='';
	newarr=[];

	for (let j=i+1; j<arrmctNames.length; j++)
	{



	if (arrmctNames[i][0] == arrmctNames[j][0] && arrmctNames[i][2] == arrmctNames[j][2] &&arrmctNames[i][1][1] == arrmctNames[j][1][1] && arrmctNames[i][1][2] == arrmctNames[j][1][2])
	{ var selectionsname=arrmctNames[i][0] ;
	measitemVal=arrmctNames[i][2];
	flag=1;
	console.log('foorrr',arrmctNames[i][0],arrmctNames[i]);

	if (allnames.includes(arrmctNames[i][1][0]) )
	{
	var index = allnames.indexOf(allnames[i] );
	if (index !== -1) {
	allnames.splice(index, 1);
	}
	}
	if (!name.includes(arrmctNames[i][1][0] ) ){
	// console.log('msh mwgod');
	name.push(arrmctNames[i][1][0]);
	newarr.push(arrmctNames[i][1][0]);
	var index = arrFinalMCNames.indexOf(arrmctNames[i] );
	if (index !== -1) {
	arrFinalMCNames.splice(index, 1);
	}
	}
	if (!name.includes(arrmctNames[j][1][0] ) ){
	// console.log('msh mwgodj')
	name.push(arrmctNames[j][1][0]);
	newarr.push(arrmctNames[j][1][0]);
	var index1 = arrFinalMCNames.indexOf(arrmctNames[j] );
	if (index1 !== -1) {
	arrFinalMCNames.splice(index1, 1);
	}
	}
	if (!name.includes(arrmctNames[i][1][1] ) \|\|!name.includes(arrmctNames[i][1][2] ) ){
	name.push( arrmctNames[i][1][1] , arrmctNames[i][1][2] );
	newarr.push(arrmctNames[i][1][1] , arrmctNames[i][1][2] );

	}

	}

	}
	console.log(measitemVal)
	// allnames.push(newarr );
	if (newarr.length >0){
	flag=1;
	arrFinalMCNames.push([selectionsname , newarr, measitemVal ]);


	}
	}

	console.log('finals',arrFinalMCNames);
	// console.log('fl='+flag)


	}

	arrFinalMCNames.push([spreadsheetId , pdfpath[2]]);

	}
	if (flag==1){

	$.get( '/mctnametoGoogleSheet/'+ JSON.stringify(arrFinalMCNames)).then( function(data) {
	listofnames=data[1];

	var is_same = listofnames.length == arrallvalues.length && listofnames.every(function(element, index) {
	if(arrallvalues.indexOf(element)>-1){
	return element = arrallvalues[arrallvalues.indexOf(element)];
	}
	});
	// console.log(is_same);
	// if (is_same)
	// {

	spreadsheetURL=spreadsheetURL+ '/edit#gid='+data[0].toString()
	// console.log(spreadsheetURL);
	window.open(spreadsheetURL.toString()) //sheetid

	// }
	// else{
	// alert('Guessed names in the legend do not match the names in the ADR Console. Please revise the inputs.');

	// }

	});
	}

	}


	function addmctnameicon(){

	repeatforloopI+=1
	var dupDiv;
	if (clonedDivId==0){
	var dupDiv=document.getElementById('duplicater'); //pass kol div hna
	}
	else{
	var dupDiv=document.getElementById(clonedDivId); //pass kol div hna //akher div et3mlt
	}

	var div=document.getElementById('repeatforloophidden');
	// console.log('vcc, ' ,dupDiv.children[5]);
	var clone = div.cloneNode(true); // "deep" clone

	jj++;
	if (clonedDivId==0)
	clone.style.marginLeft='5px';
	else
	clone.style.marginLeft='1px';

	window.onclick = elem => {
	if (elem.target.tagName.startsWith('LORD-ICON') && elem.target.id.startsWith('addmctnameid')){
	console.log(elem.target.parentElement.parentElement.childNodes[1].value)
	clone.id = 'repeatforloop'+ elem.target.parentElement.parentElement.childNodes[1].value[0] + ++elem.target.parentElement.parentElement.childNodes[1].value[1];
	clone.setAttribute('class','repeatforloopclass'+elem.target.parentElement.parentElement.childNodes[1].value[0] + elem.target.parentElement.parentElement.childNodes[1].value[1]);
	clone.setAttribute('name','repeatforloopname'+elem.target.parentElement.parentElement.childNodes[1].value[0] + elem.target.parentElement.parentElement.childNodes[1].value[1]);
	clone.childNodes[11].id='addmctnameid'+elem.target.parentElement.parentElement.childNodes[1].value[0] + elem.target.parentElement.parentElement.childNodes[1].value[1];
	clone.childNodes[15].id='deletemctnameid'+elem.target.parentElement.parentElement.childNodes[1].value[0] + elem.target.parentElement.parentElement.childNodes[1].value[1];

	if (elem.target.parentElement.nextElementSibling)
	{
	$("#"+elem.target.parentElement.parentElement.id).append(clone);
	}
	else
	{
	$("#"+elem.target.parentElement.parentElement.id).append(clone);
	$("#"+elem.target.parentElement.id).insertBefore(clone,document.getElementById('doneebackground'));
	}
	}
	}
	// dupDiv.appendChild(clone);
	// dupDiv.insertBefore(clone,document.getElementById('doneebackground'));

	}

	function deletemctnameicon(){
	window.onclick = elem => {
	if (elem.target.tagName.startsWith('LORD-ICON') && elem.target.id.startsWith('deletemctnameid'))
	{
	var numb = elem.target.parentElement.id.match(/\d/g);
	if (numb==null){
	numb=''
	}
	else
	numb = numb.join("");
	console.log(numb)
	var deletethisdiv= document.getElementById('repeatforloop'+ numb);
	// deletethisdiv.parentElement.childNodes[11].value[1]=deletethisdiv.parentElement.childNodes[11].value[1]-1;
	deletethisdiv.parentNode.removeChild(deletethisdiv);


	}
	}
	}

	function colors(){
	var ele = document.getElementsByName('fullimage');
	var levels = document.getElementsByName('levelsnamelabel')[0];
	var levelsin = document.getElementsByName('levelsnameinput')[0]; //number of colors -- color pickers
	var drp = document.getElementById("colorpickers");

	for (i = 0; i < ele.length; i++) {
	if (ele[i].checked)
	if (ele[i].value==220){
	console.log(ele[i].value);
	levels.style.visibility='visible';
	levelsin.style.visibility='visible';
	}
	else
	{
	levels.style.visibility='hidden';
	levelsin.style.visibility='hidden';
	drp.innerHTML='';
	}

	}

	}


	var ry = [[]];
	var canvas = document.querySelector("#myCanvas");

	// let w = (canvas.width = 450);
	// let h = (canvas.height = 280);

	var ctx = canvas.getContext("2d");

	var drp;

	var color = 'rgb(47,255,255)';

	function change(e){
	color = this.value;
	allcolors.push( color);
	}
	let hex2rgb= c=> `rgb(${c.match(/\w\w/g).map(x=>+`0x${x}`)})`;

	myCanvas.addEventListener("click", e => {

	var offset = canvas.getBoundingClientRect();
	var x = e.clientX - offset.left;
	var y = e.clientY - offset.top;
	//a new point is pushed on the last array of ry


	ry[ry.length - 1].push({ x: x, y: y, color:hex2rgb(color) });
	drawChart();

	});

	function drawChart() {
	ctx.lineWidth = 15;

	// for every array in the ry array
	for (let index = 0; index < ry.length; index++) {
	// for every point in the ry[index]
	for (let i = 0; i < ry[index].length; i++) {
	firstcircle=[]
	let l = ry[index][i];
	// draw the circle
	if (i==0){
	drawCircle(l.x, l.y);
	firstcircle=[l.x,l.y]
	}
	// draw the line
	if (i > 0) {

	let last = ry[index][i - 1];
	ctx.beginPath();
	ctx.moveTo(last.x, last.y);
	ctx.lineTo(l.x, l.y);
	ctx.strokeStyle = l.color;
	ctx.stroke();


	}

	}
	}


	}



	function drawCircle(x, y) {
	ctx.beginPath();
	ctx.arc(x, y,1, 0, Math.PI *2);
	ctx.strokeStyle = 'rgb(47,255,255)';
	ctx.stroke();
	}







	/If the plan contains levels, open canvas window/
	/Set canvas code to be visible on the new window with the pdftoimg as the background/

	// pdfPathtoImg='/'+proj.value +'/'+proj1.value +'/'+ projsec.value+'/'+ pdfname
	var levelsin = document.getElementById('levelcheckbox');
	var canvaswindow= document.getElementById('canvaswindow');
	var undoButtonId=document.getElementById('undoButtonId');
	NewShapeButtonId=document.getElementById('NewShapeButtonId');
	// NewShapeButtonId.style.color='blue';
	var savecanvas=document.getElementById('savecanvas');

	levelsin.addEventListener('click',function(){
	if( document.getElementById('levelcheckbox').checked)
	{
	// console.log(proj.value, proj1.value , projsec.value, pdfname)
	$.get( '/canvaspdftoimgBackground/'+pdfname).then (function(data){

	var popup = window.open('');
	// popup.document.body.style.zoom=0.4;
	var element = popup.document.createElement('div');
	element.setAttribute('id', 'mydiv');
	canvaswindow.childNodes[1].height=data[1]; //canvas -->child 3
	canvaswindow.childNodes[1].width=data[2];
	element.append(canvaswindow);
	console.log(canvaswindow.childNodes)

	canvaswindow.removeAttribute('hidden');
	var imgDrawon =document.createElement("img");
	imgDrawon.src = 'data:image/gif;base64,' +data[0];
	imgDrawon.width=data[2];
	imgDrawon.id='imgcanvas';
	// imgDrawon.alt="Larry";


	imgDrawon.onload = function(){

	}


	undoButtonId.addEventListener("click", e => {
	//when undoButtonId is clicked the last point from the last array is deleted
	if (ry[ry.length - 1].length > 0) {
	ry[ry.length - 1].pop();
	} else {
	//if the last array is empty I delete this array
	ry.pop();
	//and then I delete the last point from the last array
	ry[ry.length - 1].pop();
	}
	// delete everything
	ctx.clearRect(0,0, canvas.width, canvas.height);
	//redraw background to draw lines over again
	ctx.drawImage(imgDrawon,0,0);


	drawChart();


	});

	var win = popup.document.body;
	win.appendChild(element);
	var drp=popup.document.body.childNodes[0].childNodes[0].childNodes[7];
	NewShapeButtonId.addEventListener('click',function(){

	// drp.lastChild.onchange = change; //canvas color element --> child 7
	ry.push([]);
	});

	// ['click', 'touchend'].forEach(event => console.log(event))
	drp.childNodes[1].addEventListener('click',function(){
	drp.childNodes[1].onchange=change;

	})
	})

	savecanvas.addEventListener('click',function(){
	var image = new Image();
	image.id = "pic";
	image.src = canvas.toDataURL("image/png");
	canvasimg=image.src;
	})



	}
	})

	function generatecolorPickers(){
	var drp = canvaswindow.childNodes[7];
	var section = document.getElementsByClassName('selectionsProjs')[0];
	console.log('section::', section.value)
	// if (levelsin.value>1)
	// {
	if (section.value.startsWith('3.2')){
	alert('Levels are not supported in section 3.2.')
	// levelsin.value=1;
	}
	else if (section.value.startsWith('1.0'))
	{
	// drp.innerHTML = '';
	// console.log(levelsin.value)
	// for (let i=0 ; i<levelsin.value ; i++)
	// {
	var color = document.createElement("input");
	color.type='color';
	color.value=getRandomColor();
	console.log(color.value)
	color.id= 'color';
	color.name='color1';
	// if ( (drp.offsetWidth) >250)
	drp.style.display='block';

	drp.append(color);

	if (i==0)
	color.style.marginLeft='1%';

	}
	console.log(drp)
	return drp
	}
	// else{
	// drp.innerHTML = '';
	// levelsin.value=1;
	// }
	// }
	// else
	// {
	// drp.innerHTML = '';
	// }
	// }
	// var tooltipelem = document.getElementById("tooltip");
	// console.log(tooltipelem)
	// tooltipelem.addEventListener('mouseover',function(){
	// tooltipelem.value='Choose whether this project contains levels or not. If you wish to measure all of the plan, let the number of plans equal to one. If you wish to measure certain regions of the plan or have the plan divided into levels, please type in a number greater than 1 (number of levels).'

	// })
	// // tooltipelem.addEventListener('mouseout',function(){
	// // tooltipelem.outerText='';


	// // })
	function getRandomColor() {
	var letters = '0123456789ABCDEF';
	var color = '#';
	for (var i = 0; i < 6; i++) {
	color += letters[Math.floor(Math.random() * 16)];
	}
	return color;
	}
	function getSecondData(){
	// var formData = new FormData(form);
	// colorsarr=[];
	// val=0;
	// answers=[];
	// var ratio1=0;
	// var ratio2=0;
	// var tomeasureproj=''
	// // iterate through entries...
	// for (var pair of formData.entries()) {
	// console.log(pair[0] + ": " + pair[1]);
	// }
	getmctName()

	}
	function chooseFirstdrpdwn()
	{
	var section = document.getElementsByClassName("selectionsProjs")[0]
	var drpdwn= document.getElementById('measurementselectionsid');

	drpdwn.innerHTML='';

	if (section.value.startsWith('1.0'))
	{

	var opt = document.createElement("OPTION");
	opt.text= 'Select';
	opt.value= "";
	opt.hidden=true;
	drpdwn.add(opt);
	var optn = document.createElement("OPTION");
	optn.text= 'Ground Beams';
	optn.value= "ground beams";
	drpdwn.add(optn);
	var optn1 = document.createElement("OPTION");
	optn1.text= 'Pile Caps';
	optn1.value= "pile caps";
	drpdwn.add(optn1);
	}
	if (section.value.startsWith('3.2'))
	{
	var opt = document.createElement("OPTION");
	opt.text= 'Select';
	opt.value= "";
	opt.hidden=true;
	drpdwn.add(opt);
	var optn = document.createElement("OPTION");
	optn.text= 'Floor';
	optn.value= "Floor";
	drpdwn.add(optn);
	var optn1 = document.createElement("OPTION");
	optn1.text= 'Wall';
	optn1.value= "Wall";
	drpdwn.add(optn1);
	}
	}


	/////////////////////////////////////LEGEND DIRECTORY//////////////////////////////////

	/////////////////////////////////////////////////////////////////////////////////////////
	/////////////////////////////////////////////////////////////////////////////////////////

	var pathsarr={};

	var legendscontent= document.getElementById('legends');

	var createdTimeDiv= document.getElementById('createdTimeDiv');
	getlegendstoDirectory()
	function getlegendstoDirectory(){
	$.get( '/getdrivelinks/'+'0').then (function(data){
	console.log(data)
	pathsarr=data
	if (!legendscontent.children[1]){
	var allprjdiv= document.createElement("div");
	allprjdiv.id='allprjdiv';
	}
	else{
	legendscontent.children[1].innerHTML='';
	var allprjdiv=legendscontent.children[1];
	allprjdiv.id='allprjdiv';

	}

	for (let proj=0; proj<prjname1.length ; proj++)
	{
	var labelprojdiv= document.createElement("div");
	var newlabelproj = document.createElement("label")
	var i = document.createElement("i");
	var brk= document.createElement("br");
	i.className="fa fa-folder"
	newlabelproj.textContent=prjname1[proj];
	newlabelproj.id='prjname';
	newlabelproj.className='prjnameclass';

	labelprojdiv.append(i)
	labelprojdiv.append(newlabelproj)
	labelprojdiv.append(brk)
	allprjdiv.append(labelprojdiv)

	}
	legendscontent.append(allprjdiv)
	// legendscontent.querySelectorAll('label').forEach(function(elem){
	// elem.addEventListener('click',legendparts);
	// })


	// function legendparts(){

	legendscontent.querySelectorAll('label').forEach(function(elem){


	elem.addEventListener('click',function(){


	if (!elem.parentElement.children[3]){

	if (elem.textContent==prjname1[0]){
	var allpartsdiv= document.createElement("div");
	for (let prjpart=0;prjpart<prjname1parts.length;prjpart++)
	{
	var labelpartdiv= document.createElement("div");
	labelpartdiv.style.marginLeft='20px';

	var newlabelpart = document.createElement("label")
	var i = document.createElement("i");
	var brk= document.createElement("br");
	i.className="fa fa-folder"

	newlabelpart.textContent=prjname1parts[prjpart];
	newlabelpart.id='prjpart';
	newlabelpart.className='prjpartclass';

	labelpartdiv.append(i)
	labelpartdiv.append(newlabelpart)
	labelpartdiv.append(brk)

	allpartsdiv.append(labelpartdiv)
	}
	elem.parentElement.append(allpartsdiv)
	elem.parentElement.querySelector('i').className='fa fa-folder-open';
	// console.log(elem.parentNode.childNodes[3].children)

	}






	if (elem.textContent==prjname1[1]){
	var allpartsdiv= document.createElement("div");
	for (let prjpart=0;prjpart<prjname2parts.length;prjpart++)
	{
	var labelpartdiv= document.createElement("div");
	labelpartdiv.style.marginLeft='20px';

	var newlabelpart = document.createElement("label")
	var i = document.createElement("i");
	var brk= document.createElement("br");
	i.className="fa fa-folder"

	newlabelpart.textContent=prjname2parts[prjpart];
	newlabelpart.id='prjpart';
	newlabelpart.className='prjpartclass';

	labelpartdiv.append(i)
	labelpartdiv.append(newlabelpart)
	labelpartdiv.append(brk)

	allpartsdiv.append(labelpartdiv)
	}
	elem.parentElement.append(allpartsdiv)
	elem.parentElement.querySelector('i').className='fa fa-folder-open';
	// console.log(elem.parentNode.childNodes[3].children)

	}


	if (elem.textContent==prjname1[2]){
	var allpartsdiv= document.createElement("div");
	for (let prjpart=0;prjpart<prjname3parts.length;prjpart++)
	{
	var labelpartdiv= document.createElement("div");
	labelpartdiv.style.marginLeft='20px';

	var newlabelpart = document.createElement("label")
	var i = document.createElement("i");
	var brk= document.createElement("br");
	i.className="fa fa-folder"

	newlabelpart.textContent=prjname3parts[prjpart];
	newlabelpart.id='prjpart';
	newlabelpart.className='prjpartclass';

	labelpartdiv.append(i)
	labelpartdiv.append(newlabelpart)
	labelpartdiv.append(brk)

	allpartsdiv.append(labelpartdiv)
	}
	elem.parentElement.append(allpartsdiv)
	elem.parentElement.querySelector('i').className='fa fa-folder-open';
	// console.log(elem.parentNode.childNodes[3].children)

	}

	for (let c=0;c<elem.parentElement.children[3].children.length;c++)
	{


	elem.parentElement.children[3].children[c].children[1].addEventListener('click',function(){
	var partlabelText=elem.parentElement.children[3].children[c].children[1].textContent;

	// if (!elem.parentElement.children[3]){
	if (! elem.parentElement.children[3].children[c].children[3]) {
	if (partlabelText==prjname1parts[0]){

	console.log('fisr')

	var labelsecdiv= document.createElement("div");
	labelsecdiv.style.marginLeft='25px';
	for (let cc=0;cc<prjname1sec1.length;cc++){
	var seperateSecdiv = document.createElement("div")
	var newlabelsec = document.createElement("label")
	var i = document.createElement("i");
	var brk= document.createElement("br");
	i.className="fa fa-folder"

	newlabelsec.textContent=prjname1sec1[cc];
	newlabelsec.id='prjsec';
	newlabelsec.className='prjsecclass';
	if (!(newlabelsec.textContent.toString().startsWith('1.0') \|\| newlabelsec.textContent.startsWith('3.2') \|\| newlabelsec.textContent.startsWith('2.2') \|\| newlabelsec.textContent.startsWith('2.1')))
	{
	newlabelsec.style.color='lightgray';
	i.style.color='lightgray'
	newlabelsec.style.cursor='default';
	}
	seperateSecdiv.append(i)
	seperateSecdiv.append(newlabelsec)
	seperateSecdiv.append(brk)
	labelsecdiv.append(seperateSecdiv)

	elem.parentElement.children[3].children[c].append(labelsecdiv)
	// console.log(labelsecdiv)
	}
	elem.parentElement.children[3].children[c].children[0].className='fa fa-folder-open';
	}
	else if (partlabelText==prjname1parts[1]){

	console.log('sec')

	var labelsecdiv= document.createElement("div");
	labelsecdiv.style.marginLeft='25px';
	for (let cc=0;cc<prjname1sec2.length;cc++){
	var seperateSecdiv = document.createElement("div")
	var newlabelsec = document.createElement("label")
	var i = document.createElement("i");
	var brk= document.createElement("br");
	i.className="fa fa-folder"

	newlabelsec.textContent=prjname1sec2[cc];
	newlabelsec.id='prjsec';
	newlabelsec.className='prjsecclass';
	if (!(newlabelsec.textContent.toString().startsWith('1.0') \|\| newlabelsec.textContent.startsWith('3.2') \|\| newlabelsec.textContent.startsWith('2.2') \|\| newlabelsec.textContent.startsWith('2.1')))
	{
	newlabelsec.style.color='lightgray';
	i.style.color='lightgray'
	newlabelsec.style.cursor='default';
	}
	seperateSecdiv.append(i)
	seperateSecdiv.append(newlabelsec)
	seperateSecdiv.append(brk)
	labelsecdiv.append(seperateSecdiv)

	elem.parentElement.children[3].children[c].append(labelsecdiv)
	// console.log(labelsecdiv)
	}
	elem.parentElement.children[3].children[c].children[0].className='fa fa-folder-open';
	}

	else if (partlabelText==prjname1parts[2]){

	console.log('sec')

	var labelsecdiv= document.createElement("div");
	labelsecdiv.style.marginLeft='25px';
	for (let cc=0;cc<prjname1sec2.length;cc++){
	var seperateSecdiv = document.createElement("div")
	var newlabelsec = document.createElement("label")
	var i = document.createElement("i");
	var brk= document.createElement("br");
	i.className="fa fa-folder"

	newlabelsec.textContent=prjname1sec2[cc];
	newlabelsec.id='prjsec';
	newlabelsec.className='prjsecclass';
	if (!(newlabelsec.textContent.toString().startsWith('1.0') \|\| newlabelsec.textContent.startsWith('3.2') \|\| newlabelsec.textContent.startsWith('2.2') \|\| newlabelsec.textContent.startsWith('2.1')))
	{
	newlabelsec.style.color='lightgray';
	i.style.color='lightgray'
	newlabelsec.style.cursor='default';
	}
	seperateSecdiv.append(i)
	seperateSecdiv.append(newlabelsec)
	seperateSecdiv.append(brk)
	labelsecdiv.append(seperateSecdiv)

	elem.parentElement.children[3].children[c].append(labelsecdiv)
	// console.log(labelsecdiv)
	}
	elem.parentElement.children[3].children[c].children[0].className='fa fa-folder-open';
	}

	else if (partlabelText==prjname1parts[3]){

	console.log('sec')

	var labelsecdiv= document.createElement("div");
	labelsecdiv.style.marginLeft='25px';
	for (let cc=0;cc<prjname1sec4.length;cc++){
	var seperateSecdiv = document.createElement("div")
	var newlabelsec = document.createElement("label")
	var i = document.createElement("i");
	var brk= document.createElement("br");
	i.className="fa fa-folder"

	newlabelsec.textContent=prjname1sec4[cc];
	newlabelsec.id='prjsec';
	newlabelsec.className='prjsecclass';
	if (!(newlabelsec.textContent.toString().startsWith('1.0') \|\| newlabelsec.textContent.startsWith('3.2') \|\| newlabelsec.textContent.startsWith('2.2') \|\| newlabelsec.textContent.startsWith('2.1')))
	{
	newlabelsec.style.color='lightgray';
	i.style.color='lightgray'
	newlabelsec.style.cursor='default';
	}
	seperateSecdiv.append(i)
	seperateSecdiv.append(newlabelsec)
	seperateSecdiv.append(brk)
	labelsecdiv.append(seperateSecdiv)

	elem.parentElement.children[3].children[c].append(labelsecdiv)
	// console.log(labelsecdiv)
	}
	elem.parentElement.children[3].children[c].children[0].className='fa fa-folder-open';
	}

	else if (partlabelText==prjname2parts[0] \|\| partlabelText==prjname2parts[1] ){

	console.log('sec')

	var labelsecdiv= document.createElement("div");
	labelsecdiv.style.marginLeft='25px';
	for (let cc=0;cc<prjname2sec.length;cc++){
	var seperateSecdiv = document.createElement("div")
	var newlabelsec = document.createElement("label")
	var i = document.createElement("i");
	var brk= document.createElement("br");
	i.className="fa fa-folder"

	newlabelsec.textContent=prjname2sec[cc];
	newlabelsec.id='prjsec';
	newlabelsec.className='prjsecclass';
	if (!(newlabelsec.textContent.toString().startsWith('1.0') \|\| newlabelsec.textContent.startsWith('3.2') \|\| newlabelsec.textContent.startsWith('2.2') \|\| newlabelsec.textContent.startsWith('2.1')))
	{
	newlabelsec.style.color='lightgray';
	i.style.color='lightgray'
	newlabelsec.style.cursor='default';
	}
	seperateSecdiv.append(i)
	seperateSecdiv.append(newlabelsec)
	seperateSecdiv.append(brk)
	labelsecdiv.append(seperateSecdiv)

	elem.parentElement.children[3].children[c].append(labelsecdiv)
	// console.log(labelsecdiv)
	}
	elem.parentElement.children[3].children[c].children[0].className='fa fa-folder-open';
	}


	else if (partlabelText==prjname3parts[0] ){

	console.log('sec')

	var labelsecdiv= document.createElement("div");
	labelsecdiv.style.marginLeft='25px';
	for (let cc=0;cc<prjname3sec1.length;cc++){
	var seperateSecdiv = document.createElement("div")
	var newlabelsec = document.createElement("label")
	var i = document.createElement("i");
	var brk= document.createElement("br");
	i.className="fa fa-folder"

	newlabelsec.textContent=prjname3sec1[cc];
	newlabelsec.id='prjsec';
	newlabelsec.className='prjsecclass';
	if (!(newlabelsec.textContent.toString().startsWith('1.0') \|\| newlabelsec.textContent.startsWith('3.2') \|\| newlabelsec.textContent.startsWith('2.2') \|\| newlabelsec.textContent.startsWith('2.1')))
	{
	newlabelsec.style.color='lightgray';
	i.style.color='lightgray'
	newlabelsec.style.cursor='default';
	}
	seperateSecdiv.append(i)
	seperateSecdiv.append(newlabelsec)
	seperateSecdiv.append(brk)
	labelsecdiv.append(seperateSecdiv)

	elem.parentElement.children[3].children[c].append(labelsecdiv)
	// console.log(labelsecdiv)
	}
	elem.parentElement.children[3].children[c].children[0].className='fa fa-folder-open';
	}
	else if (partlabelText==prjname3parts[1] ){

	console.log('sec')

	var labelsecdiv= document.createElement("div");
	labelsecdiv.style.marginLeft='25px';
	for (let cc=0;cc<prjname3sec2.length;cc++){
	var seperateSecdiv = document.createElement("div")
	var newlabelsec = document.createElement("label")
	var i = document.createElement("i");
	var brk= document.createElement("br");
	i.className="fa fa-folder"

	newlabelsec.textContent=prjname3sec2[cc];
	newlabelsec.id='prjsec';
	newlabelsec.className='prjsecclass';
	if (!(newlabelsec.textContent.toString().startsWith('1.0') \|\| newlabelsec.textContent.startsWith('3.2') \|\| newlabelsec.textContent.startsWith('2.2') \|\| newlabelsec.textContent.startsWith('2.1')))
	{
	newlabelsec.style.color='lightgray';
	i.style.color='lightgray'
	newlabelsec.style.cursor='default';
	}
	seperateSecdiv.append(i)
	seperateSecdiv.append(newlabelsec)
	seperateSecdiv.append(brk)
	labelsecdiv.append(seperateSecdiv)

	elem.parentElement.children[3].children[c].append(labelsecdiv)
	// console.log(labelsecdiv)
	}
	elem.parentElement.children[3].children[c].children[0].className='fa fa-folder-open';
	}

	else if (partlabelText==prjname3parts[2] ){

	console.log('sec')

	var labelsecdiv= document.createElement("div");
	labelsecdiv.style.marginLeft='25px';
	for (let cc=0;cc<prjname3sec3.length;cc++){
	var seperateSecdiv = document.createElement("div")
	var newlabelsec = document.createElement("label")
	var i = document.createElement("i");
	var brk= document.createElement("br");
	i.className="fa fa-folder"

	newlabelsec.textContent=prjname3sec3[cc];
	newlabelsec.id='prjsec';
	newlabelsec.className='prjsecclass';
	if (!(newlabelsec.textContent.toString().startsWith('1.0') \|\| newlabelsec.textContent.startsWith('3.2') \|\| newlabelsec.textContent.startsWith('2.2') \|\| newlabelsec.textContent.startsWith('2.1')))
	{
	newlabelsec.style.color='lightgray';
	i.style.color='lightgray'
	newlabelsec.style.cursor='default';
	}
	seperateSecdiv.append(i)
	seperateSecdiv.append(newlabelsec)
	seperateSecdiv.append(brk)
	labelsecdiv.append(seperateSecdiv)
	console.log(labelsecdiv)
	elem.parentElement.children[3].children[c].append(labelsecdiv)
	// console.log(labelsecdiv)
	}

	elem.parentElement.children[3].children[c].children[0].className='fa fa-folder-open';
	}

	/Get path to legends - project name , part , section/

	// $.get( '/getdrivelinks/'+'0').then (function(data){
	// pathsarr=data
	for (let k=0;k<elem.parentElement.children[3].children[c].children[3].children.length;k++)
	{



	elem.parentElement.children[3].children[c].children[3].children[k].children[1].addEventListener('click',function(){
	legendpathh='/'+elem.textContent +'/' + partlabelText + '/' + elem.parentElement.children[3].children[c].children[3].children[k].children[1].textContent+'/'
	console.log('cchild',elem.parentElement.children[3].children[c].children[3].children[k].children[3])

	if (!elem.parentElement.children[3].children[c].children[3].children[k].children[3])
	{

	for (let o=0; o<pathsarr.length;o++){

	if (JSON.stringify(pathsarr[o][1]) === JSON.stringify(legendpathh) ){

	var legendsdiv= document.createElement("div");
	legendsdiv.style.marginLeft='20px';

	var seperateSecdiv = document.createElement("div")
	var legendlabel = document.createElement("label")
	var brk= document.createElement("br");
	legendlabel.textContent=pathsarr[o][0]
	legendlabel.id='legend';

	legendlabel.className='legendclass';
	var legendlabeldiv= document.createElement("div");
	legendlabeldiv.id='legendtimediv'

	var createdTimelbl = document.createElement("label")
	var brk= document.createElement("br");
	createdTimelbl.textContent=new Date(pathsarr[o][2].createdTime ).toUTCString()
	createdTimelbl.id='legendtime';
	createdTimelbl.className='legendclass';

	var modifiedTimelbl = document.createElement("label")
	var brk= document.createElement("br");
	modifiedTimelbl.textContent=new Date(pathsarr[o][2].modifiedTime ).toUTCString()
	modifiedTimelbl.id='legendmodtime';
	modifiedTimelbl.className='legendclass';


	console.log(pathsarr[o][2].createdTime,pathsarr[o][2].modifiedTime )
	// createdTimeDiv.append(createdTimelbl);
	seperateSecdiv.append(legendlabel)
	legendlabeldiv.append(createdTimelbl)
	legendlabeldiv.append(modifiedTimelbl)

	seperateSecdiv.style.display='flex';
	seperateSecdiv.id='legendlbldivwhole'
	seperateSecdiv.append(legendlabeldiv);
	seperateSecdiv.append(brk);
	legendsdiv.append(seperateSecdiv);
	console.log(legendsdiv);

	elem.parentElement.children[3].children[c].children[3].children[k].append(legendsdiv)


	/open legend link/
	seperateSecdiv.addEventListener('click',function(){
	window.open('https://docs.google.com/spreadsheets/d/'+pathsarr[o][3])
	})
	if (elem.parentElement.children[3].children[c].children[3].children[k].children[0].className=='fa fa-folder')
	elem.parentElement.children[3].children[c].children[3].children[k].children[0].className='fa fa-folder-open';
	}


	}




	}


	else{
	for (let y =elem.parentElement.children[3].children[c].children[3].children[k].children.length; y>=0;y--)
	{
	if (elem.parentElement.children[3].children[c].children[3].children[k].children[y] instanceof HTMLDivElement)

	{
	elem.parentElement.children[3].children[c].children[3].children[k].removeChild(elem.parentElement.children[3].children[c].children[3].children[k].children[y]);
	}
	}
	elem.parentElement.children[3].children[c].children[3].children[k].children[0].className='fa fa-folder';
	}

	})


	}

	}
	else{
	elem.parentElement.children[3].children[c].removeChild(elem.parentElement.children[3].children[c].children[3]);
	elem.parentElement.children[3].children[c].children[0].className='fa fa-folder';

	}

	})
	}
	}
	/remove all parts along with sectionns of element (prj name)s/
	else{
	elem.parentElement.removeChild(elem.parentElement.children[3]);
	elem.parentElement.children[0].className='fa fa-folder';
	// =''
	}





	// })
	})
	})
	// }
	})
	}
	function sortlegends(clicked_id){
	var allarr=[]
	for ( let u=0 ; u<document.getElementById('allprjdiv').children.length ; u++)
	{
	//Project names folder
	if (document.getElementById('allprjdiv').children[u].children[3])
	{

	for (let uu=0 ; uu<document.getElementById('allprjdiv').children[u].children[3].children.length;uu++)
	{
	//Project part folder
	if(document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3])
	{
	// console.log(document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children)
	var arr=[]

	for (let uuu=0;uuu<document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children.length;uuu++)
	{//NRM section folder - direct parent
	// console.log(document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children)
	// if(document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children instanceof HTMLDivElement)
	// {

	for (let h=0;h<document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children.length;h++)
	{

	if (document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children[h] instanceof HTMLDivElement)
	{
	if (clicked_id == 'sortBtnCreateDesc' \|\| clicked_id == 'sortBtnCreateAsc' )
	arr.push([document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children[h], new Date(document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children[h].children[0].children[1].children[0].textContent)])
	if (clicked_id == 'sortBtnEditDesc' \|\| clicked_id == 'sortBtnEditAsc' )
	arr.push([document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children[h], new Date(document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children[h].children[0].children[1].children[1].textContent)])
	// legends in this parent only

	if (h==document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children.length-1)
	{
	if (clicked_id == 'sortBtnCreateDesc' \|\| clicked_id == 'sortBtnEditDesc' )
	x=arr.sort((a, b) => b[1]- a[1])
	if (clicked_id=='sortBtnCreateAsc' \|\| clicked_id == 'sortBtnEditAsc' )
	x=arr.sort((a, b) => a[1]- b[1])
	console.log(clicked_id,x)
	if (document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children[h] instanceof HTMLDivElement)
	{
	console.log(document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu] )
	for (let k =0; k <x.length; k++)
	{
	console.log(x[k][0])
	// // console.log(document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children)
	// // for (let el=0; el <x[k][0].length; el++)
	// // // {
	document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].appendChild(x[k][0])
	// // // }
	}
	}
	}
	}


	}

	// //get which clicked button - created time - edited time - ASC, DSC ?

	// document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children[h].children[0].children
	// }
	}
	allarr.push(arr);
	}
	}
	}
	}
	console.log(allarr);
	}
	</script>