Mercurial > hg > Members > nobuyasu > Consensus

changeset 128:c03c7198ec67 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add viewrLib.js
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Wed, 24 Apr 2013 03:01:05 +0900
parents 3d7e0aa973df
children 21e746cdc99e
files public/viewer/revisionviewer.html public/viewer/viewer.html public/viewer/viewerLib.js
diffstat 3 files changed, 252 insertions(+), 472 deletions(-) [+]
line wrap: on
line diff
--- a/public/viewer/revisionviewer.html	Wed Apr 24 02:48:20 2013 +0900
+++ b/public/viewer/revisionviewer.html	Wed Apr 24 03:01:05 2013 +0900
@@ -16,6 +16,7 @@
     <script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-vml-1.3.15-RC1.js"></script>
     <script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-RC1.js"></script>
     <script type="text/javascript" src='treeArrangement.js'></script>
+    <script type="text/javascript" src='viewerLib.js'></script>
     <script type="text/javascript">
     var LOAD_INTERVAL=5;
 var BASE_URL="";
@@ -32,20 +33,6 @@
 var userList=[];
 var root_id;
 function loadConsensus(id){
-    function onload(json){
-	document.title="R-Consensus:"+json.toulmin.title;
-	$("#headertitle_main").text(json.toulmin.title)
-	if(treeInfo){
-	    updateToNew(json);
-	}else{
-	    console.log(JSON.parse(JSON.stringify(json)));
-	    treeInfo=createJSONTreeInfo(json)
-	    //userList=getUserListFromJSONTree(treeInfo.root);
-	    showUserList([]);
-	    updateNode(treeInfo.root);
-	    updateTree();
-	}
-    }
     $.ajax({
 	url:BASE_URL+"/consensus/browse/"+id,
 	success:function(o){onload(o)},
@@ -53,14 +40,6 @@
 	error:function(o){console.log("ERROR",o)}
     });
 }
