Index: BH13SPARQLBuilder/src/hozo/maptool/jsgui.html
===================================================================
--- BH13SPARQLBuilder/src/hozo/maptool/jsgui.html (revision 116)
+++ BH13SPARQLBuilder/src/hozo/maptool/jsgui.html (revision 117)
@@ -20,5 +20,5 @@
 	width: 200px;
 	height: auto;
-	padding: 10px;
+	padding: 15px;
 	-webkit-border-radius: 20px;
 	border-radius: 20px;
@@ -70,12 +70,11 @@
 var DRAWHEIGHT = 0;
 var NODEHEIGHT = 50;
+var MOUSEMOVED = 0;
 var jsontext = "";
-
-
-// 髢九＞縺溘ｉview_map繝｡繧ｽ繝�ラ繧貞他縺ｶ
+var DURATION = 0;
+
+
+// 髢九＞縺溘ｉ蜷�ｨｮ繧､繝ｳ繧ｿ繝ｼ繝輔ぉ繝ｼ繧ｹ驛ｨ蜩√�繧ｵ繧､繧ｺ繧貞､画峩縲√お繝ｳ繝峨�繧､繝ｳ繝井ｸ€隕ｧ繧貞叙蠕励＠繧ｻ繝�ヨ
 $(window).load(function() {
-
-// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
-// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
 
 	var menuwidth = window.innerWidth + "px";
@@ -102,7 +101,4 @@
 	});
 
-// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
-// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
-
 });
 
@@ -118,6 +114,7 @@
 	set_map_location(0, json['nodes'], json['links']);
 
+	// SVG縺ｮ蟷�→鬮倥＆繧定ｨｭ螳夲ｼ亥ｹ�ｼ夂判髱｢縺�▲縺ｱ縺�€€鬮倥＆�壹ヱ繧ｹ縺ｮ謨ｰ縺ｫ蠢懊§險ｭ螳夲ｼ�
 	var width = window.innerWidth;
-	var height = ((NODEHEIGHT * 1.5) * PATHNUM) + NODEHEIGHT;
+	var height = ((NODEHEIGHT * 1.5) * PATHNUM) + (NODEHEIGHT / 2);
 
 	// 繧ｫ繝ｩ繝ｼ繧貞叙蠕�
@@ -128,4 +125,5 @@
 	        d3.select("#graph").select("svg").remove();
 	}
+	DURATION = 0;
 
 	// 繝峨Λ繝�げ譎ゅ�蜃ｦ逅�
@@ -135,4 +133,5 @@
 
 	    d. isDrag = true;
+	    DURATION = 0;
 	    redraw();
 	});
@@ -142,7 +141,7 @@
 	    .attr("width", width)
 	    .attr("height", height);
-/*
-	var bg = d3.select(".background")
-		.enter()
+
+	// 閭梧勹縺ｮ霑ｽ蜉
+	var bg = svg
 		.append("rect")
 		.attr("x", 0)
@@ -150,6 +149,7 @@
 		.attr("width", width)
 		.attr("height", height)
-		.attr("fill", #999999);
-*/
+		.attr("fill", "#fafafa");
+
+	// 繝ｪ繝ｳ繧ｯ縺ｮ菴懈�
 	var link = svg.selectAll(".link")
 	.data(json.links)
@@ -158,4 +158,5 @@
 	.style("stroke-width", function(d) { return Math.sqrt(d.value); });
 
+	// 繝弱�繝峨�菴懈�
 	var node = svg.selectAll(".node")
 	.data(json.nodes)
@@ -165,5 +166,5 @@
 	.attr("cx", function(d) { return d.x;} )
 	.attr("cy",  function(d) { return d.y; })
-	.style("stroke", function(d) { return '#ffffff'; })
+	.style("stroke", function(d) { return '#fafafa'; })
 	.style("stroke-width", function(d) { return '1.5px'; })
 	.style("fill", function(d) { return color(d.group); })
@@ -171,4 +172,5 @@
 	.call(drag);
 
