<!doctype html>
<html>
<head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script>
    <title>Network | Basic usage</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF8">

    <script type="text/javascript" src="./js/FileSaver.min.js"></script>
    <script type="text/javascript" src="./js/vis.js"></script>
    <link href="./css/vis.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="./data/FP7_ICT.js"></script>

  <style type="text/css">
    #mynetwork {
        width: 100%;
        height: 90%;
        background-color:#222222;
        border:1px solid #333333;
    }

    body{
        background-color:#222222;
        width: 100%;
        height: 100%;
    }

    html {
        width: 100%;
        height: 100%;
    }

    #controls {
    /*background-color: #3ea349;*/
    }

    #FILENAME {
        color: #ffffff;
    }

    div.container {
        display:inline-flex;
    }

    div.year {
        float:left;
        width:150px;
        height:25px;
        background-color: #80baff;
        border: 2px solid #1e357e;
        font-size:20px;
        line-height:25px;
        text-align: center;
        margin-right:10px;
        margin-top:5px;
        margin-bottom:5px;
    }

    div.year.selected {
        background-color: #91ff88;
        border: 2px solid #297d21;
        font-size:22px;
        font-weight:bold;
    }

    select.selectBox {
        width:400px;
    }

    div.type {
        float:left;
        width:200px;
        height:25px;
        background-color: #80baff;
        border: 2px solid #1e357e;
        font-size:20px;
        line-height:25px;
        text-align: center;
        margin-right:10px;
        margin-bottom:5px;
    }
    div.type.selected {
        background-color: #91ff88;
        border: 2px solid #297d21;
    }

      div.label{
          display:inline-block;
          width:200px;
          font-size:15px;
          color:#ffffff;
      }

      div.debug {
          display:none;
      }
  </style>
</head>

<body>
<div class="debug">
    <input type="button" value="100 steps" onclick="doSteps(100);">
    <input type="button" value="500 steps" onclick="doSteps(500);">
    <input type="button" value="1000 steps" onclick="doSteps(1000);">
    <input type="button" value="5000 steps" onclick="doSteps(5000);">
    <input type="button" value="unfreeze" onclick="network.setFreezeSimulation(false);">
    <input type="button" value="download" onclick="download();">
    <input type="button" value="next" onclick="next();">
    <span id="FILENAME">filename here</span>
</div>
<div id="controls">
    <div id="yearContainer" class="container"></div> <br />
    <div id="typeContainer" class="container">
        <div class="type" onclick="selectType('funding');">
            size by funding
        </div>
        <div class="type selected" onclick="selectType('connections');">
            size by connectivity
        </div>
    </div>
    <div id="projectContainer">
        <div class="label">Select a project to view: </div><select id="projectsDropdown" class="selectBox" onchange="selectProject(this)"></select>
    </div>
    <div id="companyContainer">
        <div class="label">Select a company to highlight:</div><select id="companyDropdown" class="selectBox" onchange="selectCompany(this)"></select>
    </div>
    <input type="button" value="Center galaxy" onclick="highlightConnections({nodes:[]}); network.zoomExtent({duration:0});">
    <input type="button" value="View all neighbours" onclick="viewAllNeighbours();">
</div>
<div id="mynetwork"></div>

<script type="text/javascript" src="js/init_view.js"></script>
</body>
</html>