--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/components/autoscroll-component.js	Tue Nov 22 14:04:03 2016 +0100
@@ -0,0 +1,68 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  constants: Ember.inject.service(),
+
+  classNames: ['autoscroll-component'],
+  tagName: "span",
+  attributeBindings: ['title'],
+
+  title: Ember.computed.oneWay('text'),
+
+  text: null,
+  textWidth: null,
+  doScroll: false,
+  keyFrameStyleDef: null,
+  scrollRate: null,
+
+  willDestroyElement() {
+    const keyFrameStyleDef = this.get('keyFrameStyleDef');
+    if(keyFrameStyleDef !== null) {
+        Ember.run(() => {
+          Ember.$(keyFrameStyleDef).remove();
+        });
+        this.set('keyFrameStyleDef', null);
+    }
+  },
+
+  didRender() {
+    const textWidth = this.$('span').width();
+    if(textWidth === this.get('textWidth')) {
+      return;
+    }
+    this.set('textWidth', textWidth);
+    const outerWidth = this.$().width();
+    const doScroll = (textWidth > outerWidth);
+    const id = this.elementId;
+
+    Ember.run(() => {
+      if(this.get('keyFrameStyleDef') !== null) {
+        Ember.$(this.get('keyFrameStyleDef')).remove();
+      }
+      if(doScroll) {
+        const scrollRate = this.get('scrollRate') || this.get('constants').AUTOSCROLL_RATE;
+        const duration = Math.ceil((textWidth + 30) / scrollRate) + 1;
+        const firstFramePercent = Math.ceil((1/duration)*100);
+
+        var keyframesDef = '';
+        ['-webkit-', '-moz-', ''].forEach(function(p) {
+          keyframesDef += `@${p}keyframes marquee-${id} { 0% { left: 0; } ${firstFramePercent}% { left: 0; } 100% { left: -${textWidth + 30 }px; } }\n`;
+        });
+        this.set(
+          'keyFrameStyleDef',
+          Ember.$("<style>")
+            .prop('id', 'scroll-style-'+id)
+            .prop("type", "text/css")
+            .text(keyframesDef)
+            .appendTo("head")
+        );
+        this.$('div').css('animation', `marquee-${id} ${duration}s linear infinite`);
+        this.$('span:last-child').removeClass('hidden-double');
+      } else {
+        this.$('span:last-child').addClass('hidden-double');
+        this.$('div').css('animation', '');
+      }
+    });
+
+  }
+});