-function loadUserList(){
-    $.ajax({
-	url:BASE_URL+"/users/all",
-	success:function(o){userList=o.sort();showUserList([]);},
-	type:"GET",cache:false,
-	error:function(o){console.log("ERROR",o)}
-    });
-}
 
 function loadRevisionInfo(consensus_id) {
     $.ajax({
@@ -119,219 +98,11 @@
     start();
 }
 function start(){
-    popupInit();
-    jsPlumb.importDefaults({
-	Connector : [ "Straight", { curviness:50 } ],
-	PaintStyle : { strokeStyle:"gray", lineWidth:2 },
-	EndpointStyle : {},
-	Anchors: ["BottomCenter","TopCenter"]
-    });
+    init();
     var consensus_id=(location.search.match("[0-9]+")||[])[0];
-    if(consensus_id){
-	root_id=consensus_id;
-	loadUserList();
-	loadRevisionInfo(consensus_id);
-	loadConsensus(consensus_id);
-    }else{
-	document.body.innerHTML="<div style='color:white;font-size:64px'>No ClaimID Specified.<br><a href='index.html' style='color:#88f'>back</a></div>";
-    }
-}
-
-function updateToNew(json){
-    var t2=createJSONTreeInfo(json)
-    updateJSONTreeDiff(treeInfo.root,t2.root);
-    
-    updateNode(treeInfo.root);
-    treeInfo.newLayout=t2.layout;
-    var cnt=0,time=500;
-    var time0=new Date();
-    var prevCnt=0;
-    function tfunc(t){return 2*t-t*t}
-    function animation(){
-	var cnt=(new Date()-time0)/time;
-	if(cnt<1){
-	    if(prevCnt!=cnt){
-		var pt=tfunc(prevCnt);
-		var t=tfunc(cnt);
-		animateTree((t-1)/(pt-t));
-		prevCnt=cnt;
-		
-	    }
-	    setTimeout(animation,10);
-	}else{
-	    animateTree(0);
-	}
-	updateNode(treeInfo.root);
-	updateTree();
-    }
-    animation();
-}
-
-var ViewParam={
-    offsetTop:100,
-    offsetBottom:100,
-    offsetLeft:100,
-    offsetRight:100,
-    nodeWidth:120,
-    nodeHeight:60,
-    intervalX:140,
-    intervalY:120
-};
-
-function animateTree(t){
-    function animateNodePosition(node,t){
-	node.position.x=(node.position.x*t+node.newPosition.x)/(1+t);
-	node.position.y=(node.position.y*t+node.newPosition.y)/(1+t);
-	for(var i=0;i<node.mentions.length;i++){
-	    animateNodePosition(node.mentions[i],t);
-	}
-	if(t==0){
-	    if(node.newPosition.remove){
-		jsPlumb.removeAllEndpoints(node.view);
-		$(node.view).remove();
-	    }
-	    node.mentions=node.mentions.filter(function(n){return !n.newPosition.remove});
-	}
-    }
-    animateNodePosition(treeInfo.root,t);
-    treeInfo.layout.left=(treeInfo.layout.left*t+treeInfo.newLayout.left)/(1+t);
-    treeInfo.layout.right=(treeInfo.layout.right*t+treeInfo.newLayout.right)/(1+t);
-    treeInfo.layout.depth=(treeInfo.layout.depth*t+treeInfo.newLayout.depth)/(1+t);
-}
-
-function updateTree(){
-    with(treeInfo.layout){
-	$("#treeRoot").css({
-	    left:ViewParam.offsetLeft+ViewParam.nodeWidth/2-ViewParam.intervalX*left,
-	    top:ViewParam.offsetTop+ViewParam.nodeHeight/2});
-	$("#treeMain").css({
-	    width:ViewParam.intervalX*(right-left)+ViewParam.nodeWidth+ViewParam.offsetLeft+ViewParam.offsetRight,
-	    height:ViewParam.intervalY*(depth-1)+ViewParam.nodeHeight+ViewParam.offsetTop+ViewParam.offsetBottom,
-	    top:50});
-    }
-    jsPlumb.repaintEverything();
+    loadRevisionInfo(consensus_id);
 }
 
-
-var relationJPMap={
-    suggestion:"提案",
-    refutation:"反論",
-    question:"質問"
-};
-function updateNode(node){
-    if(updateClaimElement(node)){
-	var fc=$("#treeRoot")[0].firstChild;
-	if(fc)$("#treeRoot")[0].insertBefore(node.view[0],fc);
-	else $("#treeRoot").append(node.view);
-    }
-    node.view.css({
-	left:node.position.x*ViewParam.intervalX-ViewParam.nodeWidth/2,
-	top:node.position.y*ViewParam.intervalY-ViewParam.nodeHeight/2
-    });	
-    var childs=node.mentions;
-    for(var i=0;i<childs.length;i++){
-	var child=childs[i];
-	var created=!child.view;
-	updateNode(child);
-	if(created){
-	    var c=jsPlumb.connect({source:node.view[0],target:child.view[0]});
-	    c.setLabel({label:"<span style='color:white'>"+(relationJPMap[child.relation]||child.relation)+"</span>",cssStyle:"color:white"});
-	}
-    }
-}
-
-var focusedUser=null;
-function setFocusedShadowEverything(){
-    function recFocusShadow(node){
-	setFocusedShadow(node);
-	for(var i=0;i<node.mentions.length;i++){
-	    recFocusShadow(node.mentions[i]);
-	}
-    }
-    recFocusShadow(treeInfo.root);
-}
-function setFocusedShadow(node){
-    var name=focusedUser||userName;
-    var color;
-    if(node.info.author==name)color="#afa";
-    else{
-	var users=node.info.users,status;
-	for(var i=0;i<users.length;i++){
-	    var u=users[i];
-	    if(u.id==name){status=u.status;break;}
-	}
-	color=({agreed:"#aaf",denied:"#faa",pend:"white",unknown:"white"})[status];
-    }
-    node.view.css("box-shadow",color?color+" 0 0 30px":"none");
-}
-function appendStatusElement(viewDiv, status){
-    var statusView = $("<div class='nodeStatus'/>");
-    statusView.text(status);
-    statusView.css({
-	left:0,
-	top:-5
-    });
-    viewDiv[0].appendChild(statusView[0]);
-}
-function updateClaimElement(node){
-    var created=false;
-    if(!node.view){
-	created=true
-	node.view=$("<div class='claimNode'/>");
-	node.view.click(function(){showClaim(node);});
-	node.view.hover(
-	    function(){div.css("box-shadow","white 0 0 50px");showUserList(node.info.users,node.info.author)},
-	    function(){try{setFocusedShadow(node);}catch(e){/*console.log(e)*/;}showUserList([])}
-	)
-    }
-    setFocusedShadow(node);
-    var div=node.view;
-    div.text(node.info.toulmin.title);
-    appendStatusElement(node.view, node.info.status);
-    var statusBackground={passed:"#aaf",unknown:"#fff",failed:"#faa",fail:"#faa"};
-    var statusBorder={passed:"#66a",unknown:"#aaa",failed:"#a66",fail:"#a66"};
-    div.css("background",statusBackground[node.info.status]||"white");
-    div.css("border-color",statusBorder[node.info.status]||"white");
-    return created;
-}
-
-
-function showUserList(users,author){
-    var statusMap={};
-    var userListElement=$(".userList");
-    userListElement.text('')
-    if(author)statusMap['#'+author]='author';
-    for(var i=0;i<users.length;i++){
-	statusMap['#'+users[i].id]=users[i].status;
-    }
-    for(var i=0;i<userList.length;i++){
-	var u=userList[i];
-	var ue=createUserElement(u==userName?"あなた("+u+")":u,statusMap['#'+u]);
-	if(u==userName){
-	    ue.css({fontWeight:"bold"})
-	}
-	ue.appendTo(userListElement);
-	with({name:u,element:ue}){
-	    ue.hover(
-		function(){
-		    element.css("opacity",1);
-		    focusedUser=name;setFocusedShadowEverything()
-		},
-		function(){
-		    element.css("opacity",0.5);
-		    focusedUser=userName;setFocusedShadowEverything()
-		}
-	    )
-	}
-	
-    }
-    $(".userList").css("opacity","1");
-}
-function hideUserList(){
-    $(".userStatus").css("background","none");
-    $(".userItem").css("opacity","1");
-    $(".userList").css("opacity","0.2");
-}
 </script>
     <style>
     body{background-color:black;}
--- a/public/viewer/viewer.html	Wed Apr 24 02:48:20 2013 +0900
+++ b/public/viewer/viewer.html	Wed Apr 24 03:01:05 2013 +0900
@@ -15,16 +15,10 @@
 <script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-vml-1.3.15-RC1.js"></script>
 <script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-RC1.js"></script>
 <script type="text/javascript" src='treeArrangement.js'></script>
+<script type="text/javascript" src='viewerLib.js'></script>
 <script type="text/javascript">
 var LOAD_INTERVAL=5;
 var BASE_URL="";
-if(!Array.prototype.filter){
-    Array.prototype.filter=function(func){
-	var arr=[];
-	for(var i=0;i<this.length;i++)if(func(this[i]))arr.push(this[i]);
-	return arr;
-    }
-}
 
 var userName;
 
@@ -32,20 +26,6 @@
 var userList=[];
 var root_id;
 function loadConsensus(id){
-    function onload(json){
-	document.title="R-Consensus:"+json.toulmin.title;
-	$("#headertitle_main").text(json.toulmin.title)
-	if(treeInfo){
-	    updateToNew(json);
-	}else{
-//	    console.log(JSON.parse(JSON.stringify(json)));
-	    treeInfo=createJSONTreeInfo(json)
-	    //userList=getUserListFromJSONTree(treeInfo.root);
-	    showUserList([]);
-	    updateNode(treeInfo.root);
-	    updateTree();
-	}
-    }
     $.ajax({
 	url:BASE_URL+"/consensus/browse/latest/"+id,
 	success:function(o){onload(o)},
@@ -53,20 +33,13 @@
 	error:function(o){console.log("ERROR",o)}
     });
 }
-function loadUserList(){
-    $.ajax({
-	url:BASE_URL+"/users/all",
-	success:function(o){userList=o.sort();showUserList([]);},
-	type:"GET",cache:false,
-	error:function(o){console.log("ERROR",o)}
-    });
-}
 
 $(function(){
     userName=localStorage.userName;
     if(userName)start();
     else $("#loginPopup").css("display","block");
 })
+
 function login(uname){
     userName=localStorage.userName=uname;
     start();
@@ -78,220 +51,10 @@
 	type:"PUT",cache:false,
 	error:function(o){console.log(o)}
     });
-    
-    popupInit();
-    jsPlumb.importDefaults({
-	Connector : [ "Straight", { curviness:50 } ],
-	PaintStyle : { strokeStyle:"gray", lineWidth:2 },
-	EndpointStyle : {},
-	Anchors: ["BottomCenter","TopCenter"]
-    });
-    var consensus_id=(location.search.match("[0-9]+")||[])[0];
-    if(consensus_id){
-	root_id=consensus_id;
-	loadUserList()
-	loadConsensus(consensus_id);
-	setInterval(function(){loadUserList();loadConsensus(consensus_id)},LOAD_INTERVAL*1000);
-    }else{
-	document.body.innerHTML="<div style='color:white;font-size:64px'>No ClaimID Specified.<br><a href='index.html' style='color:#88f'>back</a></div>";
-    }
-}
-
-function updateToNew(json){
-    var t2=createJSONTreeInfo(json)
-    updateJSONTreeDiff(treeInfo.root,t2.root);
-    updateNode(treeInfo.root);
-    treeInfo.newLayout=t2.layout;
-    var cnt=0,time=500;
-    var time0=new Date();
-    var prevCnt=0;
-    function tfunc(t){return 2*t-t*t}
-    function animation(){
-	var cnt=(new Date()-time0)/time;
-	if(cnt<1){
-	    if(prevCnt!=cnt){
-		var pt=tfunc(prevCnt);
-		var t=tfunc(cnt);
-		animateTree((t-1)/(pt-t));
-		prevCnt=cnt;
-		
-	    }
-	    setTimeout(animation,10);
-	}else{
-	    animateTree(0);
-	}
-	updateNode(treeInfo.root);
-	updateTree();
-    }
-    animation();
-}
-
-var ViewParam={
-    offsetTop:100,
-    offsetBottom:100,
-    offsetLeft:100,
-    offsetRight:100,
-    nodeWidth:120,
-    nodeHeight:60,
-    intervalX:140,
-    intervalY:120
-};
-
-function animateTree(t){
-    function animateNodePosition(node,t){
-	node.position.x=(node.position.x*t+node.newPosition.x)/(1+t);
-	node.position.y=(node.position.y*t+node.newPosition.y)/(1+t);
-	for(var i=0;i<node.mentions.length;i++){
-	    animateNodePosition(node.mentions[i],t);
-	}
-	if(t==0){
-	    if(node.newPosition.remove){
-		jsPlumb.removeAllEndpoints(node.view);
-		$(node.view).remove();
-	    }
-	    node.mentions=node.mentions.filter(function(n){return !n.newPosition.remove});
-	}
-    }
-    animateNodePosition(treeInfo.root,t);
-    treeInfo.layout.left=(treeInfo.layout.left*t+treeInfo.newLayout.left)/(1+t);
-    treeInfo.layout.right=(treeInfo.layout.right*t+treeInfo.newLayout.right)/(1+t);
-    treeInfo.layout.depth=(treeInfo.layout.depth*t+treeInfo.newLayout.depth)/(1+t);
-}
-
-function updateTree(){
-    with(treeInfo.layout){
-	$("#treeRoot").css({
-	    left:ViewParam.offsetLeft+ViewParam.nodeWidth/2-ViewParam.intervalX*left,
-	    top:ViewParam.offsetTop+ViewParam.nodeHeight/2});
-	$("#treeMain").css({
-	    width:ViewParam.intervalX*(right-left)+ViewParam.nodeWidth+ViewParam.offsetLeft+ViewParam.offsetRight,
-	    height:ViewParam.intervalY*(depth-1)+ViewParam.nodeHeight+ViewParam.offsetTop+ViewParam.offsetBottom,
-	    top:50});
-    }
-    jsPlumb.repaintEverything();
+    init();
 }
 
 
