From c3380db41fbdf1ae28f1002f957c958e8f7f586e Mon Sep 17 00:00:00 2001
From: Paul Gevers <elbrus@debian.org>
Date: Wed, 21 Nov 2012 23:19:40 +0100
Subject: [PATCH] Third try on jstree inclusion (everything I tested works
 now)

Not including the theme and style sheet.
---
 include/top_graph_header.php |    6 +-
 lib/graph_export.php         |  149 +++++++++++++++++++++++++-----------------
 lib/html_tree.php            |  101 +++++++++++++++++-----------
 3 files changed, 153 insertions(+), 103 deletions(-)

diff --git a/include/top_graph_header.php b/include/top_graph_header.php
index 86bba4b..97766f4 100644
--- a/include/top_graph_header.php
+++ b/include/top_graph_header.php
@@ -84,8 +84,9 @@ $page_title = api_plugin_hook_function('page_title', draw_navigation_text("title
 	<link href="<?php echo $config['url_path']; ?>include/main.css" type="text/css" rel="stylesheet">
 	<link href="<?php echo $config['url_path']; ?>images/favicon.ico" rel="shortcut icon"/>
 	<script type="text/javascript" src="<?php echo $config['url_path']; ?>include/layout.js"></script>
-	<script type="text/javascript" src="<?php echo $config['url_path']; ?>include/treeview/ua.js"></script>
-	<script type="text/javascript" src="<?php echo $config['url_path']; ?>include/treeview/ftiens4.js"></script>
+	<script type="text/javascript" src="<?php echo $config['url_path']; ?>include/js/jquery/jquery.js" language="javascript"></script>
+	<script type="text/javascript" src="<?php echo $config['url_path']; ?>include/js/jquery/jquery.cookie.js" language="javascript"></script>
+	<script type="text/javascript" src="<?php echo $config['url_path']; ?>include/js/jquery/jquery.jstree.js"></script>
 	<script type="text/javascript" src="<?php echo $config['url_path']; ?>include/jscalendar/calendar.js"></script>
 	<script type="text/javascript" src="<?php echo $config['url_path']; ?>include/jscalendar/lang/calendar-en.js"></script>
 	<script type="text/javascript" src="<?php echo $config['url_path']; ?>include/jscalendar/calendar-setup.js"></script>
@@ -178,7 +179,6 @@ $page_title = api_plugin_hook_function('page_title', draw_navigation_text("title
 		<td valign="top" style="padding: 5px; border-right: #aaaaaa 1px solid;background-repeat:repeat-y;background-color:#efefef;" bgcolor='#efefef' width='<?php print htmlspecialchars(read_graph_config_option("default_dual_pane_width"));?>' class='noprint'>
 			<table border=0 cellpadding=0 cellspacing=0><tr><td><a style="font-size:7pt;text-decoration:none;color:silver" href="http://www.treemenu.net/" target=_blank></a></td></tr></table>
 			<?php grow_dhtml_trees(); ?>
-			<script type="text/javascript">initializeDocument();</script>
 
 			<?php if (isset($_GET["select_first"])) { ?>
 			<script type="text/javascript">
diff --git a/lib/graph_export.php b/lib/graph_export.php
index fd57041..0f1558f 100644
--- a/lib/graph_export.php
+++ b/lib/graph_export.php
@@ -1365,15 +1365,6 @@ function draw_html_left_tree($fp, $tree_id)  {
 	/* create the treeview representation for the html data */
 	grow_dhtml_trees_export($fp,$tree_id);
 
-	fwrite($fp,"<script type='text/javascript'>initializeDocument();</script>\n");
-	fwrite($fp,"<script type='text/javascript'>\n");
-	fwrite($fp,"var obj;\n");
-	fwrite($fp,"obj = findObj(1);\n");
-	fwrite($fp,"if (!obj.isOpen) {\n");
-	fwrite($fp,"clickOnNode(1);\n");
-	fwrite($fp,"}\n");
-	fwrite($fp,"clickOnLink(2,'','main');\n");
-	fwrite($fp,"</script>\n");
 	fwrite($fp,"</td>\n");
 	fwrite($fp,"<td valign='top'>\n");
 }
@@ -1383,16 +1374,7 @@ function grow_dhtml_trees_export($fp, $tree_id) {
 	include_once($config["library_path"] . "/tree.php");
 	include_once($config["library_path"] . "/data_query.php");
 
-	fwrite($fp, "<script type='text/javascript'>\n");
-	fwrite($fp, "<!--
-			USETEXTLINKS = 1
-			STARTALLOPEN = 0
-			USEFRAMES = 0
-			USEICONS = 0
-			WRAPTEXT = 1
-			ICONPATH = 'treeview/'
-			PERSERVESTATE = 1
-			HIGHLIGHT = 1\n");
+	fwrite($fp, "<div id=\"jtree\">\n\t<ul>\n");
 
 	if (read_config_option("export_tree_isolation") == "off") {
 		$dhtml_tree_base = 0;
@@ -1413,9 +1395,34 @@ function grow_dhtml_trees_export($fp, $tree_id) {
 		}
 	}
 
-	fwrite($fp,"foldersTree.treeID = \"t2\"
-			//-->\n
-			</script>\n");
+	fwrite($fp, "\t</ul>\n</div>\n");
+	fwrite($fp, "<script type=\"text/javascript\">\n");
+	fwrite($fp, "$(function () {
+	$(\"#jtree\")
+		.jstree({
+                        \"plugins\" : [\"ui\",\"themes\",\"html_data\",\"cookies\"],
+        	        \"themes\" : {\"icons\" : false,
+				\"url\" : \"./js/style.css\"},
+			\"cookies\" : {
+				\"save_opened\" : \"Cacti_jstree_open\",
+				\"save_selected\" : \"Cacti_jstree_select\"
+				}
+
+                })
+
+                // Make sure that the nodes are actually used as links
+                // We need reselect to prevent endless loops
+                // https://groups.google.com/d/topic/jstree/j6XNq9hQdeA/discussion
+                .bind(\"reselect.jstree\", function (e, data) { 
+                      data.inst.get_container().bind(\"select_node.jstree\", function (e, data) {
+                           // data.rstl.obj is the object that was selected.
+                           document.location.href = data.rslt.obj.children(\"a\").attr(\"href\");
+                       });
+                });
+
+});\n");
+	fwrite($fp, "</script>\n");
+
 }
 
 /* get_graph_tree_array_export - returns a list of graph trees taking permissions into account if
@@ -1478,8 +1485,7 @@ function create_dhtml_tree_export($tree_id) {
 	$dhtml_tree = array();
 	$dhtml_tree[0] = $start;
 	$dhtml_tree[1] = read_graph_config_option("expand_hosts");
-	$dhtml_tree[2] = "foldersTree = gFld(\"\", \"\")\n";
-	$i = 2;
+	$i = 1;
 
 	$tree_list = get_graph_tree_array_export();
 
@@ -1499,7 +1505,6 @@ function create_dhtml_tree_export($tree_id) {
 		if (((read_config_option("export_tree_isolation") == "on") && ($tree_id == $tree["id"])) ||
 			(read_config_option("export_tree_isolation") == "off")) {
 
-			$i++;
 
 			$hier_sql = "SELECT DISTINCT
 					graph_tree_items.id,
@@ -1524,17 +1529,24 @@ function create_dhtml_tree_export($tree_id) {
 			if (sizeof($hierarchy) > 0) {
 				foreach ($hierarchy as $leaf) {
 					if ($dhtml_tree_id <> $tree["id"]) {
-						$dhtml_tree[$i] = "ou0 = insFld(foldersTree, gFld(\"" . get_tree_name($tree["id"]) . "\", \"" . clean_up_export_name(get_tree_name($tree["id"])) . "_leaf.html\"))\n";
+						$i++;
+						$clean_id = clean_up_export_name(get_tree_name($tree["id"]));
+						$dhtml_tree[$i] = "\t\t<li id=\"" . $clean_id . "\"><a href=\"" . $clean_id . "_leaf.html\">" . get_tree_name($tree["id"]) . "</a>\n";
 					}
 					$dhtml_tree_id = $tree["id"];
 
-					$i++;
 					$tier = tree_tier($leaf["order_key"]);
 
 					if ($leaf["host_id"] > 0) {  //It's a host
-						$dhtml_tree[$i] = "ou" . ($tier) . " = insFld(ou" . ($tier-1) . ", gFld(\"Host: " . $leaf["hostname"] . "\", \"" . clean_up_export_name($leaf["hostname"] . "_" . $leaf["id"]) . ".html\"))\n";
+						$i++;
+						$dhtml_tree[$i] = "\t\t\t<ul>\n";
+						$i++;
+						$clean_id = clean_up_export_name($leaf["hostname"] . "_" . $leaf["id"]);
+						$dhtml_tree[$i] = "\t\t\t\t<li id=\"" . $clean_id . "\"><a href=\"" . $clean_id . ".html\">Host: " . htmlspecialchars($leaf["hostname"]) . "</a>\n";
 
 						if (read_config_option("export_tree_expand_hosts") == "on") {
+							$i++;
+							$dhtml_tree[$i] = "\t\t\t\t\t<ul>\n";
 							if ($leaf["host_grouping_type"] == HOST_GROUPING_GRAPH_TEMPLATE) {
 								$graph_templates = db_fetch_assoc("SELECT
 									graph_templates.id,
@@ -1552,7 +1564,8 @@ function create_dhtml_tree_export($tree_id) {
 							 	if (sizeof($graph_templates) > 0) {
 									foreach ($graph_templates as $graph_template) {
 										$i++;
-										$dhtml_tree[$i] = "ou" . ($tier+1) . " = insFld(ou" . ($tier) . ", gFld(\" " . $graph_template["name"] . "\", \"" . clean_up_export_name($leaf["hostname"] . "_gt_" . $leaf["id"]) . "_" . $graph_template["id"] . ".html\"))\n";
+										$clean_id = clean_up_export_name($leaf["hostname"] . "_gt_" . $leaf["id"] . "_" . $graph_template["id"]);
+										$dhtml_tree[$i] = "\t\t\t\t\t\t<li id=\"" . $clean_id . "\"><a href=\"" . $clean_id . ".html\">" . htmlspecialchars($graph_template["name"]) . "</a></li>\n";
 									}
 								}
 							}else if ($leaf["host_grouping_type"] == HOST_GROUPING_DATA_QUERY_INDEX) {
@@ -1571,34 +1584,52 @@ function create_dhtml_tree_export($tree_id) {
 									));
 
 								if (sizeof($data_queries) > 0) {
-								foreach ($data_queries as $data_query) {
-									$i++;
-
-									$dhtml_tree[$i] = "ou" . ($tier+1) . " = insFld(ou" . ($tier) . ", gFld(\" " . $data_query["name"] . "\", \"" . clean_up_export_name($leaf["hostname"] . "_dq_" . $leaf["title"] . "_" . $leaf["id"]) . "_" . $data_query["id"] . ".html\"))\n";
+									foreach ($data_queries as $data_query) {
+										$i++;
+										$clean_id = clean_up_export_name($leaf["hostname"] . "_dq_" . $leaf["title"] . "_" . $leaf["id"] . "_" . $data_query["id"]);
+										$dhtml_tree[$i] = "\t\t\t\t\t\t<li id=\"" . $clean_id . "\"><a href=\"" . $clean_id . ".html\">" . htmlspecialchars($data_query["name"]) . "</a>\n";
 
-									/* fetch a list of field names that are sorted by the preferred sort field */
-									$sort_field_data = get_formatted_data_query_indexes($leaf["host_id"], $data_query["id"]);
+										/* fetch a list of field names that are sorted by the preferred sort field */
+										$sort_field_data = get_formatted_data_query_indexes($leaf["host_id"], $data_query["id"]);
 
-									if ($data_query["id"] > 0) {
-										while (list($snmp_index, $sort_field_value) = each($sort_field_data)) {
+										if ($data_query["id"] > 0) {
 											$i++;
-											$dhtml_tree[$i] = "ou" . ($tier+2) . " = insFld(ou" . ($tier+1) . ", gFld(\" " . $sort_field_value . "\", \"" . clean_up_export_name($leaf["hostname"] . "_dqi_" . $leaf["title"] . "_" . $leaf["id"]) . "_" . $data_query["id"] . "_" . $snmp_index . ".html\"))\n";
+											$dhtml_tree[$i] = "\t\t\t\t\t\t\t<ul>\n";
+											while (list($snmp_index, $sort_field_value) = each($sort_field_data)) {
+												$i++;
+												$clean_id = clean_up_export_name($leaf["hostname"] . "_dqi_" . $leaf["id"] . "_" . $data_query["id"] . "_" . $snmp_index);
+												$dhtml_tree[$i] = "\t\t\t\t\t\t\t\t<li id=\"" . $clean_id . "\"><a href=\"" . $clean_id . ".html\">" . htmlspecialchars($sort_field_value) . "</a></li>\n";
+											}
+											$i++;
+											$dhtml_tree[$i] = "\t\t\t\t\t\t\t</ul>\n";
 										}
+										$i++;
+										$dhtml_tree[$i] = "\t\t\t\t\t\t</li>\n";
 									}
 								}
-								}
 							}
+							$i++;
+							$dhtml_tree[$i] = "\t\t\t\t\t</ul>\n";
 						}
+						$i++;
+						$dhtml_tree[$i] = "\t\t\t\t</li>\n";
 					}else {
-						$dhtml_tree[$i] = "ou" . ($tier) . " = insFld(ou" . ($tier-1) . ", gFld(\"" . $leaf["title"] . "\", \"" . clean_up_export_name(get_tree_name($tree["id"]) . "_" . $leaf["title"] . "_" . $leaf["id"]) . "_leaf.html\"))\n";
+						$i++;
+						$clean_id = clean_up_export_name(get_tree_name($tree["id"]) . "_" . $leaf["title"] . "_" . $leaf["id"]);
+						$dhtml_tree[$i] = "\t\t\t\t<li id=\"" . $clean_id . "\"><a href=\"" . $clean_id . "_leaf.html\">" . htmlspecialchars($leaf["title"]) . "</a></li>\n";
 					}
 				}
