--- a/public/viewer/viewer_white.html	Sat Mar 16 12:31:23 2013 +0900
+++ b/public/viewer/viewer_white.html	Sat Mar 16 23:14:17 2013 +0900
@@ -31,13 +31,12 @@
 }
 div.graphNode {
     z-index:20;
-    position:abusolute; width:92px; height40px; font-size:12px; padding:4px; background:black;
+    position:absolute; width:92px; height40px; font-size:12px; padding:4px; background:white;
     border:2px solid silver;
     overflow:hidden;
     border-radius:5px;
     cursor:pointer;
-}
-
+    border-color:"blue";
 </style>
 
 
@@ -62,7 +61,8 @@
 </div>
 
 <div style="position:relative;left:0;top:0;" id='graphMain'>
-    <div style="position:absolute;width:0;height:0;left:100;" id='graphRoot'>
+	<div style="position:absolute; width:0; height:0;left:0;" id='graphRoot'>
+	<div style="position:absolute;">
     </div>
 </div>
 
@@ -100,7 +100,7 @@
 
 $(function() {
     userName = localStorage.userName;
-    if(userName) start();
+    if(userName) {start();}
     else $("#miniDisplay").css("visibility", "visible");
 })
 
@@ -149,13 +149,6 @@
 
 };
 
-function writeMiniDisplay(title,str) {
-    $('#miniDisplayBody')[0].innerHTML = str;
-    if(title) {
-	$('#miniDisplayTitle')[0].innerHTML = title;
-    }
-}
-
 function addLoadEvent(func) {
     var oldonload = window.onload;
     if (typeof window.onload != 'function') {
@@ -174,19 +167,25 @@
     beginScript();
 });
 
+function writeMiniDisplay(title,str) {
+    $('#miniDisplayBody')[0].innerHTML = str;
+    if(title) {
+	$('#miniDisplayTitle')[0].innerHTML = title;
+    }
+}
  
 function writeJSONDataToMiniDisplay(jsonObj) {
     var str = "";
-    for (var key in jsonObj) {
-	str = str + key + ": "+ jsonObj[key] + "<br>";
+    for (var key in jsonObj.property) {
+	str = str + key + ": "+ jsonObj.property[key] + "<br>";
     }
-    writeMiniDisplay(jsonObj.title, str);
+    writeMiniDisplay(jsonObj.property.title, str);
 }
 
 
 function init() {
     jsPlumb.importDefaults({
-	Connector : ["Straight", { curviness:50} ],
+	Connector : [ "Straight", { curviness:50 } ],
 	PaintStyle : { strokeStyle:"gray", lineWidth:2 },
 	EndpointStyle : {},
 	Anchors: ["BottomCenter","TopCenter"]
@@ -198,42 +197,87 @@
     writeJSONDataToMiniDisplay(jsonInfo)
 }
 
+var nodeNum = 0;
+function updateNodeElement(node) {
+    var created = false;
+    if(!node.view) {
+	created = true;
+	node.view = $("<div class='graphNode'/>");
+	node.position = {x:nodeNum*50, y: nodeNum*50 };
+	node.view.hover(); /* TODO */
+	nodeNum++; /* TODO */
+    }
+    var div = node.view;
+    div.text(node.property.title);
+    div.click(function(){showMiniDisplay(node)});
+    DragHandler.attach($(node.view)[0]);
+    var kindBackground = {agree:"#aaf", rejected:"#fff"};
+    var kindBorder = {agree:"#66a", rejected:"#a66"};
+    div.css("background", kindBackground[node.kind]||"white");
+    div.css("border-color", kindBorder[node.kind] ||"blue");
+    div.css({
+	left: node.position.x,
+	top: node.position.y 
+    });
+    return created;    
+}
+
+
+function updateNode(node) {
+    if(updateNodeElement(node)) {
+	var fc = $('#graphRoot')[0].firstChild;
+	if(fc) {
+	    $('#graphRoot')[0].insertBefore(node.view[0], fc);
+	} else {
+	    $('#graphRoot').append(node.view);
+	}
+    }
+    nodeNum++;
+
+/*
+    node.view.css({
+	left: node.position.x * ViewParam.intervalX - ViewParam.nodeWidth/2,
+	top: node.position.y * ViewParam.intervalY - ViewParam.nodeHeight/2
+    });
+*/    
+}
+
+var ViewParam = {
+    offsetTop:100,
+    offsetBottom:100,
+    offsetLeft:100,
+    offsetRight:100,
+    nodeWidth:120,
+    odeHeight:60,
+    intervalX:140,
+    intervalY:120
+};
+
 function start() {
     init();
-    var rootNode = sampleJSON1;
+    var rootNode = new Object();
+    rootNode.property = sampleJSON1;
     showMiniDisplay(rootNode);
-    var created = false;
-    if(!rootNode.view) {
-	created = true;
-	rootNode.view = $("<div class='graphNode'/>");
-	rootNode.view.click(showMiniDisplay(rootNode));
-	rootNode.view.hover();
-    }
-    var div = rootNode.view;
-    div.text(rootNode.title);
-    div.css("background","black");
-    div.css("border-color","blue");
-
-    rootNode.view.css({
-	left:'500px',
-	right:'500px'
-    });
+    updateNode(rootNode);
     $("#graphRoot").css({
-	left:'500px',
-	top:'500px'
+	left: ViewParam.offsetLeft + ViewParam.nodeWidth/2 - ViewParam.intervalX,
+	top: ViewParam.offsetTop + ViewParam.nodeHeight/2
     });
     $("#graphMain").css({
-	width:'1000px',
-	height:'1000px'
+	width: ViewParam.intervalX * 1 + ViewParam.nodeWidth+ViewParam.offsetLeft + ViewParam.offsetRight,
+	height: ViewParam.intervalY * 1 + ViewParam.nodeHeight + ViewParam.offsetTop + ViewParam.offsetBottom,
+	top:50
     });
 
-    var fc = $("#graphRoot")[0].firstChild;
-    if(fc) $("#graphRoot")[0].insertBefore(rootNode.view[0],fc);
-    else $("#graphRoot")[0].append(rootNode.view);
-
+    /* test code */
+    var n1 = {property:{title:"tokage"}};
+    var n2 = {property:{title:"ttt"}};
+    updateNode(n1);
+    updateNode(n2);
+    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();
 }
 
 /* sample data */
@@ -245,9 +289,5 @@
     createdDate: new Date()
 };
 
-
-
-start();
-
 </script>