Template:Team:Bonn:Network

From 2013.igem.org

(Difference between revisions)
 
(91 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<script>
<script>
-
   function test(node) {
+
        function showTile(id) {
 +
          $("#page-box-"+id+"-content").stop().fadeOut();
 +
          $("#page-box-"+id+"-content").stop().fadeIn();
 +
          $("#page-box-"+id+"-content").fadeIn(50);
 +
        }
 +
        function hideTile(id) {
 +
          $("#page-box-"+id+"-content").stop().fadeIn();
 +
          $("#page-box-"+id+"-content").stop().fadeOut();
 +
          $("#page-box-"+id+"-content").fadeOut(50);
 +
        }
 +
   function showNode(node) {
         var divContent = "subpage-middle";
         var divContent = "subpage-middle";
 +
        var mainContent = document.getElementById("content-page");
 +
        if(document.getElementById(divContent)) {
 +
 +
        } else {
 +
        mainContent.innerHTML = "<div id='networkTop' style='position:absolute;top:230px;height:220px;left:-10px;width:800px;z-index:1;'></div><div id='networkBottom' style='position:absolute;top:500px;left:-85px;height:800px;width:1100px;z-index:1;overflow:hidden;'></div><div id='subpage' style='z-index:2;position:relative;margin-top:385px;width=900px;'><div id='subpage-middle'>    <div>      <div style='float:right;display:inline; '>      <img src='https://static.igem.org/mediawiki/2013/a/a4/Bonn_sponsors_uniBonn.png' class='bottom-sponsor' height='50px' id='sponsor-unibonn' style='margin-right:10px;'>      <img src='https://static.igem.org/mediawiki/2013/7/79/Bonn_sponsors_limes.gif' class='bottom-sponsor' height='50px' id='sponsor-limes'>    </div>      <div class='subpage-head-link'><a href='javascript:history.back();'>Back</a></br> <span id='type'>Category: <span id='subpage-type'>Project</span></span></div>      <div id='subpage-title'></div>      <div id='subpage-summary'></div>        <div id='subpage-text'>        </div>      </div>    </div>  </div></div>";
 +
          initiateNetwork(1);
 +
        }
   var content =    document.getElementById(divContent);
   var content =    document.getElementById(divContent);
   getElements(node);
   getElements(node);
   showElements(node,node,"navigation",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text);
   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) {
Line 20: Line 29:
         var divSummary = "subpage-summary";
         var divSummary = "subpage-summary";
         var divText = "subpage-text";
         var divText = "subpage-text";
 +
        var divType = "subpage-type";
         var divnetworkBottom = "networkBottom";
         var divnetworkBottom = "networkBottom";
         var divnetworkTop = "networkTop";
         var divnetworkTop = "networkTop";
 +
        var divNetworkTitle = "networkTitle";
 +
        var divNetworkSummary = "networkSummary";
 +
        var mainContent = document.getElementById("content-page");
 +
        switch(action) {
 +
 +
        case "network":
         var content = document.getElementById(divContent);
         var content = document.getElementById(divContent);
-
        getElements(node);
+
            getElements(node);
         var contentTitle = document.getElementById(divTitle);
         var contentTitle = document.getElementById(divTitle);
         var contentSummary = document.getElementById(divSummary);
         var contentSummary = document.getElementById(divSummary);
         var contentText = document.getElementById(divText);
         var contentText = document.getElementById(divText);
-
         switch(action) {
+
         var contentType = document.getElementById(divType);
-
 
+
        var networkTitle = document.getElementById(divNetworkTitle);
-
         case divnetworkTop:
+
         var networkSummary = document.getElementById(divNetworkSummary);
                 if(document.getElementById(divnetworkTop)) {
                 if(document.getElementById(divnetworkTop)) {
                         var divs = document.getElementById(divnetworkTop);
                         var divs = document.getElementById(divnetworkTop);
                         divs.innerHTML = '';
                         divs.innerHTML = '';
                 }
                 }
-
                 contentTitle.innerHTML = titleLong;
+
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
-
                 contentSummary.innerHTML = summary;
+
                 contentSummary.innerHTML = "<span style=font-size:130%;font-weight:bold;>"+summary+"</span>";
                 contentText.innerHTML = text;
                 contentText.innerHTML = text;
 +
                contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
 +
                contentType.innerHTML = content.type;
                 if(parents.length) {
                 if(parents.length) {
                         createNetwork({
                         createNetwork({
                                 n:parents,
                                 n:parents,
-
                                 height:100,
+
                                 height:230,
-
                                 width:100,
+
                                 width:300,
                                 start:230,
                                 start:230,
                                 end:310,
                                 end:310,
                                 mainnode:node,
                                 mainnode:node,
                                 type:"parent",
                                 type:"parent",
-
                                 cheight:5,
+
                                 cheight:17,
-
                                 cwidth:5,
+
                                 cwidth:17,
-
                                 cradius:0
+
                                 cradius:17
                         });
                         });
Line 55: Line 73:
                         createNetwork({
                         createNetwork({
                                 n:childs,
                                 n:childs,
-
                                 height:100,
+
                                 height:230,
-
                                 width:100,
+
                                 width:300,
                                 start:50,
                                 start:50,
                                 end:130,
                                 end:130,
                                 mainnode:node,
                                 mainnode:node,
                                 type:"child",
                                 type:"child",
-
                                 cheight:5,
+
                                 cheight:17,
-
                                 cwidth:5,
+
                                 cwidth:17,
-
                                 cradius:0
+
                                 cradius:17
                         });
                         });
 +
                }
 +
                if(childs.length || parents.length) {
 +
                  var networkTitle = document.getElementById(divNetworkTitle);
 +
                  var networkSummary = document.getElementById(divNetworkSummary);
 +
                  networkSummary.innerHTML = summary;
 +
                  networkTitle.innerHTML = titleLong;
                 }
                 }
                 break;
                 break;
         case "navigation":
         case "navigation":
 +
        if(document.getElementById(divContent)) {
 +
 +
        } else {
 +
        mainContent.innerHTML = "<div id='networkTop' style='position:absolute;top:230px;height:220px;left:-10px;width:800px;z-index:1;'></div><div id='networkBottom' style='position:absolute;top:500px;left:-85px;height:800px;z-index:1;overflow:hidden;'></div><div id='subpage' style='z-index:2;position:relative;margin-top:385px;width=900px;'><div id='subpage-middle'>    <div>      <div style='float:right;display:inline; '>      <img src='https://static.igem.org/mediawiki/2013/a/a4/Bonn_sponsors_uniBonn.png' class='bottom-sponsor' height='50px' id='sponsor-unibonn' style='margin-right:10px;'>      <img src='https://static.igem.org/mediawiki/2013/7/79/Bonn_sponsors_limes.gif' class='bottom-sponsor' height='50px' id='sponsor-limes'>    </div>      <div class='subpage-head-link'><a href='javascript:history.back();'>Back</a></br> <span id='type'>Category: <span id='subpage-type'>Project</span></span></div>      <div id='subpage-title'></div>      <div id='subpage-summary'></div>        <div id='subpage-text'>        </div>      </div>    </div>  </div></div>";
 +
        }
 +
        var content = document.getElementById(divContent);
 +
        getElements(node);
 +
        var contentTitle = document.getElementById(divTitle);
 +
        var contentSummary = document.getElementById(divSummary);
 +
        var contentText = document.getElementById(divText);
 +
        var contentType = document.getElementById(divType);
 +
        var networkTitle = document.getElementById(divNetworkTitle);
 +
        var networkSummary = document.getElementById(divNetworkSummary);
                 if(document.getElementById(divnetworkBottom)) {
                 if(document.getElementById(divnetworkBottom)) {
                         var divs = document.getElementById(divnetworkBottom);
                         var divs = document.getElementById(divnetworkBottom);
                         divs.innerHTML = '';
                         divs.innerHTML = '';
                 }
                 }
-
                 contentTitle.innerHTML = titleLong;
+
                if(content.visited) {
-
                 contentSummary.innerHTML = summary;
+
                  for(a = 0;a < content.visited.length; a++) {
 +
                  }
 +
                  content.visited[a+1] = node;
 +
                } else {
 +
                    content.visited = new Array;
 +
                    content.visited[0];
 +
                  }
 +
               
 +
                 contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
 +
                 contentSummary.innerHTML = "<span style=font-size:130%;font-weight:bold;>"+summary+"</span>";
                 contentText.innerHTML = text;
                 contentText.innerHTML = text;
 +
                contentTitle.innerHTML = "<h1>"+titleLong+"</h1>";
 +
                contentType.innerHTML = content.type;
 +
                networkSummary.innerHTML = summary;
 +
                networkTitle.innerHTML = titleLong;
                 if(parents.length) {
                 if(parents.length) {
 +
                        var parentsStart = 260 - parents.length*3/2;
 +
                        var parentsEnd = 280 + parents.length*3/2;
                         circle({
                         circle({
                                 n:parents,
                                 n:parents,
-
                                 height:1000,
+
                                 height:1100,
-
                                 width:1000,
+
                                 width:1040,
-
                                 start:260,
+
                                 start:parentsStart,
-
                                 end:280,
+
                                 end:parentsEnd,
                                 mainnode:node,
                                 mainnode:node,
                                 type:"parent"
                                 type:"parent"
Line 89: Line 141:
                 }
                 }
                 if(childs.length) {
                 if(childs.length) {
 +
                        var childsStart = 80 - childs.length*3/2;
 +
                        var childsEnd = 100 + childs.length*3/2;
                         circle({
                         circle({
                                 n:childs,
                                 n:childs,
-
                                 height:1000,
+
                                 height:1100,
-
                                 width:1000,
+
                                 width:1040,
-
                                 start:80,
+
                                 start:childsStart,
-
                                 end:100,
+
                                 end:childsEnd,
                                 mainnode:node,
                                 mainnode:node,
                                 type:"child"
                                 type:"child"
Line 115: Line 169:
                 }
                 }
                 break;
                 break;
-
      }
+
              case "mainpage":
 +
                mainContent.innerHTML = "<style type='text/css'>.kachelheading{font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:-2px; bottom:-11px;}</style><div id='page-box1' style='margin: 20px auto 40px auto;width:800px;height:320px;'><img width='800px' style='margin-top:-60px' src='https://static.igem.org/mediawiki/2013/6/6d/Bonn_Licht_ist_geil_weiß.png'></div><div id='page-row1' class='page-row' style='width:800px;height:260px;margin:0 auto 0 auto;position:relative;'><div id='page-box-2' onclick=showNode(37) onmouseover=showTile(2) onmouseout=hideTile(2) class='page-box-width' style='float:left;margin:0 15px 0 0;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/c/cd/Bonn_Project.png'><p class='kachelheading'>project</p> <div id='page-box-2-content' class='page-box-width' style='background-color:black; float:left;opacity:0.9;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>We engineer a photoswitchable protein degradation system relying on the ClpXP protease system and a LOV domain from avena sativa</p><p class='kachelheading'>project</p> </div> </div> <div id='page-box-3' onmouseover=showTile(3)  onclick=showNode(200) onmouseout=hideTile(3) class='page-box-small' style='float:right;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/a/a0/Bonn_Safety.png'><p class='kachelheading'>safety</p> <div id='page-box-3-content' class='page-box-small' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Since safety is an important concern for any iGEM team, we gave deep thought to it. In this article our reflections about safety measures presented.</p><p class='kachelheading'>safety</p> </div> </div></div><div id='page-row2' class='page-row' style='width:800px;height:800px;position:relative;margin:20px auto 0 auto'> <div id='page-box-4'  onclick=showNode(2) onmouseover=showTile(4) onmouseout=hideTile(4) class='page-box-high' style='position:absolute;left:0px;top:0px;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/2/2c/Bonn_Background.png'><p class='kachelheading'>background</p> <div id='page-box-4-content' class='page-box-high' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-520px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Introduction to the concept of protein activity regulation</p><p class='kachelheading'>background</p> </div> </div> <div id='page-box-5'  onclick=showNode(100) onmouseover=showTile(5) onmouseout=hideTile(5) class='page-box-width' style='position:absolute;right:0px;top:0px;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/9/92/Bonn_HumanPractice.png'><p class='kachelheading'>Human Practice</p> <div id='page-box-5-content' class='page-box-width' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>The major goal in Human Practice is to make synthetic biology easily understandable and interesting for everybody. For that purpose our project's design follows the well-known franchise of Star Wars; our project name &quot;LOV WARS&quot; was born. The constant references to the Star Wars movies facilitate the access to synthetic biology to a person that is not familiar with the subject. With the most famous icon of Star Wars being the laser sword it offers a great opportunity to present our light induction system in an entertaining way. We put great effort into adapting every aspect of our public presence to Star Wars.</p><p class='kachelheading'>Human Practice</p> </div> </div> <div id='page-box-6'  onclick=showNode(131) onmouseover=showTile(6) onmouseout=hideTile(6) class='page-box-small' style='position:absolute;width:242px;height:242px;top:278px;left:278px;'><img width='242px'; src='https://static.igem.org/mediawiki/2013/f/fd/PictureGallaryNew.png'><p class='kachelheading'>picture gallery</p> <div id='page-box-6-content' class='page-box-small' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-242px;width:242px;height:242px'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Pictures from any Event hosted by our Team and many more</p><p class='kachelheading'>picture gallery</p> </div> </div> <div id='page-box-7'  onclick=showNode(111) onmouseover=showTile(7) onmouseout=hideTile(7) class='page-box-width' style='position:absolute;left:0px;bottom:0px;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/1/17/Bonn_Game.png'><p class='kachelheading'>game</p> <div id='page-box-7-content' class='page-box-width' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>Play our awesome lov-wars mini shooter.</p><p class='kachelheading'>game</p> </div> </div><div id='page-box-8' onmouseover=showTile(8) onmouseout=hideTile(8) class='page-box-high' style='position:absolute;right:0px;bottom:0px;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/f/f0/Bonn_Comic.png'><p class='kachelheading'>comic</p> <div id='page-box-8-content' class='page-box-high' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-520px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>We introduced a hand drawn comic series called &quot;LOV Wars&quot; about Obi-Wan E. Coli and his adventures in the Galaxy of Petri. Basic concepts of synthetic biology are explained along the way.</p><p class='kachelheading'>comic</p> </div></div></div><div id='page-row3' class='page-row' style='width:800px;height:260px;margin:20px auto 0 auto '> <div id='page-box-9' onmouseover=showTile(9) onmouseout=hideTile(9) class='page-box-small' style='float:left;margin:0 15px 0 0;'><img width='260px'; src='https://static.igem.org/mediawiki/2013/7/73/Bonn_Analysis.png'> <p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-7px;'>results</p> <div id='page-box-9-content' class='page-box-small' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'></p><p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-12px;'>results</p> </div> </div><div id='page-box-10' onmouseover=showTile(10) onmouseout=hideTile(10) class='page-box-width' style='float:right;'><img width='520px'; src='https://static.igem.org/mediawiki/2013/f/f5/Bonn_Team.png'><p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-7px;'>team</p> <div id='page-box-10-content' class='page-box-width' style='background-color:black; opacity:0.9;float:left;margin:0 15px 0 0;display:none;position:absolute; margin-top:-260px;'><p style='font-family:Century Gothic; padding:0px 8px 0 8px;font-size:16px;color:white;text-align:left;'>The Team - Presentation of all team members</p><p style='font-family:Century Gothic;font-size:35px;font-weight:bold;color:white;text-align:center; position:absolute;margin:0px; bottom:-12px;'>team</p></div> </div></div> </div> </div> </div> </div>";
-
  }
 
-
 
+
           break;
-
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 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;
 
-
        }
 
-
  z= general.n.length*general.n.length*2;
 
-
  general.width = general.width+z;
 
-
  general.height = general.height+z;
 
-
  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 = "blue";
 
-
      $(".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 = content.titleShort;
 
-
      this.style.backgroundColor = "black";
 
-
      $(".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*general.n.length)/4;
 
-
    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);
 
-
        }
 
-
      }
 
-
 
-
  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 = "white";
 
-
          node[i].style.height = general.cheight+"px";
 
-
          node[i].style.width = general.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)*(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(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 = "blue";
 
-
    }
 
-
    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 = content.titleShort;
 
-
      this.style.backgroundColor = "black";
 
-
    };
 
-
      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:100,
 
-
                        start:50,
 
-
                        end:130,
 
-
                        mainnode:i,
 
-
                        type:"child",
 
-
                        cheight:5,
 
-
                        cwidth:5,
 
-
                        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:100,
 
-
                start:230,
 
-
                end:310,
 
-
                mainnode:i,
 
-
                cheight:5,
 
-
                cwidth:5,
 
-
                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>

Latest revision as of 12:42, 27 October 2013

Retrieved from "http://2013.igem.org/Template:Team:Bonn:Network"