# HG changeset patch
# User Nobuyasu Oshiro  <dimolto@cr.ie.u-ryukyu.ac.jp>
# Date 1366233566 -32400
# Node ID aa5daf38f3e90e958ebc38971cb34a44126d57ca
# Parent  3440be06e501aaecd9b16e9a20a3333d6f02c0fc
viewer.html

diff -r 3440be06e501 -r aa5daf38f3e9 public/viewer/form.css
--- a/public/viewer/form.css	Mon Apr 01 13:11:23 2013 +0900
+++ b/public/viewer/form.css	Thu Apr 18 06:19:26 2013 +0900
@@ -1,93 +1,93 @@
 #popup_base{
-	position:fixed;
-	left:0;top:0;
-	width:100%;height:100%;
+    position:fixed;
+    left:0;top:0;
+    width:100%;height:100%;
 }
 #popup_background{
-	position:absolute;background:black;
-	opacity:0.8;
-	left:0;top:0;
-	width:100%;height:100%;
+    position:absolute;background:black;
+    opacity:0.8;
+    left:0;top:0;
+    width:100%;height:100%;
 }
 div.popup_center{
-	position:fixed;left:50%;top:50%;width:0;height:0;
+    position:fixed;left:50%;top:50%;width:0;height:0;
 }
 div.claiminfo{
-	position:absolute;background:white;
-	width:600px;
-	height:400px;
-	left:-200px;top:-300px;
+    position:absolute;background:white;
+    width:600px;
+    height:400px;
+    left:-200px;top:-300px;
 }
 div.mentioninfo{
-	position:absolute;background:white;
-	width:600px;
-	height:400px;
-	left:-300px;top:-200px;
-	box-shadow:0 0 50px silver;
+    position:absolute;background:white;
+    width:600px;
+    height:400px;
+    left:-300px;top:-200px;
+    box-shadow:0 0 50px silver;
 }
 div.claim_title{
-	position:absolute;
-	left:0;top:0;
-	width:600px;
-	height:60px;
-	background:#336;
+    position:absolute;
+    left:0;top:0;
+    width:600px;
+    height:60px;
+    background:#336;
 }
 div.mentioninfo div.claim_title{background:#366;}
 div.claim_title input{
-	position:absolute;left:5;top:5;width:590px;height:50px;
-	font-size:40px;
-	color:white;
-	border:none;background:none;
+    position:absolute;left:5;top:5;width:590px;height:50px;
+    font-size:40px;
+    color:white;
+    border:none;background:none;
 }
 div.claim_menu{
-	position:absolute;
-	left:0;top:60;width:100%;height:30px;
-	border-bottom:2px solid #66a;
-	background:#ddd;
+    position:absolute;
+    left:0;top:60;width:100%;height:30px;
+    border-bottom:2px solid #66a;
+    background:#ddd;
 }
 div.mentioninfo div.claim_menu{border-color:#599}
 div.menu_item{
-	position:relative;
-	display:inline-block;
-	font-size:20px;
-	background:white;
-	border-radius:8px 8px 0 0;
-	margin:2px 0 0 10px;
-	padding:0 10px;
-	background:silver;
-	height:28px;
-	line-height:28px;
-	color:white;
-	text-align:right;
-	line-heigth:50px;
-	cursor:default;
-	-webkit-user-select:none;
+    position:relative;
+    display:inline-block;
+    font-size:20px;
+    background:white;
+    border-radius:8px 8px 0 0;
+    margin:2px 0 0 10px;
+    padding:0 10px;
+    background:silver;
+    height:28px;
+    line-height:28px;
+    color:white;
+    text-align:right;
+    line-heigth:50px;
+    cursor:default;
+    webkit-user-select:none;
 }
 div.claim_main,div.mention_main{
-	position:absolute;left:0;top:90;width:600;height:270;
+    position:absolute;left:0;top:90;width:600;height:270;
 }
 div.claiminfo div.claim_main{
-	background:-moz-linear-gradient(top,#66a,white 2%,white);
-	background:-webkit-gradient(linear,left top,left bottom,from(#66a),to(white),color-stop(0.02,white));
+    background:-moz-linear-gradient(top,#66a,white 2%,white);
+    background:-webkit-gradient(linear,left top,left bottom,from(#66a),to(white),color-stop(0.02,white));
 }
 div.mentioninfo div.mention_main{
-	background:-moz-linear-gradient(top,#559,white 2%,white);
-	background:-webkit-gradient(linear,left top,left bottom,from(#599),to(white),color-stop(0.02,white));
+    background:-moz-linear-gradient(top,#559,white 2%,white);
+    background:-webkit-gradient(linear,left top,left bottom,from(#599),to(white),color-stop(0.02,white));
 }
 div.claim_main textarea,div.mention_main textarea{
-	font-size:20px;
-	position:absolute;
-	width:590px;height:260px;
-	left:5px;top:5px;
-	max-width:590px;max-height:290px;
+    font-size:20px;
+    position:absolute;
+    width:590px;height:260px;
+    left:5px;top:5px;
+    max-width:590px;max-height:290px;
 }
 div.claim_footer{
-	position:absolute;
-	left:0;bottom:00;width:600;height:40px;
-	background:#336;
+    position:absolute;
+    left:0;bottom:00;width:600;height:40px;
+    background:#336;
 }
 div.mentioninfo div.claim_footer{
-	background:#366;
+    background:#366;
 }
 .claim_contents .menu_contents{background:#66a;}
 .claim_toulmin .menu_toulmin{background:#66a;}
@@ -106,75 +106,75 @@
 .mention_users .main_users{display:block;}
 
 div.item_toulmin{
-	position:relative;
-	height:54px;
-	width:100%;
+    position:relative;
+    height:54px;
+    width:100%;
 }
 div.item_toulmin span{
-	position:absolute;left:10;top:10;width:90px;height:34px;font-size:24px;
+    position:absolute;left:10;top:10;width:90px;height:34px;font-size:24px;
 }
 div.item_toulmin input{
-	position:absolute;left:100;top:10;width:480px;height:34;font-size:24px
+    position:absolute;left:100;top:10;width:480px;height:34;font-size:24px
 }
 #claim_cover,#mention_cover{
-	position:absolute;left:0;top:0;
-	width:100%;height:100%;
-	background:black;
-	opacity:0.5;
+    position:absolute;left:0;top:0;
+    width:100%;height:100%;
+    background:black;
+    opacity:0.5;
 }
 
 span.button{
-	background:#eee;
-	background:-moz-linear-gradient(top,#fff,#ddf);
-	background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ddf));
-	border:1px solid gray;
-	border-radius:4px;
-	text-align:center;
-	cursor:default;
+    background:#eee;
+    background:-moz-linear-gradient(top,#fff,#ddf);
+    background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ddf));
+    border:1px solid gray;
+    border-radius:4px;
+    text-align:center;
+    cursor:default;
 }
 span.button:hover{
-	background:#bbb;
-	background:-moz-linear-gradient(top,#ccc,#aac);
-	background:-webkit-gradient(linear,left top,left bottom,from(#ccc),to(#aac));
+    background:#bbb;
+    background:-moz-linear-gradient(top,#ccc,#aac);
+    background:-webkit-gradient(linear,left top,left bottom,from(#ccc),to(#aac));
 }
 span.button:active{
-	background:#bbb;
-	background:-moz-linear-gradient(top,#bbb,#88b);
-	background:-webkit-gradient(linear,left top,left bottom,from(#bbb),to(#88b));
+    background:#bbb;
+    background:-moz-linear-gradient(top,#bbb,#88b);
+    background:-webkit-gradient(linear,left top,left bottom,from(#bbb),to(#88b));
 }
 div.claim_footer span.button{
-	padding:0px 5px;
-	height:28px;
-	font-size:24px;
-	line-height:28px;
+    padding:0px 5px;
+    height:28px;
+    font-size:24px;
+    line-height:28px;
 }
 span.save{
-	position:absolute;right:10;top:4;
+    position:absolute;right:10;top:4;
 }
 span.cancel{
-	position:absolute;right:80;top:4;
+    position:absolute;right:80;top:4;
 }
 
 .mention_button{
-	position:absolute;left:10;top:4;
+    position:absolute;left:10;top:4;
 }
 
 span.option{
-	font-size:20px;
-	line-height:28px;
-	height:28px;
-	border:1px solid gray;
-	text-align:center;
-	background:#eef;
-	background:-moz-linear-gradient(top,#eef,#bbe);
-	background:-webkit-gradient(linear,left top,left bottom,from(#eef),to(#bbe));
-	color:#888;
+    font-size:20px;
+    line-height:28px;
+    height:28px;
+    border:1px solid gray;
+    text-align:center;
+    background:#eef;
+    background:-moz-linear-gradient(top,#eef,#bbe);
+    background:-webkit-gradient(linear,left top,left bottom,from(#eef),to(#bbe));
+    color:#888;
 }
 .option1 .option1,.option2 .option2,.option3 .option3{
-	color:black;
-	background:#ccb;
-	background:-moz-linear-gradient(top,#ccb,#88c);
-	background:-webkit-gradient(linear,left top,left bottom,from(#ccb),to(#88c));
+    color:black;
+    background:#ccb;
+    background:-moz-linear-gradient(top,#ccb,#88c);
+    background:-webkit-gradient(linear,left top,left bottom,from(#ccb),to(#88c));
 
 }
 .agree1{position:absolute;right:130;top:4;width:60px;}
@@ -192,32 +192,79 @@
 .author_name{position:absolute;left:80;top:4;font-size:20px;line-height:28px;height:28px;}
 
 #claim_users,#mention_users{
-	position:absolute;left:10;top:36;width:580;height:230;
-	overflow-y:scroll;
+    position:absolute;left:10;top:36;width:580;height:230;
+    overflow-y:scroll;
 }
 
 
 #claim_status{
-	position:absolute;
-	right:20px;top:0px;
-	font-size:26px;
-	line-height:26px;
-	height:26px;
-	text-align:center;
+    position:absolute;
+    right:20px;top:0px;
+    font-size:26px;
+    line-height:26px;
+    height:26px;
+    text-align:center;
 }
 
 
 div.userItem{
-	background:white;
-	padding-left:24px;
-	font-size:24px;
-	position:relative;
-	border-radius:4px;
-	font-size:24px;
-	line-height:30px;
-	margin-bottom:5px
+    background:white;
+    padding-left:24px;
+    font-size:24px;
+    position:relative;
+    border-radius:4px;
+    font-size:24px;
+    line-height:30px;
+    margin-bottom:5px
 }
 div.userStatus{
-	position:absolute;left:2px;top:5px;width:20px;height:20px;
-	border-radius:10px;
-}
\ No newline at end of file
+    position:absolute;left:2px;top:5px;width:20px;height:20px;
+    border-radius:10px;
+}
+div.claimNode{
+    z-index:20;
+    position:absolute;width:92px;height:40px;font-size:12px;padding:4px;
+    background:white;
+    padding-top:12px;
+    border:2px solid silver;
+    overflow:hidden;
+    border-radius:5px;
+    cursor:pointer;
+}
+div.nodeStatus{
+    top:-5px;
+    right:0px;
+    z-index:40;
+    position:absolute;width:60px;height:15px;font-size:15px;padding:2px;background:white;
+    border:1px sold silver;
+    overflow:hidden;
+    border-radius:3px;
+    cursor:pointer;
+}
+div.userList{
+    position:fixed;
+    z-index:30;
+    right:0;top:0;
+    width:160px;
+}
+div.header{
+    position:absolute;
+    left:0;top:0;
+    z-index:5;
+    height:50px;
+    width:100%;
+    background:#223;
+    background:-moz-linear-gradient(top,#002,#223);
+    background:-webkit-gradient(linear,left top,left bottom,from(#002),to(#223));
+    color:silver;
+    font-size:40px;
+}
+div.revision{
+    position:absolute;
+    left:0;top:50px;
+    z-index:5;
+    height:25px;
+    width:100%;
+    color:silver;
+    font-size:20px;
+}
diff -r 3440be06e501 -r aa5daf38f3e9 public/viewer/revisionviewer.html
--- a/public/viewer/revisionviewer.html	Mon Apr 01 13:11:23 2013 +0900
+++ b/public/viewer/revisionviewer.html	Thu Apr 18 06:19:26 2013 +0900
@@ -1,6 +1,7 @@
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <title>R-Consensus</title>
 <link rel='stylesheet' href="form.css">
+<link rel="stylesheet" href="jquery-ui.css">
 <script src='form.js'></script>
 <script type="text/javascript" src="js/lib/jquery-1.8.1-min.js"></script>
 <script type="text/javascript" src="js/lib/jquery-ui-1.8.23-min.js"></script>
@@ -16,59 +17,58 @@
 <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">
-var LOAD_INTERVAL=5;
+    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;
-	}
+    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;
-
 var treeInfo;
 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();
-		}
+    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)},
-		type:"GET",cache:false,
-		error:function(o){console.log("ERROR",o)}
-	});
+    }
+    $.ajax({
+	url:BASE_URL+"/consensus/browse/"+id,
+	success:function(o){onload(o)},
+	type:"GET",cache:false,
+	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)}
-	});
+    $.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({
-		url:BASE_URL+"/claims/get/revision/"+consensus_id,
-		success:function(o){createOptionTag(consensus_id, o); console.log("revision = "+ o)},
-		type:"GET",cache:false,
-		error:function(o){console.log("ERROR",o)}
-	});
+    $.ajax({
+	url:BASE_URL+"/claims/get/revision/"+consensus_id,
+	success:function(o){createOptionTag(consensus_id, o); console.log("revision = "+ o)},
+	type:"GET",cache:false,
+	error:function(o){console.log("ERROR",o)}
+    });
 }
 
 function changeRevision(id) {
@@ -77,270 +77,250 @@
 }
 
 function createOptionTag(consensus_id, revisionInfo) {
-        var selectArray = new Array();
-        selectArray.push('<select onchange="changeRevision(this.value)" >');
-        for (var i=0; i<revisionInfo.length; i++) {
-	    selectArray.push("<option>"+revisionInfo[i]+"</option>");
-	}
-        selectArray.push("</select>");
-        $('#revisionId')[0].innerHTML =  "revision:"+selectArray.join();
-        $('#revisionId')[0].children[0].value = consensus_id;
+    var selectArray = new Array();
+    selectArray.push('<select onchange="changeRevision(this.value)" >');
+    for (var i=0; i<revisionInfo.length; i++) {
+	var revision = revisionInfo.length - i;
+	selectArray.push("<option value='"+revisionInfo[i]+"'>"+revision+"</option>");
+    }
+    selectArray.push("</select>");
+    $('#revisionId')[0].innerHTML =  "revision:"+selectArray.join();
+    //        $('#revisionId')[0].children[0].value = consensus_id;
 }
 
 $(function(){
-	userName=localStorage.userName;
-	if(userName)start();
-	else $("#loginPopup").css("display","block");
+    userName=localStorage.userName;
+    if(userName)start();
+    else $("#loginPopup").css("display","block");
 })
 function login(uname){
-	userName=localStorage.userName=uname;
-	start();
+    userName=localStorage.userName=uname;
+    start();
 }
 function start(){
-	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();
-		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>";
-	}
+    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();
+	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);
-	
+    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);
-	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();
+	updateTree();
+    }
+    animation();
 }
 
 var ViewParam={
-	offsetTop:100,
-	offsetBottom:100,
-	offsetLeft:100,
-	offsetRight:100,
-	nodeWidth:120,
-	nodeHeight:60,
-	intervalX:140,
-	intervalY:120
+    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});
-		}
+    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);
 	}
-	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);
+	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();
+    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:"質問"
+    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);
+    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"});
 	}
-	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]);
-		}
+    function recFocusShadow(node){
+	setFocusedShadow(node);
+	for(var i=0;i<node.mentions.length;i++){
+	    recFocusShadow(node.mentions[i]);
 	}
-	recFocusShadow(treeInfo.root);
+    }
+    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];
+    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;}
 	}
-	node.view.css("box-shadow",color?color+" 0 0 30px":"none");
+	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);
-	var statusBackground={pass:"#aaf",unknown:"#fff",failed:"#faa",fail:"#faa"};
-	var statusBorder={pass:"#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;
+    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={pass:"#aaf",unknown:"#fff",failed:"#faa",fail:"#faa"};
+    var statusBorder={pass:"#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;
+    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"})
 	}
-	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()
 		}
-		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");
+	
+    }
+    $(".userList").css("opacity","1");
 }
 function hideUserList(){
-	$(".userStatus").css("background","none");
-	$(".userItem").css("opacity","1");
-	$(".userList").css("opacity","0.2");
+    $(".userStatus").css("background","none");
+    $(".userItem").css("opacity","1");
+    $(".userList").css("opacity","0.2");
 }
 </script>
 <style>
-div.claimNode{
-	z-index:20;
-	position:absolute;width:92px;height:40px;font-size:12px;padding:4px;background:white;
-	border:2px solid silver;
-	overflow:hidden;
-	border-radius:5px;
-	cursor:pointer;
-}
 body{background-color:black;}
-
-div.userList{
-	position:fixed;
-	z-index:30;
-	right:0;top:0;
-	width:160px;
+div.revisionSlider{
+    position:absolute;
+    left:0;top:70px;
+    z-index:5;
+    width:50%;
 }
-div.header{
-	position:absolute;
-	left:0;top:0;
-	z-index:5;
-	height:50px;
-	width:100%;
-	background:#223;
-	background:-moz-linear-gradient(top,#002,#223);
-	background:-webkit-gradient(linear,left top,left bottom,from(#002),to(#223));
-	color:silver;
-	font-size:40px;
-}
-div.revision{
-    position:absolute;
-    left:0;top:50px;
-    z-index:5;
-    height:25px;
-    width:100%;
-    color:silver;
-    font-size:20px;
-}
-
 </style>
 <script>
 function resetMentionForm(){
@@ -473,12 +453,20 @@
 	}
 }
 
+$(function() {
+    $('#slider').slider({ step:5,
+			  slide: function(event, ui){ console.log(ui.value); },
+			  stop: function(event, ui){ console.log(ui.value); }
+			});
+
+    $('#slider').slider();
+});
 </script>
 <div class='header'>
 <nobr id='header_title'><a href='index.html'>Home</a><span id='headertitle_main' style='margin-left:40px;'>loading</span></nobr>
 </div>
-<div class="revision" id="revisionId">
-</div>
+<div class="revision" id="revisionId"></div>
+<div class="revisionSlider" id="slider" style='left:10px;' ></div>
 
 <div style="position:relative;left:0;top:0;" id='treeMain'>
 <div style="position:absolute;width:0;height:0;left:100;" id='treeRoot'>