<html>
<head>
    <title>SoaScape - Dependencies Report</title>
    <meta charset="utf-8"/>
</head>


<script>
	// Globals
	var _currAgent;
	var _currAgentClean;
	//
	var _domain = "_outline";
	//
	// Singe mouse click on a mesh logic. 
	var _prevId2 = -1;
	var _doSelect = false;
	;

	// Functions

	function getQueryString(field, url) {
		var href = url ? url : window.location.href;
		var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
		var string = reg.exec(href);
		return string ? string[1] : null;
	}
			
	function getOutlineFile(cAgent) {
		var arry = cAgent.split("_^");
		console.log(cAgent + "  ..  " + arry[0]);
		return arry[0].trim();
	}

	function pageLoaded() {
		_currAgent = getQueryString("agent");
		if(_currAgent) _currAgentClean = getOutlineFile(_currAgent);			
		var dom = getQueryString("domain");
		if (dom) _domain = dom; else _domain = "_outline";
		pageLoad1();
		pageLoad2();
		resizeCanvas();
		window.onbeforeunload = null;
	}
	
	function pageLoad1() {
		if (!_currAgent) return;
		var path = "./../dependencies/" + _domain + "/" + _currAgent + ".JSON";
		renderLargeLocal(path);
	}

	function pageLoad2() {
		url = "./../dependencies/" + _domain + "/SoaEntitiesHierarchy.JSON";
		xhrTree = new XMLHttpRequest();
		xhrTree.open("GET", url, true);
		xhrTree.setRequestHeader("Content-type", "application/json");
		xhrTree.addEventListener("load", xhrTreeComplete, false);
		xhrTree.addEventListener("error", xhrTreeFailed, false);
		xhrTree.addEventListener("abort", xhrTreeCanceled, false);
		xhrTree.send();
	}
		
	function doRestore() {
		window.dispatchEvent(new Event('resize'));
		window.dispatchEvent(new Event('repaint'));
		window.dispatchEvent(new Event('resize'));
		//createScene();
	}	

	function resizeCanvas0() {
		resizeCanvas();
		//createScene();
	}	
	
	function resizeCanvas() {
		var canvas = document.getElementById('renderCanvas');
		var canvasDiv = document.getElementById('panelX');
		canvas.width = canvasDiv.clientWidth;
		canvas.height = canvasDiv.clientHeight;
	}

	
// The following function is invoked only once!!	
	function xhrTreeComplete(evt) {
		var data = xhrTree.responseText;
		if(!xhrTree.status) return;
		if(xhrTree.status == 200) {
			jsondata = JSON.parse(data);
			createJSTree(jsondata);
			if (_currAgentClean) {
				createPropTable(_currAgentClean);
			}
			setAfterSelectFunct("AfterSelectInGraphic");
		} else if (xhrTree.status != 0){
		//alert("xhrTreeComplete event " + xhrTree.status);
			var popup = window.open("", "Error", "width=600,height=400, left=20, top=20");
			popup.document.write("htpp status:" + xhrTree.status + "\n" + data);
		} else {
			//alert("xhrTreeComplete event status 0?");
		}
	}
	function xhrTreeFailed(evt) {
		alert("An error occurred while transferring the file.");
	}
	function xhrTreeCanceled(evt) {
		alert("The transfer has been canceled by the user.");
	}			
	function pageUnload() {
		//alert("bla");
	}
	
	function createJSTree(jsondata) {            
	$('#div_treeview').jstree({
		'core': {
			'data': jsondata
		}
		}).bind("select_node.jstree", nodeSelected);
	}
	
function createPropTable(filename) {			
	var propPath = "./../properties/_outline/" + filename + ".JSON";
	console.log("panel_tree " + $("#panel_tree").height() + "panel_prop " + $("#panel_properties").height() + " div_prop " + $("#div_properties").height() + " table " + $("#proptable").height());
	$("#proptable").DataTable( {
		"bDestroy":true,
		"bPaginate":false,
		"bLengthChange": false,
		"bFilter":false,
		"bInfo": false,
		"bAutoWidth": true,
		"scrollY": $("#div_properties").height(),
		"ajax": {
			"url": propPath,
			"dataSrc": ""
		},			
		"columns": [
			{ "data": "name" },
			{ "data": "value" }
		]
		
	});
}
	
	function nodeSelected(e, data) {
		var link; 
		if (!data.node) return;
		if (data.node.data.TYPE != "A") return;
		agent = data.node.data.N;
		var previousAgent = _currAgent;
		_currAgent = agent;
		_currAgentClean = getOutlineFile(_currAgent);
		if (data.node.data.L == 1) {
			var path = "./../dependencies/" + _domain + "/" + _currAgent + ".JSON";
			renderLargeLocal(path);
		}
		if (!previousAgent) createPropTable(_currAgentClean); else updatePropTable(_currAgentClean);
	}
	
	function AfterSelectInGraphic(nodeId2) {
		//alert("AfterSelectInGraphic " + nodeId2);
		if (_prevId2 == nodeId2) { // This means we have clicked for the second time on the same mesh
			if (!_doSelect) {
				_doSelect = true;
				SetPropsForNode(nodeId2);
				return;
			}
			// Falling through here means we shall process the click by selecting the node with the id == nodeId2.	
		} else {
			_prevId2 = nodeId2; // make them equal for the next click
			_doSelect = true;
			SetPropsForNode(nodeId2);
			return;
		}
		_doSelect = false;
					
		$('#div_treeview').jstree("deselect_all");
		$('#div_treeview').jstree('select_node', nodeId2);
		var node = $('#div_treeview').jstree(true).get_node(nodeId2, true);
		if (!node) return;
		node.children('.jstree-anchor').focus();
	}
		
	function updatePropTable(filename) {
		var propPath = "./../properties/_outline/" + filename + ".JSON";
		$("#proptable").DataTable().clear().destroy();
		createPropTable(filename);
		// This enforces property tab
		//var first = $("#ui-id-1");
		//var second = $("#ui-id-2");
		//deselectTab(first);
		//selectTab(second);
		//$( "#div_properties").click();
	}
	
	function SetPropsForNode(nodeId2)
	{
		var node = $('#div_treeview').jstree(true).get_node(nodeId2, false);
		if (!node) return;
		if (node.data.TYPE != "A") return;
		var nodeName = node.data.N;
		//alert(nodeId2 + " " + nodeName);
		if (!nodeName) return;
		var cleanName = getOutlineFile(nodeName);
		if (_currAgentClean) updatePropTable(cleanName); else createPropTable(cleanName);
	}

