text: var window=(typeof window === "undefined")?{}:window;(function (root, factory) { if(typeof define === "function" && define.amd) { define( factory); } else if(typeof module === "object" && module.exports) { module.exports = factory(); } else { root.bodymovin = factory(); } }(window, function() {var svgNS = "http://www.w3.org/2000/svg";
  var subframeEnabled = true;
  var expressionsPlugin;
  var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  var cachedColors = {};
  var bm_rounder = Math.round;
  var bm_rnd;
  var bm_pow = Math.pow;
  var bm_sqrt = Math.sqrt;
  var bm_abs = Math.abs;
  var bm_floor = Math.floor;
  var bm_max = Math.max;
  var bm_min = Math.min;
  var blitter = 10;
  
  var BMMath = {};
  (function(){
      var propertyNames = Object.getOwnPropertyNames(Math);
      var i, len = propertyNames.length;
      for(i=0;i<len;i+=1){
          BMMath[propertyNames[i]] = Math[propertyNames[i]];
      }
  }());
  
  function ProjectInterface(){return {}};
  
  BMMath.random = Math.random;
  BMMath.abs = function(val){
      var tOfVal = typeof val;
      if(tOfVal === 'object' && val.length){
          var absArr = Array.apply(null,{length:val.length});
          var i, len = val.length;
          for(i=0;i<len;i+=1){
              absArr[i] = Math.abs(val[i]);
          }
          return absArr;
      }
      return Math.abs(val);
  
  }
  var defaultCurveSegments = 150;
  var degToRads = Math.PI/180;
  var roundCorner = 0.5519;
  
  function roundValues(flag){
      if(flag){
          bm_rnd = Math.round;
      }else{
          bm_rnd = function(val){
              return val;
          };
      }
  }
  roundValues(false);
  
  function roundTo2Decimals(val){
      return Math.round(val*10000)/10000;
  }
  
  function roundTo3Decimals(val){
      return Math.round(val*100)/100;
  }
  
  function styleDiv(element){
      element.style.position = 'absolute';
      element.style.top = 0;
      element.style.left = 0;
      element.style.display = 'block';
      element.style.transformOrigin = element.style.webkitTransformOrigin = '0 0';
      element.style.backfaceVisibility  = element.style.webkitBackfaceVisibility = 'visible';
      element.style.transformStyle = element.style.webkitTransformStyle = element.style.mozTransformStyle = "preserve-3d";
  }
  
  function styleUnselectableDiv(element){
      element.style.userSelect = 'none';
      element.style.MozUserSelect = 'none';
      element.style.webkitUserSelect = 'none';
      element.style.oUserSelect = 'none';
  
  }
  
  function BMEnterFrameEvent(n,c,t,d){
      this.type = n;
      this.currentTime = c;
      this.totalTime = t;
      this.direction = d < 0 ? -1:1;
  }
  
  function BMCompleteEvent(n,d){
      this.type = n;
      this.direction = d < 0 ? -1:1;
  }
  
  function BMCompleteLoopEvent(n,c,t,d){
      this.type = n;
      this.currentLoop = c;
      this.totalLoops = t;
      this.direction = d < 0 ? -1:1;
  }
  
  function BMSegmentStartEvent(n,f,t){
      this.type = n;
      this.firstFrame = f;
      this.totalFrames = t;
  }
  
  function BMDestroyEvent(n,t){
      this.type = n;
      this.target = t;
  }
  
  function _addEventListener(eventName, callback){
  
      if (!this._cbs[eventName]){
          this._cbs[eventName] = [];
      }
      this._cbs[eventName].push(callback);
  
  	return function() {
  		this.removeEventListener(eventName, callback);
  	}.bind(this);
  }
  
  function _removeEventListener(eventName,callback){
  
      if (!callback){
          this._cbs[eventName] = null;
      }else if(this._cbs[eventName]){
          var i = 0, len = this._cbs[eventName].length;
          while(i<len){
              if(this._cbs[eventName][i] === callback){
                  this._cbs[eventName].splice(i,1);
                  i -=1;
                  len -= 1;
              }
              i += 1;
          }
          if(!this._cbs[eventName].length){
              this._cbs[eventName] = null;
          }
      }
  
  }
  
  function _triggerEvent(eventName, args){
      if (this._cbs[eventName]) {
          var len = this._cbs[eventName].length;
          for (var i = 0; i < len; i++){
              this._cbs[eventName][i](args);
          }
      }
  }
  
  function randomString(length, chars){
      if(chars === undefined){
          chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
      }
      var i;
      var result = '';
      for (i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
      return result;
  }
  
  function HSVtoRGB(h, s, v) {
      var r, g, b, i, f, p, q, t;
      if (arguments.length === 1) {
          s = h.s, v = h.v, h = h.h;
      }
      i = Math.floor(h * 6);
      f = h * 6 - i;
      p = v * (1 - s);
      q = v * (1 - f * s);
      t = v * (1 - (1 - f) * s);
      switch (i % 6) {
          case 0: r = v, g = t, b = p; break;
          case 1: r = q, g = v, b = p; break;
          case 2: r = p, g = v, b = t; break;
          case 3: r = p, g = q, b = v; break;
          case 4: r = t, g = p, b = v; break;
          case 5: r = v, g = p, b = q; break;
      }
      return [ r,
          g,
           b ];
  }
  
  function RGBtoHSV(r, g, b) {
      if (arguments.length === 1) {
          g = r.g, b = r.b, r = r.r;
      }
      var max = Math.max(r, g, b), min = Math.min(r, g, b),
          d = max - min,
          h,
          s = (max === 0 ? 0 : d / max),
          v = max / 255;
  
      switch (max) {
          case min: h = 0; break;
          case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break;
          case g: h = (b - r) + d * 2; h /= 6 * d; break;
          case b: h = (r - g) + d * 4; h /= 6 * d; break;
      }
  
      return [
           h,
           s,
           v
      ];
  }
  
  function addSaturationToRGB(color,offset){
      var hsv = RGBtoHSV(color[0]*255,color[1]*255,color[2]*255);
      hsv[1] += offset;
      if (hsv[1] > 1) {
          hsv[1] = 1;
      }
      else if (hsv[1] <= 0) {
          hsv[1] = 0;
      }
      return HSVtoRGB(hsv[0],hsv[1],hsv[2]);
  }
  
  function addBrightnessToRGB(color,offset){
      var hsv = RGBtoHSV(color[0]*255,color[1]*255,color[2]*255);
      hsv[2] += offset;
      if (hsv[2] > 1) {
          hsv[2] = 1;
      }
      else if (hsv[2] < 0) {
          hsv[2] = 0;
      }
      return HSVtoRGB(hsv[0],hsv[1],hsv[2]);
  }
  
  function addHueToRGB(color,offset) {
      var hsv = RGBtoHSV(color[0]*255,color[1]*255,color[2]*255);
      hsv[0] += offset/360;
      if (hsv[0] > 1) {
          hsv[0] -= 1;
      }
      else if (hsv[0] < 0) {
          hsv[0] += 1;
      }
      return HSVtoRGB(hsv[0],hsv[1],hsv[2]);
  }
  
  function componentToHex(c) {
      var hex = c.toString(16);
      return hex.length == 1 ? '0' + hex : hex;
  }
  
  var rgbToHex = (function(){
      var colorMap = [];
      var i;
      var hex;
      for(i=0;i<256;i+=1){
          hex = i.toString(16);
          colorMap[i] = hex.length == 1 ? '0' + hex : hex;
      }
  
      return function(r, g, b) {
          if(r<0){
              r = 0;
          }
          if(g<0){
              g = 0;
          }
          if(b<0){
              b = 0;
          }
          return '#' + colorMap[r] + colorMap[g] + colorMap[b];
      };
  }());
  
  function fillToRgba(hex,alpha){
      if(!cachedColors[hex]){
          var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
          cachedColors[hex] = parseInt(result[1], 16)+','+parseInt(result[2], 16)+','+parseInt(result[3], 16);
      }
      return 'rgba('+cachedColors[hex]+','+alpha+')';
  }
  
  var fillColorToString = (function(){
  
      var colorMap = [];
      return function(colorArr,alpha){
          if(alpha !== undefined){
              colorArr[3] = alpha;
          }
          if(!colorMap[colorArr[0]]){
              colorMap[colorArr[0]] = {};
          }
          if(!colorMap[colorArr[0]][colorArr[1]]){
              colorMap[colorArr[0]][colorArr[1]] = {};
          }
          if(!colorMap[colorArr[0]][colorArr[1]][colorArr[2]]){
              colorMap[colorArr[0]][colorArr[1]][colorArr[2]] = {};
          }
          if(!colorMap[colorArr[0]][colorArr[1]][colorArr[2]][colorArr[3]]){
              colorMap[colorArr[0]][colorArr[1]][colorArr[2]][colorArr[3]] = 'rgba(' + colorArr.join(',')+')';
          }
          return colorMap[colorArr[0]][colorArr[1]][colorArr[2]][colorArr[3]];
      };
  }());
  
  function RenderedFrame(tr,o) {
      this.tr = tr;
      this.o = o;
  }
  
  function LetterProps(o,sw,sc,fc,m,p){
      this.o = o;
      this.sw = sw;
      this.sc = sc;
      this.fc = fc;
      this.m = m;
      this.props = p;
  }
  
  function iterateDynamicProperties(num){
      var i, len = this.dynamicProperties;
      for(i=0;i<len;i+=1){
          this.dynamicProperties[i].getValue(num);
      }
  }
  
  function reversePath(paths){
      var newI = [], newO = [], newV = [];
      var i, len, newPaths = {};
      var init = 0;
      if (paths.c) {
          newI[0] = paths.o[0];
          newO[0] = paths.i[0];
          newV[0] = paths.v[0];
          init = 1;
      }
      len = paths.i.length;
      var cnt = len - 1;
  
      for (i = init; i < len; i += 1) {
          newI.push(paths.o[cnt]);
          newO.push(paths.i[cnt]);
          newV.push(paths.v[cnt]);
          cnt -= 1;
      }
  
      newPaths.i = newI;
      newPaths.o = newO;
      newPaths.v = newV;
  
      return newPaths;
  }
  /*!
   Transformation Matrix v2.0
   (c) Epistemex 2014-2015
   www.epistemex.com
   By Ken Fyrstenberg
   Contributions by leeoniya.
   License: MIT, header required.
   */
  
  /**
   * 2D transformation matrix object initialized with identity matrix.
   *
   * The matrix can synchronize a canvas context by supplying the context
   * as an argument, or later apply current absolute transform to an
   * existing context.
   *
   * All values are handled as floating point values.
   *
   * @param {CanvasRenderingContext2D} [context] - Optional context to sync with Matrix
   * @prop {number} a - scale x
   * @prop {number} b - shear y
   * @prop {number} c - shear x
   * @prop {number} d - scale y
   * @prop {number} e - translate x
   * @prop {number} f - translate y
   * @prop {CanvasRenderingContext2D|null} [context=null] - set or get current canvas context
   * @constructor
   */
  
  var Matrix = (function(){
  
      function reset(){
          this.props[0] = 1;
          this.props[1] = 0;
          this.props[2] = 0;
          this.props[3] = 0;
          this.props[4] = 0;
          this.props[5] = 1;
          this.props[6] = 0;
          this.props[7] = 0;
          this.props[8] = 0;
          this.props[9] = 0;
          this.props[10] = 1;
          this.props[11] = 0;
          this.props[12] = 0;
          this.props[13] = 0;
          this.props[14] = 0;
          this.props[15] = 1;
          return this;
      }
  
      function rotate(angle) {
          if(angle === 0){
              return this;
          }
          var mCos = Math.cos(angle);
          var mSin = Math.sin(angle);
          return this._t(mCos, -mSin,  0, 0
              , mSin,  mCos, 0, 0
              , 0,  0,  1, 0
              , 0, 0, 0, 1);
      }
  
      function rotateX(angle){
          if(angle === 0){
              return this;
          }
          var mCos = Math.cos(angle);
          var mSin = Math.sin(angle);
          return this._t(1, 0, 0, 0
              , 0, mCos, -mSin, 0
              , 0, mSin,  mCos, 0
              , 0, 0, 0, 1);
      }
  
      function rotateY(angle){
          if(angle === 0){
              return this;
          }
          var mCos = Math.cos(angle);
          var mSin = Math.sin(angle);
          return this._t(mCos,  0,  mSin, 0
              , 0, 1, 0, 0
              , -mSin,  0,  mCos, 0
              , 0, 0, 0, 1);
      }
  
      function rotateZ(angle){
          if(angle === 0){
              return this;
          }
          var mCos = Math.cos(angle);
          var mSin = Math.sin(angle);
          return this._t(mCos, -mSin,  0, 0
              , mSin,  mCos, 0, 0
              , 0,  0,  1, 0
              , 0, 0, 0, 1);
      }
  
      function shear(sx,sy){
          return this._t(1, sy, sx, 1, 0, 0);
      }
  
      function skew(ax, ay){
          return this.shear(Math.tan(ax), Math.tan(ay));
      }
  
      function skewFromAxis(ax, angle){
          var mCos = Math.cos(angle);
          var mSin = Math.sin(angle);
          return this._t(mCos, mSin,  0, 0
              , -mSin,  mCos, 0, 0
              , 0,  0,  1, 0
              , 0, 0, 0, 1)
              ._t(1, 0,  0, 0
              , Math.tan(ax),  1, 0, 0
              , 0,  0,  1, 0
              , 0, 0, 0, 1)
              ._t(mCos, -mSin,  0, 0
              , mSin,  mCos, 0, 0
              , 0,  0,  1, 0
              , 0, 0, 0, 1);
          //return this._t(mCos, mSin, -mSin, mCos, 0, 0)._t(1, 0, Math.tan(ax), 1, 0, 0)._t(mCos, -mSin, mSin, mCos, 0, 0);
      }
  
      function scale(sx, sy, sz) {
          sz = isNaN(sz) ? 1 : sz;
          if(sx == 1 && sy == 1 && sz == 1){
              return this;
          }
          return this._t(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1);
      }
  
      function setTransform(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) {
          this.props[0] = a;
          this.props[1] = b;
          this.props[2] = c;
          this.props[3] = d;
          this.props[4] = e;
          this.props[5] = f;
          this.props[6] = g;
          this.props[7] = h;
          this.props[8] = i;
          this.props[9] = j;
          this.props[10] = k;
          this.props[11] = l;
          this.props[12] = m;
          this.props[13] = n;
          this.props[14] = o;
          this.props[15] = p;
          return this;
      }
  
      function translate(tx, ty, tz) {
          tz = tz || 0;
          if(tx !== 0 || ty !== 0 || tz !== 0){
              return this._t(1,0,0,0,0,1,0,0,0,0,1,0,tx,ty,tz,1);
          }
          return this;
      }
  
      function transform(a2, b2, c2, d2, e2, f2, g2, h2, i2, j2, k2, l2, m2, n2, o2, p2) {
  
          if(a2 === 1 && b2 === 0 && c2 === 0 && d2 === 0 && e2 === 0 && f2 === 1 && g2 === 0 && h2 === 0 && i2 === 0 && j2 === 0 && k2 === 1 && l2 === 0){
              if(m2 !== 0 || n2 !== 0 || o2 !== 0){
  
                  this.props[12] = this.props[12] * a2 + this.props[13] * e2 + this.props[14] * i2 + this.props[15] * m2 ;
                  this.props[13] = this.props[12] * b2 + this.props[13] * f2 + this.props[14] * j2 + this.props[15] * n2 ;
                  this.props[14] = this.props[12] * c2 + this.props[13] * g2 + this.props[14] * k2 + this.props[15] * o2 ;
                  this.props[15] = this.props[12] * d2 + this.props[13] * h2 + this.props[14] * l2 + this.props[15] * p2 ;
              }
              this._identityCalculated = false;
              return this;
          }
  
          var a1 = this.props[0];
          var b1 = this.props[1];
          var c1 = this.props[2];
          var d1 = this.props[3];
          var e1 = this.props[4];
          var f1 = this.props[5];
          var g1 = this.props[6];
          var h1 = this.props[7];
          var i1 = this.props[8];
          var j1 = this.props[9];
          var k1 = this.props[10];
          var l1 = this.props[11];
          var m1 = this.props[12];
          var n1 = this.props[13];
          var o1 = this.props[14];
          var p1 = this.props[15];
  
          /* matrix order (canvas compatible):
           * ace
           * bdf
           * 001
           */
          this.props[0] = a1 * a2 + b1 * e2 + c1 * i2 + d1 * m2;
          this.props[1] = a1 * b2 + b1 * f2 + c1 * j2 + d1 * n2 ;
          this.props[2] = a1 * c2 + b1 * g2 + c1 * k2 + d1 * o2 ;
          this.props[3] = a1 * d2 + b1 * h2 + c1 * l2 + d1 * p2 ;
  
          this.props[4] = e1 * a2 + f1 * e2 + g1 * i2 + h1 * m2 ;
          this.props[5] = e1 * b2 + f1 * f2 + g1 * j2 + h1 * n2 ;
          this.props[6] = e1 * c2 + f1 * g2 + g1 * k2 + h1 * o2 ;
          this.props[7] = e1 * d2 + f1 * h2 + g1 * l2 + h1 * p2 ;
  
          this.props[8] = i1 * a2 + j1 * e2 + k1 * i2 + l1 * m2 ;
          this.props[9] = i1 * b2 + j1 * f2 + k1 * j2 + l1 * n2 ;
          this.props[10] = i1 * c2 + j1 * g2 + k1 * k2 + l1 * o2 ;
          this.props[11] = i1 * d2 + j1 * h2 + k1 * l2 + l1 * p2 ;
  
          this.props[12] = m1 * a2 + n1 * e2 + o1 * i2 + p1 * m2 ;
          this.props[13] = m1 * b2 + n1 * f2 + o1 * j2 + p1 * n2 ;
          this.props[14] = m1 * c2 + n1 * g2 + o1 * k2 + p1 * o2 ;
          this.props[15] = m1 * d2 + n1 * h2 + o1 * l2 + p1 * p2 ;
  
          this._identityCalculated = false;
          return this;
      }
  
      function isIdentity() {
          if(!this._identityCalculated){
              this._identity = !(this.props[0] !== 1 || this.props[1] !== 0 || this.props[2] !== 0 || this.props[3] !== 0
                  || this.props[4] !== 0 || this.props[5] !== 1 || this.props[6] !== 0 || this.props[7] !== 0
                  || this.props[8] !== 0 || this.props[9] !== 0 || this.props[10] !== 1 || this.props[11] !== 0
                  || this.props[12] !== 0 || this.props[13] !== 0 || this.props[14] !== 0 || this.props[15] !== 1);
              this._identityCalculated = true;
          }
          return this._identity;
      }
  
      function clone(matr){
          var i;
          for(i=0;i<16;i+=1){
              matr.props[i] = this.props[i];
          }
      }
  
      function cloneFromProps(props){
          var i;
          for(i=0;i<16;i+=1){
              this.props[i] = props[i];
          }
      }
  
      function applyToPoint(x, y, z) {
  
          return {
              x: x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],
              y: x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],
              z: x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]
          };
          /*return {
           x: x * me.a + y * me.c + me.e,
           y: x * me.b + y * me.d + me.f
           };*/
      }
      function applyToX(x, y, z) {
          return x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12];
      }
      function applyToY(x, y, z) {
          return x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13];
      }
      function applyToZ(x, y, z) {
          return x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14];
      }
  
      function inversePoint(pt) {
          var determinant = this.props[0] * this.props[5] - this.props[1] * this.props[4];
          var a = this.props[5]/determinant;
          var b = - this.props[1]/determinant;
          var c = - this.props[4]/determinant;
          var d = this.props[0]/determinant;
          var e = (this.props[4] * this.props[13] - this.props[5] * this.props[12])/determinant;
          var f = - (this.props[0] * this.props[13] - this.props[1] * this.props[12])/determinant;
          return [pt[0] * a + pt[1] * c + e, pt[0] * b + pt[1] * d + f, 0];
      }
  
      function inversePoints(pts){
          var i, len = pts.length, retPts = [];
          for(i=0;i<len;i+=1){
              retPts[i] = inversePoint(pts[i]);
          }
          return retPts;
      }
  
      function applyToPointArray(x,y,z,dimensions){
          if(dimensions && dimensions === 2) {
              var arr = point_pool.newPoint();
              arr[0] = x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12]; 
              arr[1] = x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13]; 
              return arr;    
          }
          return [x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]];
      }
      function applyToPointStringified(x, y) {
          if(this.isIdentity()) {
              return x + ',' + y;
          }
          return (bm_rnd(x * this.props[0] + y * this.props[4] + this.props[12]))+','+(bm_rnd(x * this.props[1] + y * this.props[5] + this.props[13]));
      }
  
      function toArray() {
          return [this.props[0],this.props[1],this.props[2],this.props[3],this.props[4],this.props[5],this.props[6],this.props[7],this.props[8],this.props[9],this.props[10],this.props[11],this.props[12],this.props[13],this.props[14],this.props[15]];
      }
  
      function toCSS() {
          if(isSafari){
              return "matrix3d(" + roundTo2Decimals(this.props[0]) + ',' + roundTo2Decimals(this.props[1]) + ',' + roundTo2Decimals(this.props[2]) + ',' + roundTo2Decimals(this.props[3]) + ',' + roundTo2Decimals(this.props[4]) + ',' + roundTo2Decimals(this.props[5]) + ',' + roundTo2Decimals(this.props[6]) + ',' + roundTo2Decimals(this.props[7]) + ',' + roundTo2Decimals(this.props[8]) + ',' + roundTo2Decimals(this.props[9]) + ',' + roundTo2Decimals(this.props[10]) + ',' + roundTo2Decimals(this.props[11]) + ',' + roundTo2Decimals(this.props[12]) + ',' + roundTo2Decimals(this.props[13]) + ',' + roundTo2Decimals(this.props[14]) + ',' + roundTo2Decimals(this.props[15]) + ')';
          } else {
              this.cssParts[1] = this.props.join(',');
              return this.cssParts.join('');
          }
      }
  
      function to2dCSS() {
          return "matrix(" + this.props[0] + ',' + this.props[1] + ',' + this.props[4] + ',' + this.props[5] + ',' + this.props[12] + ',' + this.props[13] + ")";
      }
  
      function toString() {
          return "" + this.toArray();
      }
  
      return function(){
          this.reset = reset;
          this.rotate = rotate;
          this.rotateX = rotateX;
          this.rotateY = rotateY;
          this.rotateZ = rotateZ;
          this.skew = skew;
          this.skewFromAxis = skewFromAxis;
          this.shear = shear;
          this.scale = scale;
          this.setTransform = setTransform;
          this.translate = translate;
          this.transform = transform;
          this.applyToPoint = applyToPoint;
          this.applyToX = applyToX;
          this.applyToY = applyToY;
          this.applyToZ = applyToZ;
          this.applyToPointArray = applyToPointArray;
          this.applyToPointStringified = applyToPointStringified;
          this.toArray = toArray;
          this.toCSS = toCSS;
          this.to2dCSS = to2dCSS;
          this.toString = toString;
          this.clone = clone;
          this.cloneFromProps = cloneFromProps;
          this.inversePoints = inversePoints;
          this.inversePoint = inversePoint;
          this._t = this.transform;
          this.isIdentity = isIdentity;
          this._identity = true;
          this._identityCalculated = false;
  
          this.props = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];
  
          this.cssParts = ['matrix3d(','',')'];
      }
  }());
  
  function Matrix() {
  
  
  }
  
  /*
   Copyright 2014 David Bau.
  
   Permission is hereby granted, free of charge, to any person obtaining
   a copy of this software and associated documentation files (the
   "Software"), to deal in the Software without restriction, including
   without limitation the rights to use, copy, modify, merge, publish,
   distribute, sublicense, and/or sell copies of the Software, and to
   permit persons to whom the Software is furnished to do so, subject to
   the following conditions:
  
   The above copyright notice and this permission notice shall be
   included in all copies or substantial portions of the Software.
  
   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
   EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
   MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
   IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
   CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
   TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
   SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  
   */
  
  (function (pool, math) {
  //
  // The following constants are related to IEEE 754 limits.
  //
      var global = this,
          width = 256,        // each RC4 output is 0 <= x < 256
          chunks = 6,         // at least six RC4 outputs for each double
          digits = 52,        // there are 52 significant digits in a double
          rngname = 'random', // rngname: name for Math.random and Math.seedrandom
          startdenom = math.pow(width, chunks),
          significance = math.pow(2, digits),
          overflow = significance * 2,
          mask = width - 1,
          nodecrypto;         // node.js crypto module, initialized at the bottom.
  
  //
  // seedrandom()
  // This is the seedrandom function described above.
  //
      function seedrandom(seed, options, callback) {
          var key = [];
          options = (options == true) ? { entropy: true } : (options || {});
  
          // Flatten the seed string or build one from local entropy if needed.
          var shortseed = mixkey(flatten(
              options.entropy ? [seed, tostring(pool)] :
                  (seed == null) ? autoseed() : seed, 3), key);
  
          // Use the seed to initialize an ARC4 generator.
          var arc4 = new ARC4(key);
  
          // This function returns a random double in [0, 1) that contains
          // randomness in every bit of the mantissa of the IEEE 754 value.
          var prng = function() {
              var n = arc4.g(chunks),             // Start with a numerator n < 2 ^ 48
                  d = startdenom,                 //   and denominator d = 2 ^ 48.
                  x = 0;                          //   and no 'extra last byte'.
              while (n < significance) {          // Fill up all significant digits by
                  n = (n + x) * width;              //   shifting numerator and
                  d *= width;                       //   denominator and generating a
                  x = arc4.g(1);                    //   new least-significant-byte.
              }
              while (n >= overflow) {             // To avoid rounding up, before adding
                  n /= 2;                           //   last byte, shift everything
                  d /= 2;                           //   right using integer math until
                  x >>>= 1;                         //   we have exactly the desired bits.
              }
              return (n + x) / d;                 // Form the number within [0, 1).
          };
  
          prng.int32 = function() { return arc4.g(4) | 0; }
          prng.quick = function() { return arc4.g(4) / 0x100000000; }
          prng.double = prng;
  
          // Mix the randomness into accumulated entropy.
          mixkey(tostring(arc4.S), pool);
  
          // Calling convention: what to return as a function of prng, seed, is_math.
          return (options.pass || callback ||
          function(prng, seed, is_math_call, state) {
              if (state) {
                  // Load the arc4 state from the given state if it has an S array.
                  if (state.S) { copy(state, arc4); }
                  // Only provide the .state method if requested via options.state.
                  prng.state = function() { return copy(arc4, {}); }
              }
  
              // If called as a method of Math (Math.seedrandom()), mutate
              // Math.random because that is how seedrandom.js has worked since v1.0.
              if (is_math_call) { math[rngname] = prng; return seed; }
  
              // Otherwise, it is a newer calling convention, so return the
              // prng directly.
              else return prng;
          })(
              prng,
              shortseed,
              'global' in options ? options.global : (this == math),
              options.state);
      }
      math['seed' + rngname] = seedrandom;
  
  //
  // ARC4
  //
  // An ARC4 implementation.  The constructor takes a key in the form of
  // an array of at most (width) integers that should be 0 <= x < (width).
  //
  // The g(count) method returns a pseudorandom integer that concatenates
  // the next (count) outputs from ARC4.  Its return value is a number x
  // that is in the range 0 <= x < (width ^ count).
  //
      function ARC4(key) {
          var t, keylen = key.length,
              me = this, i = 0, j = me.i = me.j = 0, s = me.S = [];
  
          // The empty key [] is treated as [0].
          if (!keylen) { key = [keylen++]; }
  
          // Set up S using the standard key scheduling algorithm.
          while (i < width) {
              s[i] = i++;
          }
          for (i = 0; i < width; i++) {
              s[i] = s[j = mask & (j + key[i % keylen] + (t = s[i]))];
              s[j] = t;
          }
  
          // The "g" method returns the next (count) outputs as one number.
          (me.g = function(count) {
              // Using instance members instead of closure state nearly doubles speed.
              var t, r = 0,
                  i = me.i, j = me.j, s = me.S;
              while (count--) {
                  t = s[i = mask & (i + 1)];
                  r = r * width + s[mask & ((s[i] = s[j = mask & (j + t)]) + (s[j] = t))];
              }
              me.i = i; me.j = j;
              return r;
              // For robust unpredictability, the function call below automatically
              // discards an initial batch of values.  This is called RC4-drop[256].
              // See http://google.com/search?q=rsa+fluhrer+response&btnI
          })(width);
      }
  
  //
  // copy()
  // Copies internal state of ARC4 to or from a plain object.
  //
      function copy(f, t) {
          t.i = f.i;
          t.j = f.j;
          t.S = f.S.slice();
          return t;
      };
  
  //
  // flatten()
  // Converts an object tree to nested arrays of strings.
  //
      function flatten(obj, depth) {
          var result = [], typ = (typeof obj), prop;
          if (depth && typ == 'object') {
              for (prop in obj) {
                  try { result.push(flatten(obj[prop], depth - 1)); } catch (e) {}
              }
          }
          return (result.length ? result : typ == 'string' ? obj : obj + '\0');
      }
  
  //
  // mixkey()
  // Mixes a string seed into a key that is an array of integers, and
  // returns a shortened string seed that is equivalent to the result key.
  //
      function mixkey(seed, key) {
          var stringseed = seed + '', smear, j = 0;
          while (j < stringseed.length) {
              key[mask & j] =
                  mask & ((smear ^= key[mask & j] * 19) + stringseed.charCodeAt(j++));
          }
          return tostring(key);
      }
  
  //
  // autoseed()
  // Returns an object for autoseeding, using window.crypto and Node crypto
  // module if available.
  //
      function autoseed() {
          try {
              if (nodecrypto) { return tostring(nodecrypto.randomBytes(width)); }
              var out = new Uint8Array(width);
              (global.crypto || global.msCrypto).getRandomValues(out);
              return tostring(out);
          } catch (e) {
              var browser = global.navigator,
                  plugins = browser && browser.plugins;
              return [+new Date, global, plugins, global.screen, tostring(pool)];
          }
      }
  
  //
  // tostring()
  // Converts an array of charcodes to a string
  //
      function tostring(a) {
          return String.fromCharCode.apply(0, a);
      }
  
  //
  // When seedrandom.js is loaded, we immediately mix a few bits
  // from the built-in RNG into the entropy pool.  Because we do
  // not want to interfere with deterministic PRNG state later,
  // seedrandom will not call math.random on its own again after
  // initialization.
  //
      mixkey(math.random(), pool);
  
  //
  // Nodejs and AMD support: export the implementation as a module using
  // either convention.
  //
  
  // End anonymous scope, and pass initial values.
  })(
      [],     // pool: entropy pool starts empty
      BMMath    // math: package containing random, pow, and seedrandom
  );
  var BezierFactory = (function(){
      /**
       * BezierEasing - use bezier curve for transition easing function
       * by Gaëtan Renaudeau 2014 - 2015 – MIT License
       *
       * Credits: is based on Firefox's nsSMILKeySpline.cpp
       * Usage:
       * var spline = BezierEasing([ 0.25, 0.1, 0.25, 1.0 ])
       * spline.get(x) => returns the easing value | x must be in [0, 1] range
       *
       */
  
          var ob = {};
      ob.getBezierEasing = getBezierEasing;
      var beziers = {};
  
      function getBezierEasing(a,b,c,d,nm){
          var str = nm || ('bez_' + a+'_'+b+'_'+c+'_'+d).replace(/\./g, 'p');
          if(beziers[str]){
              return beziers[str];
          }
          var bezEasing = new BezierEasing([a,b,c,d]);
          beziers[str] = bezEasing;
          return bezEasing;
      }
  
  // These values are established by empiricism with tests (tradeoff: performance VS precision)
      var NEWTON_ITERATIONS = 4;
      var NEWTON_MIN_SLOPE = 0.001;
      var SUBDIVISION_PRECISION = 0.0000001;
      var SUBDIVISION_MAX_ITERATIONS = 10;
  
      var kSplineTableSize = 11;
      var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
  
      var float32ArraySupported = typeof Float32Array === "function";
  
      function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
      function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
      function C (aA1)      { return 3.0 * aA1; }
  
  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
      function calcBezier (aT, aA1, aA2) {
          return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT;
      }
  
  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
      function getSlope (aT, aA1, aA2) {
          return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
      }
  
      function binarySubdivide (aX, aA, aB, mX1, mX2) {
          var currentX, currentT, i = 0;
          do {
              currentT = aA + (aB - aA) / 2.0;
              currentX = calcBezier(currentT, mX1, mX2) - aX;
              if (currentX > 0.0) {
                  aB = currentT;
              } else {
                  aA = currentT;
              }
          } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
          return currentT;
      }
  
      function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
          for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
              var currentSlope = getSlope(aGuessT, mX1, mX2);
              if (currentSlope === 0.0) return aGuessT;
              var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
              aGuessT -= currentX / currentSlope;
          }
          return aGuessT;
      }
  
      /**
       * points is an array of [ mX1, mY1, mX2, mY2 ]
       */
      function BezierEasing (points) {
          this._p = points;
          this._mSampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
          this._precomputed = false;
  
          this.get = this.get.bind(this);
      }
  
      BezierEasing.prototype = {
  
          get: function (x) {
              var mX1 = this._p[0],
                  mY1 = this._p[1],
                  mX2 = this._p[2],
                  mY2 = this._p[3];
              if (!this._precomputed) this._precompute();
              if (mX1 === mY1 && mX2 === mY2) return x; // linear
              // Because JavaScript number are imprecise, we should guarantee the extremes are right.
              if (x === 0) return 0;
              if (x === 1) return 1;
              return calcBezier(this._getTForX(x), mY1, mY2);
          },
  
          // Private part
  
          _precompute: function () {
              var mX1 = this._p[0],
                  mY1 = this._p[1],
                  mX2 = this._p[2],
                  mY2 = this._p[3];
              this._precomputed = true;
              if (mX1 !== mY1 || mX2 !== mY2)
                  this._calcSampleValues();
          },
  
          _calcSampleValues: function () {
              var mX1 = this._p[0],
                  mX2 = this._p[2];
              for (var i = 0; i < kSplineTableSize; ++i) {
                  this._mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
              }
          },
  
          /**
           * getTForX chose the fastest heuristic to determine the percentage value precisely from a given X projection.
           */
          _getTForX: function (aX) {
              var mX1 = this._p[0],
                  mX2 = this._p[2],
                  mSampleValues = this._mSampleValues;
  
              var intervalStart = 0.0;
              var currentSample = 1;
              var lastSample = kSplineTableSize - 1;
  
              for (; currentSample !== lastSample && mSampleValues[currentSample] <= aX; ++currentSample) {
                  intervalStart += kSampleStepSize;
              }
              --currentSample;
  
              // Interpolate to provide an initial guess for t
              var dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample+1] - mSampleValues[currentSample]);
              var guessForT = intervalStart + dist * kSampleStepSize;
  
              var initialSlope = getSlope(guessForT, mX1, mX2);
              if (initialSlope >= NEWTON_MIN_SLOPE) {
                  return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
              } else if (initialSlope === 0.0) {
                  return guessForT;
              } else {
                  return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
              }
          }
      };
  
      return ob;
  
  }())
  
  
  function matrixManagerFunction(){
  
      var mat = new Matrix();
  
      var returnMatrix2D = function(rX, scaleX, scaleY, tX, tY){
          return mat.reset().translate(tX,tY).rotate(rX).scale(scaleX,scaleY).toCSS();
      };
  
      var getMatrix = function(animData){
          return returnMatrix2D(animData.tr.r[2],animData.tr.s[0],animData.tr.s[1],animData.tr.p[0],animData.tr.p[1]);
      };
  
      return {
          getMatrix : getMatrix
      };
  
  }
  var MatrixManager = matrixManagerFunction;
  (function () {
      var lastTime = 0;
      var vendors = ['ms', 'moz', 'webkit', 'o'];
      for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
          window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
          window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
      }
      if(!window.requestAnimationFrame)
          window.requestAnimationFrame = function (callback, element) {
              var currTime = new Date().getTime();
              var timeToCall = Math.max(0, 16 - (currTime - lastTime));
              var id = window.setTimeout(function () {
                      callback(currTime + timeToCall);
                  },
                  timeToCall);
              lastTime = currTime + timeToCall;
              return id;
          };
      if(!window.cancelAnimationFrame)
          window.cancelAnimationFrame = function (id) {
              clearTimeout(id);
          };
  }());
  function createElement(parent,child,params){
      if(child){
          child.prototype = Object.create(parent.prototype);
          child.prototype.constructor = child;
          child.prototype._parent = parent.prototype;
      }else{
          var instance = Object.create(parent.prototype,params);
          var getType = {};
          if(instance && getType.toString.call(instance.init) === '[object Function]'){
              instance.init();
          }
          return instance;
      }
  }
  
  function extendPrototype(source,destination){
      for (var attr in source.prototype) {
          if (source.prototype.hasOwnProperty(attr)) destination.prototype[attr] = source.prototype[attr];
      }
  }
  function bezFunction(){
  
      var easingFunctions = [];
      var math = Math;
  
      function pointOnLine2D(x1,y1, x2,y2, x3,y3){
          var det1 = (x1*y2) + (y1*x3) + (x2*y3) - (x3*y2) - (y3*x1) - (x2*y1);
          return det1 > -0.0001 && det1 < 0.0001;
      }
  
      function pointOnLine3D(x1,y1,z1, x2,y2,z2, x3,y3,z3){
          if(z1 === 0 && z2 === 0 && z3 === 0) {
              return pointOnLine2D(x1,y1, x2,y2, x3,y3);
          }
          var dist1 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) + Math.pow(z2 - z1, 2));
          var dist2 = Math.sqrt(Math.pow(x3 - x1, 2) + Math.pow(y3 - y1, 2) + Math.pow(z3 - z1, 2));
          var dist3 = Math.sqrt(Math.pow(x3 - x2, 2) + Math.pow(y3 - y2, 2) + Math.pow(z3 - z2, 2));
          var diffDist;
          if(dist1 > dist2){
              if(dist1 > dist3){
                  diffDist = dist1 - dist2 - dist3;
              } else {
                  diffDist = dist3 - dist2 - dist1;
              }
          } else if(dist3 > dist2){
              diffDist = dist3 - dist2 - dist1;
          } else {
              diffDist = dist2 - dist1 - dist3;
          }
          return diffDist > -0.0001 && diffDist < 0.0001;
      }
  
      /*function getEasingCurve(aa,bb,cc,dd,encodedFuncName) {
          if(!encodedFuncName){
              encodedFuncName = ('bez_' + aa+'_'+bb+'_'+cc+'_'+dd).replace(/\./g, 'p');
          }
          if(easingFunctions[encodedFuncName]){
              return easingFunctions[encodedFuncName];
          }
          var A0, B0, C0;
          var A1, B1, C1;
          easingFunctions[encodedFuncName] = function(tt) {
              var x = tt;
              var i = 0, z;
              while (++i < 20) {
                  C0 = 3 * aa;
                  B0 = 3 * (cc - aa) - C0;
                  A0 = 1 - C0 - B0;
                  z = (x * (C0 + x * (B0 + x * A0))) - tt;
                  if (bm_abs(z) < 1e-3) break;
                  x -= z / (C0 + x * (2 * B0 + 3 * A0 * x));
              }
              C1 = 3 * bb;
              B1 = 3 * (dd - bb) - C1;
              A1 = 1 - C1 - B1;
              var polyB = x * (C1 + x * (B1 + x * A1));
              //return c * polyB + b;
              return polyB;
          };
          return easingFunctions[encodedFuncName];
      }*/
      var getBezierLength = (function(){
  
          function Segment(l,p){
              this.l = l;
              this.p = p;
          }
  
          return function(pt1,pt2,pt3,pt4){
              var curveSegments = defaultCurveSegments;
              var k;
              var i, len;
              var ptCoord,perc,addedLength = 0;
              var ptDistance;
              var point = [],lastPoint = [];
              var lengthData = {
                  addedLength: 0,
                  segments: []
              };
              len = pt3.length;
              for(k=0;k<curveSegments;k+=1){
                  perc = k/(curveSegments-1);
                  ptDistance = 0;
                  for(i=0;i<len;i+=1){
                      ptCoord = bm_pow(1-perc,3)*pt1[i]+3*bm_pow(1-perc,2)*perc*pt3[i]+3*(1-perc)*bm_pow(perc,2)*pt4[i]+bm_pow(perc,3)*pt2[i];
                      point[i] = ptCoord;
                      if(lastPoint[i] !== null){
                          ptDistance += bm_pow(point[i] - lastPoint[i],2);
                      }
                      lastPoint[i] = point[i];
                  }
                  if(ptDistance){
                      ptDistance = bm_sqrt(ptDistance);
                      addedLength += ptDistance;
                  }
                  lengthData.segments.push(new Segment(addedLength,perc));
              }
              lengthData.addedLength = addedLength;
              return lengthData;
          };
      }());
  
      function BezierData(length){
          this.segmentLength = 0;
          this.points = new Array(length);
      }
  
      function PointData(partial,point){
          this.partialLength = partial;
          this.point = point;
      }
  
      var buildBezierData = (function(){
  
          var storedData = {};
  
          return function (keyData){
              var pt1 = keyData.s;
              var pt2 = keyData.e;
              var pt3 = keyData.to;
              var pt4 = keyData.ti;
              var bezierName = (pt1.join('_')+'_'+pt2.join('_')+'_'+pt3.join('_')+'_'+pt4.join('_')).replace(/\./g, 'p');
              if(storedData[bezierName]){
                  keyData.bezierData = storedData[bezierName];
                  return;
              }
          var curveSegments = defaultCurveSegments;
          var k, i, len;
              var ptCoord,perc,addedLength = 0;
              var ptDistance;
              var point,lastPoint = null;
              if(pt1.length === 2 && (pt1[0] != pt2[0] || pt1[1] != pt2[1]) && pointOnLine2D(pt1[0],pt1[1],pt2[0],pt2[1],pt1[0]+pt3[0],pt1[1]+pt3[1]) && pointOnLine2D(pt1[0],pt1[1],pt2[0],pt2[1],pt2[0]+pt4[0],pt2[1]+pt4[1])){
                  curveSegments = 2;
              }
              var bezierData = new BezierData(curveSegments);
              len = pt3.length;
              for(k=0;k<curveSegments;k+=1){
              point = new Array(len);
                  perc = k/(curveSegments-1);
                  ptDistance = 0;
                  for(i=0;i<len;i+=1){
                  ptCoord = bm_pow(1-perc,3)*pt1[i]+3*bm_pow(1-perc,2)*perc*(pt1[i] + pt3[i])+3*(1-perc)*bm_pow(perc,2)*(pt2[i] + pt4[i])+bm_pow(perc,3)*pt2[i];
                  point[i] = ptCoord;
                      if(lastPoint !== null){
                      ptDistance += bm_pow(point[i] - lastPoint[i],2);
                      }
                  }
              ptDistance = bm_sqrt(ptDistance);
                  addedLength += ptDistance;
                  bezierData.points[k] = new PointData(ptDistance,point);
                  lastPoint = point;
              }
              bezierData.segmentLength = addedLength;
              keyData.bezierData = bezierData;
              storedData[bezierName] = bezierData;
  
          }
      }());
  
      function getDistancePerc(perc,bezierData){
          var segments = bezierData.segments;
          var len = segments.length;
          var initPos = bm_floor((len-1)*perc);
          var lengthPos = perc*bezierData.addedLength;
          var lPerc = 0;
          if(lengthPos == segments[initPos].l){
              return segments[initPos].p;
          }else{
              var dir = segments[initPos].l > lengthPos ? -1 : 1;
              var flag = true;
              while(flag){
                  if(segments[initPos].l <= lengthPos && segments[initPos+1].l > lengthPos){
                      lPerc = (lengthPos - segments[initPos].l)/(segments[initPos+1].l-segments[initPos].l);
                      flag = false;
                  }else{
                      initPos += dir;
                  }
                  if(initPos < 0 || initPos >= len - 1){
                      flag = false;
                  }
              }
              return segments[initPos].p + (segments[initPos+1].p - segments[initPos].p)*lPerc;
          }
      }
  
      function SegmentPoints(){
          this.pt1 = new Array(2);
          this.pt2 = new Array(2);
          this.pt3 = new Array(2);
          this.pt4 = new Array(2);
      }
  
      function getNewSegment(pt1,pt2,pt3,pt4,startPerc,endPerc, bezierData){
  
          var pts = new SegmentPoints();
          startPerc = startPerc < 0 ? 0 : startPerc > 1 ? 1 : startPerc;
          var t0 = getDistancePerc(startPerc,bezierData);
          endPerc = endPerc > 1 ? 1 : endPerc;
          var t1 = getDistancePerc(endPerc,bezierData);
          var i, len = pt1.length;
          var u0 = 1 - t0;
          var u1 = 1 - t1;
          //Math.round(num * 100) / 100
          for(i=0;i<len;i+=1){
              pts.pt1[i] =  Math.round((u0*u0*u0* pt1[i] + (t0*u0*u0 + u0*t0*u0 + u0*u0*t0) * pt3[i] + (t0*t0*u0 + u0*t0*t0 + t0*u0*t0)* pt4[i] + t0*t0*t0* pt2[i])* 1000) / 1000;
              pts.pt3[i] = Math.round((u0*u0*u1*pt1[i] + (t0*u0*u1 + u0*t0*u1 + u0*u0*t1)* pt3[i] + (t0*t0*u1 + u0*t0*t1 + t0*u0*t1)* pt4[i] + t0*t0*t1* pt2[i])* 1000) / 1000;
              pts.pt4[i] = Math.round((u0*u1*u1* pt1[i] + (t0*u1*u1 + u0*t1*u1 + u0*u1*t1)* pt3[i] + (t0*t1*u1 + u0*t1*t1 + t0*u1*t1)* pt4[i] + t0*t1*t1* pt2[i])* 1000) / 1000;
              pts.pt2[i] = Math.round((u1*u1*u1* pt1[i] + (t1*u1*u1 + u1*t1*u1 + u1*u1*t1)* pt3[i] + (t1*t1*u1 + u1*t1*t1 + t1*u1*t1)*pt4[i] + t1*t1*t1* pt2[i])* 1000) / 1000;
          }
          return pts;
      }
  
      return {
          //getEasingCurve : getEasingCurve,
          getBezierLength : getBezierLength,
          getNewSegment : getNewSegment,
          buildBezierData : buildBezierData,
          pointOnLine2D : pointOnLine2D,
          pointOnLine3D : pointOnLine3D
      };
  }
  
  var bez = bezFunction();
  function dataFunctionManager(){
  
      //var tCanvasHelper = document.createElement('canvas').getContext('2d');
  
      function completeLayers(layers, comps, fontManager){
          var layerData;
          var animArray, lastFrame;
          var i, len = layers.length;
          var j, jLen, k, kLen;
          for(i=0;i<len;i+=1){
              layerData = layers[i];
              if(!('ks' in layerData) || layerData.completed){
                  continue;
              }
              layerData.completed = true;
              if(layerData.tt){
                  layers[i-1].td = layerData.tt;
              }
              animArray = [];
              lastFrame = -1;
              if(layerData.hasMask){
                  var maskProps = layerData.masksProperties;
                  jLen = maskProps.length;
                  for(j=0;j<jLen;j+=1){
                      if(maskProps[j].pt.k.i){
                          convertPathsToAbsoluteValues(maskProps[j].pt.k);
                      }else{
                          kLen = maskProps[j].pt.k.length;
                          for(k=0;k<kLen;k+=1){
                              if(maskProps[j].pt.k[k].s){
                                  convertPathsToAbsoluteValues(maskProps[j].pt.k[k].s[0]);
                              }
                              if(maskProps[j].pt.k[k].e){
                                  convertPathsToAbsoluteValues(maskProps[j].pt.k[k].e[0]);
                              }
                          }
                      }
                  }
              }
              if(layerData.ty===0){
                  layerData.layers = findCompLayers(layerData.refId, comps);
                  completeLayers(layerData.layers,comps, fontManager);
              }else if(layerData.ty === 4){
                  completeShapes(layerData.shapes);
              }else if(layerData.ty == 5){
                  completeText(layerData, fontManager);
              }
          }
      }
  
      function findCompLayers(id,comps){
          var i = 0, len = comps.length;
          while(i<len){
              if(comps[i].id === id){
                  return comps[i].layers;
              }
              i += 1;
          }
      }
  
      function completeShapes(arr){
          var i, len = arr.length;
          var j, jLen;
          var hasPaths = false;
          for(i=len-1;i>=0;i-=1){
              if(arr[i].ty == 'sh'){
                  if(arr[i].ks.k.i){
                      convertPathsToAbsoluteValues(arr[i].ks.k);
                  }else{
                      jLen = arr[i].ks.k.length;
                      for(j=0;j<jLen;j+=1){
                          if(arr[i].ks.k[j].s){
                              convertPathsToAbsoluteValues(arr[i].ks.k[j].s[0]);
                          }
                          if(arr[i].ks.k[j].e){
                              convertPathsToAbsoluteValues(arr[i].ks.k[j].e[0]);
                          }
                      }
                  }
                  hasPaths = true;
              }else if(arr[i].ty == 'gr'){
                  completeShapes(arr[i].it);
              }
          }
          /*if(hasPaths){
              //mx: distance
              //ss: sensitivity
              //dc: decay
              arr.splice(arr.length-1,0,{
                  "ty": "ms",
                  "mx":20,
                  "ss":10,
                   "dc":0.001,
                  "maxDist":200
              });
          }*/
      }
  
      function convertPathsToAbsoluteValues(path){
          var i, len = path.i.length;
          for(i=0;i<len;i+=1){
              path.i[i][0] += path.v[i][0];
              path.i[i][1] += path.v[i][1];
              path.o[i][0] += path.v[i][0];
              path.o[i][1] += path.v[i][1];
          }
      }
  
      function checkVersion(minimum,animVersionString){
          var animVersion = animVersionString ? animVersionString.split('.') : [100,100,100];
          if(minimum[0]>animVersion[0]){
              return true;
          } else if(animVersion[0] > minimum[0]){
              return false;
          }
          if(minimum[1]>animVersion[1]){
              return true;
          } else if(animVersion[1] > minimum[1]){
              return false;
          }
          if(minimum[2]>animVersion[2]){
              return true;
          } else if(animVersion[2] > minimum[2]){
              return false;
          }
      }
  
      var checkText = (function(){
          var minimumVersion = [4,4,14];
  
          function updateTextLayer(textLayer){
              var documentData = textLayer.t.d;
              textLayer.t.d = {
                  k: [
                      {
                          s:documentData,
                          t:0
                      }
                  ]
              }
          }
  
          function iterateLayers(layers){
              var i, len = layers.length;
              for(i=0;i<len;i+=1){
                  if(layers[i].ty === 5){
                      updateTextLayer(layers[i]);
                  }
              }
          }
  
          return function (animationData){
              if(checkVersion(minimumVersion,animationData.v)){
                  iterateLayers(animationData.layers);
                  if(animationData.assets){
                      var i, len = animationData.assets.length;
                      for(i=0;i<len;i+=1){
                          if(animationData.assets[i].layers){
                              iterateLayers(animationData.assets[i].layers);
  
                          }
                      }
                  }
              }
          }
      }())
  
      var checkChars = (function() {
          var minimumVersion = [4,7,99];
          return function (animationData){
              if(animationData.chars && !checkVersion(minimumVersion,animationData.v)){
                  var i, len = animationData.chars.length, j, jLen, k, kLen;
                  var pathData, paths;
                  for(i = 0; i < len; i += 1) {
                      if(animationData.chars[i].data && animationData.chars[i].data.shapes) {
                          paths = animationData.chars[i].data.shapes[0].it;
                          jLen = paths.length;
  
                          for(j = 0; j < jLen; j += 1) {
                              pathData = paths[j].ks.k;
                              convertPathsToAbsoluteValues(paths[j].ks.k);
                          }
                      }
                  }
              }
          }
  
      }())
  
      var checkColors = (function(){
          var minimumVersion = [4,1,9];
  
          function iterateShapes(shapes){
              var i, len = shapes.length;
              var j, jLen;
              for(i=0;i<len;i+=1){
                  if(shapes[i].ty === 'gr'){
                      iterateShapes(shapes[i].it);
                  }else if(shapes[i].ty === 'fl' || shapes[i].ty === 'st'){
                      if(shapes[i].c.k && shapes[i].c.k[0].i){
                          jLen = shapes[i].c.k.length;
                          for(j=0;j<jLen;j+=1){
                              if(shapes[i].c.k[j].s){
                                  shapes[i].c.k[j].s[0] /= 255;
                                  shapes[i].c.k[j].s[1] /= 255;
                                  shapes[i].c.k[j].s[2] /= 255;
                                  shapes[i].c.k[j].s[3] /= 255;
                              }
                              if(shapes[i].c.k[j].e){
                                  shapes[i].c.k[j].e[0] /= 255;
                                  shapes[i].c.k[j].e[1] /= 255;
                                  shapes[i].c.k[j].e[2] /= 255;
                                  shapes[i].c.k[j].e[3] /= 255;
                              }
                          }
                      } else {
                          shapes[i].c.k[0] /= 255;
                          shapes[i].c.k[1] /= 255;
                          shapes[i].c.k[2] /= 255;
                          shapes[i].c.k[3] /= 255;
                      }
                  }
              }
          }
  
          function iterateLayers(layers){
              var i, len = layers.length;
              for(i=0;i<len;i+=1){
                  if(layers[i].ty === 4){
                      iterateShapes(layers[i].shapes);
                  }
              }
          }
  
          return function (animationData){
              if(checkVersion(minimumVersion,animationData.v)){
                  iterateLayers(animationData.layers);
                  if(animationData.assets){
                      var i, len = animationData.assets.length;
                      for(i=0;i<len;i+=1){
                          if(animationData.assets[i].layers){
                              iterateLayers(animationData.assets[i].layers);
  
                          }
                      }
                  }
              }
          }
      }());
  
      var checkShapes = (function(){
          var minimumVersion = [4,4,18];
  
  
  
          function completeShapes(arr){
              var i, len = arr.length;
              var j, jLen;
              var hasPaths = false;
              for(i=len-1;i>=0;i-=1){
                  if(arr[i].ty == 'sh'){
                      if(arr[i].ks.k.i){
                          arr[i].ks.k.c = arr[i].closed;
                      }else{
                          jLen = arr[i].ks.k.length;
                          for(j=0;j<jLen;j+=1){
                              if(arr[i].ks.k[j].s){
                                  arr[i].ks.k[j].s[0].c = arr[i].closed;
                              }
                              if(arr[i].ks.k[j].e){
                                  arr[i].ks.k[j].e[0].c = arr[i].closed;
                              }
                          }
                      }
                      hasPaths = true;
                  }else if(arr[i].ty == 'gr'){
                      completeShapes(arr[i].it);
                  }
              }
          }
  
          function iterateLayers(layers){
              var layerData;
              var i, len = layers.length;
              var j, jLen, k, kLen;
              for(i=0;i<len;i+=1){
                  layerData = layers[i];
                  if(layerData.hasMask){
                      var maskProps = layerData.masksProperties;
                      jLen = maskProps.length;
                      for(j=0;j<jLen;j+=1){
                          if(maskProps[j].pt.k.i){
                              maskProps[j].pt.k.c = maskProps[j].cl;
                          }else{
                              kLen = maskProps[j].pt.k.length;
                              for(k=0;k<kLen;k+=1){
                                  if(maskProps[j].pt.k[k].s){
                                      maskProps[j].pt.k[k].s[0].c = maskProps[j].cl;
                                  }
                                  if(maskProps[j].pt.k[k].e){
                                      maskProps[j].pt.k[k].e[0].c = maskProps[j].cl;
                                  }
                              }
                          }
                      }
                  }
                  if(layerData.ty === 4){
                      completeShapes(layerData.shapes);
                  }
              }
          }
  
          return function (animationData){
              if(checkVersion(minimumVersion,animationData.v)){
                  iterateLayers(animationData.layers);
                  if(animationData.assets){
                      var i, len = animationData.assets.length;
                      for(i=0;i<len;i+=1){
                          if(animationData.assets[i].layers){
                              iterateLayers(animationData.assets[i].layers);
  
                          }
                      }
                  }
              }
          }
      }());
  
      /*function blitPaths(path){
          var i, len = path.i.length;
          for(i=0;i<len;i+=1){
              path.i[i][0] /= blitter;
              path.i[i][1] /= blitter;
              path.o[i][0] /= blitter;
              path.o[i][1] /= blitter;
              path.v[i][0] /= blitter;
              path.v[i][1] /= blitter;
          }
      }
  
      function blitShapes(arr){
          var i, len = arr.length;
          var j, jLen;
          var hasPaths = false;
          for(i=len-1;i>=0;i-=1){
              if(arr[i].ty == 'sh'){
                  if(arr[i].ks.k.i){
                      blitPaths(arr[i].ks.k);
                  }else{
                      jLen = arr[i].ks.k.length;
                      for(j=0;j<jLen;j+=1){
                          if(arr[i].ks.k[j].s){
                              blitPaths(arr[i].ks.k[j].s[0]);
                          }
                          if(arr[i].ks.k[j].e){
                              blitPaths(arr[i].ks.k[j].e[0]);
                          }
                      }
                  }
                  hasPaths = true;
              }else if(arr[i].ty == 'gr'){
                  blitShapes(arr[i].it);
              }else if(arr[i].ty == 'rc'){
                  blitProperty(arr[i].p);
                  blitProperty(arr[i].s);
              }else if(arr[i].ty == 'st'){
                  blitProperty(arr[i].w);
              }else if(arr[i].ty == 'tr'){
                  blitProperty(arr[i].p);
                  blitProperty(arr[i].sk);
                  blitProperty(arr[i].a);
              }else if(arr[i].ty == 'el'){
                  blitProperty(arr[i].p);
                  blitProperty(arr[i].s);
              }else if(arr[i].ty == 'rd'){
                  blitProperty(arr[i].r);
              }else{
  
                  //console.log(arr[i].ty );
              }
          }
      }
  
      function blitText(data, fontManager){
  
      }
  
      function blitValue(val){
          if(typeof(val) === 'number'){
              val /= blitter;
          } else {
              var i = val.length-1;
              while(i>=0){
                  val[i] /= blitter;
                  i-=1;
              }
          }
          return val;
      }
  
      function blitProperty(data){
          if(!data.k.length){
              data.k = blitValue(data.k);
          }else if(typeof(data.k[0]) === 'number'){
              data.k = blitValue(data.k);
          } else {
              var i, len = data.k.length;
              for(i=0;i<len;i+=1){
                  if(data.k[i].s){
                      //console.log('pre S: ', data.k[i].s);
                      data.k[i].s = blitValue(data.k[i].s);
                      //console.log('post S: ', data.k[i].s);
                  }
                  if(data.k[i].e){
                      //console.log('pre E: ', data.k[i].e);
                      data.k[i].e = blitValue(data.k[i].e);
                      //console.log('post E: ', data.k[i].e);
                  }
              }
          }
      }
  
      function blitLayers(layers,comps, fontManager){
          var layerData;
          var animArray, lastFrame;
          var i, len = layers.length;
          var j, jLen, k, kLen;
          for(i=0;i<len;i+=1){
              layerData = layers[i];
              if(!('ks' in layerData)){
                  continue;
              }
              blitProperty(layerData.ks.a);
              blitProperty(layerData.ks.p);
              layerData.completed = true;
              if(layerData.tt){
                  layers[i-1].td = layerData.tt;
              }
              animArray = [];
              lastFrame = -1;
              if(layerData.hasMask){
                  var maskProps = layerData.masksProperties;
                  jLen = maskProps.length;
                  for(j=0;j<jLen;j+=1){
                      if(maskProps[j].pt.k.i){
                          blitPaths(maskProps[j].pt.k);
                      }else{
                          kLen = maskProps[j].pt.k.length;
                          for(k=0;k<kLen;k+=1){
                              if(maskProps[j].pt.k[k].s){
                                  blitPaths(maskProps[j].pt.k[k].s[0]);
                              }
                              if(maskProps[j].pt.k[k].e){
                                  blitPaths(maskProps[j].pt.k[k].e[0]);
                              }
                          }
                      }
                  }
              }
              if(layerData.ty===0){
                  layerData.w = Math.round(layerData.w/blitter);
                  layerData.h = Math.round(layerData.h/blitter);
                  blitLayers(layerData.layers,comps, fontManager);
              }else if(layerData.ty === 4){
                  blitShapes(layerData.shapes);
              }else if(layerData.ty == 5){
                  blitText(layerData, fontManager);
              }else if(layerData.ty == 1){
                  layerData.sh /= blitter;
                  layerData.sw /= blitter;
              } else {
              }
          }
      }
  
      function blitAnimation(animationData,comps, fontManager){
          blitLayers(animationData.layers,comps, fontManager);
      }*/
  
      function completeData(animationData, fontManager){
          if(animationData.__complete){
              return;
          }
          checkColors(animationData);
          checkText(animationData);
          checkChars(animationData);
          checkShapes(animationData);
          completeLayers(animationData.layers, animationData.assets, fontManager);
          animationData.__complete = true;
          //blitAnimation(animationData, animationData.assets, fontManager);
      }
  
      function completeText(data, fontManager){
          var letters;
          var keys = data.t.d.k;
          var k, kLen = keys.length;
          for(k=0;k<kLen;k+=1){
              var documentData = data.t.d.k[k].s;
              letters = [];
              var i, len;
              var newLineFlag, index = 0, val;
              var anchorGrouping = data.t.m.g;
              var currentSize = 0, currentPos = 0, currentLine = 0, lineWidths = [];
              var lineWidth = 0;
              var maxLineWidth = 0;
              var j, jLen;
              var fontData = fontManager.getFontByName(documentData.f);
              var charData, cLength = 0;
              var styles = fontData.fStyle.split(' ');
  
              var fWeight = 'normal', fStyle = 'normal';
              len = styles.length;
              for(i=0;i<len;i+=1){
                  if (styles[i].toLowerCase() === 'italic') {
                      fStyle = 'italic';
                  }else if (styles[i].toLowerCase() === 'bold') {
                      fWeight = '700';
                  } else if (styles[i].toLowerCase() === 'black') {
                      fWeight = '900';
                  } else if (styles[i].toLowerCase() === 'medium') {
                      fWeight = '500';
                  } else if (styles[i].toLowerCase() === 'regular' || styles[i].toLowerCase() === 'normal') {
                      fWeight = '400';
                  } else if (styles[i].toLowerCase() === 'light' || styles[i].toLowerCase() === 'thin') {
                      fWeight = '200';
                  }
              }
              documentData.fWeight = fWeight;
              documentData.fStyle = fStyle;
              len = documentData.t.length;
              if(documentData.sz){
                  var boxWidth = documentData.sz[0];
                  var lastSpaceIndex = -1;
                  for(i=0;i<len;i+=1){
                      newLineFlag = false;
                      if(documentData.t.charAt(i) === ' '){
                          lastSpaceIndex = i;
                      }else if(documentData.t.charCodeAt(i) === 13){
                          lineWidth = 0;
                          newLineFlag = true;
                      }
                      if(fontManager.chars){
                          charData = fontManager.getCharData(documentData.t.charAt(i), fontData.fStyle, fontData.fFamily);
                          cLength = newLineFlag ? 0 : charData.w*documentData.s/100;
                      }else{
                          //tCanvasHelper.font = documentData.s + 'px '+ fontData.fFamily;
                          cLength = fontManager.measureText(documentData.t.charAt(i), documentData.f, documentData.s);
                      }
                      if(lineWidth + cLength > boxWidth){
                          if(lastSpaceIndex === -1){
                              //i -= 1;
                              documentData.t = documentData.t.substr(0,i) + "\r" + documentData.t.substr(i);
                              len += 1;
                          } else {
                              i = lastSpaceIndex;
                              documentData.t = documentData.t.substr(0,i) + "\r" + documentData.t.substr(i+1);
                          }
                          lastSpaceIndex = -1;
                          lineWidth = 0;
                      }else {
                          lineWidth += cLength;
                      }
                  }
                  len = documentData.t.length;
              }
              lineWidth = 0;
              cLength = 0;
              for (i = 0;i < len ;i += 1) {
                  newLineFlag = false;
                  if(documentData.t.charAt(i) === ' '){
                      val = '\u00A0';
                  }else if(documentData.t.charCodeAt(i) === 13){
                      lineWidths.push(lineWidth);
                      maxLineWidth = lineWidth > maxLineWidth ? lineWidth : maxLineWidth;
                      lineWidth = 0;
                      val = '';
                      newLineFlag = true;
                      currentLine += 1;
                  }else{
                      val = documentData.t.charAt(i);
                  }
                  if(fontManager.chars){
                      charData = fontManager.getCharData(documentData.t.charAt(i), fontData.fStyle, fontManager.getFontByName(documentData.f).fFamily);
                      cLength = newLineFlag ? 0 : charData.w*documentData.s/100;
                  }else{
                      //var charWidth = fontManager.measureText(val, documentData.f, documentData.s);
                      //tCanvasHelper.font = documentData.s + 'px '+ fontManager.getFontByName(documentData.f).fFamily;
                      cLength = fontManager.measureText(val, documentData.f, documentData.s);
                  }
  
                  //
                  lineWidth += cLength;
                  letters.push({l:cLength,an:cLength,add:currentSize,n:newLineFlag, anIndexes:[], val: val, line: currentLine});
                  if(anchorGrouping == 2){
                      currentSize += cLength;
                      if(val == '' || val == '\u00A0' || i == len - 1){
                          if(val == '' || val == '\u00A0'){
                              currentSize -= cLength;
                          }
                          while(currentPos<=i){
                              letters[currentPos].an = currentSize;
                              letters[currentPos].ind = index;
                              letters[currentPos].extra = cLength;
                              currentPos += 1;
                          }
                          index += 1;
                          currentSize = 0;
                      }
                  }else if(anchorGrouping == 3){
                      currentSize += cLength;
                      if(val == '' || i == len - 1){
                          if(val == ''){
                              currentSize -= cLength;
                          }
                          while(currentPos<=i){
                              letters[currentPos].an = currentSize;
                              letters[currentPos].ind = index;
                              letters[currentPos].extra = cLength;
                              currentPos += 1;
                          }
                          currentSize = 0;
                          index += 1;
                      }
                  }else{
                      letters[index].ind = index;
                      letters[index].extra = 0;
                      index += 1;
                  }
              }
              documentData.l = letters;
              maxLineWidth = lineWidth > maxLineWidth ? lineWidth : maxLineWidth;
              lineWidths.push(lineWidth);
              if(documentData.sz){
                  documentData.boxWidth = documentData.sz[0];
                  documentData.justifyOffset = 0;
              }else{
                  documentData.boxWidth = maxLineWidth;
                  switch(documentData.j){
                      case 1:
                          documentData.justifyOffset = - documentData.boxWidth;
                          break;
                      case 2:
                          documentData.justifyOffset = - documentData.boxWidth/2;
                          break;
                      default:
                          documentData.justifyOffset = 0;
                  }
              }
              documentData.lineWidths = lineWidths;
  
              var animators = data.t.a;
              jLen = animators.length;
              var based, ind, indexes = [];
              for(j=0;j<jLen;j+=1){
                  if(animators[j].a.sc){
                      documentData.strokeColorAnim = true;
                  }
                  if(animators[j].a.sw){
                      documentData.strokeWidthAnim = true;
                  }
                  if(animators[j].a.fc || animators[j].a.fh || animators[j].a.fs || animators[j].a.fb){
                      documentData.fillColorAnim = true;
                  }
                  ind = 0;
                  based = animators[j].s.b;
                  for(i=0;i<len;i+=1){
                      letters[i].anIndexes[j] = ind;
                      if((based == 1 && letters[i].val != '') || (based == 2 && letters[i].val != '' && letters[i].val != '\u00A0') || (based == 3 && (letters[i].n || letters[i].val == '\u00A0' || i == len - 1)) || (based == 4 && (letters[i].n || i == len - 1))){
                          if(animators[j].s.rn === 1){
                              indexes.push(ind);
                          }
                          ind += 1;
                      }
                  }
                  data.t.a[j].s.totalChars = ind;
                  var currentInd = -1, newInd;
                  if(animators[j].s.rn === 1){
                      for(i = 0; i < len; i += 1){
                          if(currentInd != letters[i].anIndexes[j]){
                              currentInd = letters[i].anIndexes[j];
                              newInd = indexes.splice(Math.floor(Math.random()*indexes.length),1)[0];
                          }
                          letters[i].anIndexes[j] = newInd;
                      }
                  }
              }
              if(jLen === 0 && !('m' in data.t.p)){
                  data.singleShape = true;
              }
              documentData.yOffset = documentData.lh || documentData.s*1.2;
              documentData.ls = documentData.ls || 0;
              documentData.ascent = fontData.ascent*documentData.s/100;
          }
  
      }
  
      var moduleOb = {};
      moduleOb.completeData = completeData;
  
      return moduleOb;
  }
  
  var dataManager = dataFunctionManager();
  var FontManager = (function(){
  
      var maxWaitingTime = 5000;
  
      function setUpNode(font, family){
          var parentNode = document.createElement('span');
          parentNode.style.fontFamily    = family;
          var node = document.createElement('span');
          // Characters that vary significantly among different fonts
          node.innerHTML = 'giItT1WQy@!-/#';
          // Visible - so we can measure it - but not on the screen
          parentNode.style.position      = 'absolute';
          parentNode.style.left          = '-10000px';
          parentNode.style.top           = '-10000px';
          // Large font size makes even subtle changes obvious
          parentNode.style.fontSize      = '300px';
          // Reset any font properties
          parentNode.style.fontVariant   = 'normal';
          parentNode.style.fontStyle     = 'normal';
          parentNode.style.fontWeight    = 'normal';
          parentNode.style.letterSpacing = '0';
          parentNode.appendChild(node);
          document.body.appendChild(parentNode);
  
          // Remember width with no applied web font
          var width = node.offsetWidth;
          node.style.fontFamily = font + ', '+family;
          return {node:node, w:width, parent:parentNode};
      }
  
      function checkLoadedFonts() {
          var i, len = this.fonts.length;
          var node, w;
          var loadedCount = len;
          for(i=0;i<len; i+= 1){
              if(this.fonts[i].loaded){
                  loadedCount -= 1;
                  continue;
              }
              if(this.fonts[i].fOrigin === 't' || this.fonts[i].origin === 2){
                  if(window.Typekit && window.Typekit.load && this.typekitLoaded === 0){
                      this.typekitLoaded = 1;
                      try{window.Typekit.load({
                          async: true,
                          active: function() {
                              this.typekitLoaded = 2;
                          }.bind(this)
                      });}catch(e){}
                  }
                  if(this.typekitLoaded === 2) {
                      this.fonts[i].loaded = true;
                  }
              } else if(this.fonts[i].fOrigin === 'n' || this.fonts[i].origin === 0){
                  this.fonts[i].loaded = true;
              } else{
                  node = this.fonts[i].monoCase.node;
                  w = this.fonts[i].monoCase.w;
                  if(node.offsetWidth !== w){
                      loadedCount -= 1;
                      this.fonts[i].loaded = true;
                  }else{
                      node = this.fonts[i].sansCase.node;
                      w = this.fonts[i].sansCase.w;
                      if(node.offsetWidth !== w){
                          loadedCount -= 1;
                          this.fonts[i].loaded = true;
                      }
                  }
                  if(this.fonts[i].loaded){
                      this.fonts[i].sansCase.parent.parentNode.removeChild(this.fonts[i].sansCase.parent);
                      this.fonts[i].monoCase.parent.parentNode.removeChild(this.fonts[i].monoCase.parent);
                  }
              }
          }
  
          if(loadedCount !== 0 && Date.now() - this.initTime < maxWaitingTime){
              setTimeout(checkLoadedFonts.bind(this),20);
          }else{
              setTimeout(function(){this.loaded = true;}.bind(this),0);
  
          }
      };
  
      function createHelper(def, fontData){
          var tHelper = document.createElementNS(svgNS,'text');
          tHelper.style.fontSize = '100px';
          tHelper.style.fontFamily = fontData.fFamily;
          tHelper.textContent = '1';
          if(fontData.fClass){
              tHelper.style.fontFamily = 'inherit';
              tHelper.className = fontData.fClass;
          } else {
              tHelper.style.fontFamily = fontData.fFamily;
          }
          def.appendChild(tHelper);
          var tCanvasHelper = document.createElement('canvas').getContext('2d');
          tCanvasHelper.font = '100px '+ fontData.fFamily;
          return tCanvasHelper;
          return tHelper;
      }
  
      function addFonts(fontData, defs){
          if(!fontData){
              this.loaded = true;
              return;
          }
          if(this.chars){
              this.loaded = true;
              this.fonts = fontData.list;
              return;
          }
  
          var fontArr = fontData.list;
          var i, len = fontArr.length;
          for(i=0; i<len; i+= 1){
              fontArr[i].loaded = false;
              fontArr[i].monoCase = setUpNode(fontArr[i].fFamily,'monospace');
              fontArr[i].sansCase = setUpNode(fontArr[i].fFamily,'sans-serif');
              if(!fontArr[i].fPath) {
                  fontArr[i].loaded = true;
              }else if(fontArr[i].fOrigin === 'p' || fontArr[i].origin === 3){
                  var s = document.createElement('style');
                  s.type = "text/css";
                  s.innerHTML = "@font-face {" + "font-family: "+fontArr[i].fFamily+"; font-style: normal; src: url('"+fontArr[i].fPath+"');}";
                  defs.appendChild(s);
              } else if(fontArr[i].fOrigin === 'g' || fontArr[i].origin === 1){
                  //<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
                  var l = document.createElement('link');
                  l.type = "text/css";
                  l.rel = "stylesheet";
                  l.href = fontArr[i].fPath;
                  defs.appendChild(l);
              } else if(fontArr[i].fOrigin === 't' || fontArr[i].origin === 2){
                  //<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
                  var sc = document.createElement('script');
                  sc.setAttribute('src',fontArr[i].fPath);
                  defs.appendChild(sc);
              }
              fontArr[i].helper = createHelper(defs,fontArr[i]);
              this.fonts.push(fontArr[i]);
          }
          checkLoadedFonts.bind(this)();
      }
  
      function addChars(chars){
          if(!chars){
              return;
          }
          if(!this.chars){
              this.chars = [];
          }
          var i, len = chars.length;
          var j, jLen = this.chars.length, found;
          for(i=0;i<len;i+=1){
              j = 0;
              found = false;
              while(j<jLen){
                  if(this.chars[j].style === chars[i].style && this.chars[j].fFamily === chars[i].fFamily && this.chars[j].ch === chars[i].ch){
                      found = true;
                  }
                  j += 1;
              }
              if(!found){
                  this.chars.push(chars[i]);
                  jLen += 1;
              }
          }
      }
  
      function getCharData(char, style, font){
          var i = 0, len = this.chars.length;
          while( i < len) {
              if(this.chars[i].ch === char && this.chars[i].style === style && this.chars[i].fFamily === font){
                  return this.chars[i];
              }
              i+= 1;
          }
      }
  
      function measureText(char, fontName, size){
          var fontData = this.getFontByName(fontName);
          var tHelper = fontData.helper;
          //tHelper.textContent = char;
          return tHelper.measureText(char).width*size/100;
          //return tHelper.getComputedTextLength()*size/100;
      }
  
      function getFontByName(name){
          var i = 0, len = this.fonts.length;
          while(i<len){
              if(this.fonts[i].fName === name) {
                  return this.fonts[i];
              }
              i += 1;
          }
          return 'sans-serif';
      }
  
      var Font = function(){
          this.fonts = [];
          this.chars = null;
          this.typekitLoaded = 0;
          this.loaded = false;
          this.initTime = Date.now();
      };
      Font.prototype.addChars = addChars;
      Font.prototype.addFonts = addFonts;
      Font.prototype.getCharData = getCharData;
      Font.prototype.getFontByName = getFontByName;
      Font.prototype.measureText = measureText;
  
      return Font;
  
  }());
  var PropertyFactory = (function(){
  
      var initFrame = -999999;
  
      function getValue(){
          if(this.elem.globalData.frameId === this.frameId){
              return;
          }
          this.mdf = false;
          var frameNum = this.comp.renderedFrame - this.offsetTime;
          if(!(frameNum === this.lastFrame || (this.lastFrame !== initFrame && ((this.lastFrame >= this.keyframes[this.keyframes.length- 1].t-this.offsetTime && frameNum >= this.keyframes[this.keyframes.length- 1].t-this.offsetTime) || (this.lastFrame < this.keyframes[0].t-this.offsetTime && frameNum < this.keyframes[0].t-this.offsetTime))))){
              var i = this.lastFrame < frameNum ? this._lastIndex : 0;
              var len = this.keyframes.length- 1,flag = true;
              var keyData, nextKeyData;
  
              while(flag){
                  keyData = this.keyframes[i];
                  nextKeyData = this.keyframes[i+1];
                  if(i == len-1 && frameNum >= nextKeyData.t - this.offsetTime){
                      if(keyData.h){
                          keyData = nextKeyData;
                      }
                      break;
                  }
                  if((nextKeyData.t - this.offsetTime) > frameNum){
                      break;
                  }
                  if(i < len - 1){
                      i += 1;
                  }else{
                      flag = false;
                  }
              }
  
              this._lastIndex = i;
  
              var k, kLen,perc,jLen, j, fnc;
              if(keyData.to){
  
                  if(!keyData.bezierData){
                      bez.buildBezierData(keyData);
                  }
                  var bezierData = keyData.bezierData;
                  if(frameNum >= nextKeyData.t-this.offsetTime || frameNum < keyData.t-this.offsetTime){
                      var ind = frameNum >= nextKeyData.t-this.offsetTime ? bezierData.points.length - 1 : 0;
                      kLen = bezierData.points[ind].point.length;
                      for(k = 0; k < kLen; k += 1){
                          this.pv[k] = bezierData.points[ind].point[k];
                          this.v[k] = this.mult ? this.pv[k]*this.mult : this.pv[k];
                          if(this.lastPValue[k] !== this.pv[k]) {
                              this.mdf = true;
                              this.lastPValue[k] = this.pv[k];
                          }
                      }
                      this._lastBezierData = null;
                  }else{
                      if(keyData.__fnct){
                          fnc = keyData.__fnct;
                      }else{
                          fnc = BezierFactory.getBezierEasing(keyData.o.x,keyData.o.y,keyData.i.x,keyData.i.y,keyData.n).get;
                          keyData.__fnct = fnc;
                      }
                      perc = fnc((frameNum-(keyData.t-this.offsetTime))/((nextKeyData.t-this.offsetTime)-(keyData.t-this.offsetTime)));
                      var distanceInLine = bezierData.segmentLength*perc;
  
                      var segmentPerc;
                      var addedLength =  (this.lastFrame < frameNum && this._lastBezierData === bezierData) ? this._lastAddedLength : 0;
                      j =  (this.lastFrame < frameNum && this._lastBezierData === bezierData) ? this._lastPoint : 0;
                      flag = true;
                      jLen = bezierData.points.length;
                      while(flag){
                          addedLength +=bezierData.points[j].partialLength;
                          if(distanceInLine === 0 || perc === 0 || j == bezierData.points.length - 1){
                              kLen = bezierData.points[j].point.length;
                              for(k=0;k<kLen;k+=1){
                                  this.pv[k] = bezierData.points[j].point[k];
                                  this.v[k] = this.mult ? this.pv[k]*this.mult : this.pv[k];
                                  if(this.lastPValue[k] !== this.pv[k]) {
                                      this.mdf = true;
                                      this.lastPValue[k] = this.pv[k];
                                  }
                              }
                              break;
                          }else if(distanceInLine >= addedLength && distanceInLine < addedLength + bezierData.points[j+1].partialLength){
                              segmentPerc = (distanceInLine-addedLength)/(bezierData.points[j+1].partialLength);
                              kLen = bezierData.points[j].point.length;
                              for(k=0;k<kLen;k+=1){
                                  this.pv[k] = bezierData.points[j].point[k] + (bezierData.points[j+1].point[k] - bezierData.points[j].point[k])*segmentPerc;
                                  this.v[k] = this.mult ? this.pv[k] * this.mult : this.pv[k];
                                  if(this.lastPValue[k] !== this.pv[k]) {
                                      this.mdf = true;
                                      this.lastPValue[k] = this.pv[k];
                                  }
                              }
                              break;
                          }
                          if(j < jLen - 1){
                              j += 1;
                          }else{
                              flag = false;
                          }
                      }
                      this._lastPoint = j;
                      this._lastAddedLength = addedLength - bezierData.points[j].partialLength;
                      this._lastBezierData = bezierData;
                  }
              }else{
                  var outX,outY,inX,inY, keyValue;
                  len = keyData.s.length;
                  for(i=0;i<len;i+=1){
                      if(keyData.h !== 1){
                          if(frameNum >= nextKeyData.t-this.offsetTime){
                              perc = 1;
                          }else if(frameNum < keyData.t-this.offsetTime){
                              perc = 0;
                          }else{
                              if(keyData.o.x instanceof Array){
                                  if(!keyData.__fnct){
                                      keyData.__fnct = [];
                                  }
                                  if (!keyData.__fnct[i]) {
                                      outX = keyData.o.x[i] || keyData.o.x[0];
                                      outY = keyData.o.y[i] || keyData.o.y[0];
                                      inX = keyData.i.x[i] || keyData.i.x[0];
                                      inY = keyData.i.y[i] || keyData.i.y[0];
                                      fnc = BezierFactory.getBezierEasing(outX,outY,inX,inY).get;
                                      keyData.__fnct[i] = fnc;
                                  } else {
                                      fnc = keyData.__fnct[i];
                                  }
                              } else {
                                  if (!keyData.__fnct) {
                                      outX = keyData.o.x;
                                      outY = keyData.o.y;
                                      inX = keyData.i.x;
                                      inY = keyData.i.y;
                                      fnc = BezierFactory.getBezierEasing(outX,outY,inX,inY).get;
                                      keyData.__fnct = fnc;
                                  } else{
                                      fnc = keyData.__fnct;
                                  }
                              }
                              perc = fnc((frameNum-(keyData.t-this.offsetTime))/((nextKeyData.t-this.offsetTime)-(keyData.t-this.offsetTime)));
                          }
                      }
                      if(this.sh && keyData.h !== 1){
                          var initP = keyData.s[i];
                          var endP = keyData.e[i];
                          if(initP-endP < -180){
                              initP += 360;
                          } else if(initP-endP > 180){
                              initP -= 360;
                          }
                          keyValue = initP+(endP-initP)*perc;
                      } else {
                          keyValue = keyData.h === 1 ? keyData.s[i] : keyData.s[i]+(keyData.e[i]-keyData.s[i])*perc;
                      }
                      if(len === 1){
                          this.v = this.mult ? keyValue*this.mult : keyValue;
                          this.pv = keyValue;
                          if(this.lastPValue != this.pv){
                              this.mdf = true;
                              this.lastPValue = this.pv;
                          }
                      }else{
                          this.v[i] = this.mult ? keyValue*this.mult : keyValue;
                          this.pv[i] = keyValue;
                          if(this.lastPValue[i] !== this.pv[i]){
                              this.mdf = true;
                              this.lastPValue[i] = this.pv[i];
                          }
                      }
                  }
              }
          }
          this.lastFrame = frameNum;
          this.frameId = this.elem.globalData.frameId;
      }
  
      function getNoValue(){}
  
      function ValueProperty(elem,data, mult){
          this.mult = mult;
          this.v = mult ? data.k * mult : data.k;
          this.pv = data.k;
          this.mdf = false;
          this.comp = elem.comp;
          this.k = false;
          this.kf = false;
          this.vel = 0;
          this.getValue = getNoValue;
      }
  
      function MultiDimensionalProperty(elem,data, mult){
          this.mult = mult;
          this.data = data;
          this.mdf = false;
          this.comp = elem.comp;
          this.k = false;
          this.kf = false;
          this.frameId = -1;
          this.v = Array.apply(null, {length:data.k.length});
          this.pv = Array.apply(null, {length:data.k.length});
          this.lastValue = Array.apply(null, {length:data.k.length});
          var arr = Array.apply(null, {length:data.k.length});
          this.vel = arr.map(function () { return 0 });
          var i, len = data.k.length;
          for(i = 0;i<len;i+=1){
              this.v[i] = mult ? data.k[i] * mult : data.k[i];
              this.pv[i] = data.k[i];
          }
          this.getValue = getNoValue;
      }
  
      function KeyframedValueProperty(elem, data, mult){
          this.keyframes = data.k;
          this.offsetTime = elem.data.st;
          this.lastValue = -99999;
          this.lastPValue = -99999;
          this.frameId = -1;
          this._lastIndex = 0;
          this.k = true;
          this.kf = true;
          this.data = data;
          this.mult = mult;
          this.elem = elem;
          this.comp = elem.comp;
          this.lastFrame = initFrame;
          this.v = mult ? data.k[0].s[0]*mult : data.k[0].s[0];
          this.pv = data.k[0].s[0];
          this.getValue = getValue;
      }
  
      function KeyframedMultidimensionalProperty(elem, data, mult){
          var i, len = data.k.length;
          var s, e,to,ti;
          for(i=0;i<len-1;i+=1){
              if(data.k[i].to && data.k[i].s && data.k[i].e ){
                  s = data.k[i].s;
                  e = data.k[i].e;
                  to = data.k[i].to;
                  ti = data.k[i].ti;
                  if((s.length === 2 && !(s[0] === e[0] && s[1] === e[1]) && bez.pointOnLine2D(s[0],s[1],e[0],e[1],s[0] + to[0],s[1] + to[1]) && bez.pointOnLine2D(s[0],s[1],e[0],e[1],e[0] + ti[0],e[1] + ti[1])) || (s.length === 3 && !(s[0] === e[0] && s[1] === e[1] && s[2] === e[2]) && bez.pointOnLine3D(s[0],s[1],s[2],e[0],e[1],e[2],s[0] + to[0],s[1] + to[1],s[2] + to[2]) && bez.pointOnLine3D(s[0],s[1],s[2],e[0],e[1],e[2],e[0] + ti[0],e[1] + ti[1],e[2] + ti[2]))){
                      data.k[i].to = null;
                      data.k[i].ti = null;
                  }
              }
          }
          this.keyframes = data.k;
          this.offsetTime = elem.data.st;
          this.k = true;
          this.kf = true;
          this.mult = mult;
          this.elem = elem;
          this.comp = elem.comp;
          this.getValue = getValue;
          this.frameId = -1;
          this._lastIndex = 0;
          this.v = Array.apply(null, {length:data.k[0].s.length});
          this.pv = Array.apply(null, {length:data.k[0].s.length});
          this.lastValue = Array.apply(null, {length:data.k[0].s.length});
          this.lastPValue = Array.apply(null, {length:data.k[0].s.length});
          this.lastFrame = initFrame;
      }
  
      var TransformProperty = (function() {
          function positionGetter() {
              if(this.p) {
                  return ExpressionValue(this.p);
              } else {
                  return [this.px.v, this.py.v, this.pz ? this.pz.v : 0];
              }
          }
          function xPositionGetter() {
              return ExpressionValue(this.px);
          }
          function yPositionGetter() {
              return ExpressionValue(this.py);
          }
          function zPositionGetter() {
              return ExpressionValue(this.pz);
          }
          function anchorGetter() {
              return ExpressionValue(this.a);
          }
          function orientationGetter() {
              return ExpressionValue(this.or);
          }
          function rotationGetter() {
              if(this.r) {
                  return ExpressionValue(this.r, 1/degToRads);
              } else {
                  return ExpressionValue(this.rz, 1/degToRads);
              }
          }
          function scaleGetter() {
              return ExpressionValue(this.s, 100);
          }
          function opacityGetter() {
              return ExpressionValue(this.o, 100);
          }
          function skewGetter() {
              return ExpressionValue(this.sk);
          }
          function skewAxisGetter() {
              return ExpressionValue(this.sa);
          }
          function applyToMatrix(mat) {
              var i, len = this.dynamicProperties.length;
              for(i = 0; i < len; i += 1) {
                  this.dynamicProperties[i].getValue();
                  if (this.dynamicProperties[i].mdf) {
                      this.mdf = true;
                  }
              }
              if (this.a) {
                  mat.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
              }
              if (this.s) {
                  mat.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
              }
              if (this.r) {
                  mat.rotate(-this.r.v);
              } else {
                  mat.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
              }
              if (this.data.p.s) {
                  if (this.data.p.z) {
                      mat.translate(this.px.v, this.py.v, -this.pz.v);
                  } else {
                      mat.translate(this.px.v, this.py.v, 0);
                  }
              } else {
                  mat.translate(this.p.v[0], this.p.v[1], -this.p.v[2]);
              }
          }
          function processKeys(){
              if (this.elem.globalData.frameId === this.frameId) {
                  return;
              }
  
              this.mdf = false;
              var i, len = this.dynamicProperties.length;
  
              for(i = 0; i < len; i += 1) {
                  this.dynamicProperties[i].getValue();
                  if (this.dynamicProperties[i].mdf) {
                      this.mdf = true;
                  }
              }
              if (this.mdf) {
                  this.v.reset();
                  if (this.a) {
                      this.v.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
                  }
                  if(this.s) {
                      this.v.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
                  }
                  if (this.sk) {
                      this.v.skewFromAxis(-this.sk.v, this.sa.v);
                  }
                  if (this.r) {
                      this.v.rotate(-this.r.v);
                  } else {
                      this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
                  }
                  if (this.autoOriented && this.p.keyframes && this.p.getValueAtTime) {
                      var v1,v2;
                      if (this.p.lastFrame+this.p.offsetTime <= this.p.keyframes[0].t) {
                          v1 = this.p.getValueAtTime((this.p.keyframes[0].t + 0.01) / this.elem.globalData.frameRate,0);
                          v2 = this.p.getValueAtTime(this.p.keyframes[0].t / this.elem.globalData.frameRate, 0);
                      } else if(this.p.lastFrame+this.p.offsetTime >= this.p.keyframes[this.p.keyframes.length - 1].t) {
                          v1 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t / this.elem.globalData.frameRate), 0);
                          v2 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t - 0.01) / this.elem.globalData.frameRate, 0);
                      } else {
                          v1 = this.p.pv;
                          v2 = this.p.getValueAtTime((this.p.lastFrame+this.p.offsetTime - 0.01) / this.elem.globalData.frameRate, this.p.offsetTime);
                      }
                      this.v.rotate(-Math.atan2(v1[1] - v2[1], v1[0] - v2[0]));
                  }
                  if(this.data.p.s){
                      if(this.data.p.z) {
                          this.v.translate(this.px.v, this.py.v, -this.pz.v);
                      } else {
                          this.v.translate(this.px.v, this.py.v, 0);
                      }
                  }else{
                      this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2]);
                  }
              }
              //console.log(this.v.to2dCSS())
              this.frameId = this.elem.globalData.frameId;
          }
  
          function setInverted(){
              this.inverted = true;
              this.iv = new Matrix();
              if(!this.k){
                  if(this.data.p.s){
                      this.iv.translate(this.px.v,this.py.v,-this.pz.v);
                  }else{
                      this.iv.translate(this.p.v[0],this.p.v[1],-this.p.v[2]);
                  }
                  if(this.r){
                      this.iv.rotate(-this.r.v);
                  }else{
                      this.iv.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v);
                  }
                  if(this.s){
                      this.iv.scale(this.s.v[0],this.s.v[1],1);
                  }
                  if(this.a){
                      this.iv.translate(-this.a.v[0],-this.a.v[1],this.a.v[2]);
                  }
              }
          }
  
          function autoOrient(){
              //
              //var prevP = this.getValueAtTime();
          }
  
          return function TransformProperty(elem,data,arr){
              this.elem = elem;
              this.frameId = -1;
              this.type = 'transform';
              this.dynamicProperties = [];
              this.mdf = false;
              this.data = data;
              this.getValue = processKeys;
              this.applyToMatrix = applyToMatrix;
              this.setInverted = setInverted;
              this.autoOrient = autoOrient;
              this.v = new Matrix();
              if(data.p.s){
                  this.px = PropertyFactory.getProp(elem,data.p.x,0,0,this.dynamicProperties);
                  this.py = PropertyFactory.getProp(elem,data.p.y,0,0,this.dynamicProperties);
                  if(data.p.z){
                      this.pz = PropertyFactory.getProp(elem,data.p.z,0,0,this.dynamicProperties);
                  }
              }else{
                  this.p = PropertyFactory.getProp(elem,data.p,1,0,this.dynamicProperties);
              }
              if(data.r) {
                  this.r = PropertyFactory.getProp(elem, data.r, 0, degToRads, this.dynamicProperties);
              } else if(data.rx) {
                  this.rx = PropertyFactory.getProp(elem, data.rx, 0, degToRads, this.dynamicProperties);
                  this.ry = PropertyFactory.getProp(elem, data.ry, 0, degToRads, this.dynamicProperties);
                  this.rz = PropertyFactory.getProp(elem, data.rz, 0, degToRads, this.dynamicProperties);
                  this.or = PropertyFactory.getProp(elem, data.or, 1, degToRads, this.dynamicProperties);
              }
              if(data.sk){
                  this.sk = PropertyFactory.getProp(elem, data.sk, 0, degToRads, this.dynamicProperties);
                  this.sa = PropertyFactory.getProp(elem, data.sa, 0, degToRads, this.dynamicProperties);
              }
              if(data.a) {
                  this.a = PropertyFactory.getProp(elem,data.a,1,0,this.dynamicProperties);
              }
              if(data.s) {
                  this.s = PropertyFactory.getProp(elem,data.s,1,0.01,this.dynamicProperties);
              }
              if(data.o){
                  this.o = PropertyFactory.getProp(elem,data.o,0,0.01,arr);
              } else {
                  this.o = {mdf:false,v:1};
              }
              if(this.dynamicProperties.length){
                  arr.push(this);
              }else{
                  if(this.a){
                      this.v.translate(-this.a.v[0],-this.a.v[1],this.a.v[2]);
                  }
                  if(this.s){
                      this.v.scale(this.s.v[0],this.s.v[1],this.s.v[2]);
                  }
                  if(this.sk){
                      this.v.skewFromAxis(-this.sk.v,this.sa.v);
                  }
                  if(this.r){
                      this.v.rotate(-this.r.v);
                  }else{
                      this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
                  }
                  if(this.data.p.s){
                      if(data.p.z) {
                          this.v.translate(this.px.v, this.py.v, -this.pz.v);
                      } else {
                          this.v.translate(this.px.v, this.py.v, 0);
                      }
                  }else{
                      this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2]);
                  }
              }
              Object.defineProperty(this, "position", { get: positionGetter});
              Object.defineProperty(this, "xPosition", { get: xPositionGetter});
              Object.defineProperty(this, "yPosition", { get: yPositionGetter});
              Object.defineProperty(this, "orientation", { get: orientationGetter});
              Object.defineProperty(this, "anchorPoint", { get: anchorGetter});
              Object.defineProperty(this, "rotation", { get: rotationGetter});
              Object.defineProperty(this, "scale", { get: scaleGetter});
              Object.defineProperty(this, "opacity", { get: opacityGetter});
              Object.defineProperty(this, "skew", { get: skewGetter});
              Object.defineProperty(this, "skewAxis", { get: skewAxisGetter});
          }
      }());
  
      function getProp(elem,data,type, mult, arr) {
          var p;
          if(type === 2){
              p = new TransformProperty(elem, data, arr);
          } else if(data.a === 0){
              if(type === 0) {
                  p = new ValueProperty(elem,data,mult);
              } else {
                  p = new MultiDimensionalProperty(elem,data, mult);
              }
          } else if(data.a === 1){
              if(type === 0) {
                  p = new KeyframedValueProperty(elem,data,mult);
              } else {
                  p = new KeyframedMultidimensionalProperty(elem,data, mult);
              }
          } else if(!data.k.length){
              p = new ValueProperty(elem,data, mult);
          }else if(typeof(data.k[0]) === 'number'){
              p = new MultiDimensionalProperty(elem,data, mult);
          }else{
              switch(type){
                  case 0:
                      p = new KeyframedValueProperty(elem,data,mult);
                      break;
                  case 1:
                      p = new KeyframedMultidimensionalProperty(elem,data,mult);
                      break;
              }
          }
          if(p.k){
              arr.push(p);
          }
          return p;
      }
  
      var getGradientProp = (function(){
  
          function getValue(forceRender){
              this.prop.getValue();
              this.cmdf = false;
              this.omdf = false;
              if(this.prop.mdf || forceRender){
                  var i, len = this.data.p*4;
                  var mult, val;
                  for(i=0;i<len;i+=1){
                      mult = i%4 === 0 ? 100 : 255;
                      val = Math.round(this.prop.v[i]*mult);
                      if(this.c[i] !== val){
                          this.c[i] = val;
                          this.cmdf = true;
                      }
                  }
                  if(this.o.length){
                      len = this.prop.v.length;
                      for(i=this.data.p*4;i<len;i+=1){
                          mult = i%2 === 0 ? 100 : 1;
                          val = i%2 === 0 ?  Math.round(this.prop.v[i]*100):this.prop.v[i];
                          if(this.o[i-this.data.p*4] !== val){
                              this.o[i-this.data.p*4] = val;
                              this.omdf = true;
                          }
                      }
                  }
              }
  
          }
  
          function gradientProp(elem,data,arr){
              this.prop = getProp(elem,data.k,1,null,[]);
              this.data = data;
              this.k = this.prop.k;
              this.c = Array.apply(null,{length:data.p*4});
              var cLength = data.k.k[0].s ? (data.k.k[0].s.length - data.p*4) : data.k.k.length - data.p*4;
              this.o = Array.apply(null,{length:cLength});
              this.cmdf = false;
              this.omdf = false;
              this.getValue = getValue;
              if(this.prop.k){
                  arr.push(this);
              }
              this.getValue(true);
          }
  
          return function getGradientProp(elem,data,arr){
              return new gradientProp(elem,data,arr);
          }
      }());
  
  
  
  
      var DashProperty = (function(){
  
          function processKeys(forceRender){
              var i = 0, len = this.dataProps.length;
  
              if(this.elem.globalData.frameId === this.frameId && !forceRender){
                  return;
              }
              this.mdf = false;
              this.frameId = this.elem.globalData.frameId;
              while(i<len){
                  if(this.dataProps[i].p.mdf){
                      this.mdf = true;
                      break;
                  }
                  i+=1;
              }
              if(this.mdf || forceRender){
                  if(this.renderer === 'svg') {
                      this.dasharray = '';
                  }
                  for(i=0;i<len;i+=1){
                      if(this.dataProps[i].n != 'o'){
                          if(this.renderer === 'svg') {
                              this.dasharray += ' ' + this.dataProps[i].p.v;
                          }else{
                              this.dasharray[i] = this.dataProps[i].p.v;
                          }
                      }else{
                          this.dashoffset = this.dataProps[i].p.v;
                      }
                  }
              }
          }
  
          return function(elem, data,renderer, dynamicProperties){
              this.elem = elem;
              this.frameId = -1;
              this.dataProps = new Array(data.length);
              this.renderer = renderer;
              this.mdf = false;
              this.k = false;
              if(this.renderer === 'svg'){
                  this.dasharray = '';
              }else{
  
                  this.dasharray = new Array(data.length - 1);
              }
              this.dashoffset = 0;
              var i, len = data.length, prop;
              for(i=0;i<len;i+=1){
                  prop = PropertyFactory.getProp(elem,data[i].v,0, 0, dynamicProperties);
                  this.k = prop.k ? true : this.k;
                  this.dataProps[i] = {n:data[i].n,p:prop};
              }
              this.getValue = processKeys;
              if(this.k){
                  dynamicProperties.push(this);
              }else{
                  this.getValue(true);
              }
  
          }
      }());
  
      function getDashProp(elem, data,renderer, dynamicProperties) {
          return new DashProperty(elem, data,renderer, dynamicProperties);
      };
  
      var TextSelectorProp = (function(){
          var max = Math.max;
          var min = Math.min;
          var floor = Math.floor;
          function updateRange(){
              if(this.dynamicProperties.length){
                  var i, len = this.dynamicProperties.length;
                  for(i=0;i<len;i+=1){
                      this.dynamicProperties[i].getValue();
                      if(this.dynamicProperties[i].mdf){
                          this.mdf = true;
                      }
                  }
              }
              var totalChars = this.data.totalChars;
              var divisor = this.data.r === 2 ? 1 : 100/totalChars;
              var o = this.o.v/divisor;
              var s = this.s.v/divisor + o;
              var e = (this.e.v/divisor) + o;
              if(s>e){
                  var _s = s;
                  s = e;
                  e = _s;
              }
              this.finalS = s;
              this.finalE = e;
          }
  
          function getMult(ind){
              //var easer = bez.getEasingCurve(this.ne.v/100,0,1-this.xe.v/100,1);
              var easer = BezierFactory.getBezierEasing(this.ne.v/100,0,1-this.xe.v/100,1).get;
              var mult = 0;
              var s = this.finalS;
              var e = this.finalE;
              var type = this.data.sh;
              if(type == 2){
                  if(e === s){
                      mult = ind >= e ? 1 : 0;
                  }else{
                      mult = max(0,min(0.5/(e-s) + (ind-s)/(e-s),1));
                  }
                  mult = easer(mult);
              }else if(type == 3){
                  if(e === s){
                      mult = ind >= e ? 0 : 1;
                  }else{
                      mult = 1 - max(0,min(0.5/(e-s) + (ind-s)/(e-s),1));
                  }
  
                  mult = easer(mult);
              }else if(type == 4){
                  if(e === s){
                      mult = 0;
                  }else{
                      mult = max(0,min(0.5/(e-s) + (ind-s)/(e-s),1));
                      if(mult<.5){
                          mult *= 2;
                      }else{
                          mult = 1 - 2*(mult-0.5);
                      }
                  }
                  mult = easer(mult);
              }else if(type == 5){
                  if(e === s){
                      mult = 0;
                  }else{
                      var tot = e - s;
                      /*ind += 0.5;
                      mult = -4/(tot*tot)*(ind*ind)+(4/tot)*ind;*/
                      ind = min(max(0,ind+0.5-s),e-s);
                      var x = -tot/2+ind;
                      var a = tot/2;
                      mult = Math.sqrt(1 - (x*x)/(a*a));
                  }
                  mult = easer(mult);
              }else if(type == 6){
                  if(e === s){
                      mult = 0;
                  }else{
                      ind = min(max(0,ind+0.5-s),e-s);
                      mult = (1+(Math.cos((Math.PI+Math.PI*2*(ind)/(e-s)))))/2;
                      /*
                       ind = Math.min(Math.max(s,ind),e-1);
                       mult = (1+(Math.cos((Math.PI+Math.PI*2*(ind-s)/(e-1-s)))))/2;
                       mult = Math.max(mult,(1/(e-1-s))/(e-1-s));*/
                  }
                  mult = easer(mult);
              }else {
                  if(ind >= floor(s)){
                      if(ind-s < 0){
                          mult = 1 - (s - ind);
                      }else{
                          mult = max(0,min(e-ind,1));
                      }
                  }
                  mult = easer(mult);
              }
              return mult*this.a.v;
          }
  
          return function TextSelectorProp(elem,data, arr){
              this.mdf = false;
              this.k = false;
              this.data = data;
              this.dynamicProperties = [];
              this.getValue = updateRange;
              this.getMult = getMult;
              this.comp = elem.comp;
              this.finalS = 0;
              this.finalE = 0;
              this.s = PropertyFactory.getProp(elem,data.s || {k:0},0,0,this.dynamicProperties);
              if('e' in data){
                  this.e = PropertyFactory.getProp(elem,data.e,0,0,this.dynamicProperties);
              }else{
                  this.e = {v:data.r === 2 ? data.totalChars : 100};
              }
              this.o = PropertyFactory.getProp(elem,data.o || {k:0},0,0,this.dynamicProperties);
              this.xe = PropertyFactory.getProp(elem,data.xe || {k:0},0,0,this.dynamicProperties);
              this.ne = PropertyFactory.getProp(elem,data.ne || {k:0},0,0,this.dynamicProperties);
              this.a = PropertyFactory.getProp(elem,data.a,0,0.01,this.dynamicProperties);
              if(this.dynamicProperties.length){
                  arr.push(this);
              }else{
                  this.getValue();
              }
          }
      }());
  
      function getTextSelectorProp(elem, data,arr) {
          return new TextSelectorProp(elem, data, arr);
      };
  
      var ob = {};
      ob.getProp = getProp;
      ob.getDashProp = getDashProp;
      ob.getTextSelectorProp = getTextSelectorProp;
      ob.getGradientProp = getGradientProp;
      return ob;
  }());
  function ShapePath(){
  	this.c = false;
  	this._length = 0;
  	this._maxLength = 8;
  	this.v = Array.apply(null,{length:this._maxLength});
  	this.o = Array.apply(null,{length:this._maxLength});
  	this.i = Array.apply(null,{length:this._maxLength});
  };
  
  ShapePath.prototype.setPathData = function(closed, len) {
  	this.c = closed;
  	while(len > this._maxLength){
  		this.doubleArrayLength();
  	}
  	var i = 0;
  	while(i < len){
  		this.v[i] = point_pool.newPoint();
  		this.o[i] = point_pool.newPoint();
  		this.i[i] = point_pool.newPoint();
  		i += 1;
  	}
  	this._length = len;
  };
  
  ShapePath.prototype.doubleArrayLength = function() {
  	this.v = this.v.concat(Array.apply(null,{length:this._maxLength}))
  	this.i = this.i.concat(Array.apply(null,{length:this._maxLength}))
  	this.o = this.o.concat(Array.apply(null,{length:this._maxLength}))
  	this._maxLength *= 2;
  };
  
  ShapePath.prototype.setXYAt = function(x, y, type, pos, replace) {
  	var arr;
  	this._length = Math.max(this._length, pos + 1);
  	if(this._length >= this._maxLength) {
  		this.doubleArrayLength();
  	}
  	switch(type){
  		case 'v':
  			arr = this.v;
  			break;
  		case 'i':
  			arr = this.i;
  			break;
  		case 'o':
  			arr = this.o;
  			break;
  	}
  	if(!arr[pos] || (arr[pos] && !replace)){
  		arr[pos] = point_pool.newPoint();
  	}
  	arr[pos][0] = x;
  	arr[pos][1] = y;
  };
  
  ShapePath.prototype.setTripleAt = function(vX,vY,oX,oY,iX,iY,pos, replace) {
  	this.setXYAt(vX,vY,'v',pos, replace);
  	this.setXYAt(oX,oY,'o',pos, replace);
  	this.setXYAt(iX,iY,'i',pos, replace);
  };
  var ShapePropertyFactory = (function(){
  
      var initFrame = -999999;
  
      function interpolateShape() {
          if(this.elem.globalData.frameId === this.frameId){
              return;
          }
          this.mdf = false;
          var frameNum = this.comp.renderedFrame - this.offsetTime;
          if(!((this.lastFrame !== initFrame && ((this.lastFrame < this.keyframes[0].t-this.offsetTime && frameNum < this.keyframes[0].t-this.offsetTime) || (this.lastFrame > this.keyframes[this.keyframes.length - 1].t-this.offsetTime && frameNum > this.keyframes[this.keyframes.length - 1].t-this.offsetTime))))){
              var keyPropS,keyPropE,isHold;
              if(frameNum < this.keyframes[0].t-this.offsetTime){
                  keyPropS = this.keyframes[0].s[0];
                  isHold = true;
                  this._lastIndex = 0;
              }else if(frameNum >= this.keyframes[this.keyframes.length - 1].t-this.offsetTime){
                  if(this.keyframes[this.keyframes.length - 2].h === 1){
                      keyPropS = this.keyframes[this.keyframes.length - 1].s[0];
                  }else{
                      keyPropS = this.keyframes[this.keyframes.length - 2].e[0];
                  }
                  isHold = true;
              }else{
                  var i = this.lastFrame < initFrame ? this._lastIndex : 0;
                  var len = this.keyframes.length- 1,flag = true,keyData,nextKeyData, j, jLen, k, kLen;
                  while(flag){
                      keyData = this.keyframes[i];
                      nextKeyData = this.keyframes[i+1];
                      if((nextKeyData.t - this.offsetTime) > frameNum){
                          break;
                      }
                      if(i < len - 1){
                          i += 1;
                      }else{
                          flag = false;
                      }
                  }
                  isHold = keyData.h === 1;
                  this._lastIndex = i;
  
                  var perc;
                  if(!isHold){
                      if(frameNum >= nextKeyData.t-this.offsetTime){
                          perc = 1;
                      }else if(frameNum < keyData.t-this.offsetTime){
                          perc = 0;
                      }else{
                          var fnc;
                          if(keyData.__fnct){
                              fnc = keyData.__fnct;
                          }else{
                              fnc = BezierFactory.getBezierEasing(keyData.o.x,keyData.o.y,keyData.i.x,keyData.i.y).get;
                              keyData.__fnct = fnc;
                          }
                          perc = fnc((frameNum-(keyData.t-this.offsetTime))/((nextKeyData.t-this.offsetTime)-(keyData.t-this.offsetTime)));
                      }
                      keyPropE = keyData.e[0];
                  }
                  keyPropS = keyData.s[0];
              }
              jLen = this.v._length;
              kLen = keyPropS.i[0].length;
              var hasModified = false;
              var vertexValue;
              for(j=0;j<jLen;j+=1){
                  for(k=0;k<kLen;k+=1){
                      if(isHold){
                          vertexValue = keyPropS.i[j][k];
                          if(this.v.i[j][k] !== vertexValue){
                              this.v.i[j][k] = vertexValue;
                              this.pv.i[j][k] = vertexValue;
                              hasModified = true;
                          }
                          vertexValue = keyPropS.o[j][k];
                          if(this.v.o[j][k] !== vertexValue){
                              this.v.o[j][k] = vertexValue;
                              this.pv.o[j][k] = vertexValue;
                              hasModified = true;
                          }
                          vertexValue = keyPropS.v[j][k];
                          if(this.v.v[j][k] !== vertexValue){
                              this.v.v[j][k] = vertexValue;
                              this.pv.v[j][k] = vertexValue;
                              hasModified = true;
                          }
                      }else{
                          vertexValue = keyPropS.i[j][k]+(keyPropE.i[j][k]-keyPropS.i[j][k])*perc;
                          if(this.v.i[j][k] !== vertexValue){
                              this.v.i[j][k] = vertexValue;
                              this.pv.i[j][k] = vertexValue;
                              hasModified = true;
                          }
                          vertexValue = keyPropS.o[j][k]+(keyPropE.o[j][k]-keyPropS.o[j][k])*perc;
                          if(this.v.o[j][k] !== vertexValue){
                              this.v.o[j][k] = vertexValue;
                              this.pv.o[j][k] = vertexValue;
                              hasModified = true;
                          }
                          vertexValue = keyPropS.v[j][k]+(keyPropE.v[j][k]-keyPropS.v[j][k])*perc;
                          if(this.v.v[j][k] !== vertexValue){
                              this.v.v[j][k] = vertexValue;
                              this.pv.v[j][k] = vertexValue;
                              hasModified = true;
                          }
                      }
                  }
              }
              this.mdf = hasModified;
              this.v.c = keyPropS.c;
              this.paths = this.localShapeCollection;
          }
  
          this.lastFrame = frameNum;
          this.frameId = this.elem.globalData.frameId;
      }
  
      function getShapeValue(){
          return this.v;
      }
  
      function resetShape(){
          this.paths = this.localShapeCollection;
          if(!this.k){
              this.mdf = false;
          }
      }
  
      function ShapeProperty(elem, data, type){
          this.comp = elem.comp;
          this.k = false;
          this.mdf = false;
          this.v = shape_pool.newShape();
          var pathData = type === 3 ? data.pt.k : data.ks.k;
          this.v.v = pathData.v;
          this.v.i = pathData.i;
          this.v.o = pathData.o;
          this.v.c = pathData.c;
          this.v._length = this.v.v.length;
          this.getValue = getShapeValue;
          this.pv = shape_pool.clone(this.v);
          this.localShapeCollection = shapeCollection_pool.newShapeCollection();
          this.paths = this.localShapeCollection;
          this.paths.addShape(this.v);
          this.reset = resetShape;
      }
  
      function KeyframedShapeProperty(elem,data,type){
          this.comp = elem.comp;
          this.elem = elem;
          this.offsetTime = elem.data.st;
          this._lastIndex = 0;
          this.getValue = interpolateShape;
          this.keyframes = type === 3 ? data.pt.k : data.ks.k;
          this.k = true;
          this.kf = true;
          var i, len = this.keyframes[0].s[0].i.length;
          var jLen = this.keyframes[0].s[0].i[0].length;
          this.v = shape_pool.newShape();
          this.v.setPathData(this.keyframes[0].s[0].c, len);
          this.pv = shape_pool.clone(this.v);
          this.localShapeCollection = shapeCollection_pool.newShapeCollection();
          this.paths = this.localShapeCollection;
          this.paths.addShape(this.v);
          this.lastFrame = initFrame;
          this.reset = resetShape;
      }
  
      var EllShapeProperty = (function(){
  
          var cPoint = roundCorner;
  
          function convertEllToPath(){
              var p0 = this.p.v[0], p1 = this.p.v[1], s0 = this.s.v[0]/2, s1 = this.s.v[1]/2;
              if(this.d !== 3){
                  this.v.v[0][0] = p0;
                  this.v.v[0][1] = p1-s1;
                  this.v.v[1][0] = p0 + s0;
                  this.v.v[1][1] = p1;
                  this.v.v[2][0] = p0;
                  this.v.v[2][1] = p1+s1;
                  this.v.v[3][0] = p0 - s0;
                  this.v.v[3][1] = p1;
                  this.v.i[0][0] = p0 - s0*cPoint;
                  this.v.i[0][1] = p1 - s1;
                  this.v.i[1][0] = p0 + s0;
                  this.v.i[1][1] = p1 - s1*cPoint;
                  this.v.i[2][0] = p0 + s0*cPoint;
                  this.v.i[2][1] = p1 + s1;
                  this.v.i[3][0] = p0 - s0;
                  this.v.i[3][1] = p1 + s1*cPoint;
                  this.v.o[0][0] = p0 + s0*cPoint;
                  this.v.o[0][1] = p1 - s1;
                  this.v.o[1][0] = p0 + s0;
                  this.v.o[1][1] = p1 + s1*cPoint;
                  this.v.o[2][0] = p0 - s0*cPoint;
                  this.v.o[2][1] = p1 + s1;
                  this.v.o[3][0] = p0 - s0;
                  this.v.o[3][1] = p1 - s1*cPoint;
              }else{
                  this.v.v[0][0] = p0;
                  this.v.v[0][1] = p1-s1;
                  this.v.v[1][0] = p0 - s0;
                  this.v.v[1][1] = p1;
                  this.v.v[2][0] = p0;
                  this.v.v[2][1] = p1+s1;
                  this.v.v[3][0] = p0 + s0;
                  this.v.v[3][1] = p1;
                  this.v.i[0][0] = p0 + s0*cPoint;
                  this.v.i[0][1] = p1 - s1;
                  this.v.i[1][0] = p0 - s0;
                  this.v.i[1][1] = p1 - s1*cPoint;
                  this.v.i[2][0] = p0 - s0*cPoint;
                  this.v.i[2][1] = p1 + s1;
                  this.v.i[3][0] = p0 + s0;
                  this.v.i[3][1] = p1 + s1*cPoint;
                  this.v.o[0][0] = p0 - s0*cPoint;
                  this.v.o[0][1] = p1 - s1;
                  this.v.o[1][0] = p0 - s0;
                  this.v.o[1][1] = p1 + s1*cPoint;
                  this.v.o[2][0] = p0 + s0*cPoint;
                  this.v.o[2][1] = p1 + s1;
                  this.v.o[3][0] = p0 + s0;
                  this.v.o[3][1] = p1 - s1*cPoint;
              }
          }
  
          function processKeys(frameNum){
              var i, len = this.dynamicProperties.length;
              if(this.elem.globalData.frameId === this.frameId){
                  return;
              }
              this.mdf = false;
              this.frameId = this.elem.globalData.frameId;
  
              for(i=0;i<len;i+=1){
                  this.dynamicProperties[i].getValue(frameNum);
                  if(this.dynamicProperties[i].mdf){
                      this.mdf = true;
                  }
              }
              if(this.mdf){
                  this.convertEllToPath();
              }
          }
  
          return function EllShapeProperty(elem,data) {
              /*this.v = {
                  v: Array.apply(null,{length:4}),
                  i: Array.apply(null,{length:4}),
                  o: Array.apply(null,{length:4}),
                  c: true
              };*/
              this.v = shape_pool.newShape();
              this.v.setPathData(true, 4);
              this.localShapeCollection = shapeCollection_pool.newShapeCollection();
              this.paths = this.localShapeCollection;
              this.localShapeCollection.addShape(this.v);
              this.d = data.d;
              this.dynamicProperties = [];
              this.elem = elem;
              this.comp = elem.comp;
              this.frameId = -1;
              this.mdf = false;
              this.getValue = processKeys;
              this.convertEllToPath = convertEllToPath;
              this.reset = resetShape;
              this.p = PropertyFactory.getProp(elem,data.p,1,0,this.dynamicProperties);
              this.s = PropertyFactory.getProp(elem,data.s,1,0,this.dynamicProperties);
              if(this.dynamicProperties.length){
                  this.k = true;
              }else{
                  this.convertEllToPath();
              }
          }
      }());
  
      var StarShapeProperty = (function() {
  
          function convertPolygonToPath(){
              var numPts = Math.floor(this.pt.v);
              var angle = Math.PI*2/numPts;
              /*this.v.v.length = numPts;
              this.v.i.length = numPts;
              this.v.o.length = numPts;*/
              var rad = this.or.v;
              var roundness = this.os.v;
              var perimSegment = 2*Math.PI*rad/(numPts*4);
              var i, currentAng = -Math.PI/ 2;
              var dir = this.data.d === 3 ? -1 : 1;
              currentAng += this.r.v;
              this.v._length = 0;
              for(i=0;i<numPts;i+=1){
                  var x = rad * Math.cos(currentAng);
                  var y = rad * Math.sin(currentAng);
                  var ox = x === 0 && y === 0 ? 0 : y/Math.sqrt(x*x + y*y);
                  var oy = x === 0 && y === 0 ? 0 : -x/Math.sqrt(x*x + y*y);
                  x +=  + this.p.v[0];
                  y +=  + this.p.v[1];
                  this.v.setTripleAt(x,y,x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir,x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir, i, true);
                  /*this.v.v[i] = [x,y];
                  this.v.i[i] = [x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir];
                  this.v.o[i] = [x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir];*/
                  currentAng += angle*dir;
              }
              this.paths.length = 0;
              this.paths[0] = this.v;
          }
  
          function convertStarToPath() {
              var numPts = Math.floor(this.pt.v)*2;
              var angle = Math.PI*2/numPts;
              /*this.v.v.length = numPts;
              this.v.i.length = numPts;
              this.v.o.length = numPts;*/
              var longFlag = true;
              var longRad = this.or.v;
              var shortRad = this.ir.v;
              var longRound = this.os.v;
              var shortRound = this.is.v;
              var longPerimSegment = 2*Math.PI*longRad/(numPts*2);
              var shortPerimSegment = 2*Math.PI*shortRad/(numPts*2);
              var i, rad,roundness,perimSegment, currentAng = -Math.PI/ 2;
              currentAng += this.r.v;
              var dir = this.data.d === 3 ? -1 : 1;
              this.v._length = 0;
              for(i=0;i<numPts;i+=1){
                  rad = longFlag ? longRad : shortRad;
                  roundness = longFlag ? longRound : shortRound;
                  perimSegment = longFlag ? longPerimSegment : shortPerimSegment;
                  var x = rad * Math.cos(currentAng);
                  var y = rad * Math.sin(currentAng);
                  var ox = x === 0 && y === 0 ? 0 : y/Math.sqrt(x*x + y*y);
                  var oy = x === 0 && y === 0 ? 0 : -x/Math.sqrt(x*x + y*y);
                  x +=  + this.p.v[0];
                  y +=  + this.p.v[1];
                  this.v.setTripleAt(x,y,x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir,x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir, i, true);
  
                  /*this.v.v[i] = [x,y];
                  this.v.i[i] = [x+ox*perimSegment*roundness*dir,y+oy*perimSegment*roundness*dir];
                  this.v.o[i] = [x-ox*perimSegment*roundness*dir,y-oy*perimSegment*roundness*dir];
                  this.v._length = numPts;*/
                  longFlag = !longFlag;
                  currentAng += angle*dir;
              }
          }
  
          function processKeys() {
              if(this.elem.globalData.frameId === this.frameId){
                  return;
              }
              this.mdf = false;
              this.frameId = this.elem.globalData.frameId;
              var i, len = this.dynamicProperties.length;
  
              for(i=0;i<len;i+=1){
                  this.dynamicProperties[i].getValue();
                  if(this.dynamicProperties[i].mdf){
                      this.mdf = true;
                  }
              }
              if(this.mdf){
                  this.convertToPath();
              }
          }
  
          return function StarShapeProperty(elem,data) {
              /*this.v = {
                  v: [],
                  i: [],
                  o: [],
                  c: true
              };*/
              this.v = shape_pool.newShape();
              this.v.setPathData(true, 0);
              this.elem = elem;
              this.comp = elem.comp;
              this.data = data;
              this.frameId = -1;
              this.d = data.d;
              this.dynamicProperties = [];
              this.mdf = false;
              this.getValue = processKeys;
              this.reset = resetShape;
              if(data.sy === 1){
                  this.ir = PropertyFactory.getProp(elem,data.ir,0,0,this.dynamicProperties);
                  this.is = PropertyFactory.getProp(elem,data.is,0,0.01,this.dynamicProperties);
                  this.convertToPath = convertStarToPath;
              } else {
                  this.convertToPath = convertPolygonToPath;
              }
              this.pt = PropertyFactory.getProp(elem,data.pt,0,0,this.dynamicProperties);
              this.p = PropertyFactory.getProp(elem,data.p,1,0,this.dynamicProperties);
              this.r = PropertyFactory.getProp(elem,data.r,0,degToRads,this.dynamicProperties);
              this.or = PropertyFactory.getProp(elem,data.or,0,0,this.dynamicProperties);
              this.os = PropertyFactory.getProp(elem,data.os,0,0.01,this.dynamicProperties);
              this.localShapeCollection = shapeCollection_pool.newShapeCollection();
              this.localShapeCollection.addShape(this.v);
              this.paths = this.localShapeCollection;
              if(this.dynamicProperties.length){
                  this.k = true;
              }else{
                  this.convertToPath();
              }
          }
      }());
  
      var RectShapeProperty = (function() {
          function processKeys(frameNum){
              if(this.elem.globalData.frameId === this.frameId){
                  return;
              }
              this.mdf = false;
              this.frameId = this.elem.globalData.frameId;
              var i, len = this.dynamicProperties.length;
  
              for(i=0;i<len;i+=1){
                  this.dynamicProperties[i].getValue(frameNum);
                  if(this.dynamicProperties[i].mdf){
                      this.mdf = true;
                  }
              }
              if(this.mdf){
                  this.convertRectToPath();
              }
  
          }
  
          function convertRectToPath(){
              var p0 = this.p.v[0], p1 = this.p.v[1], v0 = this.s.v[0]/2, v1 = this.s.v[1]/2;
              var round = bm_min(v0,v1,this.r.v);
              var cPoint = round*(1-roundCorner);
              this.v._length = 0;
  
              if(this.d === 2 || this.d === 1) {
                  this.v.setTripleAt(p0+v0, p1-v1+round,p0+v0, p1-v1+round,p0+v0,p1-v1+cPoint,0, true);
                  this.v.setTripleAt(p0+v0, p1+v1-round,p0+v0, p1+v1-cPoint,p0+v0, p1+v1-round,1, true);
                  if(round!== 0){
                      this.v.setTripleAt(p0+v0-round, p1+v1,p0+v0-round,p1+v1,p0+v0-cPoint,p1+v1,2, true);
                      this.v.setTripleAt(p0-v0+round,p1+v1,p0-v0+cPoint,p1+v1,p0-v0+round,p1+v1,3, true);
                      this.v.setTripleAt(p0-v0,p1+v1-round,p0-v0,p1+v1-round,p0-v0,p1+v1-cPoint,4, true);
                      this.v.setTripleAt(p0-v0,p1-v1+round,p0-v0,p1-v1+cPoint,p0-v0,p1-v1+round,5, true);
                      this.v.setTripleAt(p0-v0+round,p1-v1,p0-v0+round,p1-v1,p0-v0+cPoint,p1-v1,6, true);
                      this.v.setTripleAt(p0+v0-round,p1-v1,p0+v0-cPoint,p1-v1,p0+v0-round,p1-v1,7, true);
                  } else {
                      this.v.setTripleAt(p0-v0,p1+v1,p0-v0+cPoint,p1+v1,p0-v0,p1+v1,2);
                      this.v.setTripleAt(p0-v0,p1-v1,p0-v0,p1-v1+cPoint,p0-v0,p1-v1,3);
                  }
              }else{
                  this.v.setTripleAt(p0+v0,p1-v1+round,p0+v0,p1-v1+cPoint,p0+v0,p1-v1+round,0, true);
                  if(round!== 0){
                      this.v.setTripleAt(p0+v0-round,p1-v1,p0+v0-round,p1-v1,p0+v0-cPoint,p1-v1,1, true);
                      this.v.setTripleAt(p0-v0+round,p1-v1,p0-v0+cPoint,p1-v1,p0-v0+round,p1-v1,2, true);
                      this.v.setTripleAt(p0-v0,p1-v1+round,p0-v0,p1-v1+round,p0-v0,p1-v1+cPoint,3, true);
                      this.v.setTripleAt(p0-v0,p1+v1-round,p0-v0,p1+v1-cPoint,p0-v0,p1+v1-round,4, true);
                      this.v.setTripleAt(p0-v0+round,p1+v1,p0-v0+round,p1+v1,p0-v0+cPoint,p1+v1,5, true);
                      this.v.setTripleAt(p0+v0-round,p1+v1,p0+v0-cPoint,p1+v1,p0+v0-round,p1+v1,6, true);
                      this.v.setTripleAt(p0+v0,p1+v1-round,p0+v0,p1+v1-round,p0+v0,p1+v1-cPoint,7, true);
                  } else {
                      this.v.setTripleAt(p0-v0,p1-v1,p0-v0+cPoint,p1-v1,p0-v0,p1-v1,1, true);
                      this.v.setTripleAt(p0-v0,p1+v1,p0-v0,p1+v1-cPoint,p0-v0,p1+v1,2, true);
                      this.v.setTripleAt(p0+v0,p1+v1,p0+v0-cPoint,p1+v1,p0+v0,p1+v1,3, true);
  
                  }
              }
          }
  
          return function RectShapeProperty(elem,data) {
              this.v = shape_pool.newShape();
              this.v.c = true;
              this.localShapeCollection = shapeCollection_pool.newShapeCollection();
              this.localShapeCollection.addShape(this.v);
              this.paths = this.localShapeCollection;
              this.elem = elem;
              this.comp = elem.comp;
              this.frameId = -1;
              this.d = data.d;
              this.dynamicProperties = [];
              this.mdf = false;
              this.getValue = processKeys;
              this.convertRectToPath = convertRectToPath;
              this.reset = resetShape;
              this.p = PropertyFactory.getProp(elem,data.p,1,0,this.dynamicProperties);
              this.s = PropertyFactory.getProp(elem,data.s,1,0,this.dynamicProperties);
              this.r = PropertyFactory.getProp(elem,data.r,0,0,this.dynamicProperties);
              if(this.dynamicProperties.length){
                  this.k = true;
              }else{
                  this.convertRectToPath();
              }
          }
      }());
  
      function getShapeProp(elem,data,type, arr){
          var prop;
          if(type === 3 || type === 4){
              var dataProp = type === 3 ? data.pt : data.ks;
              var keys = dataProp.k;
              if(dataProp.a === 1 || keys.length){
                  prop = new KeyframedShapeProperty(elem, data, type);
              }else{
                  prop = new ShapeProperty(elem, data, type);
              }
          }else if(type === 5){
              prop = new RectShapeProperty(elem, data);
          }else if(type === 6){
              prop = new EllShapeProperty(elem, data);
          }else if(type === 7){
              prop = new StarShapeProperty(elem, data);
          }
          if(prop.k){
              arr.push(prop);
          }
          return prop;
      }
  
      var ob = {};
      ob.getShapeProp = getShapeProp;
      return ob;
  }());
  var ShapeModifiers = (function(){
      var ob = {};
      var modifiers = {};
      ob.registerModifier = registerModifier;
      ob.getModifier = getModifier;
  
      function registerModifier(nm,factory){
          if(!modifiers[nm]){
              modifiers[nm] = factory;
          }
      }
  
      function getModifier(nm,elem, data, dynamicProperties){
          return new modifiers[nm](elem, data, dynamicProperties);
      }
  
      return ob;
  }());
  
  function ShapeModifier(){}
  ShapeModifier.prototype.initModifierProperties = function(){};
  ShapeModifier.prototype.addShapeToModifier = function(){};
  ShapeModifier.prototype.addShape = function(data){
      if(!this.closed){
          this.shapes.push({shape:data.sh, data: data, localShapeCollection:shapeCollection_pool.newShapeCollection()});
          this.addShapeToModifier(data.sh);
      }
  }
  ShapeModifier.prototype.init = function(elem,data,dynamicProperties){
      this.elem = elem;
      this.frameId = -1;
      this.shapes = [];
      this.dynamicProperties = [];
      this.mdf = false;
      this.closed = false;
      this.k = false;
      this.isTrimming = false;
      this.comp = elem.comp;
      this.initModifierProperties(elem,data);
      if(this.dynamicProperties.length){
          this.k = true;
          dynamicProperties.push(this);
      }else{
          this.getValue(true);
      }
  }
  function TrimModifier(){};
  extendPrototype(ShapeModifier,TrimModifier);
  TrimModifier.prototype.processKeys = function(forceRender){
      if(this.elem.globalData.frameId === this.frameId && !forceRender){
          return;
      }
      this.mdf = forceRender ? true : false;
      this.frameId = this.elem.globalData.frameId;
      var i, len = this.dynamicProperties.length;
  
      for(i=0;i<len;i+=1){
          this.dynamicProperties[i].getValue();
          if(this.dynamicProperties[i].mdf){
              this.mdf = true;
          }
      }
      if(this.mdf || forceRender){
          var o = (this.o.v%360)/360;
          if(o < 0){
              o += 1;
          }
          var s = this.s.v + o;
          var e = this.e.v + o;
          if(s == e){
  
          }
          if(s>e){
              var _s = s;
              s = e;
              e = _s;
          }
          this.sValue = s;
          this.eValue = e;
          this.oValue = o;
      }
  }
  TrimModifier.prototype.initModifierProperties = function(elem,data){
      this.sValue = 0;
      this.eValue = 0;
      this.oValue = 0;
      this.getValue = this.processKeys;
      this.s = PropertyFactory.getProp(elem,data.s,0,0.01,this.dynamicProperties);
      this.e = PropertyFactory.getProp(elem,data.e,0,0.01,this.dynamicProperties);
      this.o = PropertyFactory.getProp(elem,data.o,0,0,this.dynamicProperties);
      this.m = data.m;
      if(!this.dynamicProperties.length){
          this.getValue(true);
      }
  };
  
  TrimModifier.prototype.getSegmentsLength = function(shapeData){
      var closed = shapeData.c;
      var pathV = shapeData.v;
      var pathO = shapeData.o;
      var pathI = shapeData.i;
      var i, len = shapeData._length;
      var lengths = [];
      var totalLength = 0;
      for(i=0;i<len-1;i+=1){
          lengths[i] = bez.getBezierLength(pathV[i],pathV[i+1],pathO[i],pathI[i+1]);
          totalLength += lengths[i].addedLength;
      }
      if(closed){
          lengths[i] = bez.getBezierLength(pathV[i],pathV[0],pathO[i],pathI[0]);
          totalLength += lengths[i].addedLength;
      }
      return {lengths:lengths,totalLength:totalLength};
  }
  
  TrimModifier.prototype.calculateShapeEdges = function(s, e, shapeLength, addedLength, totalModifierLength) {
      var segments = []
      if(e <= 1){
          segments.push({
              s: s,
              e: e
          })
      }else if(s >= 1){
          segments.push({
              s: s - 1,
              e: e - 1
          })
      }else{
          segments.push({
              s: s,
              e: 1
          })
          segments.push({
              s: 0,
              e: e - 1
          })
      }
      var shapeSegments = [];
      var i, len = segments.length, segmentOb;
      for(i = 0; i < len; i += 1) {
          segmentOb = segments[i];
          if (segmentOb.e * totalModifierLength < addedLength || segmentOb.s * totalModifierLength > addedLength + shapeLength) {
              
          } else {
              var shapeS, shapeE;
              if(segmentOb.s * totalModifierLength <= addedLength) {
                  shapeS = 0;
              } else {
                  shapeS = (segmentOb.s * totalModifierLength - addedLength) / shapeLength;
              }
              if(segmentOb.e * totalModifierLength >= addedLength + shapeLength) {
                  shapeE = 1;
              } else {
                  shapeE = ((segmentOb.e * totalModifierLength - addedLength) / shapeLength);
              }
              shapeSegments.push([shapeS, shapeE]);
          }
      }
      if(!shapeSegments.length){
          shapeSegments.push([0,0]);
      }
      return shapeSegments;
  }
  
  TrimModifier.prototype.processShapes = function(firstFrame){
      var shapePaths;
      var i, len = this.shapes.length;
      var j, jLen;
      var s = this.sValue;
      var e = this.eValue;
      var pathsData,pathData, totalShapeLength, totalModifierLength = 0;
  
      if(e === s){
          for(i=0;i<len;i+=1){
              this.shapes[i].localShapeCollection.releaseShapes();
              this.shapes[i].shape.mdf = true;
              this.shapes[i].shape.paths = this.shapes[i].localShapeCollection;
          }
      } else if(!((e === 1 && s === 0) || (e===0 && s === 1))){
          var segments = [], shapeData, localShapeCollection;
          for(i=0;i<len;i+=1){
              shapeData = this.shapes[i];
              if(!shapeData.shape.mdf && !this.mdf && !firstFrame && this.m !== 2){
                  shapeData.shape.paths = shapeData.localShapeCollection;
              } else {
                  shapePaths = shapeData.shape.paths;
                  jLen = shapePaths._length;
                  totalShapeLength = 0;
                  if(!shapeData.shape.mdf && shapeData.pathsData){
                      totalShapeLength = shapeData.totalShapeLength;
                  } else {
                      pathsData = [];
                      for(j=0;j<jLen;j+=1){
                          pathData = this.getSegmentsLength(shapePaths.shapes[j]);
                          pathsData.push(pathData);
                          totalShapeLength += pathData.totalLength;
                      }
                      shapeData.totalShapeLength = totalShapeLength;
                      shapeData.pathsData = pathsData;
                  }
  
                  totalModifierLength += totalShapeLength;
                  shapeData.shape.mdf = true;
              }
          }
          var shapeS = s, shapeE = e, addedLength = 0;
          var j, jLen;
          for(i = len - 1; i >= 0; i -= 1){
              shapeData = this.shapes[i];
              if (shapeData.shape.mdf) {
                  localShapeCollection = shapeData.localShapeCollection;
                  localShapeCollection.releaseShapes();
                  if(this.m === 2 && len > 1) {
                      var edges = this.calculateShapeEdges(s, e, shapeData.totalShapeLength, addedLength, totalModifierLength);
                      addedLength += shapeData.totalShapeLength;
                  } else {
                      edges = [[shapeS, shapeE]]
                  }
                  jLen = edges.length;
                  for (j = 0; j < jLen; j += 1) {
                      shapeS = edges[j][0];
                      shapeE = edges[j][1];
                      segments.length = 0;
                      if(shapeE <= 1){
                          segments.push({
                              s:shapeData.totalShapeLength * shapeS,
                              e:shapeData.totalShapeLength * shapeE
                          })
                      }else if(shapeS >= 1){
                          segments.push({
                              s:shapeData.totalShapeLength * (shapeS - 1),
                              e:shapeData.totalShapeLength * (shapeE - 1)
                          })
                      }else{
                          segments.push({
                              s:shapeData.totalShapeLength * shapeS,
                              e:shapeData.totalShapeLength
                          })
                          segments.push({
                              s:0,
                              e:shapeData.totalShapeLength*(shapeE - 1)
                          })
                      }
                      var newShapesData = this.addShapes(shapeData,segments[0]);
                      if (segments[0].s !== segments[0].e) {
                          var lastPos;
                          if(segments.length > 1){
                              if(shapeData.shape.v.c){
                                  var lastShape = newShapesData.pop();
                                  this.addPaths(newShapesData, localShapeCollection);
                                  newShapesData = this.addShapes(shapeData,segments[1], lastShape);
                              } else {
                                  this.addPaths(newShapesData, localShapeCollection);
                                  newShapesData = this.addShapes(shapeData,segments[1]);
                              }
                          } 
                          this.addPaths(newShapesData, localShapeCollection);
                      }
                      
                  }
                  shapeData.shape.paths = localShapeCollection;
              }
          }
      } else if(this.mdf){
          for(i=0;i<len;i+=1){
              this.shapes[i].shape.mdf = true;
          }
      }
      if(!this.dynamicProperties.length){
          this.mdf = false;
      }
  }
  
  TrimModifier.prototype.addPaths = function(newPaths, localShapeCollection) {
      var i, len = newPaths.length;
      for(i = 0; i < len; i += 1) {
          localShapeCollection.addShape(newPaths[i])
      }
  }
  
  TrimModifier.prototype.addSegment = function(pt1,pt2,pt3,pt4,shapePath,pos, newShape) {
      /*console.log(pt1, 'vertex: v, at: ', pos);
      console.log(pt2, 'vertex: o, at: ', pos);
      console.log(pt3, 'vertex: i, at: ', pos + 1);
      console.log(pt4, 'vertex: v, at: ', pos + 1);
      console.log('newShape: ', newShape);*/
      shapePath.setXYAt(pt2[0],pt2[1],'o',pos);
      shapePath.setXYAt(pt3[0],pt3[1],'i',pos + 1);
      if(newShape){
          shapePath.setXYAt(pt1[0],pt1[1],'v',pos);
      }
      shapePath.setXYAt(pt4[0],pt4[1],'v',pos + 1);
  }
  
  TrimModifier.prototype.addShapes = function(shapeData, shapeSegment, shapePath){
      var pathsData = shapeData.pathsData;
      var shapePaths = shapeData.shape.paths.shapes;
      var i, len = shapeData.shape.paths._length, j, jLen;
      var addedLength = 0;
      var currentLengthData,segmentCount;
      var lengths;
      var segment;
      var shapes = [];
      var initPos;
      var newShape = true;
      if(!shapePath){
          shapePath = shape_pool.newShape();
          segmentCount = 0;
          initPos = 0;
      } else {
          segmentCount = shapePath._length;
          initPos = shapePath._length;
      }
      shapes.push(shapePath);
      for(i=0;i<len;i+=1){
          lengths = pathsData[i].lengths;
          shapePath.c = shapePaths[i].c;
          jLen = shapePaths[i].c ? lengths.length : lengths.length + 1;
          for(j=1;j<jLen;j+=1){
              currentLengthData = lengths[j-1];
              if(addedLength + currentLengthData.addedLength < shapeSegment.s){
                  addedLength += currentLengthData.addedLength;
                  shapePath.c = false;
              } else if(addedLength > shapeSegment.e){
                  shapePath.c = false;
                  break;
              } else {
                  if(shapeSegment.s <= addedLength && shapeSegment.e >= addedLength + currentLengthData.addedLength){
                      this.addSegment(shapePaths[i].v[j-1],shapePaths[i].o[j-1],shapePaths[i].i[j],shapePaths[i].v[j],shapePath,segmentCount,newShape);
                      newShape = false;
                  } else {
                      segment = bez.getNewSegment(shapePaths[i].v[j-1],shapePaths[i].v[j],shapePaths[i].o[j-1],shapePaths[i].i[j], (shapeSegment.s - addedLength)/currentLengthData.addedLength,(shapeSegment.e - addedLength)/currentLengthData.addedLength, lengths[j-1]);
                      this.addSegment(segment.pt1,segment.pt3,segment.pt4,segment.pt2,shapePath,segmentCount,newShape);
                      newShape = false;
                      shapePath.c = false;
                  }
                  addedLength += currentLengthData.addedLength;
                  segmentCount += 1;
              }
          }
          if(shapePaths[i].c){
              currentLengthData = lengths[j-1];
              if(addedLength <= shapeSegment.e){
                  var segmentLength = lengths[j-1].addedLength;
                  if(shapeSegment.s <= addedLength && shapeSegment.e >= addedLength + segmentLength){
                      this.addSegment(shapePaths[i].v[j-1],shapePaths[i].o[j-1],shapePaths[i].i[0],shapePaths[i].v[0],shapePath,segmentCount,newShape);
                      newShape = false;
                  }else{
                      segment = bez.getNewSegment(shapePaths[i].v[j-1],shapePaths[i].v[0],shapePaths[i].o[j-1],shapePaths[i].i[0], (shapeSegment.s - addedLength)/segmentLength,(shapeSegment.e - addedLength)/segmentLength, lengths[j-1]);
                      this.addSegment(segment.pt1,segment.pt3,segment.pt4,segment.pt2,shapePath,segmentCount,newShape);
                      newShape = false;
                      shapePath.c = false;
                  }
              } else {
                  shapePath.c = false;
              }
              addedLength += currentLengthData.addedLength;
              segmentCount += 1;
          }
          if(shapePath._length){
              shapePath.setXYAt(shapePath.v[initPos][0],shapePath.v[initPos][1],'i',initPos);
              shapePath.setXYAt(shapePath.v[shapePath._length - 1][0],shapePath.v[shapePath._length - 1][1],'o',shapePath._length - 1);
          }
          if(addedLength > shapeSegment.e){
              break;
          }
          if(i<len-1){
              shapePath = shape_pool.newShape();
              newShape = true;
              shapes.push(shapePath);
              segmentCount = 0;
          }
      }
      return shapes;
  
  }
  
  
  ShapeModifiers.registerModifier('tm',TrimModifier);
  function RoundCornersModifier(){};
  extendPrototype(ShapeModifier,RoundCornersModifier);
  RoundCornersModifier.prototype.processKeys = function(forceRender){
      if(this.elem.globalData.frameId === this.frameId && !forceRender){
          return;
      }
      this.mdf = forceRender ? true : false;
      this.frameId = this.elem.globalData.frameId;
      var i, len = this.dynamicProperties.length;
  
      for(i=0;i<len;i+=1){
          this.dynamicProperties[i].getValue();
          if(this.dynamicProperties[i].mdf){
              this.mdf = true;
          }
      }
  }
  RoundCornersModifier.prototype.initModifierProperties = function(elem,data){
      this.getValue = this.processKeys;
      this.rd = PropertyFactory.getProp(elem,data.r,0,null,this.dynamicProperties);
      if(!this.dynamicProperties.length){
          this.getValue(true);
      }
  };
  
  RoundCornersModifier.prototype.processPath = function(path, round){
      var cloned_path = shape_pool.newShape();
      cloned_path.c = path.c;
      var i, len = path._length;
      var currentV,currentI,currentO,closerV, newV,newO,newI,distance,newPosPerc,index = 0;
      var vX,vY,oX,oY,iX,iY;
      for(i=0;i<len;i+=1){
          currentV = path.v[i];
          currentO = path.o[i];
          currentI = path.i[i];
          if(currentV[0]===currentO[0] && currentV[1]===currentO[1] && currentV[0]===currentI[0] && currentV[1]===currentI[1]){
              if((i===0 || i === len - 1) && !path.c){
                  cloned_path.setTripleAt(currentV[0],currentV[1],currentO[0],currentO[1],currentI[0],currentI[1],index);
                  /*cloned_path.v[index] = currentV;
                  cloned_path.o[index] = currentO;
                  cloned_path.i[index] = currentI;*/
                  index += 1;
              } else {
                  if(i===0){
                      closerV = path.v[len-1];
                  } else {
                      closerV = path.v[i-1];
                  }
                  distance = Math.sqrt(Math.pow(currentV[0]-closerV[0],2)+Math.pow(currentV[1]-closerV[1],2));
                  newPosPerc = distance ? Math.min(distance/2,round)/distance : 0;
                  vX = iX = currentV[0]+(closerV[0]-currentV[0])*newPosPerc;
                  vY = iY = currentV[1]-(currentV[1]-closerV[1])*newPosPerc;
                  oX = vX-(vX-currentV[0])*roundCorner;
                  oY = vY-(vY-currentV[1])*roundCorner;
                  cloned_path.setTripleAt(vX,vY,oX,oY,iX,iY,index);
                  /*newV = [currentV[0]+(closerV[0]-currentV[0])*newPosPerc,currentV[1]-(currentV[1]-closerV[1])*newPosPerc];
                  newI = newV;
                  newO = [newV[0]-(newV[0]-currentV[0])*roundCorner,newV[1]-(newV[1]-currentV[1])*roundCorner];
                  cloned_path.v[index] = newV;
                  cloned_path.i[index] = newI;
                  cloned_path.o[index] = newO;*/
                  index += 1;
  
                  if(i === len - 1){
                      closerV = path.v[0];
                  } else {
                      closerV = path.v[i+1];
                  }
                  distance = Math.sqrt(Math.pow(currentV[0]-closerV[0],2)+Math.pow(currentV[1]-closerV[1],2));
                  newPosPerc = distance ? Math.min(distance/2,round)/distance : 0;
                  vX = oX = currentV[0]+(closerV[0]-currentV[0])*newPosPerc;
                  vY = oY = currentV[1]+(closerV[1]-currentV[1])*newPosPerc;
                  iX = vX-(vX-currentV[0])*roundCorner;
                  iY = vY-(vY-currentV[1])*roundCorner;
                  cloned_path.setTripleAt(vX,vY,oX,oY,iX,iY,index);
  
                  /*newV = [currentV[0]+(closerV[0]-currentV[0])*newPosPerc,currentV[1]+(closerV[1]-currentV[1])*newPosPerc];
                  newI = [newV[0]-(newV[0]-currentV[0])*roundCorner,newV[1]-(newV[1]-currentV[1])*roundCorner];
                  newO = newV;
                  cloned_path.v[index] = newV;
                  cloned_path.i[index] = newI;
                  cloned_path.o[index] = newO;*/
                  index += 1;
              }
          } else {
              /*cloned_path.v[index] = path.v[i];
              cloned_path.o[index] = path.o[i];
              cloned_path.i[index] = path.i[i];*/
              cloned_path.setTripleAt(path.v[i][0],path.v[i][1],path.o[i][0],path.o[i][1],path.i[i][0],path.i[i][1],index);
              index += 1;
          }
      }
      return cloned_path;
  }
  
  RoundCornersModifier.prototype.processShapes = function(firstFrame){
      var shapePaths;
      var i, len = this.shapes.length;
      var j, jLen;
      var rd = this.rd.v;
  
      if(rd !== 0){
          var shapeData, newPaths, localShapeCollection;
          for(i=0;i<len;i+=1){
              shapeData = this.shapes[i];
              newPaths = shapeData.shape.paths;
              localShapeCollection = shapeData.localShapeCollection;
              if(!(!shapeData.shape.mdf && !this.mdf && !firstFrame)){
                  localShapeCollection.releaseShapes();
                  shapeData.shape.mdf = true;
                  shapePaths = shapeData.shape.paths.shapes;
                  jLen = shapeData.shape.paths._length;
                  for(j=0;j<jLen;j+=1){
                      localShapeCollection.addShape(this.processPath(shapePaths[j],rd));
                  }
              }
              shapeData.shape.paths = shapeData.localShapeCollection;
          }
  
      }
      if(!this.dynamicProperties.length){
          this.mdf = false;
      }
  }
  
  
  ShapeModifiers.registerModifier('rd',RoundCornersModifier);
  function RepeaterModifier(){};
  extendPrototype(ShapeModifier,RepeaterModifier);
  RepeaterModifier.prototype.processKeys = function(forceRender){
      if(this.elem.globalData.frameId === this.frameId && !forceRender){
          return;
      }
      this.mdf = forceRender ? true : false;
      this.frameId = this.elem.globalData.frameId;
      var i, len = this.dynamicProperties.length;
  
      for(i=0;i<len;i+=1){
          this.dynamicProperties[i].getValue();
          if(this.dynamicProperties[i].mdf){
              this.mdf = true;
          }
      }
  };
  RepeaterModifier.prototype.initModifierProperties = function(elem,data){
      this.getValue = this.processKeys;
      this.c = PropertyFactory.getProp(elem,data.c,0,null,this.dynamicProperties);
      this.o = PropertyFactory.getProp(elem,data.o,0,null,this.dynamicProperties);
      this.tr = PropertyFactory.getProp(elem,data.tr,2,null,this.dynamicProperties);
      if(!this.dynamicProperties.length){
          this.getValue(true);
      }
      this.pMatrix = new Matrix();
      this.rMatrix = new Matrix();
      this.sMatrix = new Matrix();
      this.tMatrix = new Matrix();
      this.matrix = new Matrix();
  };
  
  RepeaterModifier.prototype.applyTransforms = function(pMatrix, rMatrix, sMatrix, transform, perc, inv){
      var dir = inv ? -1 : 1;
      var scaleX = transform.s.v[0] + (1 - transform.s.v[0]) * (1 - perc);
      var scaleY = transform.s.v[1] + (1 - transform.s.v[1]) * (1 - perc);
      pMatrix.translate(transform.p.v[0] * dir * perc, transform.p.v[1] * dir * perc, transform.p.v[2]);
      rMatrix.translate(-transform.a.v[0], -transform.a.v[1], transform.a.v[2]);
      rMatrix.rotate(-transform.r.v * dir * perc);
      rMatrix.translate(transform.a.v[0], transform.a.v[1], transform.a.v[2]);
      sMatrix.translate(-transform.a.v[0], -transform.a.v[1], transform.a.v[2]);
      sMatrix.scale(inv ? 1/scaleX : scaleX, inv ? 1/scaleY : scaleY);
      sMatrix.translate(transform.a.v[0], transform.a.v[1], transform.a.v[2]);
  }
  
  RepeaterModifier.prototype.processShapes = function(firstFrame){
      if(!this.dynamicProperties.length){
          this.mdf = false;
      }
      var i, len = this.shapes.length;
      var j, jLen;
      var shapeData, localShapeCollection, currentPath;
      var copies = Math.ceil(this.c.v);
      var offset = this.o.v;
      var offsetModulo = offset%1;
      var roundOffset = offset > 0 ? Math.floor(offset) : Math.ceil(offset);
      var k, pathData, shapeCollection, shapeCollectionList;
      var tMat = this.tr.v.props;
      var pProps = this.pMatrix.props;
      var rProps = this.rMatrix.props;
      var sProps = this.sMatrix.props;
      var iteration = 0;
      var l, lLen, tProps,transformers, maxLvl;
      for(i=0;i<len;i+=1){
          shapeData = this.shapes[i];
          localShapeCollection = shapeData.localShapeCollection;
          if(!(!shapeData.shape.mdf && !this.mdf && !firstFrame)){
              localShapeCollection.releaseShapes();
              shapeData.shape.mdf = true;
              shapeCollection = shapeData.shape.paths;
              shapeCollectionList = shapeCollection.shapes;
              jLen = shapeCollection._length;
              iteration = 0;
              this.pMatrix.reset();
              this.rMatrix.reset();
              this.sMatrix.reset();
              this.tMatrix.reset();
              this.matrix.reset();
  
              if(offset > 0) {
                  while(iteration<roundOffset){
                      this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, false);
                      iteration += 1;
                  }
                  if(offsetModulo){
                      this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, offsetModulo, false);
                      iteration += offsetModulo;
                  }
              } else if(roundOffset < 0) {
                  while(iteration>roundOffset){
                      this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, true);
                      iteration -= 1;
                  }
                  if(offsetModulo){
                      this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, - offsetModulo, true);
                      iteration -= offsetModulo;
                  }
              }
              for(j=0;j<jLen;j+=1){
                  currentPath = shapeCollectionList[j];
                  for(k=0;k<copies;k+=1) {
                      if(k !== 0) {
                          this.applyTransforms(this.pMatrix, this.rMatrix, this.sMatrix, this.tr, 1, false);
                      }
                      if(shapeData.data.transformers) {
                          shapeData.data.lvl = 0;
                          maxLvl = 0;
                          lLen = shapeData.data.elements.length;
                          for(l = 0; l < lLen; l += 1) {
                              maxLvl = Math.max(maxLvl, shapeData.data.elements[l].st.lvl);
                          } 
                          transformers = shapeData.data.transformers;
                          lLen = transformers.length;
                          for(l = lLen - 1; l >= maxLvl; l -= 1) {
                              tProps = transformers[l].mProps.v.props;
                              this.matrix.transform(tProps[0],tProps[1],tProps[2],tProps[3],tProps[4],tProps[5],tProps[6],tProps[7],tProps[8],tProps[9],tProps[10],tProps[11],tProps[12],tProps[13],tProps[14],tProps[15]);
                          }
                      }
                      if(iteration !== 0){
                          this.matrix.transform(rProps[0],rProps[1],rProps[2],rProps[3],rProps[4],rProps[5],rProps[6],rProps[7],rProps[8],rProps[9],rProps[10],rProps[11],rProps[12],rProps[13],rProps[14],rProps[15]);
                          this.matrix.transform(sProps[0],sProps[1],sProps[2],sProps[3],sProps[4],sProps[5],sProps[6],sProps[7],sProps[8],sProps[9],sProps[10],sProps[11],sProps[12],sProps[13],sProps[14],sProps[15]);
                          this.matrix.transform(pProps[0],pProps[1],pProps[2],pProps[3],pProps[4],pProps[5],pProps[6],pProps[7],pProps[8],pProps[9],pProps[10],pProps[11],pProps[12],pProps[13],pProps[14],pProps[15]);
                      }
                      localShapeCollection.addShape(this.processPath(currentPath, this.matrix));
                      this.matrix.reset();
                      iteration += 1;
                  }
              }
          }
          shapeData.shape.paths = localShapeCollection;
      }
  };
  
  RepeaterModifier.prototype.processPath = function(path, transform) {
      var clonedPath = shape_pool.clone(path, transform);
      return clonedPath;
  };
  
  
  ShapeModifiers.registerModifier('rp',RepeaterModifier);
  function ShapeCollection(){
  	this._length = 0;
  	this._maxLength = 4;
  	this.shapes = Array.apply(null,{length:this._maxLength});
  };
  
  ShapeCollection.prototype.addShape = function(shapeData){
  	if(this._length === this._maxLength){
  		this.shapes = this.shapes.concat(Array.apply(null,{length:this._maxLength}));
  		this._maxLength *= 2;
  	}
  	this.shapes[this._length] = shapeData;
  	this._length += 1;
  };
  
  ShapeCollection.prototype.releaseShapes = function(){
  	var i;
  	for(i = 0; i < this._length; i += 1) {
  		shape_pool.release(this.shapes[i]);
  	}
  	this._length = 0;
  };
  var ImagePreloader = (function(){
  
      function imageLoaded(){
          this.loadedAssets += 1;
          if(this.loadedAssets === this.totalImages){
          }
      }
  
      function getAssetsPath(assetData){
          var path = '';
          if(this.assetsPath){
              var imagePath = assetData.p;
              if(imagePath.indexOf('images/') !== -1){
                  imagePath = imagePath.split('/')[1];
              }
              path = this.assetsPath + imagePath;
          } else {
              path = this.path;
              path += assetData.u ? assetData.u : '';
              path += assetData.p;
          }
          return path;
      }
  
      function loadImage(path){
          var img = document.createElement('img');
          img.addEventListener('load', imageLoaded.bind(this), false);
          img.addEventListener('error', imageLoaded.bind(this), false);
          img.src = path;
      }
      function loadAssets(assets){
          this.totalAssets = assets.length;
          var i;
          for(i=0;i<this.totalAssets;i+=1){
              if(!assets[i].layers){
                  loadImage.bind(this)(getAssetsPath.bind(this)(assets[i]));
                  this.totalImages += 1;
              }
          }
      }
  
      function setPath(path){
          this.path = path || '';
      }
  
      function setAssetsPath(path){
          this.assetsPath = path || '';
      }
  
      return function ImagePreloader(){
          this.loadAssets = loadAssets;
          this.setAssetsPath = setAssetsPath;
          this.setPath = setPath;
          this.assetsPath = '';
          this.path = '';
          this.totalAssets = 0;
          this.totalImages = 0;
          this.loadedAssets = 0;
      }
  }());
  var featureSupport = (function(){
  	var ob = {
  		maskType: true
  	}
  	if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent) || /Edge\/\d./i.test(navigator.userAgent)) {
  	   ob.maskType = false;
  	}
  	return ob;
  }());
  var filtersFactory = (function(){
  	var ob = {};
  	ob.createFilter = createFilter;
  	ob.createAlphaToLuminanceFilter = createAlphaToLuminanceFilter;
  
  	function createFilter(filId){
          	var fil = document.createElementNS(svgNS,'filter');
          	fil.setAttribute('id',filId);
                  fil.setAttribute('filterUnits','objectBoundingBox');
                  fil.setAttribute('x','0%');
                  fil.setAttribute('y','0%');
                  fil.setAttribute('width','100%');
                  fil.setAttribute('height','100%');
                  return fil;
  	}
  
  	function createAlphaToLuminanceFilter(){
                  var feColorMatrix = document.createElementNS(svgNS,'feColorMatrix');
                  feColorMatrix.setAttribute('type','matrix');
                  feColorMatrix.setAttribute('color-interpolation-filters','sRGB');
                  feColorMatrix.setAttribute('values','0 0 0 1 0  0 0 0 1 0  0 0 0 1 0  0 0 0 0 1');
                  return feColorMatrix;
  	}
  
  	return ob;
  }())
  var pooling = (function(){
  
  	function double(arr){
  		return arr.concat(Array.apply(null,{length:arr.length}))
  	}
  
  	return {
  		double: double
  	}
  }());
  var point_pool = (function(){
  	var ob = {
  		newPoint: newPoint,
  		release: release
  		/*,getLength:function(){return _length}
  		,getCont:function(){return cont}*/
  	}
  
  	var _length = 0;
  	var _maxLength = 8;
  	var pool = Array.apply(null,{length:_maxLength});
  
  	//var cont = 0;
  
  	function newPoint(){
  		//window.bm_newPoint = window.bm_newPoint ? window.bm_newPoint + 1 : 1;
  		var point;
  		if(_length){
  			_length -= 1;
  			point = pool[_length];
  			//window.bm_reuse = window.bm_reuse ? window.bm_reuse + 1 : 1;
  		} else {
  			point = [0.1,0.1];
  			//cont++;
  			//console.log('new');
  			//window.bm_new = window.bm_new ? window.bm_new + 1 : 1;
  			//point._tst = cont++;
  		}
  		return point;
  	}
  
  	function release(point) {
  		if(_length === _maxLength) {
  			pool = pooling.double(pool);
  			_maxLength = _maxLength*2;
  		}
  		pool[_length] = point;
  		_length += 1;
  		//window.bm_release = window.bm_release ? window.bm_release + 1 : 1;
  		//console.log('release');
  	}
  
  
  	return ob;
  }());
  var shape_pool = (function(){
  	var ob = {
  		clone: clone,
  		newShape: newShape,
  		release: release,
  		releaseArray: releaseArray
  	}
  
  	var _length = 0;
  	var _maxLength = 4;
  	var pool = Array.apply(null,{length:_maxLength});
  
  	function newShape(){
  		var shapePath;
  		if(_length){
  			_length -= 1;
  			shapePath = pool[_length];
  		} else {
  			shapePath = new ShapePath();
  		}
  		return shapePath;
  	}
  
  	function release(shapePath) {
  		if(_length === _maxLength) {
  			pool = pooling.double(pool);
  			_maxLength = _maxLength*2;
  		}
  		var len = shapePath._length, i;
  		for(i = 0; i < len; i += 1) {
  			point_pool.release(shapePath.v[i]);
  			point_pool.release(shapePath.i[i]);
  			point_pool.release(shapePath.o[i]);
  			shapePath.v[i] = null;
  			shapePath.i[i] = null;
  			shapePath.o[i] = null;
  		}
  		shapePath._length = 0;
  		shapePath.c = false;
  		pool[_length] = shapePath;
  		_length += 1;
  	}
  
  	function releaseArray(shapePathsCollection, length) {
  		while(length--) {
  			release(shapePathsCollection[length]);
  		}
  	}
  
  	function clone(shape, transform) {
  		var i, len = shape._length;
  		var cloned = newShape();
  		cloned._length = shape._length;
  		cloned.c = shape.c;
  
  		var pt;
  		
  		for(i = 0; i < len; i += 1) {
  			if(transform){
  				pt = transform.applyToPointArray(shape.v[i][0],shape.v[i][1],0,2);
  				cloned.setXYAt(pt[0],pt[1],'v',i);
  				point_pool.release(pt);
  				pt = transform.applyToPointArray(shape.o[i][0],shape.o[i][1],0,2);
  				cloned.setXYAt(pt[0],pt[1],'o',i);
  				point_pool.release(pt);
  				pt = transform.applyToPointArray(shape.i[i][0],shape.i[i][1],0,2);
  				cloned.setXYAt(pt[0],pt[1],'i',i);
  				point_pool.release(pt);
  			}else{
  				cloned.setTripleAt(shape.v[i][0],shape.v[i][1],shape.o[i][0],shape.o[i][1],shape.i[i][0],shape.i[i][1], i);
  			}
  		}
  		return cloned
  	}
  
  
  	return ob;
  }());
  var shapeCollection_pool = (function(){
  	var ob = {
  		newShapeCollection: newShapeCollection,
  		release: release,
  		clone: clone
  	}
  
  	var _length = 0;
  	var _maxLength = 4;
  	var pool = Array.apply(null,{length:_maxLength});
  
  	var cont = 0;
  
  	function newShapeCollection(){
  		var shapeCollection;
  		if(_length){
  			_length -= 1;
  			shapeCollection = pool[_length];
  		} else {
  			shapeCollection = new ShapeCollection();
  		}
  		return shapeCollection;
  	}
  
  	function release(shapeCollection) {
  		var i, len = shapeCollection._length;
  		for(i = 0; i < len; i += 1) {
  			shape_pool.release(shapeCollection.shapes[i]);
  		}
  		shapeCollection._length = 0;
  
  		if(_length === _maxLength) {
  			pool = pooling.double(pool);
  			_maxLength = _maxLength*2;
  		}
  		pool[_length] = shapeCollection;
  		_length += 1;
  	}
  
  	function clone(shapeCollection, originCollection) {
  		release(shapeCollection);
  		if(_length === _maxLength) {
  			pool = pooling.double(pool);
  			_maxLength = _maxLength*2;
  		}
  		pool[_length] = shapeCollection;
  		_length += 1;
  	}
  
  
  	return ob;
  }());
  function BaseRenderer(){}
  BaseRenderer.prototype.checkLayers = function(num){
      var i, len = this.layers.length, data;
      this.completeLayers = true;
      for (i = len - 1; i >= 0; i--) {
          if (!this.elements[i]) {
              data = this.layers[i];
              if(data.ip - data.st <= (num - this.layers[i].st) && data.op - data.st > (num - this.layers[i].st))
              {
                  this.buildItem(i);
              }
          }
          this.completeLayers = this.elements[i] ? this.completeLayers:false;
      }
      this.checkPendingElements();
  };
  
  BaseRenderer.prototype.createItem = function(layer){
      switch(layer.ty){
          case 2:
              return this.createImage(layer);
          case 0:
              return this.createComp(layer);
          case 1:
              return this.createSolid(layer);
          case 4:
              return this.createShape(layer);
          case 5:
              return this.createText(layer);
          case 13:
              return this.createCamera(layer);
          case 99:
              return null;
      }
      return this.createBase(layer);
  };
  
  BaseRenderer.prototype.createCamera = function(){
      throw new Error('You\'re using a 3d camera. Try the html renderer.');
  }
  
  BaseRenderer.prototype.buildAllItems = function(){
      var i, len = this.layers.length;
      for(i=0;i<len;i+=1){
          this.buildItem(i);
      }
      this.checkPendingElements();
  };
  
  BaseRenderer.prototype.includeLayers = function(newLayers){
      this.completeLayers = false;
      var i, len = newLayers.length;
      var j, jLen = this.layers.length;
      for(i=0;i<len;i+=1){
          j = 0;
          while(j<jLen){
              if(this.layers[j].id == newLayers[i].id){
                  this.layers[j] = newLayers[i];
                  break;
              }
              j += 1;
          }
      }
  };
  
  BaseRenderer.prototype.setProjectInterface = function(pInterface){
      this.globalData.projectInterface = pInterface;
  };
  
  BaseRenderer.prototype.initItems = function(){
      if(!this.globalData.progressiveLoad){
          this.buildAllItems();
      }
  };
  BaseRenderer.prototype.buildElementParenting = function(element, parentName, hierarchy){
      hierarchy = hierarchy || [];
      var elements = this.elements;
      var layers = this.layers;
      var i=0, len = layers.length;
      while(i<len){
          if(layers[i].ind == parentName){
              if(!elements[i] || elements[i] === true){
                  this.buildItem(i);
                  this.addPendingElement(element);
              } else if(layers[i].parent !== undefined){
                  hierarchy.push(elements[i]);
                  elements[i]._isParent = true;
                  this.buildElementParenting(element,layers[i].parent, hierarchy);
              } else {
                  hierarchy.push(elements[i]);
                  elements[i]._isParent = true;
                  element.setHierarchy(hierarchy);
              }
  
  
          }
          i += 1;
      }
  };
  
  BaseRenderer.prototype.addPendingElement = function(element){
      this.pendingElements.push(element);
  };
  function SVGRenderer(animationItem, config){
      this.animationItem = animationItem;
      this.layers = null;
      this.renderedFrame = -1;
      this.globalData = {
          frameNum: -1
      };
      this.renderConfig = {
          preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
          progressiveLoad: (config && config.progressiveLoad) || false,
          hideOnTransparent: (config && config.hideOnTransparent === false) ? false : true
      };
      this.globalData.renderConfig = this.renderConfig;
      this.elements = [];
      this.pendingElements = [];
      this.destroyed = false;
  
  }
  
  extendPrototype(BaseRenderer,SVGRenderer);
  
  SVGRenderer.prototype.createBase = function (data) {
      return new SVGBaseElement(data, this.layerElement,this.globalData,this);
  };
  
  SVGRenderer.prototype.createShape = function (data) {
      return new IShapeElement(data, this.layerElement,this.globalData,this);
  };
  
  SVGRenderer.prototype.createText = function (data) {
      return new SVGTextElement(data, this.layerElement,this.globalData,this);
  
  };
  
  SVGRenderer.prototype.createImage = function (data) {
      return new IImageElement(data, this.layerElement,this.globalData,this);
  };
  
  SVGRenderer.prototype.createComp = function (data) {
      return new ICompElement(data, this.layerElement,this.globalData,this);
  
  };
  
  SVGRenderer.prototype.createSolid = function (data) {
      return new ISolidElement(data, this.layerElement,this.globalData,this);
  };
  
  SVGRenderer.prototype.configAnimation = function(animData){
      this.layerElement = document.createElementNS(svgNS,'svg');
      this.layerElement.setAttribute('xmlns','http://www.w3.org/2000/svg');
      this.layerElement.setAttribute('width',animData.w);
      this.layerElement.setAttribute('height',animData.h);
      this.layerElement.setAttribute('viewBox','0 0 '+animData.w+' '+animData.h);
      this.layerElement.setAttribute('preserveAspectRatio',this.renderConfig.preserveAspectRatio);
      this.layerElement.style.width = '100%';
      this.layerElement.style.height = '100%';
      //this.layerElement.style.transform = 'translate3d(0,0,0)';
      //this.layerElement.style.transformOrigin = this.layerElement.style.mozTransformOrigin = this.layerElement.style.webkitTransformOrigin = this.layerElement.style['-webkit-transform'] = "0px 0px 0px";
      this.animationItem.wrapper.appendChild(this.layerElement);
      //Mask animation
      var defs = document.createElementNS(svgNS, 'defs');
      this.globalData.defs = defs;
      this.layerElement.appendChild(defs);
      this.globalData.getAssetData = this.animationItem.getAssetData.bind(this.animationItem);
      this.globalData.getAssetsPath = this.animationItem.getAssetsPath.bind(this.animationItem);
      this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
      this.globalData.frameId = 0;
      this.globalData.nm = animData.nm;
      this.globalData.compSize = {
          w: animData.w,
          h: animData.h
      };
      this.data = animData;
      this.globalData.frameRate = animData.fr;
      var maskElement = document.createElementNS(svgNS, 'clipPath');
      var rect = document.createElementNS(svgNS,'rect');
      rect.setAttribute('width',animData.w);
      rect.setAttribute('height',animData.h);
      rect.setAttribute('x',0);
      rect.setAttribute('y',0);
      var maskId = 'animationMask_'+randomString(10);
      maskElement.setAttribute('id', maskId);
      maskElement.appendChild(rect);
      var maskedElement = document.createElementNS(svgNS,'g');
      maskedElement.setAttribute("clip-path", "url(#"+maskId+")");
      this.layerElement.appendChild(maskedElement);
      defs.appendChild(maskElement);
      this.layerElement = maskedElement;
      this.layers = animData.layers;
      this.globalData.fontManager = new FontManager();
      this.globalData.fontManager.addChars(animData.chars);
      this.globalData.fontManager.addFonts(animData.fonts,defs);
      this.elements = Array.apply(null,{length:animData.layers.length});
  };
  
  
  SVGRenderer.prototype.destroy = function () {
      this.animationItem.wrapper.innerHTML = '';
      this.layerElement = null;
      this.globalData.defs = null;
      var i, len = this.layers ? this.layers.length : 0;
      for (i = 0; i < len; i++) {
          if(this.elements[i]){
              this.elements[i].destroy();
          }
      }
      this.elements.length = 0;
      this.destroyed = true;
      this.animationItem = null;
  };
  
  SVGRenderer.prototype.updateContainerSize = function () {
  };
  
  SVGRenderer.prototype.buildItem  = function(pos){
      var elements = this.elements;
      if(elements[pos] || this.layers[pos].ty == 99){
          return;
      }
      elements[pos] = true;
      var element = this.createItem(this.layers[pos]);
  
      elements[pos] = element;
      if(expressionsPlugin){
          if(this.layers[pos].ty === 0){
              this.globalData.projectInterface.registerComposition(element);
          }
          element.initExpressions();
      }
      this.appendElementInPos(element,pos);
      if(this.layers[pos].tt){
          if(!this.elements[pos - 1] || this.elements[pos - 1] === true){
              this.buildItem(pos - 1);
              this.addPendingElement(element);
          } else {
              element.setMatte(elements[pos - 1].layerId);
          }
      }
  };
  
  SVGRenderer.prototype.checkPendingElements  = function(){
      while(this.pendingElements.length){
          var element = this.pendingElements.pop();
          element.checkParenting();
          if(element.data.tt){
              var i = 0, len = this.elements.length;
              while(i<len){
                  if(this.elements[i] === element){
                      element.setMatte(this.elements[i - 1].layerId);
                      break;
                  }
                  i += 1;
              }
          }
      }
  };
  
  SVGRenderer.prototype.renderFrame = function(num){
      if(this.renderedFrame == num || this.destroyed){
          return;
      }
      if(num === null){
          num = this.renderedFrame;
      }else{
          this.renderedFrame = num;
      }
      //clearPoints();
      /*console.log('-------');
      console.log('FRAME ',num);*/
      this.globalData.frameNum = num;
      this.globalData.frameId += 1;
      this.globalData.projectInterface.currentFrame = num;
      var i, len = this.layers.length;
      if(!this.completeLayers){
          this.checkLayers(num);
      }
      for (i = len - 1; i >= 0; i--) {
          if(this.completeLayers || this.elements[i]){
              this.elements[i].prepareFrame(num - this.layers[i].st);
          }
      }
      for (i = len - 1; i >= 0; i--) {
          if(this.completeLayers || this.elements[i]){
              this.elements[i].renderFrame();
          }
      }
  };
  
  SVGRenderer.prototype.appendElementInPos = function(element, pos){
      var newElement = element.getBaseElement();
      if(!newElement){
          return;
      }
      var i = 0;
      var nextElement;
      while(i<pos){
          if(this.elements[i] && this.elements[i]!== true && this.elements[i].getBaseElement()){
              nextElement = this.elements[i].getBaseElement();
          }
          i += 1;
      }
      if(nextElement){
          this.layerElement.insertBefore(newElement, nextElement);
      } else {
          this.layerElement.appendChild(newElement);
      }
  };
  
  SVGRenderer.prototype.hide = function(){
      this.layerElement.style.display = 'none';
  };
  
  SVGRenderer.prototype.show = function(){
      this.layerElement.style.display = 'block';
  };
  
  SVGRenderer.prototype.searchExtraCompositions = function(assets){
      var i, len = assets.length;
      var floatingContainer = document.createElementNS(svgNS,'g');
      for(i=0;i<len;i+=1){
          if(assets[i].xt){
              var comp = this.createComp(assets[i],floatingContainer,this.globalData.comp,null);
              comp.initExpressions();
              //comp.compInterface = CompExpressionInterface(comp);
              //Expressions.addLayersInterface(comp.elements, this.globalData.projectInterface);
              this.globalData.projectInterface.registerComposition(comp);
          }
      }
  };
  
  function MaskElement(data,element,globalData) {
      this.dynamicProperties = [];
      this.data = data;
      this.element = element;
      this.globalData = globalData;
      this.paths = [];
      this.storedData = [];
      this.masksProperties = this.data.masksProperties;
      this.viewData = new Array(this.masksProperties.length);
      this.maskElement = null;
      this.firstFrame = true;
      var defs = this.globalData.defs;
      var i, len = this.masksProperties.length;
  
  
      var path, properties = this.masksProperties;
      var count = 0;
      var currentMasks = [];
      var j, jLen;
      var layerId = randomString(10);
      var rect, expansor, feMorph,x;
      var maskType = 'clipPath', maskRef = 'clip-path';
      for (i = 0; i < len; i++) {
  
          if((properties[i].mode !== 'a' && properties[i].mode !== 'n')|| properties[i].inv || properties[i].o.k !== 100){
              maskType = 'mask';
              maskRef = 'mask';
          }
  
          if((properties[i].mode == 's' || properties[i].mode == 'i') && count == 0){
              rect = document.createElementNS(svgNS, 'rect');
              rect.setAttribute('fill', '#ffffff');
              rect.setAttribute('width', this.element.comp.data.w);
              rect.setAttribute('height', this.element.comp.data.h);
              currentMasks.push(rect);
          } else {
              rect = null;
          }
  
          path = document.createElementNS(svgNS, 'path');
          if(properties[i].mode == 'n') {
              this.viewData[i] = {
                  op: PropertyFactory.getProp(this.element,properties[i].o,0,0.01,this.dynamicProperties),
                  prop: ShapePropertyFactory.getShapeProp(this.element,properties[i],3,this.dynamicProperties,null),
                  elem: path
              };
              defs.appendChild(path);
              continue;
          }
          count += 1;
  
          if(properties[i].mode == 's'){
              path.setAttribute('fill', '#000000');
          }else{
              path.setAttribute('fill', '#ffffff');
          }
          path.setAttribute('clip-rule','nonzero');
  
          if(properties[i].x.k !== 0){
              maskType = 'mask';
              maskRef = 'mask';
              x = PropertyFactory.getProp(this.element,properties[i].x,0,null,this.dynamicProperties);
              var filterID = 'fi_'+randomString(10);
              expansor = document.createElementNS(svgNS,'filter');
              expansor.setAttribute('id',filterID);
              feMorph = document.createElementNS(svgNS,'feMorphology');
              feMorph.setAttribute('operator','dilate');
              feMorph.setAttribute('in','SourceGraphic');
              feMorph.setAttribute('radius','0');
              expansor.appendChild(feMorph);
              defs.appendChild(expansor);
              if(properties[i].mode == 's'){
                  path.setAttribute('stroke', '#000000');
              }else{
                  path.setAttribute('stroke', '#ffffff');
              }
          }else{
              feMorph = null;
              x = null;
          }
  
  
          this.storedData[i] = {
               elem: path,
               x: x,
               expan: feMorph,
              lastPath: '',
              lastOperator:'',
              filterId:filterID,
              lastRadius:0
          };
          if(properties[i].mode == 'i'){
              jLen = currentMasks.length;
              var g = document.createElementNS(svgNS,'g');
              for(j=0;j<jLen;j+=1){
                  g.appendChild(currentMasks[j]);
              }
              var mask = document.createElementNS(svgNS,'mask');
              mask.setAttribute('mask-type','alpha');
              mask.setAttribute('id',layerId+'_'+count);
              mask.appendChild(path);
              defs.appendChild(mask);
              g.setAttribute('mask','url(#'+layerId+'_'+count+')');
  
              currentMasks.length = 0;
              currentMasks.push(g);
          }else{
              currentMasks.push(path);
          }
          if(properties[i].inv && !this.solidPath){
              this.solidPath = this.createLayerSolidPath();
          }
          this.viewData[i] = {
              elem: path,
              lastPath: '',
              op: PropertyFactory.getProp(this.element,properties[i].o,0,0.01,this.dynamicProperties),
              prop:ShapePropertyFactory.getShapeProp(this.element,properties[i],3,this.dynamicProperties,null)
          };
          if(rect){
              this.viewData[i].invRect = rect;
          }
          if(!this.viewData[i].prop.k){
              this.drawPath(properties[i],this.viewData[i].prop.v,this.viewData[i]);
          }
      }
  
      this.maskElement = document.createElementNS(svgNS, maskType);
  
      len = currentMasks.length;
      for(i=0;i<len;i+=1){
          this.maskElement.appendChild(currentMasks[i]);
      }
  
      this.maskElement.setAttribute('id', layerId);
      if(count > 0){
          this.element.maskedElement.setAttribute(maskRef, "url(#" + layerId + ")");
      }
  
      defs.appendChild(this.maskElement);
  };
  
  MaskElement.prototype.getMaskProperty = function(pos){
      return this.viewData[pos].prop;
  };
  
  MaskElement.prototype.prepareFrame = function(){
      var i, len = this.dynamicProperties.length;
      for(i=0;i<len;i+=1){
          this.dynamicProperties[i].getValue();
  
      }
  };
  
  MaskElement.prototype.renderFrame = function (finalMat) {
      var i, len = this.masksProperties.length;
      for (i = 0; i < len; i++) {
          if(this.viewData[i].prop.mdf || this.firstFrame){
              this.drawPath(this.masksProperties[i],this.viewData[i].prop.v,this.viewData[i]);
          }
          if(this.viewData[i].op.mdf || this.firstFrame){
              this.viewData[i].elem.setAttribute('fill-opacity',this.viewData[i].op.v);
          }
          if(this.masksProperties[i].mode !== 'n'){
              if(this.viewData[i].invRect && (this.element.finalTransform.mProp.mdf || this.firstFrame)){
                  this.viewData[i].invRect.setAttribute('x', -finalMat.props[12]);
                  this.viewData[i].invRect.setAttribute('y', -finalMat.props[13]);
              }
              if(this.storedData[i].x && (this.storedData[i].x.mdf || this.firstFrame)){
                  var feMorph = this.storedData[i].expan;
                  if(this.storedData[i].x.v < 0){
                      if(this.storedData[i].lastOperator !== 'erode'){
                          this.storedData[i].lastOperator = 'erode';
                          this.storedData[i].elem.setAttribute('filter','url(#'+this.storedData[i].filterId+')');
                      }
                      feMorph.setAttribute('radius',-this.storedData[i].x.v);
                  }else{
                      if(this.storedData[i].lastOperator !== 'dilate'){
                          this.storedData[i].lastOperator = 'dilate';
                          this.storedData[i].elem.setAttribute('filter',null);
                      }
                      this.storedData[i].elem.setAttribute('stroke-width', this.storedData[i].x.v*2);
  
                  }
              }
          }
      }
      this.firstFrame = false;
  };
  
  MaskElement.prototype.getMaskelement = function () {
      return this.maskElement;
  };
  
  MaskElement.prototype.createLayerSolidPath = function(){
      var path = 'M0,0 ';
      path += ' h' + this.globalData.compSize.w ;
      path += ' v' + this.globalData.compSize.h ;
      path += ' h-' + this.globalData.compSize.w ;
      path += ' v-' + this.globalData.compSize.h + ' ';
      return path;
  };
  
  MaskElement.prototype.drawPath = function(pathData,pathNodes,viewData){
      var pathString = " M"+pathNodes.v[0][0]+','+pathNodes.v[0][1];
      var i, len;
      len = pathNodes._length;
      for(i=1;i<len;i+=1){
          //pathString += " C"+pathNodes.o[i-1][0]+','+pathNodes.o[i-1][1] + " "+pathNodes.i[i][0]+','+pathNodes.i[i][1] + " "+pathNodes.v[i][0]+','+pathNodes.v[i][1];
          pathString += " C"+bm_rnd(pathNodes.o[i-1][0])+','+bm_rnd(pathNodes.o[i-1][1]) + " "+bm_rnd(pathNodes.i[i][0])+','+bm_rnd(pathNodes.i[i][1]) + " "+bm_rnd(pathNodes.v[i][0])+','+bm_rnd(pathNodes.v[i][1]);
      }
          //pathString += " C"+pathNodes.o[i-1][0]+','+pathNodes.o[i-1][1] + " "+pathNodes.i[0][0]+','+pathNodes.i[0][1] + " "+pathNodes.v[0][0]+','+pathNodes.v[0][1];
      if(pathNodes.c && len > 1){
          pathString += " C"+bm_rnd(pathNodes.o[i-1][0])+','+bm_rnd(pathNodes.o[i-1][1]) + " "+bm_rnd(pathNodes.i[0][0])+','+bm_rnd(pathNodes.i[0][1]) + " "+bm_rnd(pathNodes.v[0][0])+','+bm_rnd(pathNodes.v[0][1]);
      }
      //pathNodes.__renderedString = pathString;
  
  
      if(viewData.lastPath !== pathString){
          if(viewData.elem){
              if(!pathNodes.c){
                  viewData.elem.setAttribute('d','');
              }else if(pathData.inv){
                  viewData.elem.setAttribute('d',this.solidPath + pathString);
              }else{
                  viewData.elem.setAttribute('d',pathString);
              }
          }
          viewData.lastPath = pathString;
      }
  };
  
  MaskElement.prototype.getMask = function(nm){
      var i = 0, len = this.masksProperties.length;
      while(i<len){
          if(this.masksProperties[i].nm === nm){
              return {
                  maskPath: this.viewData[i].prop.pv
              }
          }
          i += 1;
      }
  };
  
  MaskElement.prototype.destroy = function(){
      this.element = null;
      this.globalData = null;
      this.maskElement = null;
      this.data = null;
      this.paths = null;
      this.masksProperties = null;
  };
  function BaseElement(){
  };
  BaseElement.prototype.checkMasks = function(){
      if(!this.data.hasMask){
          return false;
      }
      var i = 0, len = this.data.masksProperties.length;
      while(i<len) {
          if((this.data.masksProperties[i].mode !== 'n' && this.data.masksProperties[i].cl !== false)) {
              return true;
          }
          i += 1;
      }
      return false;
  }
  
  BaseElement.prototype.checkParenting = function(){
      if(this.data.parent !== undefined){
          this.comp.buildElementParenting(this, this.data.parent);
      }
  }
  
  BaseElement.prototype.prepareFrame = function(num){
      if(this.data.ip - this.data.st <= num && this.data.op - this.data.st > num)
      {
          if(this.isVisible !== true){
              this.elemMdf = true;
              this.globalData.mdf = true;
              this.isVisible = true;
              this.firstFrame = true;
              if(this.data.hasMask){
                  this.maskManager.firstFrame = true;
              }
          }
      }else{
          if(this.isVisible !== false){
              this.elemMdf = true;
              this.globalData.mdf = true;
              this.isVisible = false;
          }
      }
      var i, len = this.dynamicProperties.length;
      for(i=0;i<len;i+=1){
          if(this.isVisible || (this._isParent && this.dynamicProperties[i].type === 'transform')){
              this.dynamicProperties[i].getValue();
              if(this.dynamicProperties[i].mdf){
                  this.elemMdf = true;
                  this.globalData.mdf = true;
              }
          }
      }
      if(this.data.hasMask && this.isVisible){
          this.maskManager.prepareFrame(num*this.data.sr);
      }
      
      /* TODO check this
      if(this.data.sy){
          if(this.data.sy[0].renderedData[num]){
              if(this.data.sy[0].renderedData[num].c){
                  this.feFlood.setAttribute('flood-color','rgb('+Math.round(this.data.sy[0].renderedData[num].c[0])+','+Math.round(this.data.sy[0].renderedData[num].c[1])+','+Math.round(this.data.sy[0].renderedData[num].c[2])+')');
              }
              if(this.data.sy[0].renderedData[num].s){
                  this.feMorph.setAttribute('radius',this.data.sy[0].renderedData[num].s);
              }
          }
      }
      */
  
  
      this.currentFrameNum = num*this.data.sr;
      return this.isVisible;
  };
  
  BaseElement.prototype.globalToLocal = function(pt){
      var transforms = [];
      transforms.push(this.finalTransform);
      var flag = true;
      var comp = this.comp;
      while(flag){
          if(comp.finalTransform){
              if(comp.data.hasMask){
                  transforms.splice(0,0,comp.finalTransform);
              }
              comp = comp.comp;
          } else {
              flag = false;
          }
      }
      var i, len = transforms.length,ptNew;
      for(i=0;i<len;i+=1){
          ptNew = transforms[i].mat.applyToPointArray(0,0,0);
          //ptNew = transforms[i].mat.applyToPointArray(pt[0],pt[1],pt[2]);
          pt = [pt[0] - ptNew[0],pt[1] - ptNew[1],0];
      }
      return pt;
  };
  
  BaseElement.prototype.initExpressions = function(){
      this.layerInterface = LayerExpressionInterface(this);
      //layers[i].layerInterface = LayerExpressionInterface(layers[i]);
      //layers[i].layerInterface = LayerExpressionInterface(layers[i]);
      if(this.data.hasMask){
          this.layerInterface.registerMaskInterface(this.maskManager);
      }
      var effectsInterface = EffectsExpressionInterface.createEffectsInterface(this,this.layerInterface);
      this.layerInterface.registerEffectsInterface(effectsInterface);
  
      if(this.data.ty === 0 || this.data.xt){
          this.compInterface = CompExpressionInterface(this);
      } else if(this.data.ty === 4){
          this.layerInterface.shapeInterface = ShapeExpressionInterface.createShapeInterface(this.shapesData,this.viewData,this.layerInterface);
      } else if(this.data.ty === 5){
          this.layerInterface.textInterface = TextExpressionInterface(this);
      }
  }
  
  BaseElement.prototype.setBlendMode = function(){
      var blendModeValue = '';
      switch(this.data.bm){
          case 1:
              blendModeValue = 'multiply';
              break;
          case 2:
              blendModeValue = 'screen';
              break;
          case 3:
              blendModeValue = 'overlay';
              break;
          case 4:
              blendModeValue = 'darken';
              break;
          case 5:
              blendModeValue = 'lighten';
              break;
          case 6:
              blendModeValue = 'color-dodge';
              break;
          case 7:
              blendModeValue = 'color-burn';
              break;
          case 8:
              blendModeValue = 'hard-light';
              break;
          case 9:
              blendModeValue = 'soft-light';
              break;
          case 10:
              blendModeValue = 'difference';
              break;
          case 11:
              blendModeValue = 'exclusion';
              break;
          case 12:
              blendModeValue = 'hue';
              break;
          case 13:
              blendModeValue = 'saturation';
              break;
          case 14:
              blendModeValue = 'color';
              break;
          case 15:
              blendModeValue = 'luminosity';
              break;
      }
      var elem = this.baseElement || this.layerElement;
  
      elem.style['mix-blend-mode'] = blendModeValue;
  }
  
  BaseElement.prototype.init = function(){
      if(!this.data.sr){
          this.data.sr = 1;
      }
      this.dynamicProperties = [];
      if(this.data.ef){
          this.effects = new EffectsManager(this.data,this,this.dynamicProperties);
          //this.effect = this.effectsManager.bind(this.effectsManager);
      }
      //this.elemInterface = buildLayerExpressionInterface(this);
      this.hidden = false;
      this.firstFrame = true;
      this.isVisible = false;
      this._isParent = false;
      this.currentFrameNum = -99999;
      this.lastNum = -99999;
      if(this.data.ks){
          this.finalTransform = {
              mProp: PropertyFactory.getProp(this,this.data.ks,2,null,this.dynamicProperties),
              matMdf: false,
              opMdf: false,
              mat: new Matrix(),
              opacity: 1
          };
          if(this.data.ao){
              this.finalTransform.mProp.autoOriented = true;
          }
          this.finalTransform.op = this.finalTransform.mProp.o;
          this.transform = this.finalTransform.mProp;
          if(this.data.ty !== 11){
              this.createElements();
          }
          if(this.data.hasMask){
              this.addMasks(this.data);
          }
      }
      this.elemMdf = false;
  };
  BaseElement.prototype.getType = function(){
      return this.type;
  };
  
  BaseElement.prototype.resetHierarchy = function(){
      if(!this.hierarchy){
          this.hierarchy = [];
      }else{
          this.hierarchy.length = 0;
      }
  };
  
  BaseElement.prototype.getHierarchy = function(){
      if(!this.hierarchy){
          this.hierarchy = [];
      }
      return this.hierarchy;
  };
  
  BaseElement.prototype.setHierarchy = function(hierarchy){
      this.hierarchy = hierarchy;
  };
  
  BaseElement.prototype.getLayerSize = function(){
      if(this.data.ty === 5){
          return {w:this.data.textData.width,h:this.data.textData.height};
      }else{
          return {w:this.data.width,h:this.data.height};
      }
  };
  
  BaseElement.prototype.hide = function(){
  
  };
  
  BaseElement.prototype.mHelper = new Matrix();
  function SVGBaseElement(data,parentContainer,globalData,comp, placeholder){
      this.globalData = globalData;
      this.comp = comp;
      this.data = data;
      this.matteElement = null;
      this.transformedElement = null;
      this.isTransparent = false;
      this.parentContainer = parentContainer;
      this.layerId = placeholder ? placeholder.layerId : 'ly_'+randomString(10);
      this.placeholder = placeholder;
      this.init();
  };
  
  createElement(BaseElement, SVGBaseElement);
  
  SVGBaseElement.prototype.createElements = function(){
      this.layerElement = document.createElementNS(svgNS,'g');
      this.transformedElement = this.layerElement;
      if(this.data.hasMask){
          this.maskedElement = this.layerElement;
      }
      var layerElementParent = null;
      if(this.data.td){
          if(this.data.td == 3 || this.data.td == 1){
              var masker = document.createElementNS(svgNS,'mask');
              masker.setAttribute('id',this.layerId);
              masker.setAttribute('mask-type',this.data.td == 3 ? 'luminance':'alpha');
              masker.appendChild(this.layerElement);
              layerElementParent = masker;
              this.globalData.defs.appendChild(masker);
              ////// This is only for IE and Edge when mask if of type alpha
              if(!featureSupport.maskType && this.data.td == 1){
                  masker.setAttribute('mask-type','luminance');
                  var filId = randomString(10);
                  var fil = filtersFactory.createFilter(filId);
                  this.globalData.defs.appendChild(fil);
                  fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
                  var gg = document.createElementNS(svgNS,'g');
                  gg.appendChild(this.layerElement);
                  layerElementParent = gg;
                  masker.appendChild(gg);
                  gg.setAttribute('filter','url(#'+filId+')');
              }
          }else if(this.data.td == 2){
              var maskGroup = document.createElementNS(svgNS,'mask');
              maskGroup.setAttribute('id',this.layerId);
              maskGroup.setAttribute('mask-type','alpha');
              var maskGrouper = document.createElementNS(svgNS,'g');
              maskGroup.appendChild(maskGrouper);
              var filId = randomString(10);
              var fil = filtersFactory.createFilter(filId);
              ////
  
              var feColorMatrix = document.createElementNS(svgNS,'feColorMatrix');
              feColorMatrix.setAttribute('type','matrix');
              feColorMatrix.setAttribute('color-interpolation-filters','sRGB');
              feColorMatrix.setAttribute('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 -1 1');
              fil.appendChild(feColorMatrix);
  
              ////
              /*var feCTr = document.createElementNS(svgNS,'feComponentTransfer');
              feCTr.setAttribute('in','SourceGraphic');
              fil.appendChild(feCTr);
              var feFunc = document.createElementNS(svgNS,'feFuncA');
              feFunc.setAttribute('type','table');
              feFunc.setAttribute('tableValues','1.0 0.0');
              feCTr.appendChild(feFunc);*/
              this.globalData.defs.appendChild(fil);
              var alphaRect = document.createElementNS(svgNS,'rect');
              alphaRect.setAttribute('width',this.comp.data.w);
              alphaRect.setAttribute('height',this.comp.data.h);
              alphaRect.setAttribute('x','0');
              alphaRect.setAttribute('y','0');
              alphaRect.setAttribute('fill','#ffffff');
              alphaRect.setAttribute('opacity','0');
              maskGrouper.setAttribute('filter','url(#'+filId+')');
              maskGrouper.appendChild(alphaRect);
              maskGrouper.appendChild(this.layerElement);
              layerElementParent = maskGrouper;
              if(!featureSupport.maskType){
                  maskGroup.setAttribute('mask-type','luminance');
                  fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
                  var gg = document.createElementNS(svgNS,'g');
                  maskGrouper.appendChild(alphaRect);
                  gg.appendChild(this.layerElement);
                  layerElementParent = gg;
                  maskGrouper.appendChild(gg);
              }
              this.globalData.defs.appendChild(maskGroup);
          }
      }else if(this.data.hasMask || this.data.tt){
          if(this.data.tt){
              this.matteElement = document.createElementNS(svgNS,'g');
              this.matteElement.appendChild(this.layerElement);
              layerElementParent = this.matteElement;
              this.baseElement = this.matteElement;
          }else{
              this.baseElement = this.layerElement;
          }
      }else{
          this.baseElement = this.layerElement;
      }
      if((this.data.ln || this.data.cl) && (this.data.ty === 4 || this.data.ty === 0)){
          if(this.data.ln){
              this.layerElement.setAttribute('id',this.data.ln);
          }
          if(this.data.cl){
              this.layerElement.setAttribute('class',this.data.cl);
          }
      }
      if(this.data.ty === 0){
              var cp = document.createElementNS(svgNS, 'clipPath');
              var pt = document.createElementNS(svgNS,'path');
              pt.setAttribute('d','M0,0 L'+this.data.w+',0'+' L'+this.data.w+','+this.data.h+' L0,'+this.data.h+'z');
              var clipId = 'cp_'+randomString(8);
              cp.setAttribute('id',clipId);
              cp.appendChild(pt);
              this.globalData.defs.appendChild(cp);
          if(this.checkMasks()){
              var cpGroup = document.createElementNS(svgNS,'g');
              cpGroup.setAttribute('clip-path','url(#'+clipId+')');
              cpGroup.appendChild(this.layerElement);
              this.transformedElement = cpGroup;
              if(layerElementParent){
                  layerElementParent.appendChild(this.transformedElement);
              } else {
                  this.baseElement = this.transformedElement;
              }
          } else {
              this.layerElement.setAttribute('clip-path','url(#'+clipId+')');
          }
          
      }
      if(this.data.bm !== 0){
          this.setBlendMode();
      }
      if(this.layerElement !== this.parentContainer){
          this.placeholder = null;
      }
      /* Todo performance killer
      if(this.data.sy){
          var filterID = 'st_'+randomString(10);
          var c = this.data.sy[0].c.k;
          var r = this.data.sy[0].s.k;
          var expansor = document.createElementNS(svgNS,'filter');
          expansor.setAttribute('id',filterID);
          var feFlood = document.createElementNS(svgNS,'feFlood');
          this.feFlood = feFlood;
          if(!c[0].e){
              feFlood.setAttribute('flood-color','rgb('+c[0]+','+c[1]+','+c[2]+')');
          }
          feFlood.setAttribute('result','base');
          expansor.appendChild(feFlood);
          var feMorph = document.createElementNS(svgNS,'feMorphology');
          feMorph.setAttribute('operator','dilate');
          feMorph.setAttribute('in','SourceGraphic');
          feMorph.setAttribute('result','bigger');
          this.feMorph = feMorph;
          if(!r.length){
              feMorph.setAttribute('radius',this.data.sy[0].s.k);
          }
          expansor.appendChild(feMorph);
          var feColorMatrix = document.createElementNS(svgNS,'feColorMatrix');
          feColorMatrix.setAttribute('result','mask');
          feColorMatrix.setAttribute('in','bigger');
          feColorMatrix.setAttribute('type','matrix');
          feColorMatrix.setAttribute('values','0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0');
          expansor.appendChild(feColorMatrix);
          var feComposite = document.createElementNS(svgNS,'feComposite');
          feComposite.setAttribute('result','drop');
          feComposite.setAttribute('in','base');
          feComposite.setAttribute('in2','mask');
          feComposite.setAttribute('operator','in');
          expansor.appendChild(feComposite);
          var feBlend = document.createElementNS(svgNS,'feBlend');
          feBlend.setAttribute('in','SourceGraphic');
          feBlend.setAttribute('in2','drop');
          feBlend.setAttribute('mode','normal');
          expansor.appendChild(feBlend);
          this.globalData.defs.appendChild(expansor);
          var cont = document.createElementNS(svgNS,'g');
          if(this.layerElement === this.parentContainer){
              this.layerElement = cont;
          }else{
              cont.appendChild(this.layerElement);
          }
          cont.setAttribute('filter','url(#'+filterID+')');
          if(this.data.td){
              cont.setAttribute('data-td',this.data.td);
          }
          if(this.data.td == 3){
              this.globalData.defs.appendChild(cont);
          }else if(this.data.td == 2){
              maskGrouper.appendChild(cont);
          }else if(this.data.td == 1){
              masker.appendChild(cont);
          }else{
              if(this.data.hasMask && this.data.tt){
                  this.matteElement.appendChild(cont);
              }else{
                  this.appendNodeToParent(cont);
              }
          }
      }*/
      if(this.data.ef){
          this.effectsManager = new SVGEffects(this);
      }
      this.checkParenting();
  };
  
  
  SVGBaseElement.prototype.setBlendMode = BaseElement.prototype.setBlendMode;
  
  SVGBaseElement.prototype.renderFrame = function(parentTransform){
      if(this.data.ty === 3 || this.data.hd || !this.isVisible){
          return false;
      }
  
      this.lastNum = this.currentFrameNum;
      this.finalTransform.opMdf = this.firstFrame || this.finalTransform.op.mdf;
      this.finalTransform.matMdf = this.firstFrame || this.finalTransform.mProp.mdf;
      this.finalTransform.opacity = this.finalTransform.op.v;
  
      var mat;
      var finalMat = this.finalTransform.mat;
  
      if(this.hierarchy){
          var i = 0, len = this.hierarchy.length;
          if(!this.finalTransform.matMdf) {
              while(i < len) {
                  if(this.hierarchy[i].finalTransform.mProp.mdf) {
                      this.finalTransform.matMdf = true;
                      break;
                  }
                  i += 1;
              }
          }
          
          if(this.finalTransform.matMdf) {
              mat = this.finalTransform.mProp.v.props;
              finalMat.cloneFromProps(mat);
              for(i=0;i<len;i+=1){
                  mat = this.hierarchy[i].finalTransform.mProp.v.props;
                  finalMat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5],mat[6],mat[7],mat[8],mat[9],mat[10],mat[11],mat[12],mat[13],mat[14],mat[15]);
              }
          }
          
      }else if(this.isVisible){
          finalMat = this.finalTransform.mProp.v;
      }
      if(this.finalTransform.matMdf && this.layerElement){
          this.transformedElement.setAttribute('transform',finalMat.to2dCSS());
      }
      if(this.finalTransform.opMdf && this.layerElement){
          if(this.finalTransform.op.v <= 0) {
              if(!this.isTransparent && this.globalData.renderConfig.hideOnTransparent){
                  this.isTransparent = true;
                  this.hide();
              }
          } else if(this.hidden && this.isTransparent){
              this.isTransparent = false;
              this.show();
          }
          this.transformedElement.setAttribute('opacity',this.finalTransform.op.v);
      }
  
      if(this.data.hasMask){
          this.maskManager.renderFrame(finalMat);
      }
      if(this.effectsManager){
          this.effectsManager.renderFrame(this.firstFrame);
      }
      return this.isVisible;
  };
  
  SVGBaseElement.prototype.destroy = function(){
      this.layerElement = null;
      this.parentContainer = null;
      if(this.matteElement) {
          this.matteElement = null;
      }
      if(this.maskManager) {
          this.maskManager.destroy();
      }
  };
  
  SVGBaseElement.prototype.getBaseElement = function(){
      return this.baseElement;
  };
  SVGBaseElement.prototype.addMasks = function(data){
      this.maskManager = new MaskElement(data,this,this.globalData);
  };
  
  SVGBaseElement.prototype.setMatte = function(id){
      if(!this.matteElement){
          return;
      }
      this.matteElement.setAttribute("mask", "url(#" + id + ")");
  };
  
  SVGBaseElement.prototype.setMatte = function(id){
      if(!this.matteElement){
          return;
      }
      this.matteElement.setAttribute("mask", "url(#" + id + ")");
  };
  
  SVGBaseElement.prototype.hide = function(){
      if(!this.hidden){
          this.layerElement.style.display = 'none';
          this.hidden = true;
      }
  };
  
  SVGBaseElement.prototype.show = function(){
      if(this.isVisible && !this.isTransparent){
          this.hidden = false;
          this.layerElement.style.display = 'block';
      }
  };
  
  function IShapeElement(data,parentContainer,globalData,comp, placeholder){
      this.shapes = [];
      this.shapesData = data.shapes;
      this.stylesList = [];
      this.viewData = [];
      this.shapeModifiers = [];
      this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
  }
  createElement(SVGBaseElement, IShapeElement);
  
  IShapeElement.prototype.identityMatrix = new Matrix();
  
  IShapeElement.prototype.lcEnum = {
      '1': 'butt',
      '2': 'round',
      '3': 'butt'
  }
  
  IShapeElement.prototype.ljEnum = {
      '1': 'miter',
      '2': 'round',
      '3': 'butt'
  }
  
  IShapeElement.prototype.buildExpressionInterface = function(){};
  
  IShapeElement.prototype.createElements = function(){
      //TODO check if I can use symbol so i can set its viewBox
      this._parent.createElements.call(this);
      this.searchShapes(this.shapesData,this.viewData,this.layerElement,this.dynamicProperties, 0);
      if(!this.data.hd || this.data.td){
          styleUnselectableDiv(this.layerElement);
      }
      //this.elemInterface.registerShapeExpressionInterface(ShapeExpressionInterface.createShapeInterface(this.shapesData,this.viewData,this.elemInterface));
  };
  
  IShapeElement.prototype.setGradientData = function(pathElement,arr,data){
  
      var gradientId = 'gr_'+randomString(10);
      var gfill;
      if(arr.t === 1){
          gfill = document.createElementNS(svgNS,'linearGradient');
      } else {
          gfill = document.createElementNS(svgNS,'radialGradient');
      }
      gfill.setAttribute('id',gradientId);
      gfill.setAttribute('spreadMethod','pad');
      gfill.setAttribute('gradientUnits','userSpaceOnUse');
      var stops = [];
      var stop, j, jLen;
      jLen = arr.g.p*4;
      for(j=0;j<jLen;j+=4){
          stop = document.createElementNS(svgNS,'stop');
          gfill.appendChild(stop);
          stops.push(stop);
      }
      pathElement.setAttribute( arr.ty === 'gf' ? 'fill':'stroke','url(#'+gradientId+')');
      this.globalData.defs.appendChild(gfill);
      data.gf = gfill;
      data.cst = stops;
  }
  
  IShapeElement.prototype.setGradientOpacity = function(arr, data, styleOb){
      if((arr.g.k.k[0].s && arr.g.k.k[0].s.length > arr.g.p*4) || arr.g.k.k.length > arr.g.p*4){
          var opFill;
          var stop, j, jLen;
          var mask = document.createElementNS(svgNS,"mask");
          var maskElement = document.createElementNS(svgNS, 'path');
          mask.appendChild(maskElement);
          var opacityId = 'op_'+randomString(10);
          var maskId = 'mk_'+randomString(10);
          mask.setAttribute('id',maskId);
          if(arr.t === 1){
              opFill = document.createElementNS(svgNS,'linearGradient');
          } else {
              opFill = document.createElementNS(svgNS,'radialGradient');
          }
          opFill.setAttribute('id',opacityId);
          opFill.setAttribute('spreadMethod','pad');
          opFill.setAttribute('gradientUnits','userSpaceOnUse');
          jLen = arr.g.k.k[0].s ? arr.g.k.k[0].s.length : arr.g.k.k.length;
          var stops = [];
          for(j=arr.g.p*4;j<jLen;j+=2){
              stop = document.createElementNS(svgNS,'stop');
              stop.setAttribute('stop-color','rgb(255,255,255)');
              //stop.setAttribute('offset',Math.round(arr.y[j][0]*100)+'%');
              //stop.setAttribute('style','stop-color:rgb(255,255,255);stop-opacity:'+arr.y[j][1]);
              opFill.appendChild(stop);
              stops.push(stop);
          }
          maskElement.setAttribute( arr.ty === 'gf' ? 'fill':'stroke','url(#'+opacityId+')');
          this.globalData.defs.appendChild(opFill);
          this.globalData.defs.appendChild(mask);
          data.of = opFill;
          data.ost = stops;
          styleOb.msElem = maskElement;
          return maskId;
      }
  };
  
  IShapeElement.prototype.searchShapes = function(arr,data,container,dynamicProperties, level, transformers){
      transformers = transformers || [];
      var ownTransformers = [].concat(transformers);
      var i, len = arr.length - 1;
      var j, jLen;
      var ownArrays = [], ownModifiers = [], styleOb, currentTransform;
      for(i=len;i>=0;i-=1){
          if(arr[i].ty == 'fl' || arr[i].ty == 'st' || arr[i].ty == 'gf' || arr[i].ty == 'gs'){
              data[i] = {};
              styleOb = {
                  type: arr[i].ty,
                  d: '',
                  ld: '',
                  lvl: level,
                  mdf: false
              };
              var pathElement = document.createElementNS(svgNS, "path");
              data[i].o = PropertyFactory.getProp(this,arr[i].o,0,0.01,dynamicProperties);
              if(arr[i].ty == 'st' || arr[i].ty == 'gs') {
                  pathElement.setAttribute('stroke-linecap', this.lcEnum[arr[i].lc] || 'round');
                  ////pathElement.style.strokeLinecap = this.lcEnum[arr[i].lc] || 'round';
                  pathElement.setAttribute('stroke-linejoin',this.ljEnum[arr[i].lj] || 'round');
                  ////pathElement.style.strokeLinejoin = this.ljEnum[arr[i].lj] || 'round';
                  pathElement.setAttribute('fill-opacity','0');
                  ////pathElement.style.fillOpacity = 0;
                  if(arr[i].lj == 1) {
                      pathElement.setAttribute('stroke-miterlimit',arr[i].ml);
                      ////pathElement.style.strokeMiterlimit = arr[i].ml;
                  }
  
                  data[i].w = PropertyFactory.getProp(this,arr[i].w,0,null,dynamicProperties);
                  if(arr[i].d){
                      var d = PropertyFactory.getDashProp(this,arr[i].d,'svg',dynamicProperties);
                      if(!d.k){
                          pathElement.setAttribute('stroke-dasharray', d.dasharray);
                          ////pathElement.style.strokeDasharray = d.dasharray;
                          pathElement.setAttribute('stroke-dashoffset', d.dashoffset);
                          ////pathElement.style.strokeDashoffset = d.dashoffset;
                      }
                      data[i].d = d;
                  }
  
              }
              if(arr[i].ty == 'fl' || arr[i].ty == 'st'){
                  data[i].c = PropertyFactory.getProp(this,arr[i].c,1,255,dynamicProperties);
                  container.appendChild(pathElement);
              } else {
                  data[i].g = PropertyFactory.getGradientProp(this,arr[i].g,dynamicProperties);
                  if(arr[i].t == 2){
                      data[i].h = PropertyFactory.getProp(this,arr[i].h,1,0.01,dynamicProperties);
                      data[i].a = PropertyFactory.getProp(this,arr[i].a,1,degToRads,dynamicProperties);
                  }
                  data[i].s = PropertyFactory.getProp(this,arr[i].s,1,null,dynamicProperties);
                  data[i].e = PropertyFactory.getProp(this,arr[i].e,1,null,dynamicProperties);
                  this.setGradientData(pathElement,arr[i],data[i], styleOb);
                  var maskId = this.setGradientOpacity(arr[i],data[i], styleOb);
                  if(maskId){
                      pathElement.setAttribute('mask','url(#'+maskId+')');
                  }
                  data[i].elem = pathElement;
                  container.appendChild(pathElement);
              }
              if(arr[i].r === 2) {
                  pathElement.setAttribute('fill-rule', 'evenodd');
              }
  
              if(arr[i].ln){
                  pathElement.setAttribute('id',arr[i].ln);
              }
              if(arr[i].cl){
                  pathElement.setAttribute('class',arr[i].cl);
              }
              styleOb.pElem = pathElement;
              this.stylesList.push(styleOb);
              data[i].style = styleOb;
              ownArrays.push(styleOb);
          }else if(arr[i].ty == 'gr'){
              data[i] = {
                  it: []
              };
              var g = document.createElementNS(svgNS,'g');
              container.appendChild(g);
              data[i].gr = g;
              this.searchShapes(arr[i].it,data[i].it,g,dynamicProperties, level + 1, ownTransformers);
          }else if(arr[i].ty == 'tr'){
              data[i] = {
                  transform : {
                      op: PropertyFactory.getProp(this,arr[i].o,0,0.01,dynamicProperties),
                      mProps: PropertyFactory.getProp(this,arr[i],2,null,dynamicProperties)
                  },
                  elements: []
              };
              currentTransform = data[i].transform;
              ownTransformers.push(currentTransform);
          }else if(arr[i].ty == 'sh' || arr[i].ty == 'rc' || arr[i].ty == 'el' || arr[i].ty == 'sr'){
              data[i] = {
                  elements : [],
                  caches:[],
                  styles : [],
                  transformers: ownTransformers,
                  lStr: ''
              };
              var ty = 4;
              if(arr[i].ty == 'rc'){
                  ty = 5;
              }else if(arr[i].ty == 'el'){
                  ty = 6;
              }else if(arr[i].ty == 'sr'){
                  ty = 7;
              }
              data[i].sh = ShapePropertyFactory.getShapeProp(this,arr[i],ty,dynamicProperties);
              data[i].lvl = level;
              this.shapes.push(data[i].sh);
              this.addShapeToModifiers(data[i]);
              jLen = this.stylesList.length;
              for(j=0;j<jLen;j+=1){
                  if(!this.stylesList[j].closed){
                      data[i].elements.push({
                          ty:this.stylesList[j].type,
                          st: this.stylesList[j]
                      });
                  }
              }
          }else if(arr[i].ty == 'tm' || arr[i].ty == 'rd' || arr[i].ty == 'ms' || arr[i].ty == 'rp'){
              var modifier = ShapeModifiers.getModifier(arr[i].ty);
              modifier.init(this,arr[i],dynamicProperties);
              this.shapeModifiers.push(modifier);
              ownModifiers.push(modifier);
              data[i] = modifier;
          }
      }
      len = ownArrays.length;
      for(i=0;i<len;i+=1){
          ownArrays[i].closed = true;
      }
      len = ownModifiers.length;
      for(i=0;i<len;i+=1){
          ownModifiers[i].closed = true;
      }
  };
  
  IShapeElement.prototype.addShapeToModifiers = function(data) {
      var i, len = this.shapeModifiers.length;
      for(i=0;i<len;i+=1){
          this.shapeModifiers[i].addShape(data);
      }
  };
  
  IShapeElement.prototype.renderModifiers = function() {
      if(!this.shapeModifiers.length){
          return;
      }
      var i, len = this.shapes.length;
      for(i=0;i<len;i+=1){
          this.shapes[i].reset();
      }
  
  
      len = this.shapeModifiers.length;
  
      for(i=len-1;i>=0;i-=1){
          this.shapeModifiers[i].processShapes(this.firstFrame);
      }
  };
  
  IShapeElement.prototype.renderFrame = function(parentMatrix){
      var renderParent = this._parent.renderFrame.call(this,parentMatrix);
      if(renderParent===false){
          this.hide();
          return;
      }
      this.globalToLocal([0,0,0]);
      if(this.hidden){
          this.layerElement.style.display = 'block';
          this.hidden = false;
      }
      this.renderModifiers();
      this.renderShape(null,null,true, null);
  };
  
  IShapeElement.prototype.hide = function(){
      if(!this.hidden){
          this.layerElement.style.display = 'none';
          var i, len = this.stylesList.length;
          for(i=len-1;i>=0;i-=1){
              if(this.stylesList[i].ld !== '0'){
                  this.stylesList[i].ld = '0';
                  this.stylesList[i].pElem.style.display = 'none';
                  if(this.stylesList[i].pElem.parentNode){
                      this.stylesList[i].parent = this.stylesList[i].pElem.parentNode;
                      //this.stylesList[i].pElem.parentNode.removeChild(this.stylesList[i].pElem);
                  }
              }
          }
          this.hidden = true;
      }
  };
  
  IShapeElement.prototype.renderShape = function(items,data,isMain, container){
      var i, len;
      if(!items){
          items = this.shapesData;
          len = this.stylesList.length;
          for(i=0;i<len;i+=1){
              this.stylesList[i].d = '';
              this.stylesList[i].mdf = false;
          }
      }
      if(!data){
          data = this.viewData;
      }
      ///
      ///
      len = items.length - 1;
      var ty;
      for(i=len;i>=0;i-=1){
          ty = items[i].ty;
          if(ty == 'tr'){
              if(this.firstFrame || data[i].transform.op.mdf && container){
                  container.setAttribute('opacity',data[i].transform.op.v);
              }
              if(this.firstFrame || data[i].transform.mProps.mdf && container){
                  container.setAttribute('transform',data[i].transform.mProps.v.to2dCSS());
              }
          }else if(ty == 'sh' || ty == 'el' || ty == 'rc' || ty == 'sr'){
              this.renderPath(items[i],data[i]);
          }else if(ty == 'fl'){
              this.renderFill(items[i],data[i]);
          }else if(ty == 'gf'){
              this.renderGradient(items[i],data[i]);
          }else if(ty == 'gs'){
              this.renderGradient(items[i],data[i]);
              this.renderStroke(items[i],data[i]);
          }else if(ty == 'st'){
              this.renderStroke(items[i],data[i]);
          }else if(ty == 'gr'){
              this.renderShape(items[i].it,data[i].it,false, data[i].gr);
          }else if(ty == 'tm'){
              //
          }
      }
      if(isMain) {
          len = this.stylesList.length;
          for (i = 0; i < len; i += 1) {
              if (this.stylesList[i].ld === '0') {
                  this.stylesList[i].ld = '1';
                  this.stylesList[i].pElem.style.display = 'block';
                  //this.stylesList[i].parent.appendChild(this.stylesList[i].pElem);
              }
              if (this.stylesList[i].mdf || this.firstFrame) {
                  this.stylesList[i].pElem.setAttribute('d', this.stylesList[i].d);
                  if(this.stylesList[i].msElem){
                      this.stylesList[i].msElem.setAttribute('d', this.stylesList[i].d);
                  }
              }
          }
          if (this.firstFrame) {
              this.firstFrame = false;
          }
      }
  
  };
  
  IShapeElement.prototype.buildShapeString = function(pathNodes, length, closed, mat) {
      var i, shapeString = '';
      for(i = 1; i < length; i += 1) {
          if (i === 1) {
              shapeString += " M" + mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
          }
          shapeString += " C" + mat.applyToPointStringified(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1]) + " " + mat.applyToPointStringified(pathNodes.i[i][0], pathNodes.i[i][1]) + " " + mat.applyToPointStringified(pathNodes.v[i][0], pathNodes.v[i][1]);
      }
      if (length === 1) {
          shapeString += " M" + mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
      }
      if (closed && length) {
          shapeString += " C" + mat.applyToPointStringified(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1]) + " " + mat.applyToPointStringified(pathNodes.i[0][0], pathNodes.i[0][1]) + " " + mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
          shapeString += 'z';
      }
      return shapeString;
  }
  
  IShapeElement.prototype.renderPath = function(pathData,viewData){
      var len, i, j, jLen,pathStringTransformed,redraw,pathNodes,l, lLen = viewData.elements.length;
      var lvl = viewData.lvl;
      for(l=0;l<lLen;l+=1){
          redraw = viewData.sh.mdf || this.firstFrame;
          pathStringTransformed = 'M0 0';
          var paths = viewData.sh.paths;
          jLen = paths._length;
          if(viewData.elements[l].st.lvl < lvl){
              var mat = this.mHelper.reset(), props;
              var iterations = lvl - viewData.elements[l].st.lvl;
              var k = viewData.transformers.length-1;
              while(iterations > 0) {
                  redraw = viewData.transformers[k].mProps.mdf || redraw;
                  props = viewData.transformers[k].mProps.v.props;
                  mat.transform(props[0],props[1],props[2],props[3],props[4],props[5],props[6],props[7],props[8],props[9],props[10],props[11],props[12],props[13],props[14],props[15]);
                  iterations --;
                  k --;
              }
              if(redraw){
                  for(j=0;j<jLen;j+=1){
                      pathNodes = paths.shapes[j];
                      if(pathNodes && pathNodes._length){
                          pathStringTransformed += this.buildShapeString(pathNodes, pathNodes._length, pathNodes.c, mat);
                          /*len = pathNodes._length;
                          for (i = 1; i < len; i += 1) {
                              if (i == 1) {
                                  pathStringTransformed += " M" + mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
                              }
                              pathStringTransformed += " C" + mat.applyToPointStringified(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1]) + " " + mat.applyToPointStringified(pathNodes.i[i][0], pathNodes.i[i][1]) + " " + mat.applyToPointStringified(pathNodes.v[i][0], pathNodes.v[i][1]);
                          }
                          if (len == 1) {
                              pathStringTransformed += " M" + mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
                          }
                          if (pathNodes.c) {
                              pathStringTransformed += " C" + mat.applyToPointStringified(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1]) + " " + mat.applyToPointStringified(pathNodes.i[0][0], pathNodes.i[0][1]) + " " + mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
                              pathStringTransformed += 'z';
                          }*/
                      }
                  }
                  viewData.caches[l] = pathStringTransformed;
              } else {
                  pathStringTransformed = viewData.caches[l];
              }
          } else {
              if(redraw){
                  for(j=0;j<jLen;j+=1){
                      pathNodes = paths.shapes[j];
                      if(pathNodes && pathNodes._length){
                          pathStringTransformed += this.buildShapeString(pathNodes, pathNodes._length, pathNodes.c, this.identityMatrix);
                          /*len = pathNodes._length;
                          for (i = 1; i < len; i += 1) {
                              if (i == 1) {
                                  //pathStringTransformed += " M" + groupTransform.mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
                                  pathStringTransformed += " M" + pathNodes.v[0].join(',');
                              }
                              //pathStringTransformed += " C" + groupTransform.mat.applyToPointStringified(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1]) + " " + groupTransform.mat.applyToPointStringified(pathNodes.i[i][0], pathNodes.i[i][1]) + " " + groupTransform.mat.applyToPointStringified(pathNodes.v[i][0], pathNodes.v[i][1]);
                              pathStringTransformed += " C" + pathNodes.o[i - 1].join(',') + " " + pathNodes.i[i].join(',') + " " + pathNodes.v[i].join(',');
                          }
                          if (len == 1) {
                              //pathStringTransformed += " M" + groupTransform.mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
                              pathStringTransformed += " M" + pathNodes.v[0].join(',');
                          }
                          if (pathNodes.c && len) {
                              //pathStringTransformed += " C" + groupTransform.mat.applyToPointStringified(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1]) + " " + groupTransform.mat.applyToPointStringified(pathNodes.i[0][0], pathNodes.i[0][1]) + " " + groupTransform.mat.applyToPointStringified(pathNodes.v[0][0], pathNodes.v[0][1]);
                              pathStringTransformed += " C" + pathNodes.o[i - 1].join(',') + " " + pathNodes.i[0].join(',') + " " + pathNodes.v[0].join(',');
                              pathStringTransformed += 'z';
                          }*/
                      }
                  }
                  viewData.caches[l] = pathStringTransformed;
              } else {
                  pathStringTransformed = viewData.caches[l];
              }
          }
          viewData.elements[l].st.d += pathStringTransformed;
          viewData.elements[l].st.mdf = redraw || viewData.elements[l].st.mdf;
      }
  
  };
  
  IShapeElement.prototype.renderFill = function(styleData,viewData){
      var styleElem = viewData.style;
  
      if(viewData.c.mdf || this.firstFrame){
          styleElem.pElem.setAttribute('fill','rgb('+bm_floor(viewData.c.v[0])+','+bm_floor(viewData.c.v[1])+','+bm_floor(viewData.c.v[2])+')');
          ////styleElem.pElem.style.fill = 'rgb('+bm_floor(viewData.c.v[0])+','+bm_floor(viewData.c.v[1])+','+bm_floor(viewData.c.v[2])+')';
      }
      if(viewData.o.mdf || this.firstFrame){
          styleElem.pElem.setAttribute('fill-opacity',viewData.o.v);
      }
  };
  
  IShapeElement.prototype.renderGradient = function(styleData,viewData){
      var gfill = viewData.gf;
      var opFill = viewData.of;
      var pt1 = viewData.s.v,pt2 = viewData.e.v;
  
      if(viewData.o.mdf || this.firstFrame){
          var attr = styleData.ty === 'gf' ? 'fill-opacity':'stroke-opacity';
          viewData.elem.setAttribute(attr,viewData.o.v);
      }
      //clippedElement.setAttribute('transform','matrix(1,0,0,1,-100,0)');
      if(viewData.s.mdf || this.firstFrame){
          var attr1 = styleData.t === 1 ? 'x1':'cx';
          var attr2 = attr1 === 'x1' ? 'y1':'cy';
          gfill.setAttribute(attr1,pt1[0]);
          gfill.setAttribute(attr2,pt1[1]);
          if(opFill){
              opFill.setAttribute(attr1,pt1[0]);
              opFill.setAttribute(attr2,pt1[1]);
          }
      }
      var stops, i, len, stop;
      if(viewData.g.cmdf || this.firstFrame){
          stops = viewData.cst;
          var cValues = viewData.g.c;
          len = stops.length;
          for(i=0;i<len;i+=1){
              stop = stops[i];
              stop.setAttribute('offset',cValues[i*4]+'%');
              stop.setAttribute('stop-color','rgb('+cValues[i*4+1]+','+cValues[i*4+2]+','+cValues[i*4+3]+')');
          }
      }
      if(opFill && (viewData.g.omdf || this.firstFrame)){
          stops = viewData.ost;
          var oValues = viewData.g.o;
          len = stops.length;
          for(i=0;i<len;i+=1){
              stop = stops[i];
              stop.setAttribute('offset',oValues[i*2]+'%');
              stop.setAttribute('stop-opacity',oValues[i*2+1]);
          }
      }
      if(styleData.t === 1){
          if(viewData.e.mdf  || this.firstFrame){
              gfill.setAttribute('x2',pt2[0]);
              gfill.setAttribute('y2',pt2[1]);
              if(opFill){
                  opFill.setAttribute('x2',pt2[0]);
                  opFill.setAttribute('y2',pt2[1]);
              }
          }
      } else {
          var rad;
          if(viewData.s.mdf || viewData.e.mdf || this.firstFrame){
              rad = Math.sqrt(Math.pow(pt1[0]-pt2[0],2)+Math.pow(pt1[1]-pt2[1],2));
              gfill.setAttribute('r',rad);
              if(opFill){
                  opFill.setAttribute('r',rad);
              }
          }
          if(viewData.e.mdf || viewData.h.mdf || viewData.a.mdf || this.firstFrame){
              if(!rad){
                  rad = Math.sqrt(Math.pow(pt1[0]-pt2[0],2)+Math.pow(pt1[1]-pt2[1],2));
              }
              var ang = Math.atan2(pt2[1]-pt1[1], pt2[0]-pt1[0]);
  
              var percent = viewData.h.v >= 1 ? 0.99 : viewData.h.v <= -1 ? -0.99:viewData.h.v;
              var dist = rad*percent;
              var x = Math.cos(ang + viewData.a.v)*dist + pt1[0];
              var y = Math.sin(ang + viewData.a.v)*dist + pt1[1];
              gfill.setAttribute('fx',x);
              gfill.setAttribute('fy',y);
              if(opFill){
                  opFill.setAttribute('fx',x);
                  opFill.setAttribute('fy',y);
              }
          }
          //gfill.setAttribute('fy','200');
      }
  };
  
  IShapeElement.prototype.renderStroke = function(styleData,viewData){
      var styleElem = viewData.style;
      //TODO fix dashes
      var d = viewData.d;
      var dasharray,dashoffset;
      if(d && d.k && (d.mdf || this.firstFrame)){
          styleElem.pElem.setAttribute('stroke-dasharray', d.dasharray);
          ////styleElem.pElem.style.strokeDasharray = d.dasharray;
          styleElem.pElem.setAttribute('stroke-dashoffset', d.dashoffset);
          ////styleElem.pElem.style.strokeDashoffset = d.dashoffset;
      }
      if(viewData.c && (viewData.c.mdf || this.firstFrame)){
          styleElem.pElem.setAttribute('stroke','rgb('+bm_floor(viewData.c.v[0])+','+bm_floor(viewData.c.v[1])+','+bm_floor(viewData.c.v[2])+')');
          ////styleElem.pElem.style.stroke = 'rgb('+bm_floor(viewData.c.v[0])+','+bm_floor(viewData.c.v[1])+','+bm_floor(viewData.c.v[2])+')';
      }
      if(viewData.o.mdf || this.firstFrame){
          styleElem.pElem.setAttribute('stroke-opacity',viewData.o.v);
      }
      if(viewData.w.mdf || this.firstFrame){
          styleElem.pElem.setAttribute('stroke-width',viewData.w.v);
          if(styleElem.msElem){
              styleElem.msElem.setAttribute('stroke-width',viewData.w.v);
          }
          ////styleElem.pElem.style.strokeWidth = viewData.w.v;
      }
  };
  
  IShapeElement.prototype.destroy = function(){
      this._parent.destroy.call(this._parent);
      this.shapeData = null;
      this.viewData = null;
      this.parentContainer = null;
      this.placeholder = null;
  };
  
  function ITextElement(data, animationItem,parentContainer,globalData){
  }
  ITextElement.prototype.init = function(){
      this._parent.init.call(this);
  
      this.lettersChangedFlag = false;
      this.currentTextDocumentData = {};
      var data = this.data;
      this.viewData = {
          m:{
              a: PropertyFactory.getProp(this,data.t.m.a,1,0,this.dynamicProperties)
          }
      };
      var textData = this.data.t;
      if(textData.a.length){
          this.viewData.a = Array.apply(null,{length:textData.a.length});
          var i, len = textData.a.length, animatorData, animatorProps;
          for(i=0;i<len;i+=1){
              animatorProps = textData.a[i];
              animatorData = {
                  a: {},
                  s: {}
              };
              if('r' in animatorProps.a) {
                  animatorData.a.r = PropertyFactory.getProp(this,animatorProps.a.r,0,degToRads,this.dynamicProperties);
              }
              if('rx' in animatorProps.a) {
                  animatorData.a.rx = PropertyFactory.getProp(this,animatorProps.a.rx,0,degToRads,this.dynamicProperties);
              }
              if('ry' in animatorProps.a) {
                  animatorData.a.ry = PropertyFactory.getProp(this,animatorProps.a.ry,0,degToRads,this.dynamicProperties);
              }
              if('sk' in animatorProps.a) {
                  animatorData.a.sk = PropertyFactory.getProp(this,animatorProps.a.sk,0,degToRads,this.dynamicProperties);
              }
              if('sa' in animatorProps.a) {
                  animatorData.a.sa = PropertyFactory.getProp(this,animatorProps.a.sa,0,degToRads,this.dynamicProperties);
              }
              if('s' in animatorProps.a) {
                  animatorData.a.s = PropertyFactory.getProp(this,animatorProps.a.s,1,0.01,this.dynamicProperties);
              }
              if('a' in animatorProps.a) {
                  animatorData.a.a = PropertyFactory.getProp(this,animatorProps.a.a,1,0,this.dynamicProperties);
              }
              if('o' in animatorProps.a) {
                  animatorData.a.o = PropertyFactory.getProp(this,animatorProps.a.o,0,0.01,this.dynamicProperties);
              }
              if('p' in animatorProps.a) {
                  animatorData.a.p = PropertyFactory.getProp(this,animatorProps.a.p,1,0,this.dynamicProperties);
              }
              if('sw' in animatorProps.a) {
                  animatorData.a.sw = PropertyFactory.getProp(this,animatorProps.a.sw,0,0,this.dynamicProperties);
              }
              if('sc' in animatorProps.a) {
                  animatorData.a.sc = PropertyFactory.getProp(this,animatorProps.a.sc,1,0,this.dynamicProperties);
              }
              if('fc' in animatorProps.a) {
                  animatorData.a.fc = PropertyFactory.getProp(this,animatorProps.a.fc,1,0,this.dynamicProperties);
              }
              if('fh' in animatorProps.a) {
                  animatorData.a.fh = PropertyFactory.getProp(this,animatorProps.a.fh,0,0,this.dynamicProperties);
              }
              if('fs' in animatorProps.a) {
                  animatorData.a.fs = PropertyFactory.getProp(this,animatorProps.a.fs,0,0.01,this.dynamicProperties);
              }
              if('fb' in animatorProps.a) {
                  animatorData.a.fb = PropertyFactory.getProp(this,animatorProps.a.fb,0,0.01,this.dynamicProperties);
              }
              if('t' in animatorProps.a) {
                  animatorData.a.t = PropertyFactory.getProp(this,animatorProps.a.t,0,0,this.dynamicProperties);
              }
              animatorData.s = PropertyFactory.getTextSelectorProp(this,animatorProps.s,this.dynamicProperties);
              animatorData.s.t = animatorProps.s.t;
              this.viewData.a[i] = animatorData;
          }
      }else{
          this.viewData.a = [];
      }
      if(textData.p && 'm' in textData.p){
          this.viewData.p = {
              f: PropertyFactory.getProp(this,textData.p.f,0,0,this.dynamicProperties),
              l: PropertyFactory.getProp(this,textData.p.l,0,0,this.dynamicProperties),
              r: textData.p.r,
              m: this.maskManager.getMaskProperty(textData.p.m)
          };
          this.maskPath = true;
      } else {
          this.maskPath = false;
      }
  };
  ITextElement.prototype.prepareFrame = function(num) {
      var i = 0, len = this.data.t.d.k.length;
      var textDocumentData = this.data.t.d.k[i].s;
      i += 1;
      while(i<len){
          if(this.data.t.d.k[i].t > num){
              break;
          }
          textDocumentData = this.data.t.d.k[i].s;
          i += 1;
      }
      this.lettersChangedFlag = false;
      if(textDocumentData !== this.currentTextDocumentData){
          this.currentTextDocumentData = textDocumentData;
          this.lettersChangedFlag = true;
          this.buildNewText();
      }
      this._parent.prepareFrame.call(this, num);
  }
  
  ITextElement.prototype.createPathShape = function(matrixHelper, shapes) {
      var j,jLen = shapes.length;
      var k, kLen, pathNodes;
      var shapeStr = '';
      for(j=0;j<jLen;j+=1){
          pathNodes = shapes[j].ks.k;
          shapeStr += this.buildShapeString(pathNodes, pathNodes.i.length, true, matrixHelper);
          /*kLen = pathNodes.i.length;
          for(k=1;k<kLen;k+=1){
              if(k==1){
                  shapeStr += " M"+matrixHelper.applyToPointStringified(pathNodes.v[0][0],pathNodes.v[0][1]);
              }
              shapeStr += " C"+matrixHelper.applyToPointStringified(pathNodes.o[k-1][0],pathNodes.o[k-1][1]) + " "+matrixHelper.applyToPointStringified(pathNodes.i[k][0],pathNodes.i[k][1]) + " "+matrixHelper.applyToPointStringified(pathNodes.v[k][0],pathNodes.v[k][1]);
          }
          shapeStr += " C"+matrixHelper.applyToPointStringified(pathNodes.o[k-1][0],pathNodes.o[k-1][1]) + " "+matrixHelper.applyToPointStringified(pathNodes.i[0][0],pathNodes.i[0][1]) + " "+matrixHelper.applyToPointStringified(pathNodes.v[0][0],pathNodes.v[0][1]);
          shapeStr += 'z';*/
      }
      return shapeStr;
  };
  
  ITextElement.prototype.getMeasures = function(){
  
      var matrixHelper = this.mHelper;
      var renderType = this.renderType;
      var data = this.data;
      var xPos,yPos;
      var i, len;
      var documentData = this.currentTextDocumentData;
      var letters = documentData.l;
      if(this.maskPath) {
          var mask = this.viewData.p.m;
          if(!this.viewData.p.n || this.viewData.p.mdf){
              var paths = mask.v;
              if(this.viewData.p.r){
                  paths = reversePath(paths);
              }
              var pathInfo = {
                  tLength: 0,
                  segments: []
              };
              len = paths.v.length - 1;
              var pathData;
              var totalLength = 0;
              for (i = 0; i < len; i += 1) {
                  pathData = {
                      s: paths.v[i],
                      e: paths.v[i + 1],
                      to: [paths.o[i][0] - paths.v[i][0], paths.o[i][1] - paths.v[i][1]],
                      ti: [paths.i[i + 1][0] - paths.v[i + 1][0], paths.i[i + 1][1] - paths.v[i + 1][1]]
                  };
                  bez.buildBezierData(pathData);
                  pathInfo.tLength += pathData.bezierData.segmentLength;
                  pathInfo.segments.push(pathData);
                  totalLength += pathData.bezierData.segmentLength;
              }
              i = len;
              if (mask.v.c) {
                  pathData = {
                      s: paths.v[i],
                      e: paths.v[0],
                      to: [paths.o[i][0] - paths.v[i][0], paths.o[i][1] - paths.v[i][1]],
                      ti: [paths.i[0][0] - paths.v[0][0], paths.i[0][1] - paths.v[0][1]]
                  };
                  bez.buildBezierData(pathData);
                  pathInfo.tLength += pathData.bezierData.segmentLength;
                  pathInfo.segments.push(pathData);
                  totalLength += pathData.bezierData.segmentLength;
              }
              this.viewData.p.pi = pathInfo;
          }
          var pathInfo = this.viewData.p.pi;
  
          var currentLength = this.viewData.p.f.v, segmentInd = 0, pointInd = 1, currentPoint, prevPoint, points;
          var segmentLength = 0, flag = true;
          var segments = pathInfo.segments;
          if (currentLength < 0 && mask.v.c) {
              if (pathInfo.tLength < Math.abs(currentLength)) {
                  currentLength = -Math.abs(currentLength) % pathInfo.tLength;
              }
              segmentInd = segments.length - 1;
              points = segments[segmentInd].bezierData.points;
              pointInd = points.length - 1;
              while (currentLength < 0) {
                  currentLength += points[pointInd].partialLength;
                  pointInd -= 1;
                  if (pointInd < 0) {
                      segmentInd -= 1;
                      points = segments[segmentInd].bezierData.points;
                      pointInd = points.length - 1;
                  }
              }
  
          }
          points = segments[segmentInd].bezierData.points;
          prevPoint = points[pointInd - 1];
          currentPoint = points[pointInd];
          var partialLength = currentPoint.partialLength;
          var perc, tanAngle;
      }
  
  
      len = letters.length;
      xPos = 0;
      yPos = 0;
      var yOff = documentData.s*1.2*.714;
      var firstLine = true;
      var renderedData = this.viewData, animatorProps, animatorSelector;
      var j, jLen;
      var lettersValue = Array.apply(null,{length:len}), letterValue;
  
      jLen = renderedData.a.length;
      var lastLetter;
  
      var mult, ind = -1, offf, xPathPos, yPathPos;
      var initPathPos = currentLength,initSegmentInd = segmentInd, initPointInd = pointInd, currentLine = -1;
      var elemOpacity;
      var sc,sw,fc,k;
      var lineLength = 0;
      var letterSw,letterSc,letterFc,letterM,letterP,letterO;
      for( i = 0; i < len; i += 1) {
          matrixHelper.reset();
          elemOpacity = 1;
          if(letters[i].n) {
              xPos = 0;
              yPos += documentData.yOffset;
              yPos += firstLine ? 1 : 0;
              currentLength = initPathPos ;
              firstLine = false;
              lineLength = 0;
              if(this.maskPath) {
                  segmentInd = initSegmentInd;
                  pointInd = initPointInd;
                  points = segments[segmentInd].bezierData.points;
                  prevPoint = points[pointInd - 1];
                  currentPoint = points[pointInd];
                  partialLength = currentPoint.partialLength;
                  segmentLength = 0;
              }
              lettersValue[i] = this.emptyProp;
          }else{
              if(this.maskPath) {
                  if(currentLine !== letters[i].line){
                      switch(documentData.j){
                          case 1:
                              currentLength += totalLength - documentData.lineWidths[letters[i].line];
                              break;
                          case 2:
                              currentLength += (totalLength - documentData.lineWidths[letters[i].line])/2;
                              break;
                      }
                      currentLine = letters[i].line;
                  }
                  if (ind !== letters[i].ind) {
                      if (letters[ind]) {
                          currentLength += letters[ind].extra;
                      }
                      currentLength += letters[i].an / 2;
                      ind = letters[i].ind;
                  }
                  currentLength += renderedData.m.a.v[0] * letters[i].an / 200;
                  var animatorOffset = 0;
                  for (j = 0; j < jLen; j += 1) {
                      animatorProps = renderedData.a[j].a;
                      if ('p' in animatorProps) {
                          animatorSelector = renderedData.a[j].s;
                          mult = animatorSelector.getMult(letters[i].anIndexes[j],data.t.a[j].s.totalChars);
                          if(mult.length){
                              animatorOffset += animatorProps.p.v[0] * mult[0];
                          } else{
                              animatorOffset += animatorProps.p.v[0] * mult;
                          }
  
                      }
                      if ('a' in animatorProps) {
                          animatorSelector = renderedData.a[j].s;
                          mult = animatorSelector.getMult(letters[i].anIndexes[j],data.t.a[j].s.totalChars);
                          if(mult.length){
                              animatorOffset += animatorProps.a.v[0] * mult[0];
                          } else{
                              animatorOffset += animatorProps.a.v[0] * mult;
                          }
  
                      }
                  }
                  flag = true;
                  while (flag) {
                      if (segmentLength + partialLength >= currentLength + animatorOffset || !points) {
                          perc = (currentLength + animatorOffset - segmentLength) / currentPoint.partialLength;
                          xPathPos = prevPoint.point[0] + (currentPoint.point[0] - prevPoint.point[0]) * perc;
                          yPathPos = prevPoint.point[1] + (currentPoint.point[1] - prevPoint.point[1]) * perc;
                          matrixHelper.translate(-renderedData.m.a.v[0]*letters[i].an/200, -(renderedData.m.a.v[1] * yOff / 100));
                          flag = false;
                      } else if (points) {
                          segmentLength += currentPoint.partialLength;
                          pointInd += 1;
                          if (pointInd >= points.length) {
                              pointInd = 0;
                              segmentInd += 1;
                              if (!segments[segmentInd]) {
                                  if (mask.v.c) {
                                      pointInd = 0;
                                      segmentInd = 0;
                                      points = segments[segmentInd].bezierData.points;
                                  } else {
                                      segmentLength -= currentPoint.partialLength;
                                      points = null;
                                  }
                              } else {
                                  points = segments[segmentInd].bezierData.points;
                              }
                          }
                          if (points) {
                              prevPoint = currentPoint;
                              currentPoint = points[pointInd];
                              partialLength = currentPoint.partialLength;
                          }
                      }
                  }
                  offf = letters[i].an / 2 - letters[i].add;
                  matrixHelper.translate(-offf, 0, 0);
              } else {
                  offf = letters[i].an/2 - letters[i].add;
                  matrixHelper.translate(-offf,0,0);
  
                  // Grouping alignment
                  matrixHelper.translate(-renderedData.m.a.v[0]*letters[i].an/200, -renderedData.m.a.v[1]*yOff/100, 0);
              }
  
              lineLength += letters[i].l/2;
              for(j=0;j<jLen;j+=1){
                  animatorProps = renderedData.a[j].a;
                  if ('t' in animatorProps) {
                      animatorSelector = renderedData.a[j].s;
                      mult = animatorSelector.getMult(letters[i].anIndexes[j],data.t.a[j].s.totalChars);
                      if(this.maskPath) {
                          if(mult.length) {
                              currentLength += animatorProps.t*mult[0];
                          } else {
                              currentLength += animatorProps.t*mult;
                          }
                      }else{
                          if(mult.length) {
                              xPos += animatorProps.t.v*mult[0];
                          } else {
                              xPos += animatorProps.t.v*mult;
                          }
                      }
                  }
              }
              lineLength += letters[i].l/2;
              if(documentData.strokeWidthAnim) {
                  sw = documentData.sw || 0;
              }
              if(documentData.strokeColorAnim) {
                  if(documentData.sc){
                      sc = [documentData.sc[0], documentData.sc[1], documentData.sc[2]];
                  }else{
                      sc = [0,0,0];
                  }
              }
              if(documentData.fillColorAnim) {
                  fc = [documentData.fc[0], documentData.fc[1], documentData.fc[2]];
              }
              for(j=0;j<jLen;j+=1){
                  animatorProps = renderedData.a[j].a;
                  if ('a' in animatorProps) {
                      animatorSelector = renderedData.a[j].s;
                      mult = animatorSelector.getMult(letters[i].anIndexes[j],data.t.a[j].s.totalChars);
  
                      if(mult.length){
                          matrixHelper.translate(-animatorProps.a.v[0]*mult[0], -animatorProps.a.v[1]*mult[1], animatorProps.a.v[2]*mult[2]);
                      } else {
                          matrixHelper.translate(-animatorProps.a.v[0]*mult, -animatorProps.a.v[1]*mult, animatorProps.a.v[2]*mult);
                      }
                  }
              }
              for(j=0;j<jLen;j+=1){
                  animatorProps = renderedData.a[j].a;
                  if ('s' in animatorProps) {
                      animatorSelector = renderedData.a[j].s;
                      mult = animatorSelector.getMult(letters[i].anIndexes[j],data.t.a[j].s.totalChars);
                      if(mult.length){
                          matrixHelper.scale(1+((animatorProps.s.v[0]-1)*mult[0]),1+((animatorProps.s.v[1]-1)*mult[1]),1);
                      } else {
                          matrixHelper.scale(1+((animatorProps.s.v[0]-1)*mult),1+((animatorProps.s.v[1]-1)*mult),1);
                      }
                  }
              }
              for(j=0;j<jLen;j+=1) {
                  animatorProps = renderedData.a[j].a;
                  animatorSelector = renderedData.a[j].s;
                  mult = animatorSelector.getMult(letters[i].anIndexes[j],data.t.a[j].s.totalChars);
                  if ('sk' in animatorProps) {
                      if(mult.length) {
                          matrixHelper.skewFromAxis(-animatorProps.sk.v * mult[0], animatorProps.sa.v * mult[1]);
                      } else {
                          matrixHelper.skewFromAxis(-animatorProps.sk.v * mult, animatorProps.sa.v * mult);
                      }
                  }
                  if ('r' in animatorProps) {
                      if(mult.length) {
                          matrixHelper.rotateZ(-animatorProps.r.v * mult[2]);
                      } else {
                          matrixHelper.rotateZ(-animatorProps.r.v * mult);
                      }
                  }
                  if ('ry' in animatorProps) {
  
                      if(mult.length) {
                          matrixHelper.rotateY(animatorProps.ry.v*mult[1]);
                      }else{
                          matrixHelper.rotateY(animatorProps.ry.v*mult);
                      }
                  }
                  if ('rx' in animatorProps) {
                      if(mult.length) {
                          matrixHelper.rotateX(animatorProps.rx.v*mult[0]);
                      } else {
                          matrixHelper.rotateX(animatorProps.rx.v*mult);
                      }
                  }
                  if ('o' in animatorProps) {
                      if(mult.length) {
                          elemOpacity += ((animatorProps.o.v)*mult[0] - elemOpacity)*mult[0];
                      } else {
                          elemOpacity += ((animatorProps.o.v)*mult - elemOpacity)*mult;
                      }
                  }
                  if (documentData.strokeWidthAnim && 'sw' in animatorProps) {
                      if(mult.length) {
                          sw += animatorProps.sw.v*mult[0];
                      } else {
                          sw += animatorProps.sw.v*mult;
                      }
                  }
                  if (documentData.strokeColorAnim && 'sc' in animatorProps) {
                      for(k=0;k<3;k+=1){
                          if(mult.length) {
                              sc[k] = Math.round(255*(sc[k] + (animatorProps.sc.v[k] - sc[k])*mult[0]));
                          } else {
                              sc[k] = Math.round(255*(sc[k] + (animatorProps.sc.v[k] - sc[k])*mult));
                          }
                      }
                  }
                  if (documentData.fillColorAnim) {
                      if('fc' in animatorProps){
                          for(k=0;k<3;k+=1){
                              if(mult.length) {
                                  fc[k] = fc[k] + (animatorProps.fc.v[k] - fc[k])*mult[0];
                              } else {
                                  fc[k] = fc[k] + (animatorProps.fc.v[k] - fc[k])*mult;
                                  //console.log('mult',mult);
                                  //console.log(Math.round(fc[k] + (animatorProps.fc.v[k] - fc[k])*mult));
                              }
                          }
                      }
                      if('fh' in animatorProps){
                          if(mult.length) {
                              fc = addHueToRGB(fc,animatorProps.fh.v*mult[0]);
                          } else {
                              fc = addHueToRGB(fc,animatorProps.fh.v*mult);
                          }
                      }
                      if('fs' in animatorProps){
                          if(mult.length) {
                              fc = addSaturationToRGB(fc,animatorProps.fs.v*mult[0]);
                          } else {
                              fc = addSaturationToRGB(fc,animatorProps.fs.v*mult);
                          }
                      }
                      if('fb' in animatorProps){
                          if(mult.length) {
                              fc = addBrightnessToRGB(fc,animatorProps.fb.v*mult[0]);
                          } else {
                              fc = addBrightnessToRGB(fc,animatorProps.fb.v*mult);
                          }
                      }
                  }
              }
  
              for(j=0;j<jLen;j+=1){
                  animatorProps = renderedData.a[j].a;
  
                  if ('p' in animatorProps) {
                      animatorSelector = renderedData.a[j].s;
                      mult = animatorSelector.getMult(letters[i].anIndexes[j],data.t.a[j].s.totalChars);
                      if(this.maskPath) {
                          if(mult.length) {
                              matrixHelper.translate(0, animatorProps.p.v[1] * mult[0], -animatorProps.p.v[2] * mult[1]);
                          } else {
                              matrixHelper.translate(0, animatorProps.p.v[1] * mult, -animatorProps.p.v[2] * mult);
                          }
                      }else{
                          if(mult.length) {
                              matrixHelper.translate(animatorProps.p.v[0] * mult[0], animatorProps.p.v[1] * mult[1], -animatorProps.p.v[2] * mult[2]);
                          } else {
                              matrixHelper.translate(animatorProps.p.v[0] * mult, animatorProps.p.v[1] * mult, -animatorProps.p.v[2] * mult);
                          }
                      }
                  }
              }
              if(documentData.strokeWidthAnim){
                  letterSw = sw < 0 ? 0 : sw;
              }
              if(documentData.strokeColorAnim){
                  letterSc = 'rgb('+Math.round(sc[0]*255)+','+Math.round(sc[1]*255)+','+Math.round(sc[2]*255)+')';
              }
              if(documentData.fillColorAnim){
                  letterFc = 'rgb('+Math.round(fc[0]*255)+','+Math.round(fc[1]*255)+','+Math.round(fc[2]*255)+')';
              }
  
              if(this.maskPath) {
                  matrixHelper.translate(0,-documentData.ls);
  
                  matrixHelper.translate(0, renderedData.m.a.v[1]*yOff/100 + yPos,0);
                  if (data.t.p.p) {
                      tanAngle = (currentPoint.point[1] - prevPoint.point[1]) / (currentPoint.point[0] - prevPoint.point[0]);
                      var rot = Math.atan(tanAngle) * 180 / Math.PI;
                      if (currentPoint.point[0] < prevPoint.point[0]) {
                          rot += 180;
                      }
                      matrixHelper.rotate(-rot * Math.PI / 180);
                  }
                  matrixHelper.translate(xPathPos, yPathPos, 0);
                  currentLength -= renderedData.m.a.v[0]*letters[i].an/200;
                  if(letters[i+1] && ind !== letters[i+1].ind){
                      currentLength += letters[i].an / 2;
                      currentLength += documentData.tr/1000*documentData.s;
                  }
              }else{
  
                  matrixHelper.translate(xPos,yPos,0);
  
                  if(documentData.ps){
                      //matrixHelper.translate(documentData.ps[0],documentData.ps[1],0);
                      matrixHelper.translate(documentData.ps[0],documentData.ps[1] + documentData.ascent,0);
                  }
                  switch(documentData.j){
                      case 1:
                          matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[letters[i].line]),0,0);
                          break;
                      case 2:
                          matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[letters[i].line])/2,0,0);
                          break;
                  }
                  matrixHelper.translate(0,-documentData.ls);
                  matrixHelper.translate(offf,0,0);
                  matrixHelper.translate(renderedData.m.a.v[0]*letters[i].an/200,renderedData.m.a.v[1]*yOff/100,0);
                  xPos += letters[i].l + documentData.tr/1000*documentData.s;
              }
              if(renderType === 'html'){
                  letterM = matrixHelper.toCSS();
              }else if(renderType === 'svg'){
                  letterM = matrixHelper.to2dCSS();
              }else{
                  letterP = [matrixHelper.props[0],matrixHelper.props[1],matrixHelper.props[2],matrixHelper.props[3],matrixHelper.props[4],matrixHelper.props[5],matrixHelper.props[6],matrixHelper.props[7],matrixHelper.props[8],matrixHelper.props[9],matrixHelper.props[10],matrixHelper.props[11],matrixHelper.props[12],matrixHelper.props[13],matrixHelper.props[14],matrixHelper.props[15]];
              }
              letterO = elemOpacity;
  
              lastLetter = this.renderedLetters[i];
              if(lastLetter && (lastLetter.o !== letterO || lastLetter.sw !== letterSw || lastLetter.sc !== letterSc || lastLetter.fc !== letterFc)){
                  this.lettersChangedFlag = true;
                  letterValue = new LetterProps(letterO,letterSw,letterSc,letterFc,letterM,letterP);
              }else{
                  if((renderType === 'svg' || renderType === 'html') && (!lastLetter || lastLetter.m !== letterM)){
                      this.lettersChangedFlag = true;
                      letterValue = new LetterProps(letterO,letterSw,letterSc,letterFc,letterM);
                  }else if(renderType === 'canvas' && (!lastLetter || (lastLetter.props[0] !== letterP[0] || lastLetter.props[1] !== letterP[1] || lastLetter.props[4] !== letterP[4] || lastLetter.props[5] !== letterP[5] || lastLetter.props[12] !== letterP[12] || lastLetter.props[13] !== letterP[13]))){
                      this.lettersChangedFlag = true;
                      letterValue = new LetterProps(letterO,letterSw,letterSc,letterFc,null,letterP);
                  } else {
                      letterValue = lastLetter;
                  }
              }
              this.renderedLetters[i] = letterValue;
          }
      }
  };
  
  ITextElement.prototype.buildShapeString = IShapeElement.prototype.buildShapeString;
  
  ITextElement.prototype.emptyProp = new LetterProps();
  
  function SVGTextElement(data,parentContainer,globalData,comp, placeholder){
      this.textSpans = [];
      this.renderType = 'svg';
      this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
  }
  createElement(SVGBaseElement, SVGTextElement);
  
  SVGTextElement.prototype.init = ITextElement.prototype.init;
  SVGTextElement.prototype.createPathShape = ITextElement.prototype.createPathShape;
  SVGTextElement.prototype.getMeasures = ITextElement.prototype.getMeasures;
  SVGTextElement.prototype.prepareFrame = ITextElement.prototype.prepareFrame;
  SVGTextElement.prototype.buildShapeString = ITextElement.prototype.buildShapeString;
  
  SVGTextElement.prototype.createElements = function(){
  
      this._parent.createElements.call(this);
  
  
      if(this.data.ln){
          this.layerElement.setAttribute('id',this.data.ln);
      }
      if(this.data.cl){
          this.layerElement.setAttribute('class',this.data.cl);
      }
  };
  
  SVGTextElement.prototype.buildNewText = function(){
      var i, len;
  
      var documentData = this.currentTextDocumentData;
      this.renderedLetters = Array.apply(null,{length:this.currentTextDocumentData.l ? this.currentTextDocumentData.l.length : 0});
      if(documentData.fc) {
          this.layerElement.setAttribute('fill', 'rgb(' + Math.round(documentData.fc[0]*255) + ',' + Math.round(documentData.fc[1]*255) + ',' + Math.round(documentData.fc[2]*255) + ')');
      }else{
          this.layerElement.setAttribute('fill', 'rgba(0,0,0,0)');
      }
      if(documentData.sc){
          this.layerElement.setAttribute('stroke', 'rgb(' + Math.round(documentData.sc[0]*255) + ',' + Math.round(documentData.sc[1]*255) + ',' + Math.round(documentData.sc[2]*255) + ')');
          this.layerElement.setAttribute('stroke-width', documentData.sw);
      }
      this.layerElement.setAttribute('font-size', documentData.s);
      var fontData = this.globalData.fontManager.getFontByName(documentData.f);
      if(fontData.fClass){
          this.layerElement.setAttribute('class',fontData.fClass);
      } else {
          this.layerElement.setAttribute('font-family', fontData.fFamily);
          var fWeight = documentData.fWeight, fStyle = documentData.fStyle;
          this.layerElement.setAttribute('font-style', fStyle);
          this.layerElement.setAttribute('font-weight', fWeight);
      }
  
  
  
      var letters = documentData.l || [];
      len = letters.length;
      if(!len){
          return;
      }
      var tSpan;
      var matrixHelper = this.mHelper;
      var shapes, shapeStr = '', singleShape = this.data.singleShape;
      if (singleShape) {
          var xPos = 0, yPos = 0, lineWidths = documentData.lineWidths, boxWidth = documentData.boxWidth, firstLine = true;
      }
      var cnt = 0;
      for (i = 0;i < len ;i += 1) {
          if(this.globalData.fontManager.chars){
              if(!singleShape || i === 0){
                  tSpan = this.textSpans[cnt] ? this.textSpans[cnt] : document.createElementNS(svgNS,'path');
              }
          }else{
              tSpan = this.textSpans[cnt] ? this.textSpans[cnt] : document.createElementNS(svgNS,'text');
          }
          tSpan.style.display = 'inherit';
          tSpan.setAttribute('stroke-linecap', 'butt');
          tSpan.setAttribute('stroke-linejoin','round');
          tSpan.setAttribute('stroke-miterlimit','4');
          //tSpan.setAttribute('visibility', 'hidden');
          if(singleShape && letters[i].n) {
              xPos = 0;
              yPos += documentData.yOffset;
              yPos += firstLine ? 1 : 0;
              firstLine = false;
          }
          matrixHelper.reset();
          if(this.globalData.fontManager.chars) {
              matrixHelper.scale(documentData.s / 100, documentData.s / 100);
          }
          if (singleShape) {
              if(documentData.ps){
                  matrixHelper.translate(documentData.ps[0],documentData.ps[1] + documentData.ascent,0);
              }
              matrixHelper.translate(0,-documentData.ls,0);
              switch(documentData.j){
                  case 1:
                      matrixHelper.translate(documentData.justifyOffset + (boxWidth - lineWidths[letters[i].line]),0,0);
                      break;
                  case 2:
                      matrixHelper.translate(documentData.justifyOffset + (boxWidth - lineWidths[letters[i].line])/2,0,0);
                      break;
              }
              matrixHelper.translate(xPos, yPos, 0);
          }
          if(this.globalData.fontManager.chars){
              var charData = this.globalData.fontManager.getCharData(documentData.t.charAt(i), fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
              var shapeData;
              if(charData){
                  shapeData = charData.data;
              } else {
                  shapeData = null;
              }
              if(shapeData && shapeData.shapes){
                  shapes = shapeData.shapes[0].it;
                  if(!singleShape){
                      shapeStr = '';
                  }
                  shapeStr += this.createPathShape(matrixHelper,shapes);
                  if(!singleShape){
  
                      tSpan.setAttribute('d',shapeStr);
                  }
              }
              if(!singleShape){
                  this.layerElement.appendChild(tSpan);
              }
          }else{
              tSpan.textContent = letters[i].val;
              tSpan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space","preserve");
              this.layerElement.appendChild(tSpan);
              if(singleShape){
                  tSpan.setAttribute('transform',matrixHelper.to2dCSS());
              }
          }
          if(singleShape) {
              xPos += letters[i].l || 0;
              xPos += documentData.tr/1000*documentData.s;
          }
          //
          this.textSpans[cnt] = tSpan;
          cnt += 1;
      }
      if(!singleShape){
          while(cnt < this.textSpans.length){
              this.textSpans[cnt].style.display = 'none';
              cnt += 1;
          }
      }
      if(singleShape && this.globalData.fontManager.chars){
          tSpan.setAttribute('d',shapeStr);
          this.layerElement.appendChild(tSpan);
      }
  }
  
  SVGTextElement.prototype.renderFrame = function(parentMatrix){
  
      var renderParent = this._parent.renderFrame.call(this,parentMatrix);
      if(renderParent===false){
          this.hide();
          return;
      }
      if(this.hidden){
          this.show();
      }
  
      if(this.data.singleShape){
          return;
      }
      this.getMeasures();
      if(!this.lettersChangedFlag){
          return;
      }
      var  i,len;
      var renderedLetters = this.renderedLetters;
  
      var letters = this.currentTextDocumentData.l;
  
      len = letters.length;
      var renderedLetter;
      for(i=0;i<len;i+=1){
          if(letters[i].n){
              continue;
          }
          renderedLetter = renderedLetters[i];
          this.textSpans[i].setAttribute('transform',renderedLetter.m);
          this.textSpans[i].setAttribute('opacity',renderedLetter.o);
          if(renderedLetter.sw){
              this.textSpans[i].setAttribute('stroke-width',renderedLetter.sw);
          }
          if(renderedLetter.sc){
              this.textSpans[i].setAttribute('stroke',renderedLetter.sc);
          }
          if(renderedLetter.fc){
              this.textSpans[i].setAttribute('fill',renderedLetter.fc);
          }
      }
      if(this.firstFrame) {
          this.firstFrame = false;
      }
  }
  
  
  SVGTextElement.prototype.destroy = function(){
      this._parent.destroy.call(this._parent);
  };
  function SVGTintFilter(filter, filterManager){
      this.filterManager = filterManager;
      var feColorMatrix = document.createElementNS(svgNS,'feColorMatrix');
      feColorMatrix.setAttribute('type','matrix');
      feColorMatrix.setAttribute('color-interpolation-filters','linearRGB');
      feColorMatrix.setAttribute('values','0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0');
      feColorMatrix.setAttribute('result','f1');
      filter.appendChild(feColorMatrix);
      feColorMatrix = document.createElementNS(svgNS,'feColorMatrix');
      feColorMatrix.setAttribute('type','matrix');
      feColorMatrix.setAttribute('color-interpolation-filters','sRGB');
      feColorMatrix.setAttribute('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0');
      feColorMatrix.setAttribute('result','f2');
      filter.appendChild(feColorMatrix);
      this.matrixFilter = feColorMatrix;
      if(filterManager.effectElements[2].p.v !== 100 || filterManager.effectElements[2].p.k){
          var feMerge = document.createElementNS(svgNS,'feMerge');
          filter.appendChild(feMerge);
          var feMergeNode;
          feMergeNode = document.createElementNS(svgNS,'feMergeNode');
          feMergeNode.setAttribute('in','SourceGraphic');
          feMerge.appendChild(feMergeNode);
          feMergeNode = document.createElementNS(svgNS,'feMergeNode');
          feMergeNode.setAttribute('in','f2');
          feMerge.appendChild(feMergeNode);
      }
  }
  
  SVGTintFilter.prototype.renderFrame = function(forceRender){
      if(forceRender || this.filterManager.mdf){
          var colorBlack = this.filterManager.effectElements[0].p.v;
          var colorWhite = this.filterManager.effectElements[1].p.v;
          var opacity = this.filterManager.effectElements[2].p.v/100;
          this.matrixFilter.setAttribute('values',(colorWhite[0]- colorBlack[0])+' 0 0 0 '+ colorBlack[0] +' '+ (colorWhite[1]- colorBlack[1]) +' 0 0 0 '+ colorBlack[1] +' '+ (colorWhite[2]- colorBlack[2]) +' 0 0 0 '+ colorBlack[2] +' 0 0 0 ' + opacity + ' 0');
      }
  };
  function SVGFillFilter(filter, filterManager){
      this.filterManager = filterManager;
      var feColorMatrix = document.createElementNS(svgNS,'feColorMatrix');
      feColorMatrix.setAttribute('type','matrix');
      feColorMatrix.setAttribute('color-interpolation-filters','sRGB');
      feColorMatrix.setAttribute('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0');
      filter.appendChild(feColorMatrix);
      this.matrixFilter = feColorMatrix;
  }
  SVGFillFilter.prototype.renderFrame = function(forceRender){
      if(forceRender || this.filterManager.mdf){
          var color = this.filterManager.effectElements[2].p.v;
          var opacity = this.filterManager.effectElements[6].p.v;
          this.matrixFilter.setAttribute('values','0 0 0 0 '+color[0]+' 0 0 0 0 '+color[1]+' 0 0 0 0 '+color[2]+' 0 0 0 '+opacity+' 0');
      }
  };
  function SVGStrokeEffect(elem, filterManager){
      this.initialized = false;
      this.filterManager = filterManager;
      this.elem = elem;
      this.paths = [];
  }
  
  SVGStrokeEffect.prototype.initialize = function(){
  
      var elemChildren = this.elem.layerElement.children || this.elem.layerElement.childNodes;
      var path,groupPath, i, len;
      if(this.filterManager.effectElements[1].p.v === 1){
          len = this.elem.maskManager.masksProperties.length;
          i = 0;
      } else {
          i = this.filterManager.effectElements[0].p.v - 1;
          len = i + 1;
      }
      groupPath = document.createElementNS(svgNS,'g'); 
      groupPath.setAttribute('fill','none');
      groupPath.setAttribute('stroke-linecap','round');
      groupPath.setAttribute('stroke-dashoffset',1);
      for(i;i<len;i+=1){
          path = document.createElementNS(svgNS,'path');
          groupPath.appendChild(path);
          this.paths.push({p:path,m:i});
      }
      if(this.filterManager.effectElements[10].p.v === 3){
          var mask = document.createElementNS(svgNS,'mask');
          var id = 'stms_' + randomString(10);
          mask.setAttribute('id',id);
          mask.setAttribute('mask-type','alpha');
          mask.appendChild(groupPath);
          this.elem.globalData.defs.appendChild(mask);
          var g = document.createElementNS(svgNS,'g');
          g.setAttribute('mask','url(#'+id+')');
          if(elemChildren[0]){
              g.appendChild(elemChildren[0]);
          }
          this.elem.layerElement.appendChild(g);
          this.masker = mask;
          groupPath.setAttribute('stroke','#fff');
      } else if(this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2){
          if(this.filterManager.effectElements[10].p.v === 2){
              var elemChildren = this.elem.layerElement.children || this.elem.layerElement.childNodes;
              while(elemChildren.length){
                  this.elem.layerElement.removeChild(elemChildren[0]);
              }
          }
          this.elem.layerElement.appendChild(groupPath);
          this.elem.layerElement.removeAttribute('mask');
          groupPath.setAttribute('stroke','#fff');
      }
      this.initialized = true;
      this.pathMasker = groupPath;
  }
  
  SVGStrokeEffect.prototype.renderFrame = function(forceRender){
      if(!this.initialized){
          this.initialize();
      }
      var i, len = this.paths.length;
      var mask, path;
      for(i=0;i<len;i+=1){
          mask = this.elem.maskManager.viewData[this.paths[i].m];
          path = this.paths[i].p;
          if(forceRender || this.filterManager.mdf || mask.prop.mdf){
              path.setAttribute('d',mask.lastPath);
          }
          if(forceRender || this.filterManager.effectElements[9].p.mdf || this.filterManager.effectElements[4].p.mdf || this.filterManager.effectElements[7].p.mdf || this.filterManager.effectElements[8].p.mdf || mask.prop.mdf){
              var dasharrayValue;
              if(this.filterManager.effectElements[7].p.v !== 0 || this.filterManager.effectElements[8].p.v !== 100){
                  var s = Math.min(this.filterManager.effectElements[7].p.v,this.filterManager.effectElements[8].p.v)/100;
                  var e = Math.max(this.filterManager.effectElements[7].p.v,this.filterManager.effectElements[8].p.v)/100;
                  var l = path.getTotalLength();
                  dasharrayValue = '0 0 0 ' + l*s + ' ';
                  var lineLength = l*(e-s);
                  var segment = 1+this.filterManager.effectElements[4].p.v*2*this.filterManager.effectElements[9].p.v/100;
                  var units = Math.floor(lineLength/segment);
                  var j;
                  for(j=0;j<units;j+=1){
                      dasharrayValue += '1 ' + this.filterManager.effectElements[4].p.v*2*this.filterManager.effectElements[9].p.v/100 + ' ';
                  }
                  dasharrayValue += '0 ' + l*10 + ' 0 0';
              } else {
                  dasharrayValue = '1 ' + this.filterManager.effectElements[4].p.v*2*this.filterManager.effectElements[9].p.v/100;
              }
              path.setAttribute('stroke-dasharray',dasharrayValue);
          }
      }
      if(forceRender || this.filterManager.effectElements[4].p.mdf){
          this.pathMasker.setAttribute('stroke-width',this.filterManager.effectElements[4].p.v*2);
      }
      
      if(forceRender || this.filterManager.effectElements[6].p.mdf){
          this.pathMasker.setAttribute('opacity',this.filterManager.effectElements[6].p.v);
      }
      if(this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2){
          if(forceRender || this.filterManager.effectElements[3].p.mdf){
              var color = this.filterManager.effectElements[3].p.v;
              this.pathMasker.setAttribute('stroke','rgb('+bm_floor(color[0]*255)+','+bm_floor(color[1]*255)+','+bm_floor(color[2]*255)+')');
          }
      }
  };
  function SVGTritoneFilter(filter, filterManager){
      this.filterManager = filterManager;
      var feColorMatrix = document.createElementNS(svgNS,'feColorMatrix');
      feColorMatrix.setAttribute('type','matrix');
      feColorMatrix.setAttribute('color-interpolation-filters','linearRGB');
      feColorMatrix.setAttribute('values','0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0');
      feColorMatrix.setAttribute('result','f1');
      filter.appendChild(feColorMatrix);
      var feComponentTransfer = document.createElementNS(svgNS,'feComponentTransfer');
      feComponentTransfer.setAttribute('color-interpolation-filters','sRGB');
      filter.appendChild(feComponentTransfer);
      this.matrixFilter = feComponentTransfer;
      var feFuncR = document.createElementNS(svgNS,'feFuncR');
      feFuncR.setAttribute('type','table');
      feComponentTransfer.appendChild(feFuncR);
      this.feFuncR = feFuncR;
      var feFuncG = document.createElementNS(svgNS,'feFuncG');
      feFuncG.setAttribute('type','table');
      feComponentTransfer.appendChild(feFuncG);
      this.feFuncG = feFuncG;
      var feFuncB = document.createElementNS(svgNS,'feFuncB');
      feFuncB.setAttribute('type','table');
      feComponentTransfer.appendChild(feFuncB);
      this.feFuncB = feFuncB;
  }
  
  SVGTritoneFilter.prototype.renderFrame = function(forceRender){
      if(forceRender || this.filterManager.mdf){
          var color1 = this.filterManager.effectElements[0].p.v;
          var color2 = this.filterManager.effectElements[1].p.v;
          var color3 = this.filterManager.effectElements[2].p.v;
          var tableR = color3[0] + ' ' + color2[0] + ' ' + color1[0]
          var tableG = color3[1] + ' ' + color2[1] + ' ' + color1[1]
          var tableB = color3[2] + ' ' + color2[2] + ' ' + color1[2]
          this.feFuncR.setAttribute('tableValues', tableR);
          this.feFuncG.setAttribute('tableValues', tableG);
          this.feFuncB.setAttribute('tableValues', tableB);
          //var opacity = this.filterManager.effectElements[2].p.v/100;
          //this.matrixFilter.setAttribute('values',(colorWhite[0]- colorBlack[0])+' 0 0 0 '+ colorBlack[0] +' '+ (colorWhite[1]- colorBlack[1]) +' 0 0 0 '+ colorBlack[1] +' '+ (colorWhite[2]- colorBlack[2]) +' 0 0 0 '+ colorBlack[2] +' 0 0 0 ' + opacity + ' 0');
      }
  };
  function SVGProLevelsFilter(filter, filterManager){
      this.filterManager = filterManager;
      var effectElements = this.filterManager.effectElements;
      var feComponentTransfer = document.createElementNS(svgNS,'feComponentTransfer');
      var feFuncR, feFuncG, feFuncB;
      
      if(effectElements[9].p.k || effectElements[9].p.v !== 0 || effectElements[10].p.k || effectElements[10].p.v !== 1 || effectElements[11].p.k || effectElements[11].p.v !== 1 || effectElements[12].p.k || effectElements[12].p.v !== 0 || effectElements[13].p.k || effectElements[13].p.v !== 1){
          this.feFuncR = this.createFeFunc('feFuncR', feComponentTransfer);
      }
      if(effectElements[16].p.k || effectElements[16].p.v !== 0 || effectElements[17].p.k || effectElements[17].p.v !== 1 || effectElements[18].p.k || effectElements[18].p.v !== 1 || effectElements[19].p.k || effectElements[19].p.v !== 0 || effectElements[20].p.k || effectElements[20].p.v !== 1){
          this.feFuncG = this.createFeFunc('feFuncG', feComponentTransfer);
      }
      if(effectElements[23].p.k || effectElements[23].p.v !== 0 || effectElements[24].p.k || effectElements[24].p.v !== 1 || effectElements[25].p.k || effectElements[25].p.v !== 1 || effectElements[26].p.k || effectElements[26].p.v !== 0 || effectElements[27].p.k || effectElements[27].p.v !== 1){
          this.feFuncB = this.createFeFunc('feFuncB', feComponentTransfer);
      }
      if(effectElements[30].p.k || effectElements[30].p.v !== 0 || effectElements[31].p.k || effectElements[31].p.v !== 1 || effectElements[32].p.k || effectElements[32].p.v !== 1 || effectElements[33].p.k || effectElements[33].p.v !== 0 || effectElements[34].p.k || effectElements[34].p.v !== 1){
          this.feFuncA = this.createFeFunc('feFuncA', feComponentTransfer);
      }
      
      if(this.feFuncR || this.feFuncG || this.feFuncB || this.feFuncA){
          feComponentTransfer.setAttribute('color-interpolation-filters','sRGB');
          filter.appendChild(feComponentTransfer);
          feComponentTransfer = document.createElementNS(svgNS,'feComponentTransfer');
      }
  
      if(effectElements[2].p.k || effectElements[2].p.v !== 0 || effectElements[3].p.k || effectElements[3].p.v !== 1 || effectElements[4].p.k || effectElements[4].p.v !== 1 || effectElements[5].p.k || effectElements[5].p.v !== 0 || effectElements[6].p.k || effectElements[6].p.v !== 1){
  
          feComponentTransfer.setAttribute('color-interpolation-filters','sRGB');
          filter.appendChild(feComponentTransfer);
          this.feFuncRComposed = this.createFeFunc('feFuncR', feComponentTransfer);
          this.feFuncGComposed = this.createFeFunc('feFuncG', feComponentTransfer);
          this.feFuncBComposed = this.createFeFunc('feFuncB', feComponentTransfer);
      }
  }
  
  SVGProLevelsFilter.prototype.createFeFunc = function(type, feComponentTransfer) {
      var feFunc = document.createElementNS(svgNS,type);
      feFunc.setAttribute('type','table');
      feComponentTransfer.appendChild(feFunc);
      return feFunc;
  };
  
  SVGProLevelsFilter.prototype.getTableValue = function(inputBlack, inputWhite, gamma, outputBlack, outputWhite) {
      var cnt = 0;
      var segments = 256;
      var perc;
      var min = Math.min(inputBlack, inputWhite);
      var max = Math.max(inputBlack, inputWhite);
      var table = Array.call(null,{length:segments});
      var colorValue;
      var pos = 0;
      var outputDelta = outputWhite - outputBlack; 
      var inputDelta = inputWhite - inputBlack; 
      while(cnt <= 256) {
          perc = cnt/256;
          if(perc <= min){
              colorValue = inputDelta < 0 ? outputWhite : outputBlack;
          } else if(perc >= max){
              colorValue = inputDelta < 0 ? outputBlack : outputWhite;
          } else {
              colorValue = (outputBlack + outputDelta * Math.pow((perc - inputBlack) / inputDelta, 1 / gamma));
          }
          table[pos++] = colorValue;
          cnt += 256/(segments-1);
      }
      return table.join(' ');
  };
  
  SVGProLevelsFilter.prototype.renderFrame = function(forceRender){
      if(forceRender || this.filterManager.mdf){
          var val, cnt, perc, bezier;
          var effectElements = this.filterManager.effectElements;
          if(this.feFuncRComposed && (forceRender || effectElements[2].p.mdf || effectElements[3].p.mdf || effectElements[4].p.mdf || effectElements[5].p.mdf || effectElements[6].p.mdf)){
              val = this.getTableValue(effectElements[2].p.v,effectElements[3].p.v,effectElements[4].p.v,effectElements[5].p.v,effectElements[6].p.v);
              this.feFuncRComposed.setAttribute('tableValues',val);
              this.feFuncGComposed.setAttribute('tableValues',val);
              this.feFuncBComposed.setAttribute('tableValues',val);
          }
  
          if(this.feFuncR && (forceRender || effectElements[9].p.mdf || effectElements[10].p.mdf || effectElements[11].p.mdf || effectElements[12].p.mdf || effectElements[13].p.mdf)){
              val = this.getTableValue(effectElements[9].p.v,effectElements[10].p.v,effectElements[11].p.v,effectElements[12].p.v,effectElements[13].p.v);
              this.feFuncR.setAttribute('tableValues',val);
          }
  
          if(this.feFuncG && (forceRender || effectElements[16].p.mdf || effectElements[17].p.mdf || effectElements[18].p.mdf || effectElements[19].p.mdf || effectElements[20].p.mdf)){
              val = this.getTableValue(effectElements[16].p.v,effectElements[17].p.v,effectElements[18].p.v,effectElements[19].p.v,effectElements[20].p.v);
              this.feFuncG.setAttribute('tableValues',val);
          }
  
          if(this.feFuncB && (forceRender || effectElements[23].p.mdf || effectElements[24].p.mdf || effectElements[25].p.mdf || effectElements[26].p.mdf || effectElements[27].p.mdf)){
              val = this.getTableValue(effectElements[23].p.v,effectElements[24].p.v,effectElements[25].p.v,effectElements[26].p.v,effectElements[27].p.v);
              this.feFuncB.setAttribute('tableValues',val);
          }
  
          if(this.feFuncA && (forceRender || effectElements[30].p.mdf || effectElements[31].p.mdf || effectElements[32].p.mdf || effectElements[33].p.mdf || effectElements[34].p.mdf)){
              val = this.getTableValue(effectElements[30].p.v,effectElements[31].p.v,effectElements[32].p.v,effectElements[33].p.v,effectElements[34].p.v);
              this.feFuncA.setAttribute('tableValues',val);
          }
          
      }
  };
  function SVGDropShadowEffect(filter, filterManager){
      /*<feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
    <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
    <feMerge> 
      <feMergeNode/> <!-- this contains the offset blurred image -->
      <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
    </feMerge>*/
    /*<feFlood flood-color="#3D4574" flood-opacity="0.5" result="offsetColor"/>*/
      filter.setAttribute('x','-100%');
      filter.setAttribute('y','-100%');
      filter.setAttribute('width','400%');
      filter.setAttribute('height','400%');
      this.filterManager = filterManager;
  
      var feGaussianBlur = document.createElementNS(svgNS,'feGaussianBlur');
      feGaussianBlur.setAttribute('in','SourceAlpha');
      feGaussianBlur.setAttribute('result','drop_shadow_1');
      feGaussianBlur.setAttribute('stdDeviation','0');
      this.feGaussianBlur = feGaussianBlur;
      filter.appendChild(feGaussianBlur);
  
      var feOffset = document.createElementNS(svgNS,'feOffset');
      feOffset.setAttribute('dx','25');
      feOffset.setAttribute('dy','0');
      feOffset.setAttribute('in','drop_shadow_1');
      feOffset.setAttribute('result','drop_shadow_2');
      this.feOffset = feOffset;
      filter.appendChild(feOffset);
      var feFlood = document.createElementNS(svgNS,'feFlood');
      feFlood.setAttribute('flood-color','#00ff00');
      feFlood.setAttribute('flood-opacity','1');
      feFlood.setAttribute('result','drop_shadow_3');
      this.feFlood = feFlood;
      filter.appendChild(feFlood);
  
      var feComposite = document.createElementNS(svgNS,'feComposite');
      feComposite.setAttribute('in','drop_shadow_3');
      feComposite.setAttribute('in2','drop_shadow_2');
      feComposite.setAttribute('operator','in');
      feComposite.setAttribute('result','drop_shadow_4');
      filter.appendChild(feComposite);
  
  
      var feMerge = document.createElementNS(svgNS,'feMerge');
      filter.appendChild(feMerge);
      var feMergeNode;
      feMergeNode = document.createElementNS(svgNS,'feMergeNode');
      feMerge.appendChild(feMergeNode);
      feMergeNode = document.createElementNS(svgNS,'feMergeNode');
      feMergeNode.setAttribute('in','SourceGraphic');
      this.feMergeNode = feMergeNode;
      this.feMerge = feMerge;
      this.originalNodeAdded = false;
      feMerge.appendChild(feMergeNode);
  }
  
  SVGDropShadowEffect.prototype.renderFrame = function(forceRender){
      if(forceRender || this.filterManager.mdf){
          if(forceRender || this.filterManager.effectElements[4].p.mdf){
              this.feGaussianBlur.setAttribute('stdDeviation', this.filterManager.effectElements[4].p.v / 4);
          }
          if(forceRender || this.filterManager.effectElements[0].p.mdf){
              var col = this.filterManager.effectElements[0].p.v;
              this.feFlood.setAttribute('flood-color',rgbToHex(Math.round(col[0]*255),Math.round(col[1]*255),Math.round(col[2]*255)));
          }
          if(forceRender || this.filterManager.effectElements[1].p.mdf){
              this.feFlood.setAttribute('flood-opacity',this.filterManager.effectElements[1].p.v/255);
          }
          if(forceRender || this.filterManager.effectElements[2].p.mdf || this.filterManager.effectElements[3].p.mdf){
              var distance = this.filterManager.effectElements[3].p.v
              var angle = (this.filterManager.effectElements[2].p.v - 90) * degToRads
              var x = distance * Math.cos(angle)
              var y = distance * Math.sin(angle)
              this.feOffset.setAttribute('dx', x);
              this.feOffset.setAttribute('dy', y);
          }
          /*if(forceRender || this.filterManager.effectElements[5].p.mdf){
              if(this.filterManager.effectElements[5].p.v === 1 && this.originalNodeAdded) {
                  this.feMerge.removeChild(this.feMergeNode);
                  this.originalNodeAdded = false;
              } else if(this.filterManager.effectElements[5].p.v === 0 && !this.originalNodeAdded) {
                  this.feMerge.appendChild(this.feMergeNode);
                  this.originalNodeAdded = true;
              }
          }*/
      }
  };
  function SVGEffects(elem){
      var i, len = elem.data.ef.length;
      var filId = randomString(10);
      var fil = filtersFactory.createFilter(filId);
      var count = 0;
      this.filters = [];
      var filterManager;
      for(i=0;i<len;i+=1){
          if(elem.data.ef[i].ty === 20){
              count += 1;
              filterManager = new SVGTintFilter(fil, elem.effects.effectElements[i]);
              this.filters.push(filterManager);
          }else if(elem.data.ef[i].ty === 21){
              count += 1;
              filterManager = new SVGFillFilter(fil, elem.effects.effectElements[i]);
              this.filters.push(filterManager);
          }else if(elem.data.ef[i].ty === 22){
              filterManager = new SVGStrokeEffect(elem, elem.effects.effectElements[i]);
              this.filters.push(filterManager);
          }else if(elem.data.ef[i].ty === 23){
              count += 1;
              filterManager = new SVGTritoneFilter(fil, elem.effects.effectElements[i]);
              this.filters.push(filterManager);
          }else if(elem.data.ef[i].ty === 24){
              count += 1;
              filterManager = new SVGProLevelsFilter(fil, elem.effects.effectElements[i]);
              this.filters.push(filterManager);
          }else if(elem.data.ef[i].ty === 25){
              count += 1;
              filterManager = new SVGDropShadowEffect(fil, elem.effects.effectElements[i]);
              this.filters.push(filterManager);
          }
      }
      if(count){
          elem.globalData.defs.appendChild(fil);
          elem.layerElement.setAttribute('filter','url(#'+filId+')');
      }
  }
  
  SVGEffects.prototype.renderFrame = function(firstFrame){
      var i, len = this.filters.length;
      for(i=0;i<len;i+=1){
          this.filters[i].renderFrame(firstFrame);
      }
  };
  function ICompElement(data,parentContainer,globalData,comp, placeholder){
      this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
      this.layers = data.layers;
      this.supports3d = true;
      this.completeLayers = false;
      this.pendingElements = [];
      this.elements = this.layers ? Array.apply(null,{length:this.layers.length}) : [];
      if(this.data.tm){
          this.tm = PropertyFactory.getProp(this,this.data.tm,0,globalData.frameRate,this.dynamicProperties);
      }
      if(this.data.xt){
          this.layerElement = document.createElementNS(svgNS,'g');
          this.buildAllItems();
      } else if(!globalData.progressiveLoad){
          this.buildAllItems();
      }
  }
  createElement(SVGBaseElement, ICompElement);
  
  ICompElement.prototype.hide = function(){
      if(!this.hidden){
          this._parent.hide.call(this);
          var i,len = this.elements.length;
          for( i = 0; i < len; i+=1 ){
              if(this.elements[i]){
                  this.elements[i].hide();
              }
          }
      }
  };
  
  ICompElement.prototype.prepareFrame = function(num){
      this._parent.prepareFrame.call(this,num);
      if(this.isVisible===false && !this.data.xt){
          return;
      }
  
      if(this.tm){
          var timeRemapped = this.tm.v;
          if(timeRemapped === this.data.op){
              timeRemapped = this.data.op - 1;
          }
          this.renderedFrame = timeRemapped;
      } else {
          this.renderedFrame = num/this.data.sr;
      }
      var i,len = this.elements.length;
      if(!this.completeLayers){
          this.checkLayers(this.renderedFrame);
      }
      for( i = 0; i < len; i+=1 ){
          if(this.completeLayers || this.elements[i]){
              this.elements[i].prepareFrame(this.renderedFrame - this.layers[i].st);
          }
      }
  };
  
  ICompElement.prototype.renderFrame = function(parentMatrix){
      var renderParent = this._parent.renderFrame.call(this,parentMatrix);
      var i,len = this.layers.length;
      if(renderParent===false){
          this.hide();
          return;
      }
  
      if(this.hidden) {
          this.show();
      }
      for( i = 0; i < len; i+=1 ){
          if(this.completeLayers || this.elements[i]){
              this.elements[i].renderFrame();
          }
      }
      if(this.firstFrame){
          this.firstFrame = false;
      }
  };
  
  ICompElement.prototype.setElements = function(elems){
      this.elements = elems;
  };
  
  ICompElement.prototype.getElements = function(){
      return this.elements;
  };
  
  ICompElement.prototype.destroy = function(){
      this._parent.destroy.call(this._parent);
      var i,len = this.layers.length;
      for( i = 0; i < len; i+=1 ){
          if(this.elements[i]){
              this.elements[i].destroy();
          }
      }
  };
  
  ICompElement.prototype.checkLayers = SVGRenderer.prototype.checkLayers;
  ICompElement.prototype.buildItem = SVGRenderer.prototype.buildItem;
  ICompElement.prototype.buildAllItems = SVGRenderer.prototype.buildAllItems;
  ICompElement.prototype.buildElementParenting = SVGRenderer.prototype.buildElementParenting;
  ICompElement.prototype.createItem = SVGRenderer.prototype.createItem;
  ICompElement.prototype.createImage = SVGRenderer.prototype.createImage;
  ICompElement.prototype.createComp = SVGRenderer.prototype.createComp;
  ICompElement.prototype.createSolid = SVGRenderer.prototype.createSolid;
  ICompElement.prototype.createShape = SVGRenderer.prototype.createShape;
  ICompElement.prototype.createText = SVGRenderer.prototype.createText;
  ICompElement.prototype.createBase = SVGRenderer.prototype.createBase;
  ICompElement.prototype.appendElementInPos = SVGRenderer.prototype.appendElementInPos;
  ICompElement.prototype.checkPendingElements = SVGRenderer.prototype.checkPendingElements;
  ICompElement.prototype.addPendingElement = SVGRenderer.prototype.addPendingElement;
  function IImageElement(data,parentContainer,globalData,comp,placeholder){
      this.assetData = globalData.getAssetData(data.refId);
      this._parent.constructor.call(this,data,parentContainer,globalData,comp,placeholder);
  }
  createElement(SVGBaseElement, IImageElement);
  
  IImageElement.prototype.createElements = function(){
  
      var assetPath = this.globalData.getAssetsPath(this.assetData);
  
      this._parent.createElements.call(this);
  
      this.innerElem = document.createElementNS(svgNS,'image');
      this.innerElem.setAttribute('width',this.assetData.w+"px");
      this.innerElem.setAttribute('height',this.assetData.h+"px");
      this.innerElem.setAttribute('preserveAspectRatio','xMidYMid slice');
      this.innerElem.setAttributeNS('http://www.w3.org/1999/xlink','href',assetPath);
      this.maskedElement = this.innerElem;
      this.layerElement.appendChild(this.innerElem);
      if(this.data.ln){
          this.layerElement.setAttribute('id',this.data.ln);
      }
      if(this.data.cl){
          this.layerElement.setAttribute('class',this.data.cl);
      }
  
  };
  
  IImageElement.prototype.renderFrame = function(parentMatrix){
      var renderParent = this._parent.renderFrame.call(this,parentMatrix);
      if(renderParent===false){
          this.hide();
          return;
      }
      if(this.hidden){
          this.show();
      }
      if(this.firstFrame){
          this.firstFrame = false;
      }
  };
  
  IImageElement.prototype.destroy = function(){
      this._parent.destroy.call(this._parent);
      this.innerElem =  null;
  };
  function ISolidElement(data,parentContainer,globalData,comp, placeholder){
      this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
  }
  createElement(SVGBaseElement, ISolidElement);
  
  ISolidElement.prototype.createElements = function(){
      this._parent.createElements.call(this);
  
      var rect = document.createElementNS(svgNS,'rect');
      ////rect.style.width = this.data.sw;
      ////rect.style.height = this.data.sh;
      ////rect.style.fill = this.data.sc;
      rect.setAttribute('width',this.data.sw);
      rect.setAttribute('height',this.data.sh);
      rect.setAttribute('fill',this.data.sc);
      this.layerElement.appendChild(rect);
      this.innerElem = rect;
      if(this.data.ln){
          this.layerElement.setAttribute('id',this.data.ln);
      }
      if(this.data.cl){
          this.layerElement.setAttribute('class',this.data.cl);
      }
  };
  
  ISolidElement.prototype.renderFrame = IImageElement.prototype.renderFrame;
  ISolidElement.prototype.destroy = IImageElement.prototype.destroy;
  
  var animationManager = (function(){
      var moduleOb = {};
      var registeredAnimations = [];
      var initTime = 0;
      var len = 0;
      var idled = true;
      var playingAnimationsNum = 0;
  
      function removeElement(ev){
          var i = 0;
          var animItem = ev.target;
          while(i<len) {
              if (registeredAnimations[i].animation === animItem) {
                  registeredAnimations.splice(i, 1);
                  i -= 1;
                  len -= 1;
                  if(!animItem.isPaused){
                      subtractPlayingCount();   
                  }
              }
              i += 1;
          }
      }
  
      function registerAnimation(element, animationData){
          if(!element){
              return null;
          }
          var i=0;
          while(i<len){
              if(registeredAnimations[i].elem == element && registeredAnimations[i].elem !== null ){
                  return registeredAnimations[i].animation;
              }
              i+=1;
          }
          var animItem = new AnimationItem();
          setupAnimation(animItem, element);
          animItem.setData(element, animationData);
          return animItem;
      }
  
      function addPlayingCount(){
          playingAnimationsNum += 1;
          activate();
      }
  
      function subtractPlayingCount(){
          playingAnimationsNum -= 1;
          if(playingAnimationsNum === 0){
              idled = true;
          }
      }
  
      function setupAnimation(animItem, element){
          animItem.addEventListener('destroy',removeElement);
          animItem.addEventListener('_active',addPlayingCount);
          animItem.addEventListener('_idle',subtractPlayingCount);
          registeredAnimations.push({elem: element,animation:animItem});
          len += 1;
      }
  
      function loadAnimation(params){
          var animItem = new AnimationItem();
          setupAnimation(animItem, null);
          animItem.setParams(params);
          return animItem;
      }
  
  
      function setSpeed(val,animation){
          var i;
          for(i=0;i<len;i+=1){
              registeredAnimations[i].animation.setSpeed(val, animation);
          }
      }
  
      function setDirection(val, animation){
          var i;
          for(i=0;i<len;i+=1){
              registeredAnimations[i].animation.setDirection(val, animation);
          }
      }
  
      function play(animation){
          var i;
          for(i=0;i<len;i+=1){
              registeredAnimations[i].animation.play(animation);
          }
      }
  
      function moveFrame (value, animation) {
          initTime = Date.now();
          var i;
          for(i=0;i<len;i+=1){
              registeredAnimations[i].animation.moveFrame(value,animation);
          }
      }
  
      function resume(nowTime) {
  
          var elapsedTime = nowTime - initTime;
          var i;
          for(i=0;i<len;i+=1){
              registeredAnimations[i].animation.advanceTime(elapsedTime);
          }
          initTime = nowTime;
          if(!idled) {
              requestAnimationFrame(resume);
          }
      }
  
      function first(nowTime){
          initTime = nowTime;
          requestAnimationFrame(resume);
      }
  
      function pause(animation) {
          var i;
          for(i=0;i<len;i+=1){
              registeredAnimations[i].animation.pause(animation);
          }
      }
  
      function goToAndStop(value,isFrame,animation) {
          var i;
          for(i=0;i<len;i+=1){
              registeredAnimations[i].animation.goToAndStop(value,isFrame,animation);
          }
      }
  
      function stop(animation) {
          var i;
          for(i=0;i<len;i+=1){
              registeredAnimations[i].animation.stop(animation);
          }
      }
  
      function togglePause(animation) {
          var i;
          for(i=0;i<len;i+=1){
              registeredAnimations[i].animation.togglePause(animation);
          }
      }
  
      function destroy(animation) {
          var i;
          for(i=(len-1);i>=0;i-=1){
              registeredAnimations[i].animation.destroy(animation);
          }
      }
  
      function searchAnimations(animationData, standalone, renderer){
          var animElements = document.getElementsByClassName('bodymovin');
          var i, len = animElements.length;
          for(i=0;i<len;i+=1){
              if(renderer){
                  animElements[i].setAttribute('data-bm-type',renderer);
              }
              registerAnimation(animElements[i], animationData);
          }
          if(standalone && len === 0){
              if(!renderer){
                  renderer = 'svg';
              }
              var body = document.getElementsByTagName('body')[0];
              body.innerHTML = '';
              var div = document.createElement('div');
              div.style.width = '100%';
              div.style.height = '100%';
              div.setAttribute('data-bm-type',renderer);
              body.appendChild(div);
              registerAnimation(div, animationData);
          }
      }
  
      function resize(){
          var i;
          for(i=0;i<len;i+=1){
              registeredAnimations[i].animation.resize();
          }
      }
  
      function start(){
          requestAnimationFrame(first);
      }
  
      function activate(){
          if(idled){
              idled = false;
              requestAnimationFrame(first);
          }
      }
  
      //start();
  
      setTimeout(start,0);
  
      moduleOb.registerAnimation = registerAnimation;
      moduleOb.loadAnimation = loadAnimation;
      moduleOb.setSpeed = setSpeed;
      moduleOb.setDirection = setDirection;
      moduleOb.play = play;
      moduleOb.moveFrame = moveFrame;
      moduleOb.pause = pause;
      moduleOb.stop = stop;
      moduleOb.togglePause = togglePause;
      moduleOb.searchAnimations = searchAnimations;
      moduleOb.resize = resize;
      moduleOb.start = start;
      moduleOb.goToAndStop = goToAndStop;
      moduleOb.destroy = destroy;
      return moduleOb;
  }());
  var AnimationItem = function () {
      this._cbs = [];
      this.name = '';
      this.path = '';
      this.isLoaded = false;
      this.currentFrame = 0;
      this.currentRawFrame = 0;
      this.totalFrames = 0;
      this.frameRate = 0;
      this.frameMult = 0;
      this.playSpeed = 1;
      this.playDirection = 1;
      this.pendingElements = 0;
      this.playCount = 0;
      this.prerenderFramesFlag = true;
      this.animationData = {};
      this.layers = [];
      this.assets = [];
      this.isPaused = true;
      this.autoplay = false;
      this.loop = true;
      this.renderer = null;
      this.animationID = randomString(10);
      this.scaleMode = 'fit';
      this.assetsPath = '';
      this.timeCompleted = 0;
      this.segmentPos = 0;
      this.subframeEnabled = subframeEnabled;
      this.segments = [];
      this.pendingSegment = false;
      this._idle = true;
      this.projectInterface = ProjectInterface();
  };
  
  AnimationItem.prototype.setParams = function(params) {
      var self = this;
      if(params.context){
          this.context = params.context;
      }
      if(params.wrapper || params.container){
          this.wrapper = params.wrapper || params.container;
      }
      var animType = params.animType ? params.animType : params.renderer ? params.renderer : 'svg';
      switch(animType){
          case 'canvas':
              this.renderer = new CanvasRenderer(this, params.rendererSettings);
              break;
          case 'svg':
              this.renderer = new SVGRenderer(this, params.rendererSettings);
              break;
          case 'hybrid':
          case 'html':
          default:
              this.renderer = new HybridRenderer(this, params.rendererSettings);
              break;
      }
      this.renderer.setProjectInterface(this.projectInterface);
      this.animType = animType;
  
      if(params.loop === '' || params.loop === null){
      }else if(params.loop === false){
          this.loop = false;
      }else if(params.loop === true){
          this.loop = true;
      }else{
          this.loop = parseInt(params.loop);
      }
      this.autoplay = 'autoplay' in params ? params.autoplay : true;
      this.name = params.name ? params.name :  '';
      this.prerenderFramesFlag = 'prerender' in params ? params.prerender : true;
      this.autoloadSegments = params.hasOwnProperty('autoloadSegments') ? params.autoloadSegments :  true;
      if(params.animationData){
          self.configAnimation(params.animationData);
      }else if(params.path){
          if(params.path.substr(-4) != 'json'){
              if (params.path.substr(-1, 1) != '/') {
                  params.path += '/';
              }
              params.path += 'data.json';
          }
  
          var xhr = new XMLHttpRequest();
          if(params.path.lastIndexOf('\\') != -1){
              this.path = params.path.substr(0,params.path.lastIndexOf('\\')+1);
          }else{
              this.path = params.path.substr(0,params.path.lastIndexOf('/')+1);
          }
          this.assetsPath = params.assetsPath;
          this.fileName = params.path.substr(params.path.lastIndexOf('/')+1);
          this.fileName = this.fileName.substr(0,this.fileName.lastIndexOf('.json'));
          xhr.open('GET', params.path, true);
          xhr.send();
          xhr.onreadystatechange = function () {
              if (xhr.readyState == 4) {
                  if(xhr.status == 200){
                      self.configAnimation(JSON.parse(xhr.responseText));
                  }else{
                      try{
                          var response = JSON.parse(xhr.responseText);
                          self.configAnimation(response);
                      }catch(err){
                      }
                  }
              }
          };
      }
  };
  
  AnimationItem.prototype.setData = function (wrapper, animationData) {
      var params = {
          wrapper: wrapper,
          animationData: animationData ? (typeof animationData  === "object") ? animationData : JSON.parse(animationData) : null
      };
      var wrapperAttributes = wrapper.attributes;
  
      params.path = wrapperAttributes.getNamedItem('data-animation-path') ? wrapperAttributes.getNamedItem('data-animation-path').value : wrapperAttributes.getNamedItem('data-bm-path') ? wrapperAttributes.getNamedItem('data-bm-path').value :  wrapperAttributes.getNamedItem('bm-path') ? wrapperAttributes.getNamedItem('bm-path').value : '';
      params.animType = wrapperAttributes.getNamedItem('data-anim-type') ? wrapperAttributes.getNamedItem('data-anim-type').value : wrapperAttributes.getNamedItem('data-bm-type') ? wrapperAttributes.getNamedItem('data-bm-type').value : wrapperAttributes.getNamedItem('bm-type') ? wrapperAttributes.getNamedItem('bm-type').value :  wrapperAttributes.getNamedItem('data-bm-renderer') ? wrapperAttributes.getNamedItem('data-bm-renderer').value : wrapperAttributes.getNamedItem('bm-renderer') ? wrapperAttributes.getNamedItem('bm-renderer').value : 'canvas';
  
      var loop = wrapperAttributes.getNamedItem('data-anim-loop') ? wrapperAttributes.getNamedItem('data-anim-loop').value :  wrapperAttributes.getNamedItem('data-bm-loop') ? wrapperAttributes.getNamedItem('data-bm-loop').value :  wrapperAttributes.getNamedItem('bm-loop') ? wrapperAttributes.getNamedItem('bm-loop').value : '';
      if(loop === ''){
      }else if(loop === 'false'){
          params.loop = false;
      }else if(loop === 'true'){
          params.loop = true;
      }else{
          params.loop = parseInt(loop);
      }
      var autoplay = wrapperAttributes.getNamedItem('data-anim-autoplay') ? wrapperAttributes.getNamedItem('data-anim-autoplay').value :  wrapperAttributes.getNamedItem('data-bm-autoplay') ? wrapperAttributes.getNamedItem('data-bm-autoplay').value :  wrapperAttributes.getNamedItem('bm-autoplay') ? wrapperAttributes.getNamedItem('bm-autoplay').value : true;
      params.autoplay = autoplay !== "false";
  
      params.name = wrapperAttributes.getNamedItem('data-name') ? wrapperAttributes.getNamedItem('data-name').value :  wrapperAttributes.getNamedItem('data-bm-name') ? wrapperAttributes.getNamedItem('data-bm-name').value : wrapperAttributes.getNamedItem('bm-name') ? wrapperAttributes.getNamedItem('bm-name').value :  '';
      var prerender = wrapperAttributes.getNamedItem('data-anim-prerender') ? wrapperAttributes.getNamedItem('data-anim-prerender').value :  wrapperAttributes.getNamedItem('data-bm-prerender') ? wrapperAttributes.getNamedItem('data-bm-prerender').value :  wrapperAttributes.getNamedItem('bm-prerender') ? wrapperAttributes.getNamedItem('bm-prerender').value : '';
  
      if(prerender === 'false'){
          params.prerender = false;
      }
      this.setParams(params);
  };
  
  AnimationItem.prototype.includeLayers = function(data) {
      if(data.op > this.animationData.op){
          this.animationData.op = data.op;
          this.totalFrames = Math.floor(data.op - this.animationData.ip);
          this.animationData.tf = this.totalFrames;
      }
      var layers = this.animationData.layers;
      var i, len = layers.length;
      var newLayers = data.layers;
      var j, jLen = newLayers.length;
      for(j=0;j<jLen;j+=1){
          i = 0;
          while(i<len){
              if(layers[i].id == newLayers[j].id){
                  layers[i] = newLayers[j];
                  break;
              }
              i += 1;
          }
      }
      if(data.chars || data.fonts){
          this.renderer.globalData.fontManager.addChars(data.chars);
          this.renderer.globalData.fontManager.addFonts(data.fonts, this.renderer.globalData.defs);
      }
      if(data.assets){
          len = data.assets.length;
          for(i = 0; i < len; i += 1){
              this.animationData.assets.push(data.assets[i]);
          }
      }
      //this.totalFrames = 50;
      //this.animationData.tf = 50;
      this.animationData.__complete = false;
      dataManager.completeData(this.animationData,this.renderer.globalData.fontManager);
      this.renderer.includeLayers(data.layers);
      if(expressionsPlugin){
          expressionsPlugin.initExpressions(this);
      }
      this.renderer.renderFrame(null);
      this.loadNextSegment();
  };
  
  AnimationItem.prototype.loadNextSegment = function() {
      var segments = this.animationData.segments;
      if(!segments || segments.length === 0 || !this.autoloadSegments){
          this.trigger('data_ready');
          this.timeCompleted = this.animationData.tf;
          return;
      }
      var segment = segments.shift();
      this.timeCompleted = segment.time * this.frameRate;
      var xhr = new XMLHttpRequest();
      var self = this;
      var segmentPath = this.path+this.fileName+'_' + this.segmentPos + '.json';
      this.segmentPos += 1;
      xhr.open('GET', segmentPath, true);
      xhr.send();
      xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
              if(xhr.status == 200){
                  self.includeLayers(JSON.parse(xhr.responseText));
              }else{
                  try{
                      var response = JSON.parse(xhr.responseText);
                      self.includeLayers(response);
                  }catch(err){
                  }
              }
          }
      };
  };
  
  AnimationItem.prototype.loadSegments = function() {
      var segments = this.animationData.segments;
      if(!segments) {
          this.timeCompleted = this.animationData.tf;
      }
      this.loadNextSegment();
  };
  
  AnimationItem.prototype.configAnimation = function (animData) {
      if(this.renderer && this.renderer.destroyed){
          return;
      }
      //console.log(JSON.parse(JSON.stringify(animData)));
      //animData.w = Math.round(animData.w/blitter);
      //animData.h = Math.round(animData.h/blitter);
      this.animationData = animData;
      this.totalFrames = Math.floor(this.animationData.op - this.animationData.ip);
      this.animationData.tf = this.totalFrames;
      this.renderer.configAnimation(animData);
      if(!animData.assets){
          animData.assets = [];
      }
      if(animData.comps) {
          animData.assets = animData.assets.concat(animData.comps);
          animData.comps = null;
      }
      this.renderer.searchExtraCompositions(animData.assets);
  
      this.layers = this.animationData.layers;
      this.assets = this.animationData.assets;
      this.frameRate = this.animationData.fr;
      this.firstFrame = Math.round(this.animationData.ip);
      this.frameMult = this.animationData.fr / 1000;
      this.trigger('config_ready');
      this.imagePreloader = new ImagePreloader();
      this.imagePreloader.setAssetsPath(this.assetsPath);
      this.imagePreloader.setPath(this.path);
      this.imagePreloader.loadAssets(animData.assets);
      this.loadSegments();
      this.updaFrameModifier();
      if(this.renderer.globalData.fontManager){
          this.waitForFontsLoaded();
      }else{
          dataManager.completeData(this.animationData,this.renderer.globalData.fontManager);
          this.checkLoaded();
      }
  };
  
  AnimationItem.prototype.waitForFontsLoaded = (function(){
      function checkFontsLoaded(){
          if(this.renderer.globalData.fontManager.loaded){
              dataManager.completeData(this.animationData,this.renderer.globalData.fontManager);
              //this.renderer.buildItems(this.animationData.layers);
              this.checkLoaded();
          }else{
              setTimeout(checkFontsLoaded.bind(this),20);
          }
      }
  
      return function(){
          checkFontsLoaded.bind(this)();
      }
  }());
  
  AnimationItem.prototype.addPendingElement = function () {
      this.pendingElements += 1;
  }
  
  AnimationItem.prototype.elementLoaded = function () {
      this.pendingElements--;
      this.checkLoaded();
  };
  
  AnimationItem.prototype.checkLoaded = function () {
      if (this.pendingElements === 0) {
          if(expressionsPlugin){
              expressionsPlugin.initExpressions(this);
          }
          this.renderer.initItems();
          setTimeout(function(){
              this.trigger('DOMLoaded');
          }.bind(this),0);
          this.isLoaded = true;
          this.gotoFrame();
          if(this.autoplay){
              this.play();
          }
      }
  };
  
  AnimationItem.prototype.resize = function () {
      this.renderer.updateContainerSize();
  };
  
  AnimationItem.prototype.setSubframe = function(flag){
      this.subframeEnabled = flag ? true : false;
  }
  
  AnimationItem.prototype.gotoFrame = function () {
      if(this.subframeEnabled){
          this.currentFrame = this.currentRawFrame;
      }else{
          this.currentFrame = Math.floor(this.currentRawFrame);
      }
  
      if(this.timeCompleted !== this.totalFrames && this.currentFrame > this.timeCompleted){
          this.currentFrame = this.timeCompleted;
      }
      this.trigger('enterFrame');
      this.renderFrame();
  };
  
  AnimationItem.prototype.renderFrame = function () {
      if(this.isLoaded === false){
          return;
      }
      //console.log('this.currentFrame:',this.currentFrame + this.firstFrame);
      this.renderer.renderFrame(this.currentFrame + this.firstFrame);
  };
  
  AnimationItem.prototype.play = function (name) {
      if(name && this.name != name){
          return;
      }
      if(this.isPaused === true){
          this.isPaused = false;
          if(this._idle){
              this._idle = false;
              this.trigger('_active');
          }
      }
  };
  
  AnimationItem.prototype.pause = function (name) {
      if(name && this.name != name){
          return;
      }
      if(this.isPaused === false){
          this.isPaused = true;
          if(!this.pendingSegment){
              this._idle = true;
              this.trigger('_idle');
          }
      }
  };
  
  AnimationItem.prototype.togglePause = function (name) {
      if(name && this.name != name){
          return;
      }
      if(this.isPaused === true){
          this.play();
      }else{
          this.pause();
      }
  };
  
  AnimationItem.prototype.stop = function (name) {
      if(name && this.name != name){
          return;
      }
      this.pause();
      this.currentFrame = this.currentRawFrame = 0;
      this.playCount = 0;
      this.gotoFrame();
  };
  
  AnimationItem.prototype.goToAndStop = function (value, isFrame, name) {
      if(name && this.name != name){
          return;
      }
      if(isFrame){
          this.setCurrentRawFrameValue(value);
      }else{
          this.setCurrentRawFrameValue(value * this.frameModifier);
      }
      this.pause();
  };
  
  AnimationItem.prototype.goToAndPlay = function (value, isFrame, name) {
      this.goToAndStop(value, isFrame, name);
      this.play();
  };
  
  AnimationItem.prototype.advanceTime = function (value) {
      if(this.pendingSegment){
          this.pendingSegment = false;
          this.adjustSegment(this.segments.shift());
          if(this.isPaused){
              this.play();
          }
          return;
      }
      if (this.isPaused === true || this.isLoaded === false) {
          return;
      }
      this.setCurrentRawFrameValue(this.currentRawFrame + value * this.frameModifier);
  };
  
  AnimationItem.prototype.updateAnimation = function (perc) {
      this.setCurrentRawFrameValue(this.totalFrames * perc);
  };
  
  AnimationItem.prototype.moveFrame = function (value, name) {
      if(name && this.name != name){
          return;
      }
      this.setCurrentRawFrameValue(this.currentRawFrame+value);
  };
  
  AnimationItem.prototype.adjustSegment = function(arr){
      this.playCount = 0;
      if(arr[1] < arr[0]){
          if(this.frameModifier > 0){
              if(this.playSpeed < 0){
                  this.setSpeed(-this.playSpeed);
              } else {
                  this.setDirection(-1);
              }
          }
          this.totalFrames = arr[0] - arr[1];
          this.firstFrame = arr[1];
          this.setCurrentRawFrameValue(this.totalFrames - 0.01);
      } else if(arr[1] > arr[0]){
          if(this.frameModifier < 0){
              if(this.playSpeed < 0){
                  this.setSpeed(-this.playSpeed);
              } else {
                  this.setDirection(1);
              }
          }
          this.totalFrames = arr[1] - arr[0];
          this.firstFrame = arr[0];
          this.setCurrentRawFrameValue(0);
      }
      this.trigger('segmentStart');
  };
  AnimationItem.prototype.setSegment = function (init,end) {
      var pendingFrame = -1;
      if(this.isPaused) {
          if (this.currentRawFrame + this.firstFrame < init) {
              pendingFrame = init;
          } else if (this.currentRawFrame + this.firstFrame > end) {
              pendingFrame = end - init - 0.01;
          }
      }
  
      this.firstFrame = init;
      this.totalFrames = end - init;
      if(pendingFrame !== -1) {
          this.goToAndStop(pendingFrame,true);
      }
  }
  
  AnimationItem.prototype.playSegments = function (arr,forceFlag) {
      if(typeof arr[0] === 'object'){
          var i, len = arr.length;
          for(i=0;i<len;i+=1){
              this.segments.push(arr[i]);
          }
      }else{
          this.segments.push(arr);
      }
      if(forceFlag){
          this.adjustSegment(this.segments.shift());
      }
      if(this.isPaused){
          this.play();
      }
  };
  
  AnimationItem.prototype.resetSegments = function (forceFlag) {
      this.segments.length = 0;
      this.segments.push([this.animationData.ip*this.frameRate,Math.floor(this.animationData.op - this.animationData.ip+this.animationData.ip*this.frameRate)]);
      if(forceFlag){
          this.adjustSegment(this.segments.shift());
      }
  };
  AnimationItem.prototype.checkSegments = function(){
      if(this.segments.length){
          this.pendingSegment = true;
      }
  }
  
  AnimationItem.prototype.remove = function (name) {
      if(name && this.name != name){
          return;
      }
      this.renderer.destroy();
  };
  
  AnimationItem.prototype.destroy = function (name) {
      if((name && this.name != name) || (this.renderer && this.renderer.destroyed)){
          return;
      }
      this.renderer.destroy();
      this.trigger('destroy');
      this._cbs = null;
      this.onEnterFrame = this.onLoopComplete = this.onComplete = this.onSegmentStart = this.onDestroy = null;
  };
  
  AnimationItem.prototype.setCurrentRawFrameValue = function(value){
      this.currentRawFrame = value;
      //console.log(this.totalFrames);
      if (this.currentRawFrame >= this.totalFrames) {
          this.checkSegments();
          if(this.loop === false){
              this.currentRawFrame = this.totalFrames - 0.01;
              this.gotoFrame();
              this.pause();
              this.trigger('complete');
              return;
          }else{
              this.trigger('loopComplete');
              this.playCount += 1;
              if((this.loop !== true && this.playCount == this.loop) || this.pendingSegment){
                  this.currentRawFrame = this.totalFrames - 0.01;
                  this.gotoFrame();
                  this.pause();
                  this.trigger('complete');
                  return;
              } else {
                  this.currentRawFrame = this.currentRawFrame % this.totalFrames;
              }
          }
      } else if (this.currentRawFrame < 0) {
          this.checkSegments();
          this.playCount -= 1;
          if(this.playCount < 0){
              this.playCount = 0;
          }
          if(this.loop === false  || this.pendingSegment){
              this.currentRawFrame = 0;
              this.gotoFrame();
              this.pause();
              this.trigger('complete');
              return;
          }else{
              this.trigger('loopComplete');
              this.currentRawFrame = (this.totalFrames + this.currentRawFrame) % this.totalFrames;
              this.gotoFrame();
              return;
          }
      }
  
      this.gotoFrame();
  };
  
  AnimationItem.prototype.setSpeed = function (val) {
      this.playSpeed = val;
      this.updaFrameModifier();
  };
  
  AnimationItem.prototype.setDirection = function (val) {
      this.playDirection = val < 0 ? -1 : 1;
      this.updaFrameModifier();
  };
  
  AnimationItem.prototype.updaFrameModifier = function () {
      this.frameModifier = this.frameMult * this.playSpeed * this.playDirection;
  };
  
  AnimationItem.prototype.getPath = function () {
      return this.path;
  };
  
  AnimationItem.prototype.getAssetsPath = function (assetData) {
      var path = '';
      if(this.assetsPath){
          var imagePath = assetData.p;
          if(imagePath.indexOf('images/') !== -1){
              imagePath = imagePath.split('/')[1];
          }
          path = this.assetsPath + imagePath;
      } else {
          path = this.path;
          path += assetData.u ? assetData.u : '';
          path += assetData.p;
      }
      return path;
  };
  
  AnimationItem.prototype.getAssetData = function (id) {
      var i = 0, len = this.assets.length;
      while (i < len) {
          if(id == this.assets[i].id){
              return this.assets[i];
          }
          i += 1;
      }
  };
  
  AnimationItem.prototype.hide = function () {
      this.renderer.hide();
  };
  
  AnimationItem.prototype.show = function () {
      this.renderer.show();
  };
  
  AnimationItem.prototype.getAssets = function () {
      return this.assets;
  };
  
  AnimationItem.prototype.trigger = function(name){
      if(this._cbs && this._cbs[name]){
          switch(name){
              case 'enterFrame':
                  this.triggerEvent(name,new BMEnterFrameEvent(name,this.currentFrame,this.totalFrames,this.frameMult));
                  break;
              case 'loopComplete':
                  this.triggerEvent(name,new BMCompleteLoopEvent(name,this.loop,this.playCount,this.frameMult));
                  break;
              case 'complete':
                  this.triggerEvent(name,new BMCompleteEvent(name,this.frameMult));
                  break;
              case 'segmentStart':
                  this.triggerEvent(name,new BMSegmentStartEvent(name,this.firstFrame,this.totalFrames));
                  break;
              case 'destroy':
                  this.triggerEvent(name,new BMDestroyEvent(name,this));
                  break;
              default:
                  this.triggerEvent(name);
          }
      }
      if(name === 'enterFrame' && this.onEnterFrame){
          this.onEnterFrame.call(this,new BMEnterFrameEvent(name,this.currentFrame,this.totalFrames,this.frameMult));
      }
      if(name === 'loopComplete' && this.onLoopComplete){
          this.onLoopComplete.call(this,new BMCompleteLoopEvent(name,this.loop,this.playCount,this.frameMult));
      }
      if(name === 'complete' && this.onComplete){
          this.onComplete.call(this,new BMCompleteEvent(name,this.frameMult));
      }
      if(name === 'segmentStart' && this.onSegmentStart){
          this.onSegmentStart.call(this,new BMSegmentStartEvent(name,this.firstFrame,this.totalFrames));
      }
      if(name === 'destroy' && this.onDestroy){
          this.onDestroy.call(this,new BMDestroyEvent(name,this));
      }
  };
  
  AnimationItem.prototype.addEventListener = _addEventListener;
  AnimationItem.prototype.removeEventListener = _removeEventListener;
  AnimationItem.prototype.triggerEvent = _triggerEvent;
  
  function CanvasRenderer(animationItem, config){
      this.animationItem = animationItem;
      this.renderConfig = {
          clearCanvas: (config && config.clearCanvas !== undefined) ? config.clearCanvas : true,
          context: (config && config.context) || null,
          progressiveLoad: (config && config.progressiveLoad) || false,
          preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet'
      };
      this.renderConfig.dpr = (config && config.dpr) || 1;
      if (this.animationItem.wrapper) {
          this.renderConfig.dpr = (config && config.dpr) || window.devicePixelRatio || 1;
      }
      this.renderedFrame = -1;
      this.globalData = {
          frameNum: -1
      };
      this.contextData = {
          saved : Array.apply(null,{length:15}),
          savedOp: Array.apply(null,{length:15}),
          cArrPos : 0,
          cTr : new Matrix(),
          cO : 1
      };
      var i, len = 15;
      for(i=0;i<len;i+=1){
          this.contextData.saved[i] = Array.apply(null,{length:16});
      }
      this.elements = [];
      this.pendingElements = [];
      this.transformMat = new Matrix();
      this.completeLayers = false;
  }
  extendPrototype(BaseRenderer,CanvasRenderer);
  
  CanvasRenderer.prototype.createBase = function (data) {
      return new CVBaseElement(data, this, this.globalData);
  };
  
  CanvasRenderer.prototype.createShape = function (data) {
      return new CVShapeElement(data, this, this.globalData);
  };
  
  CanvasRenderer.prototype.createText = function (data) {
      return new CVTextElement(data, this, this.globalData);
  };
  
  CanvasRenderer.prototype.createImage = function (data) {
      return new CVImageElement(data, this, this.globalData);
  };
  
  CanvasRenderer.prototype.createComp = function (data) {
      return new CVCompElement(data, this, this.globalData);
  };
  
  CanvasRenderer.prototype.createSolid = function (data) {
      return new CVSolidElement(data, this, this.globalData);
  };
  
  CanvasRenderer.prototype.ctxTransform = function(props){
      if(props[0] === 1 && props[1] === 0 && props[4] === 0 && props[5] === 1 && props[12] === 0 && props[13] === 0){
          return;
      }
      if(!this.renderConfig.clearCanvas){
          this.canvasContext.transform(props[0],props[1],props[4],props[5],props[12],props[13]);
          return;
      }
      this.transformMat.cloneFromProps(props);
      this.transformMat.transform(this.contextData.cTr.props[0],this.contextData.cTr.props[1],this.contextData.cTr.props[2],this.contextData.cTr.props[3],this.contextData.cTr.props[4],this.contextData.cTr.props[5],this.contextData.cTr.props[6],this.contextData.cTr.props[7],this.contextData.cTr.props[8],this.contextData.cTr.props[9],this.contextData.cTr.props[10],this.contextData.cTr.props[11],this.contextData.cTr.props[12],this.contextData.cTr.props[13],this.contextData.cTr.props[14],this.contextData.cTr.props[15])
      //this.contextData.cTr.transform(props[0],props[1],props[2],props[3],props[4],props[5],props[6],props[7],props[8],props[9],props[10],props[11],props[12],props[13],props[14],props[15]);
      this.contextData.cTr.cloneFromProps(this.transformMat.props);
      var trProps = this.contextData.cTr.props;
      this.canvasContext.setTransform(trProps[0],trProps[1],trProps[4],trProps[5],trProps[12],trProps[13]);
  };
  
  CanvasRenderer.prototype.ctxOpacity = function(op){
      if(op === 1){
          return;
      }
      if(!this.renderConfig.clearCanvas){
          this.canvasContext.globalAlpha *= op < 0 ? 0 : op;
          return;
      }
      this.contextData.cO *= op < 0 ? 0 : op;
      this.canvasContext.globalAlpha = this.contextData.cO;
  };
  
  CanvasRenderer.prototype.reset = function(){
      if(!this.renderConfig.clearCanvas){
          this.canvasContext.restore();
          return;
      }
      this.contextData.cArrPos = 0;
      this.contextData.cTr.reset();
      this.contextData.cO = 1;
  };
  
  CanvasRenderer.prototype.save = function(actionFlag){
      if(!this.renderConfig.clearCanvas){
          this.canvasContext.save();
          return;
      }
      if(actionFlag){
          this.canvasContext.save();
      }
      var props = this.contextData.cTr.props;
      if(this.contextData.saved[this.contextData.cArrPos] === null || this.contextData.saved[this.contextData.cArrPos] === undefined){
          this.contextData.saved[this.contextData.cArrPos] = new Array(16);
      }
      var i,arr = this.contextData.saved[this.contextData.cArrPos];
      for(i=0;i<16;i+=1){
          arr[i] = props[i];
      }
      this.contextData.savedOp[this.contextData.cArrPos] = this.contextData.cO;
      this.contextData.cArrPos += 1;
  };
  
  CanvasRenderer.prototype.restore = function(actionFlag){
      if(!this.renderConfig.clearCanvas){
          this.canvasContext.restore();
          return;
      }
      if(actionFlag){
          this.canvasContext.restore();
      }
      this.contextData.cArrPos -= 1;
      var popped = this.contextData.saved[this.contextData.cArrPos];
      var i,arr = this.contextData.cTr.props;
      for(i=0;i<16;i+=1){
          arr[i] = popped[i];
      }
      this.canvasContext.setTransform(popped[0],popped[1],popped[4],popped[5],popped[12],popped[13]);
      popped = this.contextData.savedOp[this.contextData.cArrPos];
      this.contextData.cO = popped;
      this.canvasContext.globalAlpha = popped;
  };
  
  CanvasRenderer.prototype.configAnimation = function(animData){
      if(this.animationItem.wrapper){
          this.animationItem.container = document.createElement('canvas');
          this.animationItem.container.style.width = '100%';
          this.animationItem.container.style.height = '100%';
          //this.animationItem.container.style.transform = 'translate3d(0,0,0)';
          //this.animationItem.container.style.webkitTransform = 'translate3d(0,0,0)';
          this.animationItem.container.style.transformOrigin = this.animationItem.container.style.mozTransformOrigin = this.animationItem.container.style.webkitTransformOrigin = this.animationItem.container.style['-webkit-transform'] = "0px 0px 0px";
          this.animationItem.wrapper.appendChild(this.animationItem.container);
          this.canvasContext = this.animationItem.container.getContext('2d');
      }else{
          this.canvasContext = this.renderConfig.context;
      }
      this.data = animData;
      this.globalData.canvasContext = this.canvasContext;
      this.globalData.renderer = this;
      this.globalData.isDashed = false;
      this.globalData.totalFrames = Math.floor(animData.tf);
      this.globalData.compWidth = animData.w;
      this.globalData.compHeight = animData.h;
      this.globalData.frameRate = animData.fr;
      this.globalData.frameId = 0;
      this.globalData.compSize = {
          w: animData.w,
          h: animData.h
      };
      this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
      this.layers = animData.layers;
      this.transformCanvas = {};
      this.transformCanvas.w = animData.w;
      this.transformCanvas.h = animData.h;
      this.globalData.fontManager = new FontManager();
      this.globalData.fontManager.addChars(animData.chars);
      this.globalData.fontManager.addFonts(animData.fonts,document.body);
      this.globalData.getAssetData = this.animationItem.getAssetData.bind(this.animationItem);
      this.globalData.getAssetsPath = this.animationItem.getAssetsPath.bind(this.animationItem);
      this.globalData.elementLoaded = this.animationItem.elementLoaded.bind(this.animationItem);
      this.globalData.addPendingElement = this.animationItem.addPendingElement.bind(this.animationItem);
      this.globalData.transformCanvas = this.transformCanvas;
      this.elements = Array.apply(null,{length:animData.layers.length});
  
      this.updateContainerSize();
  };
  
  CanvasRenderer.prototype.updateContainerSize = function () {
      var elementWidth,elementHeight;
      if(this.animationItem.wrapper && this.animationItem.container){
          elementWidth = this.animationItem.wrapper.offsetWidth;
          elementHeight = this.animationItem.wrapper.offsetHeight;
          this.animationItem.container.setAttribute('width',elementWidth * this.renderConfig.dpr );
          this.animationItem.container.setAttribute('height',elementHeight * this.renderConfig.dpr);
      }else{
          elementWidth = this.canvasContext.canvas.width * this.renderConfig.dpr;
          elementHeight = this.canvasContext.canvas.height * this.renderConfig.dpr;
      }
      var elementRel,animationRel;
      if(this.renderConfig.preserveAspectRatio.indexOf('meet') !== -1 || this.renderConfig.preserveAspectRatio.indexOf('slice') !== -1){
          var par = this.renderConfig.preserveAspectRatio.split(' ');
          var fillType = par[1] || 'meet';
          var pos = par[0] || 'xMidYMid';
          var xPos = pos.substr(0,4);
          var yPos = pos.substr(4);
          elementRel = elementWidth/elementHeight;
          animationRel = this.transformCanvas.w/this.transformCanvas.h;
          if(animationRel>elementRel && fillType === 'meet' || animationRel<elementRel && fillType === 'slice'){
              this.transformCanvas.sx = elementWidth/(this.transformCanvas.w/this.renderConfig.dpr);
              this.transformCanvas.sy = elementWidth/(this.transformCanvas.w/this.renderConfig.dpr);
          }else{
              this.transformCanvas.sx = elementHeight/(this.transformCanvas.h / this.renderConfig.dpr);
              this.transformCanvas.sy = elementHeight/(this.transformCanvas.h / this.renderConfig.dpr);
          }
  
          if(xPos === 'xMid' && ((animationRel<elementRel && fillType==='meet') || (animationRel>elementRel && fillType === 'slice'))){
              this.transformCanvas.tx = (elementWidth-this.transformCanvas.w*(elementHeight/this.transformCanvas.h))/2*this.renderConfig.dpr;
          } else if(xPos === 'xMax' && ((animationRel<elementRel && fillType==='meet') || (animationRel>elementRel && fillType === 'slice'))){
              this.transformCanvas.tx = (elementWidth-this.transformCanvas.w*(elementHeight/this.transformCanvas.h))*this.renderConfig.dpr;
          } else {
              this.transformCanvas.tx = 0;
          }
          if(yPos === 'YMid' && ((animationRel>elementRel && fillType==='meet') || (animationRel<elementRel && fillType === 'slice'))){
              this.transformCanvas.ty = ((elementHeight-this.transformCanvas.h*(elementWidth/this.transformCanvas.w))/2)*this.renderConfig.dpr;
          } else if(yPos === 'YMax' && ((animationRel>elementRel && fillType==='meet') || (animationRel<elementRel && fillType === 'slice'))){
              this.transformCanvas.ty = ((elementHeight-this.transformCanvas.h*(elementWidth/this.transformCanvas.w)))*this.renderConfig.dpr;
          } else {
              this.transformCanvas.ty = 0;
          }
  
      }else if(this.renderConfig.preserveAspectRatio == 'none'){
          this.transformCanvas.sx = elementWidth/(this.transformCanvas.w/this.renderConfig.dpr);
          this.transformCanvas.sy = elementHeight/(this.transformCanvas.h/this.renderConfig.dpr);
          this.transformCanvas.tx = 0;
          this.transformCanvas.ty = 0;
      }else{
          this.transformCanvas.sx = this.renderConfig.dpr;
          this.transformCanvas.sy = this.renderConfig.dpr;
          this.transformCanvas.tx = 0;
          this.transformCanvas.ty = 0;
      }
      this.transformCanvas.props = [this.transformCanvas.sx,0,0,0,0,this.transformCanvas.sy,0,0,0,0,1,0,this.transformCanvas.tx,this.transformCanvas.ty,0,1];
      var i, len = this.elements.length;
      for(i=0;i<len;i+=1){
          if(this.elements[i] && this.elements[i].data.ty === 0){
              this.elements[i].resize(this.globalData.transformCanvas);
          }
      }
  };
  
  CanvasRenderer.prototype.destroy = function () {
      if(this.renderConfig.clearCanvas) {
          this.animationItem.wrapper.innerHTML = '';
      }
      var i, len = this.layers ? this.layers.length : 0;
      for (i = len - 1; i >= 0; i-=1) {
          this.elements[i].destroy();
      }
      this.elements.length = 0;
      this.globalData.canvasContext = null;
      this.animationItem.container = null;
      this.destroyed = true;
  };
  
  CanvasRenderer.prototype.renderFrame = function(num){
      if((this.renderedFrame == num && this.renderConfig.clearCanvas === true) || this.destroyed || num === null){
          return;
      }
      this.renderedFrame = num;
      this.globalData.frameNum = num - this.animationItem.firstFrame;
      this.globalData.frameId += 1;
      this.globalData.projectInterface.currentFrame = num;
      if(this.renderConfig.clearCanvas === true){
          this.reset();
          this.canvasContext.save();
          //this.canvasContext.canvas.width = this.canvasContext.canvas.width;
          this.canvasContext.clearRect(this.transformCanvas.tx, this.transformCanvas.ty, this.transformCanvas.w*this.transformCanvas.sx, this.transformCanvas.h*this.transformCanvas.sy);
      }else{
          this.save();
      }
      this.ctxTransform(this.transformCanvas.props);
      this.canvasContext.beginPath();
      this.canvasContext.rect(0,0,this.transformCanvas.w,this.transformCanvas.h);
      this.canvasContext.closePath();
      this.canvasContext.clip();
  
      //console.log('--------');
      //console.log('NEW: ',num);
      var i, len = this.layers.length;
      if(!this.completeLayers){
          this.checkLayers(num);
      }
  
      for (i = 0; i < len; i++) {
          if(this.completeLayers || this.elements[i]){
              this.elements[i].prepareFrame(num - this.layers[i].st);
          }
      }
      for (i = len - 1; i >= 0; i-=1) {
          if(this.completeLayers || this.elements[i]){
              this.elements[i].renderFrame();
          }
      }
      if(this.renderConfig.clearCanvas !== true){
          this.restore();
      } else {
          this.canvasContext.restore();
      }
  };
  
  CanvasRenderer.prototype.buildItem = function(pos){
      var elements = this.elements;
      if(elements[pos] || this.layers[pos].ty == 99){
          return;
      }
      var element = this.createItem(this.layers[pos], this,this.globalData);
      elements[pos] = element;
      element.initExpressions();
      if(this.layers[pos].ty === 0){
          element.resize(this.globalData.transformCanvas);
      }
  };
  
  CanvasRenderer.prototype.checkPendingElements  = function(){
      while(this.pendingElements.length){
          var element = this.pendingElements.pop();
          element.checkParenting();
      }
  };
  
  CanvasRenderer.prototype.hide = function(){
      this.animationItem.container.style.display = 'none';
  };
  
  CanvasRenderer.prototype.show = function(){
      this.animationItem.container.style.display = 'block';
  };
  
  CanvasRenderer.prototype.searchExtraCompositions = function(assets){
      var i, len = assets.length;
      var floatingContainer = document.createElementNS(svgNS,'g');
      for(i=0;i<len;i+=1){
          if(assets[i].xt){
              var comp = this.createComp(assets[i],this.globalData.comp,this.globalData);
              comp.initExpressions();
              //comp.compInterface = CompExpressionInterface(comp);
              //Expressions.addLayersInterface(comp.elements, this.globalData.projectInterface);
              this.globalData.projectInterface.registerComposition(comp);
          }
      }
  };
  function HybridRenderer(animationItem){
      this.animationItem = animationItem;
      this.layers = null;
      this.renderedFrame = -1;
      this.globalData = {
          frameNum: -1
      };
      this.pendingElements = [];
      this.elements = [];
      this.threeDElements = [];
      this.destroyed = false;
      this.camera = null;
      this.supports3d = true;
  
  }
  
  extendPrototype(BaseRenderer,HybridRenderer);
  
  HybridRenderer.prototype.buildItem = SVGRenderer.prototype.buildItem;
  
  HybridRenderer.prototype.checkPendingElements  = function(){
      while(this.pendingElements.length){
          var element = this.pendingElements.pop();
          element.checkParenting();
      }
  };
  
  HybridRenderer.prototype.appendElementInPos = function(element, pos){
      var newElement = element.getBaseElement();
      if(!newElement){
          return;
      }
      var layer = this.layers[pos];
      if(!layer.ddd || !this.supports3d){
          var i = 0;
          var nextElement;
          while(i<pos){
              if(this.elements[i] && this.elements[i]!== true && this.elements[i].getBaseElement){
                  nextElement = this.elements[i].getBaseElement();
              }
              i += 1;
          }
          if(nextElement){
              if(!layer.ddd || !this.supports3d){
                  this.layerElement.insertBefore(newElement, nextElement);
              }
          } else {
              if(!layer.ddd || !this.supports3d){
                  this.layerElement.appendChild(newElement);
              }
          }
      } else {
          this.addTo3dContainer(newElement,pos);
      }
  };
  
  
  HybridRenderer.prototype.createBase = function (data) {
      return new SVGBaseElement(data, this.layerElement,this.globalData,this);
  };
  
  HybridRenderer.prototype.createShape = function (data) {
      if(!this.supports3d){
          return new IShapeElement(data, this.layerElement,this.globalData,this);
      }
      return new HShapeElement(data, this.layerElement,this.globalData,this);
  };
  
  HybridRenderer.prototype.createText = function (data) {
      if(!this.supports3d){
          return new SVGTextElement(data, this.layerElement,this.globalData,this);
      }
      return new HTextElement(data, this.layerElement,this.globalData,this);
  };
  
  HybridRenderer.prototype.createCamera = function (data) {
      this.camera = new HCameraElement(data, this.layerElement,this.globalData,this);
      return this.camera;
  };
  
  HybridRenderer.prototype.createImage = function (data) {
      if(!this.supports3d){
          return new IImageElement(data, this.layerElement,this.globalData,this);
      }
      return new HImageElement(data, this.layerElement,this.globalData,this);
  };
  
  HybridRenderer.prototype.createComp = function (data) {
      if(!this.supports3d){
          return new ICompElement(data, this.layerElement,this.globalData,this);
      }
      return new HCompElement(data, this.layerElement,this.globalData,this);
  
  };
  
  HybridRenderer.prototype.createSolid = function (data) {
      if(!this.supports3d){
          return new ISolidElement(data, this.layerElement,this.globalData,this);
      }
      return new HSolidElement(data, this.layerElement,this.globalData,this);
  };
  
  HybridRenderer.prototype.getThreeDContainer = function(pos){
      var perspectiveElem = document.createElement('div');
      styleDiv(perspectiveElem);
      perspectiveElem.style.width = this.globalData.compSize.w+'px';
      perspectiveElem.style.height = this.globalData.compSize.h+'px';
      perspectiveElem.style.transformOrigin = perspectiveElem.style.mozTransformOrigin = perspectiveElem.style.webkitTransformOrigin = "50% 50%";
      var container = document.createElement('div');
      styleDiv(container);
      container.style.transform = container.style.webkitTransform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
      perspectiveElem.appendChild(container);
      this.resizerElem.appendChild(perspectiveElem);
      var threeDContainerData = {
          container:container,
          perspectiveElem:perspectiveElem,
          startPos: pos,
          endPos: pos
      };
      this.threeDElements.push(threeDContainerData);
      return threeDContainerData;
  };
  
  HybridRenderer.prototype.build3dContainers = function(){
      var i, len = this.layers.length;
      var lastThreeDContainerData;
      for(i=0;i<len;i+=1){
          if(this.layers[i].ddd){
              if(!lastThreeDContainerData){
                  lastThreeDContainerData = this.getThreeDContainer(i);
              }
              lastThreeDContainerData.endPos = Math.max(lastThreeDContainerData.endPos,i);
          } else {
              lastThreeDContainerData = null;
          }
      }
  };
  
  HybridRenderer.prototype.addTo3dContainer = function(elem,pos){
      var i = 0, len = this.threeDElements.length;
      while(i<len){
          if(pos <= this.threeDElements[i].endPos){
              var j = this.threeDElements[i].startPos;
              var nextElement;
              while(j<pos){
                  if(this.elements[j] && this.elements[j].getBaseElement){
                      nextElement = this.elements[j].getBaseElement();
                  }
                  j += 1;
              }
              if(nextElement){
                  this.threeDElements[i].container.insertBefore(elem, nextElement);
              } else {
                  this.threeDElements[i].container.appendChild(elem);
              }
              break;
          }
          i += 1;
      }
  };
  
  HybridRenderer.prototype.configAnimation = function(animData){
      var resizerElem = document.createElement('div');
      var wrapper = this.animationItem.wrapper;
      resizerElem.style.width = animData.w+'px';
      resizerElem.style.height = animData.h+'px';
      this.resizerElem = resizerElem;
      styleDiv(resizerElem);
      resizerElem.style.transformStyle = resizerElem.style.webkitTransformStyle = resizerElem.style.mozTransformStyle = "flat";
      wrapper.appendChild(resizerElem);
  
      resizerElem.style.overflow = 'hidden';
      var svg = document.createElementNS(svgNS,'svg');
      svg.setAttribute('width','1');
      svg.setAttribute('height','1');
      styleDiv(svg);
      this.resizerElem.appendChild(svg);
      var defs = document.createElementNS(svgNS,'defs');
      svg.appendChild(defs);
      this.globalData.defs = defs;
      this.data = animData;
      //Mask animation
      this.globalData.getAssetData = this.animationItem.getAssetData.bind(this.animationItem);
      this.globalData.getAssetsPath = this.animationItem.getAssetsPath.bind(this.animationItem);
      this.globalData.elementLoaded = this.animationItem.elementLoaded.bind(this.animationItem);
      this.globalData.frameId = 0;
      this.globalData.compSize = {
          w: animData.w,
          h: animData.h
      };
      this.globalData.frameRate = animData.fr;
      this.layers = animData.layers;
      this.globalData.fontManager = new FontManager();
      this.globalData.fontManager.addChars(animData.chars);
      this.globalData.fontManager.addFonts(animData.fonts,svg);
      this.layerElement = this.resizerElem;
      this.build3dContainers();
      this.updateContainerSize();
  };
  
  HybridRenderer.prototype.destroy = function () {
      this.animationItem.wrapper.innerHTML = '';
      this.animationItem.container = null;
      this.globalData.defs = null;
      var i, len = this.layers ? this.layers.length : 0;
      for (i = 0; i < len; i++) {
          this.elements[i].destroy();
      }
      this.elements.length = 0;
      this.destroyed = true;
      this.animationItem = null;
  };
  
  HybridRenderer.prototype.updateContainerSize = function () {
      var elementWidth = this.animationItem.wrapper.offsetWidth;
      var elementHeight = this.animationItem.wrapper.offsetHeight;
      var elementRel = elementWidth/elementHeight;
      var animationRel = this.globalData.compSize.w/this.globalData.compSize.h;
      var sx,sy,tx,ty;
      if(animationRel>elementRel){
          sx = elementWidth/(this.globalData.compSize.w);
          sy = elementWidth/(this.globalData.compSize.w);
          tx = 0;
          ty = ((elementHeight-this.globalData.compSize.h*(elementWidth/this.globalData.compSize.w))/2);
      }else{
          sx = elementHeight/(this.globalData.compSize.h);
          sy = elementHeight/(this.globalData.compSize.h);
          tx = (elementWidth-this.globalData.compSize.w*(elementHeight/this.globalData.compSize.h))/2;
          ty = 0;
      }
      this.resizerElem.style.transform = this.resizerElem.style.webkitTransform = 'matrix3d(' + sx + ',0,0,0,0,'+sy+',0,0,0,0,1,0,'+tx+','+ty+',0,1)';
  };
  
  HybridRenderer.prototype.renderFrame = SVGRenderer.prototype.renderFrame;
  
  HybridRenderer.prototype.hide = function(){
      this.resizerElem.style.display = 'none';
  };
  
  HybridRenderer.prototype.show = function(){
      this.resizerElem.style.display = 'block';
  };
  
  HybridRenderer.prototype.initItems = function(){
      this.buildAllItems();
      if(this.camera){
          this.camera.setup();
      } else {
          var cWidth = this.globalData.compSize.w;
          var cHeight = this.globalData.compSize.h;
          var i, len = this.threeDElements.length;
          for(i=0;i<len;i+=1){
              this.threeDElements[i].perspectiveElem.style.perspective = this.threeDElements[i].perspectiveElem.style.webkitPerspective = Math.sqrt(Math.pow(cWidth,2) + Math.pow(cHeight,2)) + 'px';
          }
      }
  };
  
  HybridRenderer.prototype.searchExtraCompositions = function(assets){
      var i, len = assets.length;
      var floatingContainer = document.createElement('div');
      for(i=0;i<len;i+=1){
          if(assets[i].xt){
              var comp = this.createComp(assets[i],floatingContainer,this.globalData.comp,null);
              comp.initExpressions();
              this.globalData.projectInterface.registerComposition(comp);
          }
      }
  };
  function CVBaseElement(data, comp,globalData){
      this.globalData = globalData;
      this.data = data;
      this.comp = comp;
      this.canvasContext = globalData.canvasContext;
      this.init();
  }
  
  createElement(BaseElement, CVBaseElement);
  
  CVBaseElement.prototype.createElements = function(){
      this.checkParenting();
  };
  
  CVBaseElement.prototype.checkBlendMode = function(globalData){
      if(globalData.blendMode !== this.data.bm) {
          globalData.blendMode = this.data.bm;
  
          var blendModeValue = '';
          switch (this.data.bm) {
              case 0:
                  blendModeValue = 'normal';
                  break;
              case 1:
                  blendModeValue = 'multiply';
                  break;
              case 2:
                  blendModeValue = 'screen';
                  break;
              case 3:
                  blendModeValue = 'overlay';
                  break;
              case 4:
                  blendModeValue = 'darken';
                  break;
              case 5:
                  blendModeValue = 'lighten';
                  break;
              case 6:
                  blendModeValue = 'color-dodge';
                  break;
              case 7:
                  blendModeValue = 'color-burn';
                  break;
              case 8:
                  blendModeValue = 'hard-light';
                  break;
              case 9:
                  blendModeValue = 'soft-light';
                  break;
              case 10:
                  blendModeValue = 'difference';
                  break;
              case 11:
                  blendModeValue = 'exclusion';
                  break;
              case 12:
                  blendModeValue = 'hue';
                  break;
              case 13:
                  blendModeValue = 'saturation';
                  break;
              case 14:
                  blendModeValue = 'color';
                  break;
              case 15:
                  blendModeValue = 'luminosity';
                  break;
          }
          globalData.canvasContext.globalCompositeOperation = blendModeValue;
      }
  };
  
  
  CVBaseElement.prototype.renderFrame = function(parentTransform){
      if(this.data.ty === 3){
          return false;
      }
          this.checkBlendMode(this.data.ty === 0?this.parentGlobalData:this.globalData);
  
      if(!this.isVisible){
          return this.isVisible;
      }
      this.finalTransform.opMdf = this.finalTransform.op.mdf;
      this.finalTransform.matMdf = this.finalTransform.mProp.mdf;
      this.finalTransform.opacity = this.finalTransform.op.v;
  
      var mat;
      var finalMat = this.finalTransform.mat;
  
      if(this.hierarchy){
          var i, len = this.hierarchy.length;
          mat = this.finalTransform.mProp.v.props;
          finalMat.cloneFromProps(mat);
          for(i=0;i<len;i+=1){
              this.finalTransform.matMdf = this.hierarchy[i].finalTransform.mProp.mdf ? true : this.finalTransform.matMdf;
              mat = this.hierarchy[i].finalTransform.mProp.v.props;
              finalMat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5],mat[6],mat[7],mat[8],mat[9],mat[10],mat[11],mat[12],mat[13],mat[14],mat[15]);
          }
      }else{
          if(!parentTransform){
              finalMat.cloneFromProps(this.finalTransform.mProp.v.props);
          }else{
              mat = this.finalTransform.mProp.v.props;
              finalMat.cloneFromProps(mat);
          }
      }
  
      if(parentTransform){
          mat = parentTransform.mat.props;
          finalMat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5],mat[6],mat[7],mat[8],mat[9],mat[10],mat[11],mat[12],mat[13],mat[14],mat[15]);
          this.finalTransform.opacity *= parentTransform.opacity;
          this.finalTransform.opMdf = parentTransform.opMdf ? true : this.finalTransform.opMdf;
          this.finalTransform.matMdf = parentTransform.matMdf ? true : this.finalTransform.matMdf
      }
  
      if(this.data.hasMask){
          this.globalData.renderer.save(true);
          this.maskManager.renderFrame(this.data.ty === 0?null:finalMat);
      }
      if(this.data.hd){
          this.isVisible = false;
      }
      return this.isVisible;
  
  };
  
  CVBaseElement.prototype.addMasks = function(data){
      this.maskManager = new CVMaskElement(data,this,this.globalData);
  };
  
  
  CVBaseElement.prototype.destroy = function(){
      this.canvasContext = null;
      this.data = null;
      this.globalData = null;
      if(this.maskManager) {
          this.maskManager.destroy();
      }
  };
  
  CVBaseElement.prototype.mHelper = new Matrix();
  
  function CVCompElement(data, comp,globalData){
      this._parent.constructor.call(this,data, comp,globalData);
      var compGlobalData = {};
      for(var s in globalData){
          if(globalData.hasOwnProperty(s)){
              compGlobalData[s] = globalData[s];
          }
      }
      compGlobalData.renderer = this;
      compGlobalData.compHeight = this.data.h;
      compGlobalData.compWidth = this.data.w;
      this.renderConfig = {
          clearCanvas: true
      };
      this.contextData = {
          saved : Array.apply(null,{length:15}),
          savedOp: Array.apply(null,{length:15}),
          cArrPos : 0,
          cTr : new Matrix(),
          cO : 1
      };
      this.completeLayers = false;
      var i, len = 15;
      for(i=0;i<len;i+=1){
          this.contextData.saved[i] = Array.apply(null,{length:16});
      }
      this.transformMat = new Matrix();
      this.parentGlobalData = this.globalData;
      var cv = document.createElement('canvas');
      //document.body.appendChild(cv);
      compGlobalData.canvasContext = cv.getContext('2d');
      this.canvasContext = compGlobalData.canvasContext;
      cv.width = this.data.w;
      cv.height = this.data.h;
      this.canvas = cv;
      this.globalData = compGlobalData;
      this.layers = data.layers;
      this.pendingElements = [];
      this.elements = Array.apply(null,{length:this.layers.length});
      if(this.data.tm){
          this.tm = PropertyFactory.getProp(this,this.data.tm,0,globalData.frameRate,this.dynamicProperties);
      }
      if(this.data.xt || !globalData.progressiveLoad){
          this.buildAllItems();
      }
  }
  createElement(CVBaseElement, CVCompElement);
  
  CVCompElement.prototype.ctxTransform = CanvasRenderer.prototype.ctxTransform;
  CVCompElement.prototype.ctxOpacity = CanvasRenderer.prototype.ctxOpacity;
  CVCompElement.prototype.save = CanvasRenderer.prototype.save;
  CVCompElement.prototype.restore = CanvasRenderer.prototype.restore;
  CVCompElement.prototype.reset =  function(){
      this.contextData.cArrPos = 0;
      this.contextData.cTr.reset();
      this.contextData.cO = 1;
  };
  CVCompElement.prototype.resize = function(transformCanvas){
      var maxScale = Math.max(transformCanvas.sx,transformCanvas.sy);
      this.canvas.width = this.data.w*maxScale;
      this.canvas.height = this.data.h*maxScale;
      this.transformCanvas = {
          sc:maxScale,
          w:this.data.w*maxScale,
          h:this.data.h*maxScale,
          props:[maxScale,0,0,0,0,maxScale,0,0,0,0,1,0,0,0,0,1]
      }
      var i,len = this.elements.length;
      for( i = 0; i < len; i+=1 ){
          if(this.elements[i] && this.elements[i].data.ty === 0){
              this.elements[i].resize(transformCanvas);
          }
      }
  };
  
  CVCompElement.prototype.prepareFrame = function(num){
      this.globalData.frameId = this.parentGlobalData.frameId;
      this.globalData.mdf = false;
      this._parent.prepareFrame.call(this,num);
      if(this.isVisible===false && !this.data.xt){
          return;
      }
      var timeRemapped = num;
      if(this.tm){
          timeRemapped = this.tm.v;
          if(timeRemapped === this.data.op){
              timeRemapped = this.data.op - 1;
          }
      }
      this.renderedFrame = timeRemapped/this.data.sr;
      var i,len = this.elements.length;
  
      if(!this.completeLayers){
          this.checkLayers(num);
      }
  
      for( i = 0; i < len; i+=1 ){
          if(this.completeLayers || this.elements[i]){
              this.elements[i].prepareFrame(timeRemapped/this.data.sr - this.layers[i].st);
              if(this.elements[i].data.ty === 0 && this.elements[i].globalData.mdf){
                  this.globalData.mdf = true;
              }
          }
      }
      if(this.globalData.mdf && !this.data.xt){
          this.canvasContext.clearRect(0, 0, this.data.w, this.data.h);
          this.ctxTransform(this.transformCanvas.props);
      }
  };
  
  CVCompElement.prototype.renderFrame = function(parentMatrix){
      if(this._parent.renderFrame.call(this,parentMatrix)===false){
          return;
      }
      if(this.globalData.mdf){
          var i,len = this.layers.length;
          for( i = len - 1; i >= 0; i -= 1 ){
              if(this.completeLayers || this.elements[i]){
                  this.elements[i].renderFrame();
              }
          }
      }
      if(this.data.hasMask){
          this.globalData.renderer.restore(true);
      }
      if(this.firstFrame){
          this.firstFrame = false;
      }
      this.parentGlobalData.renderer.save();
      this.parentGlobalData.renderer.ctxTransform(this.finalTransform.mat.props);
      this.parentGlobalData.renderer.ctxOpacity(this.finalTransform.opacity);
      this.parentGlobalData.renderer.canvasContext.drawImage(this.canvas,0,0,this.data.w,this.data.h);
      this.parentGlobalData.renderer.restore();
  
      if(this.globalData.mdf){
          this.reset();
      }
  };
  
  CVCompElement.prototype.setElements = function(elems){
      this.elements = elems;
  };
  
  CVCompElement.prototype.getElements = function(){
      return this.elements;
  };
  
  CVCompElement.prototype.destroy = function(){
      var i,len = this.layers.length;
      for( i = len - 1; i >= 0; i -= 1 ){
          this.elements[i].destroy();
      }
      this.layers = null;
      this.elements = null;
      this._parent.destroy.call(this._parent);
  };
  CVCompElement.prototype.checkLayers = CanvasRenderer.prototype.checkLayers;
  CVCompElement.prototype.buildItem = CanvasRenderer.prototype.buildItem;
  CVCompElement.prototype.checkPendingElements = CanvasRenderer.prototype.checkPendingElements;
  CVCompElement.prototype.addPendingElement = CanvasRenderer.prototype.addPendingElement;
  CVCompElement.prototype.buildAllItems = CanvasRenderer.prototype.buildAllItems;
  CVCompElement.prototype.createItem = CanvasRenderer.prototype.createItem;
  CVCompElement.prototype.createImage = CanvasRenderer.prototype.createImage;
  CVCompElement.prototype.createComp = CanvasRenderer.prototype.createComp;
  CVCompElement.prototype.createSolid = CanvasRenderer.prototype.createSolid;
  CVCompElement.prototype.createShape = CanvasRenderer.prototype.createShape;
  CVCompElement.prototype.createText = CanvasRenderer.prototype.createText;
  CVCompElement.prototype.createBase = CanvasRenderer.prototype.createBase;
  CVCompElement.prototype.buildElementParenting = CanvasRenderer.prototype.buildElementParenting;
  function CVImageElement(data, comp,globalData){
      this.assetData = globalData.getAssetData(data.refId);
      this._parent.constructor.call(this,data, comp,globalData);
      this.globalData.addPendingElement();
  }
  createElement(CVBaseElement, CVImageElement);
  
  CVImageElement.prototype.createElements = function(){
      var imageLoaded = function(){
          this.globalData.elementLoaded();
          if(this.assetData.w !== this.img.width || this.assetData.h !== this.img.height){
              var canvas = document.createElement('canvas');
              canvas.width = this.assetData.w;
              canvas.height = this.assetData.h;
              var ctx = canvas.getContext('2d');
  
              var imgW = this.img.width;
              var imgH = this.img.height;
              var imgRel = imgW / imgH;
              var canvasRel = this.assetData.w/this.assetData.h;
              var widthCrop, heightCrop;
              if(imgRel>canvasRel){
                  heightCrop = imgH;
                  widthCrop = heightCrop*canvasRel;
              } else {
                  widthCrop = imgW;
                  heightCrop = widthCrop/canvasRel;
              }
              ctx.drawImage(this.img,(imgW-widthCrop)/2,(imgH-heightCrop)/2,widthCrop,heightCrop,0,0,this.assetData.w,this.assetData.h);
              this.img = canvas;
          }
      }.bind(this);
      var imageFailed = function(){
          this.failed = true;
          this.globalData.elementLoaded();
      }.bind(this);
  
      this.img = new Image();
      this.img.addEventListener('load', imageLoaded, false);
      this.img.addEventListener('error', imageFailed, false);
      var assetPath = this.globalData.getAssetsPath(this.assetData);
      this.img.src = assetPath;
  
      this._parent.createElements.call(this);
  
  };
  
  CVImageElement.prototype.renderFrame = function(parentMatrix){
      if(this.failed){
          return;
      }
      if(this._parent.renderFrame.call(this,parentMatrix)===false){
          return;
      }
      var ctx = this.canvasContext;
      this.globalData.renderer.save();
      var finalMat = this.finalTransform.mat.props;
      this.globalData.renderer.ctxTransform(finalMat);
      this.globalData.renderer.ctxOpacity(this.finalTransform.opacity);
      ctx.drawImage(this.img,0,0);
      this.globalData.renderer.restore(this.data.hasMask);
      if(this.firstFrame){
          this.firstFrame = false;
      }
  };
  
  CVImageElement.prototype.destroy = function(){
      this.img = null;
      this._parent.destroy.call(this._parent);
  };
  
  function CVMaskElement(data,element){
      this.data = data;
      this.element = element;
      this.dynamicProperties = [];
      this.masksProperties = this.data.masksProperties;
      this.viewData = new Array(this.masksProperties.length);
      var i, len = this.masksProperties.length;
      for (i = 0; i < len; i++) {
          this.viewData[i] = ShapePropertyFactory.getShapeProp(this.element,this.masksProperties[i],3,this.dynamicProperties,null);
      }
  }
  
  CVMaskElement.prototype.getMaskProperty = function(pos){
      return this.viewData[pos];
  };
  
  CVMaskElement.prototype.prepareFrame = function(num){
      var i, len = this.dynamicProperties.length;
      for(i=0;i<len;i+=1){
          this.dynamicProperties[i].getValue(num);
          if(this.dynamicProperties[i].mdf){
              this.element.globalData.mdf = true;
          }
      }
  };
  
  CVMaskElement.prototype.renderFrame = function (transform) {
      var ctx = this.element.canvasContext;
      var i, len = this.data.masksProperties.length;
      var pt,pt2,pt3,data, hasMasks = false;
      for (i = 0; i < len; i++) {
          if(this.masksProperties[i].mode === 'n'){
              continue;
          }
          if(hasMasks === false){
              ctx.beginPath();
              hasMasks = true;
          }
          if (this.masksProperties[i].inv) {
              ctx.moveTo(0, 0);
              ctx.lineTo(this.element.globalData.compWidth, 0);
              ctx.lineTo(this.element.globalData.compWidth, this.element.globalData.compHeight);
              ctx.lineTo(0, this.element.globalData.compHeight);
              ctx.lineTo(0, 0);
          }
          data = this.viewData[i].v;
          pt = transform ? transform.applyToPointArray(data.v[0][0],data.v[0][1],0):data.v[0];
          ctx.moveTo(pt[0], pt[1]);
          var j, jLen = data._length;
          for (j = 1; j < jLen; j++) {
              pt = transform ? transform.applyToPointArray(data.o[j - 1][0],data.o[j - 1][1],0) : data.o[j - 1];
              pt2 = transform ? transform.applyToPointArray(data.i[j][0],data.i[j][1],0) : data.i[j];
              pt3 = transform ? transform.applyToPointArray(data.v[j][0],data.v[j][1],0) : data.v[j];
              ctx.bezierCurveTo(pt[0], pt[1], pt2[0], pt2[1], pt3[0], pt3[1]);
          }
          pt = transform ? transform.applyToPointArray(data.o[j - 1][0],data.o[j - 1][1],0) : data.o[j - 1];
          pt2 = transform ? transform.applyToPointArray(data.i[0][0],data.i[0][1],0) : data.i[0];
          pt3 = transform ? transform.applyToPointArray(data.v[0][0],data.v[0][1],0) : data.v[0];
          ctx.bezierCurveTo(pt[0], pt[1], pt2[0], pt2[1], pt3[0], pt3[1]);
      }
      if(hasMasks){
          ctx.clip();
      }
  };
  
  CVMaskElement.prototype.getMask = function(nm){
      var i = 0, len = this.masksProperties.length;
      while(i<len){
          if(this.masksProperties[i].nm === nm){
              return {
                  maskPath: this.viewData[i].pv
              }
          }
          i += 1;
      }
  };
  
  CVMaskElement.prototype.destroy = function(){
      this.element = null;
  };
  function CVShapeElement(data, comp,globalData){
      this.shapes = [];
      this.stylesList = [];
      this.viewData = [];
      this.shapeModifiers = [];
      this.shapesData = data.shapes;
      this.firstFrame = true;
      this._parent.constructor.call(this,data, comp,globalData);
  }
  createElement(CVBaseElement, CVShapeElement);
  
  CVShapeElement.prototype.lcEnum = {
      '1': 'butt',
      '2': 'round',
      '3': 'butt'
  }
  
  CVShapeElement.prototype.ljEnum = {
      '1': 'miter',
      '2': 'round',
      '3': 'butt'
  };
  CVShapeElement.prototype.transformHelper = {opacity:1,mat:new Matrix(),matMdf:false,opMdf:false};
  
  CVShapeElement.prototype.dashResetter = [];
  
  CVShapeElement.prototype.createElements = function(){
  
      this._parent.createElements.call(this);
      this.searchShapes(this.shapesData,this.viewData,this.dynamicProperties);
  };
  CVShapeElement.prototype.searchShapes = function(arr,data,dynamicProperties){
      var i, len = arr.length - 1;
      var j, jLen;
      var ownArrays = [], ownModifiers = [], styleElem;
      for(i=len;i>=0;i-=1){
          if(arr[i].ty == 'fl' || arr[i].ty == 'st'){
              styleElem = {
                  type: arr[i].ty,
                  elements: []
              };
              data[i] = {};
              if(arr[i].ty == 'fl' || arr[i].ty == 'st'){
                  data[i].c = PropertyFactory.getProp(this,arr[i].c,1,255,dynamicProperties);
                  if(!data[i].c.k){
                      styleElem.co = 'rgb('+bm_floor(data[i].c.v[0])+','+bm_floor(data[i].c.v[1])+','+bm_floor(data[i].c.v[2])+')';
                  }
              }
              data[i].o = PropertyFactory.getProp(this,arr[i].o,0,0.01,dynamicProperties);
              if(arr[i].ty == 'st') {
                  styleElem.lc = this.lcEnum[arr[i].lc] || 'round';
                  styleElem.lj = this.ljEnum[arr[i].lj] || 'round';
                  if(arr[i].lj == 1) {
                      styleElem.ml = arr[i].ml;
                  }
                  data[i].w = PropertyFactory.getProp(this,arr[i].w,0,null,dynamicProperties);
                  if(!data[i].w.k){
                      styleElem.wi = data[i].w.v;
                  }
                  if(arr[i].d){
                      var d = PropertyFactory.getDashProp(this,arr[i].d,'canvas',dynamicProperties);
                      data[i].d = d;
                      if(!data[i].d.k){
                          styleElem.da = data[i].d.dasharray;
                          styleElem.do = data[i].d.dashoffset;
                      }
                  }
  
              } else {
  
                  styleElem.r = arr[i].r === 2 ? 'evenodd' : 'nonzero';
              }
              this.stylesList.push(styleElem);
              data[i].style = styleElem;
              ownArrays.push(data[i].style);
          }else if(arr[i].ty == 'gr'){
              data[i] = {
                  it: []
              };
              this.searchShapes(arr[i].it,data[i].it,dynamicProperties);
          }else if(arr[i].ty == 'tr'){
              data[i] = {
                  transform : {
                      mat: new Matrix(),
                      opacity: 1,
                      matMdf:false,
                      opMdf:false,
                      op: PropertyFactory.getProp(this,arr[i].o,0,0.01,dynamicProperties),
                      mProps: PropertyFactory.getProp(this,arr[i],2,null,dynamicProperties)
                  },
                  elements: []
              };
          }else if(arr[i].ty == 'sh' || arr[i].ty == 'rc' || arr[i].ty == 'el' || arr[i].ty == 'sr'){
              data[i] = {
                  nodes:[],
                  trNodes:[],
                  tr:[0,0,0,0,0,0]
              };
              var ty = 4;
              if(arr[i].ty == 'rc'){
                  ty = 5;
              }else if(arr[i].ty == 'el'){
                  ty = 6;
              }else if(arr[i].ty == 'sr'){
                  ty = 7;
              }
              data[i].sh = ShapePropertyFactory.getShapeProp(this,arr[i],ty,dynamicProperties);
              this.shapes.push(data[i].sh);
              this.addShapeToModifiers(data[i]);
              jLen = this.stylesList.length;
              var hasStrokes = false, hasFills = false;
              for(j=0;j<jLen;j+=1){
                  if(!this.stylesList[j].closed){
                      this.stylesList[j].elements.push(data[i]);
                      if(this.stylesList[j].type === 'st'){
                          hasStrokes = true;
                      }else{
                          hasFills = true;
                      }
                  }
              }
              data[i].st = hasStrokes;
              data[i].fl = hasFills;
          }else if(arr[i].ty == 'tm' || arr[i].ty == 'rd' || arr[i].ty == 'rp'){
              var modifier = ShapeModifiers.getModifier(arr[i].ty);
              modifier.init(this,arr[i],dynamicProperties);
              this.shapeModifiers.push(modifier);
              ownModifiers.push(modifier);
              data[i] = modifier;
          }
      }
      len = ownArrays.length;
      for(i=0;i<len;i+=1){
          ownArrays[i].closed = true;
      }
      len = ownModifiers.length;
      for(i=0;i<len;i+=1){
          ownModifiers[i].closed = true;
      }
  };
  
  CVShapeElement.prototype.addShapeToModifiers = IShapeElement.prototype.addShapeToModifiers;
  CVShapeElement.prototype.renderModifiers = IShapeElement.prototype.renderModifiers;
  
  CVShapeElement.prototype.renderFrame = function(parentMatrix){
      if(this._parent.renderFrame.call(this, parentMatrix)===false){
          return;
      }
      this.transformHelper.mat.reset();
      this.transformHelper.opacity = this.finalTransform.opacity;
      this.transformHelper.matMdf = false;
      this.transformHelper.opMdf = this.finalTransform.opMdf;
      this.renderModifiers();
      this.renderShape(this.transformHelper,null,null,true);
      if(this.data.hasMask){
          this.globalData.renderer.restore(true);
      }
  };
  
  CVShapeElement.prototype.renderShape = function(parentTransform,items,data,isMain){
      var i, len;
      if(!items){
          items = this.shapesData;
          len = this.stylesList.length;
          for(i=0;i<len;i+=1){
              this.stylesList[i].d = '';
              this.stylesList[i].mdf = false;
          }
      }
      if(!data){
          data = this.viewData;
      }
      ///
      ///
      len = items.length - 1;
      var groupTransform,groupMatrix;
      groupTransform = parentTransform;
      for(i=len;i>=0;i-=1){
          if(items[i].ty == 'tr'){
              groupTransform = data[i].transform;
              var mtArr = data[i].transform.mProps.v.props;
              groupTransform.matMdf = groupTransform.mProps.mdf;
              groupTransform.opMdf = groupTransform.op.mdf;
              groupMatrix = groupTransform.mat;
              groupMatrix.cloneFromProps(mtArr);
              if(parentTransform){
                  var props = parentTransform.mat.props;
                  groupTransform.opacity = parentTransform.opacity;
                  groupTransform.opacity *= data[i].transform.op.v;
                  groupTransform.matMdf = parentTransform.matMdf ? true : groupTransform.matMdf;
                  groupTransform.opMdf = parentTransform.opMdf ? true : groupTransform.opMdf;
                  groupMatrix.transform(props[0],props[1],props[2],props[3],props[4],props[5],props[6],props[7],props[8],props[9],props[10],props[11],props[12],props[13],props[14],props[15]);
              }else{
                  groupTransform.opacity = groupTransform.op.o;
              }
          }else if(items[i].ty == 'sh' || items[i].ty == 'el' || items[i].ty == 'rc' || items[i].ty == 'sr'){
              this.renderPath(items[i],data[i],groupTransform);
          }else if(items[i].ty == 'fl'){
              this.renderFill(items[i],data[i],groupTransform);
          }else if(items[i].ty == 'st'){
              this.renderStroke(items[i],data[i],groupTransform);
          }else if(items[i].ty == 'gr'){
              this.renderShape(groupTransform,items[i].it,data[i].it);
          }else if(items[i].ty == 'tm'){
              //
          }
      }
      if(!isMain){
          return;
      }
      len = this.stylesList.length;
      var j, jLen, k, kLen,elems,nodes, renderer = this.globalData.renderer, ctx = this.globalData.canvasContext, type;
      renderer.save();
      renderer.ctxTransform(this.finalTransform.mat.props);
      for(i=0;i<len;i+=1){
          type = this.stylesList[i].type;
          if(type === 'st' && this.stylesList[i].wi === 0){
              continue;
          }
          renderer.save();
          elems = this.stylesList[i].elements;
          if(type === 'st'){
              ctx.strokeStyle = this.stylesList[i].co;
              ctx.lineWidth = this.stylesList[i].wi;
              ctx.lineCap = this.stylesList[i].lc;
              ctx.lineJoin = this.stylesList[i].lj;
              ctx.miterLimit = this.stylesList[i].ml || 0;
          }else{
              ctx.fillStyle = this.stylesList[i].co;
          }
          renderer.ctxOpacity(this.stylesList[i].coOp);
          if(type !== 'st'){
              ctx.beginPath();
          }
          jLen = elems.length;
          for(j=0;j<jLen;j+=1){
              if(type === 'st'){
                  ctx.beginPath();
                  if(this.stylesList[i].da){
                      ctx.setLineDash(this.stylesList[i].da);
                      ctx.lineDashOffset = this.stylesList[i].do;
                      this.globalData.isDashed = true;
                  }else if(this.globalData.isDashed){
                      ctx.setLineDash(this.dashResetter);
                      this.globalData.isDashed = false;
                  }
              }
              nodes = elems[j].trNodes;
              kLen = nodes.length;
  
              for(k=0;k<kLen;k+=1){
                  if(nodes[k].t == 'm'){
                      ctx.moveTo(nodes[k].p[0],nodes[k].p[1]);
                  }else if(nodes[k].t == 'c'){
                      ctx.bezierCurveTo(nodes[k].p1[0],nodes[k].p1[1],nodes[k].p2[0],nodes[k].p2[1],nodes[k].p3[0],nodes[k].p3[1]);
                  }else{
                      ctx.closePath();
                  }
              }
              if(type === 'st'){
                  ctx.stroke();
              }
          }
          if(type !== 'st'){
              ctx.fill(this.stylesList[i].r);
          }
          renderer.restore();
      }
      renderer.restore();
      if(this.firstFrame){
          this.firstFrame = false;
      }
  };
  CVShapeElement.prototype.renderPath = function(pathData,viewData,groupTransform){
      var len, i, j,jLen;
      var redraw = groupTransform.matMdf || viewData.sh.mdf || this.firstFrame;
      if(redraw) {
          var paths = viewData.sh.paths;
          jLen = paths._length;
          var pathStringTransformed = viewData.trNodes;
          pathStringTransformed.length = 0;
          for(j=0;j<jLen;j+=1){
              var pathNodes = paths.shapes[j];
              if(pathNodes && pathNodes.v){
                  len = pathNodes._length;
                  for (i = 1; i < len; i += 1) {
                      if (i == 1) {
                          pathStringTransformed.push({
                              t: 'm',
                              p: groupTransform.mat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0)
                          });
                      }
                      pathStringTransformed.push({
                          t: 'c',
                          p1: groupTransform.mat.applyToPointArray(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1], 0),
                          p2: groupTransform.mat.applyToPointArray(pathNodes.i[i][0], pathNodes.i[i][1], 0),
                          p3: groupTransform.mat.applyToPointArray(pathNodes.v[i][0], pathNodes.v[i][1], 0)
                      });
                  }
                  if (len == 1) {
                      pathStringTransformed.push({
                          t: 'm',
                          p: groupTransform.mat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0)
                      });
                  }
                  if (pathNodes.c && len) {
                      pathStringTransformed.push({
                          t: 'c',
                          p1: groupTransform.mat.applyToPointArray(pathNodes.o[i - 1][0], pathNodes.o[i - 1][1], 0),
                          p2: groupTransform.mat.applyToPointArray(pathNodes.i[0][0], pathNodes.i[0][1], 0),
                          p3: groupTransform.mat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0)
                      });
                      pathStringTransformed.push({
                          t: 'z'
                      });
                  }
                  viewData.lStr = pathStringTransformed;
              }
  
          }
  
          if (viewData.st) {
              for (i = 0; i < 16; i += 1) {
                  viewData.tr[i] = groupTransform.mat.props[i];
              }
          }
          viewData.trNodes = pathStringTransformed;
  
      }
  };
  
  
  
  CVShapeElement.prototype.renderFill = function(styleData,viewData, groupTransform){
      var styleElem = viewData.style;
  
      if(viewData.c.mdf || this.firstFrame){
          styleElem.co = 'rgb('+bm_floor(viewData.c.v[0])+','+bm_floor(viewData.c.v[1])+','+bm_floor(viewData.c.v[2])+')';
      }
      if(viewData.o.mdf || groupTransform.opMdf || this.firstFrame){
          styleElem.coOp = viewData.o.v*groupTransform.opacity;
      }
  };
  
  CVShapeElement.prototype.renderStroke = function(styleData,viewData, groupTransform){
      var styleElem = viewData.style;
      //TODO fix dashes
      var d = viewData.d;
      var dasharray,dashoffset;
      if(d && (d.mdf  || this.firstFrame)){
          styleElem.da = d.dasharray;
          styleElem.do = d.dashoffset;
      }
      if(viewData.c.mdf || this.firstFrame){
          styleElem.co = 'rgb('+bm_floor(viewData.c.v[0])+','+bm_floor(viewData.c.v[1])+','+bm_floor(viewData.c.v[2])+')';
      }
      if(viewData.o.mdf || groupTransform.opMdf || this.firstFrame){
          styleElem.coOp = viewData.o.v*groupTransform.opacity;
      }
      if(viewData.w.mdf || this.firstFrame){
          styleElem.wi = viewData.w.v;
      }
  };
  
  
  CVShapeElement.prototype.destroy = function(){
      this.shapesData = null;
      this.globalData = null;
      this.canvasContext = null;
      this.stylesList.length = 0;
      this.viewData.length = 0;
      this._parent.destroy.call(this._parent);
  };
  
  
  function CVSolidElement(data, comp,globalData){
      this._parent.constructor.call(this,data, comp,globalData);
  }
  createElement(CVBaseElement, CVSolidElement);
  
  CVSolidElement.prototype.renderFrame = function(parentMatrix){
      if(this._parent.renderFrame.call(this, parentMatrix)===false){
          return;
      }
      var ctx = this.canvasContext;
      this.globalData.renderer.save();
      this.globalData.renderer.ctxTransform(this.finalTransform.mat.props);
      this.globalData.renderer.ctxOpacity(this.finalTransform.opacity);
      ctx.fillStyle=this.data.sc;
      ctx.fillRect(0,0,this.data.sw,this.data.sh);
      this.globalData.renderer.restore(this.data.hasMask);
      if(this.firstFrame){
          this.firstFrame = false;
      }
  };
  function CVTextElement(data, comp, globalData){
      this.textSpans = [];
      this.yOffset = 0;
      this.fillColorAnim = false;
      this.strokeColorAnim = false;
      this.strokeWidthAnim = false;
      this.stroke = false;
      this.fill = false;
      this.justifyOffset = 0;
      this.currentRender = null;
      this.renderType = 'canvas';
      this.values = {
          fill: 'rgba(0,0,0,0)',
          stroke: 'rgba(0,0,0,0)',
          sWidth: 0,
          fValue: ''
      }
      this._parent.constructor.call(this,data,comp, globalData);
  }
  createElement(CVBaseElement, CVTextElement);
  
  CVTextElement.prototype.init = ITextElement.prototype.init;
  CVTextElement.prototype.getMeasures = ITextElement.prototype.getMeasures;
  CVTextElement.prototype.getMult = ITextElement.prototype.getMult;
  CVTextElement.prototype.prepareFrame = ITextElement.prototype.prepareFrame;
  
  CVTextElement.prototype.tHelper = document.createElement('canvas').getContext('2d');
  
  CVTextElement.prototype.createElements = function(){
  
      this._parent.createElements.call(this);
      //console.log('this.data: ',this.data);
  
  };
  
  CVTextElement.prototype.buildNewText = function(){
      var documentData = this.currentTextDocumentData;
      this.renderedLetters = Array.apply(null,{length:this.currentTextDocumentData.l ? this.currentTextDocumentData.l.length : 0});
  
      var hasFill = false;
      if(documentData.fc) {
          hasFill = true;
          this.values.fill = 'rgb(' + Math.round(documentData.fc[0]*255) + ',' + Math.round(documentData.fc[1]*255) + ',' + Math.round(documentData.fc[2]*255) + ')';
      }else{
          this.values.fill = 'rgba(0,0,0,0)';
      }
      this.fill = hasFill;
      var hasStroke = false;
      if(documentData.sc){
          hasStroke = true;
          this.values.stroke = 'rgb(' + Math.round(documentData.sc[0]*255) + ',' + Math.round(documentData.sc[1]*255) + ',' + Math.round(documentData.sc[2]*255) + ')';
          this.values.sWidth = documentData.sw;
      }
      var fontData = this.globalData.fontManager.getFontByName(documentData.f);
      var i, len;
      var letters = documentData.l;
      var matrixHelper = this.mHelper;
      this.stroke = hasStroke;
      this.values.fValue = documentData.s + 'px '+ this.globalData.fontManager.getFontByName(documentData.f).fFamily;
      len = documentData.t.length;
      this.tHelper.font = this.values.fValue;
      var charData, shapeData, k, kLen, shapes, j, jLen, pathNodes, commands, pathArr, singleShape = this.data.singleShape;
      if (singleShape) {
          var xPos = 0, yPos = 0, lineWidths = documentData.lineWidths, boxWidth = documentData.boxWidth, firstLine = true;
      }
      var cnt = 0;
      for (i = 0;i < len ;i += 1) {
          charData = this.globalData.fontManager.getCharData(documentData.t.charAt(i), fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
          var shapeData;
          if(charData){
              shapeData = charData.data;
          } else {
              shapeData = null;
          }
          matrixHelper.reset();
          if(singleShape && letters[i].n) {
              xPos = 0;
              yPos += documentData.yOffset;
              yPos += firstLine ? 1 : 0;
              firstLine = false;
          }
  
          if(shapeData && shapeData.shapes){
              shapes = shapeData.shapes[0].it;
              jLen = shapes.length;
              matrixHelper.scale(documentData.s/100,documentData.s/100);
              if(singleShape){
                  if(documentData.ps){
                      matrixHelper.translate(documentData.ps[0],documentData.ps[1] + documentData.ascent,0);
                  }
                  matrixHelper.translate(0,-documentData.ls,0);
                  switch(documentData.j){
                      case 1:
                          matrixHelper.translate(documentData.justifyOffset + (boxWidth - lineWidths[letters[i].line]),0,0);
                          break;
                      case 2:
                          matrixHelper.translate(documentData.justifyOffset + (boxWidth - lineWidths[letters[i].line])/2,0,0);
                          break;
                  }
                  matrixHelper.translate(xPos,yPos,0);
              }
              commands = new Array(jLen);
              for(j=0;j<jLen;j+=1){
                  kLen = shapes[j].ks.k.i.length;
                  pathNodes = shapes[j].ks.k;
                  pathArr = [];
                  for(k=1;k<kLen;k+=1){
                      if(k==1){
                          pathArr.push(matrixHelper.applyToX(pathNodes.v[0][0],pathNodes.v[0][1],0),matrixHelper.applyToY(pathNodes.v[0][0],pathNodes.v[0][1],0));
                      }
                      pathArr.push(matrixHelper.applyToX(pathNodes.o[k-1][0],pathNodes.o[k-1][1],0),matrixHelper.applyToY(pathNodes.o[k-1][0],pathNodes.o[k-1][1],0),matrixHelper.applyToX(pathNodes.i[k][0],pathNodes.i[k][1],0),matrixHelper.applyToY(pathNodes.i[k][0],pathNodes.i[k][1],0),matrixHelper.applyToX(pathNodes.v[k][0],pathNodes.v[k][1],0),matrixHelper.applyToY(pathNodes.v[k][0],pathNodes.v[k][1],0));
                  }
                  pathArr.push(matrixHelper.applyToX(pathNodes.o[k-1][0],pathNodes.o[k-1][1],0),matrixHelper.applyToY(pathNodes.o[k-1][0],pathNodes.o[k-1][1],0),matrixHelper.applyToX(pathNodes.i[0][0],pathNodes.i[0][1],0),matrixHelper.applyToY(pathNodes.i[0][0],pathNodes.i[0][1],0),matrixHelper.applyToX(pathNodes.v[0][0],pathNodes.v[0][1],0),matrixHelper.applyToY(pathNodes.v[0][0],pathNodes.v[0][1],0));
                  commands[j] = pathArr;
              }
          }else{
              commands = [];
          }
          if(singleShape){
              xPos += letters[i].l;
          }
          if(this.textSpans[cnt]){
              this.textSpans[cnt].elem = commands;
          } else {
              this.textSpans[cnt] = {elem: commands};
          }
          cnt +=1;
      }
  }
  
  CVTextElement.prototype.renderFrame = function(parentMatrix){
      if(this._parent.renderFrame.call(this, parentMatrix)===false){
          return;
      }
      var ctx = this.canvasContext;
      var finalMat = this.finalTransform.mat.props;
      this.globalData.renderer.save();
      this.globalData.renderer.ctxTransform(finalMat);
      this.globalData.renderer.ctxOpacity(this.finalTransform.opacity);
      ctx.font = this.values.fValue;
      ctx.lineCap = 'butt';
      ctx.lineJoin = 'miter';
      ctx.miterLimit = 4;
  
      if(!this.data.singleShape){
          this.getMeasures();
      }
  
      var  i,len, j, jLen, k, kLen;
      var renderedLetters = this.renderedLetters;
  
      var letters = this.currentTextDocumentData.l;
  
      len = letters.length;
      var renderedLetter;
      var lastFill = null, lastStroke = null, lastStrokeW = null, commands, pathArr;
      for(i=0;i<len;i+=1){
          if(letters[i].n){
              continue;
          }
          renderedLetter = renderedLetters[i];
          if(renderedLetter){
              this.globalData.renderer.save();
              this.globalData.renderer.ctxTransform(renderedLetter.props);
              this.globalData.renderer.ctxOpacity(renderedLetter.o);
          }
          if(this.fill){
              if(renderedLetter && renderedLetter.fc){
                  if(lastFill !== renderedLetter.fc){
                      lastFill = renderedLetter.fc;
                      ctx.fillStyle = renderedLetter.fc;
                  }
              }else if(lastFill !== this.values.fill){
                  lastFill = this.values.fill;
                  ctx.fillStyle = this.values.fill;
              }
              commands = this.textSpans[i].elem;
              jLen = commands.length;
              this.globalData.canvasContext.beginPath();
              for(j=0;j<jLen;j+=1) {
                  pathArr = commands[j];
                  kLen = pathArr.length;
                  this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
                  for (k = 2; k < kLen; k += 6) {
                      this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
                  }
              }
              this.globalData.canvasContext.closePath();
              this.globalData.canvasContext.fill();
              ///ctx.fillText(this.textSpans[i].val,0,0);
          }
          if(this.stroke){
              if(renderedLetter && renderedLetter.sw){
                  if(lastStrokeW !== renderedLetter.sw){
                      lastStrokeW = renderedLetter.sw;
                      ctx.lineWidth = renderedLetter.sw;
                  }
              }else if(lastStrokeW !== this.values.sWidth){
                  lastStrokeW = this.values.sWidth;
                  ctx.lineWidth = this.values.sWidth;
              }
              if(renderedLetter && renderedLetter.sc){
                  if(lastStroke !== renderedLetter.sc){
                      lastStroke = renderedLetter.sc;
                      ctx.strokeStyle = renderedLetter.sc;
                  }
              }else if(lastStroke !== this.values.stroke){
                  lastStroke = this.values.stroke;
                  ctx.strokeStyle = this.values.stroke;
              }
              commands = this.textSpans[i].elem;
              jLen = commands.length;
              this.globalData.canvasContext.beginPath();
              for(j=0;j<jLen;j+=1) {
                  pathArr = commands[j];
                  kLen = pathArr.length;
                  this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
                  for (k = 2; k < kLen; k += 6) {
                      this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
                  }
              }
              this.globalData.canvasContext.closePath();
              this.globalData.canvasContext.stroke();
              ///ctx.strokeText(letters[i].val,0,0);
          }
          if(renderedLetter) {
              this.globalData.renderer.restore();
          }
      }
      /*if(this.data.hasMask){
       this.globalData.renderer.restore(true);
       }*/
      this.globalData.renderer.restore(this.data.hasMask);
      if(this.firstFrame){
          this.firstFrame = false;
      }
  };
  function HBaseElement(data,parentContainer,globalData,comp, placeholder){
      this.globalData = globalData;
      this.comp = comp;
      this.data = data;
      this.matteElement = null;
      this.parentContainer = parentContainer;
      this.layerId = placeholder ? placeholder.layerId : 'ly_'+randomString(10);
      this.placeholder = placeholder;
      this.init();
  };
  
  createElement(BaseElement, HBaseElement);
  HBaseElement.prototype.checkBlendMode = function(){
  
  };
  HBaseElement.prototype.setBlendMode = BaseElement.prototype.setBlendMode;
  
  /*HBaseElement.prototype.appendNodeToParent = function(node) {
      if(this.data.hd){
          return;
      }
      if(this.placeholder){
          var g = this.placeholder.phElement;
          g.parentNode.insertBefore(node, g);
          //g.parentNode.removeChild(g);
      }else{
          this.parentContainer.appendChild(node);
      }
  };*/
  
  
  HBaseElement.prototype.getBaseElement = function(){
      return this.baseElement;
  };
  
  HBaseElement.prototype.createElements = function(){
      if(this.data.hasMask){
          this.layerElement = document.createElementNS(svgNS,'svg');
          styleDiv(this.layerElement);
          //this.appendNodeToParent(this.layerElement);
          this.baseElement = this.layerElement;
          this.maskedElement = this.layerElement;
      }else{
          this.layerElement = this.parentContainer;
      }
      this.transformedElement = this.layerElement;
      if(this.data.ln && (this.data.ty === 4 || this.data.ty === 0)){
          if(this.layerElement === this.parentContainer){
              this.layerElement = document.createElementNS(svgNS,'g');
              //this.appendNodeToParent(this.layerElement);
              this.baseElement = this.layerElement;
          }
          this.layerElement.setAttribute('id',this.data.ln);
      }
      this.setBlendMode();
      if(this.layerElement !== this.parentContainer){
          this.placeholder = null;
      }
      this.checkParenting();
  };
  
  HBaseElement.prototype.renderFrame = function(parentTransform){
      if(this.data.ty === 3){
          return false;
      }
  
      if(this.currentFrameNum === this.lastNum || !this.isVisible){
          return this.isVisible;
      }
      this.lastNum = this.currentFrameNum;
  
      this.finalTransform.opMdf = this.finalTransform.op.mdf;
      this.finalTransform.matMdf = this.finalTransform.mProp.mdf;
      this.finalTransform.opacity = this.finalTransform.op.v;
      if(this.firstFrame){
          this.finalTransform.opMdf = true;
          this.finalTransform.matMdf = true;
      }
  
      var mat;
      var finalMat = this.finalTransform.mat;
  
      if(this.hierarchy){
          var i, len = this.hierarchy.length;
  
          mat = this.finalTransform.mProp.v.props;
          finalMat.cloneFromProps(mat);
          for(i=0;i<len;i+=1){
              this.finalTransform.matMdf = this.hierarchy[i].finalTransform.mProp.mdf ? true : this.finalTransform.matMdf;
              mat = this.hierarchy[i].finalTransform.mProp.v.props;
              finalMat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5],mat[6],mat[7],mat[8],mat[9],mat[10],mat[11],mat[12],mat[13],mat[14],mat[15]);
          }
      }else{
          if(this.isVisible && this.finalTransform.matMdf){
              if(!parentTransform){
                  finalMat.cloneFromProps(this.finalTransform.mProp.v.props);
              }else{
                  mat = this.finalTransform.mProp.v.props;
                  finalMat.cloneFromProps(mat);
              }
          }
      }
      if(this.data.hasMask){
          this.maskManager.renderFrame(finalMat);
      }
  
      if(parentTransform){
          mat = parentTransform.mat.props;
          finalMat.cloneFromProps(mat);
          this.finalTransform.opacity *= parentTransform.opacity;
          this.finalTransform.opMdf = parentTransform.opMdf ? true : this.finalTransform.opMdf;
          this.finalTransform.matMdf = parentTransform.matMdf ? true : this.finalTransform.matMdf
      }
  
      if(this.finalTransform.matMdf){
          this.transformedElement.style.transform = this.transformedElement.style.webkitTransform = finalMat.toCSS();
          this.finalMat = finalMat;
      }
      if(this.finalTransform.opMdf){
          this.transformedElement.style.opacity = this.finalTransform.opacity;
      }
      return this.isVisible;
  };
  
  HBaseElement.prototype.destroy = function(){
      this.layerElement = null;
      this.transformedElement = null;
      this.parentContainer = null;
      if(this.matteElement) {
          this.matteElement = null;
      }
      if(this.maskManager) {
          this.maskManager.destroy();
          this.maskManager = null;
      }
  };
  
  HBaseElement.prototype.getDomElement = function(){
      return this.layerElement;
  };
  HBaseElement.prototype.addMasks = function(data){
      this.maskManager = new MaskElement(data,this,this.globalData);
  };
  
  HBaseElement.prototype.hide = function(){
  };
  
  HBaseElement.prototype.setMatte = function(){
  
  }
  
  HBaseElement.prototype.buildElementParenting = HybridRenderer.prototype.buildElementParenting;
  function HSolidElement(data,parentContainer,globalData,comp, placeholder){
      this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
  }
  createElement(HBaseElement, HSolidElement);
  
  HSolidElement.prototype.createElements = function(){
      var parent = document.createElement('div');
      styleDiv(parent);
      var cont = document.createElementNS(svgNS,'svg');
      styleDiv(cont);
      cont.setAttribute('width',this.data.sw);
      cont.setAttribute('height',this.data.sh);
      parent.appendChild(cont);
      this.layerElement = parent;
      this.transformedElement = parent;
      //this.appendNodeToParent(parent);
      this.baseElement = parent;
      this.innerElem = parent;
      if(this.data.ln){
          this.innerElem.setAttribute('id',this.data.ln);
      }
      if(this.data.bm !== 0){
          this.setBlendMode();
      }
      var rect = document.createElementNS(svgNS,'rect');
      rect.setAttribute('width',this.data.sw);
      rect.setAttribute('height',this.data.sh);
      rect.setAttribute('fill',this.data.sc);
      cont.appendChild(rect);
      if(this.data.hasMask){
          this.maskedElement = rect;
      }
      this.checkParenting();
  };
  
  
  
  HSolidElement.prototype.hide = SVGBaseElement.prototype.hide;
  HSolidElement.prototype.show = SVGBaseElement.prototype.show;
  HSolidElement.prototype.renderFrame = IImageElement.prototype.renderFrame;
  HSolidElement.prototype.destroy = IImageElement.prototype.destroy;
  function HCompElement(data,parentContainer,globalData,comp, placeholder){
      this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
      this.layers = data.layers;
      this.supports3d = true;
      this.completeLayers = false;
      this.pendingElements = [];
      this.elements = Array.apply(null,{length:this.layers.length});
      if(this.data.tm){
          this.tm = PropertyFactory.getProp(this,this.data.tm,0,globalData.frameRate,this.dynamicProperties);
      }
      if(this.data.hasMask) {
          this.supports3d = false;
      }
      if(this.data.xt){
          this.layerElement = document.createElement('div');
      }
      this.buildAllItems();
  
  }
  createElement(HBaseElement, HCompElement);
  
  HCompElement.prototype.createElements = function(){
      var divElement = document.createElement('div');
      styleDiv(divElement);
      if(this.data.ln){
          divElement.setAttribute('id',this.data.ln);
      }
      divElement.style.clip = 'rect(0px, '+this.data.w+'px, '+this.data.h+'px, 0px)';
      if(this.data.hasMask){
          var compSvg = document.createElementNS(svgNS,'svg');
          styleDiv(compSvg);
          compSvg.setAttribute('width',this.data.w);
          compSvg.setAttribute('height',this.data.h);
          var g = document.createElementNS(svgNS,'g');
          compSvg.appendChild(g);
          divElement.appendChild(compSvg);
          this.maskedElement = g;
          this.baseElement = divElement;
          this.layerElement = g;
          this.transformedElement = divElement;
      }else{
          this.layerElement = divElement;
          this.baseElement = this.layerElement;
          this.transformedElement = divElement;
      }
      //this.appendNodeToParent(this.layerElement);
      this.checkParenting();
  };
  
  HCompElement.prototype.hide = ICompElement.prototype.hide;
  HCompElement.prototype.prepareFrame = ICompElement.prototype.prepareFrame;
  HCompElement.prototype.setElements = ICompElement.prototype.setElements;
  HCompElement.prototype.getElements = ICompElement.prototype.getElements;
  HCompElement.prototype.destroy = ICompElement.prototype.destroy;
  
  HCompElement.prototype.renderFrame = function(parentMatrix){
      var renderParent = this._parent.renderFrame.call(this,parentMatrix);
      var i,len = this.layers.length;
      if(renderParent===false){
          this.hide();
          return;
      }
  
      this.hidden = false;
  
      for( i = 0; i < len; i+=1 ){
          if(this.completeLayers || this.elements[i]){
              this.elements[i].renderFrame();
          }
      }
      if(this.firstFrame){
          this.firstFrame = false;
      }
  };
  
  HCompElement.prototype.checkLayers = BaseRenderer.prototype.checkLayers;
  HCompElement.prototype.buildItem = HybridRenderer.prototype.buildItem;
  HCompElement.prototype.checkPendingElements = HybridRenderer.prototype.checkPendingElements;
  HCompElement.prototype.addPendingElement = HybridRenderer.prototype.addPendingElement;
  HCompElement.prototype.buildAllItems = BaseRenderer.prototype.buildAllItems;
  HCompElement.prototype.createItem = HybridRenderer.prototype.createItem;
  HCompElement.prototype.buildElementParenting = HybridRenderer.prototype.buildElementParenting;
  HCompElement.prototype.createImage = HybridRenderer.prototype.createImage;
  HCompElement.prototype.createComp = HybridRenderer.prototype.createComp;
  HCompElement.prototype.createSolid = HybridRenderer.prototype.createSolid;
  HCompElement.prototype.createShape = HybridRenderer.prototype.createShape;
  HCompElement.prototype.createText = HybridRenderer.prototype.createText;
  HCompElement.prototype.createBase = HybridRenderer.prototype.createBase;
  HCompElement.prototype.appendElementInPos = HybridRenderer.prototype.appendElementInPos;
  function HShapeElement(data,parentContainer,globalData,comp, placeholder){
      this.shapes = [];
      this.shapeModifiers = [];
      this.shapesData = data.shapes;
      this.stylesList = [];
      this.viewData = [];
      this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
      this.addedTransforms = {
          mdf: false,
          mats: [this.finalTransform.mat]
      };
      this.currentBBox = {
          x:999999,
          y: -999999,
          h: 0,
          w: 0
      };
  }
  createElement(HBaseElement, HShapeElement);
  var parent = HShapeElement.prototype._parent;
  extendPrototype(IShapeElement, HShapeElement);
  HShapeElement.prototype._parent = parent;
  
  HShapeElement.prototype.createElements = function(){
      var parent = document.createElement('div');
      styleDiv(parent);
      var cont = document.createElementNS(svgNS,'svg');
      styleDiv(cont);
      var size = this.comp.data ? this.comp.data : this.globalData.compSize;
      cont.setAttribute('width',size.w);
      cont.setAttribute('height',size.h);
      if(this.data.hasMask){
          var g = document.createElementNS(svgNS,'g');
          parent.appendChild(cont);
          cont.appendChild(g);
          this.maskedElement = g;
          this.layerElement = g;
          this.shapesContainer = g;
      }else{
          parent.appendChild(cont);
          this.layerElement = cont;
          this.shapesContainer = document.createElementNS(svgNS,'g');
          this.layerElement.appendChild(this.shapesContainer);
      }
      if(!this.data.hd){
          //this.parentContainer.appendChild(parent);
          this.baseElement = parent;
      }
      this.innerElem = parent;
      if(this.data.ln){
          this.innerElem.setAttribute('id',this.data.ln);
      }
      this.searchShapes(this.shapesData,this.viewData,this.layerElement,this.dynamicProperties,0);
      this.buildExpressionInterface();
      this.layerElement = parent;
      this.transformedElement = parent;
      this.shapeCont = cont;
      if(this.data.bm !== 0){
          this.setBlendMode();
      }
      this.checkParenting();
  };
  
  HShapeElement.prototype.renderFrame = function(parentMatrix){
      var renderParent = this._parent.renderFrame.call(this,parentMatrix);
      if(renderParent===false){
          this.hide();
          return;
      }
      if(this.hidden){
          this.layerElement.style.display = 'block';
          this.hidden = false;
      }
      this.renderModifiers();
      this.addedTransforms.mdf = this.finalTransform.matMdf;
      this.addedTransforms.mats.length = 1;
      this.addedTransforms.mats[0] = this.finalTransform.mat;
      this.renderShape(null,null,true, null);
  
      if(this.isVisible && (this.elemMdf || this.firstFrame)){
          var boundingBox = this.shapeCont.getBBox();
          var changed = false;
          if(this.currentBBox.w !== boundingBox.width){
              this.currentBBox.w = boundingBox.width;
              this.shapeCont.setAttribute('width',boundingBox.width);
              changed = true;
          }
          if(this.currentBBox.h !== boundingBox.height){
              this.currentBBox.h = boundingBox.height;
              this.shapeCont.setAttribute('height',boundingBox.height);
              changed = true;
          }
          if(changed  || this.currentBBox.x !== boundingBox.x  || this.currentBBox.y !== boundingBox.y){
              this.currentBBox.w = boundingBox.width;
              this.currentBBox.h = boundingBox.height;
              this.currentBBox.x = boundingBox.x;
              this.currentBBox.y = boundingBox.y;
  
              this.shapeCont.setAttribute('viewBox',this.currentBBox.x+' '+this.currentBBox.y+' '+this.currentBBox.w+' '+this.currentBBox.h);
              this.shapeCont.style.transform = this.shapeCont.style.webkitTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
          }
      }
  
  };
  function HTextElement(data,parentContainer,globalData,comp, placeholder){
      this.textSpans = [];
      this.textPaths = [];
      this.currentBBox = {
          x:999999,
          y: -999999,
          h: 0,
          w: 0
      }
      this.renderType = 'svg';
      this.isMasked = false;
      this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
  
  }
  createElement(HBaseElement, HTextElement);
  
  HTextElement.prototype.init = ITextElement.prototype.init;
  HTextElement.prototype.getMeasures = ITextElement.prototype.getMeasures;
  HTextElement.prototype.createPathShape = ITextElement.prototype.createPathShape;
  HTextElement.prototype.prepareFrame = ITextElement.prototype.prepareFrame;
  
  HTextElement.prototype.createElements = function(){
      this.isMasked = this.checkMasks();
      var parent = document.createElement('div');
      styleDiv(parent);
      this.layerElement = parent;
      this.transformedElement = parent;
      if(this.isMasked){
          this.renderType = 'svg';
          var cont = document.createElementNS(svgNS,'svg');
          styleDiv(cont);
          this.cont = cont;
          this.compW = this.comp.data.w;
          this.compH = this.comp.data.h;
          cont.setAttribute('width',this.compW);
          cont.setAttribute('height',this.compH);
          var g = document.createElementNS(svgNS,'g');
          cont.appendChild(g);
          parent.appendChild(cont);
          this.maskedElement = g;
          this.innerElem = g;
      } else {
          this.renderType = 'html';
          this.innerElem = parent;
      }
      this.baseElement = parent;
  
      this.checkParenting();
  
  };
  
  HTextElement.prototype.buildNewText = function(){
      var documentData = this.currentTextDocumentData;
      this.renderedLetters = Array.apply(null,{length:this.currentTextDocumentData.l ? this.currentTextDocumentData.l.length : 0});
      if(documentData.fc) {
          this.innerElem.style.color = this.innerElem.style.fill = 'rgb(' + Math.round(documentData.fc[0]*255) + ',' + Math.round(documentData.fc[1]*255) + ',' + Math.round(documentData.fc[2]*255) + ')';
          ////this.innerElem.setAttribute('fill', 'rgb(' + documentData.fc[0] + ',' + documentData.fc[1] + ',' + documentData.fc[2] + ')');
      }else{
          this.innerElem.style.color = this.innerElem.style.fill = 'rgba(0,0,0,0)';
          ////this.innerElem.setAttribute('fill', 'rgba(0,0,0,0)');
      }
      if(documentData.sc){
          ////this.innerElem.setAttribute('stroke', 'rgb(' + documentData.sc[0] + ',' + documentData.sc[1] + ',' + documentData.sc[2] + ')');
          this.innerElem.style.stroke = 'rgb(' + Math.round(documentData.sc[0]*255) + ',' + Math.round(documentData.sc[1]*255) + ',' + Math.round(documentData.sc[2]*255) + ')';
          ////this.innerElem.setAttribute('stroke-width', documentData.sw);
          this.innerElem.style.strokeWidth = documentData.sw+'px';
      }
      ////this.innerElem.setAttribute('font-size', documentData.s);
      var fontData = this.globalData.fontManager.getFontByName(documentData.f);
      if(!this.globalData.fontManager.chars){
          this.innerElem.style.fontSize = documentData.s+'px';
          this.innerElem.style.lineHeight = documentData.s+'px';
          if(fontData.fClass){
              this.innerElem.className = fontData.fClass;
          } else {
              ////this.innerElem.setAttribute('font-family', fontData.fFamily);
              this.innerElem.style.fontFamily = fontData.fFamily;
              var fWeight = documentData.fWeight, fStyle = documentData.fStyle;
              ////this.innerElem.setAttribute('font-style', fStyle);
              this.innerElem.style.fontStyle = fStyle;
              ////this.innerElem.setAttribute('font-weight', fWeight);
              this.innerElem.style.fontWeight = fWeight;
          }
      }
      var i, len;
  
      var letters = documentData.l;
      len = letters.length;
      var tSpan,tParent,tCont;
      var matrixHelper = this.mHelper;
      var shapes, shapeStr = '';
      var cnt = 0;
      for (i = 0;i < len ;i += 1) {
          if(this.globalData.fontManager.chars){
              if(!this.textPaths[cnt]){
                  tSpan = document.createElementNS(svgNS,'path');
                  tSpan.setAttribute('stroke-linecap', 'butt');
                  tSpan.setAttribute('stroke-linejoin','round');
                  tSpan.setAttribute('stroke-miterlimit','4');
              } else {
                  tSpan = this.textPaths[cnt];
              }
              if(!this.isMasked){
                  if(this.textSpans[cnt]){
                      tParent = this.textSpans[cnt];
                      tCont = tParent.children[0];
                  } else {
  
                      tParent = document.createElement('div');
                      tCont = document.createElementNS(svgNS,'svg');
                      tCont.appendChild(tSpan);
                      styleDiv(tParent);
                  }
              }
          }else{
              if(!this.isMasked){
                  if(this.textSpans[cnt]){
                      tParent = this.textSpans[cnt];
                      tSpan = this.textPaths[cnt];
                  } else {
                      tParent = document.createElement('span');
                      styleDiv(tParent);
                      tSpan = document.createElement('span');
                      styleDiv(tSpan);
                      tParent.appendChild(tSpan);
                  }
              } else {
                  tSpan = this.textPaths[cnt] ? this.textPaths[cnt] : document.createElementNS(svgNS,'text');
              }
          }
          //tSpan.setAttribute('visibility', 'hidden');
          if(this.globalData.fontManager.chars){
              var charData = this.globalData.fontManager.getCharData(documentData.t.charAt(i), fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
              var shapeData;
              if(charData){
                  shapeData = charData.data;
              } else {
                  shapeData = null;
              }
              matrixHelper.reset();
              if(shapeData && shapeData.shapes){
                  shapes = shapeData.shapes[0].it;
                  matrixHelper.scale(documentData.s/100,documentData.s/100);
                  shapeStr = this.createPathShape(matrixHelper,shapes);
                  tSpan.setAttribute('d',shapeStr);
              }
              if(!this.isMasked){
                  this.innerElem.appendChild(tParent);
                  if(shapeData && shapeData.shapes){
                      document.body.appendChild(tCont);
  
                      var boundingBox = tCont.getBBox();
                      tCont.setAttribute('width',boundingBox.width);
                      tCont.setAttribute('height',boundingBox.height);
                      tCont.setAttribute('viewBox',boundingBox.x+' '+ boundingBox.y+' '+ boundingBox.width+' '+ boundingBox.height);
                      tCont.style.transform = tCont.style.webkitTransform = 'translate(' + boundingBox.x + 'px,' + boundingBox.y + 'px)';
  
                      letters[i].yOffset = boundingBox.y;
                      tParent.appendChild(tCont);
  
                  } else{
                      tCont.setAttribute('width',1);
                      tCont.setAttribute('height',1);
                  }
              }else{
                  this.innerElem.appendChild(tSpan);
              }
          }else{
              tSpan.textContent = letters[i].val;
              tSpan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space","preserve");
              if(!this.isMasked){
                  this.innerElem.appendChild(tParent);
                  //
                  tSpan.style.transform = tSpan.style.webkitTransform = 'translate3d(0,'+ -documentData.s/1.2+'px,0)';
              } else {
                  this.innerElem.appendChild(tSpan);
              }
          }
          //
          if(!this.isMasked){
              this.textSpans[cnt] = tParent;
          }else{
              this.textSpans[cnt] = tSpan;
          }
          this.textSpans[cnt].style.display = 'block';
          this.textPaths[cnt] = tSpan;
          cnt += 1;
      }
      while(cnt < this.textSpans.length){
          this.textSpans[cnt].style.display = 'none';
          cnt += 1;
      }
  }
  
  HTextElement.prototype.hide = SVGTextElement.prototype.hide;
  
  HTextElement.prototype.renderFrame = function(parentMatrix){
  
      var renderParent = this._parent.renderFrame.call(this,parentMatrix);
      if(renderParent===false){
          this.hide();
          return;
      }
      if(this.hidden){
          this.hidden = false;
          this.innerElem.style.display = 'block';
          this.layerElement.style.display = 'block';
      }
  
      if(this.data.singleShape){
          if(!this.firstFrame && !this.lettersChangedFlag){
              return;
          } else {
              // Todo Benchmark if using this is better than getBBox
               if(this.isMasked && this.finalTransform.matMdf){
                   this.cont.setAttribute('viewBox',-this.finalTransform.mProp.p.v[0]+' '+ -this.finalTransform.mProp.p.v[1]+' '+this.compW+' '+this.compH);
                  this.cont.style.transform = this.cont.style.webkitTransform = 'translate(' + -this.finalTransform.mProp.p.v[0] + 'px,' + -this.finalTransform.mProp.p.v[1] + 'px)';
               }
          }
      }
  
      this.getMeasures();
      if(!this.lettersChangedFlag){
          return;
      }
      var  i,len;
      var renderedLetters = this.renderedLetters;
  
      var letters = this.currentTextDocumentData.l;
  
      len = letters.length;
      var renderedLetter;
      for(i=0;i<len;i+=1){
          if(letters[i].n){
              continue;
          }
          renderedLetter = renderedLetters[i];
          if(!this.isMasked){
              this.textSpans[i].style.transform = this.textSpans[i].style.webkitTransform = renderedLetter.m;
          }else{
              this.textSpans[i].setAttribute('transform',renderedLetter.m);
          }
          ////this.textSpans[i].setAttribute('opacity',renderedLetter.o);
          this.textSpans[i].style.opacity = renderedLetter.o;
          if(renderedLetter.sw){
              this.textPaths[i].setAttribute('stroke-width',renderedLetter.sw);
          }
          if(renderedLetter.sc){
              this.textPaths[i].setAttribute('stroke',renderedLetter.sc);
          }
          if(renderedLetter.fc){
              this.textPaths[i].setAttribute('fill',renderedLetter.fc);
              this.textPaths[i].style.color = renderedLetter.fc;
          }
      }
      if(this.isVisible && (this.elemMdf || this.firstFrame)){
          if(this.innerElem.getBBox){
              var boundingBox = this.innerElem.getBBox();
  
              if(this.currentBBox.w !== boundingBox.width){
                  this.currentBBox.w = boundingBox.width;
                  this.cont.setAttribute('width',boundingBox.width);
              }
              if(this.currentBBox.h !== boundingBox.height){
                  this.currentBBox.h = boundingBox.height;
                  this.cont.setAttribute('height',boundingBox.height);
              }
              if(this.currentBBox.w !== boundingBox.width || this.currentBBox.h !== boundingBox.height  || this.currentBBox.x !== boundingBox.x  || this.currentBBox.y !== boundingBox.y){
                  this.currentBBox.w = boundingBox.width;
                  this.currentBBox.h = boundingBox.height;
                  this.currentBBox.x = boundingBox.x;
                  this.currentBBox.y = boundingBox.y;
  
                  this.cont.setAttribute('viewBox',this.currentBBox.x+' '+this.currentBBox.y+' '+this.currentBBox.w+' '+this.currentBBox.h);
                  this.cont.style.transform = this.cont.style.webkitTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
              }
          }
      }
      if(this.firstFrame){
          this.firstFrame = false;
      }
  }
  
  
  HTextElement.prototype.destroy = SVGTextElement.prototype.destroy;
  function HImageElement(data,parentContainer,globalData,comp, placeholder){
      this.assetData = globalData.getAssetData(data.refId);
      this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
  }
  createElement(HBaseElement, HImageElement);
  
  HImageElement.prototype.createElements = function(){
  
      var assetPath = this.globalData.getAssetsPath(this.assetData);
      var img = new Image();
  
      if(this.data.hasMask){
          var parent = document.createElement('div');
          styleDiv(parent);
          var cont = document.createElementNS(svgNS,'svg');
          styleDiv(cont);
          cont.setAttribute('width',this.assetData.w);
          cont.setAttribute('height',this.assetData.h);
          parent.appendChild(cont);
          this.imageElem = document.createElementNS(svgNS,'image');
          this.imageElem.setAttribute('width',this.assetData.w+"px");
          this.imageElem.setAttribute('height',this.assetData.h+"px");
          this.imageElem.setAttributeNS('http://www.w3.org/1999/xlink','href',assetPath);
          cont.appendChild(this.imageElem);
          this.layerElement = parent;
          this.transformedElement = parent;
          this.baseElement = parent;
          this.innerElem = parent;
          this.maskedElement = this.imageElem;
      } else {
          styleDiv(img);
          this.layerElement = img;
          this.baseElement = img;
          this.innerElem = img;
          this.transformedElement = img;
      }
      img.src = assetPath;
      if(this.data.ln){
          this.innerElem.setAttribute('id',this.data.ln);
      }
      this.checkParenting();
  };
  
  HImageElement.prototype.hide = HSolidElement.prototype.hide;
  HImageElement.prototype.renderFrame = HSolidElement.prototype.renderFrame;
  HImageElement.prototype.destroy = HSolidElement.prototype.destroy;
  function HCameraElement(data,parentContainer,globalData,comp, placeholder){
      this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
      this.pe = PropertyFactory.getProp(this,data.pe,0,0,this.dynamicProperties);
      if(data.ks.p.s){
          this.px = PropertyFactory.getProp(this,data.ks.p.x,1,0,this.dynamicProperties);
          this.py = PropertyFactory.getProp(this,data.ks.p.y,1,0,this.dynamicProperties);
          this.pz = PropertyFactory.getProp(this,data.ks.p.z,1,0,this.dynamicProperties);
      }else{
          this.p = PropertyFactory.getProp(this,data.ks.p,1,0,this.dynamicProperties);
      }
      if(data.ks.a){
          this.a = PropertyFactory.getProp(this,data.ks.a,1,0,this.dynamicProperties);
      }
      if(data.ks.or.k.length && data.ks.or.k[0].to){
          var i,len = data.ks.or.k.length;
          for(i=0;i<len;i+=1){
              data.ks.or.k[i].to = null;
              data.ks.or.k[i].ti = null;
          }
      }
      this.or = PropertyFactory.getProp(this,data.ks.or,1,degToRads,this.dynamicProperties);
      this.or.sh = true;
      this.rx = PropertyFactory.getProp(this,data.ks.rx,0,degToRads,this.dynamicProperties);
      this.ry = PropertyFactory.getProp(this,data.ks.ry,0,degToRads,this.dynamicProperties);
      this.rz = PropertyFactory.getProp(this,data.ks.rz,0,degToRads,this.dynamicProperties);
      this.mat = new Matrix();
  }
  createElement(HBaseElement, HCameraElement);
  
  HCameraElement.prototype.setup = function() {
      var i, len = this.comp.threeDElements.length, comp;
      for(i=0;i<len;i+=1){
          //[perspectiveElem,container]
          comp = this.comp.threeDElements[i];
          comp.perspectiveElem.style.perspective = comp.perspectiveElem.style.webkitPerspective = this.pe.v+'px';
          comp.container.style.transformOrigin = comp.container.style.mozTransformOrigin = comp.container.style.webkitTransformOrigin = "0px 0px 0px";
          comp.perspectiveElem.style.transform = comp.perspectiveElem.style.webkitTransform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
      }
  };
  
  HCameraElement.prototype.createElements = function(){
  };
  
  HCameraElement.prototype.hide = function(){
  };
  
  HCameraElement.prototype.renderFrame = function(){
      var mdf = this.firstFrame;
      var i, len;
      if(this.hierarchy){
          len = this.hierarchy.length;
          for(i=0;i<len;i+=1){
              mdf = this.hierarchy[i].finalTransform.mProp.mdf ? true : mdf;
          }
      }
      if(mdf || (this.p && this.p.mdf) || (this.px && (this.px.mdf || this.py.mdf || this.pz.mdf)) || this.rx.mdf || this.ry.mdf || this.rz.mdf || this.or.mdf || (this.a && this.a.mdf)) {
          this.mat.reset();
  
          if(this.p){
              this.mat.translate(-this.p.v[0],-this.p.v[1],this.p.v[2]);
          }else{
              this.mat.translate(-this.px.v,-this.py.v,this.pz.v);
          }
          if(this.a){
              var diffVector = [this.p.v[0]-this.a.v[0],this.p.v[1]-this.a.v[1],this.p.v[2]-this.a.v[2]];
              var mag = Math.sqrt(Math.pow(diffVector[0],2)+Math.pow(diffVector[1],2)+Math.pow(diffVector[2],2));
              //var lookDir = getNormalizedPoint(getDiffVector(this.a.v,this.p.v));
              var lookDir = [diffVector[0]/mag,diffVector[1]/mag,diffVector[2]/mag];
              var lookLengthOnXZ = Math.sqrt( lookDir[2]*lookDir[2] + lookDir[0]*lookDir[0] );
              var m_rotationX = (Math.atan2( lookDir[1], lookLengthOnXZ ));
              var m_rotationY = (Math.atan2( lookDir[0], -lookDir[2]));
              this.mat.rotateY(m_rotationY).rotateX(-m_rotationX);
  
          }
          this.mat.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v);
          this.mat.rotateX(-this.or.v[0]).rotateY(-this.or.v[1]).rotateZ(this.or.v[2]);
          this.mat.translate(this.globalData.compSize.w/2,this.globalData.compSize.h/2,0);
          this.mat.translate(0,0,this.pe.v);
          if(this.hierarchy){
              var mat;
              len = this.hierarchy.length;
              for(i=0;i<len;i+=1){
                  mat = this.hierarchy[i].finalTransform.mProp.iv.props;
                  this.mat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5],mat[6],mat[7],mat[8],mat[9],mat[10],mat[11],-mat[12],-mat[13],mat[14],mat[15]);
              }
          }
          len = this.comp.threeDElements.length;
          var comp;
          for(i=0;i<len;i+=1){
              comp = this.comp.threeDElements[i];
              comp.container.style.transform = comp.container.style.webkitTransform = this.mat.toCSS();
          }
      }
      this.firstFrame = false;
  };
  
  HCameraElement.prototype.destroy = function(){
  };
  var Expressions = (function(){
      var ob = {};
      ob.initExpressions = initExpressions;
  
  
      function initExpressions(animation){
          animation.renderer.compInterface = CompExpressionInterface(animation.renderer);
          animation.renderer.globalData.projectInterface.registerComposition(animation.renderer);
      }
     return ob;
  }());
  
  expressionsPlugin = Expressions;
  
  (function addPropertyDecorator() {
  
      function getStaticValueAtTime() {
          return this.pv;
      }
  
      function getValueAtTime(frameNum, offsetTime) {
          frameNum *= this.elem.globalData.frameRate;
          var i = 0,len = this.keyframes.length- 1,dir= 1,flag = true;
          var keyData, nextKeyData;
          offsetTime = offsetTime === undefined ? this.offsetTime : 0;
          //console.log(this.offsetTime);
          var retVal = typeof this.pv === 'object' ? [this.pv.length] : 0;
  
          while(flag){
              keyData = this.keyframes[i];
              nextKeyData = this.keyframes[i+1];
              if(i == len-1 && frameNum >= nextKeyData.t - offsetTime){
                  if(keyData.h){
                      keyData = nextKeyData;
                  }
                  break;
              }
              if((nextKeyData.t - offsetTime) > frameNum){
                  break;
              }
              if(i < len - 1){
                  i += dir;
              }else{
                  flag = false;
              }
          }
  
          var k, kLen,perc,jLen, j = 0, fnc;
          if (keyData.to) {
  
              if (!keyData.bezierData) {
                  bez.buildBezierData(keyData);
              }
              var bezierData = keyData.bezierData;
              if (frameNum >= nextKeyData.t-offsetTime || frameNum < keyData.t-offsetTime) {
                  var ind = frameNum >= nextKeyData.t-offsetTime ? bezierData.points.length - 1 : 0;
                  kLen = bezierData.points[ind].point.length;
                  for(k = 0; k < kLen; k += 1){
                      retVal[k] = bezierData.points[ind].point[k];
                  }
              } else {
                  if (keyData.__fnct) {
                      fnc = keyData.__fnct;
                  } else {
                      //fnc = bez.getEasingCurve(keyData.o.x,keyData.o.y,keyData.i.x,keyData.i.y,keyData.n);
                      fnc = BezierFactory.getBezierEasing(keyData.o.x, keyData.o.y, keyData.i.x, keyData.i.y, keyData.n).get;
                      keyData.__fnct = fnc;
                  }
                  perc = fnc((frameNum - (keyData.t - offsetTime)) / ((nextKeyData.t - offsetTime) - (keyData.t - offsetTime)));
                  var distanceInLine = bezierData.segmentLength * perc;
  
                  var segmentPerc;
                  var addedLength = 0;
                  dir = 1;
                  flag = true;
                  jLen = bezierData.points.length;
                  while(flag) {
                      addedLength += bezierData.points[j].partialLength*dir;
                      if (distanceInLine === 0 || perc === 0 || j == bezierData.points.length - 1) {
                          kLen = bezierData.points[j].point.length;
                          for (k = 0; k < kLen; k += 1) {
                              retVal[k] = bezierData.points[j].point[k];
                          }
                          break;
                      } else if (distanceInLine >= addedLength && distanceInLine < addedLength + bezierData.points[j+1].partialLength){
                          segmentPerc = (distanceInLine - addedLength) / (bezierData.points[j + 1].partialLength);
                          kLen = bezierData.points[j].point.length;
                          for (k = 0; k < kLen; k += 1) {
                              retVal[k] = bezierData.points[j].point[k] + (bezierData.points[j+1].point[k] - bezierData.points[j].point[k]) * segmentPerc;
                          }
                          break;
                      }
                      if (j < jLen - 1 && dir == 1 || j > 0 && dir == -1) {
                          j += dir;
                      } else {
                          flag = false;
                      }
                  }
              }
          } else {
              var outX,outY,inX,inY, isArray = false, keyValue;
              len = keyData.s.length;
              for(i=0;i<len;i+=1){
                  if(keyData.h !== 1){
                      if(keyData.o.x instanceof Array){
                          isArray = true;
                          if(!keyData.__fnct){
                              keyData.__fnct = [];
                          }
                          if(!keyData.__fnct[i]){
                              outX = keyData.o.x[i] || keyData.o.x[0];
                              outY = keyData.o.y[i] || keyData.o.y[0];
                              inX = keyData.i.x[i] || keyData.i.x[0];
                              inY = keyData.i.y[i] || keyData.i.y[0];
                          }
                      }else{
                          isArray = false;
                          if(!keyData.__fnct) {
                              outX = keyData.o.x;
                              outY = keyData.o.y;
                              inX = keyData.i.x;
                              inY = keyData.i.y;
                          }
                      }
                      if(isArray){
                          if(keyData.__fnct[i]){
                              fnc = keyData.__fnct[i];
                          }else{
                              //fnc = bez.getEasingCurve(outX,outY,inX,inY);
                              fnc = BezierFactory.getBezierEasing(outX,outY,inX,inY).get;
                              keyData.__fnct[i] = fnc;
                          }
                      }else{
                          if(keyData.__fnct){
                              fnc = keyData.__fnct;
                          }else{
                              //fnc = bez.getEasingCurve(outX,outY,inX,inY);
                              fnc = BezierFactory.getBezierEasing(outX,outY,inX,inY).get;
                              keyData.__fnct = fnc;
                          }
                      }
                      if(frameNum >= nextKeyData.t-offsetTime){
                          perc = 1;
                      }else if(frameNum < keyData.t-offsetTime){
                          perc = 0;
                      }else{
                          perc = fnc((frameNum-(keyData.t-offsetTime))/((nextKeyData.t-offsetTime)-(keyData.t-offsetTime)));
                      }
                  }
                  if(this.sh && keyData.h !== 1){
                      var initP = keyData.s[i];
                      var endP = keyData.e[i];
                      if(initP-endP < -180){
                          initP += 360;
                      } else if(initP-endP > 180){
                          initP -= 360;
                      }
                      keyValue = initP+(endP-initP)*perc;
                  } else {
                      keyValue = keyData.h === 1 ? keyData.s[i] : keyData.s[i]+(keyData.e[i]-keyData.s[i])*perc;
                  }
                  if(len === 1){
                      retVal = keyValue;
                  }else{
                      retVal[i] = keyValue;
                  }
              }
          }
          return retVal;
      }
  
      function getVelocityAtTime(frameNum) {
          if(this.vel !== undefined){
              return this.vel;
          }
          var delta = -0.01;
          //frameNum += this.elem.data.st;
          var v1 = this.getValueAtTime(frameNum, 0);
          var v2 = this.getValueAtTime(frameNum + delta, 0);
          var velocity;
          if(v1.length){
              velocity = Array.apply(null,{length:v1.length});
              var i;
              for(i=0;i<v1.length;i+=1){
                  //removing frameRate
                  //if needed, don't add it here
                  //velocity[i] = this.elem.globalData.frameRate*((v2[i] - v1[i])/delta);
                  velocity[i] = (v2[i] - v1[i])/delta;
              }
          } else {
              velocity = (v2 - v1)/delta;
          }
          return velocity;
      };
  
      function setGroupProperty(propertyGroup){
          this.propertyGroup = propertyGroup;
      }
  
      function searchExpressions(elem,data,prop){
          if(data.x){
              prop.k = true;
              prop.x = true;
              if(prop.getValue) {
                  prop.getPreValue = prop.getValue;
              }
              prop.getValue = ExpressionManager.initiateExpression.bind(prop)(elem,data,prop);
          }
      }
  
      function getTransformValueAtTime(time) {
          console.log('time:', time)
      }
  
      function getTransformStaticValueAtTime(time) {
  
      }
  
      var TextExpressionSelectorProp = (function(){
  
          function getValueProxy(index,total){
              this.textIndex = index+1;
              this.textTotal = total;
              this.getValue();
              return this.v;
          }
  
          return function TextExpressionSelectorProp(elem,data){
              this.pv = 1;
              this.comp = elem.comp;
              this.elem = elem;
              this.mult = .01;
              this.type = 'textSelector';
              this.textTotal = data.totalChars;
              this.selectorValue = 100;
              this.lastValue = [1,1,1];
              searchExpressions.bind(this)(elem,data,this);
              this.getMult = getValueProxy;
              this.getVelocityAtTime = getVelocityAtTime;
              if(this.kf){
                  this.getValueAtTime = getValueAtTime.bind(this);
              } else {
                  this.getValueAtTime = getStaticValueAtTime.bind(this);
              }
              this.setGroupProperty = setGroupProperty;
          }
      }());
  
  
      var propertyGetProp = PropertyFactory.getProp;
      PropertyFactory.getProp = function(elem,data,type, mult, arr){
          var prop = propertyGetProp(elem,data,type, mult, arr);
          prop.getVelocityAtTime = getVelocityAtTime;
          if(type === 2) {
              if(prop.dynamicProperties.length) {
                  prop.getValueAtTime = getTransformValueAtTime.bind(prop);
              } else {
                  prop.getValueAtTime = getTransformStaticValueAtTime.bind(prop);
              }
          } else {
              if(prop.kf){
                  prop.getValueAtTime = getValueAtTime.bind(prop);
              } else {
                  prop.getValueAtTime = getStaticValueAtTime.bind(prop);
              }
          }
          prop.setGroupProperty = setGroupProperty;
          var isAdded = prop.k;
          if(data.ix !== undefined){
              Object.defineProperty(prop,'propertyIndex',{
                  get: function(){
                      return data.ix;
                  }
              })
          }
          searchExpressions(elem,data,prop);
          if(!isAdded && prop.x){
              arr.push(prop);
          }
  
          return prop;
      }
  
      var propertyGetShapeProp = ShapePropertyFactory.getShapeProp;
      ShapePropertyFactory.getShapeProp = function(elem,data,type, arr, trims){
          var prop = propertyGetShapeProp(elem,data,type, arr, trims);
          prop.setGroupProperty = setGroupProperty;
          if(prop.kf){
              prop.getValueAtTime = getValueAtTime;
          } else {
              prop.getValueAtTime = getStaticValueAtTime;
          }
          var isAdded = prop.k;
          if(data.ix !== undefined){
              Object.defineProperty(prop,'propertyIndex',{
                  get: function(){
                      return data.ix;
                  }
              })
          }
          if(type === 3){
              searchExpressions(elem,data.pt,prop);
          } else if(type === 4){
              searchExpressions(elem,data.ks,prop);
          }
          if(!isAdded && prop.x){
              arr.push(prop);
          }
          return prop;
      }
  
      var propertyGetTextProp = PropertyFactory.getTextSelectorProp;
      PropertyFactory.getTextSelectorProp = function(elem, data,arr){
          if(data.t === 1){
              return new TextExpressionSelectorProp(elem, data,arr);
          } else {
              return propertyGetTextProp(elem,data,arr);
          }
      }
  }());
  var ExpressionManager = (function(){
      var ob = {};
      var Math = BMMath;
      var window = null;
      var document = null;
  
      function duplicatePropertyValue(value, mult){
          mult = mult || 1;
  
          if(typeof value === 'number'  || value instanceof Number){
              return value*mult;
          }else if(value.i){
              return JSON.parse(JSON.stringify(value));
          }else{
              var arr = Array.apply(null,{length:value.length});
              var i, len = value.length;
              for(i=0;i<len;i+=1){
                  arr[i]=value[i]*mult;
              }
              return arr;
          }
      }
  
      function shapesEqual(shape1, shape2) {
          if(shape1._length !== shape2._length || shape1.c !== shape2.c){
              return false;
          }
          var i, len = shape1._length;
          for(i = 0; i < len; i += 1) {
              if(shape1.v[i][0] !== shape2.v[i][0] || shape1.v[i][1] !== shape2.v[i][1]
                  || shape1.o[i][0] !== shape2.o[i][0] || shape1.o[i][1] !== shape2.o[i][1]
                  || shape1.i[i][0] !== shape2.i[i][0] || shape1.i[i][1] !== shape2.i[i][1]){
                  return false;
              }
          }
          return true;
      }
  
      function $bm_neg(a){
          var tOfA = typeof a;
          if(tOfA === 'number' || tOfA === 'boolean'  || a instanceof Number ){
              return -a;
          }
          if(a.constructor === Array){
              var i, lenA = a.length;
              var retArr = [];
              for(i=0;i<lenA;i+=1){
                  retArr[i] = -a[i];
              }
              return retArr;
          }
      }
  
      function sum(a,b) {
          var tOfA = typeof a;
          var tOfB = typeof b;
          if(tOfA === 'string' || tOfB === 'string'){
              return a + b;
          }
          if((tOfA === 'number' || tOfA === 'boolean' || tOfA === 'string' || a instanceof Number) && (tOfB === 'number' || tOfB === 'boolean' || tOfB === 'string'  || b instanceof Number)) {
              return a + b;
          }
          if(a.constructor === Array && (tOfB === 'number' || tOfB === 'boolean' || tOfB === 'string' || b instanceof Number )){
              a[0] = a[0] + b;
              return a;
          }
          if((tOfA === 'number' || tOfA === 'boolean' || tOfA === 'string' || a instanceof Number ) && b.constructor === Array){
              b[0] = a + b[0];
              return b;
          }
          if(a.constructor === Array && b.constructor === Array){
              
              var i = 0, lenA = a.length, lenB = b.length;
              var retArr = [];
              while(i<lenA || i < lenB){
                  if((typeof a[i] === 'number' || a[i] instanceof Number) && (typeof b[i] === 'number' || b[i] instanceof Number)){
                      retArr[i] = a[i] + b[i];
                  }else{
                      retArr[i] = b[i] == undefined ? a[i] : a[i] || b[i];
                  }
                  i += 1;
              }
              return retArr;
          }
          return 0;
      }
      var add = sum;
  
      function sub(a,b) {
          var tOfA = typeof a;
          var tOfB = typeof b;
          if((tOfA === 'number' || tOfA === 'boolean' || tOfA === 'string' || a instanceof Number ) && (tOfB === 'number' || tOfB === 'boolean' || tOfB === 'string' || b instanceof Number )) {
              return a - b;
          }
          if( a.constructor === Array && (tOfB === 'number' || tOfB === 'boolean' || tOfB === 'string' || b instanceof Number )){
              a[0] = a[0] - b;
              return a;
          }
          if((tOfA === 'number' || tOfA === 'boolean' || tOfA === 'string' || a instanceof Number ) &&  b.constructor === Array){
              b[0] = a - b[0];
              return b;
          }
          if(a.constructor === Array && b.constructor === Array){
              var i = 0, lenA = a.length, lenB = b.length;
              var retArr = [];
              while(i<lenA || i < lenB){
                  if((typeof a[i] === 'number' || a[i] instanceof Number) && typeof (typeof b[i] === 'number' || b[i] instanceof Number)){
                      retArr[i] = a[i] - b[i];
                  }else{
                      retArr[i] = b[i] == undefined ? a[i] : a[i] || b[i];
                  }
                  i += 1;
              }
              return retArr;
          }
          return 0;
      }
  
      function mul(a,b) {
          var tOfA = typeof a;
          var tOfB = typeof b;
          var arr;
          if((tOfA === 'number' || tOfA === 'boolean' || tOfA === 'string' || a instanceof Number ) && (tOfB === 'number' || tOfB === 'boolean' || tOfB === 'string' || b instanceof Number )) {
              return a * b;
          }
  
          var i, len;
          if(a.constructor === Array && (tOfB === 'number' || tOfB === 'boolean' || tOfB === 'string' || b instanceof Number )){
              len = a.length;
              arr = Array.apply(null,{length:len});
              for(i=0;i<len;i+=1){
                  arr[i] = a[i] * b;
              }
              return arr;
          }
          if((tOfA === 'number' || tOfA === 'boolean' || tOfA === 'string' || a instanceof Number ) && b.constructor === Array){
              len = b.length;
              arr = Array.apply(null,{length:len});
              for(i=0;i<len;i+=1){
                  arr[i] = a * b[i];
              }
              return arr;
          }
          return 0;
      }
  
      function div(a,b) {
          var tOfA = typeof a;
          var tOfB = typeof b;
          var arr;
          if((tOfA === 'number' || tOfA === 'boolean' || tOfA === 'string' || a instanceof Number ) && (tOfB === 'number' || tOfB === 'boolean' || tOfB === 'string' || b instanceof Number )) {
              return a / b;
          }
          var i, len;
          if(a.constructor === Array && (tOfB === 'number' || tOfB === 'boolean' || tOfB === 'string' || b instanceof Number  )){
              len = a.length;
              arr = Array.apply(null,{length:len});
              for(i=0;i<len;i+=1){
                  arr[i] = a[i] / b;
              }
              return arr;
          }
          if((tOfA === 'number' || tOfA === 'boolean' || tOfA === 'string' || a instanceof Number ) && b.constructor === Array){
              len = b.length;
              arr = Array.apply(null,{length:len});
              for(i=0;i<len;i+=1){
                  arr[i] = a / b[i];
              }
              return arr;
          }
          return 0;
      }
  
      function clamp(num, min, max) {
          if(min > max){
              var mm = max;
              max = min;
              min = mm;
          }
          return Math.min(Math.max(num, min), max);
      }
  
      function radiansToDegrees(val) {
          return val/degToRads;
      }
      var radians_to_degrees = radiansToDegrees;
  
      function degreesToRadians(val) {
          return val*degToRads;
      }
      var degrees_to_radians = radiansToDegrees;
  
      var helperLengthArray = [0,0,0,0,0,0];
  
      function length(arr1,arr2){
          if(typeof arr1 === "number"){
              arr2 = arr2 || 0;
              return Math.abs(arr1 - arr2);
          }
          if(!arr2){
              arr2 = helperLengthArray;
          }
          var i,len = Math.min(arr1.length,arr2.length);
          var addedLength = 0;
          for(i=0;i<len;i+=1){
              addedLength += Math.pow(arr2[i]-arr1[i],2);
          }
          return Math.sqrt(addedLength);
      }
  
      function normalize(vec){
          return div(vec, length(vec));
      }
  
      function rgbToHsl(val){
          var r = val[0]; var g = val[1]; var b = val[2];
          var max = Math.max(r, g, b), min = Math.min(r, g, b);
          var h, s, l = (max + min) / 2;
  
          if(max == min){
              h = s = 0; // achromatic
          }else{
              var d = max - min;
              s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
              switch(max){
                  case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                  case g: h = (b - r) / d + 2; break;
                  case b: h = (r - g) / d + 4; break;
              }
              h /= 6;
          }
  
          return [h, s, l,val[3]];
      }
      function hslToRgb(val){
          var h = val[0];
          var s = val[1];
          var l = val[2];
  
          var r, g, b;
  
          if(s == 0){
              r = g = b = l; // achromatic
          }else{
              function hue2rgb(p, q, t){
                  if(t < 0) t += 1;
                  if(t > 1) t -= 1;
                  if(t < 1/6) return p + (q - p) * 6 * t;
                  if(t < 1/2) return q;
                  if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                  return p;
              }
  
              var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
              var p = 2 * l - q;
              r = hue2rgb(p, q, h + 1/3);
              g = hue2rgb(p, q, h);
              b = hue2rgb(p, q, h - 1/3);
          }
  
          return [r, g , b, val[3]];
      }
  
      function linear(t, tMin, tMax, value1, value2){
          if(value1 === undefined || value2 === undefined){
              return linear(t,0,1,tMin,tMax);
          }
          if(t <= tMin) {
              return value1;
          }else if(t >= tMax){
              return value2;
          }
          var perc = tMax === tMin ? 0 : (t-tMin)/(tMax-tMin);
          if(!value1.length){
              return value1 + (value2-value1)*perc;
          }
          var i, len = value1.length;
          var arr = Array.apply( null, { length: len } );
          for(i=0;i<len;i+=1){
              arr[i] = value1[i] + (value2[i]-value1[i])*perc;
          }
          return arr;
      }
      function random(min,max){
          if(max === undefined){
              if(min === undefined){
                  min = 0;
                  max = 1;
              } else {
                  max = min;
                  min = undefined;
              }
          }
          if(max.length){
              var i, len = max.length;
              if(!min){
                  min = Array.apply(null,{length:len});
              }
              var arr = Array.apply(null,{length:len});
              var rnd = BMMath.random();
              for(i=0;i<len;i+=1){
                  arr[i] = min[i] + rnd*(max[i]-min[i])
              }
              return arr;
          }
          if(min === undefined){
              min = 0;
          }
          var rndm = BMMath.random();
          return min + rndm*(max-min);
      }
  
      function initiateExpression(elem,data,property){
          var val = data.x;
          var needsVelocity = /velocity(?![\w\d])/.test(val);
          var _needsRandom = val.indexOf('random') !== -1;
          var elemType = elem.data.ty;
          var transform,content,effect;
          var thisComp = elem.comp;
          var thisProperty = property;
          elem.comp.frameDuration = 1/elem.comp.globalData.frameRate;
          var inPoint = elem.data.ip/elem.comp.globalData.frameRate;
          var outPoint = elem.data.op/elem.comp.globalData.frameRate;
          var width = elem.data.sw ? elem.data.sw : 0;
          var height = elem.data.sh ? elem.data.sh : 0;
          var toWorld,fromWorld,anchorPoint,thisLayer,thisComp;
          var fn = new Function();
          //var fnStr = 'var fn = function(){'+val+';this.v = $bm_rt;}';
          //eval(fnStr);
  
          var fn = eval('[function(){' + val+';this.v = $bm_rt;}' + ']')[0];
          var bindedFn = fn.bind(this);
          var numKeys = property.kf ? data.k.length : 0;
  
          var wiggle = function wiggle(freq,amp){
              var i,j, len = this.pv.length ? this.pv.length : 1;
              var addedAmps = Array.apply(null,{len:len});
              for(j=0;j<len;j+=1){
                  addedAmps[j] = 0;
              }
              freq = 5;
              var iterations = Math.floor(time*freq);
              i = 0;
              j = 0;
              while(i<iterations){
                  //var rnd = BMMath.random();
                  for(j=0;j<len;j+=1){
                      addedAmps[j] += -amp + amp*2*BMMath.random();
                      //addedAmps[j] += -amp + amp*2*rnd;
                  }
                  i += 1;
              }
              //var rnd2 = BMMath.random();
              var periods = time*freq;
              var perc = periods - Math.floor(periods);
              var arr = Array.apply({length:len});
              if(len>1){
                  for(j=0;j<len;j+=1){
                      arr[j] = this.pv[j] + addedAmps[j] + (-amp + amp*2*BMMath.random())*perc;
                      //arr[j] = this.pv[j] + addedAmps[j] + (-amp + amp*2*rnd)*perc;
                      //arr[i] = this.pv[i] + addedAmp + amp1*perc + amp2*(1-perc);
                  }
                  return arr;
              } else {
                  return this.pv + addedAmps[0] + (-amp + amp*2*BMMath.random())*perc;
              }
          }.bind(this);
  
          var loopIn = function loopIn(type,duration, durationFlag) {
              if(!this.k){
                  return this.pv;
              }
              var currentFrame = time*elem.comp.globalData.frameRate;
              var keyframes = this.keyframes;
              var firstKeyFrame = keyframes[0].t;
              if(currentFrame>=firstKeyFrame){
                  return this.pv;
              }else{
                  var cycleDuration, lastKeyFrame;
                  if(!durationFlag){
                      if(!duration || duration > keyframes.length - 1){
                          duration = keyframes.length - 1;
                      }
                      lastKeyFrame = keyframes[duration].t;
                      cycleDuration = lastKeyFrame - firstKeyFrame;
                  } else {
                      if(!duration){
                          cycleDuration = Math.max(0,this.elem.data.op - firstKeyFrame);
                      } else {
                          cycleDuration = Math.abs(elem.comp.globalData.frameRate*duration);
                      }
                      lastKeyFrame = firstKeyFrame + cycleDuration;
                  }
                  var i, len, ret;
                  if(type === 'pingpong') {
                      var iterations = Math.floor((firstKeyFrame - currentFrame)/cycleDuration);
                      if(iterations % 2 === 0){
                          return this.getValueAtTime(((firstKeyFrame - currentFrame)%cycleDuration +  firstKeyFrame) / this.comp.globalData.frameRate, 0);
                      }
                  } else if(type === 'offset'){
                      var initV = this.getValueAtTime(firstKeyFrame / this.comp.globalData.frameRate, 0);
                      var endV = this.getValueAtTime(lastKeyFrame / this.comp.globalData.frameRate, 0);
                      var current = this.getValueAtTime((cycleDuration - (firstKeyFrame - currentFrame)%cycleDuration +  firstKeyFrame) / this.comp.globalData.frameRate, 0);
                      var repeats = Math.floor((firstKeyFrame - currentFrame)/cycleDuration)+1;
                      if(this.pv.length){
                          ret = new Array(initV.length);
                          len = ret.length;
                          for(i=0;i<len;i+=1){
                              ret[i] = current[i]-(endV[i]-initV[i])*repeats;
                          }
                          return ret;
                      }
                      return current-(endV-initV)*repeats;
                  } else if(type === 'continue'){
                      var firstValue = this.getValueAtTime(firstKeyFrame / this.comp.globalData.frameRate, 0);
                      var nextFirstValue = this.getValueAtTime((firstKeyFrame + 0.001) / this.comp.globalData.frameRate, 0);
                      if(this.pv.length){
                          ret = new Array(firstValue.length);
                          len = ret.length;
                          for(i=0;i<len;i+=1){
                              ret[i] = firstValue[i] + (firstValue[i]-nextFirstValue[i])*(firstKeyFrame - currentFrame)/0.001;
                          }
                          return ret;
                      }
                      return firstValue + (firstValue-nextFirstValue)*(firstKeyFrame - currentFrame)/0.001;
                  }
                  return this.getValueAtTime((cycleDuration - (firstKeyFrame - currentFrame) % cycleDuration +  firstKeyFrame) / this.comp.globalData.frameRate, 0);
              }
          }.bind(this);
  
          var loopInDuration = function loopInDuration(type,duration){
              return loopIn(type,duration,true);
          }.bind(this);
  
          var loopOut = function loopOut(type,duration,durationFlag){
              if(!this.k || !this.keyframes){
                  return this.pv;
              }
              var currentFrame = time*elem.comp.globalData.frameRate;
              var keyframes = this.keyframes;
              var lastKeyFrame = keyframes[keyframes.length - 1].t;
              if(currentFrame<=lastKeyFrame){
                  return this.pv;
              }else{
                  var cycleDuration, firstKeyFrame;
                  if(!durationFlag){
                      if(!duration || duration > keyframes.length - 1){
                          duration = keyframes.length - 1;
                      }
                      firstKeyFrame = keyframes[keyframes.length - 1 - duration].t;
                      cycleDuration = lastKeyFrame - firstKeyFrame;
                  } else {
                      if(!duration){
                          cycleDuration = Math.max(0,lastKeyFrame - this.elem.data.ip);
                      } else {
                          cycleDuration = Math.abs(lastKeyFrame - elem.comp.globalData.frameRate*duration);
                      }
                      firstKeyFrame = lastKeyFrame - cycleDuration;
                  }
                  var i, len, ret;
                  if(type === 'pingpong') {
                      var iterations = Math.floor((currentFrame - firstKeyFrame)/cycleDuration);
                      if(iterations % 2 !== 0){
                          return this.getValueAtTime((cycleDuration - (currentFrame - firstKeyFrame) % cycleDuration +  firstKeyFrame) / this.comp.globalData.frameRate, 0);
                      }
                  } else if(type === 'offset'){
                      var initV = this.getValueAtTime(firstKeyFrame / this.comp.globalData.frameRate, 0);
                      var endV = this.getValueAtTime(lastKeyFrame / this.comp.globalData.frameRate, 0);
                      var current = this.getValueAtTime(((currentFrame - firstKeyFrame) % cycleDuration +  firstKeyFrame) / this.comp.globalData.frameRate, 0);
                      var repeats = Math.floor((currentFrame - firstKeyFrame)/cycleDuration);
                      if(this.pv.length){
                          ret = new Array(initV.length);
                          len = ret.length;
                          for(i=0;i<len;i+=1){
                              ret[i] = (endV[i]-initV[i])*repeats + current[i];
                          }
                          return ret;
                      }
                      return (endV-initV)*repeats + current;
                  } else if(type === 'continue'){
                      var lastValue = this.getValueAtTime(lastKeyFrame / this.comp.globalData.frameRate, 0);
                      var nextLastValue = this.getValueAtTime((lastKeyFrame - 0.001) / this.comp.globalData.frameRate, 0);
                      if(this.pv.length){
                          ret = new Array(lastValue.length);
                          len = ret.length;
                          for(i=0;i<len;i+=1){
                              ret[i] = lastValue[i] + (lastValue[i]-nextLastValue[i])*((currentFrame - lastKeyFrame)/ this.comp.globalData.frameRate)/0.0005;
                          }
                          return ret;
                      }
                      return lastValue + (lastValue-nextLastValue)*(((currentFrame - lastKeyFrame))/0.001);
                  }
                  return this.getValueAtTime(((currentFrame - firstKeyFrame) % cycleDuration +  firstKeyFrame) / this.comp.globalData.frameRate, 0);
              }
          }.bind(this);
          var loop_out = loopOut;
  
          var loopOutDuration = function loopOutDuration(type,duration){
              return loopOut(type,duration,true);
          }.bind(this);
  
          var valueAtTime = function valueAtTime(t) {
              return this.getValueAtTime(t, 0);
          }.bind(this);
  
          var velocityAtTime = function velocityAtTime(t) {
              return this.getVelocityAtTime(t);
          }.bind(this);
  
          var comp = elem.comp.globalData.projectInterface.bind(elem.comp.globalData.projectInterface);
  
          function lookAt(elem1,elem2){
              var fVec = [elem2[0]-elem1[0],elem2[1]-elem1[1],elem2[2]-elem1[2]];
              var pitch = Math.atan2(fVec[0],Math.sqrt(fVec[1]*fVec[1]+fVec[2]*fVec[2]))/degToRads;
              var yaw = -Math.atan2(fVec[1],fVec[2])/degToRads;
              return [yaw,pitch,0];
          };
  
          function easeOut(t, val1, val2){
              return -(val2-val1) * t*(t-2) + val1;
          };
  
          function nearestKey(time){
              var i, len = data.k.length,index,keyTime;
              if(!data.k.length || typeof(data.k[0]) === 'number'){
                  index = 0;
                  keyTime = 0;
              } else {
                  index = -1;
                  time *= elem.comp.globalData.frameRate;
                  if (time < data.k[0].t) {
                      index = 1;
                      keyTime = data.k[0].t;
                  } else {
                      for(i=0;i<len-1;i+=1){
                          if(time === data.k[i].t){
                              index = i + 1;
                              keyTime = data.k[i].t;
                              break;
                          }else if(time>data.k[i].t && time<data.k[i+1].t){
                              if(time-data.k[i].t > data.k[i+1].t - time){
                                  index = i + 2;
                                  keyTime = data.k[i+1].t;
                              } else {
                                  index = i + 1;
                                  keyTime = data.k[i].t;
                              }
                              break;
                          }
                      }
                      if(index === -1){
                          index = i + 1;
                          keyTime = data.k[i].t;
                      }
                  }
                  
              }
              var ob = {};
              ob.index = index;
              ob.time = keyTime/elem.comp.globalData.frameRate;
              return ob;
          };
  
          function key(ind){
              if(!data.k.length || typeof(data.k[0]) === 'number'){
                  return {time:0};
              }
              ind -= 1;
              var ob = {
                  time: data.k[ind].t/elem.comp.globalData.frameRate
              };
              var arr;
              if(ind === data.k.length - 1 && !data.k[ind].h){
                  arr = data.k[ind-1].e;
              }else{
                  arr = data.k[ind].s;
              }
              var i, len = arr.length;
              for(i=0;i<len;i+=1){
                  ob[i] = arr[i];
              }
              return ob;
          };
  
          function framesToTime(frames,fps){
              if(!fps){
                  fps = elem.comp.globalData.frameRate;
              }
              return frames/fps;
          };
  
          function timeToFrames(t,fps){
              if(!t){
                  t = time;
              }
              if(!fps){
                  fps = elem.comp.globalData.frameRate;
              }
              return t*fps;
          };
  
          function seedRandom(seed){
              BMMath.seedrandom(randSeed + seed);
          };
  
          var time,velocity, value,textIndex,textTotal,selectorValue;
          var index = elem.data.ind;
          var hasParent = !!(elem.hierarchy && elem.hierarchy.length);
          var parent;
          var randSeed = Math.floor(Math.random()*1000000);
          function execute(){
              if(_needsRandom){
                  seedRandom(randSeed);
              }
              if(this.frameExpressionId === elem.globalData.frameId && this.type !== 'textSelector'){
                  return;
              }
              if(this.lock){
                  this.v = duplicatePropertyValue(this.pv,this.mult);
                  return true;
              }
              if(this.type === 'textSelector'){
                  textIndex = this.textIndex;
                  textTotal = this.textTotal;
                  selectorValue = this.selectorValue;
              }
              if(!thisLayer){
                  thisLayer = elem.layerInterface;
                  thisComp = elem.comp.compInterface;
                  toWorld = thisLayer.toWorld.bind(thisLayer);
                  fromWorld = thisLayer.fromWorld.bind(thisLayer);
              }
              if(!transform){
                  transform = elem.layerInterface("ADBE Transform Group");
                  anchorPoint = transform.anchorPoint;
              }
              
              if(elemType === 4 && !content){
                  content = thisLayer("ADBE Root Vectors Group");
              }
              if(!effect){
                  effect = thisLayer(4);
              }
              hasParent = !!(elem.hierarchy && elem.hierarchy.length);
              if(hasParent && !parent){
                  parent = elem.hierarchy[0].layerInterface;
              }
              this.lock = true;
              if(this.getPreValue){
                  this.getPreValue();
              }
              value = this.pv;
              time = this.comp.renderedFrame/this.comp.globalData.frameRate;
              if(needsVelocity){
                  velocity = velocityAtTime(time);
              }
              bindedFn();
              this.frameExpressionId = elem.globalData.frameId;
              var i,len;
              if(this.mult){
                  if(typeof this.v === 'number' || this.v instanceof Number || typeof this.v === 'string'){
                      this.v *= this.mult;
                  }else if(this.v.length === 1){
                      this.v = this.v[0] * this.mult;
                  }else{
                      len = this.v.length;
                      if(value === this.v){
                          this.v = len === 2 ? [value[0],value[1]] : [value[0],value[1],value[2]];
                      }
                      for(i = 0; i < len; i += 1){
                          this.v[i] *= this.mult;
                      }
                  }
              }
  
              if(this.v.length === 1){
                  this.v = this.v[0];
              }
              if(typeof this.v === 'number' || this.v instanceof Number || typeof this.v === 'string'){
                  if(this.lastValue !== this.v){
                      this.lastValue = this.v;
                      this.mdf = true;
                  }
              }else if(this.v._length){
                  if(!shapesEqual(this.v,this.localShapeCollection.shapes[0])){
                      this.mdf = true;
                      this.localShapeCollection.releaseShapes();
                      this.localShapeCollection.addShape(shape_pool.clone(this.v));
                  }
              }else{
                  len = this.v.length;
                  for(i = 0; i < len; i += 1){
                      if(this.v[i] !== this.lastValue[i]){
                          this.lastValue[i] = this.v[i];
                          this.mdf = true;
                      }
                  }
              }
              this.lock = false;
          }
          return execute;
      };
  
      ob.initiateExpression = initiateExpression;
      return ob;
  }());
  var ShapeExpressionInterface = (function(){
      var ob = {
          createShapeInterface:createShapeInterface,
          createGroupInterface:createGroupInterface,
          createTrimInterface:createTrimInterface,
          createStrokeInterface:createStrokeInterface,
          createTransformInterface:createTransformInterface,
          createEllipseInterface:createEllipseInterface,
          createStarInterface:createStarInterface,
          createRectInterface:createRectInterface,
          createRoundedInterface:createRoundedInterface,
          createRepatearInterface:createRepatearInterface,
          createPathInterface:createPathInterface,
          createFillInterface:createFillInterface
      };
      function createShapeInterface(shapes,view,propertyGroup){
          return shapeInterfaceFactory(shapes,view,propertyGroup);
      }
      function createGroupInterface(shapes,view,propertyGroup){
          return groupInterfaceFactory(shapes,view,propertyGroup);
      }
      function createFillInterface(shape,view,propertyGroup){
          return fillInterfaceFactory(shape,view,propertyGroup);
      }
      function createStrokeInterface(shape,view,propertyGroup){
          return strokeInterfaceFactory(shape,view,propertyGroup);
      }
      function createTrimInterface(shape,view,propertyGroup){
          return trimInterfaceFactory(shape,view,propertyGroup);
      }
      function createTransformInterface(shape,view,propertyGroup){
          return transformInterfaceFactory(shape,view,propertyGroup);
      }
      function createEllipseInterface(shape,view,propertyGroup){
          return ellipseInterfaceFactory(shape,view,propertyGroup);
      }
      function createStarInterface(shape,view,propertyGroup){
          return starInterfaceFactory(shape,view,propertyGroup);
      }
      function createRectInterface(shape,view,propertyGroup){
          return rectInterfaceFactory(shape,view,propertyGroup);
      }
      function createRoundedInterface(shape,view,propertyGroup){
          return roundedInterfaceFactory(shape,view,propertyGroup);
      }
      function createRepatearInterface(shape,view,propertyGroup){
          return repeaterInterfaceFactory(shape,view,propertyGroup);
      }
      function createPathInterface(shape,view,propertyGroup){
          return pathInterfaceFactory(shape,view,propertyGroup);
      }
  
      function iterateElements(shapes,view, propertyGroup){
          var arr = [];
          var i, len = shapes ? shapes.length : 0;
          for(i=0;i<len;i+=1){
              if(shapes[i].ty == 'gr'){
                  arr.push(ShapeExpressionInterface.createGroupInterface(shapes[i],view[i],propertyGroup));
              }else if(shapes[i].ty == 'fl'){
                  arr.push(ShapeExpressionInterface.createFillInterface(shapes[i],view[i],propertyGroup));
              }else if(shapes[i].ty == 'st'){
                  arr.push(ShapeExpressionInterface.createStrokeInterface(shapes[i],view[i],propertyGroup));
              }else if(shapes[i].ty == 'tm'){
                  arr.push(ShapeExpressionInterface.createTrimInterface(shapes[i],view[i],propertyGroup));
              }else if(shapes[i].ty == 'tr'){
                  //arr.push(ShapeExpressionInterface.createTransformInterface(shapes[i],view[i],propertyGroup));
              }else if(shapes[i].ty == 'el'){
                  arr.push(ShapeExpressionInterface.createEllipseInterface(shapes[i],view[i],propertyGroup));
              }else if(shapes[i].ty == 'sr'){
                  arr.push(ShapeExpressionInterface.createStarInterface(shapes[i],view[i],propertyGroup));
              } else if(shapes[i].ty == 'sh'){
                  arr.push(ShapeExpressionInterface.createPathInterface(shapes[i],view[i],propertyGroup));
              } else if(shapes[i].ty == 'rc'){
                  arr.push(ShapeExpressionInterface.createRectInterface(shapes[i],view[i],propertyGroup));
              } else if(shapes[i].ty == 'rd'){
                  arr.push(ShapeExpressionInterface.createRoundedInterface(shapes[i],view[i],propertyGroup));
              } else if(shapes[i].ty == 'rp'){
                  arr.push(ShapeExpressionInterface.createRepatearInterface(shapes[i],view[i],propertyGroup));
              } else{
                  //console.log(shapes[i].ty);
              }
          }
          return arr;
      }
  
      var shapeInterfaceFactory = (function(){
          return function(shapes,view,propertyGroup){
              var interfaces;
              function _interfaceFunction(value){
                  if(typeof value === 'number'){
                      return interfaces[value-1];
                  } else {
                      var i = 0, len = interfaces.length;
                      while(i<len){
                          if(interfaces[i]._name === value){
                              return interfaces[i];
                          }
                          i+=1;
                      }
                  }
              }
              _interfaceFunction.propertyGroup = propertyGroup;
              interfaces = iterateElements(shapes, view, _interfaceFunction);
              return _interfaceFunction;
          }
      }());
  
      var contentsInterfaceFactory = (function(){
         return function(shape,view, propertyGroup){
             var interfaces;
             var interfaceFunction = function _interfaceFunction(value){
                 var i = 0, len = interfaces.length;
                  while(i<len){
                      if(interfaces[i]._name === value || interfaces[i].mn === value || interfaces[i].propertyIndex === value || interfaces[i].ix === value || interfaces[i].ind === value){
                         return interfaces[i];
                      }
                      i+=1;
                  }
                  if(typeof value === 'number'){
                     return interfaces[value-1];
                  }
             };
             interfaceFunction.propertyGroup = function(val){
                 if(val === 1){
                     return interfaceFunction;
                 } else{
                     return propertyGroup(val-1);
                 }
             };
             interfaces = iterateElements(shape.it, view.it, interfaceFunction.propertyGroup);
             interfaceFunction.numProperties = interfaces.length;
             interfaceFunction.propertyIndex = shape.cix;
  
             return interfaceFunction;
         }
      }());
  
      var groupInterfaceFactory = (function(){
          return function(shape,view, propertyGroup){
              var interfaceFunction = function _interfaceFunction(value){
                  switch(value){
                      case 'ADBE Vectors Group':
                      case 'Contents':
                      case 2:
                          return interfaceFunction.content;
                      case 'ADBE Vector Transform Group':
                      case 3:
                      default:
                          return interfaceFunction.transform;
                  }
                  /*if(value === 'ADBE Vector Transform Group'){
                      return interfaceFunction.transform;
                      var i = 0, len = interfaces.length;
                      while(i<len){
                          if(interfaces[i].ty === 'tr'){
                              return interfaces[i];
                          }
                          i+=1;
                      }
                      return null;
                  }
                  if(typeof value === 'number'){
                      return interfaces[value-1];
                  } else {
                      var i = 0, len = interfaces.length;
                      while(i<len){
                          if(interfaces[i]._name === value){
                              return interfaces[i];
                          }
                          i+=1;
                      }
                  }*/
              }
              interfaceFunction.propertyGroup = function(val){
                  if(val === 1){
                      return interfaceFunction;
                  } else{
                      return propertyGroup(val-1);
                  }
              };
              var content = contentsInterfaceFactory(shape,view,interfaceFunction.propertyGroup);
              var transformInterface = ShapeExpressionInterface.createTransformInterface(shape.it[shape.it.length - 1],view.it[view.it.length - 1],interfaceFunction.propertyGroup);
              interfaceFunction.content = content;
              interfaceFunction.transform = transformInterface;
              Object.defineProperty(interfaceFunction, '_name', {
                  get: function(){
                      return shape.nm;
                  }
              });
              //interfaceFunction.content = interfaceFunction;
              interfaceFunction.numProperties = shape.np;
              interfaceFunction.propertyIndex = shape.ix;
              interfaceFunction.nm = shape.nm;
              interfaceFunction.mn = shape.mn;
              return interfaceFunction;
          }
      }());
  
      var fillInterfaceFactory = (function(){
          return function(shape,view,propertyGroup){
  
              function interfaceFunction(val){
                  if(val === 'Color' || val === 'color'){
                      return interfaceFunction.color;
                  } else if(val === 'Opacity' || val === 'opacity'){
                      return interfaceFunction.opacity;
                  }
              }
              Object.defineProperty(interfaceFunction, 'color', {
                  get: function(){
                      return ExpressionValue(view.c, 1 / view.c.mult, 'color');
                  }
              });
              Object.defineProperty(interfaceFunction, 'opacity', {
                  get: function(){
                      return ExpressionValue(view.o, 100);
                  }
              });
              Object.defineProperty(interfaceFunction, '_name', { value: shape.nm });
              Object.defineProperty(interfaceFunction, 'mn', { value: shape.mn });
  
              view.c.setGroupProperty(propertyGroup);
              view.o.setGroupProperty(propertyGroup);
              return interfaceFunction;
          }
      }());
  
      var strokeInterfaceFactory = (function(){
          return function(shape,view,propertyGroup){
              function _propertyGroup(val){
                  if(val === 1){
                      return ob;
                  } else{
                      return propertyGroup(val-1);
                  }
              };
              function _dashPropertyGroup(val){
                  if(val === 1){
                      return dashOb;
                  } else{
                      return _propertyGroup(val-1);
                  }
              };
              function addPropertyToDashOb(i) {
                  Object.defineProperty(dashOb, shape.d[i].nm, {
                      get: function(){
                          return ExpressionValue(view.d.dataProps[i].p)
                      }
                  });
              }
              var i, len = shape.d ? shape.d.length : 0;
              var dashOb = {}
              for (i = 0; i < len; i += 1) {
                  addPropertyToDashOb(i);
                  view.d.dataProps[i].p.setGroupProperty(_dashPropertyGroup);
              }
  
              function interfaceFunction(val){
                  if(val === 'Color' || val === 'color'){
                      return interfaceFunction.color;
                  } else if(val === 'Opacity' || val === 'opacity'){
                      return interfaceFunction.opacity;
                  } else if(val === 'Stroke Width' || val === 'stroke width'){
                      return interfaceFunction.strokeWidth;
                  }
              }
              Object.defineProperty(interfaceFunction, 'color', {
                  get: function(){
                      return ExpressionValue(view.c, 1 / view.c.mult, 'color');
                  }
              });
              Object.defineProperty(interfaceFunction, 'opacity', {
                  get: function(){
                      return ExpressionValue(view.o, 100);
                  }
              });
              Object.defineProperty(interfaceFunction, 'strokeWidth', {
                  get: function(){
                      return ExpressionValue(view.w);
                  }
              });
              Object.defineProperty(interfaceFunction, 'dash', {
                  get: function(){
                      return dashOb;
                  }
              });
              Object.defineProperty(interfaceFunction, '_name', { value: shape.nm });
              Object.defineProperty(interfaceFunction, 'mn', { value: shape.mn });
  
              view.c.setGroupProperty(_propertyGroup);
              view.o.setGroupProperty(_propertyGroup);
              view.w.setGroupProperty(_propertyGroup);
              return interfaceFunction;
          }
      }());
  
      var trimInterfaceFactory = (function(){
          return function(shape,view,propertyGroup){
              function _propertyGroup(val){
                  if(val == 1){
                      return interfaceFunction;
                  } else {
                      return propertyGroup(--val);
                  }
              }
              interfaceFunction.propertyIndex = shape.ix;
  
              view.s.setGroupProperty(_propertyGroup);
              view.e.setGroupProperty(_propertyGroup);
              view.o.setGroupProperty(_propertyGroup);
  
              function interfaceFunction(val){
                  if(val === shape.e.ix || val === 'End' || val === 'end'){
                      return interfaceFunction.end;
                  }
                  if(val === shape.s.ix){
                      return interfaceFunction.start;
                  }
                  if(val === shape.o.ix){
                      return interfaceFunction.offset;
                  }
              }
              interfaceFunction.propertyIndex = shape.ix;
              Object.defineProperty(interfaceFunction, 'start', {
                  get: function(){
                      return ExpressionValue(view.s, 1 / view.s.mult);
                  }
              });
              Object.defineProperty(interfaceFunction, 'end', {
                  get: function(){
                      return ExpressionValue(view.e, 1 / view.e.mult);
                  }
              });
              Object.defineProperty(interfaceFunction, 'offset', {
                  get: function(){
                      return ExpressionValue(view.o);
                  }
              });
              Object.defineProperty(interfaceFunction, '_name', {
                  get: function(){
                      return shape.nm;
                  }
              });
              interfaceFunction.mn = shape.mn;
              return interfaceFunction;
          }
      }());
  
      var transformInterfaceFactory = (function(){
          return function(shape,view,propertyGroup){
              function _propertyGroup(val){
                  if(val == 1){
                      return interfaceFunction;
                  } else {
                      return propertyGroup(--val);
                  }
              }
              view.transform.mProps.o.setGroupProperty(_propertyGroup);
              view.transform.mProps.p.setGroupProperty(_propertyGroup);
              view.transform.mProps.a.setGroupProperty(_propertyGroup);
              view.transform.mProps.s.setGroupProperty(_propertyGroup);
              view.transform.mProps.r.setGroupProperty(_propertyGroup);
              if(view.transform.mProps.sk){
                  view.transform.mProps.sk.setGroupProperty(_propertyGroup);
                  view.transform.mProps.sa.setGroupProperty(_propertyGroup);
              }
              view.transform.op.setGroupProperty(_propertyGroup);
  
              function interfaceFunction(value){
                  if(shape.a.ix === value){
                      return interfaceFunction.anchorPoint;
                  }
                  if(shape.o.ix === value){
                      return interfaceFunction.opacity;
                  }
                  if(shape.p.ix === value){
                      return interfaceFunction.position;
                  }
                  if(shape.r.ix === value){
                      return interfaceFunction.rotation;
                  }
                  if(shape.s.ix === value){
                      return interfaceFunction.scale;
                  }
                  if(shape.sk && shape.sk.ix === value){
                      return interfaceFunction.skew;
                  }
                  if(shape.sa && shape.sa.ix === value){
                      return interfaceFunction.skewAxis;
                  }
                  if(value === 'Opacity') {
                      return interfaceFunction.opacity;
                  }
                  if(value === 'Position') {
                      return interfaceFunction.position;
                  }
                  if(value === 'Anchor Point') {
                      return interfaceFunction.anchorPoint;
                  }
                  if(value === 'Scale') {
                      return interfaceFunction.scale;
                  }
                  if(value === 'Rotation' || value === 'ADBE Vector Rotation') {
                      return interfaceFunction.rotation;
                  }
                  if(value === 'Skew') {
                      return interfaceFunction.skew;
                  }
                  if(value === 'Skew Axis') {
                      return interfaceFunction.skewAxis;
                  }
  
              }
              Object.defineProperty(interfaceFunction, 'opacity', {
                  get: function(){
                      return ExpressionValue(view.transform.mProps.o, 1/view.transform.mProps.o.mult);
                  }
              });
              Object.defineProperty(interfaceFunction, 'position', {
                  get: function(){
                      return ExpressionValue(view.transform.mProps.p);
                  }
              });
              Object.defineProperty(interfaceFunction, 'anchorPoint', {
                  get: function(){
                      return ExpressionValue(view.transform.mProps.a);
                  }
              });
              var scaleArray = [];
              Object.defineProperty(interfaceFunction, 'scale', {
                  get: function(){
                      return ExpressionValue(view.transform.mProps.s, 1 / view.transform.mProps.s.mult);
                  }
              });
              Object.defineProperty(interfaceFunction, 'rotation', {
                  get: function(){
                      return ExpressionValue(view.transform.mProps.r, 1 / view.transform.mProps.r.mult);
                  }
              });
              Object.defineProperty(interfaceFunction, 'skew', {
                  get: function(){
                      return ExpressionValue(view.transform.mProps.sk);
                  }
              });
              Object.defineProperty(interfaceFunction, 'skewAxis', {
                  get: function(){
                      return ExpressionValue(view.transform.mProps.sa);
                  }
              });
              Object.defineProperty(interfaceFunction, '_name', {
                  get: function(){
                      return shape.nm;
                  }
              });
              interfaceFunction.ty = 'tr';
              interfaceFunction.mn = shape.mn;
              return interfaceFunction;
          }
      }());
  
      var ellipseInterfaceFactory = (function(){
          return function(shape,view,propertyGroup){
              function _propertyGroup(val){
                  if(val == 1){
                      return interfaceFunction;
                  } else {
                      return propertyGroup(--val);
                  }
              }
              interfaceFunction.propertyIndex = shape.ix;
              var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
              prop.s.setGroupProperty(_propertyGroup);
              prop.p.setGroupProperty(_propertyGroup);
              function interfaceFunction(value){
                  if(shape.p.ix === value){
                      return interfaceFunction.position;
                  }
                  if(shape.s.ix === value){
                      return interfaceFunction.size;
                  }
              }
              Object.defineProperty(interfaceFunction, 'size', {
                  get: function(){
                      return ExpressionValue(prop.s);
                  }
              });
              Object.defineProperty(interfaceFunction, 'position', {
                  get: function(){
                      return ExpressionValue(prop.p);
                  }
              });
              Object.defineProperty(interfaceFunction, '_name', {
                  get: function(){
                      return shape.nm;
                  }
              });
              interfaceFunction.mn = shape.mn;
              return interfaceFunction;
          }
      }());
  
      var starInterfaceFactory = (function(){
          return function(shape,view,propertyGroup){
              function _propertyGroup(val){
                  if(val == 1){
                      return interfaceFunction;
                  } else {
                      return propertyGroup(--val);
                  }
              }
              var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
              interfaceFunction.propertyIndex = shape.ix;
              prop.or.setGroupProperty(_propertyGroup);
              prop.os.setGroupProperty(_propertyGroup);
              prop.pt.setGroupProperty(_propertyGroup);
              prop.p.setGroupProperty(_propertyGroup);
              prop.r.setGroupProperty(_propertyGroup);
              if(shape.ir){
                  prop.ir.setGroupProperty(_propertyGroup);
                  prop.is.setGroupProperty(_propertyGroup);
              }
  
              function interfaceFunction(value){
                  if(shape.p.ix === value){
                      return interfaceFunction.position;
                  }
                  if(shape.r.ix === value){
                      return interfaceFunction.rotation;
                  }
                  if(shape.pt.ix === value){
                      return interfaceFunction.points;
                  }
                  if(shape.or.ix === value || 'ADBE Vector Star Outer Radius' === value){
                      return interfaceFunction.outerRadius;
                  }
                  if(shape.os.ix === value){
                      return interfaceFunction.outerRoundness;
                  }
                  if(shape.ir && (shape.ir.ix === value || 'ADBE Vector Star Inner Radius' === value)){
                      return interfaceFunction.innerRadius;
                  }
                  if(shape.is && shape.is.ix === value){
                      return interfaceFunction.innerRoundness;
                  }
  
              }
              Object.defineProperty(interfaceFunction, 'position', {
                  get: function(){
                      return ExpressionValue(prop.p);
                  }
              });
              Object.defineProperty(interfaceFunction, 'rotation', {
                  get: function(){
                      return ExpressionValue(prop.r, 1 / prop.r.mult);
                  }
              });
              Object.defineProperty(interfaceFunction, 'points', {
                  get: function(){
                      return ExpressionValue(prop.pt);
                  }
              });
              Object.defineProperty(interfaceFunction, 'outerRadius', {
                  get: function(){
                      return ExpressionValue(prop.or);
                  }
              });
              Object.defineProperty(interfaceFunction, 'outerRoundness', {
                  get: function(){
                      return ExpressionValue(prop.os);
                  }
              });
              Object.defineProperty(interfaceFunction, 'innerRadius', {
                  get: function(){
                      if(!prop.ir){
                          return 0;
                      }
                      return ExpressionValue(prop.ir);
                  }
              });
              Object.defineProperty(interfaceFunction, 'innerRoundness', {
                  get: function(){
                      if(!prop.is){
                          return 0;
                      }
                      return ExpressionValue(prop.is, 1 / prop.is.mult);
                  }
              });
              Object.defineProperty(interfaceFunction, '_name', {
                  get: function(){
                      return shape.nm;
                  }
              });
              interfaceFunction.mn = shape.mn;
              return interfaceFunction;
          }
      }());
  
      var rectInterfaceFactory = (function(){
          return function(shape,view,propertyGroup){
              function _propertyGroup(val){
                  if(val == 1){
                      return interfaceFunction;
                  } else {
                      return propertyGroup(--val);
                  }
              }
              var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
              interfaceFunction.propertyIndex = shape.ix;
              prop.p.setGroupProperty(_propertyGroup);
              prop.s.setGroupProperty(_propertyGroup);
              prop.r.setGroupProperty(_propertyGroup);
  
              function interfaceFunction(value){
                  if(shape.p.ix === value){
                      return interfaceFunction.position;
                  }
                  if(shape.r.ix === value){
                      return interfaceFunction.rotation;
                  }
                  if(shape.s.ix === value || value === 'Size'){
                      return interfaceFunction.size;
                  }
  
              }
              Object.defineProperty(interfaceFunction, 'position', {
                  get: function(){
                      return ExpressionValue(prop.p);
                  }
              });
              Object.defineProperty(interfaceFunction, 'roundness', {
                  get: function(){
                      return ExpressionValue(prop.r);
                  }
              });
              Object.defineProperty(interfaceFunction, 'size', {
                  get: function(){
                      return ExpressionValue(prop.s);
                  }
              });
  
              Object.defineProperty(interfaceFunction, '_name', {
                  get: function(){
                      return shape.nm;
                  }
              });
              interfaceFunction.mn = shape.mn;
              return interfaceFunction;
          }
      }());
  
      var roundedInterfaceFactory = (function(){
          return function(shape,view,propertyGroup){
              function _propertyGroup(val){
                  if(val == 1){
                      return interfaceFunction;
                  } else {
                      return propertyGroup(--val);
                  }
              }
              var prop = view;
              interfaceFunction.propertyIndex = shape.ix;
              prop.rd.setGroupProperty(_propertyGroup);
  
              function interfaceFunction(value){
                  if(shape.r.ix === value || 'Round Corners 1' === value){
                      return interfaceFunction.radius;
                  }
  
              }
              Object.defineProperty(interfaceFunction, 'radius', {
                  get: function(){
                      return ExpressionValue(prop.rd);
                  }
              });
  
              Object.defineProperty(interfaceFunction, '_name', {
                  get: function(){
                      return shape.nm;
                  }
              });
              interfaceFunction.mn = shape.mn;
              return interfaceFunction;
          }
      }());
  
      var repeaterInterfaceFactory = (function(){
          return function(shape,view,propertyGroup){
              function _propertyGroup(val){
                  if(val == 1){
                      return interfaceFunction;
                  } else {
                      return propertyGroup(--val);
                  }
              }
              var prop = view;
              interfaceFunction.propertyIndex = shape.ix;
              prop.c.setGroupProperty(_propertyGroup);
              prop.o.setGroupProperty(_propertyGroup);
  
              function interfaceFunction(value){
                  if(shape.c.ix === value || 'Copies' === value){
                      return interfaceFunction.copies;
                  } else if(shape.o.ix === value || 'Offset' === value){
                      return interfaceFunction.offset;
                  }
  
              }
              Object.defineProperty(interfaceFunction, 'copies', {
                  get: function(){
                      return ExpressionValue(prop.c);
                  }
              });
  
              Object.defineProperty(interfaceFunction, 'offset', {
                  get: function(){
                      return ExpressionValue(prop.o);
                  }
              });
  
              Object.defineProperty(interfaceFunction, '_name', {
                  get: function(){
                      return shape.nm;
                  }
              });
              interfaceFunction.mn = shape.mn;
              return interfaceFunction;
          }
      }());
  
      var pathInterfaceFactory = (function(){
          return function(shape,view,propertyGroup){
              var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
              function _propertyGroup(val){
                  if(val == 1){
                      return interfaceFunction;
                  } else {
                      return propertyGroup(--val);
                  }
              }
              prop.setGroupProperty(_propertyGroup);
  
              function interfaceFunction(val){
                  if(val === 'Shape' || val === 'shape' || val === 'Path' || val === 'path'){
                      return interfaceFunction.path;
                  }
              }
              Object.defineProperty(interfaceFunction, 'path', {
                  get: function(){
                      if(prop.k){
                          prop.getValue();
                      }
                      return prop.v;
                      //return shape_pool.clone(prop.v);
                  }
              });
              Object.defineProperty(interfaceFunction, 'shape', {
                  get: function(){
                      if(prop.k){
                          prop.getValue();
                      }
                      return prop.v;
                      //return shape_pool.clone(prop.v);
                  }
              });
              Object.defineProperty(interfaceFunction, '_name', { value: shape.nm });
              Object.defineProperty(interfaceFunction, 'ix', { value: shape.ix });
              Object.defineProperty(interfaceFunction, 'mn', { value: shape.mn });
              return interfaceFunction;
          }
      }());
  
  
      return ob;
  }())
  
  var TextExpressionInterface = (function(){
  	return function(elem){
          function _thisLayerFunction(){
          }
          Object.defineProperty(_thisLayerFunction, "sourceText", {
              get: function(){
              	if(!elem.currentTextDocumentData.t) {
              		return ''
              	}
                  return elem.currentTextDocumentData.t;
              }
          });
          return _thisLayerFunction;
      }
  }())
  var LayerExpressionInterface = (function (){
      function toWorld(arr, time){
          var toWorldMat = new Matrix();
          toWorldMat.reset();
          var transformMat;
          if(time) {
              //Todo implement value at time on transform properties
              //transformMat = this._elem.finalTransform.mProp.getValueAtTime(time);
              transformMat = this._elem.finalTransform.mProp;
          } else {
              transformMat = this._elem.finalTransform.mProp;
          }
          transformMat.applyToMatrix(toWorldMat);
          if(this._elem.hierarchy && this._elem.hierarchy.length){
              var i, len = this._elem.hierarchy.length;
              for(i=0;i<len;i+=1){
                  this._elem.hierarchy[i].finalTransform.mProp.applyToMatrix(toWorldMat);
              }
              return toWorldMat.applyToPointArray(arr[0],arr[1],arr[2]||0);
          }
          return toWorldMat.applyToPointArray(arr[0],arr[1],arr[2]||0);
      }
      function fromWorld(arr, time){
          var toWorldMat = new Matrix();
          toWorldMat.reset();
          var transformMat;
          if(time) {
              //Todo implement value at time on transform properties
              //transformMat = this._elem.finalTransform.mProp.getValueAtTime(time);
              transformMat = this._elem.finalTransform.mProp;
          } else {
              transformMat = this._elem.finalTransform.mProp;
          }
          transformMat.applyToMatrix(toWorldMat);
          if(this._elem.hierarchy && this._elem.hierarchy.length){
              var i, len = this._elem.hierarchy.length;
              for(i=0;i<len;i+=1){
                  this._elem.hierarchy[i].finalTransform.mProp.applyToMatrix(toWorldMat);
              }
              return toWorldMat.inversePoint(arr);
          }
          return toWorldMat.inversePoint(arr);
      }
      function fromComp(arr){
          var toWorldMat = new Matrix();
          toWorldMat.reset();
          this._elem.finalTransform.mProp.applyToMatrix(toWorldMat);
          if(this._elem.hierarchy && this._elem.hierarchy.length){
              var i, len = this._elem.hierarchy.length;
              for(i=0;i<len;i+=1){
                  this._elem.hierarchy[i].finalTransform.mProp.applyToMatrix(toWorldMat);
              }
              return toWorldMat.inversePoint(arr);
          }
          return toWorldMat.inversePoint(arr);
      }
  
  
      return function(elem){
  
          var transformInterface = TransformExpressionInterface(elem.transform);
  
          function _registerMaskInterface(maskManager){
              _thisLayerFunction.mask = maskManager.getMask.bind(maskManager);
          }
          function _registerEffectsInterface(effects){
              _thisLayerFunction.effect = effects;
          }
  
          function _thisLayerFunction(name){
              switch(name){
                  case "ADBE Root Vectors Group":
                  case "Contents":
                  case 2:
                      return _thisLayerFunction.shapeInterface;
                  case 1:
                  case 6:
                  case "Transform":
                  case "transform":
                  case "ADBE Transform Group":
                      return transformInterface;
                  case 4:
                  case "ADBE Effect Parade":
                      return _thisLayerFunction.effect;
              }
          }
          _thisLayerFunction.toWorld = toWorld;
          _thisLayerFunction.fromWorld = fromWorld;
          _thisLayerFunction.toComp = toWorld;
          _thisLayerFunction.fromComp = fromComp;
          _thisLayerFunction._elem = elem;
          Object.defineProperty(_thisLayerFunction, 'hasParent', {
              get: function(){
                  return !!elem.hierarchy;
              }
          });
          Object.defineProperty(_thisLayerFunction, 'parent', {
              get: function(){
                  return elem.hierarchy[0].layerInterface;
              }
          });
          Object.defineProperty(_thisLayerFunction, "rotation", {
              get: function(){
                  return transformInterface.rotation;
              }
          });
          Object.defineProperty(_thisLayerFunction, "scale", {
              get: function () {
                  return transformInterface.scale;
              }
          });
  
          Object.defineProperty(_thisLayerFunction, "position", {
              get: function () {
                  return transformInterface.position;
              }
          });
  
          Object.defineProperty(_thisLayerFunction, "anchorPoint", {
              get: function () {
                  return transformInterface.anchorPoint;
              }
          });
  
          Object.defineProperty(_thisLayerFunction, "transform", {
              get: function () {
                  return transformInterface;
              }
          });
  
          Object.defineProperty(_thisLayerFunction, "width", {
              get: function () {
                  if(elem.data.ty === 0) {
                      return elem.data.w
                  }
                  return 100;
              }
          });
  
          Object.defineProperty(_thisLayerFunction, "height", {
              get: function () {
                  if(elem.data.ty === 0) {
                      return elem.data.h
                  }
                  return 100;
              }
          });
  
          Object.defineProperty(_thisLayerFunction, "source", {
              get: function () {
                  return elem.data.refId;
              }
          });
  
          Object.defineProperty(_thisLayerFunction, "_name", { value:elem.data.nm });
          Object.defineProperty(_thisLayerFunction, "content", {
              get: function(){
                  return _thisLayerFunction.shapeInterface;
              }
          });
  
          Object.defineProperty(_thisLayerFunction, "active", {
              get: function(){
                  return elem.isVisible;
              }
          });
  
          Object.defineProperty(_thisLayerFunction, "text", {
              get: function(){
                  return _thisLayerFunction.textInterface;
              }
          });
  
          _thisLayerFunction.registerMaskInterface = _registerMaskInterface;
          _thisLayerFunction.registerEffectsInterface = _registerEffectsInterface;
          return _thisLayerFunction;
      }
  }());
  
  var CompExpressionInterface = (function (){
      return function(comp){
          function _thisLayerFunction(name){
              var i=0, len = comp.layers.length;
              while(i<len){
                  if(comp.layers[i].nm === name || comp.layers[i].ind === name){
                      return comp.elements[i].layerInterface;
                  }
                  i += 1;
              }
              return {active:false}
          }
          Object.defineProperty(_thisLayerFunction, "_name", { value:comp.data.nm });
          _thisLayerFunction.layer = _thisLayerFunction;
          _thisLayerFunction.pixelAspect = 1;
          _thisLayerFunction.height = comp.globalData.compSize.h;
          _thisLayerFunction.width = comp.globalData.compSize.w;
          _thisLayerFunction.pixelAspect = 1;
          _thisLayerFunction.frameDuration = 1/comp.globalData.frameRate;
          return _thisLayerFunction;
      }
  }());
  var TransformExpressionInterface = (function (){
      return function(transform){
          function _thisFunction(name){
              switch(name){
                  case "scale":
                  case "Scale":
                  case "ADBE Scale":
                  case 6:
                      return _thisFunction.scale;
                  case "rotation":
                  case "Rotation":
                  case "ADBE Rotation":
                  case "ADBE Rotate Z":
                  case 10:
                      return _thisFunction.rotation;
                  case "position":
                  case "Position":
                  case "ADBE Position":
                  case 2:
                      return transform.position;
                  case "anchorPoint":
                  case "AnchorPoint":
                  case "Anchor Point":
                  case "ADBE AnchorPoint":
                  case 1:
                      return _thisFunction.anchorPoint;
                  case "opacity":
                  case "Opacity":
                  case 11:
                      return _thisFunction.opacity;
              }
          }
  
          Object.defineProperty(_thisFunction, "rotation", {
              get: function(){
                  return transform.rotation;
              }
          });
          Object.defineProperty(_thisFunction, "scale", {
              get: function () {
                  return transform.scale;
              }
          });
  
          Object.defineProperty(_thisFunction, "position", {
              get: function () {
                  return transform.position;
              }
          });
  
          Object.defineProperty(_thisFunction, "xPosition", {
              get: function () {
                  return transform.xPosition;
              }
          });
  
          Object.defineProperty(_thisFunction, "yPosition", {
              get: function () {
                  return transform.yPosition;
              }
          });
  
          Object.defineProperty(_thisFunction, "anchorPoint", {
              get: function () {
                  return transform.anchorPoint;
              }
          });
  
          Object.defineProperty(_thisFunction, "opacity", {
              get: function () {
                  return transform.opacity;
              }
          });
  
          Object.defineProperty(_thisFunction, "skew", {
              get: function () {
                  return transform.skew;
              }
          });
  
          Object.defineProperty(_thisFunction, "skewAxis", {
              get: function () {
                  return transform.skewAxis;
              }
          });
  
          return _thisFunction;
      }
  }());
  var ProjectInterface = (function (){
  
      function registerComposition(comp){
          this.compositions.push(comp);
      }
  
      return function(){
          function _thisProjectFunction(name){
              var i = 0, len = this.compositions.length;
              while(i<len){
                  if(this.compositions[i].data && this.compositions[i].data.nm === name){
                      if(this.compositions[i].prepareFrame) {
                          this.compositions[i].prepareFrame(this.currentFrame);
                      }
                      return this.compositions[i].compInterface;
                  }
                  i+=1;
              }
          }
  
          _thisProjectFunction.compositions = [];
          _thisProjectFunction.currentFrame = 0;
  
          _thisProjectFunction.registerComposition = registerComposition;
  
  
  
          return _thisProjectFunction;
      }
  }());
  var EffectsExpressionInterface = (function (){
      var ob = {
          createEffectsInterface: createEffectsInterface
      };
  
      function createEffectsInterface(elem, propertyGroup){
          if(elem.effects){
  
              var effectElements = [];
              var effectsData = elem.data.ef;
              var i, len = elem.effects.effectElements.length;
              for(i=0;i<len;i+=1){
                  effectElements.push(createGroupInterface(effectsData[i],elem.effects.effectElements[i],propertyGroup,elem));
              }
  
              return function(name){
                  var effects = elem.data.ef, i = 0, len = effects.length;
                  while(i<len) {
                      if(name === effects[i].nm || name === effects[i].mn || name === effects[i].ix){
                          return effectElements[i];
                      }
                      i += 1;
                  }
              }
          }
      }
  
      function createGroupInterface(data,elements, propertyGroup, elem){
          var effectElements = [];
          var i, len = data.ef.length;
          for(i=0;i<len;i+=1){
              if(data.ef[i].ty === 5){
                  effectElements.push(createGroupInterface(data.ef[i],elements.effectElements[i],propertyGroup, elem));
              } else {
                  effectElements.push(createValueInterface(elements.effectElements[i],data.ef[i].ty, elem));
              }
          }
          var groupInterface = function(name){
              var effects = data.ef, i = 0, len = effects.length;
              while(i<len) {
                  if(name === effects[i].nm || name === effects[i].mn || name === effects[i].ix){
                      if(effects[i].ty === 5){
                          return effectElements[i];
                      } else {
                          return effectElements[i]();
                      }
                  }
                  i += 1;
              }
              return effectElements[0]();
          }
          if(data.mn === 'ADBE Color Control'){
              Object.defineProperty(groupInterface, 'color', {
                  get: function(){
                      return effectElements[0]();
                  }
              });
          }
          groupInterface.active = data.en !== 0;
          return groupInterface
      }
  
      function createValueInterface(element, type, elem){
          return function(){
              if(type === 10){
                  return elem.comp.compInterface(element.p.v);
              }
              return ExpressionValue(element.p);
          }
      }
  
      return ob;
  
  }());
  var ExpressionValue = (function() {
  	return function(elementProp, mult, type) {
          var expressionValue, arrayValue;
  
  		if (elementProp.k) {
              elementProp.getValue();
          }
          var i, len, arrValue;
          if (type) {
          	if(type === 'color') {
          		len = 4;
  		        expressionValue = Array.apply(null, {length: len});
  		        arrValue = Array.apply(null, {length: len});
  		        for (i = 0; i < len; i += 1) {
  		            expressionValue[i] = arrValue[i] = (mult && i < 3) ? elementProp.v[i] * mult : 1;
  		        }
  	        	expressionValue.value = arrValue;
          	}
          } else if (typeof elementProp.v === 'number' || elementProp.v instanceof Number){
              expressionValue = mult ? new Number(elementProp.v * mult) : new Number(elementProp.v);
              expressionValue.value = mult ? elementProp.v * mult : elementProp.v;
          } else {
          	len = elementProp.v.length;
  	        expressionValue = Array.apply(null, {length: len});
  	        arrValue = Array.apply(null, {length: len});
  	        for (i = 0; i < len; i += 1) {
  	            expressionValue[i] = arrValue[i] = mult ? elementProp.v[i] * mult : elementProp.v[i];
  	        }
  	        expressionValue.value = arrValue;
          }
          
          expressionValue.numKeys = elementProp.keyframes ? elementProp.keyframes.length : 0;
          expressionValue.key = function(pos) {
              if (!expressionValue.numKeys) {
                  return 0;
              } else {
                  return elementProp.keyframes[pos-1].t;
              }
          };
          expressionValue.valueAtTime = elementProp.getValueAtTime;
          expressionValue.propertyGroup = elementProp.propertyGroup;
          return expressionValue;
  	}
  }())
  function SliderEffect(data,elem, dynamicProperties){
      this.p = PropertyFactory.getProp(elem,data.v,0,0,dynamicProperties);
  }
  function AngleEffect(data,elem, dynamicProperties){
      this.p = PropertyFactory.getProp(elem,data.v,0,0,dynamicProperties);
  }
  function ColorEffect(data,elem, dynamicProperties){
      this.p = PropertyFactory.getProp(elem,data.v,1,0,dynamicProperties);
  }
  function PointEffect(data,elem, dynamicProperties){
      this.p = PropertyFactory.getProp(elem,data.v,1,0,dynamicProperties);
  }
  function LayerIndexEffect(data,elem, dynamicProperties){
      this.p = PropertyFactory.getProp(elem,data.v,0,0,dynamicProperties);
  }
  function MaskIndexEffect(data,elem, dynamicProperties){
      this.p = PropertyFactory.getProp(elem,data.v,0,0,dynamicProperties);
  }
  function CheckboxEffect(data,elem, dynamicProperties){
      this.p = PropertyFactory.getProp(elem,data.v,0,0,dynamicProperties);
  }
  function NoValueEffect(){
      this.p = {};
  }
  function EffectsManager(data,element,dynamicProperties){
      var effects = data.ef;
      this.effectElements = [];
      var i,len = effects.length;
      var effectItem;
      for(i=0;i<len;i++) {
          effectItem = new GroupEffect(effects[i],element,dynamicProperties);
          this.effectElements.push(effectItem);
      }
  }
  
  function GroupEffect(data,element,dynamicProperties){
      this.dynamicProperties = [];
      this.init(data,element,this.dynamicProperties);
      if(this.dynamicProperties.length){
          dynamicProperties.push(this);
      }
  }
  
  GroupEffect.prototype.getValue = function(){
      this.mdf = false;
      var i, len = this.dynamicProperties.length;
      for(i=0;i<len;i+=1){
          this.dynamicProperties[i].getValue();
          this.mdf = this.dynamicProperties[i].mdf ? true : this.mdf;
      }
  };
  
  GroupEffect.prototype.init = function(data,element,dynamicProperties){
      this.data = data;
      this.mdf = false;
      this.effectElements = [];
      var i, len = this.data.ef.length;
      var eff, effects = this.data.ef;
      for(i=0;i<len;i+=1){
          switch(effects[i].ty){
              case 0:
                  eff = new SliderEffect(effects[i],element,dynamicProperties);
                  this.effectElements.push(eff);
                  break;
              case 1:
                  eff = new AngleEffect(effects[i],element,dynamicProperties);
                  this.effectElements.push(eff);
                  break;
              case 2:
                  eff = new ColorEffect(effects[i],element,dynamicProperties);
                  this.effectElements.push(eff);
                  break;
              case 3:
                  eff = new PointEffect(effects[i],element,dynamicProperties);
                  this.effectElements.push(eff);
                  break;
              case 4:
              case 7:
                  eff = new CheckboxEffect(effects[i],element,dynamicProperties);
                  this.effectElements.push(eff);
                  break;
              case 10:
                  eff = new LayerIndexEffect(effects[i],element,dynamicProperties);
                  this.effectElements.push(eff);
                  break;
              case 11:
                  eff = new MaskIndexEffect(effects[i],element,dynamicProperties);
                  this.effectElements.push(eff);
                  break;
              case 5:
                  eff = new EffectsManager(effects[i],element,dynamicProperties);
                  this.effectElements.push(eff);
                  break;
              case 6:
                  eff = new NoValueEffect(effects[i],element,dynamicProperties);
                  this.effectElements.push(eff);
                  break;
          }
      }
  };var bodymovinjs = {}; function play(animation){ animationManager.play(animation); } function pause(animation){ animationManager.pause(animation); } function togglePause(animation){ animationManager.togglePause(animation); } function setSpeed(value,animation){ animationManager.setSpeed(value, animation); } function setDirection(value,animation){ animationManager.setDirection(value, animation); } function stop(animation){ animationManager.stop(animation); } function moveFrame(value){ animationManager.moveFrame(value); } function searchAnimations(){ if(standalone === true){ animationManager.searchAnimations(animationData,standalone, renderer); }else{ animationManager.searchAnimations(); } } function registerAnimation(elem){ return animationManager.registerAnimation(elem); } function resize(){ animationManager.resize(); } function start(){ animationManager.start(); } function goToAndStop(val,isFrame, animation){ animationManager.goToAndStop(val,isFrame, animation); } function setSubframeRendering(flag){ subframeEnabled = flag; } function loadAnimation(params){ if(standalone === true){ params.animationData = JSON.parse(animationData); } return animationManager.loadAnimation(params); } function destroy(animation){ return animationManager.destroy(animation); } function setQuality(value){ if(typeof value === 'string'){ switch(value){ case 'high': defaultCurveSegments = 200; break; case 'medium': defaultCurveSegments = 50; break; case 'low': defaultCurveSegments = 10; break; } }else if(!isNaN(value) && value > 1){ defaultCurveSegments = value; } if(defaultCurveSegments >= 50){ roundValues(false); }else{ roundValues(true); } } function installPlugin(type,plugin){ if(type==='expressions'){ expressionsPlugin = plugin; } } function getFactory(name){ switch(name){ case "propertyFactory": return PropertyFactory;case "shapePropertyFactory": return ShapePropertyFactory; case "matrix": return Matrix; } } bodymovinjs.play = play; bodymovinjs.pause = pause; bodymovinjs.togglePause = togglePause; bodymovinjs.setSpeed = setSpeed; bodymovinjs.setDirection = setDirection; bodymovinjs.stop = stop; bodymovinjs.moveFrame = moveFrame; bodymovinjs.searchAnimations = searchAnimations; bodymovinjs.registerAnimation = registerAnimation; bodymovinjs.loadAnimation = loadAnimation; bodymovinjs.setSubframeRendering = setSubframeRendering; bodymovinjs.resize = resize; bodymovinjs.start = start; bodymovinjs.goToAndStop = goToAndStop; bodymovinjs.destroy = destroy; bodymovinjs.setQuality = setQuality; bodymovinjs.installPlugin = installPlugin; bodymovinjs.__getFactory = getFactory; bodymovinjs.version = '4.8.0'; function checkReady(){ if (document.readyState === "complete") { clearInterval(readyStateCheckInterval); searchAnimations(); } } function getQueryVariable(variable) { var vars = queryString.split('&'); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split('='); if (decodeURIComponent(pair[0]) == variable) { return decodeURIComponent(pair[1]); } } } var standalone = '__[STANDALONE]__'; var animationData = '__[ANIMATIONDATA]__'; var renderer = ''; if(standalone) { var scripts = document.getElementsByTagName('script'); var index = scripts.length - 1; var myScript = scripts[index] || { src: '' }; var queryString = myScript.src.replace(/^[^\?]+\??/,''); renderer = getQueryVariable('renderer'); } var readyStateCheckInterval = setInterval(checkReady, 100); return bodymovinjs; }));  