/**
 * Find all instances of large links
 */
function largeLinksManager () {
  var largeLinks = Array.from(document.querySelectorAll('section.large-links'));
  largeLinks.forEach(function(module){
    new largeLinksInstance(module);
  })
}

/**
 * One instance of large links
 */
function largeLinksInstance (module) {
  this.links = [];
  this.images = [];

  this.setup = function () {
    this.links = Array.from(module.querySelectorAll('.large-links__list-a-hover'));
    this.images = Array.from(module.querySelectorAll('.large-links__image'));

    this.defaultImage = this.images.length > 0 ? this.images[0] : null;
    this.activeImage = this.images.length > 0 ? this.images[0] : null; //first image always starts out as active

    this.links.forEach(function(link) {
      link.addEventListener('mouseenter', this.handleLinkMouseIn.bind(this, link));
      link.addEventListener('mouseleave', this.handleLinkMouseOut.bind(this, link));
      link.addEventListener('focus', this.handleLinkFocus.bind(this, link));
      link.addEventListener('blur', this.handleLinkBlur.bind(this, link));
    }.bind(this))
  }

  this.activateImage = function (image) {
    if(this.activeImage) {
      this.activeImage.classList.remove('active');
      this.activeImage.setAttribute('aria-hidden', 'true');
    }

    image.classList.add('active')
    image.setAttribute('aria-hidden', 'false');
    this.activeImage = image;
  }

  this.deactivateImage = function () {
    if(this.activeImage) {
      this.activeImage.classList.remove('active');
      this.activeImage.setAttribute('aria-hidden', 'true');
      this.activeImage = null;
    }

    if(this.defaultImage) {
      this.activateImage(this.defaultImage);
    }
  }

  this.handleLinkFocus = function (link) {
    var imageId = link.dataset.imageId,
        image = imageId ? document.getElementById(imageId) : null;

    if(imageId && image) {
      this.activateImage(image);
    }
  }

  this.handleLinkBlur = function () {
    this.deactivateImage();
  }

  this.handleLinkMouseIn = function (link) {
    var imageId = link.dataset.imageId,
        image = imageId ? document.getElementById(imageId) : null;

    if(imageId && image) {
      this.activateImage(image);
    }
  }

  this.handleLinkMouseOut = function () {
    this.deactivateImage();
  }

  this.setup();
}

largeLinksManager();