<link href="https://fonts.googleapis.com/css?family=Work+Sans:800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,700" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.4.4/cytoscape.min.js"></script>

<div id = "container">
  <div id = "controlPanel">
     <div id = "title">
  MLK's Constellation of Concern
    </div>
  <div class = "instructions">
   
    <p> Click and drag nodes to manipulate shape</p>

    <p>Two-finger swipe to zoom in and out</p>
<!--     <p> Change enitre formation by choosing one of the built in options -->
    </p>
</div>
  <div id="controls">
    <input type="radio"  value="breadthfirst" id="breadthfirst">  <label for="breadthfirst"><span></span>Breadthfirst</label>

  <input type="radio"  value="grid" id="grid"> 
     <label for="grid"><span></span>Grid</label>
    <br><br>

  <input type="radio"  value="cose" id="cose">  <label for="cose"><span></span>Cose</label>

    <input type="radio" value="concentric" id="concentric">  <label for="concentric"><span></span>Concentric</label>
  </div>  
   </div>  
 <div id="cyto">
 
  </div>
    <!--       this should be an interface js once I figure it out or find a better solution -->
<!--     <div class = "instructions"> -->

  
    </div>

  

body {
  font-family: 'Oswald', sans-serif;
  font-size: 21px;
  color:  #d22042;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/chalkboard.jpg");
}

#container{
  display: grid;
  width: 100vw;
  grid-template-rows: 20vw 80vw;
  height: 100vh;
}

#controlPanel{
  grid-row: 1/1;
/*   border: solid 2px #fff; */
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 45% 20% 30%;
}

.instructions {
  color: white;
/*   padding: .5em; */
}

#title{
   font-family: "Work Sans", sans-serif;
  font-size: 2.2em;
  color:  #d22042;
  width: 65%;
  line-height: .9em;
 
}


p {
   font-family: "Work Sans", sans-serif;
  color: rgba(249, 218, 120, 1);
  font-size: 80%;
  font-weight: 200;
}

#controls {
  color: @yellow;
/* width: 15vw; */

}


#cyto {
/*   border: solid 2px red; */
  font-family: "Work Sans", sans-serif !important;
  font-size: 90%;
}




/* input[type="radio"] {
     display:inline-block;
  transform: scale(2);
  padding: 3.9em;
    
 width: 50%;
}  */


input[type="radio"] {
    display:none;
}

input[type="radio"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
}

input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -38px top no-repeat;
    cursor:pointer;
}

input[type="radio"]:checked + label span {
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -57px top no-repeat;
}

//init the graph
document.addEventListener('DOMContentLoaded', function() {
      cy = cytoscape({
             container: document.getElementById('cyto'),
        layout: { name: 'cose'},
  boxSelectionEnabled: false,
  autounselectify: true,

          style: cytoscape.stylesheet()
        .selector('node')
      .css({
         // 'content': 'data(id)',
        'width': '5px',
        'height': '5px',
        'content': 'data(id)',
        'text-align': 'center',
        // 'color': '#fffff8',
         'color': '#D22042',
        // 'text-outline-width': 2,
        'background-color': '#D22042',
        'z-index': 1,
          'font-family': 'Work Sans',
          'font-size': '9px'
        // 'text-outline-color': '#999'
      })
    .selector('edge')
      .css({
          'width': .9,
        'curve-style': 'bezier',
        // 'target-arrow-shape': 'triangle',
        'target-arrow-color': 'rgba(95, 33, 55, .4)',
        'line-color': 'rgb(249, 218, 120)',
        '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 : 'TRUTH'}
          },{
            group: 'nodes',
            data : {id : 'JUSTICE'}
          },
{
            group: 'nodes',
            data : {id : 'BROTHERHOOD'}
          },

          // {
          //   group: 'nodes',
          //   data : {id : 'CONCERNS'}
          // },

          {
            group: 'nodes',
            data : {id : 'A BETTER WORLD'}
          },
          {
            group: 'edges',
            data : {
              id : 'edge1',
              source: 'JUSTICE',
              target: 'TRUTH'
            }
          },

          {
            group: 'edges',
            data : {
              id : 'edge2',
              source: 'JUSTICE',
              target: 'A BETTER WORLD'
            }
          },
          {
            group: 'edges',
            data : {
              id : 'edge3',
              source: 'A BETTER WORLD',
              target: 'BROTHERHOOD'
            }
          },
         
           {
            group: 'edges',
            data : {
              id : 'edge',
              source: 'TRUTH',
              target: 'BROTHERHOOD'
            }
          },
           {
            group: 'edges',
            data : {
              id : 'edge6',
              source: 'TRUTH',
              target: 'A BETTER WORLD'
            }
          },
           {
            group: 'edges',
            data : {
              id : 'edge7',
              source: 'BROTHERHOOD',
              target: 'JUSTICE'
            }
          }

             
        ],
      
ready: function(){
  
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');
  }
});
          window.cy = this;
          }
      }); 
    }, false);