--- a/public/viewer/viewer_white.html	Mon Mar 18 02:14:42 2013 +0900
+++ b/public/viewer/viewer_white.html	Mon Mar 18 05:28:06 2013 +0900
@@ -35,8 +35,43 @@
     color:silver;
     font-size:40px;
 }
-span.edgeLabel {
-    
+div.footer {
+    position:absolute;
+    left:0; 
+    bottom:0;
+    z-index:5;
+    height:50px;
+    width:100%;
+    background:#ddd;
+    background:-moz-linear-gradient(top,#fff,#ddd);
+    background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ddd));
+    color:black;
+    font-size:25px;
+}
+div.footer.up {
+    position:absolute;
+    left:0; 
+    bottom:50px;
+    z-index:5;
+    height:25px;
+    width:250px;
+    background:#ddd;
+    background:-moz-linear-gradient(top,#fff,#ddd);
+    background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ddd));
+    color:black;
+    opacity:0.7;
+    font-size:20px;
+}
+
+label.relation {
+    position:relative;
+    top:10px;
+    margin-left:15px;
+    vertical-align:middle;
+}
+
+input.relation_input {
+
 }
 
 div.graphNode {
@@ -67,6 +102,13 @@
 <div class='header'>
     <nobr id='header_title' style='margin-left:40px;'><a href='index.html'>Home</a></nobr>
 </div>
+<div class='footer' id='footer_div'>
+    <div class='footer up'>
+	トラバースする種類
+    </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>
@@ -220,7 +262,16 @@
 	height: ViewParam.intervalY * 1 + ViewParam.nodeHeight + ViewParam.offsetTop + ViewParam.offsetBottom,
 	top:50
     });
+    var footer = $('.footer')[0];
+    var str = "";
+    for (var relation in EDGE_LIST) {
+	str = str + createLabelStr(EDGE_LIST[relation]);
+    }
+    footer.innerHTML = footer.innerHTML + str;
+}
 
+function createLabelStr(value) {
+    return "<label class='relation'><input class='relation_input' type='checkbox' checked value='"+value+"'>"+value+"</label>";
 }
 
 function showMiniDisplay(jsonInfo) {
@@ -240,11 +291,19 @@
     return position;
 }
 
+/*
+ *
+ */
+function clickNodeDiv(id) {
+    
+}
+
 function createNodeDiv(node) {
     node.view = $("<div class='graphNode'/>");
+    node.view.click(function(){clickNodeDiv(node.property.id)});
     if(!node.position) node.position = calcNewNodePosition();
     node.view.hover();
-    var div = $("<div class='graphNodeContent'/>")[0];
+    var div = $("<div class='graphNodeContent' />")[0];
     div.innerHTML = node.property.title;
     node.view[0].appendChild(div);
     return node;
@@ -365,6 +424,7 @@
     if (edge.visible) return;
     var fromNode = graphData.nodes[edge.property.from];
     var toNode = graphData.nodes[edge.property.to];
+    if (!fromNode.view && !toNode.view) return;
     var rel = edge.property.rel;
     var type = edge.property.type;
     connectEdge(fromNode, toNode, rel, type);
@@ -382,7 +442,6 @@
 	updateNode(toNode);
     }
     showEdge(graphData, edge);
-
 }
 
 function getRelationEdgeIds(node) {
@@ -418,9 +477,11 @@
     return nodeIds;
 }
 
+/*
+ * This function output all NODE thath are related [node]
+*/
 function updateRelationNodes(graphData, node) {
     var id = node.property.id;
-    var nodes = graphData.nodes;
     var edges = graphData.edges;
     var edgeIds = getRelationEdgeIds(node);
     for (var i=0; i<edgeIds.length; i++ ) {
@@ -430,6 +491,24 @@
     jsPlumb.draggable($('.graphNode'));
 }
 
+/* 
+ * rels = {dependency:1, evidence:1}; 
+ * showRelationNodes(graphData, node, rels);
+*/
+function showRelationNodes(graphData, node, rels) {
+    var id = node.property.id;
+    var edges = graphData.edges;
+    var edgeIds = getRelationEdgeIds(node);
+    for (var i=0; i<edgeIds.length; i++) {
+	var edge = edges[edgeIds[i]];
+	if (rels[edge.property.rel]) {
+	    createNodeFromEdge(graphData, edges[edgeIds[i]]);	    
+	}
+    }
+    jsPlumb.removeAllEndpoints();
+    jsPlumb.draggable($('.graphNode'));
+}
+
 var BASE_THETA = -60;
 var BASE_ANGLE = 180;
 var BASE_DISTANCE = 150;
@@ -481,23 +560,27 @@
     }
 }
 
+var EDGE_LIST = {
+    evidence:'evidence',
+    dependency:'dependency',
+    version:'version',
+    derived:'derived',
+    agreement:'agreement'
+};
+
 function testStart() {
     init();
     var graphData = new GraphData();
     parseJSONGraphData(graphData, sampleJSONData);
     var rootNodeId = "1";
     var rootNode = graphData.nodes[rootNodeId];
-    recursiveShowRelationNodes(graphData, rootNode);
-    showAllEdge(graphData);
-    
-/*
     updateNode(rootNode);
-    updateRelationNodes(graphData,rootNode);
-    updateRelationNodes(graphData,graphData.nodes["2"]);
-*/
+    showRelationNodes(graphData, rootNode, {dependency:1});
+//    recursiveShowRelationNodes(graphData, rootNode);
+//    showAllEdge(graphData);
+
 }
 
-
 function logProperty(d) {
     for(var key in d) {
 	console.log("key: "+key+ "\nvalue: "+d[key]);
@@ -508,7 +591,7 @@
     nodes: [
         {
             id:"1",
-	    title:"task1",
+	    title:"context1",
             kind:"agree",
 	    createdUser:"osrhiro"
 	},
@@ -520,8 +603,7 @@
         },
         {
             id:"3",
-	    title:"task3",
-	    kind:"agree",
+	    title:"context2",
 	    createdUser:"tamayose"
         },
 	{
@@ -550,7 +632,7 @@
             id:"13",
             from:"3",
             to:"1",
-            rel:"dependency",
+            rel:"evidence",
             type:"both"
         },
 	{