+				$i++;
+				$dhtml_tree[$i] = "\t\t\t</ul>\n";
 			}else{
 				if ($dhtml_tree_id <> $tree["id"]) {
-					$dhtml_tree[$i] = "ou0 = insFld(foldersTree, gFld(\"" . get_tree_name($tree["id"]) . "\", \"" . clean_up_export_name(get_tree_name($tree["id"])) . "_leaf.html\"))\n";
 					$i++;
+					$clean_id = clean_up_export_name(get_tree_name($tree["id"]));
+					$dhtml_tree[$i] = "\t\t<li id=\"" . $clean_id . "_leaf\"><a href=\"" . $clean_id . "_leaf.html\">" . get_tree_name($tree["id"]) . "</a></li>\n";
 				}
 			}
+			$i++;
+			$dhtml_tree[$i] = "\t\t</li>\n";
 		}
 	}
 	}
@@ -1612,10 +1643,10 @@ function create_dhtml_tree_export($tree_id) {
         $dir - the export directory where graphs will either be staged or located.
 */
 function create_export_directory_structure($cacti_root_path, $dir) {
-	/* create the treeview sub-directory */
-	if (!is_dir("$dir/treeview")) {
-		if (!mkdir("$dir/treeview", 0755)) {
-			export_fatal("Create directory '" . $dir . "/treeview' failed.  Can not continue");
+	/* create the jquery sub-directory */
+	if (!is_dir("$dir/js")) {
+		if (!mkdir("$dir/js", 0755)) {
+			export_fatal("Create directory '" . $dir . "/js' failed.  Can not continue");
 		}
 	}
 
@@ -1626,8 +1657,6 @@ function create_export_directory_structure($cacti_root_path, $dir) {
 		}
 	}
 
-	$treeview_dir = $dir . "/treeview";
-
 	/* css */
 	copy("$cacti_root_path/include/main.css", "$dir/main.css");
 
@@ -1639,18 +1668,15 @@ function create_export_directory_structure($cacti_root_path, $dir) {
 	copy("$cacti_root_path/images/shadow_gray.gif", "$dir/shadow_gray.gif");
 
 	/* java scripts for the tree */
-	copy("$cacti_root_path/include/treeview/ftiens4_export.js", "$treeview_dir/ftiens4.js");
-	copy("$cacti_root_path/include/treeview/ua.js", "$treeview_dir/ua.js");
-
-	/* images for the tree */
-	copy("$cacti_root_path/include/treeview/ftv2blank.gif", "$treeview_dir/ftv2blank.gif");
-	copy("$cacti_root_path/include/treeview/ftv2lastnode.gif", "$treeview_dir/ftv2lastnode.gif");
-	copy("$cacti_root_path/include/treeview/ftv2mlastnode.gif", "$treeview_dir/ftv2mlastnode.gif");
-	copy("$cacti_root_path/include/treeview/ftv2mnode.gif", "$treeview_dir/ftv2mnode.gif");
-	copy("$cacti_root_path/include/treeview/ftv2node.gif", "$treeview_dir/ftv2node.gif");
-	copy("$cacti_root_path/include/treeview/ftv2plastnode.gif", "$treeview_dir/ftv2plastnode.gif");
-	copy("$cacti_root_path/include/treeview/ftv2pnode.gif", "$treeview_dir/ftv2pnode.gif");
-	copy("$cacti_root_path/include/treeview/ftv2vertline.gif", "$treeview_dir/ftv2vertline.gif");
+	copy("$cacti_root_path/include/js/jquery/jquery.js", "$dir/js/jquery.js");
+	copy("$cacti_root_path/include/js/jquery/jquery.jstree.js", "$dir/js/jquery.jstree.js");
+	copy("$cacti_root_path/include/js/jquery/jquery.cookie.js", "$dir/js/jquery.cookie.js");
+
+	/* theme info for java scripts */
+	copy("$cacti_root_path/include/js/jquery/themes/default/style.css", "$dir/js/style.css");
+	copy("$cacti_root_path/include/js/jquery/themes/default/d.png", "$dir/js/d.png");
+	copy("$cacti_root_path/include/js/jquery/themes/default/d.gif", "$dir/js/d.gif");
+	copy("$cacti_root_path/include/js/jquery/themes/default/throbber.gif", "$dir/js/throbber.gif");
 }
 
 function get_host_description($host_id) {
@@ -1738,8 +1764,9 @@ define("HTML_HEADER_TREE",
 	<meta http-equiv=refresh content='300'; url='index.html'>
 	<meta http-equiv=Pragma content=no-cache>
 	<meta http-equiv=cache-control content=no-cache>
-	<script type=\"text/javascript\" src=\"./treeview/ua.js\"></script>
-	<script type=\"text/javascript\" src=\"./treeview/ftiens4.js\"></script>
+	<script type=\"text/javascript\" src=\"./js/jquery.js\" language=\"javascript\"></script>
+	<script type=\"text/javascript\" src=\"./js/jquery.cookie.js\" language=\"javascript\"></script>
+	<script type=\"text/javascript\" src=\"./js/jquery.jstree.js\" language=\"javascript\"></script>
 </head>
 <body>
 <table style='width:100%;height:100%;' cellspacing='0' cellpadding='0'>
diff --git a/lib/html_tree.php b/lib/html_tree.php
index 861c6cc..a5bd796 100644
--- a/lib/html_tree.php
+++ b/lib/html_tree.php
@@ -495,17 +495,9 @@ function grow_dhtml_trees() {
 	include_once($config["library_path"] . "/data_query.php");
 
 	?>
-	<script type="text/javascript">
-	<!--
-	USETEXTLINKS = 1
-	STARTALLOPEN = 0
-	USEFRAMES = 0
-	USEICONS = 0
-	WRAPTEXT = 1
-	PERSERVESTATE = 1
-	HIGHLIGHT = 1
 	<?php
 	/* get current time */
+/* Probably not needed anymore as jstree uses jquery.cookies
 	list($micro,$seconds) = explode(" ", microtime());
 	$current_time = $seconds + $micro;
 	$expand_hosts = read_graph_config_option("expand_hosts");
@@ -522,6 +514,8 @@ function grow_dhtml_trees() {
 			$dhtml_tree = $_SESSION['dhtml_tree'];
 		}
 	}
+*/
+	$dhtml_tree = create_dhtml_tree();
 
 	$total_tree_items = sizeof($dhtml_tree) - 1;
 
@@ -529,8 +523,31 @@ function grow_dhtml_trees() {
 		print $dhtml_tree[$i];
 	}
 	?>
-	//-->
-	</script>
+<script type="text/javascript">
+$(function () {
+	$("#jtree")
+		.jstree({
+			"plugins" : ["ui","themes","html_data","cookies"],
+			"themes" : {"icons" : false,
+				"url" : "<?php echo  $config['url_path']; ?>include/js/jquery/themes/default/style.css"},
+			"cookies" : {
+				"save_opened" : "Cacti_jstree_open",
+				"save_selected" : "Cacti_jstree_select"
+				}
+			})
+
+		// Make sure that the nodes are actually used as links
+		// We need reselect to prevent endless loops
+		// https://groups.google.com/d/topic/jstree/j6XNq9hQdeA/discussion
+		.bind("reselect.jstree", function (e, data) { 
+			data.inst.get_container().bind("select_node.jstree", function (e, data) {
+				// data.rstl.obj is the object that was selected.
+				document.location.href = data.rslt.obj.children("a").attr("href");
+			});
+		});
+
+});
+</script>
 	<?php
 }
 
@@ -543,8 +560,9 @@ function create_dhtml_tree() {
 
 	$dhtml_tree[0] = $start;
 	$dhtml_tree[1] = read_graph_config_option("expand_hosts");
-	$dhtml_tree[2] = "foldersTree = gFld(\"\", \"\")\n";
-	$dhtml_tree[3] = "foldersTree.xID = \"root\"\n";
+	$dhtml_tree[2] = "\n<div id=\"jtree\">\n";
+	$dhtml_tree[3] = "\t<ul>\n";
+
 	$i = 3;
 
 	$tree_list = get_graph_tree_array();
@@ -567,7 +585,6 @@ function create_dhtml_tree() {
 
 	if (sizeof($tree_list) > 0) {
 		foreach ($tree_list as $tree) {
-			$i++;
 			$hierarchy = db_fetch_assoc("select
 				graph_tree_items.id,
 				graph_tree_items.title,
@@ -583,21 +600,22 @@ function create_dhtml_tree() {
 				and graph_tree_items.local_graph_id = 0
 				order by graph_tree_items.order_key");
 
-			$dhtml_tree[$i] = "ou0 = insFld(foldersTree, gFld(\"" . htmlspecialchars($tree["name"]) . "\", \"" . htmlspecialchars("graph_view.php?action=tree&tree_id=" . $tree["id"]) . "\"))\n";
 			$i++;
-			$dhtml_tree[$i] = "ou0.xID = \"tree_" . $tree["id"] . "\"\n";
+			$dhtml_tree[$i] = "\t\t<li id=\"" . htmlspecialchars("tree_" . $tree["id"]) . "\"><a href=\"" . htmlspecialchars("graph_view.php?action=tree&tree_id=" . $tree["id"]) . "\">" . htmlspecialchars($tree["name"]) . "</a>\n";
 
 			if (sizeof($hierarchy) > 0) {
+				$i++;
+				$dhtml_tree[$i] = "\t\t\t<ul>\n";
 				foreach ($hierarchy as $leaf) {
-					$i++;
 					$tier = tree_tier($leaf["order_key"]);
 
 					if ($leaf["host_id"] > 0) {
-						$dhtml_tree[$i] = "ou" . ($tier) . " = insFld(ou" . abs(($tier-1)) . ", gFld(\"" . "Host: " . htmlspecialchars($leaf["hostname"]) . "\", \"" . htmlspecialchars("graph_view.php?action=tree&tree_id=" . $tree["id"] . "&leaf_id=" . $leaf["id"]) . "\"))\n";
 						$i++;
-						$dhtml_tree[$i] = "ou" . ($tier) . ".xID = \"tree_" . $tree["id"] . "_leaf_" . $leaf["id"] . "\"\n";
+						$dhtml_tree[$i] = "\t\t\t\t<li id=\"" . htmlspecialchars("tree_" . $tree["id"] . "_leaf_" . $leaf["id"]) . "\"><a href=\"" . htmlspecialchars("graph_view.php?action=tree&tree_id=" . $tree["id"] . "&leaf_id=" . $leaf["id"]) . "\">Host: " . htmlspecialchars($leaf["hostname"]) . "</a>\n";
 
 						if (read_graph_config_option("expand_hosts") == "on") {
+							$i++;
+							$dhtml_tree[$i] = "\t\t\t\t\t<ul>\n";
 							if ($leaf["host_grouping_type"] == HOST_GROUPING_GRAPH_TEMPLATE) {
 								$graph_templates = db_fetch_assoc("select
 									graph_templates.id,
@@ -612,9 +630,7 @@ function create_dhtml_tree() {
 								if (sizeof($graph_templates) > 0) {
 									foreach ($graph_templates as $graph_template) {
 										$i++;
-										$dhtml_tree[$i] = "ou" . ($tier+1) . " = insFld(ou" . ($tier) . ", gFld(\" " . htmlspecialchars($graph_template["name"]) . "\", \"graph_view.php?action=tree&tree_id=" . $tree["id"] . "&leaf_id=" . $leaf["id"] . "&host_group_data=graph_template:" . $graph_template["id"] . "\"))\n";
-										$i++;
-										$dhtml_tree[$i] = "ou" . ($tier+1) . ".xID = \"tree_" . $tree["id"] . "_leaf_" . $leaf["id"] . "_hgd_gt_" . $graph_template["id"] . "\"\n";
+										$dhtml_tree[$i] = "\t\t\t\t\t\t<li id=\"" . htmlspecialchars("tree_" . $tree["id"] . "_leaf_" . $leaf["id"] . "_hgd_gt_" . $graph_template["id"]) . "\"><a href=\"" . htmlspecialchars("graph_view.php?action=tree&tree_id=" . $tree["id"] . "&leaf_id=" . $leaf["id"] . "&host_group_data=graph_template:" . $graph_template["id"]) . "\">" . htmlspecialchars($graph_template["name"]) . "</a></li>\n";
 									}
 								}
 							}else if ($leaf["host_grouping_type"] == HOST_GROUPING_DATA_QUERY_INDEX) {
@@ -645,33 +661,48 @@ function create_dhtml_tree() {
 										if ((($data_query["id"] == 0) && ($non_template_graphs > 0)) ||
 											(($data_query["id"] > 0) && (sizeof($sort_field_data) > 0))) {
 											$i++;
-											$dhtml_tree[$i] = "ou" . ($tier+1) . " = insFld(ou" . ($tier) . ", gFld(\" " . htmlspecialchars($data_query["name"]) . "\", \"" . htmlspecialchars("graph_view.php?action=tree&tree_id=" . $tree["id"] . "&leaf_id=" . $leaf["id"] . "&host_group_data=data_query:" . $data_query["id"]) . "\"))\n";
-											$i++;
-											$dhtml_tree[$i] = "ou" . ($tier+1) . ".xID = \"tree_" . $tree["id"] . "_leaf_" . $leaf["id"] . "_hgd_dq_" . $data_query["id"] . "\"\n";
-
+											$dhtml_tree[$i] = "\t\t\t\t\t\t<li id=\"" . htmlspecialchars("tree_" . $tree["id"] . "_leaf_" . $leaf["id"] . "_hgd_dq_" . $data_query["id"]) . "\"><a href=\"" . htmlspecialchars("graph_view.php?action=tree&tree_id=" . $tree["id"] . "&leaf_id=" . $leaf["id"] . "&host_group_data=data_query:" . $data_query["id"]) . "\">" . htmlspecialchars($data_query["name"]) . "</a>\n";
 											if ($data_query["id"] > 0) {
+												$i++;
+												$dhtml_tree[$i] = "\t\t\t\t\t\t\t<ul>\n";
 												while (list($snmp_index, $sort_field_value) = each($sort_field_data)) {
 													$i++;
-													$dhtml_tree[$i] = "ou" . ($tier+2) . " = insFld(ou" . ($tier+1) . ", gFld(\" " . htmlspecialchars($sort_field_value) . "\", \"" . htmlspecialchars("graph_view.php?action=tree&tree_id=" . $tree["id"] . "&leaf_id=" . $leaf["id"] . "&host_group_data=data_query_index:" . $data_query["id"] . ":" . urlencode($snmp_index)) . "\"))\n";
-													$i++;
-													$dhtml_tree[$i] = "ou" . ($tier+2) . ".xID = \"tree_" . $tree["id"] . "_leaf_" . $leaf["id"] . "_hgd_dqi" . $data_query["id"] . "_" . urlencode($snmp_index) . "\"\n";
+													$dhtml_tree[$i] = "\t\t\t\t\t\t\t\t<li id=\"" . htmlspecialchars("tree_" . $tree["id"] . "_leaf_" . $leaf["id"] . "_hgd_dqi" . $data_query["id"]) . "_" . urlencode($snmp_index) . "\"><a href=\"" . htmlspecialchars("graph_view.php?action=tree&tree_id=" . $tree["id"] . "&leaf_id=" . $leaf["id"] . "&host_group_data=data_query_index:" . $data_query["id"] . ":" . urlencode($snmp_index)) . "\">" . htmlspecialchars($sort_field_value) . "</a></li>\n";
 												}
+											$i++;
+											$dhtml_tree[$i] = "\t\t\t\t\t\t\t</ul>\n";
+											$i++;
+											$dhtml_tree[$i] = "\t\t\t\t\t\t</li>\n";
 											}
 										}
 									}
 								}
+							$i++;
+							$dhtml_tree[$i] = "\t\t\t\t\t\t</li>\n";
 							}
+						$i++;
+						$dhtml_tree[$i] = "\t\t\t\t\t</ul>\n";
 						}
+					$i++;
+					$dhtml_tree[$i] = "\t\t\t\t</li>\n";
 					}else{
-						$dhtml_tree[$i] = "ou" . ($tier) . " = insFld(ou" . abs(($tier-1)) . ", gFld(\"" . htmlspecialchars($leaf["title"]) . "\", \"" . htmlspecialchars("graph_view.php?action=tree&tree_id=" . $tree["id"] . "&leaf_id=" . $leaf["id"]) . "\"))\n";
 						$i++;
-						$dhtml_tree[$i] = "ou" . ($tier) . ".xID = \"tree_" . $tree["id"] . "_leaf_" . $leaf["id"] . "\"\n";
+						$dhtml_tree[$i] = "\t\t\t\t<li id=\"" . htmlspecialchars("tree_" . $tree["id"] . "_leaf_" . $leaf["id"]) . "\"><a href=\"" . htmlspecialchars("graph_view.php?action=tree&tree_id=" . $tree["id"] . "&leaf_id=" . $leaf["id"]) . "\">" . htmlspecialchars($leaf["title"]) . "</a></li>\n";
 					}
 				}
+				$i++;
+				$dhtml_tree[$i] = "\t\t\t</ul>\n";
 			}
+			$i++;
+			$dhtml_tree[$i] = "\t\t</li>\n";
 		}
 	}
 
+	$i++;
+	$dhtml_tree[$i] = "\t</ul>\n";
+	$i++;
+	$dhtml_tree[$i] = "</div>\n";
+
 	return $dhtml_tree;
 }
 
@@ -758,14 +789,6 @@ function grow_right_pane_tree($tree_id, $leaf_id, $host_group_data) {
 		}
 	}
 
-	print "<script type=\"text/javascript\">\n";
-	print "<!--\n";
-	print "myNode = findObj(\"$nodeid\")\n";
-	print "myNode.forceOpeningOfAncestorFolders();\n";
-	print "highlightObjLink(myNode)\n";
-	print "//-->\n";
-	print "</script>";
-
 	/* ================= input validation ================= */
 	input_validate_input_number(get_request_var_post("graphs"));
 	input_validate_input_number(get_request_var_post("page"));
-- 
1.7.10.4