Index: /SPARQLBuilderWWW/web/newsparqlbuilder.js
===================================================================
--- /SPARQLBuilderWWW/web/newsparqlbuilder.js (revision 232)
+++ /SPARQLBuilderWWW/web/newsparqlbuilder.js (revision 233)
@@ -11,4 +11,8 @@
 var endclass = "";
 
+var defendpoint = "";
+var defstartclass= "";
+var defendclass = "";
+
 var jsontext = "";
 var pathobj = "";
@@ -22,12 +26,17 @@
 	// 繝壹�繧ｸ縺ｮ繝代�繝�Κ蛻�ｒ霑ｽ蜉
 	initparts();
+
+	getParameter();
+
+	if(defendpoint != "" && defstartclass != "" && defendclass != ""){
+		openSPARQLBuilder();
+	}
+
 });
 
 function initparts(){
 	var sbdiv = $('div#SPARQLBUILDER');
-// <input type="button" class="SBTopButton" value="Try with Sample" onclick="trySample()">
-	var sbtop = '<div class="SBTopItems"><input type="button" class="SBTopButton" value="Open SPARQLBuilder" onclick="openSPARQLBuilder()"><br /><textarea class="SBSparqlArea" rows="10"></textarea><br /><input type="button" class="SBTopButton" value="Send SPARQL" onclick="sendSPARQL()"><input type="button" class="SBTopButton" value="Download Result" onclick="downloadResult()"></div>';
-// <input type="button" class="SBSaveESE" value="Save" onClick="openPermalink">
-	var sbmodal = '<div class="SBModalView"><div class="SBModalContents"><div class="SBSelects"><select class="SBEndPointSelect"></select><select class="SBStartClassSelect"></select><select class="SBEndClassSelect"></select></div><div class="SBMessage"><div class="SBResult"><span class="SBPathnum"></span> Path<span class="SBPlural"></span> found.</div><div class="SBViewAll"><input type="button" value="View All" onClick="viewAll()"></div></div><div class="SBGraph"><div class="SBAjaxLoad"><div class="SBLoadIcon"><img src="images/ajax-loader.gif"></div></div></div><div class="SBSelectedPath"></div><div class="SBModalButtons"><input type="button" class="SBModalButton" value="Close" onclick="closeSPARQLBuilder()"></div></div>';
+	var sbtop = '<div class="SBTopItems"><input type="button" class="SBTopButton" value="Open SPARQLBuilder" onclick="openSPARQLBuilder()"><input type="button" class="SBTopButton" value="Try with Sample" onclick="openSample(\'http://www.ebi.ac.uk/rdf/services/reactome/sparql\', \'http://www.biopax.org/release/biopax-level3.owl#Protein\', \'http://www.biopax.org/release/biopax-level3.owl#Pathway\')"><br /><textarea class="SBSparqlArea" rows="10"></textarea><br /><input type="button" class="SBTopButton" value="Send SPARQL" onclick="sendSPARQL()"><input type="button" class="SBTopButton" value="Download Result" onclick="downloadResult()"></div>';
+	var sbmodal = '<div class="SBModalView"><div class="SBModalContents"><div class="SBSelects"><select class="SBEndPointSelect"></select><select class="SBStartClassSelect"></select><select class="SBEndClassSelect"></select><input type="button" class="SBSaveESE" value="PermaLink" onClick="openPermalink()"></div><div class="SBMessage"><div class="SBResult"><span class="SBPathnum"></span> Path<span class="SBPlural"></span> found.</div><input type="button" class="SBViewAll" value="View All" onClick="viewAll()"></div><div class="SBGraph"><div class="SBAjaxLoad"><div class="SBLoadIcon"><img src="images/ajax-loader.gif"></div></div></div><div class="SBSelectedPath"></div><div class="SBModalButtons"><input type="button" class="SBModalButton" value="Close" onclick="closeSPARQLBuilder()"></div></div>';
 
 	sbdiv.html(sbtop);
@@ -42,10 +51,4 @@
 		event.stopPropagation();
 	});
