<script>


function PopNode(title,content){
	var element=document.createElement("div");
	this.element=element;
	element.className='node'
	element.innerHTML="<div class='nodePoint'></div><div class='popup'><center></center><pre></pre></div>"
	element.lastChild.firstChild.textContent=title;
	element.firstChild.textContent=title;
	element.lastChild.lastChild.textContent=content;
	var showhideInfo=this.showhideInfo={cnt:0,speed:0};
	var obj=this;
	element.firstChild.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)}



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;
function MyNode(level,childlength,parent){
	var obj=this;
	this.parent=parent;
	this.childs=[];
	if(level){
		for(var i=0;i<childlength;i++)this.childs[i]=new MyNode(level-1,childlength,this);
	}
	var title=genRandString();
	var content=genRandLine()+"\n"+genRandLine();
	var pnode=this.pnode=new PopNode(title,content);
	this.childshown=false;
	this.pnode.onMarkClick=function(){
		if(obj.childshown){obj.closeChilds();
			redrawLine();
			return;
		}

		if(obj.parent){
			console.log("closeGrand")
			obj.parent.closeGrandChilds(obj);
		}

		var len=obj.childs.length;
		for(var i=0;i<len;i++){
			var p=obj.childs[i].pnode;
			p.appendTo(document.body);
			var x2=pnode.x-(i-(len-1)/2)*100,y2=pnode.y+200;
			p.setLocation(x2,y2);
		}
		obj.childshown=!obj.childshown;
		redrawLine();
	}
}
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.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.drawLineRecursive();
		}
	}
}
function redrawLine(){
	clearCanvas();
	rootNode.drawLineRecursive();
}


onload=function(){
	var mn=new MyNode(5,6);
	mn.pnode.setLocation(512-40,100);
	mn.pnode.appendTo(document.body);
	rootNode=mn;
	return;



	var popnode=new PopNode("title","content")
	popnode.appendTo(document.body);
	popnode.setLocation(200,100);
	popnode.onMarkClick=function(){
		var pop2=new PopNode("title2","content2");
		pop2.appendTo(document.body);
		pop2.setLocation(200,300);
	}
}

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(x,y,x2,y2){
	if(!g){
		canvas=document.getElementsByTagName("canvas")[0];
		g=canvas.getContext("2d");
	}
	g.beginPath();
	g.moveTo(x,y);
	g.lineTo(x2,y2);
	g.stroke();
}




</script>
<style>
div.node{
	position:absolute;
}
div.nodePoint{
	z-index:0;
	position:absolute;left:0;top:0;
	background:red;width:80px;height:50px;border-radius:25px;
	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;
}
</style>
<body style='margin:0;padding:0;width:100%;height:100%;overflow:hidden;'>
<canvas style='position:absolute;left:0;top:0;' width=1024 height=1024>