|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | <script> | | <script> |
| - | function test(node) {
| |
| - | var divContent = "subpage-middle";
| |
| - | var content = document.getElementById(divContent);
| |
| - | getElements(node);
| |
| - | showElements(node,node,"navigation",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text);
| |
| - | }
| |
| - | function initiateNetwork(node) {
| |
| - | var divnetworkBottom = "networkBottom";
| |
| - | var divnetworkTop = "networkTop";
| |
| - | var divContent = "subpage-middle";
| |
| - | var content = document.getElementById(divContent);
| |
| - | getElements(node);
| |
| - | showElements(node,node,divnetworkTop,content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text);
| |
| - | }
| |
| | function showElements(node,mainnode,action,parents,childs,titleShort,titleLong,summary,text) { | | function showElements(node,mainnode,action,parents,childs,titleShort,titleLong,summary,text) { |
| | var divContent = "subpage-middle"; | | var divContent = "subpage-middle"; |
| Line 119: |
Line 105: |
| | } | | } |
| | | | |
| - |
| |
| - | function circle(general) {
| |
| - | var divnetworkBottom = "networkBottom";
| |
| - | var divnetworkTop = "networkTop";
| |
| - | var divContent = "subpage-middle";
| |
| - | var divTitle = "subpage-title";
| |
| - | var divSummary = "subpage-summary";
| |
| - | var divText = "subpage-text";
| |
| - | var genheight = parseInt(document.getElementById(divnetworkBottom).style.height);
| |
| - | var genwidth = parseInt(document.getElementById(divnetworkBottom).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(divnetworkBottom).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("nodedivparent-"+general.mainnode).appendChild(div);
| |
| - | } else {
| |
| - | document.getElementById(divnetworkBottom).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 = "white";
| |
| - | 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(divContent);
| |
| - | 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() {
| |
| - | $("#divchild-"+this.mainnode).stop().animate();
| |
| - | $("#divchild-"+this.mainnode).animate({left:"3000px"},700);
| |
| - | $("#divparent-"+this.mainnode).stop().animate();
| |
| - | $("#divparent-"+this.mainnode).animate({left:"3000px"},700);
| |
| - | var i = this.i;
| |
| - | getElements(i);
| |
| - | var content = document.getElementById(divContent);
| |
| - | content.mainnode = this.mainnode;
| |
| - | setTimeout(function() {
| |
| - | var content = document.getElementById(divContent);
| |
| - | 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(divContent);
| |
| - | 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) {
| |
| - | if(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(divContent);
| |
| - | 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") {
| |
| - | if( 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(divContent);
| |
| - | 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:5,
| |
| - | cheight:5
| |
| - | });
| |
| - | }
| |
| - | }
| |
| - | }
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | function connect(nodeID,mainnode,type,ax,ay,bx,by,parentID,dheight,dwidth) {
| |
| - | var divContent = "subpage-middle";
| |
| - | var divTitle = "subpage-title";
| |
| - | var divSummary = "subpage-summary";
| |
| - | var divText = "subpage-text";
| |
| - | var divnetworkBottom = "networkBottom";
| |
| - | var divnetworkTop = "networkTop";
| |
| - | 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 divContent = "subpage-middle";
| |
| - | var divTitle = "subpage-title";
| |
| - | var divSummary = "subpage-summary";
| |
| - | var divText = "subpage-text";
| |
| - | var divnetworkBottom = "networkBottom";
| |
| - | var divnetworkTop = "networkTop";
| |
| - | var content = document.getElementById(divContent);
| |
| - | var genheight = parseInt(document.getElementById(divnetworkTop).style.height);
| |
| - | var genwidth = parseInt(document.getElementById(divnetworkTop).style.width);
| |
| - | if(general.cheight) {
| |
| - | cheight=general.cheight;
| |
| - | } else{
| |
| - | general.cheight = 10;
| |
| - | }
| |
| - | if(general.cwidth){
| |
| - | cwidth=general.cwidth;
| |
| - | } else{
| |
| - | general.cwidth = 10;
| |
| - | }
| |
| - | if(general.childs){
| |
| - | var nodeChilds = general.childs;
| |
| - | }
| |
| - | if(general.parents){
| |
| - | var nodeParents = general.parents;
| |
| - | }
| |
| - | if(general.cradius = 0) {
| |
| - | var cradius = general.cradius;
| |
| - | } else {
| |
| - | var cradius = 10;
| |
| - | }
| |
| - | var dheight = 1;
| |
| - | var dwidth = 1;
| |
| - | 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 = divTitle;
| |
| - | title.style.position = "absolute";
| |
| - | title.top = 20;
| |
| - | title.right = 0;
| |
| - | title.style.top = title.top + "px";
| |
| - | title.style.right = title.right + "px";
| |
| - | document.getElementById(divnetworkTop).appendChild(title);
| |
| - |
| |
| - | var summary = document.createElement("DIV");
| |
| - | summary.style.height = "200px";
| |
| - | summary.style.width = "150px";
| |
| - | summary.id = divSummary;
| |
| - | 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(divnetworkTop).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 = "white";
| |
| - | node[general.mainnode].style.height = general.cheight+"px";
| |
| - | node[general.mainnode].style.width = general.cwidth+"px";
| |
| - | node[general.mainnode].style.borderRadius = "0px";
| |
| - | 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(divnetworkTop).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(divnetworkTop).appendChild(nodeTitle[general.mainnode]);
| |
| - |
| |
| - | node[general.mainnode].onclick = function() {
| |
| - | $("#divchild-"+this.mainnode).stop().animate();
| |
| - | $("#divparent-"+this.mainnode).stop().animate();
| |
| - | $("#divchild-"+this.mainnode).animate({left:"1000px"},700);
| |
| - | $("#divparent-"+this.mainnode).animate({left:"1000px"},700);
| |
| - | var i = this.i;
| |
| - | getElements(i);
| |
| - | var content = document.getElementById(divContent);
| |
| - | content.mainnode = i;
| |
| - | setTimeout(function() {
| |
| - | var content = document.getElementById(divContent);
| |
| - | 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(divContent);
| |
| - | var nodeTitle = document.getElementById(divTitle);
| |
| - | var nodeSummary = document.getElementById(divSummary);
| |
| - | nodeSummary.innerHTML = content.summary;
| |
| - | nodeTitle.innerHTML = content.titleLong;
| |
| - | this.style.backgroundColor = "black";
| |
| - | $(".netNode-"+this.mainnode+"-"+this.i).css({"width":"3px","height":"3px"});
| |
| - | if(general.mainnode) {
| |
| - | if(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(divContent);
| |
| - | var nodeTitle = document.getElementById(divTitle);
| |
| - | var nodeSummary = document.getElementById(divSummary);
| |
| - | nodeSummary.innerHTML = "";
| |
| - | nodeTitle.innerHTML = "";
| |
| - | this.style.backgroundColor = "white";
| |
| - | $(".netNode-"+this.mainnode+"-"+this.i).css({"width":"1px","height":"1px"});
| |
| - | if(general.mainnode != "0") {
| |
| - | if(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;
| |
| - | }
| |
| - | }
| |
| - | var z = (general.n.length*6);
| |
| - | general.start = general.start-z;
| |
| - | general.end = general.end+z;
| |
| - | 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);
| |
| - | }
| |
| - | }
| |
| - | var height = new Array;
| |
| - | var width = new Array;
| |
| - | var cheight;
| |
| - | var cwidth;
| |
| - | 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("netNode"+i);
| |
| - | } else{
| |
| - |
| |
| - | getElements(i);
| |
| - | if(content.childs.length ==0) {
| |
| - | height = general.height/2;
| |
| - | width = general.width/4;
| |
| - | cheight = 5;
| |
| - | cwidth = 5;
| |
| - | } else {
| |
| - | cheight = 9;
| |
| - | cwidth = 9;
| |
| - | if(content.childs.length < 5) {
| |
| - | height = general.height/4 *content.childs.length;
| |
| - | width = general.width/4 * content.childs.length;
| |
| - | } else {
| |
| - | height = general.height;
| |
| - | width = general.width;
| |
| - | }
| |
| - | }
| |
| - | node[i] = document.createElement("DIV");
| |
| - | node[i].style.backgroundColor = "white";
| |
| - | node[i].style.height = cheight+"px";
| |
| - | node[i].style.width = cwidth+"px";
| |
| - | node[i].style.borderRadius = "0px";
| |
| - | 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)*(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)*(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)*(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)*(width/2-general.cwidth/2);
| |
| - |
| |
| - | }
| |
| - | node[i].style.left = node[i].left+"px";
| |
| - | document.getElementById(divnetworkTop).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(divnetworkTop).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(divContent);
| |
| - | var nodeTitle = document.getElementById(divTitle);
| |
| - | 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() {
| |
| - | $("#divchild-"+this.mainnode).stop().animate();
| |
| - | $("#divparent-"+this.mainnode).stop().animate();
| |
| - | $("#divchild-"+this.mainnode).animate({left:"1000px"},700);
| |
| - | $("#divparent-"+this.mainnode).animate({left:"1000px"},700);
| |
| - | var i = this.i;
| |
| - | getElements(i);
| |
| - | var content = document.getElementById(divContent);
| |
| - | 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(divContent);
| |
| - | var nodeTitle = document.getElementById(divTitle);
| |
| - | var nodeSummary = document.getElementById(divSummary);
| |
| - | nodeSummary.innerHTML = content.summary;
| |
| - | nodeTitle.innerHTML = content.titleLong;
| |
| - | this.style.backgroundColor = "black";
| |
| - | }
| |
| - | node[i].onmouseout = function() {
| |
| - | var i = this.i;
| |
| - | getElements(i);
| |
| - | var mainnode = this.mainnode;
| |
| - | var content = document.getElementById(divContent);
| |
| - | var nodeTitle = document.getElementById(divTitle);
| |
| - | var nodeSummary = document.getElementById(divSummary);
| |
| - | nodeSummary.innerHTML = "";
| |
| - | nodeTitle.innerHTML = "";
| |
| - | this.style.backgroundColor = "white";
| |
| - | };
| |
| - | var content = document.getElementById(divContent);
| |
| - | 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:100,
| |
| - | width:400,
| |
| - | start:50,
| |
| - | end:130,
| |
| - | mainnode:i,
| |
| - | type:"child",
| |
| - | cheight:6,
| |
| - | cwidth:6,
| |
| - | top:node[i].top+general.cheight/2,
| |
| - | left:node[i].left+general.cwidth/2,
| |
| - | parentID:general.mainnode,
| |
| - | parent:"div"+general.type+"-"+general.mainnode,
| |
| - | cradius:0
| |
| - | });
| |
| - | }
| |
| - | }
| |
| - | 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:100,
| |
| - | width:400,
| |
| - | start:230,
| |
| - | end:310,
| |
| - | mainnode:i,
| |
| - | cheight:6,
| |
| - | cwidth:6,
| |
| - | 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,
| |
| - | cradius:0
| |
| - | });
| |
| - | }
| |
| - | }
| |
| - | }
| |
| - | }
| |
| - |
| |
| - |
| |
| - | function connectNetwork(nodeID,mainnode,type,ax,ay,bx,by,parentID,dheight,dwidth) {
| |
| - | var divContent = "subpage-middle";
| |
| - | var divTitle = "subpage-title";
| |
| - | var divSummary = "subpage-summary";
| |
| - | var divText = "subpage-text";
| |
| - | var divnetworkBottom = "networkBottom";
| |
| - | var divnetworkTop = "networkTop";
| |
| - | 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(divnetworkTop).appendChild(ddiv[i]);
| |
| - | }
| |
| - |
| |
| - | }
| |
| | </script> | | </script> |
| | </html> | | </html> |
"
