--- a/public/viewer/viewer_white.html	Sat Mar 16 03:56:56 2013 +0900
+++ b/public/viewer/viewer_white.html	Sat Mar 16 12:31:23 2013 +0900
@@ -29,9 +29,44 @@
 	color:silver;
 	font-size:40px;
 }
+div.graphNode {
+    z-index:20;
+    position:abusolute; width:92px; height40px; font-size:12px; padding:4px; background:black;
+    border:2px solid silver;
+    overflow:hidden;
+    border-radius:5px;
+    cursor:pointer;
+}
+
 </style>
 
 
+
+<div class='header'>
+    <nobr id='header_title' style='margin-left:40px;'><a href='index.html'>Home</a></nobr>
+</div>
+
+<div id="miniDisplay" style='position:fixed; left:20; top:70; width:300px; height:300px; border:solid 1px; border-radius:5px; opacity:0.5; z-index:10; '>
+  <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;' onclick="$('#miniDisplay').css('visibility','hidden');" onmouseover="$('#closeMiniDisplay').css('color','blue');" onmouseout="$('#closeMiniDisplay').css('color','black')" >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="miniDisplayTitle" style='position:absolute; left:10px; top:5px; font-size:24px; width:100%; text-align:left;'>
+      </div>
+      <div id="miniDisplayBody" style='position:absolute; left:20px; top:40px;'>
+	  body
+      </div>
+  </form>
+  </div>
+  </div>
+</div>
+
+<div style="position:relative;left:0;top:0;" id='graphMain'>
+    <div style="position:absolute;width:0;height:0;left:100;" id='graphRoot'>
+    </div>
+</div>
+
+
 <script type="text/javascript">
 var LOAD_INTERVAL = 5;
 var BASE_URL = "";
@@ -66,14 +101,9 @@
 $(function() {
     userName = localStorage.userName;
     if(userName) start();
-//    else $("#miniDisplay").css("display", "hidden");
     else $("#miniDisplay").css("visibility", "visible");
 })
 
-function start() {
-
-}
-
 function beginScript() {
     DragHandler.attach($('#miniDisplay')[0]);
 }
@@ -82,9 +112,6 @@
     _oElem : null,
     attach : function(oElem) {
 	oElem.onmousedown = DragHandler._dragBegin;
-	oElem.dragBegin = new Function();
-	oElem.drag = new Function();
-	oElem.dragEnd = new Function();
 	return oElem;
     },
     _dragBegin : function(e) {
@@ -96,7 +123,6 @@
 	e = e ? e : window.event;
 	oElem.mouseX = e.clientX;
 	oElem.mouseY = e.clientY;
-	oElem.dragBegin(oElem, x, y);
 	document.onmousemove = DragHandler._drag;
 	document.onmouseup = DragHandler._dragEnd;
 	return false;
@@ -110,14 +136,12 @@
 	oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';
 	oElem.mouseX = e.clientX;
 	oElem.mouseY = e.clientY;
-	oElem.drag(oElem, x, y);
 	return false;
     },
     _dragEnd : function() {
 	var oElem = DragHandler._oElem;
 	var x = parseInt(oElem.style.left);
 	var y = parseInt(oElem.style.top);
-	oElem.dragEnd(oElem, x, y);
 	document.onmousemove = null;
 	document.onmouseup = null;
 	DragHandler._oElem = null;
@@ -125,6 +149,13 @@
 
 };
 
+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') {
@@ -143,25 +174,80 @@
     beginScript();
 });
 
+ 
+function writeJSONDataToMiniDisplay(jsonObj) {
+    var str = "";
+    for (var key in jsonObj) {
+	str = str + key + ": "+ jsonObj[key] + "<br>";
+    }
+    writeMiniDisplay(jsonObj.title, str);
+}
+
+
+function init() {
+    jsPlumb.importDefaults({
+	Connector : ["Straight", { curviness:50} ],
+	PaintStyle : { strokeStyle:"gray", lineWidth:2 },
+	EndpointStyle : {},
+	Anchors: ["BottomCenter","TopCenter"]
+    });
+}
+
+function showMiniDisplay(jsonInfo) {
+    $("#miniDisplay").css("visibility", "visible");
+    writeJSONDataToMiniDisplay(jsonInfo)
+}
+
+function start() {
+    init();
+    var rootNode = 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'
+    });
+    $("#graphRoot").css({
+	left:'500px',
+	top:'500px'
+    });
+    $("#graphMain").css({
+	width:'1000px',
+	height:'1000px'
+    });
+
+    var fc = $("#graphRoot")[0].firstChild;
+    if(fc) $("#graphRoot")[0].insertBefore(rootNode.view[0],fc);
+    else $("#graphRoot")[0].append(rootNode.view);
+
+    jsPlumb.repaintEverything();
+    
+
+}
+
+/* sample data */
+sampleJSON1  = {
+    id:"5",
+    title:"dimolto",
+    kind:"agreed",
+    createdUser:"oshiro",
+    createdDate: new Date()
+};
+
+
+
+start();
+
 </script>
 
-<div class='header'>
-    <nobr id='header_title' style='margin-left:40px;'><a href='index.html'>Home</a></nobr>
-</div>
-
-<div id="miniDisplay" style='position:fixed; left:20; top:70; width:300px; height:300px; border:solid 1px; border-radius:5px; opacity:0.5; z-index:10; '>
-  <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:0; z-index:10;' onclick="$('#miniDisplay').css('visibility','hidden');" onmouseover="$('#closeMiniDisplay').css('color','blue');" onmouseout="$('#closeMiniDisplay').css('color','black')" >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="miniDisplayTitle" style='position:absolute; left:10px; top:5px; font-size:24px; width:100%; text-align:left;'>
-	  dimolto
-      </div>
-      <div id="miniDisplayBody" style='position:absolute; left:20px; top:40px;'>
-	  body
-      </div>
-  </form>
-  </div>
-  </div>
-</div>
-