<script>


function PopNode(title,content,color){
	var element=document.createElement("div");
	this.element=element;
	element.className='node'
	element.innerHTML="<div class='nodeFocus'></div><div class='nodePoint'></div><div class='popup'><center></center><pre></pre></div>"
	var point=element.childNodes[1];
	point.style.backgroundColor=color;
	element.lastChild.firstChild.textContent=title;
	point.textContent=title;
	element.lastChild.lastChild.textContent=content;
	var showhideInfo=this.showhideInfo={cnt:0,speed:0};
	var obj=this;
	point.onclick=function(){
		obj.onMarkClick();
	}
	var func=function(){
		showhideInfo.cnt+=showhideInfo.speed;
		if(showhideInfo.cnt<=0&&showhideInfo.speed<0){
			showhideInfo.speed=0;
			showhideInfo.cnt=0;
			element.lastChild.style.opacity=0;
			element.lastChild.style.display="none";
		}else if(showhideInfo.cnt>=10&&showhideInfo.speed>0){
			showhideInfo.speed=0;
			showhideInfo.cnt=10;
			element.lastChild.style.display="block";
			element.lastChild.style.opacity=1;
		}else{
			element.lastChild.style.display="block";
			element.lastChild.style.opacity=Math.min(showhideInfo.cnt/10,1);
			setTimeout(func,10);
		}
	}
	this.showhideFunc=func;
	element.onmouseover=function(){
		obj.show();
	}
	element.onmouseout=function(e){
		var e=e.relatedTarget;
		while(e){
			if(e==element)return;
			e=e.parentNode;
		}
		obj.hide();
	}
	this.setLocation(0,0);
}
PopNode.prototype.showhide=function(d){
	if(this.showhideInfo.speed)this.showhideInfo.speed=d;
	else{
		this.showhideInfo.speed=d;
		this.showhideFunc();
	}
}
PopNode.prototype.hide=function(){this.showhide(-1);};
PopNode.prototype.show=function(){this.showhide(1);};
PopNode.prototype.onMarkClick=function(){};
PopNode.prototype.setLocation=function(x,y){
	this.x=x;this.y=y;
	this.element.style.left=x;
	this.element.style.top=y;
}
PopNode.prototype.appendTo=function(parent){parent.appendChild(this.element)};
PopNode.prototype.remove=function(){if(this.element.parentNode)this.element.parentNode.removeChild(this.element)}
PopNode.prototype.setTarget=function(flag){
	var e=this.element;
	if(flag)e.firstChild.style.display='block';//'0 0 100px black'
	else e.firstChild.style.display='none';
}


function genRandString(){
	var s="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
	var str="";
	for(var len=12*Math.random();len>=0;len--)str+=s[Math.floor(s.length*Math.random())];
	return str;
}
function genRandLine(){
	var arr=[];
	for(var len=6*Math.random();len>=0;len--)arr.push(genRandString());
	return arr.join(" ");
}
var rootNode;
var targetNode;
function MyNode(level,childlength,parent){
	var obj=this;
	if(parent)this.parent=parent;
	this.childs=[];
	var len=Math.random()*childlength;
	if(level)for(var i=0;i<len;i++)this.childs[i]=new MyNode(level-1,childlength,this);
	
	
	var title=genRandString();
	var content=genRandLine()+"\n"+genRandLine();
	
	this.agreeInfo={ok:[],ng:[],pend:[]};
	for(var i=0;i<userList.length;i++){
		var uname=userList[i].name;
		var rnd=(1234*title.charCodeAt(title.length-1-i%title.length)*Math.cos(9876*i)+9876*title.charCodeAt(i%title.length)*Math.sin(1234*i));
		rnd-=Math.floor(rnd);
		while(rnd<0)rnd++;
		while(rnd>1)rnd--;
		if(rnd<0.5)continue;
		else if(rnd<0.55)this.agreeInfo.pend.push(uname);
		else if(rnd<0.998)this.agreeInfo.ok.push(uname);
		else this.agreeInfo.ng.push(uname);
	}
	this.calcAgreeInfo();
	this.color={ng:'red',ok:'blue',pend:'black'}[this.agreeInfo.status];
	var bgcolor={ng:'red',ok:'blue',pend:'gray'}[this.agreeInfo.status];
	var pnode=this.pnode=new PopNode(title,content,bgcolor);
	this.childshown=false;
	this.pnode.onMarkClick=function(){
		if(targetNode)targetNode.setTarget(false);
		(targetNode=obj).setTarget(true);
		
		if(obj.parent)obj.parent.closeGrandChilds(obj);
//		obj.closeGrandChilds();
		var len=obj.childs.length;
		for(var i=0;i<len;i++){
			var p=obj.childs[i].pnode;
			p.appendTo(pnode.element.parentNode);
			var x2=pnode.x-(i-(len-1)/2)*100,y2=pnode.y+200;
			p.setLocation(x2,y2);
		}
		obj.childshown=!obj.childshown;
		redrawLine();
		updateUserColor(obj.agreeInfo);
	}
}
MyNode.prototype.closeGrandChilds=function(except){
	for(var i=0;i<this.childs.length;i++){
		if(this.childs[i]!=except)this.childs[i].closeChilds();
	}
}
MyNode.prototype.closeChilds=function(except){
	for(var i=0;i<this.childs.length;i++){
		if(this.childs[i]!=except){
			this.childs[i].closeChilds();
			this.childs[i].pnode.remove();
		}
	}
	this.childshown=false;
}
MyNode.prototype.setTarget=function(flag){
	this.pnode.setTarget(flag);
}
MyNode.prototype.drawLineRecursive=function(){
	for(var i=0;i<this.childs.length;i++){
		var child=this.childs[i];
		if(child.pnode.element.parentNode){
			drawArrow(this.pnode.x+40,this.pnode.y+30,child.pnode.x+40,child.pnode.y+30,child.color);
			child.drawLineRecursive();
		}
	}
}
MyNode.prototype.calcAgreeInfo=function(){
	if(this.agreeInfo.status)return this.agreeInfo.status;
	var agreePend=false;
	var agreeNG=false;
	for(var i=0;i<this.childs.length;i++){
		var result=this.childs[i].calcAgreeInfo();
		if(result=='ok')agreePend=true;
		if(result=='ng')agreeNG=true;
	}
	if(this.agreeInfo.ng.length)agreeNG=true;
	if(this.agreeInfo.pend.length)agreePend=true;
	this.agreeInfo.status=agreeNG?'ng':agreePend?'pend':'ok';
	return this.agreeInfo.status;
}