+	// 繝弱�繝峨ユ繧ｭ繧ｹ繝医�菴懈�
 	var tnode = svg.selectAll("text.node")
 	.data(json.nodes)
@@ -185,4 +187,5 @@
 	.call(drag);
 
+	// 繝ｪ繝ｳ繧ｯ繝�く繧ｹ繝医�菴懈�
 	var tlink = svg.selectAll("text.link")
 	.data(json.links)
@@ -191,82 +194,161 @@
 	.attr("x", function(d) { return (json.nodes[d.source].x + json.nodes[d.target].x) / 2; })
 	.attr("y", function(d) { return (json.nodes[d.source].y + json.nodes[d.target].y) / 2; })
-	//.text(function(d) { return d.property; })
 	.style("fill", function(d) { return '#000000'; })
 	.style("text-anchor", function(d) { return 'middle'; });
 
-	// 繝弱�繝峨∈縺ｮ繧ｪ繝ｳ繝槭え繧ｹ縺ｧ繝代せ謗｢邏｢
+	// 繝弱�繝峨∈縺ｮ繧ｯ繝ｪ繝�け縺ｧ繝代せ謗｢邏｢縲√ヱ繧ｹ荳ｭ縺ｮ繝ｪ繝ｳ繧ｯ譁�ｭ励ｒ陦ｨ遉ｺ
 	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 = [];
-
-		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);
+		MOUSEMOVED = 0;
+
+		if(!d.isDrag){
+
+			var path = [];
+			pathname = [];
+
+			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("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";
 			}
 
-			document.getElementById("selectpath").innerHTML=(resultText);
-			document.getElementById("showpath").style.display = "block";
-
-			if(d.group > (MAXDEPTH - 2)){
-				document.getElementById("getsparqlbutton").style.display = "block";
-			}else{
-				document.getElementById("getsparqlbutton").style.display = "none";
+			var movey = d.y;
+
+			node
+			.style("stroke", function(d){
+				var strokecolor = "#fafafa";
+				if(d.view == "now"){
+					d.view = "no";
+				}
+				if(d.view == "moved"){
+					d.view = "clicked";
+				}
+
+				if(d.view == "no"){
+					for(var n = 0; n < path.length; n++){
+						if(path[n] == d.nodeid){
+							strokecolor = "#ffaaaa";
+							d.view = "now";
+						}
+					}
+				}else if(d.view == "clicked"){
+					strokecolor = "#ffaaaa";
+					for(var n = 0; n < path.length; n++){
+						if(path[n] == d.nodeid){
+							d.view = "moved";
+						}
+					}
+				}
+
+				return strokecolor;
+			})
+			.attr("cy", function(d){
+				if(d.view == "now" || d.view == "moved"){
+					var curty = d.y;
+					d.y = movey;
+					return curty;
+				}else{
+					return d.y;
+				}
+			});
+
+			tlink
+			.text(function(d) {
+				var linktext = "";
+				if(d.view == "now"){
+					d.view = "no";
+				}
+
+				if(d.view == "no"){
+					for(var t = 0; t < path.length; t++){
+						if(path[t] == d.target){
+							linktext = d.property;
+							d.view = "now";
+						}
+					}
+				}else if(d.view == "fix"){
+					linktext = d.property;
+				}
+				return linktext;
+			});
+
+			link
+			.style("stroke", function(d){
+				if(d.view == "no"){
+					return "#999";
+				}else{
+					return "#ffaaaa";
+				}
+			});
+
+			redraw();
+		}
+
+	}).on("click", function(d){
+
+		node
+		.style("stroke", function(d) {
+			var strokecolor = "#fafafa"
+			if(d.view == "now" || d.view == "clicked" || d.view == "moved"){
+				strokecolor = "#ffaaaa"
+				d.view = "clicked";
 			}
-
-			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";
-		}
+			return strokecolor;
+		});
 
 		tlink
 		.text(function(d) {
 			var linktext = "";
-			for(var t = 0; t < path.length; t++){
-				if(path[t] == d.target){
-					linktext = d.property;
-				}
+			if(d.view == "now" || d.view == "fix"){
+				linktext = d.property;
+				d.view = "fix";
 			}
 			return linktext;
-		})
-
+		});
+
+	}).on("mouseout", function(d){
+		d.isDrag = false;
 	});
 
