--- a/show.html	Fri Mar 22 03:58:03 2013 +0900
+++ b/show.html	Fri Mar 22 04:37:57 2013 +0900
@@ -79,17 +79,16 @@
 
 <div id='edgeInfoDisplay' class='edgeInfoTable' style='left:0; top:0; z-index:20;'>
     <div id="closeEdgeInfoDisplay" style='position:absolute; right:5px; top:-15px; z-index:10; color:white;' onclick="$('#edgeInfoDisplay').css('visibility','hidden');" onmouseover="$('#closeEdgeInfoDisplay').css('color','yellow');" onmouseout="$('#closeEdgeInfoDisplay').css('color','white')" >CLOSE</div>  <div id='edgeInfoTitle' style='position:absolute; margin-top:2px; padding-left:5px; font-size:20px; width:100%; text-align:left;'>Traverse</div>
-  <div id='edgeInfoBody' style='position:absolute; padding-top:20px; '>
-      <div class='edgeInfoDiv' style='top:0px; left:0px;'>aaa---aaa----aaa---aaa---aaa-</div>
-      <div class='edgeInfoDiv' style='top:0px; left:0px;'>aaa---aaa----aaa---aaa---aaa-</div>
-      <div class='edgeInfoDiv' style='top:0px; left:0px;'>aaa---aaa----aaa---aaa---aaa-</div>
-  </div>
+    <div id='edgeInfoSample' style='position:absolute; padding-left:10px; font-size:15px; padding-top:25px;'>kind : num : direction</div>
+    <div id='edgeInfoBody' style='position:absolute; padding-top:40px; '>
+	<div class='edgeInfoDiv' style='visibility:hidden'></div>
+    </div>
 </div>
 
 
 <script type="text/javascript">
 var CURRENT_DATA = {};
-
+ 
 if(!Array.prototype.filter){
     Array.prototype.filter=function(func){
 	var arr=[];
@@ -231,6 +230,12 @@
     $('#traverseDisplayBody')[0].innerHTML = viewHTML;
 }
 
+
+/* Twice the top is the same length as the top + buttom */
+var EDGEINFO_MARGIN = parseInt($('.edgeInfoDiv').css('margin-top').split('px')[0])*2 + 
+	parseInt($('#edgeInfoSample').css('padding-top').split('px')[0])*2 +
+	parseInt($('#edgeInfoSample').css('font-size').split('px')[0]);
+var BASE_EDGEINFO_HEIGHT = parseInt($('#edgeInfoDisplay').height());
 function calcEdgeInfoTableHeight() {
     var edgeInfoDivs = $('.edgeInfoDiv');
     if (edgeInfoDivs.length <= 0) return 0;
@@ -238,24 +243,24 @@
     for (var i=0; i<edgeInfoDivs.length; i++) {
 	childrenHeight = childrenHeight + edgeInfoDivs[i].offsetHeight;
     }
-    var margin = parseInt(edgeInfoDivs.css('margin-top').split('px')[0]);
-    return (childrenHeight + 2*margin);
+    return (childrenHeight + EDGEINFO_MARGIN);
 }
 
-function updateEdgeInfoTableHeight() {
-    var table =  $('.edgeInfoTable');
+function updateEdgeInfoBodyHeight() {
+    var table =  $('#edgeInfoDisplay');
     var height = calcEdgeInfoTableHeight();
     var borderSize = parseInt(table.css('border-left-width').split('px')[0]);
-    table.css('height', (height+borderSize*2) + 'px');
+    if (height+borderSize < BASE_EDGEINFO_HEIGHT) height = BASE_EDGEINFO_HEIGHT;
+    table.css('height', height + 'px');
 }
 
-function edgeInfoTableClear() {
-    $('.edgeInfoTable').children().remove();
+function edgeInfoBodyClear() {
+    $('#edgeInfoBody').children().remove();
 }
 
 function addEdgeInfoDiv(edgeInfoDiv) {
-    var table =  $('.edgeInfoTable')[0];    
-    table.insertBefore(edgeInfoDiv);
+    var body =  $('#edgeInfoBody')[0];    
+    body.insertBefore(edgeInfoDiv);
 }
 
 function createEdgeInfoDiv(edgeInfo) {
@@ -268,15 +273,20 @@
 }
 
 function updateEdgeInfoDisplay() {
-    edgeInfoTableClear();
     var nodeId = this.id;
-    var edgeInfoArray = GRAPH_DATA.nodes[nodeId].property.edgeInfo;
+    var node = GRAPH_DATA.nodes[nodeId];
+    showEdgeInfoDisplay(node);
+}
+
+function showEdgeInfoDisplay(node) {
+    edgeInfoBodyClear();
+    var edgeInfoArray = node.property.edgeInfo;
     for (var i=0; i<edgeInfoArray.length; i++) {
 	var edgeInfo = edgeInfoArray[i];
 	if (!edgeInfo.view) edgeInfo.view = createEdgeInfoDiv(edgeInfo);
 	addEdgeInfoDiv(edgeInfo.view[0]);
     }
-    updateEdgeInfoTableHeight();
+    updateEdgeInfoBodyHeight();
 }
 
 function init() {
@@ -468,7 +478,7 @@
 	function(){div.css("box-shadow","");}
     );
     node.view[0].nodeId = node.property.id;
-    div.click(function(){showMiniDisplay(node); showTraverseDisplay(node);});
+    div.click(function(){showMiniDisplay(node); showTraverseDisplay(node); showEdgeInfoDisplay(node);});
     DragHandler.attach($(node.view)[0]);
     var kindBorder = {agree:"#66a", rejected:"#a66"};
     div.css("background", StateColor[node.property.state]||"white");