--- a/public/viewer/viewer_white.html	Sat Mar 16 23:14:17 2013 +0900
+++ b/public/viewer/viewer_white.html	Sun Mar 17 00:40:38 2013 +0900
@@ -30,17 +30,18 @@
 	font-size:40px;
 }
 div.graphNode {
+    position:absolute; 
+    font-size:12px; padding:4px; background:white;
     z-index:20;
-    position:absolute; width:92px; height40px; font-size:12px; padding:4px; background:white;
+    width: 50px; 
+    height 50px; 
+    border-radius:50px;
     border:2px solid silver;
     overflow:hidden;
-    border-radius:5px;
     cursor:pointer;
     border-color:"blue";
 </style>
 
-
-
 <div class='header'>
     <nobr id='header_title' style='margin-left:40px;'><a href='index.html'>Home</a></nobr>
 </div>
@@ -62,7 +63,6 @@
 
 <div style="position:relative;left:0;top:0;" id='graphMain'>
 	<div style="position:absolute; width:0; height:0;left:0;" id='graphRoot'>
-	<div style="position:absolute;">
     </div>
 </div>
 
@@ -248,7 +248,7 @@
     offsetLeft:100,
     offsetRight:100,
     nodeWidth:120,
-    odeHeight:60,
+    nodeHeight:60,
     intervalX:140,
     intervalY:120
 };
@@ -274,10 +274,40 @@
     var n2 = {property:{title:"ttt"}};
     updateNode(n1);
     updateNode(n2);
+    
+    var e1 = new Edge(rootNode, n1, "dependency");
+    var e2 = new Edge(n1, n2, "dependency");
+    edgeArray.push(e1);
+    edgeArray.push(e2);
+    paintEdge();
+/*
     var c = jsPlumb.connect({source:n1.view[0], target:n2.view[0]});
     c.setLabel({label:"<span style='color:white;'>"+"</span>",cssStyle:"color:white"});
     jsPlumb.repaintEverything();
     jsPlumb.removeAllEndpoints();
+*/
+}
+
+var edgeArray = new Array();
+function Edge(fromNode, toNode, relation) {
+    var obj = {from:fromNode, to:toNode, rel:relation };
+    return obj;
+}
+
+function paintEdge() {
+    var array = edgeArray;
+    for (var i=0; i<array.length; i++) {
+	var fromNode = array[i].from;
+	var toNode = array[i].to;
+	var rel = array[i].rel;
+	var c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]});
+	c.setLabel({label:"<span style='color:white;'>"+"</span>",cssStyle:"color:white"});
+    }
+    jsPlumb.removeAllEndpoints();
+    jsPlumb.draggable($('.graphNode'));
+/*
+    jsPlumb.repaintEverything();
+*/
 }
 
 /* sample data */