@@ -285,4 +367,6 @@
 	var redraw = function (){
 		link
+		.transition()
+		.duration(DURATION)
 		.attr("x1", function(d) {return node.data()[d.source].x;})
 		.attr("y1", function(d) {return node.data()[d.source].y;})
@@ -291,12 +375,18 @@
 
 		tlink
+		.transition()
+		.duration(DURATION)
 		.attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;})
 		.attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;});
 
 		node
+		.transition()
+		.duration(DURATION)
 		.attr("cx", function(d) {return d.x;})
 		.attr("cy", function(d) {return d.y;});
 
 		tnode
+		.transition()
+		.duration(DURATION)
 		.attr("x", function(d) {return d.x;})
 		.attr("y", function(d) {
@@ -307,12 +397,38 @@
 			return d.y + updown;
 		});
+
+		DURATION = 500;
 	};
 
-	svg.on("click", function() {
+	bg.on("click", function() {
 		document.getElementById("showpath").style.display = "none";
 		d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; });
 		d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; });
+
+		node
+		.style("stroke", function(d){
+			d.view = "no";
+			return "#fafafa";
+		});
+
 		tlink
-		.text("");
+		.text(function(d) {
+			d.view = "no";
+			return "";
+		});
+
+		link
+		.style("stroke", function(d){
+			return "#999";
+		});
+
+	});
+
+	bg.on("mousemove", function(){
+		MOUSEMOVED++;
+		if(MOUSEMOVED > 30){
+			document.getElementById("showpath").style.display = "none";
+			MOUSEMOVED = 0;
+		}
 	});
 
@@ -339,5 +455,5 @@
 		if(i == 0){
 			// 蛻晏屓縺縺代Ν繝ｼ繝医ヮ繝ｼ繝峨ｒ繝励ャ繧ｷ繝･
-			ret['nodes'].push({'name':obj['paths'][0]['startClassURI'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length});
+			ret['nodes'].push({'name':obj['paths'][0]['startClassURI'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length, 'view' : 'no'});
 		}
 		// 蜈医↓source縺ｫ0�医Ν繝ｼ繝茨ｼ峨ｒ莉｣蜈･
@@ -383,6 +499,6 @@
 					if(!isCommonNow){
 						isCommon = false;
-						ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length});
-						ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']});
+						ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length, 'view' : 'no'});
+						ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
 						source = ret['nodes'].length - 1;
 					}
@@ -392,12 +508,12 @@
 
 					isCommon = false;
-					ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length});
-					ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']});
+					ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length, 'view' : 'no'});
+					ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
 					source = ret['nodes'].length - 1;
 				}
 			// 譌｢縺ｫ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｪ縺�↑繧画眠隕剰ｿｽ蜉縺励※谺｡縺ｸ
 			}else{
-				ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length});
-				ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']});
+				ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length, 'view' : 'no'});
+				ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
 				source = ret['nodes'].length - 1;
 			}
@@ -516,5 +632,4 @@
 	if(sel == "input"){
 		sel = $("*[name=inputendpoint]").val();
-		alert(sel);
 	}
 
@@ -594,4 +709,20 @@
 }
 
+function sendSPARQL(){
+	var ep = $("*[name=selectendpoint]").val();
+
+	if(ep == "input"){
+		ep = $("*[name=inputendpoint]").val();
+	}
+
+	var query = $("*[name=sparql]").val();
+
+	query = encodeURI(query);
+
+	openpage = ep + "sparql?format=text%2Fhtml&query=" + query;
+
+	window.open(openpage);
+}
+
 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
@@ -603,5 +734,5 @@
 <body>
 
-<div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: #cccccc;">
+<div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: #eeeeee;">
 
 	<div id="setting" style="margin: 15px; float: left;">