From 547bf5d52e8d3bd0aa8cf8763b41a7a32a25c610 Mon Sep 17 00:00:00 2001
From: Piotr Mitros <pmitros@mit.edu>
Date: Sat, 10 Mar 2012 17:10:49 -0500
Subject: [PATCH] Added book viewer

---
 contrib/xbook.html | 261 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 261 insertions(+)
 create mode 100644 contrib/xbook.html
diff --git a/contrib/xbook.html b/contrib/xbook.html
new file mode 100644
index 0000000000..3d6c42961a
--- /dev/null
+++ b/contrib/xbook.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
+Copyright (c) 2012 Jeff Kent, https://jeffkent.net/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+<html>
+<head>
+<title>6.002x Textbook for Kindle</title>
+<script type="text/javascript" src="https://mitxstatic.s3.amazonaws.com/js/jquery-1.6.2.min.js"></script>
+<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
+<script type="text/javascript">
+var exhibit = Object();
+exhibit.width = 960;
+exhibit.height = 1080;
+exhibit.ratio = exhibit.width / exhibit.height;
+exhibit.current = 1;
+exhibit.first = 1;
+exhibit.last = 1008;
+exhibit.url = "https://mitxstatic.s3.amazonaws.com/book_images/p{0}.png";
+exhibit.format = Array();
+exhibit.format[0] = {width: 550,
+                     height: 975,
+                     left_odd: -117,
+                     left_even: -295,
+                     top: -55,
+                     ratio: 550/975};
+exhibit.format[1] = {width: 775,
+                     height: 975,
+                     left_odd: -117,
+                     left_even: -70,
+                     top: -55,
+                     ratio: 775/975};
+exhibit.format[2] = {width: 960,
+                     height: 1080,
+                     left_odd: 0,
+                     left_even: 0,
+                     top: 0,
+                     ratio: 960/1080};
+
+var format_mode = 0;
+
+function zeropad(num, size){
+  var s = num+"";
+  while (s.length < size)
+    s = "0" + s;
+  return s;
+}
+
+function load(n){
+  var pg = 0;
+  if (exhibit.current <= 1)
+    pg = exhibit.current + n;
+  else if (exhibit.current < exhibit.last)
+    pg = exhibit.current - 1 + n;
+  else
+    pg = exhibit.last - 2 + n;
+
+  var url = exhibit.url.replace("{0}", zeropad(pg, 3));
+  var div = $("#exhibit" + n);
+  var img = $("#exhibit" + n + " img");
+  div.css({width:exhibit.format[format_mode].width + "px",
+           height:exhibit.format[format_mode].height + "px"});
+  img.css({position:"relative",
+           width:exhibit.width + "px",
+           height:exhibit.height + "px",
+           top:exhibit.format[format_mode].top + "px"});
+  if (pg % 2)
+    img.css({left:exhibit.format[format_mode].left_odd + "px"});
+  else
+    img.css({left:exhibit.format[format_mode].left_even + "px"});
+  img.attr("src", url);
+}
+
+function load_all(){
+  if (exhibit.current <= 1) {
+    load(0);
+    load(1);
+    load(2);
+  } else {
+    load(1);
+    load(2);
+    load(0);
+  }
+}
+
+function shift_up(){
+  $("#exhibit0").html("");
+  $("#exhibit1 img").appendTo("#exhibit0");
+  $("#exhibit1").html("");
+  $("#exhibit2 img").appendTo("#exhibit1");
+  $(window).scrollTop($(window).scrollTop() - exhibit.format[format_mode].height - 15);
+  $("#exhibit2").html("<img>");
+  load(2);
+}
+
+function shift_down(){
+  $("#exhibit2").html("");
+  $("#exhibit1 img").appendTo("#exhibit2");
+  $("#exhibit1").html("");
+  $("#exhibit0 img").appendTo("#exhibit1");
+  $(window).scrollTop($(window).scrollTop() + exhibit.format[format_mode].height + 15);
+  $("#exhibit0").html("<img>");
+  load(0);
+}
+
+function update_status(){
+  $("#status").html("&nbsp; " + exhibit.current + "/" + exhibit.last);
+}
+
+function goto_page(pg, offset){
+  offset = typeof offset !== 'undefined' ? offset : 0;
+
+  exhibit.current = pg;
+  load_all();
+  if (exhibit.current <= 1)
+    $(document).scrollTop(offset);
+  else if (exhibit.current < exhibit.last)
+    $(document).scrollTop((exhibit.format[format_mode].height + 15) + offset);
+  else
+    $(document).scrollTop((exhibit.format[format_mode].height + 15) * 2 + offset);
+
+  $.cookie('exhibit.current', exhibit.current, {expires: 7});
+  $.cookie('exhibit.offset', 0, {expires: 7});
+}
+
+function get_offset(){
+  var offset;
+
+  if (exhibit.current <= 1)
+    offset = $(document).scrollTop();
+  else if (exhibit.current < exhibit.last)
+    offset = $(document).scrollTop() - (exhibit.format[format_mode].height + 15);
+  else
+    offset = $(document).scrollTop() - (exhibit.format[format_mode].height + 15) * 2;
+
+  return offset;
+}
+
+$(function(){
+  $("#container").width(exhibit.format[format_mode].width);
+  setTimeout(function(){
+    var current = parseInt($.cookie("exhibit.current"),10);
+    var offset = parseInt($.cookie("exhibit.offset"),10);
+    current = (isNaN(current) || current < 1 || current > exhibit.last) ? 3 : current;
+    offset = isNaN(offset) ? 0 : offset;
+
+    goto_page(current, offset);
+    update_status();
+  },1);
+});
+
+$(window).keydown(function(e){
+  if (e.keyCode == 67) {        /* [c]ontents */
+    goto_page(9);
+  } else if (e.keyCode == 70) { /* [f]ormat */
+    if (format_mode < 2)
+      format_mode += 1;
+    else
+      format_mode = 0;
+    $("#container").width(exhibit.format[format_mode].width);
+    load_all();
+  } else if (e.keyCode == 71) { /* [g]oto */
+    var pg = prompt("Goto page: ");
+    if (pg !== null)
+      if (pg > 0 && pg <= exhibit.last)
+        goto_page(parseInt(pg,10));
+  } else if (e.keyCode == 73) { /* [i]ndex */
+    goto_page(997);
+  }
+});
+
+$(window).scroll(function(){
+  setTimeout(function(){
+    if (exhibit.current <= 1) {
+      if ($(window).scrollTop() + $(window).height()/2 >= (exhibit.format[format_mode].height + 15))
+        exhibit.current += 1;
+    } else if (exhibit.current <= exhibit.last - 1) {
+      if ($(window).scrollTop() + $(window).height()/2 < (exhibit.format[format_mode].height + 15)) {
+        exhibit.current -= 1;
+        if (exhibit.current != 1)
+	  shift_down();
+      } else if ($(window).scrollTop() + $(window).height()/2 >= (exhibit.format[format_mode].height + 15) * 2) {
+        exhibit.current += 1;
+        if (exhibit.current != exhibit.last)
+	  shift_up();
+      }
+    } else if (exhibit.current >= exhibit.last) {
+      if ($(window).scrollTop() + $(window).height()/2 < (exhibit.format[format_mode].height + 15) * 2)
+        exhibit.current -= 1;
+    }
+    $.cookie('exhibit.current', exhibit.current, {expires: 7});
+    $.cookie('exhibit.offset', get_offset(), {expires: 7});
+    update_status();
+  },1);
+});
+</script>
+<style type="text/css">
+body {
+  background-color: #333;
+  margin: 15px 0;
+}
+#status {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background-color: black;
+  color: white;
+  width: 100%;
+  z-index: 100;
+}
+#help {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  color: white;
+  z-index:100;
+}
+#container {
+  overflow: hidden;
+  margin: 0 auto;
+}
+#exhibit0, #exhibit1, #exhibit2 {
+  overflow:hidden;
+}
+.spacer {
+  height: 15px;
+}
+</style>
+</head>
+<body>
+<div id="container">
+<div id="exhibit0"><img /></div>
+<div class="spacer"></div>
+<div id="exhibit1"><img /></div>
+<div class="spacer"></div>
+<div id="exhibit2"><img /></div>
+</div>
+<div id="status">&nbsp;</div>
+<div id="help">[g]oto [f]ormat [c]ontents [i]ndex &nbsp;</div>
+<div>&nbsp;<div>
+</body>
+</html>
