<%inherit file="main.html" />

<%block name="js_extra">
<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","${ settings.BOOK_URL }p"+prefix+n+".png");
  $.cookie("book_page", n, {'expires':3650, 'path':'/'});
};

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

function next_page() {
  var newpage=page+1;
  if(newpage>1008) newpage=1008;
  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="navigation.html" args="active_page='book'" />

<section class="main-content">
  <div class="book-wrapper">

    <section class="book-sidebar">
      <header id="open_close_accordion">
        <h2>Table of Contents</h2>
        <a href="#">close</a>
      </header>

      <ul id="booknav" class="treeview-booknav">
        <%include file="book_toc.html" />
      </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="${ settings.BOOK_URL }p${ "%03i"%(page) }.png">

        <nav class="bottom-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>
      </section>
    </section>
  </div>
</section>