-
-	/*
-	$('#StartClassSelect').on('epcomplete', function(){
-		console.log("comp.");
-    });
-	*/
 
 	loadEndPointList();
@@ -66,4 +69,27 @@
 }
 
+
+function getParameter()
+{
+    if( 1 < window.location.search.length )
+    {
+        var query = window.location.search.substring( 1 );
+        var parameters = query.split( '&' );
+
+        for( var i = 0; i < parameters.length; i++ )
+        {
+            var element = parameters[ i ].split( '=' );
+            if(decodeURIComponent( element[ 0 ] ) == "ep"){
+            	defendpoint = decodeURIComponent( element[ 1 ] )
+            }else if(decodeURIComponent( element[ 0 ] ) == "st"){
+            	defstartclass = decodeURIComponent( element[ 1 ] )
+            }else if(decodeURIComponent( element[ 0 ] ) == "en"){
+            	defendclass = decodeURIComponent( element[ 1 ] )
+            }
+        }
+    }
+}
+
+
 function openSPARQLBuilder(){
 
@@ -76,5 +102,5 @@
 	$('.SBModalContents .SBMessage').css('width', 200 + 'px').css('height', 30 + 'px');
 	$('.SBModalContents .SBGraph').css('width', (mvw - 201) + 'px').css('height', (mvh - 31) + 'px');
-	$('.SBModalContents .SBSelectedPath').css('width', 200 + 'px').css('height', (mvh - 31 - 26) + 'px');
+	$('.SBModalContents .SBSelectedPath').css('width', 180 + 'px').css('height', (mvh - 51 - 26) + 'px');
 	$('.SBModalContents .SBModalButtons').css('width', 200 + 'px').css('height', '26px');
 
@@ -82,4 +108,37 @@
 	$(".SBStartClassSelect").select2();
 	$(".SBEndClassSelect").select2();
+
+	if(defendpoint != "" && defstartclass != "" && defendclass != ""){
+
+		$('.SBStartClassSelect').on('lccomplete', function(){
+			$('.SBStartClassSelect').val(defstartclass);
+			defstartclass = "";
+			$('.SBEndClassSelect').val(defendclass);
+			defendclass = "";
+
+			$(".SBEndPointSelect").select2();
+			$(".SBStartClassSelect").select2();
+			$(".SBEndClassSelect").select2();
+
+			$('.SBStartClassSelect').unbind('lccomplete');
+		});
+
+		loadPathList();
+
+		var eplist = $('.SBEndPointSelect option');
+
+		if(eplist.length == 0){
+			$('.SBEndPointSelect').on('epcomplete', function(){
+				$('.SBEndPointSelect').val(defendpoint);
+				defendpoint = "";
+				loadClassList();
+				$('.SBEndPointSelect').unbind('epcomplete');
+			});
+		}else{
+			$('.SBEndPointSelect').val(defendpoint);
+			defendpoint = "";
+			loadClassList();
+		}
+	}
 
 	d3.select('.SBModalView').on("mousewheel", function(){
@@ -88,6 +147,18 @@
 }
 
+function openSample(ep, st, en){
+	defendpoint = ep;
+	defstartclass = st;
+	defendclass = en;
+
+	openSPARQLBuilder();
+}
+
 function openPermalink(){
-
+	var baseurl = location.href;
+	var spliturl = baseurl.split('?');
+	var url = spliturl[0] + "?ep=" + encodeURIComponent(endpoint) + "&st=" + encodeURIComponent(startclass) + "&en=" + encodeURIComponent(endclass);
+
+	window.open(url);
 }
 
@@ -122,5 +193,5 @@
 				}
 			}
-			//$("#SBStartClassSelect").trigger(new $.Event('epcomplete'));
+			$(".SBEndPointSelect").trigger(new $.Event('epcomplete'));
 		},
 	});
@@ -153,5 +224,5 @@
 			$(".SBStartClassSelect").select2();
 			$(".SBEndClassSelect").select2();