</script>

<!-- Own styles  -->
<link rel="stylesheet" href="css/container_styles.css">
<link rel="stylesheet" href="css/content_styles.css">

<!-- Styles required by jquery elements -->
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/datatables.min.css" />
<!-- Scripts required by jquery -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery-ui.js"></script>
<script src="scripts/jstree.min.js"></script>
<script type="text/javascript" src="scripts/datatables.min.js"></script>
<!-- Scripts required babylon.js -->
<script src="web/babylon.js"></script>
<script src="web/babylon.gui.min.js"></script>
<!-- Own scripts (3D display) -->
<script src="web/forms.js"></script>
<script src="web/page.js"></script>
<script src="web/billboards.js"></script>
<script src="web/actions.js"></script>
<script src="web/SoaScape2Archi3D.js"></script>

<body style="" onload="pageLoaded()" onresize="resizeCanvas0()">
    <div class="page-container">
		<div class="head" style= "background:#F8F8F8;">
			<!-- Left side of the header area  -->
			<div>
			<!-- <a href="https://nl-nl.soascape.org" target="SoaScape" style="margin-right: 10; align: bottom; vertical-align: bottom"> -->
				<img src="images/SoaScape-name-36.png" width="119" height="20" style="padding-bottom: 6px; align: bottom; vertical-align: bottom"/>
			<!-- </a> -->
			<span style="padding-bottom: 0px; align: bottom; vertical-align: bottom; font-size: 28px;">Interconnections and Dependencies</span>
			</div>
			<!-- Right side of the header area  -->
			<!-- Restore button  -->
			<div class="header_right">
				<span class="header_right">
					<input/ type="image" src="images/restore-32.png" onclick="doRestore()" style="margin-left: 15px">
				</span>	
				<!-- SoaScape display-style radio-buttons  -->			
				<span class="header_right2">
					<input id="CONF-NODE" type="radio" name="STYLE" value="N" style="margin-left: 10px" onclick="checkedStyle()" />Nodes
				</span>
				<span class="header_right2">
					<input id="CONF-SOA" type="radio" name="STYLE" value="O" checked="checked" style="margin-left: 10px" onclick="checkedStyle()" />SoaScape
				</span>
				<span class="header_right2" style="margin-left: 30px; font-weight: bold;">STYLE:</span>
				<!-- Check-boxes group 2 -->
				<div class="header_right2" style="margin-left: 30px;">
					<label for="CONF-svc"><input id="CONF-svc" type="checkbox" checked="checked" onclick="checkedServices()" />Show Services&nbsp;&nbsp;<br/></label>
					<label for="CONF-bd"><input id="CONF-bd" type="checkbox" checked="checked" onclick="checkedBoundaries()" />Show Bounding Planes</label>
				</div>
				<!-- Check-boxes group 1 -->
				<div class="header_right2">
					<label for="CONF-nl"><input id="CONF-nl" type="checkbox" onclick="checkedNodeLabels()" />Stick Apps/Owners Labels&nbsp;<br/></label>
					<label for="CONF-sl"><input id="CONF-sl" type="checkbox" onclick="checkedServiceLabels()" />Stick Service Labels</label>
				</div>
			</div>
		</div>
        <div class="panel-container">
            <div class="panel-left">
                <div class="panel-container-vertical">
					<div id ="panel_tree" class="panel-tree">
						<div id="div_treeview" class="treeview"></div>
					</div>
					<div class="splitter-horizontal">
					</div>
					<div id="panel_properties" class="panel-properties">					
						<div id="div_properties" class="properties">
							<table id="proptable" class="properties">
								<thead style="display:none"></thead>
								<tr><td  colspan="2">Name</td></tr>
								<tfoot style="display:none"></tfoot>
							</table>
						</div>
					</div>
				</div>
            </div>
            <div class="splitter">
            </div>
            <div id="panelX" class="panel-right" >
               <canvas id="renderCanvas" draggable="false"></canvas>
           </div>
        </div>
		<script>
			$(".panel-left").resizable({
				handleSelector: ".splitter",
				resizeHeight: false
				//resize: function( event, ui ) { resizeCanvas(); }
			});
			$(".panel-tree").resizable({
				handleSelector: ".splitter-horizontal",
				resizeWidth: false,
			});
			$( ".panel-left" ).on( "resize", function( event, ui ) { console.log("restore canvas"); doRestore(); });
			$( ".panel-tree" ).on( "resize", function( event, ui ) {
				//console.log("panel_tree " + $("#panel_tree").height() + " div_prop " + $("#div_properties").height() + " table " + $("#proptable").height());
				$('.dataTables_scrollBody').css('height', ($("#div_properties").height()));} );
		</script>
    </div>
</body>
</html>
