/**
 * forked from 
 * https://tympanus.net/codrops/2016/12/21/block-reveal-effects/
 * https://github.com/akhil0001/RevealFx
 * and
 * https://codepen.io/GreenSock/pen/2f364a81f9c31cdec62316947da76021
 *
 * rewritten in an ES6 class with dynamic data attributes
 * 
 **/

// Helper vars and functions.
function extend(a, b) {
  for (var key in b) {
    if (b.hasOwnProperty(key)) {
      a[key] = b[key];
    }
  }
  return a;
}

function createDOMEl(type, className, content) {
  var el = document.createElement(type);
  el.className = className || '';
  el.innerHTML = content || '';
  return el;
}

//this is a helper function for creating the styles for a given element
function createStyleForDOMEL(el, position, top, left, width, height, color, background, opacity, pointerEvents, zIndex) {
  el.style.position = position || 'absolute';
  el.style.top = top || '0';
  el.style.left = left || '0';
  el.style.color = color || '#fff';
  el.style.width = width || '100%';
  el.style.height = height || '100%';
  el.style.backgroundColor = background || '#f0f0f0';
  el.style.opacity = opacity || '0';
  el.style.pointerEvents = pointerEvents || 'none';
  el.style.zIndex = zIndex || 0;
}

class RevealFx {
  constructor(el, options) {
    this.el = el;
    this.revealers = [];
    this.options = {
      // If true, then the content will be hidden until it´s "revealed".
      isContentHidden: true,
      //number of layers to be displayed
      layers: 1,
      // The animation/reveal settings. This can be set initially or passed when calling the reveal method.
      revealSettings: {
        // Animation direction: left right (lr) || right left (rl) || top bottom (tb) || bottom top (bt).
        direction: 'lr',
        // Revealer´s background color.
        backgroundColor: '#f0f0f0',
        // Animation speed. This is the speed to "cover" and also "uncover" the element (seperately, not the total time).
        duration: 0.5,
        // Animation easing. This is the easing to "cover" and also "uncover" the element.
        easing: 'Quint.easeInOut',
        // percentage-based value representing how much of the area should be left covered.
        coverArea: 0,
        // Callback for when the revealer is covering the element (halfway through of the whole animation).
        onCover: function(contentEl, revealerEl) {
          return false;
        },
        // Callback for when the animation starts (animation start).
        onStart: function(contentEl, revealerEl) {
          return false;
        },
        // Callback for when the revealer has completed uncovering (animation end).
        onComplete: function(contentEl, revealerEl) {
          return false;
        }
      }
    }

    this.options = extend({}, this.options)
    extend(this.options, options)

    this._init()
  }

  _init() {
    this._layout();
  };

  _layout() {
    var heightOfEl = 100;
    var widthOfEl = 100;

    let position = getComputedStyle(this.el).position;
    if (position !== 'fixed' && position !== 'absolute' && position !== 'relative') {
      this.el.style.position = 'relative';
    }

    // Content element.
    this.content = createDOMEl('div', 'block-revealer__content', this.el.innerHTML);
    if (this.options.isContentHidden) {
      this.content.style.opacity = 0;
    }

    this.el.innerHTML = '';
    this.el.appendChild(this.content);
    var topOfRevealerElement = 0;
    var leftOfRevalerElement = 0;
    const numberOfLayers = this.options.layers;
    var colorOfBlockLayer = '#111';

    // Revealer element (the one that animates)
    for (var i = 0; i < numberOfLayers; i++) {
      this.revealers.push(createDOMEl('div', 'block-revealer__element'));
      if (this.options.revealSettings.backgroundColor)
        colorOfBlockLayer = this.options.revealSettings.backgroundColor;
      else
        colorOfBlockLayer = '#111111';
      //to be refactored to default and check if it exists
      if (this.options.revealSettings.direction === 'tb' || this.options.revealSettings.direction === 'bt') {
        var widthOfIndividualBlock = widthOfEl / numberOfLayers;
        createStyleForDOMEL(this.revealers[i], 'absolute', '0%', leftOfRevalerElement + '%', widthOfIndividualBlock + '%', '100%', '#fff', colorOfBlockLayer, '0', 'none');
        leftOfRevalerElement = leftOfRevalerElement + widthOfIndividualBlock;
      } else {
        var heightOfIndividualBlock = heightOfEl / numberOfLayers;
        createStyleForDOMEL(this.revealers[i], 'absolute', topOfRevealerElement + '%', '0%', '100%', (heightOfIndividualBlock + .5) + '%', '#fff', colorOfBlockLayer, '0', 'none');
        topOfRevealerElement = topOfRevealerElement + heightOfIndividualBlock;
      }
      this.el.classList.add('block-revealer');
      this.el.appendChild(this.revealers[i]);
    }
  };

