Index: /BH13SPARQLBuilder/src/hozo/maptool/jsgui.html
===================================================================
--- /BH13SPARQLBuilder/src/hozo/maptool/jsgui.html (revision 102)
+++ /BH13SPARQLBuilder/src/hozo/maptool/jsgui.html (revision 116)
@@ -5,8 +5,4 @@
 <title>SPARQL Builder GUI</title>
 
-<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
-<link rel="stylesheet" type="text/css" media="screen" href="http://lod.hozo.jp/SparqlFinder/css/main.css" />
-<link rel="stylesheet" type="text/css" media="screen" href="http://lod.hozo.jp/SparqlFinder/css/table.css" />
-<link rel="stylesheet" type="text/css" media="screen" href="http://lod.hozo.jp/SparqlFinder/css/popup.css" />
 <style>
 
@@ -25,11 +21,16 @@
 	height: auto;
 	padding: 10px;
-	background-color: #aaccee;
-	-webkit-border-radius: 10px;
-	-moz-border-radius: 10px;
-	border-radius: 10px;
-	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
+	-webkit-border-radius: 20px;
+	border-radius: 20px;
+	-webkit-box-shadow: 0px 0px 10px #000000;
+	box-shadow: 0px 0px 10px #000000;
+	background-image: -moz-linear-gradient(top, #eeeeff, #ffffff);
+	background-image: -ms-linear-gradient(top, #eeeeff, #ffffff);
+	background-image: -o-linear-gradient(top, #eeeeff, #ffffff);
+	background-image: -webkit-gradient(linear, center top, center bottom, from(#eeeeff), to(#ffffff));
+	background-image: -webkit-linear-gradient(top, #eeeeff, #ffffff);
+	background-image: linear-gradient(top, #eeeeff, #ffffff);
+	-webkit-background-clip: padding-box;
+	background-clip: padding-box;
 }
 
@@ -37,13 +38,8 @@
 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
-<script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/jquery-1.10.2.min.js"></script>
-<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
-<!-- 縺薙�荳€陦後ｒ蜈･繧後ｋ縺ｨ繧ｿ繝�メ縺ｧ縺ｮ繝峨Λ繝�げ縺悟庄閭ｽ縺ｫ縺ｪ繧�  -->
-<script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/jquery.ui.touch-punch.js" charset="UTF-8"></script>
 <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
 <!--<script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/template.js" charset="UTF-8"></script>-->
 <script>
 <!--
-
 
 // SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
@@ -73,4 +69,5 @@
 var TREESPACE = 0;
 var DRAWHEIGHT = 0;
+var NODEHEIGHT = 50;
 var jsontext = "";
 
@@ -122,5 +119,5 @@
 
 	var width = window.innerWidth;
-	var height = TREESPACE * PATHNUM;
+	var height = ((NODEHEIGHT * 1.5) * PATHNUM) + NODEHEIGHT;
 
 	// 繧ｫ繝ｩ繝ｼ繧貞叙蠕�
@@ -145,5 +142,14 @@
 	    .attr("width", width)
 	    .attr("height", height);
-
+/*
+	var bg = d3.select(".background")
+		.enter()
+		.append("rect")
+		.attr("x", 0)
+		.attr("y", 0)
+		.attr("width", width)
+		.attr("height", height)
+		.attr("fill", #999999);
+*/
 	var link = svg.selectAll(".link")
 	.data(json.links)
@@ -156,5 +162,5 @@
 	.enter().append("circle")
 	.attr("class", "node")
-	.attr("r", 20)
+	.attr("r", (NODEHEIGHT / 2))
 	.attr("cx", function(d) { return d.x;} )
 	.attr("cy",  function(d) { return d.y; })
@@ -192,41 +198,63 @@
 	node.on("mouseover", function(d){
 
+		if (!d. isDrag){
+			d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; });
+			d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; });
+			d3.select(this).style("stroke-width", function(d) { return 2; });
+			d3.select(this).style("stroke", function(d) { return '#0000ff'; });
+		}
+
+		d.isDrag = false;
+
 		var path = [];
 		pathname = [];
-		path.push(d.nodeid);
-		pathname.push(d.name);
-		do{
-			for(var i = 0; i < link.data().length; i++){
-				if(path[(path.length-1)] == link.data()[i].target){
-					path.push(link.data()[i].source);
-					pathname.push(link.data()[i].property);
-					pathname.push(node.data()[link.data()[i].source].name);
+
+		if(d.nodeid != 0){
+			path.push(d.nodeid);
+			pathname.push(d.name);
+			do{
+				for(var i = 0; i < link.data().length; i++){
+					if(path[(path.length-1)] == link.data()[i].target){
+						path.push(link.data()[i].source);
+						pathname.push(link.data()[i].property);
+						pathname.push(node.data()[link.data()[i].source].name);
+					}
 				}
-			}
-		}while(path[(path.length-1)] != 0);
-		var resultText = "<h3>Selected Path</h3>";
-		for (var i = pathname.length;i > 0; i--){
-			if(i % 2 == 1){
-				resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>";
+			}while(path[(path.length-1)] != 0);
+			var resultText = "<h3>Selected Path</h3>";
+			for (var i = pathname.length;i > 0; i--){
+				if(i % 2 == 1){
+					resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>";
+				}else{
+					resultText = resultText + pathname[i - 1] + "<br><br>";
+				}
+			}
+
+			document.getElementById("selectpath").innerHTML=(resultText);
+			document.getElementById("showpath").style.display = "block";
+
+			if(d.group > (MAXDEPTH - 2)){
+				document.getElementById("getsparqlbutton").style.display = "block";
 			}else{
-				resultText = resultText + pathname[i - 1] + "<br><br>";
-			}
-		}
-		document.getElementById("selectpath").innerHTML=(resultText);
-		document.getElementById("showpath").style.display = "block";
-
-		var xPosition = parseFloat(d3.select(this).attr("cx")) + 22;
-		var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + 22;
-
-		if(xPosition < 0){
-			xPosition = 0;
-		}
-		if(yPosition < 0){
-			yPosition = 0;
-		}
-
-		document.getElementById("showpath").style.left = xPosition + "px"
-		document.getElementById("showpath").style.top = yPosition + "px"
-		document.getElementById("showpath").style.display = "block";
+				document.getElementById("getsparqlbutton").style.display = "none";
+			}
+
+			var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + (NODEHEIGHT * 0.5);
+			var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + (NODEHEIGHT * 0.5);
+
+			if(xPosition < 0){
+				xPosition = 0;
+			}
+			if(yPosition < 0){
+				yPosition = 0;
+			}
+
+			document.getElementById("showpath").style.left = xPosition + "px"
+			document.getElementById("showpath").style.top = yPosition + "px"
+			document.getElementById("showpath").style.display = "block";
+
+		}else{
+			document.getElementById("showpath").style.display = "none";
+		}
 
 		tlink
@@ -241,12 +269,4 @@
 		})
 
-	    if (!d. isDrag){
-			d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; });
-			d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; });
-			d3.select(this).style("stroke-width", function(d) { return 2; });
-			d3.select(this).style("stroke", function(d) { return '#0000ff'; });
-	    }
-
-	    d.isDrag = false;
 	});
 
