{% extends "basic/layout.html" %}

{% set script_files = script_files + [
    '_static/jquery-ui-1.10.3.custom.min.js',
    '_static/jquery-fix.js',
    '_static/bootstrap-3.0.0/js/bootstrap.min.js',
    '_static/bootstrap-sphinx.js',
    '_static/waypoints.min.js',
    '_static/rangy-core.js',
    '_static/rangy-textrange.js',
    '_static/rangy-cssclassapplier.js',
    '_static/user-highlights.js',
    '_static/jquery.idle-timer.js',
    '_static/processing-1.4.1.min.js',
    '_static/jquery.hotkey.js'
  ]
%}

{% set css_files = ['_static/bootstrap-3.0.0/css/bootstrap.min.css'] + css_files %}
{% if theme_bootswatch_theme %}
  {% set css_files = css_files +
    ['http://netdna.bootstrapcdn.com/bootswatch/2.3.1/' + theme_bootswatch_theme + '/bootstrap.min.css']
  %}
{% endif %}

{% set css_files = css_files + [
    '_static/jquery-ui-1.10.3.custom.min.css',
    '_static/bootstrap-sphinx.css',
    '_static/user-highlights.css',
    '_static/runestone-custom-sphinx-bootstrap.css',
  ]
%}

{%- block doctype -%}
<!DOCTYPE html>
{%- endblock %}

