Index: SPARQLBuilderWWW/web/gui.html
===================================================================
--- SPARQLBuilderWWW/web/gui.html (revision 140)
+++ SPARQLBuilderWWW/web/gui.html (revision 140)
@@ -0,0 +1,902 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>SPARQL Builder GUI</title>
+
+<style>
+
+.link {
+  stroke: #999;
+  stroke-opacity: .6;
+}
+.tlink {
+  stroke: #999;
+  stroke-opacity: .6;
+}
+
+#showpath {
+	position: absolute;
+	width: 200px;
+	height: auto;
+	padding: 15px;
+	-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;
+}
+
+</style>
+
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+<script type="text/javascript" src="d3.min.js"></script>
+<!--<script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/template.js" charset="UTF-8"></script>-->
+<script>
+<!--
+
+// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
+// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
+
+// 隱ｭ縺ｿ霎ｼ縺ｿ譎ゅ↓螳溯｡後ゅお繝ｳ繝峨�繧､繝ｳ繝医�繝ｪ繧ｹ繝医ｒ騾壼ｸｸ縺ｮ驟榊�縺ｧ霑斐＆繧後ｋ縺薙→縺ｧ蛻昴ａ縺ｮ驕ｸ謚櫁い縺ｫ謖ｿ蜈･
+var getEndPointsURL = "eplist";
+
+// 繧ｨ繝ｳ繝峨�繧､繝ｳ繝医′驕ｸ謚槭＆繧後◆繧峨◎縺ｮURL繧弾p縺ｨ縺�≧蜷榊燕縺ｧ騾∽ｿ｡縲√け繝ｩ繧ｹ繝ｪ繧ｹ繝医ｒ騾壼ｸｸ縺ｮ驟榊�縺ｧ霑斐＆繧後ｋ縺薙→縺ｧ繧ｯ繝ｩ繧ｹ縺ｮ驕ｸ謚櫁い縺ｫ謖ｿ蜈･
+var getClassListURL = "clist";
+
+// 繧ｯ繝ｩ繧ｹ莠後▽縺碁∈謚槭＆繧後◆繧峨◎縺ｮ繧ｯ繝ｩ繧ｹ蜷阪ｒstartclass縲‘ndclass縺ｨ縺�≧蜷榊燕縺ｧ縺昴ｌ縺槭ｌ騾∽ｿ｡縲√◎縺ｮ莠後▽繧堤ｵ舌�繝代せ縺ｮ繝ｪ繧ｹ繝医ｒJSON蠖｢蠑上�繝�く繧ｹ繝医〒霑斐＆繧後ｋ縺薙→縺ｧ縺昴ｌ繧偵げ繝ｩ繝輔↓謠冗判
+var getPathListURL = "plist";
+
+// 繝代せ縺碁∈謚槭＆繧後◆繧泳sonpath縺ｨ縺�≧蜷榊燕縺ｧ繝代せ繧帝壼ｸｸ縺ｮ驟榊�縺ｧ騾∽ｿ｡縲ヾPARQL繧ｯ繧ｨ繝ｪ繧偵ユ繧ｭ繧ｹ繝医〒蜿励￠蜿悶ｊ繝�く繧ｹ繝医お繝ｪ繧｢縺ｫ謖ｿ蜈･
+var getSPARQLURL = "gs.php";
+
+// 縺ｧ縺阪≠縺後▲縺欖PARQL繧帝∽ｿ｡縺吶ｋURL�域悴螳溯｣�ｼ�
+
+// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
+// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
+
+
+var pathname = [];
+var PATHNUM = 0;
+var MAXDEPTH = 0;
+var TREESPACE = 0;
+var DRAWHEIGHT = 0;
+var NODEHEIGHT = 50;
+var MOUSEMOVED = 0;
+var jsontext = "";
+var DURATION = 0;
+
+
+// 髢九＞縺溘ｉ蜷�ｨｮ繧､繝ｳ繧ｿ繝ｼ繝輔ぉ繝ｼ繧ｹ驛ｨ蜩√�繧ｵ繧､繧ｺ繧貞､画峩縲√お繝ｳ繝峨�繧､繝ｳ繝井ｸ隕ｧ繧貞叙蠕励＠繧ｻ繝�ヨ
+$(window).load(function() {
+
+	var menuwidth = window.innerWidth + "px";
+	var inputswidth = ((window.innerWidth - 100) / 2) + "px";
+	document.getElementById("menu").style.width = menuwidth;
+	document.endpoint.inputendpoint.style.width = inputswidth;
+	document.endpoint.selectendpoint.style.width = inputswidth;
+	document.seclass.startclass.style.width = inputswidth;
+	document.seclass.endclass.style.width = inputswidth;
+	document.path.sparql.style.width = inputswidth;
+	document.path.sendsparql.style.width = inputswidth;
+	document.getElementById("graph").style.top = document.getElementById("menu").offsetHeight + "px";
+
+	$.ajax({
+		type: "GET",
+		url : getEndPointsURL,
+		dataType: 'json',
+		success : function(data) {
+			setEndpoints(data);
+		},
+		error : function(XMLHttpRequest, textStatus, errorThrown) {
+			alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
+		}
+	});
+
+});
+
+// 謠冗判蜃ｦ逅�
+function view_map(){
+
+	// make_data繝｡繧ｽ繝�ラ縺ｮ邨先棡繧貞叙蠕�
+	var json = make_data(0);
+	// 豺ｱ縺輔ｒ蜿門ｾ�
+	var dep = MAXDEPTH;
+
+	// 蜃ｺ譚･荳翫′縺｣縺溽ｵ先棡繧呈ｸ｡縺励※繝槭ャ繝嶺ｸ翫�繝ｭ繧ｱ繝ｼ繧ｷ繝ｧ繝ｳ繧偵そ繝�ヨ
+	set_map_location(0, json['nodes'], json['links']);
+
+	// SVG縺ｮ蟷�→鬮倥＆繧定ｨｭ螳夲ｼ亥ｹ�ｼ夂判髱｢縺�▲縺ｱ縺�鬮倥＆�壹ヱ繧ｹ縺ｮ謨ｰ縺ｫ蠢懊§險ｭ螳夲ｼ�
+	var width = window.innerWidth;
+	var height = ((NODEHEIGHT * 1.5) * PATHNUM) + (NODEHEIGHT / 2);
+
+	// 繧ｫ繝ｩ繝ｼ繧貞叙蠕�
+	var color = d3.scale.category20();
+
+	// SVG縺悟ｭ伜惠縺吶ｋ縺ｪ繧峨�蜑企勁
+	if (d3.select("#graph").select("svg")) {
+	        d3.select("#graph").select("svg").remove();
+	}
+	DURATION = 0;
+
+	/*
+	// 繝峨Λ繝�げ譎ゅ�蜃ｦ逅�
+	var drag = d3.behavior.drag().on("drag", function(d,i) {
+	    d.x += d3.event.dx
+	    d.y += d3.event.dy
+
+	    d. isDrag = true;
+	    DURATION = 0;
+	    redraw();
+	});
+	*/
+
+	// SVG縺ｮ霑ｽ蜉
+	var svg = d3.select("#graph").append("svg")
+	    .attr("width", width)
+	    .attr("height", height);
+
+	// 閭梧勹縺ｮ霑ｽ蜉
+	var bg = svg
+		.append("rect")
+		.attr("x", 0)
+		.attr("y", 0)
+		.attr("width", width)
+		.attr("height", height)
+		.attr("fill", "#fafafa");
+
+	// 繝ｪ繝ｳ繧ｯ縺ｮ菴懈�
+	var link = svg.selectAll(".link")
+	.data(json.links)
+	.enter().append("line")
+	.attr("class", "link")
+	.style("stroke-width", function(d) { return Math.sqrt(d.value);});
+
+	// 繝弱�繝峨�菴懈�
+	var node = svg.selectAll(".node")
+	.data(json.nodes)
+	.enter().append("circle")
+	.attr("class", "node")
+	.attr("r", (NODEHEIGHT / 2))
+	.attr("cx", function(d) { return d.x;} )
+	.attr("cy",  function(d) { return d.y; })
+	.style("stroke", function(d) { return '#fafafa'; })
+	.style("stroke-width", function(d) { return '1.5px'; })
+	.style("fill", function(d) { return color(d.group); })
+	.style("cursor", function(d) { return 'pointer'; });
+	//.call(drag);
+
+	// 繝弱�繝峨ユ繧ｭ繧ｹ繝医�菴懈�
+	var tnode = svg.selectAll("text.node")
+	.data(json.nodes)
+	.enter().append("svg:text")
+	.attr("class", "tnode")
+	.attr("x", function(d) { return d.x; })
+	.attr("y", function(d) { return d.y; })
+	.text(function(d) {
+		var nodetext = d.name
+		var nodesplit1 = nodetext.split("/");
+		var nodesplit2 = nodesplit1[nodesplit1.length - 1];
+		var nodesplit3 = nodesplit2.split("#");
+		nodetext = nodesplit3[nodesplit3.length - 1];
+		return nodetext;
+	})
+	.style("fill", function(d) { return '#000000'; })
+	//.style("stroke", function(d) { return '#000000'; })
+	//.style("stroke-width", function(d) { return '1.5px'; })
+	.style("text-anchor", function(d) { return 'middle'; })
+	.style("pointer-events", "none");
+	//.call(drag);
+
+	// 繝ｪ繝ｳ繧ｯ繝�く繧ｹ繝医�菴懈�
+	var tlink = svg.selectAll("text.link")
+	.data(json.links)
+	.enter().append("svg:text")
+	.attr("class", "tlink")
+	.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; })
+	.style("fill", function(d) { return '#000000'; })
+	.style("text-anchor", function(d) { return 'middle'; });
+
+	// 繝弱�繝峨∈縺ｮ繧ｯ繝ｪ繝�け縺ｧ繝代せ謗｢邏｢縲√ヱ繧ｹ荳ｭ縺ｮ繝ｪ繝ｳ繧ｯ譁�ｭ励ｒ陦ｨ遉ｺ
+	node.on("mouseover", function(d){
+
+		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>";
+					}else{
+						resultText = resultText + pathname[i - 1] + "<br><br>";
+					}
+				}
+
+				document.getElementById("selectpath").innerHTML=(resultText);
+
+				if(d.group > (MAXDEPTH - 2)){
+					document.getElementById("getsparqlbutton").style.display = "block";
+				}else{
+					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";
+			}
+
+			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 && node.data()[d.target].view != "hide"){
+							var propertytext = d.property
+							var linksplit1 = propertytext.split("/");
+							var linksplit2 = linksplit1[linksplit1.length - 1];
+							var linksplit3 = linksplit2.split("#");
+							linktext = linksplit3[linksplit3.length - 1];
+							d.view = "now";
+						}
+					}
+				}else if(d.view == "fix" && node.data()[d.target].view != "hide"){
+					var propertytext = d.property
+					var linksplit1 = propertytext.split("/");
+					var linksplit2 = linksplit1[linksplit1.length - 1];
+					var linksplit3 = linksplit2.split("#");
+					linktext = linksplit3[linksplit3.length - 1];
+				}
+				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";
+			}
+			return strokecolor;
+		});
+
+		//d.hideparent = d.nodeid;
+
+		var childs = [];
+		var prevchilds = [];
+		prevchilds.push(d.nodeid);
+
+		do{
+			var tmpchilds = [];
+			var curchilds = [];
+			for(var p = 0; p < prevchilds.length; p++){
+				tmpchilds = get_children(prevchilds[p], json['links']);
+				curchilds = curchilds.concat(tmpchilds);
+			}
+			prevchilds = curchilds;
+			childs = childs.concat(curchilds);
+
+		}while(curchilds.length != 0);
+
+		var childy = d.y;
+		for(var c = 0; c < childs.length; c++){
+			if(node.data()[childs[c]].y < childy){
+				childy = node.data()[childs[c]].y;
+			}
+		}
+
+		d.y = childy;
+
+		var maxdy = 0;
+		var mindy = 0;
+
+		for(var c = 0; c < childs.length; c++){
+			if(node.data()[childs[c]].view != "hide"){
+				var dy = node.data()[childs[c]].y - d.y;
+				if(dy > maxdy){
+					maxdy = dy;
+				}
+				node.data()[childs[c]].x = d.x;
+				node.data()[childs[c]].y = d.y;
+				node.data()[childs[c]].dy = dy;
+				node.data()[childs[c]].view = "hide";
+				node.data()[childs[c]].hideparent = d.nodeid;
+			}else{
+				if(node.data()[childs[c]].hideparent == d.nodeid){
+					node.data()[childs[c]].x = d.x + (TREESPACE * (node.data()[childs[c]].group - d.group));
+					node.data()[childs[c]].y = node.data()[childs[c]].y + node.data()[childs[c]].dy;
+					if(-node.data()[childs[c]].dy < mindy){
+						mindy = -node.data()[childs[c]].dy;
+					}
+					node.data()[childs[c]].view = "appear";
+					node.data()[childs[c]].hideparent = -1;
+				}
+			}
+		}
+
+		node
+		.attr("r", function(d){
+			if(d.view == "appear"){
+				d.view = "no";
+			}else if(d.y > childy){
+				d.y = d.y - maxdy - mindy;
+			}
+			if(d.view == "hide"){
+				d.x = node.data()[d.hideparent].x;
+				d.y = node.data()[d.hideparent].y;
+			}
+			if(d.nodeid == 0){
+				d.y = childy;
+			}
+			return (NODEHEIGHT / 2);
+		});
+
+		tlink
+		.text(function(d) {
+			var linktext = "";
+			if((d.view == "now" || d.view == "fix") && (node.data()[d.target].view != "hide")){
+				var propertytext = d.property
+				var linksplit1 = propertytext.split("/");
+				var linksplit2 = linksplit1[linksplit1.length - 1];
+				var linksplit3 = linksplit2.split("#");
+				linktext = linksplit3[linksplit3.length - 1];
+				d.view = "fix";
+			}
+			return linktext;
+		});
+
+
+		redraw();
+
+	}).on("mouseout", function(d){
+		d.isDrag = false;
+	});
+
+	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;})
+		.attr("x2", function(d) {return node.data()[d.target].x;})
+		.attr("y2", function(d) {return node.data()[d.target].y;});
+
+		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;})
+		.style("opacity", function(d){
+			var opa = 1.0;
+			if(d.view == "hide"){
+				opa = 0.0;
+			}
+			return opa;
+		})
+		.style("fill", function(d) {
+			var fcolor = color(d.group);
+
+			for(var n = 0; n < node.data().length; n++){
+				if(d.nodeid == node.data()[n].hideparent){
+					fcolor = "ffaaaa";
+				}
+			}
+			return fcolor;
+		})
+		.style("pointer-events", function(d){
+			var pe = "auto";
+			if(d.view == "hide"){
+				pe = "none";
+			}
+			return pe;
+		});
+
+		tnode
+		.transition()
+		.duration(DURATION)
+		.attr("x", function(d) {return d.x;})
+		.attr("y", function(d) {
+			var updown = (NODEHEIGHT * 0.4);
+			if(d.group % 2 == 1){
+				updown = -(NODEHEIGHT * 0.2);
+			}
+			if(d.view == "now" || d.view == "moved"){
+				//updown = 5;
+			}
+			return d.y + updown;
+		})
+		.text(function(d){
+			var nt = d.name;
+			if(d.view == "hide"){
+				nt = "";
+			}
+			return nt;
+		});
+
+		DURATION = 500;
+
+	};
+
+	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){
+			if(d.view != "hide"){
+				d.view = "no";
+			}
+			return "#fafafa";
+		});
+
+		tlink
+		.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;
+		}
+	});
+
+	redraw();
+}
+
+// 繝��繧ｿ縺ｮ菴懈�繝｡繧ｽ繝�ラ
+function make_data(tdepth, ret, parent, depth){
+	// ret縺梧悴螳夂ｾｩ縺ｪ繧峨�螳夂ｾｩ縺励※莉｣蜈･
+	if (ret == undefined){
+		ret = new Object();
+		ret['nodes'] = new Array();
+		ret['links'] = new Array();
+	}
+
+	PATHNUM = 0;
+	MAXDEPTH = 0;
+	TREESPACE = 0;
+	DRAWHEIGHT = NODEHEIGHT;
+
+	var obj = JSON.parse(jsontext);
+	// obj繝医ャ繝鈴嚴螻､縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
+	for(var i = 0; i < obj['paths'].length; i++){
+		if(i == 0){
+			// 蛻晏屓縺縺代Ν繝ｼ繝医ヮ繝ｼ繝峨ｒ繝励ャ繧ｷ繝･
+			ret['nodes'].push({'name':obj['paths'][0]['startClassURI'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length, 'view' : 'no'});
+		}
+		// 蜈医↓source縺ｫ0�医Ν繝ｼ繝茨ｼ峨ｒ莉｣蜈･
+		var source = 0;
+		// 蜈ｱ騾壹Ν繝ｼ繝亥愛螳壹ｒtrue縺ｫ
+		var isCommon = true;
+
+		// classLinks縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
+		for(var j = 0;j < obj['paths'][i]['classLinks'].length; j++){
+
+			if(MAXDEPTH < j+1){
+				MAXDEPTH = j+1;
+			}
+			// 縺薙％縺ｾ縺ｧ蜈ｱ騾壹Ν繝ｼ繝医↑繧�
+			if(isCommon){
+				// 莉雁屓繧ょ�騾壹°遒ｺ隱阪☆繧九◆繧√�繝輔Λ繧ｰ
+				var isCommonNow = false;
+				// nodes驟榊�縺ｫ蜷後§linkedClass縺梧里縺ｫ縺ゅｋ縺狗｢ｺ隱�
+				var targets = [];
+				for(var k = 0; k < ret['nodes'].length; k++){
+					// 蜷碁嚴螻､縺九▽蜷後§蜷榊燕縺ｮ繧ゅ�縺後≠縺｣縺溘ｉtargets驟榊�縺ｫ逡ｪ蜿ｷ繧定ｿｽ蜉
+					if(ret['nodes'][k]['group'] == (j+1) && obj['paths'][i]['classLinks'][j]['linkedClassURI'] == ret['nodes'][k]['name']){
+						targets.push(k);
+					}
+				}
+
+				// 譌｢縺ｫ縺ゅ▲縺溷ｴ蜷医�links驟榊�縺ｫ蜷後§link縺悟ｭ伜惠縺吶ｋ縺狗｢ｺ隱�
+				if(targets.length != 0){
+					// 蜈医⊇縺ｩ隕九▽縺代◆targets縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
+					for(var l = 0; l <targets.length; l++){
+						// links驟榊�縺ｫ蜈ｨ縺丞酔縺俶擅莉ｶ縺ｮ繧ゅ�縺後≠繧九°遒ｺ隱�
+						for(var m = 0; m < ret['links'].length; m++){
+							// 縺ゅ▲縺溷ｴ蜷井ｻ雁屓縺ｮ繧ゅ�縺ｯ霑ｽ蜉縺帙★source繧呈峩譁ｰ縺励※谺｡縺ｸ
+							if(ret['links'][m]['source'] == source && ret['links'][m]['target'] == targets[l] && ret['links'][m]['property'] == obj['paths'][i]['classLinks'][j]['propertyURI'] && !isCommonNow){
+								// 蜈ｱ騾壹Ν繝ｼ繝医ヵ繝ｩ繧ｰ繧偵が繝ｳ
+								isCommonNow = true;
+								source = targets[l];
+							}
+						}
+					}
+
+					// 蜷дarget繧堤｢ｺ隱阪＠縺ｦ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｯ縺ｪ縺九▲縺溷ｴ蜷域眠隕剰ｿｽ蜉
+					if(!isCommonNow){
+						isCommon = false;
+						ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'dy':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{
+
+					isCommon = false;
+					ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'dy':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, 'dy':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;
+			}
+
+		}
+		PATHNUM++;
+	}
+	TREESPACE = (window.innerWidth - 200) / (MAXDEPTH + 1);
+
+	// 縺ｧ縺阪◆邨先棡繧定ｿ斐☆
+	return ret;
+}
+
+// 逕滓�縺輔ｌ縺溘ョ繝ｼ繧ｿ縺ｮ螳滄圀縺ｮ繝ｭ繧ｱ繝ｼ繧ｷ繝ｧ繝ｳ繧定ｨ育ｮ励☆繧九Γ繧ｽ繝�ラ�亥�蝗槭�myNodeIndex縺�縲］odes縺ｫ逕滓�縺輔ｌ縺殤odes驟榊�縲〕inks縺ｫ逕滓�縺輔ｌ縺殕inks驟榊�縺梧ｸ｡縺輔ｌ繧具ｼ�
+function set_map_location(myNodeIndex, nodes, links, depth, fromAngle, toAngle){
+
+	// depth縺梧悴螳夂ｾｩ縺ｪ繧峨�0繧偵そ繝�ヨ
+	if (depth == undefined){
+		depth = 0;
+	}
+/*
+	// fromAngle縺梧悴螳夂ｾｩ縺ｪ繧峨�0繧偵そ繝�ヨ
+	if (fromAngle == undefined){
+		fromAngle = 0;
+	}
+	// toAngle縺梧悴螳夂ｾｩ縺ｪ繧峨�1繧偵そ繝�ヨ
+	if (toAngle == undefined){
+		toAngle = 1;
+	}
+*/
+
+	// 蜷�ｨｮ蛻晄悄蛹�
+	var children = undefined;
+	var parent = undefined;
+	var parentsChildren = undefined;
+
+	/*
+	ret['nodes'].push({'name':'aaaa', 'group': depth, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
+	ret['links'].push({'source':parent, 'target':newIndex, 'value':5});
+	*/
+
+	// links驟榊�縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
+	for (var i=0; i<links.length; i++){
+		// 縺昴�links縺ｮtarget縺稽yNodeIndex縺ｪ繧英arent繧偵そ繝�ヨ
+		if (links[i].target == myNodeIndex){
+			parent = links[i].source;
+		}
+	}
+
+	// parent縺瑚ｦ九▽縺九▲縺ｦ縺�◆縺ｪ繧峨�
+	if (parent != undefined){
+		// parent縺ｨlinks繧呈ｸ｡縺揚et_children繝｡繧ｽ繝�ラ繧貞ｮ溯｡�
+		parentsChildren = get_children(parent, links);
+	}
+
+	if(myNodeIndex != 0){
+		DRAWHEIGHT += (NODEHEIGHT * 1.5);
+		var x = (depth * TREESPACE) + (TREESPACE / 3);
+		var y = DRAWHEIGHT;
+		nodes[myNodeIndex].x = x;
+		nodes[myNodeIndex].y = y;
+	}else{
+		var x = TREESPACE / 2;
+		var y = (NODEHEIGHT * 1.5) * ((PATHNUM - 1) / 2) + NODEHEIGHT;
+		nodes[myNodeIndex].x = x;
+		nodes[myNodeIndex].y = y;
+	}
+
+	/*
+	var x = (WIDTH/2) + depth * (WIDTH / (MAXDEPTH * 2 + 1)) * Math.sin(2 * 3.14 * ((toAngle + fromAngle) / 2));
+	var y = (HEIGHT/2) + depth * (HEIGHT / (MAXDEPTH * 2 + 1)) * Math.cos(2 * 3.14 * ((toAngle + fromAngle) / 2));
+	nodes[myNodeIndex].x = x;
+	nodes[myNodeIndex].y = y;
+
+	CIRCLE_SIZE = (WIDTH / (MAXDEPTH * 2 + 1));
+	*/
+
+	children = get_children(myNodeIndex, links);
+
+	for (var i=0; i<children.length; i++){
+		if(i == 0){
+			DRAWHEIGHT -= (NODEHEIGHT * 1.5);
+		}
+		var child = children[i];
+		set_map_location(child, nodes, links, depth+1, fromAngle + ((toAngle - fromAngle) / children.length) * i, fromAngle + ((toAngle - fromAngle) / children.length) * (i+1));
+	}
+
+}
+
+// 謖�ｮ壹＆繧後◆隕ｪ縺梧戟縺､蟄舌ｒ霑斐☆
+function get_children(index, links){
+	var children = new Array();
+	// links縺ｮ謨ｰ縺縺醍｢ｺ隱阪＠縺ｪ縺後ｉ
+	for (var i=0; i<links.length; i++){
+		// 隕ｪ縺梧ｸ｡縺輔ｌ縺溯ｦｪ縺ｨ荳閾ｴ縺吶ｋ譎ゅ�蟄舌ｒ霑ｽ蜉
+		if (links[i].source == index){
+			children.push(links[i].target);
+		}
+	}
+	return children;
+}
+
+// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
+// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
+
+function setEndpoints(ep){
+	for (var i = 0; i < ep.length; i++){
+		$("*[name=selectendpoint]").append('<option value="' + ep[i] + '">' + ep[i]);
+	}
+}
+
+function setEndpoint(){
+
+	var sel = $("*[name=selectendpoint]").val();
+
+	if(sel == "input"){
+		sel = $("*[name=inputendpoint]").val();
+	}
+
+	document.getElementById("showpath").style.display = "none";
+
+	$.ajax({
+		type: "GET",
+		url : getClassListURL,
+		data: {
+		    ep: sel
+  },
+		dataType: 'json',
+		success : function(epclass) {
+			$("*[name=startclass] option").remove();
+			$("*[name=endclass] option").remove();
+			for (var i = 0; i < epclass.length; i++){
+				$("*[name=startclass]").append('<option value="' + epclass[i] + '">' + epclass[i]);
+				$("*[name=endclass]").append('<option value="' + epclass[i] + '">' + epclass[i]);
+			}
+		},
+		error : function(XMLHttpRequest, textStatus, errorThrown) {
+			alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
+		}
+	});
+	document.getElementById("seclass").style.display = "block";
+}
+
+function setSEClass(){
+
+	var sel = $("*[name=selectendpoint]").val();
+
+	if(sel == "input"){
+		sel = $("*[name=inputendpoint]").val();
+	}
+
+	MAXDEPTH = 0;
+
+	document.getElementById("selectpath").innerHTML = "";
+	document.getElementById("showpath").style.display = "none";
+
+	var selstart = $("*[name=startclass]").val();
+	var selend = $("*[name=endclass]").val();
+
+	$.ajax({
+		type: "GET",
+		url : getPathListURL,
+		data: {
+		    ep: sel,
+		    startclass: selstart,
+		    endclass: selend
+  },
+		dataType: 'text',
+		success : function(nodes) {
+			jsontext = nodes;
+			view_map();
+		},
+		error : function(XMLHttpRequest, textStatus, errorThrown) {
+			alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
+		}
+	});
+}
+
+function getSPARQL(){
+
+	var selectpath = JSON.stringify(pathname);
+	//document.getElementById("selectpath").innerHTML=(resultText);
+
+	$.ajax({
+		type: "GET",
+		url : getSPARQLURL,
+		data: {
+		    jsonpath: selectpath
+  },
+		dataType: 'text',
+		success : function(sparql) {
+			document.path.sparql.value = sparql;
+			document.getElementById("showpath").style.display = "none";
+			window.scrollTo(0, 0);
+		},
+		error : function(XMLHttpRequest, textStatus, errorThrown) {
+			alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
+		}
+	});
+}
+
+function sendSPARQL(){
+	var ep = $("*[name=selectendpoint]").val();
+
+	if(ep == "input"){
+		ep = $("*[name=inputendpoint]").val();
+	}
+
+	var query = $("*[name=sparql]").val();
+
+	query = encodeURI(query);
+
+	openpage = ep + "?format=text%2Fhtml&query=" + query;
+
+	window.open(openpage);
+}
+
+// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
+// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
+
+-->
+
+</script>
+</head>
+<body>
+
+<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;">
+		<div id="endpoint">
+			<form name="endpoint">
+				<input type="text" style="width: 200px;" name="inputendpoint"><br>
+				<select size=1 name="selectendpoint" style="width: 200px;">
+					<option value="input">Textbox
+				</select><br>
+				<input type="button" name="setendpoint" value="SetEndPoint" onClick="setEndpoint()">
+			</form>
+		</div>
+		<div id="seclass" style="margin-top: 30px;">
+			<form name="seclass">
+				StartClass<br>
+				<select size=1 name="startclass" style="width: 200px;">
+				</select><br>
+				EndClass<br>
+				<select size=1 name="endclass" style="width: 200px;">
+				</select><br>
+				<input type="button" name="setclass" value="SetClass" onClick="setSEClass()">
+			</form>
+		</div>
+	</div>
+
+	<div id="editing" style="margin: 15px 25px; float: right;">
+		<form name="path">
+			<textarea name="sparql" style="width: 300px; height: 180px;"></textarea><br>
+			<input type="button" name="sendsparql" value="Send SPARQL" onClick="sendSPARQL()"><br>
+		</form>
+	</div>
+</div>
+<div id="graph" style="position: absolute; top:0px; left:0px;">
+</div>
+<div id="showpath" style="display: none;">
+	<div id="selectpath" style="word-wrap: break-word;">
+	</div>
+	<input type="button" id="getsparqlbutton" name="getsparql" value="Get SPARQL" onClick="getSPARQL()">
+</div>
+</body>
+</html>