function redrawLine(){
	clearCanvas();
	rootNode.drawLineRecursive();
}


var userList=[];

function UserItem(name){
	this.name=name;
	var element=document.createElement("div");
	this.element=element;
	element.textContent=name;
	element.className="userItem-none";
}
function updateUserColor(info){
console.log(info)
	var arrok=info.ok,arrng=info.ng,arrpend=info.pend;
	var map={};
	for(var i=0;i<arrok.length;i++)map[arrok[i]]='ok';
	for(var i=0;i<arrng.length;i++)map[arrng[i]]='ng';
	for(var i=0;i<arrpend.length;i++)map[arrpend[i]]='pend';
	for(var i=0;i<userList.length;i++){
		var u=userList[i];
		u.setType(map[u.name]||'none');
	}
}

UserItem.prototype.appendTo=function(parent){parent.appendChild(this.element)}
UserItem.prototype.setType=function(mode){this.element.className="userItem-"+mode}

onload=function(){
	var listdiv=document.getElementById("userList");
	for(var i=0;i<10;i++){
		var u=new UserItem(i+genRandString());
		u.appendTo(listdiv);
		userList.push(u);
	}
	
	var mn=new MyNode(3,6);
	mn.pnode.setLocation(512-40,100);
	mn.pnode.appendTo(document.getElementById("graphMain"));
	rootNode=mn;
}

var g,canvas;
function clearCanvas(){
	if(!g){
		canvas=document.getElementsByTagName("canvas")[0];
		g=canvas.getContext("2d");
	}
	g.clearRect(0,0,canvas.width,canvas.height);
}
function drawArrow(x1,y1,x2,y2,color){
	if(!g){
		canvas=document.getElementsByTagName("canvas")[0];
		g=canvas.getContext("2d");
	}
	g.beginPath();
	g.moveTo(x1,y1);
	g.lineTo(x2,y2);
	g.strokeStyle=color
	g.stroke();
}




</script>
<style>
#graph{position:absolute;left:0;top:0;}
#graphmain{position:absolute;left:0;top:0;}

div.node{
	position:absolute;
}
div.nodeFocus{
	z-index:0;
	position:absolute;left:-10;top:-10;
	width:80px;height:50px;border-radius:18px;
	border:10px solid black;
	display:none;
}

div.nodePoint{
	z-index:0;
	position:absolute;left:0;top:0;
	background:gray;
	width:80px;height:50px;border-radius:8px;
	font-size:32px;line-height:50px;overflow:hidden;text-align:center;
	cursor:pointer;
}
div.popup{
	z-index:10;
	display:none;
	position:absolute;left:-60px;top:40px;
	width:200px;height:160px;border-radius:8px;background:white;border:4px solid silver;
}
div.popup center{
	position:absolute;left:10px;top:10px;
	background:#eef;
	width:180px;height:40px;line-height:40px;font-size:32px;
	overflow:hidden;
} 
div.popup pre{
	margin:0;padding:0;
	position:absolute;
	left:10px;top:60px;width:180px;height:90px;
	overflow:scroll;
}
#userList{
	position:fixed;right:0;top:0;width:200px;height:100%;overflow-x:hidden;overflow-y:scroll;
}

div.userItem-none,div.userItem-pend,div.userItem-ok,div.userItem-ng{
	border-radius:4px;
	font-size:32px;
	line-height:40px;
	margin:4px 0;
}
div.userItem-none{
	background:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#ddf));
	color:#aaa;
}
div.userItem-ok{
	background:-webkit-gradient(linear,left top,left bottom,from(#88f),to(#88a));
}
div.userItem-pend{
	background:-webkit-gradient(linear,left top,left bottom,from(#aaa),to(#888));
}
div.userItem-ng{
	background:-webkit-gradient(linear,left top,left bottom,from(#f88),to(#a88));
}


</style>
<body style='margin:0;padding:0;width:100%;height:100%;overflow:hidden;'>
<div id='graph'>
<canvas style='position:absolute;left:0;top:0;' width=1024 height=1024></canvas>
<div id='graphMain'></div>
</div>
<div id='userList'></div>