"
Template:Team:Bonn:Network
From 2013.igem.org
(Difference between revisions)
MaxSch (Talk | contribs)
(Created page with "<script> function test(node) { var content = document.getElementById("content"); getElements(node); showElements(node,node,"navigation",content.parents,content.chil...")
Newer edit →
(Created page with "<script> function test(node) { var content = document.getElementById("content"); getElements(node); showElements(node,node,"navigation",content.parents,content.chil...")
Newer edit →
Revision as of 22:17, 30 September 2013
<script>
function test(node) {
var content = document.getElementById("content");
getElements(node);
showElements(node,node,"navigation",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text);
}
function initiateNetwork(node) {
var content = document.getElementById("content");
getElements(node);
showElements(node,node,"network",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text);
}
function getElements(node) {
var content = document.getElementById("content");
content.childs = new Array();
content.parents = new Array();
node = parseInt(node);
switch(node) {
case 1:
content.i = 1;
content.parents=[4];
content.childs=[2,3];
content.titleShort = "A title!1";
content.titleLong = "See a title!1";
content.summary= "this is a summary1";
content.text= "This is my Text!1";
content.type="";
break;
case 2:
content.i = 2;
content.parents=[1];
content.childs=[5];
content.titleShort = "A title!2";
content.titleLong = "See a title!2";
content.summary= "this is a summary2";
content.text= "This is my Text!2";
content.type="";
break;
case 3:
content.i = 3;
content.parents=[1];
content.childs=[5];
content.titleShort = "A title!3";
content.titleLong = "See a title!3";
content.summary= "this is a summary3";
content.text= "This is my Text!3";
content.type="";
break;
case 4:
content.i = 4;
content.parents=[6];
content.childs=[1];
content.titleShort = "A title!4";
content.titleLong = "See a title!4";
content.summary= "this is a summary4";
content.text= "This is my Text!4";
content.type="";
break;
case 5:
content.i = 5;
content.parents=[3,2];
content.childs=[];
content.titleShort = "A title!5";
content.titleLong = "See a title!5";
content.summary= "this is a summary5";
content.text= "This is my Text!5";
content.type="";
break;
case 6:
content.i = 6;
content.parents=[];
content.childs=[4];
content.titleShort = "A title!6";
content.titleLong = "See a title!6";
content.summary= "this is a summary6";
content.text= "This is my Text!6";
content.type="";
break;
}
}
function showElements(node,mainnode,action,parents,childs,titleShort,titleLong,summary,text) {
var content = document.getElementById("content");
getElements(node);
var contentTitle = document.getElementById("contentTitle");
var contentSummary = document.getElementById("contentSummary");
var contentText = document.getElementById("contentText");
switch(action) {
case "network":
if(document.getElementById("network")) {
var divs = document.getElementById("network");
divs.innerHTML = ;
}
contentTitle.innerHTML = titleLong;
contentSummary.innerHTML = summary;
contentText.innerHTML = text;
if(parents.length) {
createNetwork({
n:parents,
height:80,
width:80,
start:250,
end:290,
mainnode:node,
type:"parent"
});
}
if(childs.length) {
createNetwork({
n:childs,
height:80,
width:80,
start:70,
end:110,
mainnode:node,
type:"child"
});
}
break;
case "navigation":
if(document.getElementById("tree")) {
var divs = document.getElementById("tree");
divs.innerHTML = ;
}
contentTitle.innerHTML = titleLong;
contentSummary.innerHTML = summary;
contentText.innerHTML = text;
if(parents.length) {
circle({
n:parents,
height:1000,
width:1000,
start:260,
end:280,
mainnode:node,
type:"parent"
});
}
if(childs.length) {
circle({
n:childs,
height:1000,
width:1000,
start:80,
end:100,
mainnode:node,
type:"child"
});
}
if(document.getElementById("netNode"+node)) {
if(content.lastNode) {
if(document.getElementById("netNode"+content.lastNode)) {
var lastNode = document.getElementById("netNode"+content.lastNode);
lastNode.style.border = "none";
lastNode.style.top = lastNode.top +"px";
lastNode.style.left = lastNode.left +"px";
}
}
var currentNode = document.getElementById("netNode"+node);
currentNode.style.border = "2px solid red";
currentNode.style.top = currentNode.top - 2 +"px";
currentNode.style.left = currentNode.left - 2 +"px";
content.lastNode = node;
}
break;
}
}
function circle(general) {
var genheight = parseInt(document.getElementById("tree").style.height);
var genwidth = parseInt(document.getElementById("tree").style.width);
if(general.cheight) {
} else{
general.cheight = 15;
}
if(general.cwidth){
} else{
general.cwidth = 15;
}
if(general.childs){
var nodeChilds = general.childs;
}
if(general.parents){
var nodeParents = general.parents;
}
var dheight = 1;
var dwidth = 1;
var cradius = 10;
general.mheight = 0;
general.mwidth = 0;
var mradius = 20;
if(general.n.length==1) {
var a= (general.end-general.start)/2;
} else{
if(general.end-general.start<0) {
var a = (360-general.start+general.end)/(general.n.length-1);
} else {
var a= (general.end-general.start)/(general.n.length-1);
}
}
var nodediv = new Array();
var node = new Array();
var ddiv = new Array();
var cleft= new Array();
var dleft= new Array();
var sin = new Array();
var cos = new Array();
if(document.getElementById("midnode"+general.mainnode)) {
} else {
mid = document.createElement("DIV");
mid.style.backgroundColor = "none";
mid.style.height = general.mwidth+"px";
mid.style.width = general.mheight+"px";
mid.style.zIndex = "10";
mid.id = "midnode"+general.mainnode;
mid.className = "midnode";
mid.style.position ="absolute";
if(general.top) {
mid.top = (general.top-general.mheight/2);
} else{
mid.top = (genheight/2-general.mheight/2);
}
if(general.left) {
mid.left = (general.left-general.mheight/2);
} else{
mid.left = (genwidth/2-general.mwidth/2);
}
mid.style.top = mid.top+"px";
mid.style.left = mid.left+"px";
mid.style.borderRadius = mradius+"px";
if(general.parent) {
document.getElementById(general.parent).appendChild(mid);
} else {
document.getElementById("tree").appendChild(mid);
}
}
var div = document.createElement("DIV");
div.style.backgroundColor = "none";
div.style.height = general.height;
div.style.width = general.width;
div.id = "div-"+general.type+"-"+general.mainnode;
div.style.position ="absolute";
div.style.top = (parseInt(document.getElementById("midnode"+general.mainnode).style.top)+general.mheight/2-general.height/2)+"px";
div.style.left = (parseInt(document.getElementById("midnode"+general.mainnode).style.left)+general.mwidth/2-general.width/2)+"px";
if(general.parent) {
document.getElementById("nodediv-parent-"+general.mainnode).appendChild(div);
} else {
document.getElementById("tree").appendChild(div);
}
for(var x=0;x<general.n.length;x++) {
var i = general.n[x];
if(general.parentID==i) {
} else{
if(general.parent) {
}else {
nodediv[i] = document.createElement("DIV");
nodediv[i].style.backgroundColor = "none";
nodediv[i].style.height = general.height+"px";
nodediv[i].style.width = general.width+"px";
nodediv[i].style.position = "absolute";
nodediv[i].style.top = "0";
nodediv[i].style.left = "0";
nodediv[i].id = "nodediv-"+general.type+"-"+i;
document.getElementById("div-"+general.type+"-"+general.mainnode).appendChild(nodediv[i]);
}
node[i] = document.createElement("DIV");
node[i].style.backgroundColor = "black";
node[i].style.height = general.cheight+"px";
node[i].style.width = general.cwidth+"px";
node[i].style.borderRadius = cradius+"px";
node[i].style.zIndex = "15";
node[i].id = "node"+general.mainnode+"-"+general.type+"-"+i;
node[i].i = i;
node[i].mainnode = general.mainnode;
node[i].type = general.type;
node[i].style.position = "absolute";
if(general.n.length==1) {
node[i].top = (general.height/2-general.cheight/2) - Math.cos(Math.PI*(a*(x+1)+general.start)/180)*(general.height/2-general.cheight/2);
} else {
node[i].top = (general.height/2-general.cheight/2) - Math.cos(Math.PI*(a*x+general.start)/180)*(general.height/2-general.cheight/2);
}
node[i].style.top = node[i].top +"px";
if(general.n.length==1) {
node[i].left = (general.width/2-general.cwidth/2) + Math.sin(Math.PI*(a*(x+1)+general.start)/180)*(general.width/2-general.cwidth/2);
} else {
node[i].left = (general.width/2-general.cwidth/2) + Math.sin(Math.PI*(a*x+general.start)/180)*(general.width/2-general.cwidth/2);
}
node[i].style.left = node[i].left+"px";
if(general.parent) {
div.appendChild(node[i]);
} else{
nodediv[i].appendChild(node[i]);
}
var nodeTitle = new Array;
nodeTitle[i] = document.createElement("DIV");
nodeTitle[i].style.borderBottom = "1px solid black";
nodeTitle[i].style.lineHeight = "25px";
nodeTitle[i].style.height = "20px";
nodeTitle[i].style.width = "80px";
nodeTitle[i].style.zIndex = "15";
nodeTitle[i].id = "nodeTitle"+i;
nodeTitle[i].i = i;
nodeTitle[i].mainnode = general.mainnode;
nodeTitle[i].type = general.type;
nodeTitle[i].style.position = "absolute";
nodeTitle[i].top = node[i].top+general.cheight;
nodeTitle[i].style.top = nodeTitle[i].top +"px";
nodeTitle[i].left = node[i].left+12;
nodeTitle[i].style.left = nodeTitle[i].left+"px";
if(general.parent) {
div.appendChild(nodeTitle[i]);
} else{
nodediv[i].appendChild(nodeTitle[i]);
}
if(general.parentID) {
} else {
var nodeSummary = new Array;
nodeSummary[i] = document.createElement("DIV");
nodeSummary[i].style.height = "70px";
nodeSummary[i].style.width = "50px";
nodeSummary[i].style.zIndex = "15";
nodeSummary[i].id = "nodeSummary"+i;
nodeSummary[i].i = i;
nodeSummary[i].mainnode = general.mainnode;
nodeSummary[i].type = general.type;
nodeSummary[i].style.position = "absolute";
nodeSummary[i].top = nodeTitle[i].top+parseInt(nodeTitle[i].style.height)+10;
nodeSummary[i].style.top = nodeSummary[i].top +"px";
nodeSummary[i].left = node[i].left+15;
nodeSummary[i].style.left = nodeSummary[i].left+"px";
if(general.parent) {
div.appendChild(nodeSummary[i]);
} else{
nodediv[i].appendChild(nodeSummary[i]);
}
}
if(general.parentID) {
connect(
i,
general.mainnode,
general.type,
general.width/2,
general.height/2,
node[i].left+general.cwidth/2,
node[i].top+general.cwidth/2,
general.parentID,
dheight,
dwidth
);
} else {
connect(
i,
general.mainnode,
general.type,
general.width/2,
general.height/2,
node[i].left+general.cwidth/2,
node[i].top+general.cwidth/2,
0,
dheight,
dwidth
);
}
getElements(i);
var content = document.getElementById("content");
var nodeTitle = document.getElementById("nodeTitle"+i);
nodeTitle.innerHTML = content.titleShort;
if(general.parentID) {
node[i].parentID = general.parentID;
}
node[i].x = x;
node[i].mainnode = general.mainnode;
node[i].onclick = function() {
$("#div-child-"+this.mainnode).stop().animate();
$("#div-child-"+this.mainnode).animate({left:"3000px"},700);
$("#div-parent-"+this.mainnode).stop().animate();
$("#div-parent-"+this.mainnode).animate({left:"3000px"},700);
var i = this.i;
getElements(i);
var content = document.getElementById("content");
content.mainnode = this.mainnode;
setTimeout(function() {
var content = document.getElementById("content");
showElements(content.i,content.mainnode,"navigation",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text)
}
, 700);
}
node[i].onmouseover = function() {
var i = this.i;
getElements(i);
var mainnode = this.mainnode;
var content = document.getElementById("content");
var nodeTitle = document.getElementById("nodeTitle"+i);
if(this.parentID) {
var nodeSummary = document.getElementById("nodeSummary"+this.mainnode);
} else {
var nodeSummary = document.getElementById("nodeSummary"+i);
}
nodeSummary.innerHTML = content.summary;
nodeTitle.innerHTML = content.titleLong;
this.style.backgroundColor = "blue";
$(".node-"+this.mainnode+"-"+this.type+"-"+this.i).css({"width":"3px","height":"3px"});
if(general.mainnode && general.parentID) {
$(".node-"+general.parentID+"-parent-"+general.mainnode).css({"width":"3px","height":"3px"});
}
if(this.type=="parent") {
if(document.getElementById("node"+mainnode+"-"+this.type+"-"+(general.n[this.x-1]))) {
var top1 = parseInt(document.getElementById("node"+mainnode+"-"+this.type+"-"+i).style.top);
if(document.getElementById("node"+mainnode+"-"+this.type+"-"+(i-1))) {
var top2 = parseInt(document.getElementById("node"+mainnode+"-"+this.type+"-"+(i-1)).style.top);
}
var slide = 150-(top2-top1);
if(slide>0) {
for(j=i-1;document.getElementById("nodediv-"+this.type+"-"+j);j--) {
var top = parseInt(document.getElementById("node"+mainnode+"-"+this.type+"-"+j).style.top);
$("#nodediv-"+this.type+"-"+j).stop().animate();
$("#nodediv-"+this.type+"-"+j).animate({top:slide+"px"},700);
}
}
}
} else{
if(document.getElementById("node"+mainnode+"-"+this.type+"-"+(general.n[this.x+1]))) {
var top1 = parseInt(document.getElementById("node"+mainnode+"-"+this.type+"-"+i).style.top);
if(document.getElementById("node"+mainnode+"-"+this.type+"-"+(i+1))) {
var top2 = parseInt(document.getElementById("node"+mainnode+"-"+this.type+"-"+(i+1)).style.top);
}
var slide = 150-(top2-top1);
if(slide>0) {
for(j=i+1;document.getElementById("nodediv-"+this.type+"-"+j);j++) {
var top = parseInt(document.getElementById("node"+mainnode+"-"+this.type+"-"+j).style.top);
$("#nodediv-"+this.type+"-"+j).stop().animate();
$("#nodediv-"+this.type+"-"+j).animate({top:slide+"px"},700);
}
}
}
}
};
node[i].onmouseout = function() {
var i = this.i;
getElements(i);
var mainnode = this.mainnode;
var content = document.getElementById("content");
var nodeTitle = document.getElementById("nodeTitle"+i);
if(this.parentID) {
var nodeSummary = document.getElementById("nodeSummary"+this.mainnode);
} else {
var nodeSummary = document.getElementById("nodeSummary"+i);
}
nodeSummary.innerHTML = "";
nodeTitle.innerHTML = content.titleShort;
this.style.backgroundColor = "black";
$(".node-"+this.mainnode+"-"+this.type+"-"+this.i).css({"width":"1px","height":"1px"});
if(general.mainnode != "0" && general.parentID) {
$(".node-"+general.parentID+"-parent-"+general.mainnode).css({"width":"1px","height":"1px"});
}
if(this.type=="parent") {
for(j=i-1;document.getElementById("nodediv-"+this.type+"-"+j);j--) {
$("#nodediv-"+this.type+"-"+j).stop().animate();
$("#nodediv-"+this.type+"-"+j).animate({top:"0px"},700);
}
} else{
for(j=i+1;document.getElementById("nodediv-"+this.type+"-"+j);j++) {
$("#nodediv-"+this.type+"-"+j).stop().animate();
$("#nodediv-"+this.type+"-"+j).animate({top:"0px"},700);
}
}
};
if(general.type == "parent") {
var content = document.getElementById("content");
getElements(i);
if(content.childs) {
circle({
n:content.childs,
height:200,
width:200,
start:270,
end:350,
mainnode:i,
type:"child",
top:node[i].top+general.cheight/2,
left:node[i].left+general.cwidth/2,
parentID:general.mainnode,
parent:"div-"+general.type+"-"+general.mainnode,
cwidth:9,
cheight:9
});
}
}
}
}
}
function connect(nodeID,mainnode,type,ax,ay,bx,by,parentID,dheight,dwidth) {
var m= (ay-by)/(bx-ax);
var length = Math.sqrt((ax-bx)*(ax-bx)+(by-ay)*(by-ay));
var ddiv = new Array();
var x=1;
var y=1;
if(ay-by<0) {
y=-1;
}
if(bx-ax<0) {
x=-1;
}
for(i=1;i<length+1;i++) {
ddiv[i] = document.createElement("DIV");
ddiv[i].style.backgroundColor = "grey";
ddiv[i].style.height = dheight+"px";
ddiv[i].style.width = dwidth+"px";
ddiv[i].style.zIndex = "1";
ddiv[i].style.borderRadius = "3px";
ddiv[i].id = "diag"+nodeID+i;
ddiv[i].className = "node-"+mainnode+"-"+type+"-"+nodeID;
ddiv[i].style.position = "absolute";
ddiv[i].top = ay-y*i*Math.sqrt(1/(1+1/(m*m)))-dheight/2;
ddiv[i].left = ax+x*i*Math.sqrt(1/(1+m*m))-dwidth/2;
ddiv[i].style.top = ddiv[i].top +"px";
ddiv[i].style.left = ddiv[i].left +"px";
if(parentID) {
document.getElementById("div-"+type+"-"+mainnode).appendChild(ddiv[i]);
} else {
document.getElementById("nodediv-"+type+"-"+nodeID).appendChild(ddiv[i]);
}
}
}
function createNetwork(general) {
var genheight = parseInt(document.getElementById("network").style.height);
var genwidth = parseInt(document.getElementById("network").style.width);
if(general.cheight) {
} else{
general.cheight = 10;
}
if(general.cwidth){
} else{
general.cwidth = 10;
}
if(general.childs){
var nodeChilds = general.childs;
}
if(general.parents){
var nodeParents = general.parents;
}
var dheight = 1;
var dwidth = 1;
var cradius = 10;
var node = new Array();
var nodeTitle = new Array;
var ddiv = new Array();
var cleft= new Array();
var dleft= new Array();
var sin = new Array();
var cos = new Array();
var title = document.createElement("DIV");
title.height = 50;
title.width = 150;
title.style.height = title.height + "px";
title.style.width = title.width + "px";
title.id = "title";
title.style.position = "absolute";
title.top = 20;
title.right = 0;
title.style.top = title.top + "px";
title.style.right = title.right + "px";
document.getElementById("network").appendChild(title);
var summary = document.createElement("DIV");
summary.style.height = "200px";
summary.style.width = "150px";
summary.id = "summary";
summary.style.position = "absolute";
summary.top = 10+title.top+title.height;
summary.right = title.right;
summary.style.top = summary.top + "px";
summary.style.right = summary.right + "px";
document.getElementById("network").appendChild(summary);
var Summary = document
if(document.getElementById("netNode"+general.mainnode)) {
node[general.mainnode] = document.getElementById("netNode"+general.mainnode);
}else {
node[general.mainnode] = document.createElement("DIV");
node[general.mainnode].style.backgroundColor = "black";
node[general.mainnode].style.height = general.cheight+"px";
node[general.mainnode].style.width = general.cwidth+"px";
node[general.mainnode].style.borderRadius = cradius+"px";
node[general.mainnode].style.zIndex = "15";
node[general.mainnode].id = "netNode"+general.mainnode;
node[general.mainnode].i = general.mainnode;
node[general.mainnode].mainnode = general.mainnode;
node[general.mainnode].type = general.type;
node[general.mainnode].style.position = "absolute";
node[general.mainnode].top =genheight/2;
node[general.mainnode].style.top = node[general.mainnode].top +"px";
node[general.mainnode].left = 0;
node[general.mainnode].style.left = node[general.mainnode].left+"px";
document.getElementById("network").appendChild(node[general.mainnode]);
nodeTitle[general.mainnode] = document.createElement("DIV");
nodeTitle[general.mainnode].style.height = "20px";
nodeTitle[general.mainnode].style.width = "80px";
nodeTitle[general.mainnode].style.zIndex = "15";
nodeTitle[general.mainnode].id = "netNodeTitle"+i;
nodeTitle[general.mainnode].i = general.mainnode;
nodeTitle[general.mainnode].mainnode = general.mainnode;
nodeTitle[general.mainnode].type = general.type;
nodeTitle[general.mainnode].style.position = "absolute";
nodeTitle[general.mainnode].top = node[general.mainnode].top+general.cheight;
nodeTitle[general.mainnode].style.top = nodeTitle[general.mainnode].top +"px";
nodeTitle[general.mainnode].left = node[general.mainnode].left+15;
nodeTitle[general.mainnode].style.left = nodeTitle[general.mainnode].left+"px";
document.getElementById("network").appendChild(nodeTitle[general.mainnode]);
node[general.mainnode].onclick = function() {
$("#div-child-"+this.mainnode).stop().animate();
$("#div-parent-"+this.mainnode).stop().animate();
$("#div-child-"+this.mainnode).animate({left:"1000px"},700);
$("#div-parent-"+this.mainnode).animate({left:"1000px"},700);
var i = this.i;
getElements(i);
var content = document.getElementById("content");
content.mainnode = i;
setTimeout(function() {
var content = document.getElementById("content");
showElements(content.i,content.mainnode,"navigation",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text)
}
, 710);
}
node[general.mainnode].onmouseover = function() {
var i = this.i;
getElements(i);
var mainnode = this.mainnode;
var content = document.getElementById("content");
var nodeTitle = document.getElementById("title");
var nodeSummary = document.getElementById("summary");
nodeSummary.innerHTML = content.summary;
nodeTitle.innerHTML = content.titleLong;
this.style.backgroundColor = "blue";
$(".netNode-"+this.mainnode+"-"+this.i).css({"width":"3px","height":"3px"});
if(general.mainnode && general.parentID) {
$(".netNode-"+general.parentID+"-"+general.mainnode).css({"width":"3px","height":"3px"});
}
};
node[general.mainnode].onmouseout = function() {
var i = this.i;
getElements(i);
var mainnode = this.mainnode;
var content = document.getElementById("content");
var nodeTitle = document.getElementById("title");
var nodeSummary = document.getElementById("summary");
nodeSummary.innerHTML = "";
nodeTitle.innerHTML = content.titleShort;
this.style.backgroundColor = "black";
$(".netNode-"+this.mainnode+"-"+this.i).css({"width":"1px","height":"1px"});
if(general.mainnode != "0" && general.parentID) {
$(".netNode-"+general.parentID+"-"+general.mainnode).css({"width":"1px","height":"1px"});
}
};
}
var n = 0;
for(var x=0;x<general.n.length;x++) {
var i = general.n[x];
if(document.getElementById("netNode"+i)) {
n=n+1;
}
}
if((general.n.length-n)==1) {
var a= (general.end-general.start);
} else{
if(general.end-general.start<0) {
var a = (360-general.start+general.end)/(general.n.length-1);
} else {
var a= (general.end-general.start)/(general.n.length-1);
}
}
for(var x=0;x<general.n.length;x++) {
var i = general.n[x];
if(document.getElementById("netNode"+i)) {
node[i] = document.getElementById("netNode"+i);
nodeTitle[i] = document.getElementById("netNodeTitle"+i);
} else{
node[i] = document.createElement("DIV");
node[i].style.backgroundColor = "black";
node[i].style.height = general.cheight+"px";
node[i].style.width = general.cwidth+"px";
node[i].style.borderRadius = cradius+"px";
node[i].style.zIndex = "15";
node[i].id = "netNode"+i;
node[i].i = i;
node[i].mainnode = general.mainnode;
node[i].type = general.type;
node[i].style.position = "absolute";
if(general.n.length==1) {
node[i].top = (node[general.mainnode].top-general.cheight/2) - Math.cos(Math.PI*(a*(x+1)+general.start)/180)*(general.height/2-general.cheight/2);
} else {
node[i].top = (node[general.mainnode].top-general.cheight/2) - Math.cos(Math.PI*(a*x+general.start)/180)*(general.height/2-general.cheight/2);
}
node[i].style.top = node[i].top +"px";
if(general.n.length==1) {
node[i].left = (node[general.mainnode].left-general.cwidth/2) + Math.sin(Math.PI*(a*(x+1)+general.start)/180)*(general.width/2-general.cwidth/2);
} else {
node[i].left = (node[general.mainnode].left-general.cwidth/2) + Math.sin(Math.PI*(a*x+general.start)/180)*(general.width/2-general.cwidth/2);
}
node[i].style.left = node[i].left+"px";
document.getElementById("network").appendChild(node[i]);
nodeTitle[i] = document.createElement("DIV");
nodeTitle[i].style.height = "20px";
nodeTitle[i].style.width = "80px";
nodeTitle[i].style.zIndex = "15";
nodeTitle[i].id = "netNodeTitle"+i;
nodeTitle[i].i = i;
nodeTitle[i].mainnode = general.mainnode;
nodeTitle[i].type = general.type;
nodeTitle[i].style.position = "absolute";
nodeTitle[i].top = node[i].top+general.cheight;
nodeTitle[i].style.top = nodeTitle[i].top +"px";
nodeTitle[i].left = node[i].left+15;
nodeTitle[i].style.left = nodeTitle[i].left+"px";
document.getElementById("network").appendChild(nodeTitle[i]);
}
if(general.parentID) {
connectNetwork(
i,
general.mainnode,
general.type,
node[general.mainnode].left+general.cwidth/2,
node[general.mainnode].top+general.cheight/2,
node[i].left+general.cwidth/2,
node[i].top+general.cwidth/2,
general.parentID,
dheight,
dwidth
);
} else {
connectNetwork(
i,
general.mainnode,
general.type,
node[general.mainnode].left+general.cwidth/2,
node[general.mainnode].top+general.cheight/2,
node[i].left+general.cwidth/2,
node[i].top+general.cheight/2,
0,
dheight,
dwidth
);
}
getElements(i);
var content = document.getElementById("content");
var nodeTitle = document.getElementById("title");
nodeTitle.innerHTML = content.titleShort;
if(general.parentID) {
node[i].parentID = general.parentID;
}
node[i].x = x;
node[i].mainnode = general.mainnode;
node[i].onclick = function() {
$("#div-child-"+this.mainnode).stop().animate();
$("#div-parent-"+this.mainnode).stop().animate();
$("#div-child-"+this.mainnode).animate({left:"1000px"},700);
$("#div-parent-"+this.mainnode).animate({left:"1000px"},700);
var i = this.i;
getElements(i);
var content = document.getElementById("content");
content.mainnode = this.mainnode;
setTimeout(function() {
showElements(content.i,content.mainnode,"navigation",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text)
}
, 710);
}
node[i].onmouseover = function() {
var i = this.i;
getElements(i);
var mainnode = this.mainnode;
var content = document.getElementById("content");
var nodeTitle = document.getElementById("title");
var nodeSummary = document.getElementById("summary");
nodeSummary.innerHTML = content.summary;
nodeTitle.innerHTML = content.titleLong;
this.style.backgroundColor = "blue";
}
node[i].onmouseout = function() {
var i = this.i;
getElements(i);
var mainnode = this.mainnode;
var content = document.getElementById("content");
var nodeTitle = document.getElementById("title");
var nodeSummary = document.getElementById("summary");
nodeSummary.innerHTML = "";
nodeTitle.innerHTML = content.titleShort;
this.style.backgroundColor = "black";
};
var content = document.getElementById("content");
getElements(i);
if(content.childs) {
var showChilds= "";
for(y=0;y<content.childs.length;y++) {
if(document.getElementById("netNode"+content.childs[y])) {
} else {
showChilds="yes";
}
}
if(showChilds == "yes") {
createNetwork({
n:content.childs,
height:80,
width:80,
start:70,
end:110,
mainnode:i,
type:"child",
top:node[i].top+general.cheight/2,
left:node[i].left+general.cwidth/2,
parentID:general.mainnode,
parent:"div-"+general.type+"-"+general.mainnode,
});
}
}
if(content.parents) {
var showParents= "";
for(y=0;y<content.parents.length;y++) {
if(document.getElementById("netNode"+content.parents[y])) {
} else {
showParents="yes";
}
}
if(showParents == "yes") {
createNetwork({
n:content.parents,
height:80,
width:80,
start:250,
end:290,
mainnode:i,
type:"parent",
top:node[i].top+general.cheight/2,
left:node[i].left+general.cwidth/2,
parentID:general.mainnode,
parent:"div-"+general.type+"-"+general.mainnode,
});
}
}
}
}
function connectNetwork(nodeID,mainnode,type,ax,ay,bx,by,parentID,dheight,dwidth) {
var m= (ay-by)/(bx-ax);
var length = Math.sqrt((ax-bx)*(ax-bx)+(by-ay)*(by-ay));
var ddiv = new Array();
var x=1;
var y=1;
if(ay-by<0) {
y=-1;
}
if(bx-ax<0) {
x=-1;
}
for(i=1;i<length+1;i++) {
ddiv[i] = document.createElement("DIV");
ddiv[i].style.backgroundColor = "grey";
ddiv[i].style.height = dheight+"px";
ddiv[i].style.width = dwidth+"px";
ddiv[i].style.zIndex = "1";
ddiv[i].style.borderRadius = "3px";
ddiv[i].id = "diag"+nodeID+i;
ddiv[i].className = "netNode"+mainnode+"-"+nodeID;
ddiv[i].style.position = "absolute";
ddiv[i].top = ay-y*i*Math.sqrt(1/(1+1/(m*m)))-dheight/2;
ddiv[i].left = ax+x*i*Math.sqrt(1/(1+m*m))-dwidth/2;
ddiv[i].style.top = ddiv[i].top +"px";
ddiv[i].style.left = ddiv[i].left +"px";
document.getElementById("network").appendChild(ddiv[i]);
}
}
</script>
