archeo010110-ananthology/js/main.js

$(document).ready(function() {
  console.log("ready");

  var _win = {
        w:$(document).width(),
        h:$(document).height()
      },
      _$root = $('#root'),
      _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_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);

  //     ____      _ __
  //    /  _/___  (_) /_
  //    / // __ \/ / __/
  //  _/ // / / / / /_
  // /___/_/ /_/_/\__/

  function init(){
    // console.log("init", _ACTIVE_PAGES[0].bg);
    initLayout();
    initData();
    initRailway();
    initkeyboard();
    initPagination();
    changePages();
  };


  function initLayout(){
    _$root.css({
      'margin-top':(_win.h-_$root.height())/2
    });
  };

  function initData(){
    _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;
  //     }
  //   }
  };

  //     _   __
  //    / | / /___ __   __
  //   /  |/ / __ `/ | / /
  //  / /|  / /_/ /| |/ /
  // /_/ |_/\__,_/ |___/

  function initRailway(){
    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);

      $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;
      }

      // 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)
        $('<span>')
          .addClass('page page-'+(pl)+' double-page-'+dp+' page-left')
          .addClass(bgl ? 'active' : 0)
          .css({'background-image': bgl ? "url("+bgl+")" : "none"})
          .appendTo($li);

      // 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($li);
    }

    $('li.active', _$railway).on('click', function(event) {
      dp = $(this).attr('class').match(/double-page-(\d+)/)[1];
      _current_dp_key = dp; //_active_pages[dp];
      changePages();
    });
  }

  //     ____
  //    / __ \____ _____ ____  _____
  //   / /_/ / __ `/ __ `/ _ \/ ___/
  //  / ____/ /_/ / /_/ /  __(__  )
  // /_/    \__,_/\__, /\___/____/
  //             /____/

  function nextPages(){
    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(){
    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_dp_key);

    $('li',_$railway).removeClass('current');

    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 _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();
  };

  function pageClassToRemove(){
    var c = $(this).attr('class').match(/page-+\d+/);
    if(c && c.length)
      return c[0];
  };

  function updatePagesOverlays(){
    console.log("updatePagesOverlays");

    // remove all pages overlays
    $('.overlay, .maps',_$page_left).children().remove();
    $('.overlay, .maps',_$page_right).children().remove();

    console.log("Overlays", _ACTIVE_PAGES[_current_dp_key].overlays);
    // build page_left overlays
    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>')
            .addClass("map")
            .attr('overlay', map.over)
            .css({
              "left":map.x,
              "top":map.y,
              "width":map.w,
              "height":map.h
            })
            .bind("mouseover", function(e){
              $(this)
                .parents('.page').find('.overlay')
                  .css({
                    // 'background-color':"red",
                    'background-image':'url(images/vectos/'+$(this).attr('overlay')+')'
                  });
            })
        );
      }
    }
  };

  //     __ __           __                         __
  //    / //_/__  __  __/ /_  ____  ____ __________/ /
  //   / ,< / _ \/ / / / __ \/ __ \/ __ `/ ___/ __  /
  //  / /| /  __/ /_/ / /_/ / /_/ / /_/ / /  / /_/ /
  // /_/ |_\___/\__, /_.___/\____/\__,_/_/   \__,_/
  //           /____/
  function initkeyboard(){
    keyboardJS.bind('right', function(event) {
      // console.log(event);
      nextPages();
    });
    keyboardJS.bind('left', function(event) {
      // console.log(event);
      prevPages();
    });
  };

  //     ____              _             __  _
  //    / __ \____ _____ _(_)___  ____ _/ /_(_)___  ____
  //   / /_/ / __ `/ __ `/ / __ \/ __ `/ __/ / __ \/ __ \
  //  / ____/ /_/ / /_/ / / / / / /_/ / /_/ / /_/ / / / /
  // /_/    \__,_/\__, /_/_/ /_/\__,_/\__/_/\____/_/ /_/
  //             /____/
  function initPagination(){
    $('.wrapper-l .l', _$pagination).on('click', function(event) {
      prevPages();
    });
    $('.wrapper-r .l', _$pagination).on('click', function(event) {
      nextPages();
    });


  };



  init();
});