<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700" rel="stylesheet">

<div class="container">




  <div id="controlPanel">
    <div class = "controls">

    <h2> Experiment with different layouts </h2>

    <input type="radio" name="layout" value="breadthfirst" class="myRadio" id="breadthfirst"> Breadthfirst

    <input type="radio" name="layout" value="grid" class="myRadio" id="grid"> Grid<br><br>

    <input type="radio" name="layout" value="cose" class="myRadio" id="cose"> Cose

    <input type="radio" name="layout" value="concentric" class="myRadio" id="concentric"> Concentric
  </div>
  </div>
    
  <!-- fin control panel -->

  <div id = "instructions">
    <h1>Interactive Diagram</h1>
     <p>
<!--       try clicking and dragging around the canvas and nodes</p> -->
  </div>

  <!--   canvas -->
  <div id="cyto">

  </div>
</div>
<!-- fin -->

/*SETUP*/

html {
box-sizing: border-box;

}
*,
*:before,
*:after {
box-sizing: inherit;
}

body {
background: #f4f4f4;
color:#444;
font-family:"Oswald";
font-weight:700;
font-size: 16px;
margin: 0;
padding:0;
}


.container {
  display: grid;
/*   border: 2px blue solid; */
height: 95vh;
padding: 3vh;
width: 100vw;
/*   row/column */
/* grid-template: repeat(8, 1fr) / repeat(6, 1fr); */
grid-template: 25vh 65vh/ repeat(3, 1fr);
  grid-gap: 1.5em;

}


/* canvas */
#cyto{
	 
/*   border: solid .5em #444; */
/*   background: #F0CEA0; */
 grid-row: 2/ span 1;
  grid-column: 1/ span 6;
}
#controlPanel{
/*   border: solid .1em #444; */
  grid-row: 1/ span 1;
  grid-column: 2/ span 2;

}

#instructions{
/*   border: solid .1em #444; */
  grid-row: 1/ span 1;
  grid-column: 1/ span 1;
}
label{
/*   display: block; */
}

h1{
  margin: 0;
  padding:0;
  line-height: .9em;
  font-size: 550%;
/*   width: 25%; */
  letter-spacing: -.05em;
  text-transform: uppercase;
  font-weight: 700;
}
h2{
  line-height: .9em;
}

p{
/*   font-size: 60%; */
  font-weight: 300;
}
/* Input style */

.controls{
  width: 73%;
/*   height: 65%; */
  margin:auto;
/*   padding: 2.3em; */
}
.myRadio{
   -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
/*   position: relative; */
  height: 1.4em;
  width: 1.4em;
  transition: all 0.15s ease-out 0s;
  background: #444;
  border: none;
  color: #444;
  cursor: pointer;
  outline: none;
  z-index: 1000;
}


.myRadio:hover {
  background: #444;
}
.myRadio:checked {
  background: #FFFFFF;
}
.myRadio:checked::before {

  // content: '✔';
  content: '*';
  color: #f4f4f4;

}
.myRadio:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}
.myRadio {
  border-radius: 50%;
}
.myRadio::after {
  border-radius: 50%;
}

//init the graph
$(document).ready(function() {
// document.addEventListener('DOMContentLoaded', function() {
  
    $('#cyto').attr( "title", "try clicking and dragging around the canvas and nodes" );
  
  
  tippy('#cyto')
  
      cy = cytoscape({
             container: document.getElementById('cyto'),
        layout: { name: 'cose'},
  boxSelectionEnabled: false,
  autounselectify: true,

          style: cytoscape.stylesheet()
        
 // style for the nodes
        .selector('node')
      .css({
        'width': '1em',
        'height': '1em',
        'content': 'data(id)',
        'text-align': 'center',
        'color': '#2D3F50',
        // 'text-outline-width': 2,
        // 'background-color': '#591528',
        'background-color': '#C13E3E',
        
        
        'z-index': 1,
          'font-family': 'Oswald',
          // 'font-size': '12px',
        // 'text-outline-color ': '#fafafa'
      })
        
// style for the connecting lines
    .selector('edge')
      .css({
          'width': .5,
        'curve-style': 'bezier',
        'target-arrow-shape': 'triangle',
        'target-arrow-color': '#F3A712',
        'line-color': '#F0CEA0',
        // 'line-color': '#C40E0E',
        
        '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
      }),
        
        
 // creating the elements themselves
 
// should this be moved to a json file

  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 : 'edge9',
              source: 'WORDS',
              target: 'REALITY'
            }
          },
          {
            group: 'edges',
            data : {
              id : 'edge5',
              source: 'REALITY',
              target: 'ME'
            }
          }
        ],
      
ready: function(){
          window.cy = this;
  // set controls for radio buttons
document.getElementById('controlPanel').addEventListener("click", function(e) {
  if(e.target.nodeName.toLowerCase() === "input") {
    cy.layout({ name: e.target.value });    
  }
});

// set behavior for when nodes are clicked to make active
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');
  }
});
          }
        
        
      }); // end cytoscape
  
    }, false);