<?php 
	// include 'autoload.php';
	// include '../Config/config.php';

	require_once '../autoload.php';

	if(!isset($_SESSION['language']))
		$_SESSION['language']="FR";
	
	function CleanString($val)
	{
		$val1 = str_replace("\r\n", "", $val);
		
		return str_replace("'", "\'", $val1);
	}
?>
<!DOCTYPE html>
<html>


  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>QUAADRIL</title>
	  <style type="text/css">
	  		.rotate180 {
    		-webkit-transform: rotate(180deg);
    		-moz-transform: rotate(180deg);
    		-o-transform: rotate(180deg);
    		-ms-transform: rotate(180deg);
    		transform: rotate(180deg);
		}
		.clickablepoint{
			cursor:pointer;
		}
		.clickablepoint:hover{
			font-weight:bold;
			text-decoration:underline;
		}
		.missingdoc{
			cursor:pointer;
			text-decoration:underline;
			color:red;
			font-size: 12px;
		}
		.pdflink{
			cursor:pointer;
			text-decoration:underline;
			color:blue;
			font-size: 14px;
		}
		
		.doc_text {
    		background: #ddd;
    		color: black;
    		padding: .2em ,.5em;
    		border: solid .1em ;
    		border-radius: 1em;
    		margin-top: 1.2em;
		}
		.doc_text :last-child {margin-bottom: 0}
		.doc_text :first-child {margin-top: 0; padding: 2em;}
		.pointValidated {
			background-color: rgb(163,209,173);
		}
		.pointOK {
			background-color: rgb(163,209,173);
		}
		.pointKO {
			background-color: rgb(248,215,218);
		}
		.pointKOK {
			background-color: rgb(255,243,205);
		}

		html, body {
			margin: 0;
			padding: 0;
			height: 100vh;
		}		

		.splitter {
    		width: 100%;
    		height: 100px;
    		display: flex;
		}

		#separator {
    		cursor: col-resize;
    		background-color: #aaa;
    		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
    		background-repeat: no-repeat;
    		background-position: center;
    		width: 10px;
    		height: 100%;

    		/* Prevent the browser's built-in drag from interfering */
    		-moz-user-select: none;
    		-ms-user-select: none;
    		user-select: none;
		}

		#pan_left 
		{
    		width: 20%;
    		height: 100%;
    		min-width: 10px;
		}

		#pan_right 
		{
    		width: 80%;
    		height: 100%;
    		min-width: 10px;
		}
  </style>


  </head>

  
  <script>
  	/*
	class CPointList
	{
		constructor(id, type)
		{
			this.ID= id;
			this.Type= type;				// 0 : point,   1 : title
		}
	};
	*/
    
	// var current_point = new CPointList(-1, 0);
	// var point_list = [];
	var language_exist= false;
	
	// var GStandardVersion= -1;
	// var GLanguage= "";
	
	// var current_tag= -1;
	// var new_tags = [];
	
	// var new_point= 0;
	
	var last_proc_checked = -1;
	
	<?php 
		if(isset($_REQUEST['language'])) 			$GLanguage = $_REQUEST['language'];
		if(isset($_REQUEST['standard_version'])) 	$GStandardVersion = $_REQUEST['standard_version'];
	?>
	
	GStandardVersion = <?php echo json_encode($GStandardVersion); ?>;
	GLanguage = <?php echo json_encode($GLanguage); ?>;
	
	class subrecord{
		constructor(){
			this.audit_id=-1;
			this.scope_id=-1;
			this.scope2_id=-1;
			this.point_id=-1;
			this.tag_id=-1;
			/*this.force_doctext="";
			this.force_docid=-1;*/
			this.remark="";		
			this.forcedstatus=false;
			this.doc_id=-1;
		}
	};
	
	function CleanString(val)
	{
		var val1 = val.replace("\r\n", "");
		
		return val1.replace("'", "\'");
	}
	
	function getNext(point)
	{
		var p= getPoint_Listpos(point);

		return(p>=point_list.length-1)?getPoint_Listpos(current_point):(p+1);
	}
	
	function getPrevious(point)
	{
		var p= getPoint_Listpos(point);
		return(p<=0)?getPoint_Listpos(current_point):(p-1);
	}
	
	function getPoint_Listpos(point)
	{
		for(var i=0;i<point_list.length;i++)
		{
			if(point_list[i].ID==point.ID)
			{
				return i;
			}
		}
		return -2;
	}
    function go(c)
    {
      	if(!c.data.replace(/\s/g,''))
        	c.parentNode.removeChild(c);
    }

    function clean(d)
    {
      var bal=d.getElementsByTagName('*');

      for(i=0;i<bal.length;i++){
        a=bal[i].previousSibling;
        if(a && a.nodeType==3)
          go(a);
        b=bal[i].nextSibling;
        if(b && b.nodeType==3)
          go(b);
      }
      return d;
    }

    function getxhr(){
      var xhr = null;

      if(window.XMLHttpRequest) // Firefox et autres
        xhr = new XMLHttpRequest();
      else if(window.ActiveXObject){ // Internet Explorer
        try {
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                } catch(e) {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
        }
        else { // XMLHttpRequest non supportÃ¯Â¿Â½ par le navigateur
            alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
            xhr = false;

        }
        return xhr;
    }

	function SavePointText(id)
	{
		let s = document.getElementById("IdcLanguage");
		let language = s.value;
		let name = document.getElementById("IdcPointName").value;		 
		let description= document.getElementById("IdcPointDescription").value;		 
		

		param =
			"action=" + LanguageExist +
			"&point_id=" + id + 
			"&language=" + language + 
			"&name=" + name + 
			"&description=" + encodeURIComponent(description);
			
	
		var xhr= getxhr();
		xhr.onreadystatechange = function f()
		{
			if(xhr.readyState == 4 && xhr.status == 200) 
			{
				var  response = xhr.responseText;
				reponse = clean(xhr.responseXML.documentElement);
				
				var status = reponse.getElementsByTagName('status');
				
				if(status.length > 0)
				{
					var value = status.item(0).getAttribute("value");
					
					if(value != "ok")
						alert(value);
				}
			}
		};
			
		xhr.open("POST","./SubFW/database/referentiel/point_text_saver.php",false);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send(param);
	}
	
	function SavePointProperties()
	{
		var ret_val = new CPointList(-1, 0);

		level1 = document.getElementById("IdcLevel1").value;		 
		level2 = document.getElementById("IdcLevel2").value;		 
		level3 = document.getElementById("IdcLevel3").value;		 
		level4 = document.getElementById("IdcLevel4").value;		 
		level5 = document.getElementById("IdcLevel5").value;		 
		orderInLevel= document.getElementById("IdcOrderInLevel").value;		 
		date_end = document.getElementById("IdcDateEnd").value;		 
		date_begin = document.getElementById("IdcDateBegin").value;		 
		quaad_version= document.getElementById("IdcQuaadVersion").value;		 
		isTitle= document.getElementById("IdcIsTitle").checked;
		
		
		param = 
			"point_id=" + current_point.ID + 
			"&level1=" + level1 + 
			"&level2=" + level2 + 
			"&level3=" + level3 + 
			"&level4=" + level4 + 
			"&level5=" + level5 + 
			"&orderInLevel=" + orderInLevel + 
			"&date_end=" + date_end + 
			"&date_begin=" + date_begin +
			"&quaad_version=" + quaad_version +
			"&istitle=" + isTitle;
			
		var xhr= getxhr();
		xhr.onreadystatechange = function f()
		{
			if(xhr.readyState == 4 && xhr.status == 200) 
			{
				var  response = xhr.responseText;
				reponse = clean(xhr.responseXML.documentElement);
				
				var status = reponse.getElementsByTagName('status');
				
				if(status.length > 0)
				{
					var value = status.item(0).getAttribute("value");
					
					if(value != "ok")
						alert(value);
					else
					{
						var id = status.item(0).getAttribute("id");
						ret_val.ID = id;
						ret_val.Type =(isTitle==true)? 1: 0;
						SavePointText(id);
					}
				}
			}
		};
			
		xhr.open("POST","./SubFW/database/referentiel/point_properties_saver.php",false);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send(param);
		
		return ret_val;
	}
	
	
	
	function SaveQuaadTag()
	{
		var quaadpoint_id= current_point.ID;
		var quaadpoint_tag_id = current_tag;
		var procedure_type = -1;
		
		var table = document.getElementById("IdcTagsTable");
		if(table == null)
			return;
		
		var rows = table.rows;
	
		for(var i=1; i<rows.length; i++)
		{
			var cells = rows [i].cells;
			
			quaadpoint_tag_id = cells[0].textContent;
			scope = cells[1].firstChild.value;
			scope2 = cells[2].firstChild.value;
			global_scope= cells[3].firstChild.checked;
			proc_needed= cells[4].textContent;
			doc_needed= cells[5].firstChild.value;
			add_param= cells[6].firstChild.value;
			where_no_tagid= cells[7].firstChild.checked;
			document_scope= cells[8].firstChild.value;
			tag_name=cells[9].firstChild.value;
		
			var xhr= getxhr();
			xhr.onreadystatechange = function f()
			{
				if(xhr.readyState == 4 && xhr.status == 200) 
				{
					var  response = xhr.responseText;
					reponse = clean(xhr.responseXML.documentElement);
				
					var status = reponse.getElementsByTagName('status');
				
					if(status.length > 0)
					{
						var value = status.item(0).getAttribute("value");
					
						if(value != "ok")
							alert(value);
					}
				}
			};
		
			var param = 
			"quaadpoint_id=" + quaadpoint_id + 
			"&quaadpoint_tag_id=" + quaadpoint_tag_id + 
			//"&quaadpoint_tag_id=" + quaadpoint_tag_id + 
			"&scope=" + scope +
			"&scope2=" + scope2 +
			"&document_scope=" + document_scope +
			"&global_scope=" + global_scope +
			"&proc_needed=" + proc_needed +
			"&doc_needed=" + doc_needed +
			"&add_param=" + add_param +
			"&where_no_tagid=" + where_no_tagid+
			"&language=" + document.getElementById("IdcLanguage").value+
			"&tag_name="+tag_name;
		
			xhr.open("POST","./SubFW/database/referentiel/bquaadril/tag_saver.php",false);
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.send(param);
		}
	}
	
	function SaveAll()
	{
		var ret_val = SavePointProperties();
		
		SaveQuaadTag();
		
		new_point = 0;
		
		SASFillPointsList();
		
		SASSelectPoint(ret_val.ID, ret_val.Type);
	}
	
	
	function selectpoint1(point)
	{
		SASSelectPoint(point.ID, point.ChapterTitle, point.Type);
	}
	
		
	function ClickOnProcedure(ident)
	{
		if(last_proc_checked != -1)
		{	
			document.getElementById("procedure_" + last_proc_checked).checked = false;
		}
		
		document.getElementById("procedure_" + ident).checked = true;
		
		last_proc_checked = ident;
		
		document.getElementById("IdcProcNeeded_"+current_tag).innerText = ident;
	}

	
	
	function CurrentDate() 
	{
		let d = new Date;
		
        let month = '' +(d.getMonth() + 1);
        let day = '' + d.getDate();
        let year = d.getFullYear();

		if(month.length < 2)   month = '0' + month;
		if(day.length < 2)		day = '0' + day;

		return [year, month, day].join('-');
	}
		
	
	function ClickOnTag(ident)
	{
		SASSelectTag(ident);
	}
	
	function DeleteQuaadTag(tag_id)
	{
		if(confirm("This action is irreversible. Continue ?") != true)
			return;
		
		if(tag_id < -1)
		{
			for(var i=0; i<new_tags.length; i++)
			{
				if(new_tags [i] == tag_id)
				{
					new_tags.splice(i, 1);
				}
			}
		}
		else
		{
			var xhr= getxhr();
			xhr.onreadystatechange = function f()
			{
				if(xhr.readyState == 4 && xhr.status == 200) 
				{
					var  response = xhr.responseText;
					console.log(" Response : " + response);
					reponse = clean(xhr.responseXML.documentElement);
				
					var status = reponse.getElementsByTagName('status');
				
					if(status.length > 0)
					{
						var value = status.item(0).getAttribute("value");
					
						console.log(" Status : " + value);
						if(value != "ok")
							alert(value);
					}
				}
			};
		
			var param = "quaadpoint_tag_id=" + tag_id
		
			xhr.open("POST","./SubFW/database/referentiel/tag_remover.php",false);
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.send(param);
		}
		
		SASFillQuaadTag();
	}
	
	function AddQuaadTag()
	{
		var min_new_tags = -1;
		for(var i=0; i<new_tags.length; i++)
		{
			if(new_tags [i] < min_new_tags)
				min_new_tags = new_tags [i];
		}
		min_new_tags = min_new_tags - 1;
		new_tags.push(min_new_tags);		
		
		SASFillQuaadTag();
		
		SASSelectTag(min_new_tags);
	}
	
	
	
	
	
	function FillProcedureList()
	{
		last_proc_checked = -1;
		
		var xhra = getxhr();
		
		xhra.onreadystatechange = function f()
		{
			if(xhra.readyState == 4 && xhra.status == 200) 
			{
				var  response = xhra.responseText;
				reponse = clean(xhra.responseXML.documentElement);
				
				var procedures = reponse.getElementsByTagName('procedure');

				var maindiv=document.getElementById('main_div');
				
				tmp  = "<table id=\"IdcProceduresTable\" style=\"width: 100%;\" cellspacing=\"0\" cellpadding=\"5\" border=\"0\">";
				tmp += 		"<tbody>";
				
				for(var j = 0; j<procedures.length && procedures.length;j++)
				{
					var proc_id = procedures.item(j).getAttribute("id");
					var proc_type = procedures.item(j).getAttribute("type");
					var proc_name = procedures.item(j).getAttribute("name_fr");
					
					tmp += 		"<tr >";
					tmp += 			"<td>"+proc_id+"</td>";
					tmp += 			"<td>"+proc_type+"</td>";
					tmp += 			"<td>"+proc_name+"</td>";
					tmp +=			"<td><input type=\"checkbox\" id=\"procedure_"+proc_type+"\" onclick=\"ClickOnProcedure("+proc_type+")\"></input></td>";
					tmp += 		"</tr>";
				}
				
				tmp += 		"</tbody>";
				tmp += 	"</table>";
				
				maindiv.innerHTML = tmp;
			}
		};
	
		xhra.open("POST","./SubFW/database/referentiel/getprocedurelist.php",false);
		
		xhra.overrideMimeType('text/xml');
		
		xhra.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhra.send(null);
	}
	
	/*
	function FillPointsList()
	{
		last_proc_checked = -1;
		
		var xhra = getxhr();
		
		var param_c = "standard_version="+GStandardVersion+"&language="+GLanguage;
		
		xhra.onreadystatechange = function f()
		{
			if(xhra.readyState == 4 && xhra.status == 200) 
			{
				var  response = xhra.responseText;
				reponse = clean(xhra.responseXML.documentElement);
				
				var points = reponse.getElementsByTagName('point');

				var table_points = document.getElementById('table_points');
				
				var tmp = 		"<tbody>";
				
				if(new_point == 1)
				{
					id = -2;
					description = "New point";
					level= 1;
					
					
					tmp += 	"<tr>";
						tmp +=		"<td style=\"width: 100%; \">";
						// tmp +=			"<div id=\"summary_"+id+"\" onclick=\"selectpoint("+id+", 0);\" style=\"border-bottom: 1px solid gray;  width: 100%; font-size:12px; float: left; color:#484848; margin-left:10px; margin-top:2px; margin-bottom:1px;\">";
						tmp +=			"<div id=\"summary_"+id+"\" style=\"border-bottom: 1px solid gray;  width: 100%; font-size:12px; float: left; color:#484848; margin-left:10px; margin-top:2px; margin-bottom:1px;\">";
						tmp +=				"<table> ";
						tmp += 					"<tr>";
						tmp +=						"<td onclick=\"SASSelectPoint("+id+", 0);\" style=\"min-width: 40px; padding-left: 10px; padding-top: 0px; padding-right: 10px; padding-bottom: 0px;\">"+level+"</td>";
						tmp += 						"<td onclick=\"SASSelectPoint("+id+", 0);\" style=\"width: 100%; padding-left: 10px; padding-top: 0px; padding-right: 10px; padding-bottom: 0px;\">" + description + "</td>";
						tmp +=						"<td><img src=\"./SubFW/bmp/trash_white.png\" title=\"Delete point\" class=\"clickablepoint\" style=\"width:18px;vertical-align:middle;\" 	onclick=\"DeleteQuaadPoint("+id+")\"></td>";
						tmp += 					"</tr>";
						tmp += 				"</table>";
						tmp +=			"</div>";
						tmp += 		"</td>";
						tmp += "</tr>";
				}
				
				for(var j = 0; j<points.length && points.length;j++)
				{
					var id = points.item(j).getAttribute("id");
					var istitle = points.item(j).getAttribute("istitle");
					var description= points.item(j).getAttribute("description");
					var level = points.item(j).getAttribute("level");
					
					if(istitle == "t")
					{
						point_list.push(new CPointList(id, 1));
								
						tmp += 	"<tr>";								
						tmp +=		"<td>";
						tmp +=			"<div id=\"summary_" + id + "\" onclick=\"SASSelectPoint("+ id + ", 1);\" style=\"font-weight: bold; font-size:14px; float: left; color:#484848; margin-left:10px; margin-top:10px; margin-bottom:3px;\"><b>"+ description +"</b></div>";
						tmp +=		"</td>";
						tmp +=						"<td><img src=\"./SubFW/bmp/trash.png\" title=\"Delete point\" class=\"clickablepoint\" style=\"width:18px;vertical-align:middle;\" 	onclick=\"DeleteQuaadPoint("+id+")\"></td>";
						tmp +=	"</tr>";								
					}
					else
					{
						point_list.push(new CPointList(id, 0));
									
						tmp += 	"<tr>";
						tmp +=		"<td style=\"width: 100%; \">";
						tmp +=			"<div id=\"summary_"+id+"\" style=\"border-bottom: 1px solid gray;  width: 100%; font-size:12px; float: left; color:#484848; margin-left:10px; margin-top:2px; margin-bottom:1px;\">";
						tmp +=				"<table> ";
						tmp += 					"<tr>";
						tmp +=						"<td onclick=\"SASSelectPoint("+id+", 0);\" style=\"min-width: 40px; padding-left: 10px; padding-top: 0px; padding-right: 10px; padding-bottom: 0px;\">"+level+"</td>";
						tmp += 						"<td onclick=\"SASSelectPoint("+id+", 0);\" style=\"width: 100%; padding-left: 10px; padding-top: 0px; padding-right: 10px; padding-bottom: 0px;\">" + description + "</td>";
						tmp +=						"<td><img src=\"./SubFW/bmp/trash.png\" title=\"Delete point\" class=\"clickablepoint\" style=\"width:18px;vertical-align:middle;\" 	onclick=\"DeleteQuaadPoint("+id+")\"></td>";
						tmp += 					"</tr>";
						tmp += 				"</table>";
						tmp +=			"</div>";
						tmp += 		"</td>";
						tmp += "</tr>";
					}
				}
				
				tmp += 		"</tbody>";
				
				table_points.innerHTML = tmp;
			}
		};
	
		xhra.open("POST","./SubFW/database/referentiel/getpointslist.php",false);
		
		xhra.overrideMimeType('text/xml');
		
		xhra.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhra.send(param_c);
	}
	*/

	function DeleteQuaadPoint(point_id)
	{
		if(confirm("This action is irreversible. Continue ?") != true)
			return;
		
		if(point_id < -1)
		{
			new_point = 0;
		}
		else
		{
			var xhr= getxhr();
			xhr.onreadystatechange = function f()
			{
				if(xhr.readyState == 4 && xhr.status == 200) 
				{
					var  response = xhr.responseText;
					console.log(" Response : " + response);
					reponse = clean(xhr.responseXML.documentElement);
				
					var status = reponse.getElementsByTagName('status');
				
					if(status.length > 0)
					{
						var value = status.item(0).getAttribute("value");
					
						console.log(" Status : " + value);
						if(value != "ok")
							alert(value);
					}
				}
			};
		
			var param = "point_id=" + point_id
		
			xhr.open("POST","./SubFW/database/referentiel/point_remover.php",false);
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.send(param);
		}
		
		current_point.ID = -1;
		
		SASFillPointsList();
		
		SASFillQuaadPoint(); 	// Just for clear
	}	
	
	
	function AddQuaadPoint()
	{
		new_point = 1;
		
		SASFillPointsList();
		
		SASSelectPoint(-2, 0)
	}
	
  </script>
  
  
  
  <body style="font-family:Arial;">
  
  	<div class="container-fluid w-100 h-100 m-0 p-0">
		
			
								<div id="splitter" class="splitter" style="background-color: grey; width: 100%; height: 100%;">
										<div style="background-color: white; min-width: 100px; width: 500px;">
												<div class="d-flex flex-column w-100 h-100 m-0 p-0">

												<div class="row m-0 p-0">
														<div style="display: table-row; width: 100%; min-height: 100%; font-size: 14px; background-color:#dddddd;" >
																<div style="display: table-cell; width: 100%; height: 100%; min-height: 80px;" >Points list</div>
																<div style="display: table-cell; width: 100%; height: 100%; min-height: 80px;" ><img src="./SubFW/bmp/add_white.png" title="Add tag" class="clickablepoint" style="width:32px;vertical-align:middle;" onclick="AddQuaadPoint()"></div>
														</div>
												</div>
						
												<div class="row flex-grow-1 m-0 p-0" style="min-height: 0px;">
													<div style="width: 100%; height: 100%; overflow: auto;  ">
															<table id="table_points" style="width: 100%; height: 100%;">
															</table>
													</div>
												</div>

											</div>
							
										</div>	<!-- End pan_left -->
				
										<div id="separator"></div>		<!-- Splitter separator -->
				
										<div id="pan_right" style="background-color:white;" >

												<div style="display: table; width: 100%; height: 100%;" >
					
														<div style="display: table-row; width: 100%; min-height: 100%;" >
																<div style="display: table-cell; width: 100%; height: 100%;" >
																		<div style="display: table; width: 100%; height: 100%;" >
																				<div style="display: table-row; width: 100%; min-height: 100%; font-size: 14px; background-color:#dddddd;" >
																						<div style="display: table-cell; width: 100%; min-height: 80px;" >Point properties</div>
																				</div>
									
																				<div style="display: table-row; width: 100%; min-height: 100%; font-size: 12px;" >
																						<div style="display: table-cell; width: 100%; height: 100%;" >
																								<div id="quaadpoint_div" style="display: flex; flex-direction: column; background-color:white; max-height:calc(100vh - 125px); width: 100%; "></div>				
																						</div>
																				</div>
																		</div>
																</div>
														</div>
						
														<div style="display: table-row; width: 100%; min-height: 100%; font-size: 12px;" >
																<div style="display: table-cell; width: 100%; height: 100%;" >
																		<div style="display: table; width: 100%; height: 100%;" >
																				<div style="display: table-row; width: 100%; min-height: 100%; font-size: 14px; background-color:#dddddd;" >
																						<div style="display: table-cell; width: 100%; height: 100%; min-height: 80px;" >Tags associated</div>
																						<div style="display: table-cell; width: 100%; height: 100%; min-height: 80px;" ><img src="./SubFW/bmp/add_white.png" title="Add tag" class="clickablepoint" style="width:32px;vertical-align:middle;" 	onclick="AddQuaadTag()"></div>
																				</div>
									
																				<div style="display: table-row; width: 100%; min-height: 100%; font-size: 12px;" >
																						<div style="display: table-cell; width: 100%; height: 100%;" >
																								<div id="tags_div" style="display: flex; flex-direction: column; background-color:white; max-height: 100px; width: 100%; ">
																								</div>	
																						</div>
																				</div>
																		</div>
																</div>
														</div>
						
														<div style="display: table-row; width: 100%; min-height: 100%; font-size: 12px;" >
																<div style="display: table-cell; width: 100%; height: 100%;" >
																		<div style="display: table; width: 100%; height: 100%; padding-top: 2em; padding-bottom: 2em;" >
																				<div style="display: table-row; width: 100%; min-height: 100%; font-size: 14px; background-color:#dddddd;" >
																						<div style="display: table-cell; width: 100%; height: 100%; min-height: 80px;" >Procedures associated</div>
																				</div>
									
																				<div style="display: table-row; width: 100%; min-height: 100%; font-size: 12px;" >
																						<div style="display: table-cell; width: 100%; height: 100%;" >
																								<div id="main_div" style="overflow: auto; "></div>				
																						</div>
																				</div>
																		</div>
																</div>
														</div>
						
						
														<div style="display: table-row;" >
																<div style="display: table-cell; background-color: green; width: 100%; height: 45px;" >
																		<div id="nav_div" style="display: flex; flex-direction: row; z-index: 10; width: 100%; height:100%; background-color:black;color:#484848;">
																				<img src="./SubFW/bmp/first.png" title="First element" class="clickablepoint" style="width:32px;vertical-align:middle;" 				onclick="selectpoint1(point_list[0])" />
																				<img src="./SubFW/bmp/next1.png" title="Previous element" class="rotate180 clickablepoint" style="width:32px;vertical-align:middle;" 	onclick="selectpoint1(point_list[getPrevious(current_point)])" />
																				<img src="./SubFW/bmp/next1.png"  title="Next element" style="width:32px;vertical-align:middle;" class="clickablepoint" 				onclick="selectpoint1(point_list[getNext(current_point)])" />
																				<img src="./SubFW/bmp/first.png" title="Last element" class="rotate180 clickablepoint" style="width:32px;vertical-align:middle;" 	onclick="selectpoint1(point_list[point_list.length-1])" />
																				<span style="display: inline-flex; flex: 1; text-align: left; align-items: center; margin: 10px; font-size:12px; text-overflow: ellipsis;overflow: hidden;    white-space:nowrap;" id="nav_pointtitle"></span>
																				<button id="but_save" style="margin-left: auto; margin:10px;" onclick="SaveAll();">Sauver les modifications</button>
																		</div>
																</div>
														</div>
						
												</div>	<!-- End table -->
							
										</div>	<!-- End pan_right -->
				
								</div>		<!-- End splitter -->

  	</div>
	
	
  </body>
  
  
  <script>
	  
	 

	function dragElement(element, direction)
	{
		var   md; 		// remember mouse down info
		const pan_left  = document.getElementById("pan_left");
		const pan_right = document.getElementById("pan_right");

		element.onmousedown = onMouseDown;

		function onMouseDown(e)
		{
			md = 	{ 	e,
						offsetLeft:  element.offsetLeft,
						offsetTop:   element.offsetTop,
						firstWidth:  pan_left.offsetWidth,
						secondWidth: pan_right.offsetWidth
					};

			document.onmousemove = onMouseMove;
			document.onmouseup =() => 
			{
				document.onmousemove = document.onmouseup = null;
			}
		}

		function onMouseMove(e)
		{
			var delta = {x: e.clientX - md.e.clientX, y: e.clientY - md.e.clientY};

			if(direction == "H")
			{
				delta.x = Math.min(Math.max(delta.x, -md.firstWidth), md.secondWidth);

				element.style.left = md.offsetLeft + delta.x + "px";
				pan_left.style.width =(md.firstWidth + delta.x) + "px";
				pan_right.style.width =(md.secondWidth - delta.x) + "px";
			}
		}
	}

	dragElement(document.getElementById("separator"), "H");
	
	SASFillPointsList();
	
	FillProcedureList();
	
  </script>

</html>
