<link rel="import" href="polymer-animation-group.html">
<polymer-element name="polymer-shake" extends="polymer-animation-group">
  <template>
    <polymer-animation duration="{{period}}">
      <polymer-animation-prop name="transform">
        <polymer-animation-keyframe value="translateX(0px)"></polymer-animation-keyframe>
        <polymer-animation-keyframe value="{{negTransform}}"></polymer-animation-keyframe>
      </polymer-animation-prop>
    </polymer-animation>
    <polymer-animation duration="{{shakeDuration}}" iterationCount="{{shakeIterations}}">
      <polymer-animation-prop name="transform">
        <polymer-animation-keyframe value="{{negTransform}}"></polymer-animation-keyframe>
        <polymer-animation-keyframe value="{{posTransform}}"></polymer-animation-keyframe>
        <polymer-animation-keyframe value="{{negTransform}}"></polymer-animation-keyframe>
      </polymer-animation-prop>
    </polymer-animation>
    <polymer-animation duration="{{period}}">
      <polymer-animation-prop name="transform">
        <polymer-animation-keyframe value="{{negTransform}}"></polymer-animation-keyframe>
        <polymer-animation-keyframe value="translateX(0px)"></polymer-animation-keyframe>
      </polymer-animation-prop>
    </polymer-animation>
    <content></content>
  </template>
  <script>
    Polymer('polymer-shake', {
			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>