-var relationJPMap={
-    suggestion:"提案",
-    refutation:"反論",
-    question:"質問"
-};
-function updateNode(node){
-    if(updateClaimElement(node)){
-	var fc=$("#treeRoot")[0].firstChild;
-	if(fc)$("#treeRoot")[0].insertBefore(node.view[0],fc);
-	else $("#treeRoot").append(node.view);
-    }
-    node.view.css({
-	left:node.position.x*ViewParam.intervalX-ViewParam.nodeWidth/2,
-	top:node.position.y*ViewParam.intervalY-ViewParam.nodeHeight/2
-    });	
-    var childs=node.mentions;
-    for(var i=0;i<childs.length;i++){
-	var child=childs[i];
-	var created=!child.view;
-	updateNode(child);
-	if(created){
-	    var c=jsPlumb.connect({source:node.view[0],target:child.view[0]});
-	    c.setLabel({label:"<span style='color:white'>"+(relationJPMap[child.relation]||child.relation)+"</span>",cssStyle:"color:white"});
-	}
-    }
-}
-
-var focusedUser=null;
-function setFocusedShadowEverything(){
-    function recFocusShadow(node){
-	setFocusedShadow(node);
-	for(var i=0;i<node.mentions.length;i++){
-	    recFocusShadow(node.mentions[i]);
-	}
-    }
-    recFocusShadow(treeInfo.root);
-}
-function setFocusedShadow(node){
-    var name=focusedUser||userName;
-    var color;
-//    console.log(node.info.author)
-    if(node.info.author==name)color="#afa";
-    else{
-	var users=node.info.users,status;
-	for(var i=0;i<users.length;i++){
-	    var u=users[i];
-	    if(u.id==name){status=u.status;break;}
-	}
-	color=({agreed:"#aaf",denied:"#faa",pend:"white",unknown:"white"})[status];
-    }
-    node.view.css("box-shadow",color?color+" 0 0 30px":"none");
-}
-function appendStatusElement(viewDiv, status){
-    var statusView = $("<div class='nodeStatus'/>");
-    statusView.text(status);
-    statusView.css({
-	left:0,
-	top:-5
-    });
-    viewDiv[0].appendChild(statusView[0]);
-}
-function updateClaimElement(node){
-    var created=false;
-    if(!node.view){
-	created=true
-	node.view=$("<div class='claimNode'/>");
-	node.view.click(function(){showClaim(node);});
-	node.view.hover(
-	    function(){div.css("box-shadow","white 0 0 50px");showUserList(node.info.users,node.info.author)},
-	    function(){try{setFocusedShadow(node);}catch(e){console.log(e);}showUserList([])}
-	)
-    }
-    setFocusedShadow(node);
-    var div=node.view;
-    div.text(node.info.toulmin.title);
-    appendStatusElement(node.view, node.info.status);
-    var statusBackground={passed:"#aaf",unknown:"#fff",failed:"#faa",fail:"#faa"};
-    var statusBorder={passed:"#66a",unknown:"#aaa",failed:"#a66",fail:"#a66"};
-    div.css("background",statusBackground[node.info.status]||"white");
-    div.css("border-color",statusBorder[node.info.status]||"white");
-    return created;
-}
-
-
-function showUserList(users,author){
-    var statusMap={};
-    var userListElement=$(".userList");
-    userListElement.text('')
-    if(author)statusMap['#'+author]='author';
-    for(var i=0;i<users.length;i++){
-	statusMap['#'+users[i].id]=users[i].status;
-    }
-    for(var i=0;i<userList.length;i++){
-	var u=userList[i];
-	var ue=createUserElement(u==userName?"あなた("+u+")":u,statusMap['#'+u]);
-	if(u==userName){
-	    ue.css({fontWeight:"bold"})
-	}
-	ue.appendTo(userListElement);
-	with({name:u,element:ue}){
-	    ue.hover(
-		function(){
-		    element.css("opacity",1);
-		    focusedUser=name;setFocusedShadowEverything()
-		},
-		function(){
-		    element.css("opacity",0.5);
-		    focusedUser=userName;setFocusedShadowEverything()
-		}
-	    )
-	}
-	
-    }
-    $(".userList").css("opacity","1");
-}
-function hideUserList(){
-    $(".userStatus").css("background","none");
-    $(".userItem").css("opacity","1");
-    $(".userList").css("opacity","0.2");
-}
 </script>
 <style>
 body{background-color:black;}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/public/viewer/viewerLib.js	Wed Apr 24 03:01:05 2013 +0900