  _getTransformSettings(direction) {
    var val, origin, origin_2;

    switch (direction) {
      case 'lr':
        val = 'scale3d(0,1,1)';
        origin = '0 50%';
        origin_2 = '100% 50%';
        break;
      case 'rl':
        val = 'scale3d(0,1,1)';
        origin = '100% 50%';
        origin_2 = '0 50%';
        break;
      case 'tb':
        val = 'scale3d(1,0,1)';
        origin = '50% 0';
        origin_2 = '50% 100%';
        break;
      case 'bt':
        val = 'scale3d(1,0,1)';
        origin = '50% 100%';
        origin_2 = '50% 0';
        break;
      default:
        val = 'scale3d(0,1,1)';
        origin = '0 50%';
        origin_2 = '100% 50%';
        break;
    };

    return {
      // transform value.
      val: val,
      // initial and halfway/final transform origin.
      origin: {
        initial: origin,
        halfway: origin_2
      },
    };
  };

  reveal(revealSettings) {
    // Do nothing if currently animating.
    if (this.isAnimating) {
      return false;
    }
    this.isAnimating = true;

    // Set the revealer element´s transform and transform origin.
    var defaults = { // In case revealSettings is incomplete, its properties deafault to:
        duration: 0.5,
        easing: 'Quint.easeInOut',
        delay: 0,
        backgroundColor: '#f0f0f0',
        direction: 'lr',
        coverArea: 0
      },
      revealSettings = revealSettings || this.options.revealSettings,
      direction = revealSettings.direction || defaults.direction,
      transformSettings = this._getTransformSettings(direction);

    for (var i = 0; i < this.revealers.length; i++) {
      this.revealers[i].style.WebkitTransform = this.revealers[i].style.transform = transformSettings.val;
      this.revealers[i].style.WebkitTransformOrigin = this.revealers[i].style.transformOrigin = transformSettings.origin.initial;
      // Show it. By default the revealer element has opacity = 0 (CSS).
      this.revealers[i].style.opacity = 1;
      if (revealSettings.backgroundColor)
        this.revealers[i].style.backgroundColor = revealSettings.backgroundColor;
      else
        this.revealers[i].style.backgroundColor = defaults.backgroundColor;
    }

    // Animate it.
    var self = this,
      // duration = revealSettings.duration || defaults.duration,
      targets = self.revealers,
      from = {},
      from_2 = {},
      to = {
        duration: revealSettings.duration || defaults.duration,
        delay: revealSettings.delay || defaults.delay,
        ease: revealSettings.easing || defaults.easing,
        onComplete: function() {
          for (var i = 0; i < self.revealers.length; i++) {
            self.revealers[i].style.WebkitTransformOrigin = self.revealers[i].style.transformOrigin = transformSettings.origin.halfway;
          }
          if (typeof revealSettings.onCover === 'function') {
            revealSettings.onCover(self.content, self.revealers);
          }
          gsap.fromTo(targets, from_2, to_2);
        }
      },
      to_2 = {
        duration: revealSettings.duration || defaults.duration,
        ease: revealSettings.easing || defaults.easing,
        onComplete: function() {
          self.isAnimating = false;
          if (typeof revealSettings.onComplete === 'function') {
            revealSettings.onComplete(self.content, self.revealers);
          }
        }
      };

    var coverArea = revealSettings.coverArea || defaults.coverArea;
    if (direction === 'lr' || direction === 'rl') {
      from.scaleX = 0;
      to.scaleX = 1;
      from_2.scaleX = 1;
      to_2.scaleX = coverArea / 100;
    } else {
      from.scaleY = 0;
      to.scaleY = 1;
      from_2.scaleY = 1;
      to_2.scaleY = coverArea / 100;
    }

    if (typeof revealSettings.onStart === 'function') {
      revealSettings.onStart(self.content, self.revealers);
    }
    gsap.fromTo(targets, from, to);
  };
}

const els = document.querySelectorAll('[data-module="reveal"]');
els.forEach(function(element, index) {
  console.log(element.getAttribute('data-reveal-direction'));
  let current_reveal = new RevealFx(element, {
    isContentHidden: true,
    revealSettings: {
      backgroundColor: element.getAttribute('data-reveal-bgcolor'),
      direction: element.getAttribute('data-reveal-direction'),
      duration: element.getAttribute('data-reveal-duration'),
      easing: element.getAttribute('data-reveal-ease'),
      delay: element.getAttribute('data-reveal-delay'),
      onCover: function(contentEl) {
        contentEl.style.opacity = 1;
        element.classList.add('block-revealed');
      },
    },
  });
  current_reveal.reveal();
});