Cleaned up Javascript and refactored the functions and tests plus optimized animation of text

openlp/core/display/html/display.css

@@ -1,12 +1,12 @@
 /* Animation key frames for horizontal scrolling of alert */
-@keyframes alert-scrolling-text {
+/* @keyframes alert-scrolling-text {
   from { margin-left: 100%; }
   to {  margin-left: -300% }
-}
+} */
 
 .horizontal-scroll-animation {
   animation-duration: 10s;
-  animation-iteration-count: 1;
+  animation-iteration-count: 2;
   animation-timing-function: linear;
   animation-name: alert-scrolling-text;
 }
@@ -17,11 +17,14 @@
   margin: 0;
   padding: 0;
   left: 0;
-  z-index: 10;
+  z-index: 11;
   width: 100%;
   height: 0%;
-  overflow: hidden;
+  min-height: 0%;
-  visibility:hidden;
+  overflow: hidden;  
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .bg-default.middle {
@@ -44,16 +47,13 @@
 
 /* ALERT BACKGROUND STYLING */
 #alert {
+  z-index: 12;
   position: relative;
   top: 50%;
-  transform: translateY(-50%);
+  transform: translateY(-50%);  
-  z-index: 12;
   overflow: visible;
   white-space: nowrap;
   color: #ffffff;
-  visibility: hidden;
+  opacity: 0;
-}
+  transform: translateX(110%);  
-
-.no-scroll {
-  margin: 0 20px;
 }

openlp/core/display/html/display.html

@@ -26,6 +26,7 @@
     }
 
     </style>
+    <style type="text/css" id="keyframeStyles"></style>
     <link rel="stylesheet" type="text/css" href="display.css"></link>
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="reveal.js"></script>

openlp/core/display/html/display.js

@@ -164,10 +164,6 @@ function _pathToString(path) {
     return filename;
 }
 
-/**
- *
- */
-
 /**
  * An audio player with a play list
  */
@@ -422,49 +418,129 @@ var Display = {
     }
     else {
       if (this._alertState === AlertState.Displaying || this._alertState === AlertState.DisplayingFromQueue) {
-        var alertObject = {text: text, settings: alert_settings};        
+        addAlertToQueue(text, alert_settings);
-        this._alerts.push(JSON.stringify(alertObject));        
-        return null;
       }
     }
     var settings = JSON.parse(alert_settings);
-    this._alertSettings = settings;
+    this._alertSettings = settings;    
-    var alertBackground = $("#alert-background")[0];
+    Display.setAlertText(text);
-    var alertText = $("#alert")[0];
+    
-    alertText.innerHTML = text;
+    Display.initAlertEventListeners();
+
+    if (settings.scroll === true) {
+      Display.setAlertKeyframes($('#alert'[0].scrollWidth));  
+    }
     /* Check if the alert is a queued alert */
-    if (this._alertState !== AlertState.DisplayingFromQueue) {
+    if (Display._alertState !== AlertState.DisplayingFromQueue) {
-      this._alertState = AlertState.Displaying;
+      Display._alertState = AlertState.Displaying;
     }
     
-    Display.showAlertBackground(settings);
+    Display.showAlertBackground(settings);                
-        
+  },
-    alertBackground.addEventListener('transitionend', function (e) {
+  /**
-      e.stopPropagation();
+   * Initialize alert event listeners
-      if (Display._transitionState === TransitionState.EntranceTransition) {        
+   */
-        Display._transitionState = TransitionState.NoTransition;
+  initAlertEventListeners: function () {
-        Display.showAlertText(Display._alertSettings);
+    var alertBackground = $("#alert-background")[0];
-      }
+    var alertText = $("#alert")[0];
-      else if (Display._transitionState === TransitionState.ExitTransition){        
-        Display._transitionState = TransitionState.NoTransition;
-        alertBackground.classList = "bg-default";
-        Display.displayNextAlert();        
-      }
-    });
 
