--- a/public/viewer/viewer_white.html	Sun Mar 17 16:55:49 2013 +0900
+++ b/public/viewer/viewer_white.html	Sun Mar 17 19:53:59 2013 +0900
@@ -211,6 +211,16 @@
 	EndpointStyle : {},
 	Anchors: ["BottomCenter","TopCenter"],
     });
+    $("#graphRoot").css({
+	left: ViewParam.offsetLeft + ViewParam.nodeWidth/2 - ViewParam.intervalX,
+	top: ViewParam.offsetTop + ViewParam.nodeHeight/2
+    });
+    $("#graphMain").css({
+	width: ViewParam.intervalX * 1 + ViewParam.nodeWidth+ViewParam.offsetLeft + ViewParam.offsetRight,
+	height: ViewParam.intervalY * 1 + ViewParam.nodeHeight + ViewParam.offsetTop + ViewParam.offsetBottom,
+	top:50
+    });
+
 }
 
 function showMiniDisplay(jsonInfo) {
@@ -284,16 +294,6 @@
     rootNode.property = sampleJSON1;
     showMiniDisplay(rootNode);
     updateNode(rootNode);
-    $("#graphRoot").css({
-	left: ViewParam.offsetLeft + ViewParam.nodeWidth/2 - ViewParam.intervalX,
-	top: ViewParam.offsetTop + ViewParam.nodeHeight/2
-    });
-    $("#graphMain").css({
-	width: ViewParam.intervalX * 1 + ViewParam.nodeWidth+ViewParam.offsetLeft + ViewParam.offsetRight,
-	height: ViewParam.intervalY * 1 + ViewParam.nodeHeight + ViewParam.offsetTop + ViewParam.offsetBottom,
-	top:50
-    });
-
     /* test code */
     var n1 = {property:{title:"task2"}};
     var n2 = {property:{title:"task3"}};
@@ -322,15 +322,11 @@
     anchor:"Continuous",
     overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]]
 };
+
 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]}, stateMachineConnector);
-	c.setLabel({label:"<span style='color:black;'>"+rel+"</span>",cssStyle:"color:black"});
+	connectGraph(array[i]);
     }
     jsPlumb.removeAllEndpoints();
     jsPlumb.draggable($('.graphNode'));
@@ -339,6 +335,59 @@
     */
 }
 
+function connectGraph(graphObj) {
+    var fromNode = graphObj.from;
+    var toNode = graphObj.to;
+    var rel = graphObj.rel;
+    var c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, stateMachineConnector);
+    c.setLabel({label:"<span style='color:black;'>"+rel+"</span>",cssStyle:"color:black"});
+    return c;
+}
+
+function GraphData() {
+/*
+    function graph() {
+	var g = {};
+	g.property = {};
+	g.in = {};
+	g.out = {};
+	g.both = {};
+	return g;
+    }
+    function edge() {
+	var e = {};
+	e.property = {};
+	return e;
+    }
+*/
+    var graphData = {};
+    graphData.graphs = {};
+    graphData.edges = {};
+    return graphData;
+}
+
+
+function parseJSONGraphData(memory ,jsonObj) {
+    var graphs = jsonObj.graphs;
+    for (var i=0; i<graphs.length; i++) {
+	var graph = graphs[i];
+	memory.graphs[graph.id].property = graph;
+    }
+    var edges = jsonObj.edges;
+    for (var i=0; i<edges.length; i++) {
+	var edge = edges[i];
+	var edgeId = edge.id;
+	memory.edges[edgeId].property = edge;
+	if (edge.kind == "both") {
+	    memory.graphs[edge.from].both.append(edgeId);
+	    memory.graphs[edge.to].both.append(edgeId);
+	} else {
+	    memory.graphs[edge.from].out.append(edgeId);
+	    memory.graphs[edge.to].in.append(edgeId);
+	}
+    }
+}
+
 /* sample data */
 sampleJSON1  = {
     id:"5",
@@ -348,5 +397,48 @@
     createdDate: new Date()
 };
 
+sampleJSONData = {
+    graphs: [
+        {
+            id:"1",
+            kind:"agree",
+	    createdUser:"osrhiro"
+	},
+        {
+            id:"2",
+            kind:"reject",
+	    createdUser:"kinjo"	    
+        },
+        {
+            id:"3",
+	    kind:"agree",
+	    createdUser:"tamayose"
+        }
+    ],
+    edges: [
+        {
+            id:"11",
+            from:"1",
+            to:"2",
+            rel:"dependency",
+            type:""
+        },
+        {
+            id:"12",
+            from:"2",
+            to:"3",
+            rel:"dependency",
+            type:""
+        },
+        {
+            id:"13",
+            from:"3",
+            to:"1",
+            rel:"dependency",
+            type:"both"
+        }
+    ]
+};
+
 </script>