import Ember from "ember";
import Promise from "liquid-fire/promise";
var capitalize = Ember.String.capitalize;

export default Ember.Mixin.create({
  growDuration: 250,
  growPixelsPerSecond: 200,
  growEasing: 'slide',

  animateGrowth: function(elt, have, want) {
    return Promise.all([
      this._adaptDimension(elt, 'width', have, want),
      this._adaptDimension(elt, 'height', have, want)
    ]);
  },
  
  _adaptDimension: function(elt, dimension, have, want) {
    var target = {};
    target[dimension] = [
      want['literal'+capitalize(dimension)],
      have['literal'+capitalize(dimension)],
    ];
    return Ember.$.Velocity(elt[0], target, {
      duration: this._durationFor(have[dimension], want[dimension]),
      queue: false,
      easing: this.get('growEasing')      
    });
  },

  _durationFor: function(before, after) {
    return Math.min(this.get('growDuration'), 1000*Math.abs(before - after)/this.get('growPixelsPerSecond'));
  }
  
});

@@ -215,16 +215,83 @@
 lide',%0A%0A
+  transitionMap: Ember.inject.service('liquid-fire-transitions'),%0A%0A
   animat
@@ -323,24 +323,62 @@
 ve, want) %7B%0A
+    this.transitionMap.activeCount++;%0A
     return P
@@ -508,18 +508,74 @@
   %5D)
+.then(()=%3E%7B%0A      this.transitionMap.activeCount--;%0A    %7D)
 ;%0A  %7D,%0A
-  
 %0A
+
   _a
@@ -943,22 +943,16 @@
 Easing')
-      
 %0A    %7D);
@@ -1114,15 +1114,13 @@
 ));%0A  %7D%0A
-  
 %0A%7D);%0A

add growth animations to the running transition count