big refactoring

css/dist/main.css

@@ -4,20 +4,22 @@ html, body {
   background-color: #1A1A1A; }
 
 #root {
-  height: 207.26mm;
-  margin: 0 auto;
   position: relative;
-  width: 475.04741mm; }
+  width: 475.52246mm;
+  height: 237.26mm;
+  margin: 0 auto;
+  letter-spacing: -.25em; }
+  #root > * {
+    letter-spacing: normal; }
 
 #header {
-  display: absolute;
-  top: 0;
-  left: 0;
+  display: inline-block;
   width: 15mm;
-  height: 100%;
+  height: 207.26mm;
+  margin-right: 5mm;
   background-color: white; }
   #header h1 {
-    margin: 0;
+    margin: 0 0 15mm 0;
     padding: 0.3em;
     position: absolute;
     bottom: 0;
@@ -26,10 +28,9 @@ html, body {
     transform: rotate(270deg); }
 
 #main {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 455.04741mm; }
+  display: inline-block;
+  width: 455.04741mm;
+  overflow: hidden; }
   #main #page-left {
     float: left;
     background-position: right; }
@@ -61,57 +62,74 @@ html, body {
         position: absolute;
         background-color: rgba(50, 50, 50, 0.8);
         cursor: pointer; }
-    #main .page.page-6 .overlay {
-      background-image: url("../../images/vectos/04_chance-RB.svg"); }
-  #main #navigation {
-    position: absolute;
-    z-index: 3;
-    bottom: 0;
-    width: 100%;
-    padding: 2mm 0;
-    background-color: rgba(26, 26, 26, 0.7);
-    overflow: hidden;
-    text-align: center;
-    opacity: 0;
-    transition: opacity .3s ease-in-out; }
-    #main #navigation:hover {
-      opacity: 1; }
-  #main #pagination {
-    color: #fff;
-    font-size: 1em;
-    padding: 0 0 2mm 0; }
-    #main #pagination div {
-      display: inline-block;
-      width: 49%; }
-      #main #pagination div.wrapper-l {
-        left: 0;
-        text-align: left; }
-      #main #pagination div.wrapper-r {
-        right: 0;
-        text-align: right; }
-      #main #pagination div span.l {
-        cursor: pointer;
-        line-height: -1; }
-  #main #railway ul {
-    padding: 1mm;
-    margin: 0; }
-    #main #railway ul li {
+
+#navigation {
+  width: 455.04741mm;
+  height: 30mm;
+  overflow: hidden;
+  margin: 0 0 0 20mm;
+  padding: 0;
+  background-color: rgba(26, 26, 26, 0.7);
+  text-align: center;
+  transition: opacity .3s ease-in-out; }
+
+#pagination {
+  color: #fff;
+  font-size: 1em;
+  padding: 1mm 0;
+  letter-spacing: -.25em;
+  opacity: 0.3;
+  transition: opacity .3s ease-in-out; }
+  #pagination > * {
+    letter-spacing: normal; }
+  #pagination div {
+    display: inline-block;
+    width: 49.9%; }
+    #pagination div span.p {
       display: inline-block;
       vertical-align: middle;
+      min-width: 3em;
+      text-align: center; }
+    #pagination div span.l {
+      cursor: pointer;
+      line-height: -1em; }
+      #pagination div span.l.hidden {
+        visibility: hidden; }
+    #pagination div.wrapper-l {
+      left: 0;
+      text-align: right; }
+    #pagination div.wrapper-r {
+      right: 0;
+      text-align: left;
+      border-left: 1px solid white; }
+  #pagination:hover {
+    opacity: 1; }
+
+#railway ul {
+  padding: 1mm 0;
+  margin: 0;
+  text-align: justify;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-flow: row nowrap;
+  flex-flow: row nowrap;
+  -ms-flex-pack: justify;
+  justify-content: space-between; }
+  #railway ul li {
+    list-style: none;
+    opacity: 0.2;
+    transition: opacity 0.3s ease-in-out; }
+    #railway ul li.current, #railway ul li.active:hover {
+      opacity: 1; }
+    #railway ul li span {
+      display: inline-block;
       background-color: white;
       width: 1mm;
       height: 7mm;
