<%inherit file="main.html" />
<%namespace name='static' file='static_content.html'/>
<%block name="title"><title>${course.number} Textbook</title></%block>

<%block name="headextra">
<%static:css group='course'/>
<%static:js group='courseware'/>
</%block>

<%block name="js_extra">
  <script type="text/javascript" src="${static.url('js/jquery.treeview.js')}"></script>
<script>
var page=${ page };

$(document).ready(function(){
   if(!page) {
     cookie_page = $.cookie("book_page");
     if(cookie_page) {
       goto_page(cookie_page);
     }
   }
   $("#booknav").treeview({collapsed:true, unique:true/*, cookieId: "treeview-book-nav", persist: "cookie"*/});
});

function goto_page(n) {
  log_event("book", {"type":"gotopage","old":page,"new":n});
  page=n;
  var prefix = "";
  if(n<100) {
    prefix="0";
  }
  if(n<10) {
    prefix="00";
  }
  $("#bookpage").attr("src","${ book_url }p"+prefix+n+".png");
  $.cookie("book_page", n, {'expires':3650, 'path':'/'});
};

function prev_page() {
  var newpage=page-1;
  if(newpage< ${start_page}) newpage=${start_page};
  goto_page(newpage);
  log_event("book", {"type":"prevpage","new":page});
}

function next_page() {
  var newpage=page+1;
  if(newpage> ${end_page}) newpage=${end_page};
  goto_page(newpage);
  log_event("book", {"type":"nextpage","new":page});
}

$("#open_close_accordion a").click(function(){
  if ($(".book-wrapper").hasClass("closed")){
    $(".book-wrapper").removeClass("closed");
  } else {
    $(".book-wrapper").addClass("closed");
  }
});

</script>
</%block>

<%include file="/courseware/course_navigation.html" args="active_page='textbook/{0}'.format(book_index)" />

<section class="container">
  <div class="book-wrapper">

    <section aria-label="Textbook Navigation" class="book-sidebar">
      <header id="open_close_accordion">
        <a href="#">close</a>
      </header>

      <ul id="booknav" class="treeview-booknav">
          <%def name="print_entry(entry)">
              <li>
                  <a href="javascript:goto_page(${entry.get('page')})">
                      <span class="chapter">
                        %if entry.get('chapter'):
                          <span class="chapter-number">${entry.get('chapter')}.</span> ${entry.get('name')}
                        %else:
                          ${entry.get('name')}
                        %endif
                      </span>
                      <span class="page-number">${entry.get('page_label')}</span>
                  </a>
                  % if len(entry) > 0:
                      <ul>
                          % for child in entry:
                              ${print_entry(child)}
                          % endfor
                      </ul>
                  % endif
              </li>
          </%def>

          % for entry in table_of_contents:
            ${print_entry(entry)}
          % endfor
        
        ## Don't delete this empty list item. Without it, Jquery.TreeView won't
        ## render the last list item as expandable.
        <li></li> 
      </ul>
    </section>

    <section class="book">
      <section class="page">
        <nav>
          <ul>
            <li class="last">
              <a href="javascript:prev_page()">Previous page</a>
            </li>
            <li class="next">
              <a href="javascript:next_page()">Next page</a>
            </li>
          </ul>
        </nav>

        <img id="bookpage" src="${ book_url }p${ "%03i"%(page) }.png">
      </section>
    </section>
  </div>
</section>