@@ -0,0 +1,246 @@
+if(!Array.prototype.filter){
+    Array.prototype.filter=function(func){
+	var arr=[];
+	for(var i=0;i<this.length;i++)if(func(this[i]))arr.push(this[i]);
+	return arr;
+    }
+}
+
+function onload(json){
+    document.title="R-Consensus:"+json.toulmin.title;
+    $("#headertitle_main").text(json.toulmin.title)
+    if(treeInfo){
+	updateToNew(json);
+    }else{
+	//	    console.log(JSON.parse(JSON.stringify(json)));
+	treeInfo=createJSONTreeInfo(json)
+	//userList=getUserListFromJSONTree(treeInfo.root);
+	showUserList([]);
+	updateNode(treeInfo.root);
+	updateTree();
+    }
+}
+
+function loadUserList(){
+    $.ajax({
+	url:BASE_URL+"/users/all",
+	success:function(o){userList=o.sort();showUserList([]);},
+	type:"GET",cache:false,
+	error:function(o){console.log("ERROR",o)}
+    });
+}
+
+function init() {
+    popupInit();
+    jsPlumb.importDefaults({
+	Connector : [ "Straight", { curviness:50 } ],
+	PaintStyle : { strokeStyle:"gray", lineWidth:2 },
+	EndpointStyle : {},
+	Anchors: ["BottomCenter","TopCenter"]
+    });
+    var consensus_id=(location.search.match("[0-9]+")||[])[0];
+    if(consensus_id){
+	root_id=consensus_id;
+	loadUserList();
+	loadConsensus(consensus_id);
+    }else{
+	document.body.innerHTML="<div style='color:white;font-size:64px'>No ClaimID Specified.<br><a href='index.html' style='color:#88f'>back</a></div>";
+    }
+}
+
+function updateToNew(json){
+    var t2=createJSONTreeInfo(json)
+    updateJSONTreeDiff(treeInfo.root,t2.root);
+    
+    updateNode(treeInfo.root);
+    treeInfo.newLayout=t2.layout;
+    var cnt=0,time=500;
+    var time0=new Date();
+    var prevCnt=0;
+    function tfunc(t){return 2*t-t*t}
+    function animation(){
+	var cnt=(new Date()-time0)/time;
+	if(cnt<1){
+	    if(prevCnt!=cnt){
+		var pt=tfunc(prevCnt);
+		var t=tfunc(cnt);
+		animateTree((t-1)/(pt-t));
+		prevCnt=cnt;
+		
+	    }
+	    setTimeout(animation,10);
+	}else{
+	    animateTree(0);
+	}
+	updateNode(treeInfo.root);
+	updateTree();
+    }
+    animation();
+}
+
+var ViewParam={
+    offsetTop:100,
+    offsetBottom:100,
+    offsetLeft:100,
+    offsetRight:100,
+    nodeWidth:120,
+    nodeHeight:60,
+    intervalX:140,
+    intervalY:120
+};
+
+function animateTree(t){
+    function animateNodePosition(node,t){
+	node.position.x=(node.position.x*t+node.newPosition.x)/(1+t);
+	node.position.y=(node.position.y*t+node.newPosition.y)/(1+t);
+	for(var i=0;i<node.mentions.length;i++){
+	    animateNodePosition(node.mentions[i],t);
+	}
+	if(t==0){
+	    if(node.newPosition.remove){
+		jsPlumb.removeAllEndpoints(node.view);
+		$(node.view).remove();
+	    }
+	    node.mentions=node.mentions.filter(function(n){return !n.newPosition.remove});
+	}
+    }
+    animateNodePosition(treeInfo.root,t);
+    treeInfo.layout.left=(treeInfo.layout.left*t+treeInfo.newLayout.left)/(1+t);
+    treeInfo.layout.right=(treeInfo.layout.right*t+treeInfo.newLayout.right)/(1+t);
+    treeInfo.layout.depth=(treeInfo.layout.depth*t+treeInfo.newLayout.depth)/(1+t);
+}
+
+function updateTree(){
+    with(treeInfo.layout){
+	$("#treeRoot").css({
+	    left:ViewParam.offsetLeft+ViewParam.nodeWidth/2-ViewParam.intervalX*left,
+	    top:ViewParam.offsetTop+ViewParam.nodeHeight/2});
+	$("#treeMain").css({
+	    width:ViewParam.intervalX*(right-left)+ViewParam.nodeWidth+ViewParam.offsetLeft+ViewParam.offsetRight,
+	    height:ViewParam.intervalY*(depth-1)+ViewParam.nodeHeight+ViewParam.offsetTop+ViewParam.offsetBottom,
+	    top:50});
+    }
+    jsPlumb.repaintEverything();
+}
+
+var relationJPMap={
+    suggestion:"提案",
+    refutation:"反論",
+    question:"質問"
+};
+
+function updateNode(node){
+    if(updateClaimElement(node)){
+	var fc=$("#treeRoot")[0].firstChild;
+	if(fc)$("#treeRoot")[0].insertBefore(node.view[0],fc);
+	else $("#treeRoot").append(node.view);
+    }
+    node.view.css({
+	left:node.position.x*ViewParam.intervalX-ViewParam.nodeWidth/2,
+	top:node.position.y*ViewParam.intervalY-ViewParam.nodeHeight/2
+    });	
+    var childs=node.mentions;
+    for(var i=0;i<childs.length;i++){
+	var child=childs[i];
+	var created=!child.view;
+	updateNode(child);
+	if(created){
+	    var c=jsPlumb.connect({source:node.view[0],target:child.view[0]});
+	    c.setLabel({label:"<span style='color:white'>"+(relationJPMap[child.relation]||child.relation)+"</span>",cssStyle:"color:white"});
+	}
+    }
+}
+
+var focusedUser=null;
+function setFocusedShadowEverything(){
+    function recFocusShadow(node){
+	setFocusedShadow(node);
+	for(var i=0;i<node.mentions.length;i++){
+	    recFocusShadow(node.mentions[i]);
+	}
+    }
+    recFocusShadow(treeInfo.root);
+}
+function setFocusedShadow(node){
+    var name=focusedUser||userName;
+    var color;
+    if(node.info.author==name)color="#afa";
+    else{
+	var users=node.info.users,status;
+	for(var i=0;i<users.length;i++){
+	    var u=users[i];
+	    if(u.id==name){status=u.status;break;}
+	}
+	color=({agreed:"#aaf",denied:"#faa",pend:"white",unknown:"white"})[status];
+    }
+    node.view.css("box-shadow",color?color+" 0 0 30px":"none");
+}
+
+function appendStatusElement(viewDiv, status){
+    var statusView = $("<div class='nodeStatus'/>");
+    statusView.text(status);
+    statusView.css({
+	left:0,
+	top:-5
+    });
+    viewDiv[0].appendChild(statusView[0]);
+}
+function updateClaimElement(node){
+    var created=false;
+    if(!node.view){
+	created=true
+	node.view=$("<div class='claimNode'/>");
+	node.view.click(function(){showClaim(node);});
+	node.view.hover(
+	    function(){div.css("box-shadow","white 0 0 50px");showUserList(node.info.users,node.info.author)},
+	    function(){try{setFocusedShadow(node);}catch(e){console.log(e);}showUserList([])}
+	)
+    }
+    setFocusedShadow(node);
+    var div=node.view;
+    div.text(node.info.toulmin.title);
+    appendStatusElement(node.view, node.info.status);
+    var statusBackground={passed:"#aaf",unknown:"#fff",failed:"#faa",fail:"#faa"};
+    var statusBorder={passed:"#66a",unknown:"#aaa",failed:"#a66",fail:"#a66"};
+    div.css("background",statusBackground[node.info.status]||"white");
+    div.css("border-color",statusBorder[node.info.status]||"white");
+    return created;
+}
+
+
+function showUserList(users,author){
+    var statusMap={};
+    var userListElement=$(".userList");
+    userListElement.text('')
+    if(author)statusMap['#'+author]='author';
+    for(var i=0;i<users.length;i++){
+	statusMap['#'+users[i].id]=users[i].status;
+    }
+    for(var i=0;i<userList.length;i++){
+	var u=userList[i];
+	var ue=createUserElement(u==userName?"あなた("+u+")":u,statusMap['#'+u]);
+	if(u==userName){
+	    ue.css({fontWeight:"bold"})
+	}
+	ue.appendTo(userListElement);
+	with({name:u,element:ue}){
+	    ue.hover(
+		function(){
+		    element.css("opacity",1);
+		    focusedUser=name;setFocusedShadowEverything()
+		},
+		function(){
+		    element.css("opacity",0.5);
+		    focusedUser=userName;setFocusedShadowEverything()
+		}
+	    )
+	}
+	
+    }
+    $(".userList").css("opacity","1");
+}
+function hideUserList(){
+    $(".userStatus").css("background","none");
+    $(".userItem").css("opacity","1");
+    $(".userList").css("opacity","0.2");
+}