-			//$("#seclass").trigger(new $.Event('secomplete'));
+			$(".SBStartClassSelect").trigger(new $.Event('lccomplete'));
 		}
 	});
@@ -159,6 +230,13 @@
 
 loadPathList = function() {
-	var startclass = $(".SBStartClassSelect").val();
-	var endclass = $(".SBEndClassSelect").val();
+	startclass = $(".SBStartClassSelect").val();
+	endclass = $(".SBEndClassSelect").val();
+
+	if(defendpoint != "" && defstartclass != "" && defendclass != ""){
+		endpoint = defendpoint;
+		startclass = defstartclass;
+		endclass = defendclass;
+	}
+
 	$('.SBSaveESE').attr('disabled', true);
 	if (startclass == null || endclass == null || startclass == "SBDefault" || endclass == "SBDefault"){
@@ -170,5 +248,5 @@
 	$('.SBResult').hide();
 	$('.SBViewAll').hide();
-	$('.SBSelectedPath').html('');
+	$('.SBSelectedPath').html('<h1>Please <span style="color: hsl(150, 50%, 75%);">select a leaf node</span> and <span style=\"color: hsl(200, 50%, 75%);\">push button</span> to generate a SPARQL</h1>');
 
 	var url = "http://www.sparqlbuilder.org/api/plist?ep=" + encodeURIComponent(endpoint)
@@ -327,4 +405,7 @@
             	}else if(vby > (graphheight - height)){
             		vby = (graphheight - height);
+            		if(vby < 0){
+                		vby = 0;
+                	}
             	}else{
             		event.preventDefault();
@@ -340,5 +421,11 @@
             .attr("y", 0)
             .attr("width", width)
-            .attr("height", graphheight)
+            .attr("height", function(){
+            	if(graphheight < height){
+            		return height;
+            	}else{
+            		return graphheight;
+            	}
+            })
             .attr("fill", "#fafafa");
 
@@ -439,19 +526,25 @@
                 if(d.path == "notend"){
                     // 繝��繝ｫ繝√ャ繝励ｒ髱櫁｡ｨ遉ｺ縺ｫ
-                    $('.SBSelectedPath').html('');
+                    $('.SBSelectedPath').html('<h1>Please <span style="color: hsl(150, 50%, 75%);">select a leaf node</span> and <span style=\"color: hsl(200, 50%, 75%);\">push button</span> to generate a SPARQL</h1>');
                 }else{
                     // 譛ｫ遶ｯ繝弱�繝峨↑繧峨ヤ繝ｼ繝ｫ繝√ャ繝励�諠�ｱ繧呈峩譁ｰ
-                    var resultText = "<h2>Selected Path</h2>";
+                    var resultText = "";
                     // 繝代せ縺ｮ蜷榊燕驟榊�蛻�ｾ後ｍ縺九ｉ郢ｰ繧願ｿ斐＠縺ｪ縺後ｉ
                     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>";
+                        	if(i == 1){
+                                resultText = resultText + "<div class=\"SBLeafNode\">" + pathname[i - 1] + "</div>";
+                        	}else if(i == pathname.length){
+                                resultText = resultText + "<div class=\"SBRootNode\">" + pathname[i - 1] + "</div>";
+                        	}else{
+                                resultText = resultText + "<div class=\"SBPathNode\">" + pathname[i - 1] + "</div>";
+                        	}
                         // 蛛ｶ謨ｰ逡ｪ逶ｮ�医Μ繝ｳ繧ｯ縺ｮ蜷榊燕�峨�縺昴�縺ｾ縺ｾ縺ｧ陦ｨ遉ｺ
                         }else{
-                            resultText = resultText + pathname[i - 1] + "<br><br>";
+                            resultText = resultText + "<img src=\"images/pathline.png\"><div class=\"SBPathProperty\">" + pathname[i - 1] + "</div><img src=\"images/pathline.png\">";
                         }
                     }
-                    resultText = resultText + '<input type="button" value="Generate" onclick="generateSPARQL()">';
+                    resultText = resultText + '<input type="button" class="SBGenButton" value="Generate" onclick="generateSPARQL()">';
                     // 繝��繝ｫ繝√ャ繝励�蜀�ｮｹ繧呈嶌縺肴鋤縺�
                     $('.SBSelectedPath').html(resultText);
@@ -463,29 +556,5 @@
                     pathobj = d.path;
 
-
-                    /*
-                    // 繝��繝ｫ繝√ャ繝苓｡ｨ遉ｺ譎ゅ�蠎ｧ讓呻ｼ医が繝ｳ繝槭え繧ｹ縺輔ｌ縺溘ヮ繝ｼ繝峨�讓ｪ縺ｫ繝懊ち繝ｳ縺梧擂繧九ｈ縺��鄂ｮ��
-                    var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + NODEHEIGHT;
-                    var yPosition = parseFloat(d3.select(this).attr("cy") - $('.SBTooltip').height() - 30 + ($('.SBModalView').height() / 20)) + NODEHEIGHT;
-
-                    $('.SBModalView')
-
-                    // 繝��繝ｫ繝√ャ繝励′逕ｻ髱｢螟悶↓蜃ｺ縺ｪ縺�ｈ縺�｣懈ｭ｣
-                    if(xPosition < 0){
-                        xPosition = 0;
-                    }
-                    if(yPosition < 0){
-                        yPosition = 0;
-                    }
-
-                    // 逕滓�縺励◆蠎ｧ讓吶↓繝��繝ｫ繝√ャ繝励ｒ陦ｨ遉ｺ
-                    $('.SBTooltip').css('left', xPosition + "px").css('top', yPosition + "px");
-                    */
-
                 }
