<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">
<!-- <script src="https://code.jquery.com/jquery-2.1.4.js"></script> -->
<!--  <h1>A Language that implies the truth of the ways we are all connected</h1> -->
<h1> A Language That Reveals All The Ways Us and The World Are Connected</h1>

 <div id="cyto">

  </div>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.4.4/cytoscape.min.js"></script> -->

body {
  background: #fcfcfc;
  font-family: 'Oswald', sans-serif;
  color: #444;
  font-size: 16px;
  border: 5px solid #444;
  width: 90%;
  height: 450px;
   margin-left: auto;
  margin-right: auto; 
/*   text-align: center; */
  
}

.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

/* trying to figure out how to center horizintally and vertically */
.thing {
/* position: absolute;
  margin-top: auto;
  margin-bottom: auto; */
}

h1 {
  font-size: 260%;
  line-height: 1.2em;
  text-align: center;
}

#cyto{
  width:100%; 
 height:300px;
  z-index:1;
}
/* #cyto{
	  height: 100%;
  width: 100%;
  position: absolute;
  // left: 0;
  top: 25%;
    // display: block;
    font-family: 'Work Sans', sans-serif !important;

} */

//init the graph
document.addEventListener('DOMContentLoaded', function() {
      cy = cytoscape({
             container: document.getElementById('cyto'),
        // layout: { name: 'cose'},
        layout: { 
          name: 'breadthfirst',
    directed: true,
              roots: '#WORDS',

        },
          
        
  boxSelectionEnabled: false,
  autounselectify: true,

          style: cytoscape.stylesheet()
        .selector('node')
      .css({
         // 'content': 'data(id)',
        'width': '10px',
        'height': '10px',
        'content': 'data(id)',
        'text-align': 'center',
        'color': '#5F2137',
        // 'text-outline-width': 2,
        'background-color': '#EEBB00',
        'z-index': 1,
          'font-family': 'Work Sans',
          'font-size': '16px'
        // 'text-outline-color': '#999'
      })
    .selector('edge')
      .css({
          'width': .7,
        'curve-style': 'bezier',
        'target-arrow-shape': 'triangle',
        'target-arrow-color': 'rgba(95, 33, 55, .4)',
        'line-color': '#5F2137',
        'z-index': -1
      
      })
 .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      }),

  elements: [
          {
            group: 'nodes',
            data : {id : 'WORDS'}
          },{
            group: 'nodes',
            data : {id : 'REALITY'}
          },
{
            group: 'nodes',
            data : {id : 'THE WORLD'}
          },

          {
            group: 'nodes',
            data : {id : 'PEOPLE'}
          },

          {
            group: 'nodes',
            data : {id : 'ME'}
          },
          {
            group: 'edges',
            data : {
              id : 'edge1',
              source: 'PEOPLE',
              target: 'WORDS'
            }
          },

          {
            group: 'edges',
            data : {
              id : 'edge2',
              source: 'PEOPLE',
              target: 'REALITY'
            }
          },
          {
            group: 'edges',
            data : {
              id : 'edge3',
              source: 'ME',
              target: 'WORDS'
            }
          },
          {
            group: 'edges',
            data : {
              id : 'edge4',
              source: 'WORDS',
              target: 'THE WORLD'
            }
          },
           {
            group: 'edges',
            data : {
              id : 'edge',
              source: 'THE WORLD',
              target: 'ME'
            }
          },
           {
            group: 'edges',
            data : {
              id : 'edge6',
              source: 'PEOPLE',
              target: 'THE WORLD'
            }
          },
           {
            group: 'edges',
            data : {
              id : 'edge7',
              source: 'ME',
              target: 'THE WORLD'
            }
          },

              {
            group: 'edges',
            data : {
              id : 'edge8',
              source: 'WORDS',
              target: 'REALITY'
            }
          },
          {
            group: 'edges',
            data : {
              id : 'edge9',
              source: 'PEOPLE',
              target: 'ME'
            }
            },
    {
            group: 'edges',
            data : {
              id : 'edge10',
              source: 'REALITY',
              target: 'ME'
            }
            },
    
             {
            group: 'edges',
            data : {
              id : 'edge9',
              source: 'ME',
              target: 'REALITY'
            }
          }
        ],
      
ready: function(){
          window.cy = this;
          }
      }); 
    }, false);



document.getElementById('controls').addEventListener("click", function(e) {
  if(e.target.nodeName.toLowerCase() === "input") {
    cy.layout({ name: e.target.value });    
  }
});

cy.on('tap', 'node', function(e){
  var node = e.cyTarget; 
  var neighborhood = node.neighborhood().add(node);
  
  cy.elements().addClass('faded');
  neighborhood.removeClass('faded');
});

cy.on('tap', function(e){
  if( e.cyTarget === cy ){
    cy.elements().removeClass('faded');
  }
  var bfs = cy.elements().bfs('#WORDS', function(){}, true);

var i = 0;
var highlightNextEle = function(){
  if( i < bfs.path.length ){
    bfs.path[i].addClass('highlighted');
  
    i++;
    setTimeout(highlightNextEle, 1000);
  }
};

// kick off first highlight
highlightNextEle();
});