function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

function getStyle(el, styleProp) {
  var value, defaultView = el.ownerDocument.defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function (str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
      return (function (value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

var isSafari = /constructor/i.test(window.HTMLElement);
var isFF = !!navigator.userAgent.match(/firefox/i);

if (isSafari) {
  document.getElementsByTagName('html')[0].classList.add('safari');
}

// Remove click on button for demo purpose
Array.prototype.slice.call(document.querySelectorAll('.ng-button-distorted'), 0).forEach(function (bt) {
  bt.addEventListener('click', function (e) {
    e.preventDefault();
  });
});

export function initButtonDistorted(button) {
  function getWidth(circle) {
    return circle.clientWidth || parseFloat(getStyle(circle, 'width')) || 4;
  }

  function getHeight(circle) {
    return circle.clientHeight || parseFloat(getStyle(circle, 'height')) || 4;
  }

  if (!button) {
    return null;
  }

  if ((parseFloat(getStyle(button, 'width')) === 0 || parseFloat(getStyle(button, 'height')) === 0)
    || (isNaN(parseFloat(getStyle(button, 'width'))) || isNaN(parseFloat(getStyle(button, 'height'))))) {
    return null;
  }

  var container = button.querySelector('.ng-button-distorted__container');
  var circlesTopLeft = button.querySelectorAll('.circle.top-left');
  var circlesBottomRight = button.querySelectorAll('.circle.bottom-right');
  var filter = document.querySelectorAll('#filter-goo feGaussianBlur')[0];

  var timeLineCirclesTopLeft = new TimelineLite();
  var timeLineCirclesBottomRight = new TimelineLite();

  var timeLineTopLeft = new TimelineLite();
  var timeLineBottomRight = new TimelineLite();

  var timeLineButton = new TimelineLite({
    paused: true,
    onStart: function () {
      container.style.filter = 'url(#filter-goo)';
    },
    onUpdate: function () {
      filter.setAttribute('x', 0);
    },
    onComplete: function () {
      container.style.filter = 'none';
    }
  });

  timeLineCirclesTopLeft.to(circlesTopLeft, 1.2, {
    x: -getWidth(circlesTopLeft[0]),
    y: -getHeight(circlesTopLeft[0]),
    scaleY: 2,
    ease: SlowMo.ease.config(0.1, 0.7, false)
  });
  timeLineCirclesTopLeft.to(circlesTopLeft[0], 0.1, {
    scale: 0.2,
    x: `+=${getWidth(circlesTopLeft[0]) * 0.24}`,
    y: `-=${getHeight(circlesTopLeft[0]) * 0.08}`
  });
  timeLineCirclesTopLeft.to(circlesTopLeft[1], 0.1, {
    scaleX: 1,
    scaleY: 0.8,
    x: `-=${getWidth(circlesTopLeft[1]) * 0.4}`,
    y: `-=${getHeight(circlesTopLeft[1]) * 0.28}`
  }, '-=0.1');
  timeLineCirclesTopLeft.to(circlesTopLeft[2], 0.1, {
    scale: 0.2,
    x: `-=${getWidth(circlesTopLeft[2]) * 0.6}`,
    y: `+=${getHeight(circlesTopLeft[2]) * 0.24}`
  }, '-=0.1');
  timeLineCirclesTopLeft.to(circlesTopLeft[0], 1, {
    scale: 0,
    x: `-=${getWidth(circlesTopLeft[0]) * 0.2}`,
    y: `-=${getHeight(circlesTopLeft[0]) * 0.6}`,
    opacity: 0
  });
  timeLineCirclesTopLeft.to(circlesTopLeft[1], 1, {
    scaleX: 0.4,
    scaleY: 0.4,
    x: `-=${getWidth(circlesTopLeft[1]) * 0.4}`,
    y: `-=${getHeight(circlesTopLeft[1]) * 0.4}`,
    opacity: 0
  }, '-=1');
  timeLineCirclesTopLeft.to(circlesTopLeft[2], 1, {
    scale: 0,
    x: `-=${getWidth(circlesTopLeft[2]) * 0.6}`,
    y: `+=${getHeight(circlesTopLeft[2]) * 0.2}`,
    opacity: 0
  }, '-=1');

  timeLineTopLeft.set(circlesTopLeft, {x: 0, y: 0, rotation: -45});
  timeLineTopLeft.add(timeLineCirclesTopLeft);

  timeLineCirclesBottomRight.to(circlesBottomRight, 1.2, {
    x: getWidth(circlesBottomRight[0]),
    y: getHeight(circlesBottomRight[0]),
    scaleY: 2,
    ease: SlowMo.ease.config(0.1, 0.7, false)
  });
  timeLineCirclesBottomRight.to(circlesBottomRight[0], 0.1, {
    scale: 0.2,
    x: `-=${getWidth(circlesBottomRight[0]) * 0.24}`,
    y: `+=${getHeight(circlesBottomRight[0]) * 0.8}`
  });
  timeLineCirclesBottomRight.to(circlesBottomRight[1], 0.1, {
    scale: 0.8,
    x: `+=${getWidth(circlesBottomRight[1]) * 0.28}`,
    y: `+=${getHeight(circlesBottomRight[1]) * 0.12}`
  }, '-=0.1');
  timeLineCirclesBottomRight.to(circlesBottomRight[2], 0.1, {
    scale: 0.2,
    x: `+=${getWidth(circlesBottomRight[2]) * 0.6}`,
    y: `-=${getHeight(circlesBottomRight[2]) * 0.24}`
  }, '-=0.1');
  timeLineCirclesBottomRight.to(circlesBottomRight[0], 1, {
    scale: 0,
    x: `+=${getWidth(circlesBottomRight[0]) * 0.2}`,
    y: `+=${getHeight(circlesBottomRight[0]) * 0.6}`,
    opacity: 0
  });
  timeLineCirclesBottomRight.to(circlesBottomRight[1], 1, {
    scale: 0.4,
    x: `+=${getWidth(circlesBottomRight[1]) * 0.28}`,
    y: `+=${getHeight(circlesBottomRight[1]) * 0.28}`,
    opacity: 0
  }, '-=1');
  timeLineCirclesBottomRight.to(circlesBottomRight[2], 1, {
    scale: 0,
    x: `+=${getWidth(circlesBottomRight[2]) * 0.6}`,
    y: `-=${getHeight(circlesBottomRight[2]) * 0.2}`,
    opacity: 0
  }, '-=1');

  timeLineBottomRight.set(circlesBottomRight, {x: 0, y: 0, rotation: -45});
  timeLineBottomRight.add(timeLineCirclesBottomRight);

  timeLineButton.add(timeLineTopLeft);
  timeLineButton.to(button.parentNode.querySelectorAll('.ng-button-distorted__bg'), 0.8, {scaleY: 1.1}, 0.1);
  timeLineButton.add(timeLineBottomRight, 0.2);
  timeLineButton.to(button.parentNode.querySelectorAll('.ng-button-distorted__bg'), 1.8, {
    scale: 1,
    ease: Elastic.easeOut.config(1.2, 0.4)
  }, 1.2);
  timeLineButton.timeScale(2.6);

  return timeLineButton;
}
