diff --git a/assets/css/layout.scss b/assets/css/layout.scss
index f15e5d4..1130bfb 100644
--- a/assets/css/layout.scss
+++ b/assets/css/layout.scss
@@ -96,3 +96,13 @@ p {
     /*-webkit-region-break-inside: avoid;*/
     /*               break-inside: avoid;*/
 }
+
+.story-page, .page-break {
+    /* Apply this class to an element to put it on a new region.
+     * Hint:
+     * You can also use an empty <div class="page-break"></div>
+     * if you want to put manual page breaks without attaching it to an HTML element
+     */
+  //  -webkit-region-break-before: always;
+           break-after: region;
+}
diff --git a/assets/css/setup.scss b/assets/css/setup.scss
index bffe742..f9ff9f3 100644
--- a/assets/css/setup.scss
+++ b/assets/css/setup.scss
@@ -1,6 +1,6 @@
 /* the geometry of the page */
 $page-width: 210mm;
-$page-height: 290mm;
+$page-height: 297mm;
 
 /* the size of the crop marks*/
 $crop-size: 7mm;
diff --git a/assets/js/gui.js b/assets/js/gui.js
index c88b74d..c40fdd4 100644
--- a/assets/js/gui.js
+++ b/assets/js/gui.js
@@ -1,28 +1,36 @@
 $(function() {
 
+
+  $('select[name="document"]').change(function(e){
+    console.log("document selection",this);
+    $('iframe').attr('src', this.value);
+  });
+
   $.getJSON('build/toc.json', function(data){
-    // console.log(data);
-    for (book of data) {
-      // console.log(book);
-      // var $optgroup = $('<optgroup>').attr('label', book.label);
-      // for (page of book.pages) {
+    console.log(data);
+    for (book in data) {
+      console.log(data[book]);
+      // var $optgroup = $('<optgroup>').attr('label', data[book].label);
+      // for (page of data[book].pages) {
       //   // console.log(page);
-      //   $optgroup.append($('<option>').attr('value', book.label+'/'+page.file).text(book.label+' : '+page.label));
+      //   $optgroup.append($('<option>').attr('value', data[book].label+'/'+page.file).text(data[book].label+' : '+page.label));
       // }
       $('[name="document"]').append(
         $('<option>')
-          .attr('value', book.file).text(book.label)
+          .attr('value', data[book].file).text(data[book].label)
       );
     }
-  })
 
-  $('select[name="document"]').change(function(e){
-    // console.log(e);
-    // var optionSelected = $("option:selected", this);
-    // var valueSelected = ;
-    // console.log(this.value);
-    $('iframe').attr('src', this.value);
-  });
+    console.log(window.location.hash);
+
+    var hash = parseInt(window.location.hash.replace('#',''));
+    console.log(hash);
+
+    var value = $('[name="document"] option:eq('+hash+')').attr('value');
+    console.log('value', value);
+
+    $('[name="document"]').val(value).change();
+  })
 
   // activate toolbar events when iframe is loaded
   $('iframe').load(function() {
diff --git a/assets/js/setup.js b/assets/js/setup.js
index 780df20..5383e94 100644
--- a/assets/js/setup.js
+++ b/assets/js/setup.js
@@ -1,3 +1,3 @@
 
-nb_page = 5;
-cropmarks = true;
+nb_page = 100;
+cropmarks = false;