<div id="canvas"></div>

/* Fullscreen */
html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #E6E6E6;
  font-family: sans-serif;
}

/* Centered canvas */
#canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
}

/*
  svgTween.js v1.0.0
  Licensed under the MIT license.
  https://www.opensource.org/licenses/mit-license.php

  Copyright 2016
  http://www.hellomichael.com/
*/

; (function(window) {
  'use strict';

  var svgTween = function (options) {
    var self = this;
    self.options = extend({}, self.options);      
    extend(self.options, options);
    self.init();
  };

  svgTween.prototype = {
    constructor: svgTween,

    options: {
      element:    null,
      keyframes:  null,
      duration:   null
    },

    init: function () {
      var self = this;

      // Reset and play tween
      self.resetTween(self.options.element, self.options.keyframes);
      self.playTween(self.options.element, self.options.keyframes, self.options.duration, 0);
    },

    /*
      Recursively loop through keyframes to create pauses or tweens

      @param {Object} element
      @param {Array}  keyframes
      @param {Int}    duration 
      @param {Int}    index
    */
    playTween: function(element, keyframes, duration, index) {
      var self = this, translateX, translateY, newDuration, easing;
      
      // Set keyframes we're transitioning to
      translateX = keyframes[index].x;
      translateY = keyframes[index].y;
      
      // Set duration as an initial pause or the difference of steps in between keyframes
      newDuration = index ? ((keyframes[index].step - keyframes[(index-1)].step) * duration) : (keyframes[index].step * duration);

      // Set easing parameter
      easing = mina[keyframes[index].easing];

      // Skip first tween if animation immediately starts on step 0
      if (index === 0 && keyframes[index].step === 0) {
        self.playTween(element, keyframes, duration, (index + 1));
      }

      // Or pause tween if initial keyframe
      else if (index === 0 && keyframes[index].step !== 0) {
        setTimeout(function() {
          if (index !== (keyframes.length - 1)) {
            self.playTween(element, keyframes, duration, (index + 1));
          }
        }, newDuration);
      }

      // Or animate tweens if keyframes exist
      else {
        element.animate({
          transform: 'T' + translateX + ' ' + translateY
        }, newDuration, easing, function() {
          if (index !== (keyframes.length - 1)) {
            self.playTween(element, keyframes, duration, (index + 1));
          }
        });
      }
    },

    /*
      Resets the illustration to the first keyframe

      @param {Object} element
      @param {Array}  keyframes
    */
    resetTween: function (element, keyframes) {
      var translateX = keyframes[0].x;
      var translateY = keyframes[0].y;

      element.transform('T' + translateX + ',' + translateY);
    }
  };

  /*
    Merges two objects together
    @param {Object} a 
    @param {Object} b
    @return {Object} sum
    http://stackoverflow.com/questions/11197247/javascript-equivalent-of-jquerys-extend-method
  */
  function extend(a, b) {
    for (var key in b) { 
      if (b.hasOwnProperty(key)) {
        a[key] = b[key];
      }
    }

    return a;
  }

  // Add to namespace
  window.svgTween = svgTween;
})(window);

/*
  svgAnimation.js v1.0.0
  Licensed under the MIT license.
  https://www.opensource.org/licenses/mit-license.php

  Copyright 2016
  http://www.hellomichael.com/
*/

; (function(window) {
  'use strict';

  var svgAnimation = function (options) {
    var self = this;
    self.options = extend({}, self.options);      
    extend(self.options, options);
    self.init();
  };

  svgAnimation.prototype = {
    constructor: svgAnimation,

    options: {
      canvas:     null,
      svg:        null
    },

    init: function() {
      var self = this;

      self.loadSVG(self.options.canvas, self.options.svg);
    },

    /*
      Loads the SVG into the DOM
      @param {Object}   canvas
      @param {String}   svg
      http://stackoverflow.com/questions/9723422/is-there-some-innerhtml-replacement-in-svg-xml
    */

    loadSVG: function(canvas, svg) {
      var self = this;

      Snap.load(svg, function(data) {
        // Place SVG nodes into DOM tree
        canvas.append(data);

        // Zipper animation
        var $zipper = canvas.select("#zipper");
        self.createTransformGroup($zipper);

        var duration = 2000/10;

        // Translate tween
        new svgTween({
          element: $zipper.select('.translate'),
          keyframes: [
            {
              "step": 2,
              "x": 90,
              "y": 0
            },

            {
              "step": 5,
              "x": 0,
              "y": 0,
              "easing": "easeOutQuint"
            }
          ],
          duration: duration
        });
      });
    },

    /*
      Create scale, rotate, and transform groups around an SVG DOM node
      @param {object} Snap element
    */
    createTransformGroup: function(element) {
      if (element.node) {
        var $translateGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        var $rotateGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        var $scaleGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');

        $scaleGroup.setAttribute('class', 'scale');
        $rotateGroup.setAttribute('class', 'rotate');
        $translateGroup.setAttribute('class', 'translate');

        // Clone original child nodes into scale group
        for (var i = 0; i < element.node.childNodes.length; i++) {
          $scaleGroup.appendChild(element.node.childNodes[i].cloneNode()); 
        }

        // Empty original node
        while (element.node.hasChildNodes()) {
          element.node.removeChild(element.node.lastChild);
        }

        // Replace with new transform groups
        element.node.appendChild($translateGroup).appendChild($rotateGroup).appendChild($scaleGroup);
      }
    }
  };

  /*
    Merges two objects together
    @param  {Object}  a 
    @param  {Object}  b
    @return {Object}  sum
    http://stackoverflow.com/questions/11197247/javascript-equivalent-of-jquerys-extend-method
  */
  function extend(a, b) {
    for (var key in b) { 
      if (b.hasOwnProperty(key)) {
        a[key] = b[key];
      }
    }

    return a;
  }

  // Add to global namespace
  window.svgAnimation = svgAnimation;
})(window);

(function() {
  var backpack = new svgAnimation(
    {
      canvas: Snap("#canvas"),
      svg: 'https://raw.githubusercontent.com/hellomichael/svgAnimation/master/example/svg/backpack.svg'
    }
  );
})();