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>
@@ -53,7 +127,7 @@
               </li>
             </%def>
 
-	      % for (index, entry) in enumerate(textbook['chapters']):
+            %for (index, entry) in enumerate(textbook['chapters']):
               ${print_entry(entry, index+1)}
             % endfor
           </ul>
@@ -61,11 +135,11 @@
         %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 -->