-      margin-left: 0.5mm;
       background-position: center;
-      background-size: cover;
-      opacity: 0.2;
-      transition: opacity 0.3s ease-in-out; }
-      #main #railway ul li.active {
+      background-size: cover; }
+      #railway ul li span.active {
         width: 7mm;
         cursor: pointer; }
-      #main #railway ul li.page-right {
-        margin-right: 1mm; }
-      #main #railway ul li.current, #main #railway ul li.active:hover {
-        opacity: 1; }
-    #main #railway ul:hover li {
-      opacity: 1; }
+  #railway ul:hover span {
+    opacity: 1; }

css/main.scss

@@ -3,30 +3,34 @@ html,body{
   background-color: #1A1A1A;
 }
 
-$debug:false;
-$tranchew:15mm;
-$pw:227.41mm;
-$ph:207.26mm;
-$mt:1cm;
-$mb:1cm;
-$me:1cm;
-$mi:1cm;
+$tranche_w:15mm;
+$tranche_mr:5mm;
+$p_w:227.41mm;
+$p_h:207.26mm;
+$main_w:2.001*$p_w;
+$navh:30mm;
+// $mt:1cm;
+// $mb:1cm;
+// $me:1cm;
+// $mi:1cm;
 
 #root{
-  height:$ph;
-  margin:0 auto;
   position: relative;
-  width:$tranchew+5+2.001*$pw;
+  width:($tranche_w+$tranche_mr+$main_w)*1.001;
+  height:$p_h+$navh;
+  margin:0 auto;
+  letter-spacing:-.25em;
+  &>*{letter-spacing: normal;}
 }
 
 #header{
-  display: absolute;
-  top: 0; left:0;
-  width: $tranchew; height: 100%;
+  display: inline-block;
+  width: $tranche_w; height: $p_h;
+  margin-right:$tranche_mr;
   background-color: white;
 
   h1{
-    margin: 0; padding:0.3em;
+    margin: 0 0 15mm 0; padding:0.3em;
     position: absolute;
     bottom:0; left:0;
     transform-origin: 0% 0%;
@@ -35,10 +39,10 @@ $mi:1cm;
 }
 
 #main{
-  position: absolute;
-  top:0; right:0;
-  width:2.001*$pw;
-
+  display: inline-block;
+  width:$main_w;
+  overflow: hidden;
+  // background-color: magenta;
   #page-left{
     float:left;
     // padding:$mt $mi $mb $me;
@@ -53,11 +57,8 @@ $mi:1cm;
   }
   .page{
     position: relative;
-    @if $debug {
-      background-color: green;
-    }
-    width:$pw;
-    height:$ph;
+    width:$p_w;
+    height:$p_h;
 
     background-repeat: no-repeat;
     background-size: contain;
@@ -69,11 +70,6 @@ $mi:1cm;
       background-repeat: no-repeat;
       background-size: contain;
       z-index: 1;
-
-      @if $debug {
-        border: 1px solid blue;
-      }
-
       // img{max-width: 100%;}
     }
 
@@ -89,64 +85,96 @@ $mi:1cm;
       }
     }
 
-    &.page-6 .overlay{
-      background-image: url("../../images/vectos/04_chance-RB.svg")
-    }
   }
 
-  #navigation{
-    position:absolute; z-index: 3;
-    bottom:0; width:100%; // height:2cm;
-    padding:2mm 0;
-    background-color: rgba(26, 26, 26, 0.7);
-    overflow: hidden;
-    text-align: center;
-    opacity: 0;
-    transition: opacity .3s ease-in-out;
-    &:hover{opacity: 1;}
-  }
+}
+
+#navigation{
+  width:$main_w;
+  height:$navh;
+  overflow: hidden;
+  $ml:$tranche_w + $tranche_mr;
+  margin:0 0 0 $ml;
+  padding:0;
+  background-color: rgba(26, 26, 26, 0.7);
+  // background-color: green;
+  text-align: center;
+  // opacity: 0;
+  transition: opacity .3s ease-in-out;
+  // &:hover{opacity: 1;}
+}
 