{# Sidebar: Rework into our Boostrap nav section. #}
{% macro navBar() %}

<!-- Begin navbar -->
<div id="navbar" class="navbar navbar-default navbar-fixed-top" role="navigation">

  <div class="container">

    <div class="navbar-header">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <button type='button' class='navbar-toggle' data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div>
        <a class="brand-logo" style='background: transparent url("{{pathto('_static/img/aapssfc_logo.png', 1)}}") no-repeat 0px 0px;' href="/{{appname}}/default/user/login">&nbsp; </a>
        <a class="navbar-brand" href="{{ pathto(master_doc) }}">{% if theme_navbar_title -%}{{ theme_navbar_title|e }}{%- else -%}{{ project|e }}{%- endif -%}</a>
      </div>
    </div>

    <div class="navbar-collapse collapse navbar-ex1-collapse">

      <ul class="nav navbar-nav navbar-right">

        <li class="divider-vertical"></li>

        <!-- social media dropdown -->
        <li class="dropdown">
          <a class="dropdown-toggle" href="#" data-toggle="dropdown">
            <i class="glyphicon glyphicon-share-alt" style="opacity: 0.9"></i>
          </a>
          <ul class="dropdown-menu social-menu">
              <li>
                <div>
                  <b>Runestone in social media:</b>
                </div>
                <a href="https://twitter.com/iRunestone" class="twitter-follow-button" data-show-count="true">Follow @iRunestone</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 class="fb-like" data-href="https://www.facebook.com/RunestoneInteractive" data-send="false" data-layout="button_count" data-width="300" data-show-faces="false" data-font="arial"></div>
              </li>

              <li class="divider"></li>
              <li>
                <div>
                  <b>Help support us:</b>
                </div>
                <div class="gittip">
                  <iframe style="border:0;"
                    src="https://www.gittip.com/bnmnetp/widget.html"
                    width="48pt" height="22pt" class="gittip-button">
                  </iframe>
                </div>
              </li>
          </ul>
        </li>
        <!-- end social media dropdown -->

        <li class="divider-vertical"></li>

        <!-- search dropdown -->
        <li class="dropdown">
          <a class="dropdown-toggle" href="#" data-toggle="dropdown">
            <i class="glyphicon glyphicon-search" style='opacity:0.9;'></i>
          </a>
          <ul class='dropdown-menu'>
            {% if 'overview' in course_id: %}
                <li><a href='/{{appname}}/static/{{course_id}}/overview.html'>Table of Contents</a></li>
            {% else: %}
                <li><a href='{{ pathto(master_doc) }}'>Table of Contents</a></li>
            {% endif %}
            <li><a href='/{{appname}}/static/{{course_id}}/genindex.html'>Book Index</a></li>
            <li class="divider"></li>
            <li id="scratch_ac_link"><a href="javascript:toggleScratchActivecode()">Scratch ActiveCode</a></li>
            <li class="divider"></li>
            <li style="width: 240px;">
              <form class="navbar-search" style="margin:10px;" action="{{ pathto('search') }}" method="get">
                <div class="input-group">
                  <input type="text" class="form-control" name="q" placeholder="Search this book" />
                  <span class="input-group-btn">
                    <button class="btn btn-primary" style="margin:0;" type="submit">
                      <i class="glyphicon glyphicon-search"></i>
                    </button>
                  </span>
                </div><!-- /input-group -->
                <input type="hidden" name="check_keywords" value="yes" />
                <input type="hidden" name="area" value="default" />
              </form>
            </li>
          </ul>
        </li>
        <!-- end search dropdown -->

        <li class="divider-vertical"></li>

        <!-- user account dropdown -->
        <li class="dropdown">
          <a class="dropdown-toggle" href="#" data-toggle="dropdown">
            <i class="glyphicon glyphicon-user" style="opacity:0.9;"></i>
          </a>
          <ul class="dropdown-menu user-menu">
            <li><span class='loggedinuser'></span></li>
            <li class="divider"></li>
            <li><a href='{{course_url}}/{{appname}}/admin/index'>Instructor's Page</a></li>
            <li class="divider"></li>
            <li><a href="{{course_url}}/{{appname}}/default/user/profile" id="profilelink">Edit Profile</a></li>
            <li><a href="{{course_url}}/{{appname}}/default/user/change_password" id="passwordlink">Change Password</a></li>
            <li><a href="{{course_url}}/{{appname}}/default/user/register" id="registerlink">Register</a></li>
            <li class='loginout'><a href='#'>Login</a></li> <!-- correct link populated by addNavbarLoginLink() -->
          </ul>
        </li>
        <!-- end user account dropdown -->

        <li class="divider-vertical"></li>

        <!-- help menu dropdown -->
        <li class="dropdown">
          <a class="dropdown-toggle" href="#" data-toggle="dropdown">
            <i class="glyphicon glyphicon-question-sign" style="opacity:0.9;"></i>
          </a>
          <ul class="dropdown-menu user-menu">
            <li><a href='/{{appname}}/static/{{course_id}}/navhelp.html'>Navigation Help</a></li>
            <li><a href='/{{appname}}/static/overview/instructor.html'>Help for Instructors</a></li>            
            <li class="divider"></li>
            <li><a href='http://runestoneinteractive.org'>About Runestone</a></li>
            <li><a href='https://github.com/bnmnetp/runestone/issues/new'>Report A Problem</a></li>
          </ul>
        </li>
        <!-- end help menu dropdown -->

        <li class="divider-vertical"></li>

      </ul>

      <ul class="nav navbar-nav">
        <li class="divider-vertical"></li>
        {% block sidebartoc %}
          {% include "localtoc.html" %}
          <li class="divider-vertical"></li>
        {% endblock %}
        {% block sidebarrel %}
          {% include "relations.html" %}
        {% endblock %}
        {% if theme_source_link_position == "nav" %}
          <li>{% include "sourcelink.html" %}</li>
        {% endif %}
      </ul>

    </div>
  </div>
</div>
{% endmacro %}

{%- block extrahead %}
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<script type="text/javascript">
  eBookConfig = {};
  eBookConfig.host = '{{course_url}}' ? '{{course_url}}' : 'http://127.0.0.1:8000';
  eBookConfig.app = eBookConfig.host+'/{{appname}}';
  eBookConfig.ajaxURL = eBookConfig.app+'/ajax/';
  eBookConfig.course = '{{course_id}}';
  eBookConfig.logLevel = {{loglevel}};
  eBookConfig.loginRequired = {{login_required}}
  eBookConfig.build_info = "{{build_info}}";
  eBookConfig.isLoggedIn = false;
</script>

<div id="fb-root"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&status=0";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

{% endblock %}

{# Silence the sidebar's, relbar's #}
{% block header %}{% endblock %}
{% block sidebar1 %}{% endblock %}
{% block sidebar2 %}{% endblock %}
{% block relbar1 %}{% endblock %}
{% block relbar2 %}{% endblock %}
{% block sidebarsourcelink %}{% endblock %}

{%- block content %}
{{ navBar() }}

<div class="container">
  {% block body %}{% endblock %}
</div>
{%- endblock %}

{%- block footer %}
<footer class="footer">
  <div class="container">
    <p class="pull-right">
      <span id='numuserspan'></span> readers online now | <span class='loggedinuser'></span> | <a href="#">Back to top</a>
      {% if theme_source_link_position == "footer" %}
        <br />
        {% include "sourcelink.html" %}
      {% endif %}
    </p>
    <p>
    {%- if show_copyright %}
      {%- if hasdoc('copyright') %}
        {% trans path=pathto('copyright'), copyright=copyright|e %}&copy; <a href="{{ path }}">Copyright</a> {{ copyright }}.{% endtrans %}
      {%- else %}
        {% trans copyright=copyright|e %}&copy; Copyright {{ copyright }}.{% endtrans %}
      {%- endif %}
    {%- endif %}
    {%- if last_updated %}
      {% trans last_updated=last_updated|e %}Last updated on {{ last_updated }}.{% endtrans %}<br/>
    {%- endif %}
    {%- if show_sphinx %}
      {% trans sphinx_version=sphinx_version|e %}Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> {{ sphinx_version }}.{% endtrans %}
    {%- endif %}
    </p>
  </div>
</footer>

<script type="text/javascript" charset="utf-8">
    $(document).ready(addUserToFooter);
    $(document).ready(addNavbarLoginLink);
    $(document).ready(createEditors);
    $(document).ready(getNumUsers);
    $(document).ready(getOnlineUsers);
    $(document).ready(createScratchActivecode());
    $(document).ready(styleUnittestResults());
</script>

<script type="text/javascript">
  // add the video play button overlay image
  $(".video-play-overlay").each(function() {
    $(this).css('background-image', "url(\'{{pathto('_static/play_overlay_icon.png', 1)}}\')")
    });

  // This function is needed to allow the dropdown search bar to work;
  // The default behaviour is that the dropdown menu closes when something in
  // it (like the search bar) is clicked
  $(function() {
    // Fix input element click problem
    $('.dropdown input, .dropdown label').click(function(e) {
      e.stopPropagation();
      });
  });

  // style codelens buttons (doing it here because PyTutor is a submodule owned by someone else
  $(function() {
    $(".ExecutionVisualizer").each(function() {
      $(this).find("#jmpFirstInstr").addClass('btn btn-default');
      $(this).find("#jmpStepBack").addClass('btn btn-danger');
      $(this).find("#jmpStepFwd").addClass('btn btn-success');
      $(this).find("#jmpLastInstr").addClass('btn btn-default');
      });
  });

</script>

{% if appname == "runestone" %}
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-32029811-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
{% endif %}

{% endblock %}
