first pass at chapter navigation

lms/templates/static_htmlbook.html

 <%inherit file="main.html" />
 <%namespace name='static' file='static_content.html'/>
-<%block name="title">
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>${course.number} Textbook</title>
+<%block name="title"><title>${course.number} Textbook</title>
 </%block>
 
 <%block name="headextra">
@@ -13,6 +10,85 @@
 
 <%block name="js_extra">
   <script type="text/javascript">
+(function($) {
+    $.fn.myHTMLViewer = function(options) {
+        var urlToLoad = null;
+        if (options.url) {
+            urlToLoad = options.url;
+        }
+        var chapterUrls = null;
+        if (options.chapters) {
+            chapterUrls = options.chapters;
+        }
+        var chapterToLoad = 1;
+        if (options.chapterNum) {
+            // TODO: this should only be specified if there are 
+            // chapters, and it should be in-bounds.
+            chapterToLoad = options.chapterNum;
+        }
+        var anchorToLoad = null;
+
+        loadUrlAsIframe = function htmlViewLoadUrlAsIframe(url, anchorId) {
+            if (anchorId != null) {
+                var newurl = url + "#" + anchorId;
+                $("#bookpage").src = newurl;
+            } else {
+                // $("#bookpage").src = url;
+                // $("#bookpage").append("<iframe seamless id="bookpage-iframe" src=" + url + "\"></iframe>")
+                parentElement = document.getElementById('bookpage');
+                while (parentElement.hasChildNodes())
+                    parentElement.removeChild(parentElement.lastChild);
+
+                $('<iframe id="bookpage-iframe" src="' + url + '"></iframe>"')
+                    // .css({'height':'40px','width':'200px'})
+                    .appendTo('#bookpage');
+            }
+        }; 
+
+        loadUrl = function htmlViewLoadUrl(url, anchorId) {
+            var newurl = url;
+            if (anchorId != null) {
+                newurl = url + "#" + anchorId;
+            } 
+            // clear out previous load, if any:
+            parentElement = document.getElementById('bookpage');
+            while (parentElement.hasChildNodes())
+                parentElement.removeChild(parentElement.lastChild);
+
+            $('#bookpage').load(newurl);
+
+        }; 
+
+        loadChapterUrl = function htmlViewLoadChapterUrl(chapterNum, anchorId) {
+            if (chapterNum < 1 || chapterNum > chapterUrls.length) {
+                return;
+            }
+            var chapterUrl = chapterUrls[chapterNum-1];
+            loadUrl(chapterUrl, anchorId);
+        };
+
+        // define navigation links for chapters:  
+        if (chapterUrls != null) {
+            var loadChapterUrlHelper = function(i) {
+                return function(event) {
+                    // when opening a new chapter, always open to the top:
+                    loadChapterUrl(i, null);
+                };
+            };
+            for (var index = 1; index <= chapterUrls.length; index += 1) {
+                $("#htmlchapter-" + index).click(loadChapterUrlHelper(index));
+            }   
+        }
+
+        // finally, load the appropriate url/page
+        if (urlToLoad != null) {
+            loadUrl(urlToLoad, anchorToLoad);
+        } else {
+            loadChapterUrl(chapterToLoad, anchorToLoad);
+        }       
+
+    }
+})(jQuery);
 
     $(document).ready(function() {
         var options = {};
@@ -29,10 +105,8 @@
         %if chapter is not None:
             options.chapterNum = ${chapter};
         %endif
-        %if page is not None:
-            options.pageNum = ${page};
-        %endif
 
+        $('#outerContainer').myHTMLViewer(options);
     });
   </script>  
 </%block>
@@ -43,29 +117,29 @@
       <div id="mainContainer" class="book-wrapper">
 
         %if 'chapters' in textbook:
-	<section aria-label="Textbook Navigation" class="book-sidebar">
-	  <ul id="booknav" class="treeview-booknav">
-	      <%def name="print_entry(entry, index_value)">
-		  <li id="htmlchapter-${index_value}">
-		    <a class="chapter">
-		      ${entry.get('title')}
-		    </a>
-		  </li>
-	      </%def>
-
-	      % for (index, entry) in enumerate(textbook['chapters']):
-		${print_entry(entry, index+1)}
-	      % endfor
-	  </ul>
-	</section>
+        <section aria-label="Textbook Navigation" class="book-sidebar">
+          <ul id="booknav" class="treeview-booknav">
+            <%def name="print_entry(entry, index_value)">
+              <li id="htmlchapter-${index_value}">
+                <a class="chapter">
+                  ${entry.get('title')}
+                </a>
+              </li>
+            </%def>
+
+            %for (index, entry) in enumerate(textbook['chapters']):
+              ${print_entry(entry, index+1)}
+            % endfor
+          </ul>
+        </section>
         %endif
 
         <section id="viewerContainer" class="book">
-<!--	  <section class="page"> -->
-            <iframe class="page" id="bookpage" src="${ textbook['chapters'][0]['url'] }">
-<!--          </section> -->
+          <section class="page"> 
+            <div id="bookpage" />
+          </section> 
         </section>
 
-      </div> <!-- mainContainer -->
+      </div>
+    </div>
 
-    </div> <!-- outerContainer -->