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

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

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

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


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

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

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

  function initRailway(){
    var $ul = $('<ul>');
    var ap, bgl, bgr;
    for (var p = 0; p <= _pl; p++) {
      console.log("-- PAGE --", p);
      ap = typeof _active_pages[p] !== "undefined" ? _active_pages[p] : 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;
      }else{
        bgl = bgr = false;
      }
      // console.log("_PAGES[ap][1].bg", _PAGES[ap][1].bg);
      // console.log("bgl", bgl);
      // console.log("bgr", bgr);

      if(p!=0)
        $('<li>')
          .addClass('page page-'+p+' page-left')
          .addClass(bgl ? 'active' : 0)
          .css({'background-image': bgl ? "url("+bgl+")" : "none"})
          .appendTo($ul);

      if(p<_pl)
        $('<li>')
          .addClass('page page-'+p+' page-right')
          .addClass(bgr ? 'active' : 0)
          .css({'background-image': bgr ? "url("+bgr+")" : "none"})
          .appendTo($ul);
    }
    $ul.appendTo(_$railway);
  }

// TODO: next page arrow

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

  function nextPages(){
    if(_current_pages < _PAGES.length-1){
      _current_pages+=1;
      changePages();
    }
  };

  function prevPages(){
    if(_current_pages > 0){
      _current_pages-=1;
      changePages();
    }
  };

  function changePages(){
    console.log("changePages", _current_pages);

    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);
    }else{
      _$page_left.css({'background-image': "none"});
    }

    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);
    }else{
      _$page_right.css({'background-image': "none"});
    }

    // 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", _PAGES[_current_pages].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];
        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();
    });
  };

  init();
});