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

  var _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/";

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

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

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

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

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

  function changePages(){
    console.log("changePages");
    _page_left_bg  = _bgs_prefix+_PAGES[_current_pages].bg;
    _page_right_bg = _bgs_prefix+_PAGES[_current_pages+1].bg;
    console.log(_page_left_bg+" | "+_page_right_bg);

    _$page_left
      .css({'background-image': "url("+_page_left_bg+")"})
      .removeClass(pageClassToRemove)
      .addClass('page-'+_current_pages);
    _$page_right
      .css({'background-image': "url("+_page_right_bg+")"})
      .removeClass(pageClassToRemove)
      .addClass('page-'+(_current_pages+1));

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