-            // 繝ｫ繝ｼ繝医ヮ繝ｼ繝峨□縺｣縺溘↑繧�
-            }else{
-                // 繝��繝ｫ繝√ャ繝励ｒ髱櫁｡ｨ遉ｺ
-                $('.SBTooltip').hide();
             }
 
@@ -811,5 +880,5 @@
         if(i == 0){
             // 蛻晏屓縺縺代Ν繝ｼ繝医ヮ繝ｼ繝峨ｒ繝励ャ繧ｷ繝･
-            ret['nodes'].push({'name': obj[0]['label'], 'uri': obj[0]['startClass'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length, 'view' : 'no', 'path': 'notend', 'nodecolor': '#d0a36a'});
+            ret['nodes'].push({'name': obj[0]['label'], 'uri': obj[0]['startClass'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length, 'view' : 'no', 'path': 'notend', 'nodecolor': 'hsl(40, 50%, 75%)'});
         }
         // 蜈医↓source縺ｫ0�医Ν繝ｼ繝茨ｼ峨ｒ莉｣蜈･
@@ -887,5 +956,5 @@
         ret['nodes'][ret['nodes'].length - 1]['path'] = obj[i];
         ret['nodes'][ret['nodes'].length - 1]['score'] = score;
-        ret['nodes'][ret['nodes'].length - 1]['nodecolor'] = '#8cddc0';
+        ret['nodes'][ret['nodes'].length - 1]['nodecolor'] = 'hsl(150, 50%, 75%)';
         PATHNUM++;
     }
Index: /SPARQLBuilderWWW/web/newgui.html
===================================================================
--- /SPARQLBuilderWWW/web/newgui.html (revision 232)
+++ /SPARQLBuilderWWW/web/newgui.html (revision 233)
@@ -10,6 +10,8 @@
 	</head>
 	<body>
-	    <div id="SPARQLBUILDER">
-	    </div>
+		<div id="wrap" style="width:30%;">
+			<div id="SPARQLBUILDER">
+			</div>
+		</div>
 	</body>
 </html>
Index: /SPARQLBuilderWWW/web/newsparqlbuilder.css
===================================================================
--- /SPARQLBuilderWWW/web/newsparqlbuilder.css (revision 232)
+++ /SPARQLBuilderWWW/web/newsparqlbuilder.css (revision 233)
@@ -7,6 +7,18 @@
 }
 
