<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1" name="viewport"/>
  <title>
   Satyrn
  </title>
  <link href="../static/css/jquery-ui.css" rel="stylesheet"/>
  <link href="../static/css/index_style.css" rel="stylesheet"/>
  <link href="../static/css/gh-buttons.css" rel="stylesheet"/>
  <link href="../static/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="../static/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
  <link href="../static/css/font.css" rel="stylesheet"/>
  <link href="../static/icon.png" rel="icon" type="image/png"/>
 </head>
 <body id="idx_body">
  <script src="../static/js/panzoom.min.js">
  </script>
  <script src="../static/js/jquery-1.12.4.js">
  </script>
  <script src="../static/js/jquery-ui.js">
  </script>
  <script src="../static/codemirror/lib/codemirror.js">
  </script>
  <script src="../static/js/python.js">
  </script>
  <script src="../static/js/markdown.js">
  </script>
  <script src="../static/js/jquery.hotkeys.js">
  </script>
  <script src="../static/js/satyrn_backend.js">
  </script>
  <input accept=".SATX, .satx, .TXT, .txt" id="file-input" name="name" style="display: none;" type="file"/>
  <div class="title-bar">
   <div style="width: 25%; display: inline-block;">
    <img height="50%" src="../static/cover.png" width="50%"/>
   </div>
   <div style="display: inline-block; margin-top: 25px;/* font-family: halvar-engschrift-normal-extra-thin-normal;*/">
    <p id="graph_name_p" style="color: white; border-color: #19ceda; border-width: 2px; background-color: transparent; resize: none;">
     Untitled.SATX
    </p>
   </div>
   <div style="display: inline-block; margin-left: 20px; margin-top: 20px; float: right;">
    <button class="shutdown" style="border-radius: 5px;">
     <i aria-hidden="true" class="fa fa-power-off">
     </i>
    </button>
   </div>
   <div style="display: inline-block; margin-top: 25px; float: right;">
    <p id="connected_p" style="color: white; border-color: #19ceda; border-width: 2px; background-color: transparent; resize: none;">
     Connected
    </p>
   </div>
   <div style="display: inline-block; margin-top: 25px; margin-right: 25px; float: right;">
    <p id="version" style="color: white; border-color: #19ceda; border-width: 2px; background-color: transparent; resize: none;">
     0.9.6
    </p>
   </div>
  </div>
  <nav style="border-radius: 10px;">
   <ul class="main-menu">
    <li>
     <a id="file_dropdown_a">
      File
      <i class="fa fa-caret-down">
      </i>
     </a>
     <ul class="sub-menu">
      <li>
       <a action="new_graph" id="new_graph_a">
        New Graph
       </a>
      </li>
      <li>
       <a action="load_graph" id="load_graph_a">
        Load Graph
       </a>
      </li>
      <li>
       <a action="save_graph_as" id="save_graph_as_a" title="ctrl+s">
        Save Graph as...
       </a>
      </li>
      <li>
       <a action="save_as_py" id="save_as_py_a">
        Save as .py
       </a>
      </li>
      <li>
       <a action="close_halt_graph" id="close_and_halt_a">
        Close and Halt
       </a>
      </li>
     </ul>
    </li>
    <li>
     <a id="edit_dropdown_a">
      Edit
      <i class="fa fa-caret-down">
      </i>
     </a>
     <ul class="sub-menu">
      <li>
       <a action="create_cell" id="create_cell_a">
        Create Cell
       </a>
      </li>
      <li>
       <a action="dupe_cell" id="dupe_cell_a" title="ctrl+d">
        Duplicate Cell
       </a>
      </li>
      <li>
       <a action="delete_cell" id="delete_cell_a" title="ctrl+backspace">
        Delete Cell
       </a>
      </li>
     </ul>
    </li>
    <li>
     <a id="cell_dropdown_a">
      Cell
      <i class="fa fa-caret-down">
      </i>
     </a>
     <ul class="sub-menu">
      <li>
       <a action="run_all" id="run_all_a" title="ctrl+q">
        Run All
       </a>
      </li>
      <li>
       <a action="run_cell" id="run_cell_a" title="ctrl+return">
        Run Cell
       </a>
      </li>
      <li>
       <a action="set_as_md" id="set_as_md_a">
        Set as Markdown
       </a>
      </li>
      <li>
       <a action="set_as_py" id="set_as_py_a">
        Set as Python
       </a>
      </li>
     </ul>
    </li>
    <li>
     <a id="kernel_dropdown_a">
      Kernel
      <i class="fa fa-caret-down">
      </i>
     </a>
     <ul class="sub-menu">
      <li>
       <a action="interrupt" id="interrupt_a" title="ctrl+c">
        Interrupt
       </a>
      </li>
      <li>
       <a action="reset_runtime" id="reset_runtime_a">
        Reset Runtime
       </a>
      </li>
      <li>
       <a action="clear_dco" id="clear_dco_a">
        Clear Output
       </a>
      </li>
      <li>
       <a action="reset_graph" id="reset_graph_a">
        Reset Graph
       </a>
      </li>
      <li>
       <a action="reset_run_all" id="reset_run_all_a">
        Reset &amp; Run All
       </a>
      </li>
      <li>
       <a action="shutdown" id="shutdown_a">
        Shutdown
       </a>
      </li>
     </ul>
    </li>
    <li>
     <a id="help_dropdown_a">
      Help
      <i class="fa fa-caret-down">
      </i>
     </a>
     <ul class="sub-menu">
      <li>
       <a href="https://github.com/CharlesAverill/satyrn" id="github_repo_a" target="_blank">
        GitHub Repository
       </a>
      </li>
      <li>
       <a href="https://satyrn.readthedocs.io" id="docs_a" target="_blank">
        Documentation
       </a>
      </li>
      <!--
      <li>
       <a action="tour">
        Tour
       </a>
      </li>
      <li>
       <a action="keyboard_shortcuts">
        Keyboard Shortcuts
       </a>
      </li>
      <li>
       <a action="video_tutorial">
        Video Tutorial
       </a>
      </li>
      -->
     </ul>
    </li>
   </ul>
   <div>
    <i aria-hidden="true" class="fa fa-refresh fa-spin" disabled="" id="execution_status">
    </i>
   </div>
  </nav>
  <div id="toolbar">
   <ul class="button-group">
    <li>
     <a action="save" class="button pill" title="save graph">
      <i aria-hidden="true" class="fa fa-floppy-o">
      </i>
     </a>
    </li>
    <li>
     <a action="run_cell" class="button pill" title="run selected cell">
      <i aria-hidden="true" class="fa fa-step-forward">
      </i>
     </a>
    </li>
    <li>
     <a action="run_all" class="button pill" title="run graph">
      <i aria-hidden="true" class="fa fa-fast-forward">
      </i>
     </a>
    </li>
    <li>
     <a action="interrupt" class="button pill" title="interrupt kernel">
      <i aria-hidden="true" class="fa fa-stop">
      </i>
     </a>
    </li>
    <li>
     <a action="reset_runtime" class="button pill" title="reset runtime">
      <i aria-hidden="true" class="fa fa-undo fa-flip-horizontal">
      </i>
     </a>
    </li>
    <li>
     <a action="reset_run_all" class="button pill" title="reset runtime and grun graph">
      <i aria-hidden="true" class="fa fa-undo fa-flip-horizontal">
      </i>
      <i aria-hidden="true" class="fa fa-fast-forward">
      </i>
     </a>
    </li>
   </ul>
  </div>
  <div>
   <iframe allowtransparency="false" frameborder="0" height="1000" id="canvas" name="targetframe" scrolling="yes" src="canvas.html" style="border-radius: 10px; width: 75%;">
   </iframe>
   <textarea frameborder="0" id="dynamic_code_output" readonly="" spellcheck="false" style="height: 994px; width: 24.1%; border-radius: 10px; cursor: text;"></textarea>
  </div>
  <script>
   window.onload = function() {
   on_page_load();
  }
  </script>
 </body>
</html>