{{template "header.html" .S}}

<ul class="pager">
{{if .Prev}}
  <li class="previous">
    <a href="{{.Prev}}">&larr; Prev</a>
  </li>
{{end}}
  <li class="">
    <a href="{{.Back}}">Back</a>
  </li>
{{if .Next}}
  <li class="next">
    <a href="{{.Next}}">Next &rarr;</a>
  </li>
{{end}}
</ul>

<div class="row">
<div class="span4">
{{range .Chapters}}
{{range .Out}}
</ul>
{{end}}
{{range .In}}
<ul id="bookMenu" class="nav nav-list hidden-phone">
{{end}}
	<li {{if .Active}}class="active"{{end}}><a href="{{.Link}}">{{.Label}}</a></li>
{{end}}
{{if .Chapters}}
</ul>
{{end}}
</div>

<div class="span8">
<script type="text/javascript">
function resizeIframe() {
	var contentHeight = $("#bookContent").contents().find("html").height();
	var menuHeight =  $("#bookMenu").height();
	if (contentHeight < menuHeight) {
		$("#bookContent").height(menuHeight);
	} else {
		$("#bookContent").height(contentHeight);
	}
}
</script>
<iframe id="bookContent" onload="resizeIframe();" style="width: 100%; border: none;" scrolling="no" src="{{.Content}}" seamless="seamless"></iframe>
</div>
</div>

<ul class="pager">
{{if .Prev}}
  <li class="previous">
    <a href="{{.Prev}}">&larr; Prev</a>
  </li>
{{end}}
  <li class="">
    <a href="{{.Back}}">Back</a>
  </li>
{{if .Next}}
  <li class="next">
    <a href="{{.Next}}">Next &rarr;</a>
  </li>
{{end}}
</ul>

{{template "footer.html"}}