<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>SequenceServer: Custom BLAST Server</title>
  <meta name="author" content="Anurag Priyam">
  <meta name="author" content="Ben J. Woodcroft">
  <meta name="author" content="Vivek Rai">
  <meta name="author" content="Cedric Wurm">
  <meta name="author" content="Yannick Wurm">
  <meta name="description" content="Custom BLAST server provided by SequenceServer (http://www.sequenceserver.com)"/>

  <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
  <![endif]-->

  <link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  <% if settings.production? %>
    <link rel="stylesheet" media="screen,print" type="text/css" href="css/sequenceserver.min.css"/>
  <% else %>
    <link rel="stylesheet" media="screen,print" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" media="screen,print" type="text/css" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" media="screen,print" type="text/css" href="css/custom.css"/>
  <% end %>
</head>

<body>
  <div
    class="navbar">
    <div
      class="container">
      <a
        class="navbar-brand"
        href="http://sequenceserver.com" target="_blank">
        SequenceServer
        <small>
          BLAST searching made easy!
        </small>
      </a>
      <ul class="nav navbar-nav navbar-right hover-reset focus-reset">
        <li>
          <a
            target="_blank"
            href="http://www.sequenceserver.com/#support">
            <i class="fa fa-comment-o"></i>
            Help &amp; Support
          </a>
        </li>
      </ul>
    </div>
  </div>

  <div
    class="dnd-overlay"
    style="display: none;">
    <div
      class="container dnd-overlay-container">
      <div
        class="row">
        <div
          class="col-md-offset-2 col-md-10">
          <p
            class="dnd-overlay-drop"
            style="display: none;">
            <i class="fa fa-2x fa-file-o"></i>
            Drop query sequence file here
          </p>
          <p
            class="dnd-overlay-overwrite"
            style="display: none;">
            <i class="fa fa-2x fa-file-o"></i>
            <span style="color: red;">Overwrite</span> query sequence file
          </p>

          <div
            class="dnd-errors">
            <div
              class="dnd-error"
              id="dnd-multi-notification"
              style="display: none;">
              <div
                class="col-md-6 col-md-offset-3">
                One file at a time please.
              </div>
            </div>

            <div
              class="dnd-error"
              id="dnd-large-file-notification"
              style="display: none;">
              <div
                class="col-md-6 col-md-offset-3">
                Too big a file. Can only do less than 10 MB. &gt;_&lt;
              </div>
            </div>

            <div
              class="dnd-error"
              id="dnd-format-notification"
              style="display: none;">
              <div
                class="col-md-6 col-md-offset-3">
                Only FASTA files please.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div
    class="container">
    <noscript>
      <div
        class="nojs-error">
        <h3>SequenceServer can't work without JavaScript.</h3>
        <ul>
          <li>Please see if you can enable JavaScript in your browser's preferences.</li>
          <li>If your browser doesn't support JavaScript, please consider upgrading to the latest version or using Firefox or Chrome.</li>
        </ul>
      </div>
    </noscript>

    <form
      class="form-horizontal" id="blast"
      method="post" action="#result">
      <div
        class="form-group">
        <div
          class="col-md-12">
          <div
            class="sequence-controls hidden">
            <button
              type="button"
              class="btn btn-sm btn-default" id="btn-sequence-clear"
              title="Clear query sequence(s).">
              <span id="sequence-file"></span>
              <i class="fa fa-times"></i>
            </button>
          </div>
          <div
            class="sequence">
            <textarea
              class="form-control text-monospace" name="sequence" id="sequence"
              rows="10"
              autofocus="true"
              spellcheck="false"
              placeholder="Paste query sequence(s) or drag file containing query sequence(s) in FASTA format here ..." ></textarea>
          </div>
        </div>
      </div>

      <div
        class="notifications">
        <div
          class="notification"
          id="nucleotide-sequence-notification"
          style="display: none;">
          <div
            class="alert-info col-md-6 col-md-offset-3">
            Detected: nucleotide sequence(s).
          </div>
        </div>

        <div
          class="notification"
          id="protein-sequence-notification"
          style="display: none;">
          <div
            class="alert-info col-md-6 col-md-offset-3">
            Detected: protein sequence(s).
          </div>
        </div>

        <div
          class="notification"
          id="mixed-sequence-notification"
          style="display: none;">
          <div
            class="alert-danger col-md-10 col-md-offset-1">
            Detected: mixed nucleotide and protein sequences. We can't handle that. Please try one sequence at a time.
          </div>
        </div>

      </div>

      <div
        class="form-group databases-container">
        <%# sort => same ordering of nucleotide and protein datbases %>
        <% databases.keys.sort.each do |type| %>
          <div
            class="<%= databases[(databases.keys - [type]).first] ? 'col-md-6' : 'col-md-12' %>">
            <div
              class="panel panel-default">
              <div
                class="panel-heading">
                <h4><%= type.capitalize %> databases</h4>
              </div>
              <ul
                class="list-group databases <%= type %>">
                <% databases[type].sort_by(&:title).each do |database| %>
                  <li class="list-group-item">
                    <div
                      class="checkbox">
                      <label>
                        <input type="checkbox" name="databases[]" value="<%=database.id%>" data-type="<%=database.type%>" />
                        <%= database.title or database.name %>
                      </label>
                    </div>
                  </li>
                <% end %>
              </ul>
            </div>
          </div>
        <% end %>
      </div>

      <div
        class="form-group">
        <div
          class="col-md-8">
          <div
            class="form-group advanced">
            <label
              class="col-md-3 control-label"
              for="advanced">
              Advanced Parameters:
            </label>
            <div
              class="col-md-9">
              <div
                class="input-group">
                <input
                  type="text"
                  class="form-control" name="advanced" id="advanced"
                  title="View, and enter advanced parameters."
                  placeholder="eg: -evalue 1.0e-5 -num_alignments 100"/>
                  <div class="input-group-addon cursor-pointer" data-toggle="modal" data-toggle="modal" data-target="#help">
                    <i class="fa fa-question"></i>
                  </div>
              </div>
            </div>
          </div>
        </div>

        <div
          class="col-md-4">
          <div
            class="btn-group btn-block" id="methods">
            <button
              type="submit"
              id="method" class="btn btn-primary col-md-12">
              blast
            </button>
          </div>
        </div>
      </div>
    </form>

    <div
      class="result" id="result"
      style="display: none;">
    </div>
  </div> <!-- /container -->

  <div
    class="footer" id="footer">
    <hr>
    <p
      class="text-center">
      <a
        href='http://www.sequenceserver.com'>
        <%=
          quote = [
            "Custom BLAST web interface by SequenceServer.",
            "SequenceServer: Local BLAST with bespoke html interface.",
            "Set up custom BLAST interface with SequenceServer.",
            "Easy BLASTing with SequenceServer."
          ][rand(4)]
        %>
      </a>
      <a
        class="twitter-share-button"
        href="https://twitter.com/share"
        data-url="http://www.sequenceserver.com" data-text="<%= quote %>" data-via="yeban" data-hashtags="bioinformatics">
        Tweet
      </a>
      <%#<div class="g-plusone" data-annotation="none" data-href="http://www.sequenceserver.com"></div>%>

      <br>
      Please Cite:
      <a href='http://www.sequenceserver.com'>
        Priyam, Woodcroft, Rai & Wurm, <strong>SequenceServer</strong> (<em>in prep</em>)</a>
      </a>
      &amp; relevant data sources.
    </p>
  </div>

  <div
    id="error"
    class="modal fade"
    tabindex="-1">
  </div> <!-- error -->

  <div
    class="modal fade" id="error-no-response">
    <div
      class="modal-dialog">
      <div
        class="modal-content">
        <div
          class="modal-header">
          <h3>Server didn't respond</h3>
        </div>

        <div
          class="modal-body">
          <p>
            Could be a temporary network issue, or the service might be
            configured to "time out" long requests.
          </p>

          <p>
            Please try again
            later, or report to the admin or <a
              href="https://groups.google.com/forum/?fromgroups#!forum/sequenceserver">SequenceServer
              Google Group</a> (if you are the admin) if problem persists.
          </p>
        </div>

        <div
          class="modal-footer">
          <button
            type="button"
            class="btn btn-danger"
            data-dismiss="modal">
            Okay
          </button>
        </div>
      </div>
    </div>
  </div> <!-- error-no-response -->

  <div
    class="modal fade" id="help"
    tabindex="-1">
    <div
      class="modal-dialog modal-lg">
      <div
        class="modal-content">
        <div
          class="modal-header">
          <h3>Advanced Options</h3>
        </div>
        <div
          class="modal-body">
          <%= erb :_options %>
        </div>
        <div
          class="modal-footer">
          <button
            type="button"
            class="btn btn-default btn-primary"
            data-dismiss="modal">
            Got it!
          </button>
        </div>
      </div>
    </div>
  </div> <!-- advanced options -->

  <div
    class="modal" id="spinner"
    tabindex="-1"
    data-backdrop="static" data-keyboard="false">
    <div
      class="modal-dialog">
      <div
        class="modal-content">
        <div
          class="modal-body text-center">
          <h2>
            BLAST-ing ...
          </h2>
          <i class="fa fa-spinner fa-5x fa-spin"></i>
          <p>
            <br>
            This could take some time depending on the size of your query and
            database(s).
          </p>
        </div>
      </div>
    </div>
  </div> <!-- spinner -->

  <div
    id="sequence-viewer" class="modal"
    tabindex=-1>
    <div
      class="modal-dialog">
      <div
        class="modal-content">
        <div
          class="modal-header">
          <h3>View and download sequence</h3>
        </div>

        <div
          class="modal-body">
        </div>

        <div
          class="spinner">
          <i class="fa fa-spinner fa-3x fa-spin"></i>
        </div>

        <div
          class="modal-footer">
        </div>
      </div>
    </div>
  </div> <!-- sequence viewing -->

  <!-- JS -->
  <% if settings.production? %>
    <script src="js/sequenceserver.min.js"></script>
  <% else %>
    <script type="text/javascript" src="js/underscore.min.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/webshims/polyfiller.js"></script>
    <script type="text/javascript" src="js/d3.v3.min.js"></script>
    <script type="text/javascript" src="js/sequenceserver.js"></script>
    <script type="text/javascript" src="js/sequenceserver.blast.js"></script>
    <script type="text/javascript" src="js/jquery.t.js"></script>
    <script type="text/javascript" src="js/sequence.js"></script>
  <% end %>

  <!-- twitter -->
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html>