// Globals
var PREFIX_ID = "mii-agendavro";
var PREFIX_SELECTOR = "#" + PREFIX_ID;
var SELECTOR_TRAP_FOCUS = [
  "a",
  "area",
  "button",
  "input", 
  "select",
  "textarea",
  "[contenteditable]",
  '[tabindex="0"]'
].join(",");


var lastFocusItem;

function openPopup(i){

}

function openPopup(i, item){
  lastFocusItem = $('.agendaButton').eq(i-1);
  console.log(lastFocusItem);
  $('.popup').removeClass('active');
  $('.popup.popup-'+i).addClass('active');
  $('.popup.popup-'+i).attr({ hidden: null }).focus();
  focusTrap(  $('.popup.popup-'+i)[0]  );
}

function closePopup(){

  $('.popup').each(function(i,item){
    $(item).removeClass('active');
    $(item).attr({ hidden: "hidden" });
  });
  focusRelease();
  requestAnimationFrame(function() {
    $(lastFocusItem).focus();
  });
}

// $(document).on('ready',function(){

//   $('body').on('.popup-close','mouseover',function(){
//     console.log('mouseover');
//     $(this).find('circle').style('fill','red !important');
//   });

//   $('body').on('.popup-close','click',function(){
//     console.log('click');
//     $(this).find('circle').style('fill','red !important');
//   });






// });




$('svg.popup-close').on('click tab touchstart keypress',function(){
  //console.log('click');
    closePopup();

});

$('svg.popup-close').on('keypress',function(event){
  //console.log('click');
  if (event.key === "Enter") {
    closePopup();
    event.preventDefault();

  }
});


// $('.mobile a.external_link').on('click tab touchstart',function(e){
//   e.preventDefault();
// //   console.log('open',$(this).attr('xlink:href'));
//    window.open($(this).attr('href'));

//  });

 
//  $('a.svg_link').on('click',function(e){
//   e.preventDefault();
//   window.open(this.href);
//  });





/*
 * Router
 * Handles faux page navigation to different sections in the infographic.
 *
 * Each "page" is identified and navigated to by id. We expect the top-level
 * element (containing the routes) to have a data-router attribute present.
 * Each route must have a data-route attribute present.
 */
var home = PREFIX_SELECTOR + "-index";
var startingHashRe = /^#/;

var $html = $("html");
var $router = $("[data-router]", PREFIX_SELECTOR);
var $routes = $("[data-route]", PREFIX_SELECTOR);
var $home = $routes.filter(home);
var $fromLink;
var $fromRoute;

/*
 * Updates the router with the selected route and handles focus.
 * By default we trap the focus in the new route.
 * @param route {String} the route to navigate to, starting with a #
 */
function updateRoute(route) {




  focusRelease();

  var $route = getRoute(route);


  if (!$route) return;
  if ($fromRoute) $fromRoute.attr({ hidden: "hidden" });

  $router.attr("data-router", route);

  $('body').attr("current-router",route);

  if (route === home) {

    if ($fromLink && $fromLink.length) {
      $fromLink.focus();
      $fromLink = undefined;
    }
    $(window).scrollTop(0);
    return;
  }
 // console.log($route);
//  focusTrap($route[0]);
  $route.attr({ hidden: null }).focus();

  $fromRoute = $route;

  return;
}

function getRoute(route) {
  return route && $routes.filter(route);
}

function hasRoute(route) {
  return route && getRoute(route).length;
}

function goto(route) {
  
  return hasRoute(route) && (window.location.hash = route);
  
}

if (hasRoute(window.location.hash)) {
  updateRoute(window.location.hash);
}

// Listen for hashchanges potentially affecting our routes
$(window).on("hashchange", function(event) {
  $router = $("[data-router]", PREFIX_SELECTOR);
  $routes = $("[data-route]", PREFIX_SELECTOR);

  var route = window.location.hash;
 
  route = route;
  //console.log(route);
  // TODO: find out if we need this default behavior
  if (!route) return updateRoute(home);

  $('html, body').animate({ scrollTop: $(route).offset().top}, 0);

  // Prevents the navBar from showing up when we navigate to
  // a route which is positioned "above" the current viewport.
  // We need to wait one tick before we can remove the fixed
  // navigation overlay on small screens
  requestAnimationFrame(function() {
    if ($html.hasClass("fixedNavDown")) {
      $html.removeClass("fixedNavDown");
      $html.addClass("fixedNavUp");
    }
  });

  return hasRoute(route) && updateRoute(route);
});






// Close/open/toggle functions
var ToggleStates = new Map();

function updateToggleState(key, isExpanded) {
  var state = ToggleStates.get(key);

  if (!state) return;

  state.$controls.each(function () {
    var $node = $(this);
    if ($node.attr("aria-expanded")) $node.attr("aria-expanded", isExpanded);
  });

  state.$targets.each(function () {
    var $node = $(this);
    $node.attr("data-toggle-expanded", isExpanded);
  });

  if (isExpanded !== state.isExpanded) {
    ToggleStates.set(key, $.extend(state, { isExpanded: isExpanded }));
  }

  return state;
}

function initToggleState($controls, isExpanded) {
  var key = $controls.attr("aria-controls");

  if (!key) return;

  var selector = key
    .split(",")
    .map(function (str) {
      return "#" + str.trim();
    })
    .join(",");

  var $targets = $(selector);

  if (ToggleStates.has(key)) {
    var state = ToggleStates.get(key);

    ToggleStates.set(
      key,
      $.extend(state, {
        $controls: state.$controls.add($controls),
      })
    );

    return key;
  }

  ToggleStates.set(key, {
    $controls: $controls,
    $targets: $targets,
    isExpanded: !!isExpanded,
  });
  updateToggleState(key, !!isExpanded);

  return key;
}

// toggles
registerControl("[data-toggle]", function (state) {
  return !state.isExpanded;
});
registerControl("[data-toggle-close]", function (state) {
  return false;
});
registerControl("[data-toggle-open]", function (state) {
  return true;
});

// utils
function registerControl(selector, callback) {
  var $nodes = $(selector);

  $nodes.each(function () {
    var $node = $(this);
    var key = initToggleState($node);

    $node.on("click", function (event) {
      var state = ToggleStates.get(key);
      updateToggleState(key, callback(state));
    });
  });
}








/*
 * Focus traps
 * Allows us to control focus in the infographic, often needed for
 * interactive elements such as popups, dropdowns, or other.
 */
var trapFn;

function trapNode(node) {
  return function (event) {
    var focusables = node.querySelectorAll(SELECTOR_TRAP_FOCUS);
    var firstFocusable = focusables[0];
    var lastFocusable = focusables[focusables.length - 1];

    var isTabPressed = event.key === "Tab" || event.keyCode === 9;

    if (!isTabPressed) return;

    if (event.shiftKey) {
      if (
        document.activeElement === firstFocusable ||
        document.activeElement === node
      ) {
        lastFocusable.focus();
        event.preventDefault();
      }
    } else {
      if (document.activeElement === lastFocusable) {
        firstFocusable.focus();
        event.preventDefault();
      }
    }
  };
}

function focusTrap(node) {
  trapFn = trapNode(node);
  document.addEventListener("keydown", trapFn);

  return focusRelease;
}

function focusRelease() {
  document.removeEventListener("keydown", trapFn);
  trapFn = undefined;
}








$(function(){


  $('[data-router] > :first-child').show();

});