<link rel="import" href="g-animation-group.html">
<polymer-element name="g-shake" extends="g-animation-group">
  <template>
    <g-animation duration="{{period}}">
      <g-property name="transform">
        <g-keyframe value="translateX(0px)"></g-keyframe>
        <g-keyframe value="{{negTransform}}"></g-keyframe>
      </g-property>
    </g-animation>
    <g-animation duration="{{shakeDuration}}" iterationCount="{{shakeIterations}}">
      <g-property name="transform">
        <g-keyframe value="{{negTransform}}"></g-keyframe>
        <g-keyframe value="{{posTransform}}"></g-keyframe>
        <g-keyframe value="{{negTransform}}"></g-keyframe>
      </g-property>
    </g-animation>
    <g-animation duration="{{period}}">
      <g-property name="transform">
        <g-keyframe value="{{negTransform}}"></g-keyframe>
        <g-keyframe value="translateX(0px)"></g-keyframe>
      </g-property>
    </g-animation>
    <content></content>
  </template>
  <script>
    Polymer('g-shake', {
      publish: {
        type: 'seq',
        targetSelector: '',
        duration: 0.3,
        magnitude: '10px',
        period: 0.1,
        easing: 'ease-in'
      },
      ready: function() {
        this.super();
        this.magnitudeChanged();
        this.periodChanged();
      },
      durationChanged: function() {
        this.super();
        this.generate();
      },
      magnitudeChanged: function() {
        this.generate();
      },
      periodChanged: function() {
        this.generate();
      },
      generate: function() {
        this.negTransform = 'translateX(-' + this.magnitude + ')';
        this.posTransform = 'translateX(' + this.magnitude + ')';
        this.shakeDuration = this.period * 2;
        this.shakeIterations = this.duration === 'Infinity' ? this.duration : Math.ceil(this.duration / this.shakeDuration);
      },
      get timingProps() {
        return {};
      }
    });
  </script>
</polymer-element>