@@ -281,7 +301,7 @@
 		.attr("x", function(d) {return d.x;})
 		.attr("y", function(d) {
-			var updown = 18;
+			var updown = (NODEHEIGHT * 0.4);
 			if(d.group % 2 == 1){
-				updown = -8;
+				updown = -(NODEHEIGHT * 0.2);
 			}
 			return d.y + updown;
@@ -312,5 +332,5 @@
 	MAXDEPTH = 0;
 	TREESPACE = 0;
-	DRAWHEIGHT = 0;
+	DRAWHEIGHT = NODEHEIGHT;
 
 	var obj = JSON.parse(jsontext);
@@ -387,5 +407,4 @@
 	}
 	TREESPACE = (window.innerWidth - 200) / (MAXDEPTH + 1);
-	DRAWHEIGHT = TREESPACE / 2;
 
 	// 縺ｧ縺阪◆邨先棡繧定ｿ斐☆
@@ -436,6 +455,6 @@
 
 	if(myNodeIndex != 0){
-		DRAWHEIGHT += (TREESPACE / 2);
-		var x = (depth * TREESPACE) + (TREESPACE / 2);
+		DRAWHEIGHT += (NODEHEIGHT * 1.5);
+		var x = (depth * TREESPACE) + (TREESPACE / 3);
 		var y = DRAWHEIGHT;
 		nodes[myNodeIndex].x = x;
@@ -443,5 +462,5 @@
 	}else{
 		var x = TREESPACE / 2;
-		var y = (TREESPACE / 2) * (PATHNUM / 2) + (TREESPACE / 4);
+		var y = (NODEHEIGHT * 1.5) * ((PATHNUM - 1) / 2) + NODEHEIGHT;
 		nodes[myNodeIndex].x = x;
 		nodes[myNodeIndex].y = y;
@@ -461,5 +480,5 @@
 	for (var i=0; i<children.length; i++){
 		if(i == 0){
-			DRAWHEIGHT -= (TREESPACE / 2);
+			DRAWHEIGHT -= (NODEHEIGHT * 1.5);
 		}
 		var child = children[i];
@@ -499,4 +518,6 @@
 		alert(sel);
 	}
+
+	document.getElementById("showpath").style.display = "none";
 
 	$.ajax({
@@ -527,4 +548,5 @@
 
 	document.getElementById("selectpath").innerHTML = "";
+	document.getElementById("showpath").style.display = "none";
 
 	var selstart = $("*[name=startclass]").val();
@@ -618,5 +640,5 @@
 	<div id="selectpath" style="word-wrap: break-word;">
 	</div>
-	<input type="button" name="getsparql" value="Get SPARQL" onClick="getSPARQL()">
+	<input type="button" id="getsparqlbutton" name="getsparql" value="Get SPARQL" onClick="getSPARQL()">
 </div>
 </body>