<link rel="stylesheet" type="text/css" href="/css/bars.css" />
<div id="main" class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1 id="home-page"><a href="{{home_link}}"><span class="logo-word">InPhO</span> Topic Explorer</a></h1>
      <!--<h2 class="title non-null"></h2>-->
      <h2 class="text-center">
        {{#corpus_link}}<a href="{{corpus_link}}">{{corpus_name}}</a>{{/corpus_link}} 
        {{^corpus_link}}{{corpus_name}}{{/corpus_link}} <br />
        <small><a id="aboutLink" href="#about">About this corpus <span class="glyphicon glyphicon-arrow-down"></span></a></small><br />
        <small>Click ? button at bottom left for help with the topic explorer interface.</small></h2>
        <div style="text-align: center">
            <h2><button type="button" class="btn btn-lg btn-primary" style="text-align: center" id="tour-button">Getting Started</button></h2>
        </div>
      </div>
    </div>
  <div class="row">
  
  <br>
  <div class="col-xs-12">

  
  <form method="GET" class="form-horizontal" id="searchForm">
      <input type="hidden" name="doc" id="hidden_id">
      <script>
        $('#autocompleteDoc').tooltip({title: 'Toggle Word/Document Search', placement: 'bottom'});
      </script>
    <div class="form-group" id="visualize_button">

      <label for="doc" class="col-sm-2 control-label" id="search-label">Focal document</label>
      <div class="col-sm-8">
        <div class="input-group">
          <input type="text" id="doc" class="typeahead form-control" placeholder="Click button on right to select random document →" autocomplete="off">
          <!-- TODO: find out why this can't be a <button> --> 
          <div disabled class="btn btn-default input-group-addon hide" type="button" id="autocompleteDoc"><span class="glyphicon glyphicon-font"></span></div>
          <div class="btn btn-default input-group-addon" type="button" id="randomDoc"><span class="glyphicon glyphicon-random"></span></div>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="btn-group" id="tutorial">
          <button type="submit" id="submit" class="btn btn-default" >Visualize</a></button>
          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
          <ul class="dropdown-menu">
            {{#topic_range}}
            <li><a href="javascript:visualize({{.}})">{{.}} Topics</a></li>
            {{/topic_range}}
          </ul>
        </div>
      </div>
    </div>
    <div style="text-align:center">
      <p id="focalDoc" style="font-weight:bold"></p>
    </div>
    <div class="form-group">
      <div class="col-lg-offset-4 col-lg-4 col-md-offset-2 col-md-8">
        <button class="btn btn-default form-control topdoc" disabled id="topicBtn" type="button">Click on bar segment to sort results by that topic.</button>
      </div>
    </div>
    <!--
    <div class="pull-right">
      <a href="https://twitter.com/share" class="twitter-share-button pull-right" data-text="InPhO Topic Explorer" data-via="JaimieMurdock" data-size="large" data-hashtags="dighum" data-counturl="inphodata.cogs.indiana.edu">Tweet</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    </div>
    -->
  </form>

  </div>
  </div>
  <div class="non-null" id="status" style="width:100%">
    <div class="progress">
      <div class="bar progress-bar progress-bar-striped progress-bar-info" style="width:25%">
        Loading documents...
      </div>
    </div>
  </div>
</div>

<div id="chart"> </div>

<div id="about">
  <div class="col-xs-8 col-xs-offset-2">
    <h2>About this corpus<br />
    <a href="#top"><small>Back to top <span class="glyphicon glyphicon-arrow-up"> </span></small></a></h2>
    <div id="aboutText">

    </div>
    <h2><br /></h2>
    <h2 class="back"><a href="#top"><small>Back to top <span class="glyphicon glyphicon-arrow-up"> </span></small></a></h2>
  </div>
</div>
    
<div class="modal fade" tabindex="-1" role="dialog" id="fingerprintModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title">Document search</h3>
      </div>
      <div class="modal-body">
        <form class="form-horizontal col-sm-12">
          <div class="form-group">
            <div class="input-group">
              <input type="hidden" name="doc" id="hidden_id">
              <input type="text" id="doc" class="form-control typeahead" placeholder="Click button on right to select random document →" autocomplete="off">
              <div class="input-group-btn">
                <button class="btn btn-default" type="button" data-original-title="" title=""><span class="glyphicon glyphicon-random"></span></button>
              </div>
            </div>
          </div>
        </form>
        <hr />
        <h4><img src="/img/icon-fingerprint.png" alt="Fingerprint icon" /> Topic Fingerprint </h4>
        <p>The topic bars below show the composition of the selected document in different models. Scroll over the bars to see the most likely words in each topic. Click on a bar to open the Topic Explorer for that model focused on this document.</p>
        <div id="loading" class="text-center">
          <button class="btn btn-lg btn-info">
            <span class="glyphicon glyphicon-refresh spinning"></span> Loading...    
          </button>
        </div>
        <div id="topicBars">
          <dl id="singleBarsDl"  class="dl-horizontal">
          </dl>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="/bootstrap-tour.js"></script>
<script src="/topicprint.js"></script>
<script src="/tour.js"></script>
    
