# HG changeset patch
# User Nobuyasu Oshiro  <dimolto@cr.ie.u-ryukyu.ac.jp>
# Date 1363709617 -32400
# Node ID a3fdabc0613eb5837fcd364ea140995b0718ba16
# Parent  36959449f3b2013a542ac31897f4f12b552f5e20
create traverseDisplay

diff -r 36959449f3b2 -r a3fdabc0613e index.html
--- a/index.html	Tue Mar 19 23:50:07 2013 +0900
+++ b/index.html	Wed Mar 20 01:13:37 2013 +0900
@@ -15,10 +15,22 @@
 <script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-RC1.js"></script>
 <script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-all-min.js"></script>
 
-
+<div id="traverseDisplay" style='position:fixed; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:0.5; z-index:10; visibility:hidden;'>
+    <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'></div>
+    <div id="closeTraverseDisplay" style='position:absolute; right:5; top:-3; z-index:10; color:white;' onclick="$('#traverseDisplay').css('visibility','hidden');" onmouseover="$('#closeTraverseDisplay').css('color','yellow');" onmouseout="$('#closeTraverseDisplay').css('color','white')" >CLOSE</div>
+    <div style='position:absolute; width:90%; height:90%;'>
+	<div style='position:absolute; left:5%; top:5%; width:100%; height:100%; background:white;'>
+	    <div id="traverseDisplayTitle" style='position:absolute; left:10px; top:5px; font-size:24px; width:100%; text-align:left;'>
+    Traverse
+	    </div>
+	    <div id="taverseDisplayBody" style='position:absolute; left:20px; top:40px;'>
+	    </div>
+	</div>
+    </div>
+</div>
 
-<div id="miniDisplay" style='position:fixed; left:0; top:70; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:0.5; z-index:10; visibility:hidden;'>
-    <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'>  </div>
+<div id="miniDisplay" style='position:fixed; left:0; bottom:0; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:0.5; z-index:10; visibility:hidden;'>
+    <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'></div>
     <div id="closeMiniDisplay" style='position:absolute; right:5; top:-3; z-index:10; color:white;' onclick="$('#miniDisplay').css('visibility','hidden');" onmouseover="$('#closeMiniDisplay').css('color','yellow');" onmouseout="$('#closeMiniDisplay').css('color','white')" >CLOSE</div>
     <div style='position:absolute; width:90%; height:90%;'>
 	<div style='position:absolute; left:5%; top:5%; width:100%; height:100%; background:white;'>
@@ -30,13 +42,12 @@
     </div>
 </div>
 
-
-
 <div class="graphMainCss" style="position:absolute; left:0; bottom:0; width:100%; height:75%;" id='graphMain'>
     <div  style="position:absolute; width:0; height:0;left:0;" id='graphRoot'>
     </div>
 </div>
 
+
 <script type="text/javascript">
 if(!Array.prototype.filter){
     Array.prototype.filter=function(func){
@@ -64,6 +75,7 @@
 
 function beginScript() {
     DragHandler.attach($('#miniDisplay')[0]);
+    DragHandler.attach($('#traverseDisplay')[0]);
 }
 
 var DragHandler = {
@@ -139,7 +151,10 @@
     }
     writeMiniDisplay(jsonObj.property.title, str);
 }
-
+function writeEdgeInfotraverseDisplay(edgeInfo) {
+    var str = "";
+    
+}
 
 function init() {
     jsPlumb.importDefaults({
@@ -151,7 +166,7 @@
     var rootDiv = $('#graphMain');
     var rootLeft = rootDiv.offset().left;
     var rootTop = rootDiv.offset().top;
-    $('#miniDisplay').css( {
+    $('#traverseDisplay').css( {
 	left: rootLeft,
 	top: rootTop
     });
@@ -163,7 +178,9 @@
 
 function showMiniDisplay(jsonInfo) {
     $("#miniDisplay").css("visibility", "visible");
+    $("#traverseDisplay").css("visibility", "visible");
     writeJSONDataToMiniDisplay(jsonInfo)
+    writeEdgeInfotraverseDisplay(jsonInfo.EdgeInfo)
 }
 
 var nodeNum = 0;
@@ -519,6 +536,32 @@
     }
 }
 
+
+edgeInfo1 = [
+	{
+	    kind:"collected",
+	    direction:"in",
+	    num:"2"
+	},
+	{
+	    kind:"reject",
+	    direction:"out",
+	    num:"1"
+	 }
+];
+
+sampleData = {
+    nodes: [
+	{
+	    id:"1",
+	    title:"context1",
+	    kind:"agree",
+	    createdUser:"oshiro",
+	    edgeInfo:edgeInfo1
+	}
+    ]
+};
+
 sampleJSONData = {
     nodes: [
 	{