-    alertText.addEventListener('animationend', function (e) {
+    alertBackground.addEventListener('transitionend', Display.alertTransitionEndEvent, false);
-      e.stopPropagation();      
+    alertText.addEventListener('animationend', Display.alertAnimationEndEvent, false);
-      Display.hideAlertText();      
+  },
-    });
+  /**
+   * Add an alert to the alert queue 
+   * @param {string} text - The alert text to be displayed
+   * @param {string} setttings - JSON object containing the settings for the alert
+   */
+  addAlertToQueue: function (text, settings) {
+    var alertObject = {text: text, settings: settings};        
+    this._alerts.push(JSON.stringify(alertObject));
+    return null;   
+  },
+  /**
+   * Set Alert Text
+   * @param {string} text - The alert text to display
+   */
+  setAlertText: function (text) {
+    var alertText = $("#alert")[0];
+    alertText.textContent = text;
+  },
+  /**
+   * Set the keyframe styles for the scrolling text
+   * @param {int} scrollWidth - The length of the paragraph with the alert text 
+   */
+  setAlertKeyframes: function (scrollWidth) {
+    var keyframeStyle = $('#keyframeStyles')[0];
+    var scrollWidthPercentage = Math.ceil((((scrollWidth / screen.width) * 100) + 1) / 10) * 10;
+    scrollWidthPercentage += 110; // Scroll the full text length
+    var keyframes = "@keyframes alert-scrolling-text {" +
+                              "from { transform: translateX(110%); } " +
+                              "to { transform: translateX(-" + scrollWidthPercentage + "%);}";    
+    keyframeStyle.innerHTML = keyframes;    
+    return keyframes;
+  },    
+  /**
+   * The alertTransitionEndEvent called after a transition has ended
+   */
+  alertTransitionEndEvent: function (e) {
+    e.stopPropagation();
+    if (Display._transitionState === TransitionState.EntranceTransition) {        
+      Display._transitionState = TransitionState.NoTransition;
+      Display.showAlertText(Display._alertSettings);
+      console.log("Show alert has been called");
+    }
+    else if (Display._transitionState === TransitionState.ExitTransition) {        
+      Display._transitionState = TransitionState.NoTransition;      
+      Display.displayNextAlert();        
+    } 
+    else if (Display._transitionState === "animatingText") {
+      if (e.propertyName === "transform") {
+        console.log("The text transform has ended");
+      }
+    }
+  },
+  /**
+   * The alertAnimationEndEvent called after a animation has ended
+   */
+  alertAnimationEndEvent: function (e) {
+    e.stopPropagation();         
+    Display.hideAlertText(); 
   },
   /**
    * Start background entrance transition for display of alert
-   * @param {object} location - The location of the alert (top, middle or bottom)
+   * @param {string} JSON object - JSON object containing the alert settings
    */
   showAlertBackground: function (settings) {    
     var alertBackground = $("#alert-background")[0];   
     var transitionSetting;
-    switch (settings.location) {
+
+    Display.setAlertLocation(settings.location);
+          
+    alertBackground.style.backgroundColor = settings.background_color;
+
+    if (Display._alertState === AlertState.DisplayingFromQueue) {
+      transitionSetting = "height 1s linear 2s";
+    }
+    else {
+      transitionSetting = "height 1s linear";
+    }     
+    // Wait for styles to be set first before starting transition
+    setTimeout( function() {
+      alertBackground.style.height = "auto";
+      alertBackground.style.minHeight = "25%";
+      alertBackground.style.transition = transitionSetting;
+      alertBackground.style.visibility = "visible";      
+    }, 50);
+    this._transitionState = TransitionState.EntranceTransition;
+  },
+  /**
+   * Set the location of the alert
+   * @param {int} location - Integer number with the location of the alert on screen
+   */
+  setAlertLocation: function (location) {
+    var alertBackground = $("#alert-background")[0];
+
+    switch (location) {
       case AlertLocation.Top:
         alertBackground.classList.add("top");                       
         break;
@@ -475,31 +551,17 @@ var Display = {
       default:
         alertBackground.classList.add("bottom");                       
         break;
-    }      
-    alertBackground.style.backgroundColor = settings.background_color;
-
-    if (this._alertState === AlertState.DisplayingFromQueue) {
-      transitionSetting = "1s linear 2s";
     }
-    else {
-      transitionSetting = "1s linear";
-    }     
-    // Wait for styles to be set first before starting transition
-    setTimeout( function() {
-      alertBackground.style.height = "25%";
-      alertBackground.style.transition = transitionSetting;
-      alertBackground.style.visibility = "visible";      
-    }, 50);
-    this._transitionState = TransitionState.EntranceTransition;
   },
   /**
-   * Start background exit transition once alert has been displayed
+   * Hide the alert background after the alert has been shown
-   * @param {string} location - Integer showing the location of the alert on screen
    */
   hideAlertBackground: function () {
     var alertBackground = $("#alert-background")[0];    
     alertBackground.style.height = "0%";
-    alertBackground.style.transition = "1s linear";           
+    alertBackground.style.minHeight = "0%";
+    alertBackground.style.transition = "height 1s linear";
+    alertBackground.className = "bg-default";
     this._transitionState = TransitionState.ExitTransition;
     this._alertState = AlertState.NotDisplaying;        
   },
@@ -508,21 +570,22 @@ var Display = {
    * @param {json} settings object - The settings to use for the animation
    */
   showAlertText: function (settings) {        
-    var alertText = $("#alert")[0];  
+    var alertText = $("#alert")[0];         
-    alertText.style.visibility = "visible";
+    alertText.style.opacity = 1;
     alertText.style.color = settings.font_color;
     alertText.style.fontFamily = settings.font_face;
     alertText.style.fontSize = settings.font_size + "pt";
-    alertText.classList.add("no-scroll");    
+            
-    if (settings.scroll) {             
+    if (settings.scroll) {      
       var animationSettings = "alert-scrolling-text " + settings.timeout +
-                              "s linear 0s " + settings.repeat + " normal";        
+                              "s linear 0s " + settings.repeat + " normal";       
-      alertText.style.animation = animationSettings;        
+      alertText.style.animation = animationSettings;
       Display._animationState = AnimationState.ScrollingText;
     }
     else {                
       Display._animationState = AnimationState.NonScrollingText; 
-      alertText.style.animation = "";      
+      alertText.style.animation = "";
+      alertText.classList.add("no-scroll");      
       setTimeout (function () {                       
         Display._animationState = AnimationState.NoAnimation;        
         Display.hideAlertText();
@@ -533,14 +596,15 @@ var Display = {
    *  Reset styling and hide the alert text after displaying the animation
    */
   hideAlertText: function () {
-    var alertText = $('#alert')[0];
+    var alertText = $('#alert')[0];            
-    alertText.style.animation = "";
+    alertText.style.animation = "";    
-    alertText.classList = "";
+    alertText.classList = "";    
-    alertText.style.visibility = "hidden";
+    alertText.style.opacity = 0;
     alertText.style.color = "rgb(255, 255, 255)"; 
     alertText.style.fontSize = "40pt";
-    Display._animationState = AnimationState.NoAnimation;
+    Display._animationState = AnimationState.NoAnimation;    
-    Display.hideAlertBackground();                                         
+    Display.hideAlertBackground();
+    Display.resetAlertKeyframes();                                         
   },
   /** 
   * Display the next alert in the queue
@@ -554,7 +618,14 @@ var Display = {
     else {
       return null;
     }
-  },    
+  },  
+  /**
+   * Reset animation keyframes after displaying alert
+   */
+  resetAlertKeyframes: function () {
+    var keyframeStyle = document.getElementById('keyframeStyles');    
+    keyframeStyle.innerHTML = "";
+  },
   /**
    * Add a slide. If the slide exists but the HTML is different, update the slide.
    * @param {string} verse - The verse number, e.g. "v1"

tests/js/test_display.js

@@ -154,20 +154,20 @@ describe("The Display object", function () {
 });
 
 describe("Display.alert", function () {
-  var alertBackground, alert, settings;
+  var alertBackground, alertText, settings;
 
   beforeEach(function () {
     document.body.innerHTML = "";
     alertBackground = document.createElement("div");
     alertBackground.setAttribute("id", "alert-background");
     document.body.appendChild(alertBackground);
-    alert = document.createElement("p");
+    alertText = document.createElement("p");
-    alert.setAttribute("id","alert");
+    alertText.setAttribute("id","alert");
-    alertBackground.appendChild(alert);
+    alertBackground.appendChild(alertText);
     settings = '{ \
       "location": 1, "font_face": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif", \
       "font_size": 40, "font_color": "#ffffff", "background_color": "#660000", \
-      "timeout": 5, "repeat": 1, "scrolling_text": true \
+      "timeout": 5, "repeat": 1, "scroll": true \
     }';
   });
 
@@ -175,30 +175,73 @@ describe("Display.alert", function () {
     expect(Display.alert("",settings)).toBeNull();
   });
 
-  it("should set the correct alert text", function () {    
+  it("should set the correct alert text", function () { 
+    spyOn("Display", "addAlertToQueue");       
+    spyOn("Display", "initAlertEventListeners");
+    spyOn("Display", "setAlertKeyframes");
+    spyOn("Display", "showAlertBackground");
     Display.alert("OPEN-LP-3.0 Alert Test", settings);
+
+    expect(Display.setAlertText).toHaveBeenCalled();
     expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test");
   });
 
-  it("should add alerts to the queue correctly if it called when an alert is displaying", function () {
+  it("should call the addAlertToQueue method if an alert is displaying", function () {
+    spyOn("Display", "addAlertToQueue");
     Display._alerts = [];
     Display._alertState = AlertState.Displaying;
-    var alertObject = {text: "Testing alert queue", settings: settings};
+    var text = "Testing alert queue";
-    var queuedAlert = JSON.stringify(alertObject);
+    
-    Display.alert("Testing alert queue", settings);
+    Display.alert(text, settings);
-
+    
-    expect(Display._alerts.length).toEqual(1);
+    expect(Display.addAlertToQueue).toHaveBeenCalledWith(text, settings);
-    expect(Display._alerts[0]).toEqual(queuedAlert);
   });
 
   it("should set the alert settings correctly", function() {
+    spyOn("Display", "setAlertKeyframes");
     Display.alert("Testing settings", settings);
-
+        
-    console.debug("Settings", JSON.parse(settings));
     expect(Display._alertSettings).toEqual(JSON.parse(settings));
   });
 });
 
+describe("Display.initAlertEventListeners", function() {
+  var alertBackground, styles, alertText;
+  beforeEach(function() {    
+    document.body.innerHTML = "";
+    styles = document.createElement("style");
+    styles.innerHTML = "@keyframes test { from {background-color: red;} \
+                                            to {background-color: yellow;}";
+    document.head.appendChild(styles);
+    alertBackground = document.createElement("div");
+    alertBackground.setAttribute("id", "alert-background");
+    document.body.appendChild(alertBackground);
+    alertText = document.createElement("p");
+    alertText.setAttribute("id","alert");
+    alertBackground.appendChild(alertText);
+    alertBackground.style.opacity = 0;
+    alertBackground.style.transition = "opacity 0.001s linear";
+    Display.initAlertEventListeners();    
+  });
+
+  it("should set the transition end event listener correctly", function() {
+    spyOn("Display", "alertTransitionEndEvent");
+
+    alertBackground.style.opacity = 1;
+
+    expect(Display.alertTransitionEndEvent).toHaveBeenCalled();
+
+  });
+
+  it("should set the animation end event listener correctly", function() {
+    spyOn("Display", "alertAnimationEndEvent");    
+    
+    alertText.style.animation = "test 0.01s linear";
+
+    expect(Display.alertAnimationEndEvent).toHaveBeenCalled();
+  });
+});
+
 describe("Display.showAlertBackground", function () {
 
   var alertBackground, css, settings, style;
@@ -234,57 +277,184 @@ describe("Display.showAlertBackground", function () {
 
     setTimeout(function () {      
       expect(alertBackground.style.backgroundColor).toEqual(settings.background_color);      
-      expect(alertBackground.style.height).toEqual("25%");
+      expect(alertBackground.style.height).toEqual("auto");
-      expect(alertBackground.style.transition).toEqual("1s linear");
+      expect(alertBackground.style.minHeight).toEqual("25%");
+      expect(alertBackground.style.transition).toEqual("height 1s linear");
       expect(alertBackground.style.visibility).toEqual("visible");
       done();
     }, 50);
-  });
+  });  
+});
 
-  it("should set the correct class when location is top of the page", function () {
+describe("Display.hideAlertBackground", function () {
-    settings.location = 0;
+  var alertBackground;
-    Display.showAlertBackground(settings);
+  beforeEach( function() {
+    document.body.innerHTML = "";
+    alertBackground = document.createElement("div");
+    alertBackground.setAttribute("id", "alert-background");      
+    document.body.appendChild(alertBackground);    
+  });
+  
+  it("reset the background to default once an alert has been displayed", function() {
+    //spyOn(Display, "displayNextAlert");
+    Display.hideAlertBackground();
+    
+    expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
+    expect(Display._alertState).toEqual(AlertState.NotDisplaying);
+    expect(alertBackground.style.transition).toEqual("height 1s linear"); 
+    expect(alertBackground.style.height).toEqual("0%");
+    expect(alertBackground.style.minHeight).toEqual("0%"); 
+    expect(alertBackground.className).toEqual("bg-default");    
+  });
+});
+
+describe("Display.setAlertText", function() {
+  var alertText;
+  beforeEach( function() {
+    document.body.innerHTML = "";
+    alertText = document.createElement("p");
+    alertText.setAttribute("id", "alert");      
+    document.body.appendChild(alertText);    
+  });
+  it("should set the alert text correctly", function () {    
+    Display.setAlertText("OpenLP Alert Text");
+
+    expect(alertText.textContent).toEqual("OpenLP Alert Text");
+  });
+});
+
+describe("Display.setAlertLocation", function() {
+  beforeEach(function() {
+    document.body.innerHTML = "";    
+    alertBackground = document.createElement("p");
+    alertBackground.setAttribute("id","alert-background");
+    alertBackground.setAttribute("class","bg-default");
+    document.body.appendChild(alertBackground);
+  });
+  it("should set the correct class when location is top of the page", function () {    
+    Display.setAlertLocation(0);
 
     expect(alertBackground.className).toEqual("bg-default top");
   });
 
-  it("should set the correct class when location is middle of the page", function () {
+  it("should set the correct class when location is middle of the page", function () {    
-    settings.location = 1;
+    Display.setAlertLocation(1);
-    Display.showAlertBackground(settings);
     
     expect(alertBackground.className).toEqual("bg-default middle");       
   });
 
   it("should set the correct class when location is bottom of the page", function () {
-    Display.showAlertBackground(settings);
+    Display.setAlertLocation(2);
 
     expect(alertBackground.className).toEqual("bg-default bottom");
   });
 });
 
-describe("Display.hideAlertBackground", function () {
+describe("Display.showAlertText", function () {
-  var alertBackground;
+  var alertText, settings;
+  beforeEach(function () {
+    document.body.innerHTML = "";    
+    alertText = document.createElement("p");
+    alertText.setAttribute("id","alert");
+    document.body.appendChild(alertText);
+    settings = {
+      "location": 2, "font_face": "Tahoma", "font_size": 40, 
+      "font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)",
+      "timeout": 0.01, "repeat": 1, "scroll": true
+    };
+    Display._transitionState = TransitionState.EntranceTransition;
+  });
 
+  it("should set the correct styles on the text", function() {    
+    Display.showAlertText(settings);    
+
+    expect(alertText.style.opacity).toEqual('1');
+    expect(alertText.style.color).toEqual("rgb(255, 255, 255)");
+    expect(alertText.style.fontFamily).toEqual("Tahoma");
+    expect(alertText.style.fontSize).toEqual("40pt");    
+  });
+
+  it("should set the correct animation when text is set to scroll)", function () {              
+    Display.showAlertText(settings);
+
+    expect(alertText.style.animation).toEqual("alert-scrolling-text " + settings.timeout + "s linear 0s 1 normal");
+    expect(Display._animationState).toEqual(AnimationState.ScrollingText);    
+  });
+
+  it("should set the correct styles when text is not scrolling", function (done) {
+    settings.scroll = false;       
+    Display._transitionState = TransitionState.EntranceTransition;   
+    spyOn(Display, "hideAlertText");    
+    Display.showAlertText(settings);
+
+    expect(alertText.style.opacity).toEqual('1');
+    expect(alertText.style.animation).toEqual("");
+    expect(Display._animationState).toEqual(AnimationState.NonScrollingText);    
+    setTimeout (function () {
+      expect(alertText.className).toEqual("no-scroll");
+      expect(Display._animationState).toEqual(AnimationState.NoAnimation);
+      expect(Display.hideAlertText).toHaveBeenCalled();      
+      done();
+    }, settings.timeout * 1000);
+  });
+});
+
+describe("Display.hideAlertText", function() {
+  var alertBackground, alertText, keyframeStyle;
   beforeEach(function () {
     document.body.innerHTML = "";
-    alertBackground = document.createElement("div");
+    // keyframeStyle = document.createElement("style");
-    alertBackground.setAttribute("id", "alert-background");
+    // keyframeStyle.setAttribute("id", "keyframeStyles");    
-    document.body.appendChild(alertBackground);
+    // document.head.appendChild(keyframeStyle);
+    // alertBackground = document.createElement("div");
+    // alertBackground.setAttribute("id", "alert-background");
+    // document.body.appendChild(alertBackground);
+    alertText = document.createElement("p");
+    alertText.setAttribute("id", "alert");
+    alertText.style.opacity = 1;
+    alertText.style.animation = "alert-scrolling-text 5s linear 0s 1 bg-default";
+    document.body.appendChild(alertText);    
+    Display._animationState = AnimationState.ScrollingText;
+  });
+
+  it("should reset the text styles and animation state after the text has scrolled", function() {
+    spyOn(Display, "resetAlertKeyframes");
+    spyOn(Display, "hideAlertBackground");    
+    Display.hideAlertText();
+
+    expect(alertText.style.animation).toEqual("");
+    expect(alertText.style.opacity).toEqual('0');
+    expect(alertText.style.color).toEqual("rgb(255, 255, 255)");
+    expect(alertText.style.fontSize).toEqual("40pt");    
+    expect(Display._animationState).toEqual(AnimationState.NoAnimation);
+  });
+
+  it("should call the hideAlertBackground and resetAlertKeyframes methods", function() {
+    spyOn(Display, "hideAlertBackground");
+    spyOn(Display, "resetAlertKeyframes");    
+    Display.hideAlertText();
+
+    expect(Display.hideAlertBackground).toHaveBeenCalled();
+    expect(Display.resetAlertKeyframes).toHaveBeenCalled();
+  });  
+});
+
+describe("Display.addAlertToQueue", function () {  
+  it("should add an alert to the queue if one is displaying already", function() {
     Display._alerts = [];
-  });
+    Display._alertState = AlertState.Displaying;
+    settings = '{ \
+      "location": 1, "font_face": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif", \
+      "font_size": 40, "font_color": "#ffffff", "background_color": "#660000", \
+      "timeout": 5, "repeat": 1, "scrolling_text": true \
+    }';
+    var alertObject = {text: "Testing alert queue", settings: settings};
+    var queuedAlert = JSON.stringify(alertObject);    
+    
+    Display.addAlertToQueue("Testing alert queue", settings);
 
-  it("should set the styles correctly when the hideAlertBackground method is called", function () {    
+    expect(Display._alerts.length).toEqual(1);
-    Display.hideAlertBackground();
+    expect(Display._alerts[0]).toEqual(queuedAlert);
-
-    expect(alertBackground.style.height).toEqual('0%');
-    expect(alertBackground.style.transition).toEqual("1s linear");    
-  });
-
-  it("should set the correct states when hideAlertBackground is called", function () {
-    Display.hideAlertBackground();
-
-    expect(Display._alertState).toEqual(AlertState.NotDisplaying);
-    expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
   });
 });
 
@@ -314,106 +484,74 @@ describe("Display.displayNextAlert", function () {
   });
 });
 
-describe("Display.hideAlertText", function() {
+describe("Display.alertTransitionEndEvent", function() {
-  var alertBackground, alertText;
+  it("should set the correct state and call showAlertText after the alert entrance transition", function() {    
-  beforeEach(function () {
+    var fake_settings = {test: "fake_settings"};  
-    document.body.innerHTML = "";
+    Display._alertSettings = fake_settings;
-    alertBackground = document.createElement("div");
+    spyOn("Display", "showAlertText");    
-    alertBackground.setAttribute("id", "alert-background");
-    document.body.appendChild(alertBackground);
-    alertText = document.createElement("p");
-    alertText.setAttribute("id", "alert");
-    alertText.style.visibility = "visible";
-    alertText.style.animation = "alert-scrolling-text 5s linear 0s 1 bg-default";
-    alertBackground.appendChild(alertText);
-    Display._animationState = AnimationState.ScrollingText;
-  });
-
-  it("should reset the text styles and animation state after the text has scrolled", function() {    
-    Display.hideAlertText();
-
-    expect(alertText.style.animation).toEqual("");
-    expect(alertText.style.visibility).toEqual("hidden");
-    expect(alertText.style.color).toEqual("rgb(255, 255, 255)");
-    expect(alertText.style.fontSize).toEqual("40pt");    
-    expect(Display._animationState).toEqual(AnimationState.NoAnimation);
-  });
-
-  it("should call the alert background method", function() {
-    spyOn(Display, "hideAlertBackground");
-    Display.hideAlertText();
-
-    expect(Display.hideAlertBackground).toHaveBeenCalled();
-  });
-});
-
-describe("Display.showAlertText", function () {
-  var alertText, settings;
-  beforeEach(function () {
-    document.body.innerHTML = "";    
-    alertText = document.createElement("p");
-    alertText.setAttribute("id","alert");
-    document.body.appendChild(alertText);
-    settings = {
-      "location": 2, "font_face": "Tahoma", "font_size": 40, 
-      "font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)",
-      "timeout": 0.01, "repeat": 1, "scroll": true
-    };
     Display._transitionState = TransitionState.EntranceTransition;
-  });
+    var event = document.createEvent("animationend");
+    Display.alertTransitionEnd(event);
 
-  it("should set the correct styles on the text", function() {
+    expect(Display._transitionState).toEqual(TransitionState.NoTransition);
-    Display.showAlertText(settings);    
+    expect(Display.alertTransitionEndEvent).toHaveBeenCalledWith(fake_settings);
-
-    expect(alertText.style.visibility).toEqual("visible");
-    expect(alertText.style.color).toEqual("rgb(255, 255, 255)");
-    expect(alertText.style.fontFamily).toEqual("Tahoma");
-    expect(alertText.style.fontSize).toEqual("40pt");    
-  });
-
-  it("should set the correct animation when text is set to scroll)", function () {            
-    Display.showAlertText(settings);
-
-    expect(alertText.style.animation).toEqual("alert-scrolling-text " + settings.timeout + "s linear 0s 1 normal");
-    expect(Display._animationState).toEqual(AnimationState.ScrollingText);    
-  });
-
-  it("should set the correct styles on entrance transition (without scroll)", function (done) {
-    settings.scroll = false;       
-    Display._transitionState = TransitionState.EntranceTransition;
-    spyOn(Display, "hideAlertBackground");    
-    Display.showAlertText(settings);
-
-    expect(alertText.style.visibility).toEqual("visible");
-    expect(alertText.style.animation).toEqual("");
-    expect(Display._animationState).toEqual(AnimationState.NonScrollingText);    
-    setTimeout (function () {
-      expect(alertText.className).toEqual("no-scroll");
-      expect(Display._animationState).toEqual(AnimationState.NoAnimation);
-      expect(Display.hideAlertBackground).toHaveBeenCalled();
-      done();
-    }, settings.timeout * 1000);
-  });
-});
-
-describe("Display.hideAlertBackground", function () {
-  var alertBackground;
-  beforeEach( function() {
-    document.body.innerHTML = "";
-    alertBackground = document.createElement("div");
-    alertBackground.setAttribute("id", "alert-background");
-    alertBackground.setAttribute("class", "bg-default");    
-    document.body.appendChild(alertBackground);    
   });
   
-  it("reset the background to default once an aletr has been displayed", function() {
+  it("should set the correct state, class and call displayNextAlert after the alert exit transition", function() {        
-    spyOn(Display, "displayNextAlert");
+    spyOn("Display", "displayNextAlert");    
-    Display.hideAlertBackground();
+    Display._transitionState = TransitionState.ExitTransition;
+    var event = document.createEvent("animationend");
+    Display.alertTransitionEnd(event);
     
-    expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
+    expect(Display._transitionState).toEqual(TransitionState.NoTransition);
-    expect(Display._alertState).toEqual(AlertState.NotDisplaying);
+    expect(Display.displayNextAlert).toHaveBeenCalled();
-    expect(alertBackground.style.height).toEqual("0%");    
+  });
-    expect(alertBackground.className).toEqual("bg-default");    
+});
+
+describe("Display.alertAnimationEndEvent", function () {
+  it("should call the hideAlertText method", function() {
+    spyOn("Display","hideAlertText");
+
+    expect(Display.hideAlertText).toHaveBeenCalled();
+  });
+});
+
+describe("Display.setAlertKeyframes", function () {
+  var keyframeStyle;
+  beforeEach( function () {
+    document.head.innerHTML = "";
+    keyframeStyle = document.createElement("style");
+    keyframeStyle.setAttribute("id", "keyframeStyles");
+    document.head.appendChild(keyframeStyle);    
+  });
+
+  it("should set the correct keyframes", function () {
+    var scrollWidth = 3200;
+    var scrollWidthPercentage = (Math.ceil((((scrollWidth / screen.width) * 100) + 1) / 10) * 10) + 110;
+    var keyframeHtml = "@keyframes alert-scrolling-text {" +
+      "from { transform: translateX(110%); } " +
+      "to { transform: translateX(-" + scrollWidthPercentage +"%);}";        
+        
+    expect(Display.setAlertKeyframes(scrollWidth)).toEqual(keyframeHtml);
+    expect(keyframeStyle.innerHTML).toEqual(keyframeHtml);
+  });
+});
+
+describe("Display.resetAlertKeyframes", function () {
+  var keyframeStyle;
+  beforeEach( function () {
+    document.head.innerHTML = "";  
+    keyframeStyle = document.createElement("style");
+    keyframeStyle.setAttribute("id", "keyframeStyles");
+    document.head.appendChild(keyframeStyle);
+    keyframeStyle.innerHTML = "@keyframes alert-scrolling-text {" + 
+                                "from { margin-left: 110%; } to { margin-left: -220;}";    
+  });
+
+  it("shoud reset the key frames after scrolling the text", function () {        
+    Display.resetAlertKeyframes();
+
+    expect(keyframeStyle.innerHTML).toEqual("");
   });
 });