-.SBTOPButton{
-	margin-right: 1em;
+.SBTopButton{
+	margin: 0.5em 1em 0.5em 0;
+	-webkit-border-radius: 7;
+	-moz-border-radius: 7;
+	border-radius: 7px;
+	border: none;
+	color: #ffffff;
+	background: hsl(200, 50%, 75%);
+	padding: 5px 15px 5px 15px;
+	cursor: pointer;
+}
+
+.SBTopButton:hover{
+	background: hsl(200, 50%, 85%);
 }
 
@@ -40,5 +52,5 @@
 
 .SBModalContents .SBSelects select{
-	width: 30%;
+	width: 28%;
 	height: 2em;
 }
@@ -46,7 +58,15 @@
 .SBModalContents .SBSelects input{
 	display: inline-block;
-	width: 7.5%;
+	width: 13.5%;
 	margin: 0 1% 0;
 	height: 2em;
+	-webkit-border-radius: 3;
+	-moz-border-radius: 3;
+	border-radius: 3px;
+	border: none;
+	color: #ffffff;
+	background: hsl(0, 50%, 75%);
+	padding: 3px 5px 3px 5px;
+	cursor: pointer;
 }
 
@@ -67,6 +87,15 @@
 	display: none;
 	float: left;
-	margin-top: 0.3em;
+	margin-top: 1px;
 	margin-left: 0.5em;
+	height: 2em;
+	-webkit-border-radius: 3;
+	-moz-border-radius: 3;
+	border-radius: 3px;
+	border: none;
+	color: #ffffff;
+	background: hsl(0, 50%, 75%);
+	padding: 3px 5px 3px 5px;
+	cursor: pointer;
 }
 
@@ -96,10 +125,59 @@
 .SBModalContents .SBSelectedPath{
 	float: left;
+	padding: 10px;
 	text-align: center;
 	word-wrap: break-word;
 }
 
-.SBSelectedPath h2{
-	color: #ffaaaa;
+.SBRootNode{
+	margin: 0.5em;
+	margin-top: 1.5em;
+	-webkit-border-radius: 10;
+	-moz-border-radius: 10;
+	border-radius: 10px;
+	border: none;
+	background: hsl(40, 50%, 75%);
+	padding: 5px 15px 5px 15px;
+}
+
+.SBPathProperty{
+	margin: 0.2em;
+}
+
+.SBPathNode{
+	margin: 0.5em;
+	-webkit-border-radius: 10;
+	-moz-border-radius: 10;
+	border-radius: 10px;
+	border: none;
+	background: hsl(0, 0%, 85%);
+	padding: 5px 15px 5px 15px;
+}
+
+.SBLeafNode{
+	margin: 0.5em;
+	-webkit-border-radius: 10;
+	-moz-border-radius: 10;
+	border-radius: 10px;
+	border: none;
+	background: hsl(150, 50%, 75%);
+	padding: 5px 15px 5px 15px;
+}
+
+.SBGenButton{
+	margin: 1.5em;
+	-webkit-border-radius: 7;
+	-moz-border-radius: 7;
+	border-radius: 7px;
+	border: none;
+	color: #ffffff;
+	font-size: 1.2em;
+	background: hsl(200, 50%, 75%);
+	padding: 5px 15px 5px 15px;
+	cursor: pointer;
+}
+
+.SBGenButton:hover{
+	background: hsl(200, 50%, 85%);
 }
 
@@ -108,2 +186,20 @@
 	text-align: center;
 }
+
+.SBModalButton{
+	display: inline-block;
+	width: 80%;
+	height: 26px;
+	-webkit-border-radius: 3;
+	-moz-border-radius: 3;
+	border-radius: 3px;
+	border: none;
+	color: #ffffff;
+	background: hsl(0, 50%, 75%);
+	padding: 3px 5px 3px 5px;
+	cursor: pointer;
+}
+
+.SBModalButton:hover{
+	background: hsl(0, 50%, 85%);
+}