-  #pagination{
-    color:#fff;
-    font-size: 1em;
-    padding: 0 0 2mm 0;
-    div{
+#pagination{
+  color:#fff;
+  font-size: 1em;
+  padding: 1mm 0;
+  letter-spacing: -.25em;
+  &>*{letter-spacing: normal;}
+
+  div{
+    display: inline-block;
+    width:49.9%;
+    span.p{
       display: inline-block;
-      width:49%;
-      &.wrapper-l{left:0; text-align: left;}
-      &.wrapper-r{right:0; text-align: right;}
-      span.p{
+      vertical-align: middle;
+      min-width: 3em;
+      text-align: center;
+    }
+    span.l{
+      cursor: pointer;
+      line-height: -1em;
+      &.hidden{visibility: hidden;}
+    }
 
-      }
-      span.l{
-        cursor: pointer;
-        line-height: -1;
-      }
+    &.wrapper-l{
+      left:0; text-align: right;
+      // span.p{text-align: left;}
     }
+    &.wrapper-r{
+      right:0; text-align: left; border-left: 1px solid white;
+      // span.p{text-align: right;}
+    }
+
   }
 
-  #railway{
-    ul{
-      padding:1mm; margin:0;
-      li{
-        display: inline-block; vertical-align: middle;
+  opacity: 0.3;
+  transition: opacity .3s ease-in-out;
+  &:hover{opacity: 1;}
+}
+
+#railway{
+  // background-color: blue;
+  ul{
+    padding:1mm 0; margin:0;
+    text-align: justify;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+
+    li{
+      // display: inline-block; vertical-align: middle;
+      // display:
+      list-style: none;
+
+      opacity:0.2;
+      transition: opacity 0.3s ease-in-out;
+      &.current, &.active:hover{opacity: 1;}
+
+      span{
+        display: inline-block;
         background-color: white;
         width:1mm; height:7mm;
-        margin-left: 0.5mm;
+        // margin-left: 0.5mm;
         background-position: center;
         background-size: cover;
         &.active{
           width:7mm; cursor: pointer;
         }
         &.page-right{
-          margin-right: 1mm;
+          // margin-right: 1mm;
         }
-        opacity:0.2;
-        transition: opacity 0.3s ease-in-out;
-        &.current, &.active:hover{opacity: 1;}
       }
-      &:hover li{opacity: 1;}
     }
+    &:hover span{opacity: 1;}
   }
-
 }

index.html

@@ -22,23 +22,23 @@
           <div class="overlay"></div>
           <div class="maps"></div>
         </section>
-        <nav id="navigation">
-          <div id="pagination">
-            <div class="wrapper-l">
-              <span class="l">&#10094;</span>
-              <span class="p"></span>
-            </div>
-            <div class="wrapper-r">
-              <span class="p"></span>
-              <span class="l">&#10095;</span>
-            </div>
+      </section>
+
+      <nav id="navigation">
+        <div id="pagination">
+          <div class="wrapper-l">
+            <span class="l">&#9664;</span>
+            <span class="p"></span>
           </div>
-          <div id="railway">
-            
+          <div class="wrapper-r">
+            <span class="p"></span>
+            <span class="l">&#9654;</span>
           </div>
-        </nav>
+        </div>
+        <div id="railway">
 
-      </section>
+        </div>
+      </nav>
 
     </div>
 

js/main.js

@@ -6,17 +6,17 @@ $(document).ready(function() {
         h:$(document).height()
       },
       _$root = $('#root'),
-      _pl = 58,
-      _active_pages = {},
-      _current_pages = 0,
-      _page_left_bg, _page_right_bg,
+      _total_dp_len = 58,
+      _active_pages_keys = [],
+      _current_dp_key = "0", _current_dp_ob, _first_dp = true, _last_dp = false,
       _$page_left = $('#page-left'), _$page_right = $('#page-right'),
       _$overlay_left = $('#page-left .overlay'), _$overlay_right = $('#page-right .overlay'),
       _$maps_left = $('#page-left .maps'), _$maps_right = $('#page-right .maps'),
       _bgs_prefix = "images/pages/",
       _$railway = $('#railway'),
-      _$pagination = $('#pagination');
-      _$pagi_l = $('#pagination .wrapper-l .p'), _$pagi_r = $('#pagination .wrapper-r .p');
+      _$pagination = $('#pagination'),
+      _$pagi_l_arrow = $('.wrapper-l .l', _$pagination), _$pagi_r_arrow = $('.wrapper-r .l', _$pagination),
+      _$pagi_l_txt = $('.wrapper-l .p', _$pagination), _$pagi_r_txt = $('.wrapper-r .p', _$pagination);
 
   //     ____      _ __
   //    /  _/___  (_) /_
@@ -25,7 +25,7 @@ $(document).ready(function() {
   // /___/_/ /_/_/\__/
 
   function init(){
-    // console.log("init", _PAGES[0].bg);
+    // console.log("init", _ACTIVE_PAGES[0].bg);
     initLayout();
     initData();
     initRailway();
@@ -42,15 +42,16 @@ $(document).ready(function() {
   };
 
   function initData(){
-    for (var p = 0; p < _PAGES.length; p++) {
-      if(typeof _PAGES[p][0].page !== "undefined"){
-        _active_pages[(_PAGES[p][0].page+1)/2] = p;
-      }
-      else if(typeof _PAGES[p][1].page !== "undefined"){
-        _active_pages[_PAGES[p][1].page/2] = p;
-      }
-    }
-    console.log("_active_pages", _active_pages);
+    _active_pages_keys = Object.keys(_ACTIVE_PAGES);
+    console.log("_active_pages_keys", _active_pages_keys);
+  //   for (var p = 0; p < _ACTIVE_PAGES.length; p++) {
+  //     if(typeof _ACTIVE_PAGES[p][0].page !== "undefined"){
+  //       _active_pages[(_ACTIVE_PAGES[p][0].page+1)/2] = p;
+  //     }
+  //     else if(typeof _ACTIVE_PAGES[p][1].page !== "undefined"){
+  //       _active_pages[_ACTIVE_PAGES[p][1].page/2] = p;
+  //     }
+  //   }
   };
 
   //     _   __
@@ -60,53 +61,61 @@ $(document).ready(function() {
   // /_/ |_/\__,_/ |___/
 
   function initRailway(){
-    var $ul = $('<ul>');
-    var ap, bgl, bgr;
-    for (var dp = 0; dp <= _pl; dp++) {
+    var $ul = $('<ul>').appendTo(_$railway);
+    var $li, adp, bgl, bgr, pl, pr;
+
+    // loop through double pages
+    for (var dp = 0; dp <= _total_dp_len; dp++) {
       // console.log("-- DOUBLE PAGE --", dp);
-      ap = typeof _active_pages[dp] !== "undefined" ? _active_pages[dp] : false;
-      // console.log("ap",ap);
-      if(ap !== false){
-        bgl = typeof _PAGES[ap][0].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_PAGES[ap][0].bg : false;
-        bgr = typeof _PAGES[ap][1].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_PAGES[ap][1].bg : false;
+
+      $li = $('<li>')
+        .addClass('double-page-'+dp)
+        .appendTo($ul);
+
+      // check if current double page is active or not by checking if we have info for it in pages.json
+      // adp = typeof _active_pages[dp] !== "undefined" ? _active_pages[dp] : false;
+      adp = typeof _ACTIVE_PAGES[dp] !== "undefined" ? dp : false;
+      // console.log("adp",adp);
+
+      if(adp !== false){
+        // if active double page
+        $li.addClass('active');
+        // find for left and right pages if we have background info
+        bgl = typeof _ACTIVE_PAGES[adp][0].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_ACTIVE_PAGES[adp][0].bg : false;
+        bgr = typeof _ACTIVE_PAGES[adp][1].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_ACTIVE_PAGES[adp][1].bg : false;
       }else{
+        // if not active double page, no background
         bgl = bgr = false;
       }
-      // console.log("_PAGES[ap][1].bg", _PAGES[ap][1].bg);
-      // console.log("bgl", bgl);
-      // console.log("bgr", bgr);
 
-      var p = dp*2;
+      // get the real page left and right numbers from double page number
+      pr = dp*2;
+      pl = pr -1;
 
+      // add left page only if not first page (cover)
       if(dp!=0)
-        $('<li>')
-          .addClass('page page-'+(p-1)+' double-page-'+dp+' page-left')
+        $('<span>')
+          .addClass('page page-'+(pl)+' double-page-'+dp+' page-left')
           .addClass(bgl ? 'active' : 0)
           .css({'background-image': bgl ? "url("+bgl+")" : "none"})
-          .appendTo($ul);
+          .appendTo($li);
 
-      if(dp<_pl)
-        $('<li>')
-          .addClass('page page-'+p+' double-page-'+dp+' page-right')
+      // add right page only if not last page (backcover)
+      if(dp<_total_dp_len)
+        $('<span>')
+          .addClass('page page-'+pr+' double-page-'+dp+' page-right')
           .addClass(bgr ? 'active' : 0)
           .css({'background-image': bgr ? "url("+bgr+")" : "none"})
-          .appendTo($ul);
+          .appendTo($li);
     }
-    $ul.appendTo(_$railway);
-
-    $('li', _$railway).on('click', function(event) {
-      var p = $(this).attr('class').match(/page-(\d+)/)[1];
-      console.log('page', p);
-      console.log(p%2);
-      // check if page is pair ou impair and calculate de double_page number
-      var dp = p%2 ? (p*1+1)/2 : p/2;
-      _current_pages = _active_pages[dp];
+
+    $('li.active', _$railway).on('click', function(event) {
+      dp = $(this).attr('class').match(/double-page-(\d+)/)[1];
+      _current_dp_key = dp; //_active_pages[dp];
       changePages();
     });
   }
 
-// TODO: next page arrow
-
   //     ____
   //    / __ \____ _____ ____  _____
   //   / /_/ / __ `/ __ `/ _ \/ ___/
@@ -115,50 +124,72 @@ $(document).ready(function() {
   //             /____/
 
   function nextPages(){
-    if(_current_pages < _PAGES.length-1){
-      _current_pages+=1;
+    var i = _active_pages_keys.indexOf(_current_dp_key) +1;
+    if(i <= _active_pages_keys.length-1){
+      _current_dp_key = _active_pages_keys[i];
       changePages();
     }
   };
 
   function prevPages(){
-    if(_current_pages > 0){
-      _current_pages-=1;
+    var i = _active_pages_keys.indexOf(_current_dp_key)-1;
+    if(i >= 0){
+      _current_dp_key = _active_pages_keys[i];
       changePages();
     }
   };
 
   function changePages(){
-    console.log("changePages", _current_pages);
+    console.log("changePages", _current_dp_key);
 
     $('li',_$railway).removeClass('current');
 
-    if (typeof _PAGES[_current_pages][0].bg !== "undefined") {
-      var pl = _PAGES[_current_pages][0];
-      _$page_left
-        .css({'background-image': "url("+_bgs_prefix+pl.bg+")"})
-        .removeClass(pageClassToRemove)
-        .addClass('page-'+pl.page);
-      _$pagi_l.text(pl.page);
-      $('li.page-'+pl.page).addClass('current');
-    }else{
-      _$page_left.css({'background-image': "none"});
-      _$pagi_l.text("");
-    }
+    if(typeof _ACTIVE_PAGES[_current_dp_key] !== "undefined"){
+      _current_dp_ob = _ACTIVE_PAGES[_current_dp_key];
+
+      if (typeof _current_dp_ob[0].bg !== "undefined") {
+        var pl = _current_dp_ob[0];
+        // change display of main page left
+        _$page_left
+          .css({'background-image': "url("+_bgs_prefix+pl.bg+")"})
+          .removeClass(pageClassToRemove)
+          .addClass('page-'+pl.page);
+        // change pagination
+        _$pagi_l_txt.text(pl.page);
+      }else{
+        _$page_left.css({'background-image': "none"});
+        _$pagi_l_txt.text("");
+      }
 
-    if (typeof _PAGES[_current_pages][1].bg !== "undefined") {
-      var pr = _PAGES[_current_pages][1];
-      _$page_right
-        .css({'background-image': "url("+_bgs_prefix+pr.bg+")"})
-        .removeClass(pageClassToRemove)
-        .addClass('page-'+pr.page);
-      _$pagi_r.text(pr.page);
-      $('li.page-'+pr.page).addClass('current');
-    }else{
-      _$page_right.css({'background-image': "none"});
-      _$pagi_r.text("");
-    }
+      if (typeof _current_dp_ob[1].bg !== "undefined") {
+        var pr = _current_dp_ob[1];
+        _$page_right
+          .css({'background-image': "url("+_bgs_prefix+pr.bg+")"})
+          .removeClass(pageClassToRemove)
+          .addClass('page-'+pr.page);
+        _$pagi_r_txt.text(pr.page);
+      }else{
+        _$page_right.css({'background-image': "none"});
+        _$pagi_r_txt.text("");
+      }
+
+      // hide or show nav arrows for first annd last double page
+      var i = _active_pages_keys.indexOf(_current_dp_key);
+      if( i == 0){
+        _$pagi_l_arrow.addClass('hidden');
+      }else{
+        _$pagi_l_arrow.removeClass('hidden')
+      }
+      if(i == _active_pages_keys.length-1){
+        _$pagi_r_arrow.addClass('hidden');
+      }else{
+        _$pagi_r_arrow.removeClass('hidden')
+      }
 
+
+      // make railway db thumb current
+      $('li.double-page-'+_current_dp_key).addClass('current');
+    }
     // updatePagesOverlays();
   };
 
@@ -175,11 +206,11 @@ $(document).ready(function() {
     $('.overlay, .maps',_$page_left).children().remove();
     $('.overlay, .maps',_$page_right).children().remove();
 
-    console.log("Overlays", _PAGES[_current_pages].overlays);
+    console.log("Overlays", _ACTIVE_PAGES[_current_dp_key].overlays);
     // build page_left overlays
-    for (var map in _PAGES[_current_pages].overlays) {
-      if (_PAGES[_current_pages].overlays.hasOwnProperty(map)) {
-        map = _PAGES[_current_pages].overlays[map];
+    for (var map in _ACTIVE_PAGES[_current_dp_key].overlays) {
+      if (_ACTIVE_PAGES[_current_dp_key].overlays.hasOwnProperty(map)) {
+        map = _ACTIVE_PAGES[_current_dp_key].overlays[map];
         console.log("Map",map);
         _$maps_left.append(
           $('<div>')

js/pages.json

@@ -1,5 +1,5 @@
-var _PAGES=[
-  [
+var _ACTIVE_PAGES={
+  "0":[
     {"active":false},
     {
       "page":0,
@@ -7,7 +7,7 @@ var _PAGES=[
       "overlays":[]
     }
   ],
-  [
+  "1":[
     {
       "page":1,
       "bg":"00_1couvV.jpeg",
@@ -19,7 +19,7 @@ var _PAGES=[
       "overlays":[]
     }
   ],
-  [
+  "2":[
     {
       "page":3,
       "bg":"02_TH.jpeg",
@@ -31,7 +31,7 @@ var _PAGES=[
       "overlays":[]
     }
   ],
-  [
+  "3":[
     {
       "page":5,
       "bg":"04_chance.jpeg",
@@ -43,7 +43,7 @@ var _PAGES=[
       "overlays":[]
     }
   ],
-  [
+  "4":[
     {
       "page":7,
       "bg":"06_byGeorge.jpeg",
@@ -55,7 +55,7 @@ var _PAGES=[
       "overlays":[]
     }
   ],
-  [
+  "5":[
     {
       "page":9,
       "bg":"08_Brecht.jpeg",
@@ -66,7 +66,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "7":[
     {
       "page":13,
       "bg":"12_Bremer.jpeg",
@@ -74,7 +74,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "8":[
     {
       "page":15,
       "bg":"14_Brown.jpeg",
@@ -82,7 +82,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "12":[
     {"active":false},
     {
       "page":24,
@@ -90,7 +90,7 @@ var _PAGES=[
       "overlays":[]
     }
   ],
-  [
+  "14":[
     {
       "page":27,
       "bg":"26_Cage.jpeg",
@@ -98,7 +98,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "15":[
     {
       "page":29,
       "bg":"28_deMaria.jpeg",
@@ -106,7 +106,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "17":[
     {
       "page":33,
       "bg":"32_Flynt.jpeg",
@@ -114,7 +114,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "19":[
     {"active":false},
     {
       "page":38,
@@ -122,7 +122,7 @@ var _PAGES=[
       "overlays":[]
     }
   ],
-  [
+  "20":[
     {"active":false},
     {
       "page":40,
@@ -130,7 +130,7 @@ var _PAGES=[
       "overlays":[]
     }
   ],
-  [
+  "21":[
     {"active":false},
     {
       "page":42,
@@ -138,7 +138,7 @@ var _PAGES=[
       "overlays":[]
     }
   ],
-  [
+  "23":[
     {"active":false},
     {
       "page":46,
@@ -146,7 +146,7 @@ var _PAGES=[
       "overlays":[]
     }
   ],
-  [
+  "25":[
     {
       "page":49,
       "bg":"48_Dennis.jpeg",
@@ -154,7 +154,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "28":[
     {
       "page":55,
       "bg":"54_DingDong.jpeg",
@@ -162,7 +162,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "29":[
     {
       "page":57,
       "bg":"56_Johnson.jpeg",
@@ -170,7 +170,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "30":[
     {
       "page":59,
       "bg":"58_MacLow.jpeg",
@@ -178,7 +178,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "40":[
     {"active":false},
     {
       "page":80,
@@ -186,7 +186,7 @@ var _PAGES=[
       "overlays":[]
     }
   ],
-  [
+  "46":[
     {
       "page":91,
       "bg":"90_Simone.jpeg",
@@ -194,7 +194,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "47":[
     {
       "page":93,
       "bg":"92_Paik.jpeg",
@@ -202,7 +202,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "48":[
     {
       "page":95,
       "bg":"94_Riley.jpeg",
@@ -210,7 +210,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "50":[
     {"active":false},
     {
       "page":100,
@@ -218,7 +218,7 @@ var _PAGES=[
       "overlays":[]
     }
   ],
-  [
+  "51":[
     {
       "page":101,
       "bg":"100_Williams.jpeg",
@@ -226,7 +226,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "53":[
     {
       "page":105,
       "bg":"104_Wolff.jpeg",
@@ -234,7 +234,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "55":[
     {
       "page":109,
       "bg":"108_Young.jpeg",
@@ -242,7 +242,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "56":[
     {
       "page":111,
       "bg":"110_StraightLine.jpeg",
@@ -250,7 +250,7 @@ var _PAGES=[
     },
     {"active":false}
   ],
-  [
+  "57":[
     {
       "page":113,
       "bg":"112_Portrait?.jpeg",
@@ -262,7 +262,7 @@ var _PAGES=[
       "overlays":[]
     }
   ],
-  [
+  "58":[
     {
       "page":115,
       "bg":"114_4couv.jpeg",
@@ -270,4 +270,4 @@ var _PAGES=[
     },
     {"active":false}
   ]
-];
+};