diff --git a/openlp/core/display/html/display.html b/openlp/core/display/html/display.html
index 876a85667..d6c9fffec 100644
--- a/openlp/core/display/html/display.html
+++ b/openlp/core/display/html/display.html
@@ -27,74 +27,74 @@
 
     /* Animation key frames for horizontal scrolling of alert */
     @keyframes alert-scrolling-text {
-        from { margin-left: 100%; }
-        to {  margin-left: -300% }
+      from { margin-left: 100%; }
+      to {  margin-left: -300% }
     }
     /* Middle fade-in alert animation */
     @keyframes middle-fade-in {
-        from { opacity: 0;}
-        to { opacity: 1;}
+      from { opacity: 0;}
+      to { opacity: 1;}
     }
 
     /* Middle fade-out alert animation */
     @keyframes middle-fade-out {
-        from { opacity: 1;}
-        to { opacity: 0;}
+      from { opacity: 1;}
+      to { opacity: 0;}
     }
 
     /* Fade in when alert location is in the middle */
     .middle-entrance-animation {
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-name: middle-fade-in;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-name: middle-fade-in;
     }
 
     /* Fade out when alert location is in the middle */
     .middle-exit-animation {
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-name: middle-fade-out;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-name: middle-fade-out;
     }
 
     .horizontal-scroll-animation {
-        animation-duration: 10s;
-        animation-iteration-count: 1;
-        animation-timing-function: linear;
-        animation-name: alert-scrolling-text;
+      animation-duration: 10s;
+      animation-iteration-count: 1;
+      animation-timing-function: linear;
+      animation-name: alert-scrolling-text;
     }
 
     /* ALERT STYLING */
     #alert-background {
-        position: absolute;
-        margin: 0;
-        padding: 0;
-        left: 0px;
-        right: 0px;
-        z-index: 10;
-        width: 100%;
-        height: 0%;
-        vertical-align: middle;
-        color: #ffffff;
-        background-color: #660000;
-        overflow: hidden;
-        visibility:hidden;
+      position: absolute;
+      margin: 0;
+      padding: 0;
+      left: 0px;
+      right: 0px;
+      z-index: 10;
+      width: 100%;
+      height: 0%;
+      vertical-align: middle;
+      color: #ffffff;
+      background-color: #660000;
+      overflow: hidden;
+      visibility:hidden;
     }
 
     #alert {
-        position: relative;
-        top: 50%;
-        transform: translateY(-50%);
-        margin-top: 0%;
-        margin-right: 0%;
-        margin-left: 100%;
-        margin-bottom: 0%;
-        z-index: 11;
-        overflow: visible;
-        white-space: nowrap;
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        font-size: 100pt;
-        color: #ffffff;
-        visibility: hidden;
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-top: 0%;
+      margin-right: 0%;
+      margin-left: 100%;
+      margin-bottom: 0%;
+      z-index: 11;
+      overflow: visible;
+      white-space: nowrap;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      font-size: 100pt;
+      color: #ffffff;
+      visibility: hidden;
     }
 
     </style>
diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js
index 37fe5c616..226730a0d 100644
--- a/openlp/core/display/html/display.js
+++ b/openlp/core/display/html/display.js
@@ -38,9 +38,9 @@ var HorizontalAlign = {
  * Vertical alignment enumeration
  */
 var VerticalAlign = {
-  Top: "top",
-  Middle: "middle",
-  Bottom: "bottom"
+  Top: "0",
+  Middle: "1",
+  Bottom: "2"
 };
 
 /**
@@ -71,6 +71,14 @@ var AnimationState = {
   FadeInAnimation: "fadeInAnimation",
   FadeOutAnimation: "fadeOutAnimation"
 };
+/**
+ * Alert location enumeration
+ */
+var AlertLocation = {
+  Top: "0",
+  Middle: "1",
+  Bottom: "2"
+};
 
 /**
  *
@@ -406,7 +414,7 @@ var Display = {
   alert: function (text, location) {
     console.debug(" alert text: " + text + ", location: " + location);
 
-    if(text == ""){
+    if (text == "") {
       return null;
     }
 
@@ -418,32 +426,40 @@ var Display = {
     /* Bring in the transition background */
     Display._transitionState = Display.doEntranceTransition(location);
 
-    alertBackground.addEventListener('transitionend', function(e){
+    alertBackground.addEventListener('transitionend', function (e) {
       e.stopPropagation();
-      if(Display._transitionState == TransitionState.EntranceTransition){
+      if (Display._transitionState == TransitionState.EntranceTransition) {
         alertText.style.visibility = "visible";
         alertText.classList.add("horizontal-scroll-animation");
-      }else if(Display._transitionState == TransitionState.ExitTransition){
+      }
+      else if (Display._transitionState == TransitionState.ExitTransition) {
         Display._transitionState = TransitionState.NoTransition;
         alertBackground.style.visibility = "hidden";
+        alertText.style.visibility = "hidden";
+        alertBackground.style.top = "";
+        alertBackground.style.bottom = "";
+        alertBackground.style.height = "";
+        alertBackground.style.transition = "";
         alertBackground.classList.remove("middle-exit-animation");
       }
     });
 
-    alertBackground.addEventListener('animationend',function(){
+    alertBackground.addEventListener('animationend', function () {
 
-      console.debug("Noticed an animation has ended. The animation state is: ", Display._animationState);
-      if(Display._animationState == AnimationState.FadeInAnimation){
+      if (Display._animationState == AnimationState.FadeInAnimation) {
         alertText.style.visibility = "visible";
         alertText.classList.add("horizontal-scroll-animation");
         alertText.classList.remove("middle-entrance-animation");
         Display._animationState = AnimationState.ScrollingAnimation;
-      }else if(Display._animationState == AnimationState.FadeOutAnimation){
+      }
+      else if (Display._animationState == AnimationState.FadeOutAnimation) {
         alertBackground.style.visibility = "hidden";
         alertBackground.classList.remove("middle-exit-animation");
         Display._animationState = AnimationState.NoAnimation;
-      }else if(alertText.classList.contains("horizontal-scroll-animation")){
+      }
+      else if (alertText.classList.contains("horizontal-scroll-animation")) {
         alertText.classList.remove("horizontal-scroll-animation");
+        alertText.style.visibility = "hidden";
         Display._animationState = AnimationState.NoAnimation;
         Display._transitionState = Display.doExitTransition(location);
       }
@@ -461,27 +477,28 @@ var Display = {
    * Start background entrance transition for display of alert
    * @param {string} location - String showing the location of the alert on screen
    */
-  doEntranceTransition: function (location){
+  doEntranceTransition: function (location) {
     var alertBackground = $("#alert-background")[0];
 
-    switch(location){
-      case "0":
-        alertBackground.style.top = '0';
-        alertBackground.style.transition = "2s linear";
+    switch (location) {
+      case VerticalAlign.Top:
+        alertBackground.style.bottom = '';
+        alertBackground.style.top = '0px';        
         alertBackground.style.height = "25%";
+        alertBackground.style.transition = "2s linear";
         break;
-      case "1":
-        alertBackground.style.top = ((window.innerHeight - alertBackground.clientHeight) / 2)
-            + 'px';
+      case VerticalAlign.Middle:
+        alertBackground.style.top = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px';
         alertBackground.style.height = "25%";
         alertBackground.classList.add("middle-entrance-animation");
         Display._animationState = AnimationState.FadeInAnimation;
         break;
-      case "2":
+      case VerticalAlign.Bottom:
       default:
-        alertBackground.style.bottom = '0';
-        alertBackground.style.transition= "2s linear";
+        alertBackground.style.top = '';
+        alertBackground.style.bottom = '0px';        
         alertBackground.style.height = "25%";
+        alertBackground.style.transition= "2s linear";
         break;
     }
     alertBackground.style.visibility = "visible";
@@ -493,16 +510,17 @@ var Display = {
    * Start background exit transition once alert has been displayed
    * @param {string} location - Integer showing the location of the alert on screen
    */
-  doExitTransition: function(location){
+  doExitTransition: function (location) {
 
     var alertBackground = $("#alert-background")[0];
 
-    if(location == "0" || location == "2"){
+    if (location == VerticalAlign.Top || location == VerticalAlign.Bottom) {
       alertBackground.style.height = "0%";
-      alertBackground.style.transition = '2s linear';
-    }else if(location == "1"){
+      alertBackground.style.transition = '2s linear';      
+    }
+    else if (location == VerticalAlign.Middle) {
       alertBackground.classList.add("middle-exit-animation");
-      alertBackground.style.height = "0%";
+      alertBackground.style.height = "0%";      
       Display._animationState = AnimationState.FadeOutAnimation;
     }
 
diff --git a/tests/js/test_display.js b/tests/js/test_display.js
index e63f5606b..a83eef643 100644
--- a/tests/js/test_display.js
+++ b/tests/js/test_display.js
@@ -153,140 +153,101 @@ describe("The Display object", function () {
 
 });
 
-describe("Display.alert",function(){
-    var alertBackground,alert;
+describe("Display.alert", function () {
+  var alertBackground, alert;
 
-    beforeEach(function(){
-        document.body.innerHTML = "";
-        alertBackground = document.createElement("div");
-        alertBackground.setAttribute("id", "alert-background");
-        document.body.appendChild(alertBackground);
-        alert = document.createElement("p");
-        alert.setAttribute("id","alert");
-        alertBackground.appendChild(alert);
-    });
+  beforeEach(function () {
+    document.body.innerHTML = "";
+    alertBackground = document.createElement("div");
+    alertBackground.setAttribute("id", "alert-background");
+    document.body.appendChild(alertBackground);
+    alert = document.createElement("p");
+    alert.setAttribute("id","alert");
+    alertBackground.appendChild(alert);
+  });
 
-   it("should return null if called without any text", function(){
+  it("should return null if called without any text", function () {
     expect(Display.alert("","2")).toBeNull();
-   });
+  });
 
-   it("should set correct alert text", function(){
+  it("should set correct alert text", function () {
     Display.alert("OPEN-LP-3.0 Alert Test", "2");
     expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test");
-   });
+  });
 
-   it("should set the correct alert position", function(){
+  it("should set the correct alert position", function () {
     expect(Display.alert("Alert Location Test","2")).toEqual("2");
-   });
-
+  });
 });
 
-describe("The doEntranceTransition", function(){
+describe("The doEntranceTransition", function () {
 
-    var alertBackground;
+  var alertBackground;
 
-    beforeEach(function(){
-        document.body.innerHTML = "";
-        alertBackground = document.createElement("div");
-        alertBackground.setAttribute("id", "alert-background");
-        document.body.appendChild(alertBackground);
-        alertBackground.style.top = '0px';
-        alertBackground.style.height = "0%";
-    });
+  beforeEach(function() {
+    document.body.innerHTML = "";
+    alertBackground = document.createElement("div");
+    alertBackground.setAttribute("id", "alert-background");
+    document.body.appendChild(alertBackground);
+    alertBackground.style.top = '0px';
+    alertBackground.style.height = "0%";
+  });
 
-    it("should move the alert background to the top of the page", function(){
-        Display.doEntranceTransition("0");
-        expect(alertBackground.style.top).toEqual('0px');
-    });
+  it("should set the correct styles for the alert when location is top of the page", function () {
+    Display.doEntranceTransition("0");
+    expect(alertBackground.style.bottom).toEqual('');
+    expect(alertBackground.style.top).toEqual('0px');
+    expect(alertBackground.style.transition).toEqual("2s linear");
+    expect(alertBackground.style.height).toEqual("25%");
+    expect(alertBackground.style.visibility).toEqual("visible");
+  });
 
-    it("should move the alert background to the middle of the page", function(){
-        Display.doEntranceTransition("1");
-        var middlePosition = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px';
-        expect(alertBackground.style.top).toEqual(middlePosition);
-    });
+  it("should set the correct styles for the alert when location is middle of the page", function () {
+    Display.doEntranceTransition("1");
+    var middlePosition = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px';
+    expect(alertBackground.style.top).toEqual(middlePosition);
+    expect(alertBackground.classList.contains("middle-entrance-animation"));
+    expect(alertBackground.style.height).toEqual("25%");
+    expect(alertBackground.style.visibility).toEqual("visible");
+  });
 
-    it("should move the alert background to the bottom of the page", function(){
-        Display.doEntranceTransition("2");
-        expect(alertBackground.style.bottom).toEqual('0px');
-    });
-
-    it("should have a transition set when position is set to top", function(){
-        Display.doEntranceTransition("0");
-        expect(alertBackground.style.transition).toEqual("2s linear");
-    });
-
-    it("should have a transition set when position is set to bottom", function(){
-        Display.doEntranceTransition("2");
-        expect(alertBackground.style.transition).toEqual("2s linear");
-    });
-
-    it("should have an animation class when position is set to middle", function(){
-        Display.doEntranceTransition("1");
-        expect(alertBackground.classList.contains("middle-entrance-animation"));
-    });
-
-    it("should have the height set to 25% when the position is top", function(){
-        Display.doEntranceTransition("0");
-        expect(alertBackground.style.height).toEqual("25%");
-    });
-
-    it("should have the height set to 25% when the position is middle", function(){
-        Display.doEntranceTransition("1");
-        expect(alertBackground.style.height).toEqual("25%");
-    });
-
-    it("should have the height set to 25% when the position is bottom", function(){
-        Display.doEntranceTransition("2");
-        expect(alertBackground.style.height).toEqual("25%");
-    });
-
-    it("should make the alert background visible", function(){
-        Display.doEntranceTransition();
-        expect(alertBackground.style.visibility).toEqual("visible");
-    });
+  it("should set the correct styles for the alert when location is bottom of the page", function () {
+    Display.doEntranceTransition("2");
+    expect(alertBackground.style.top).toEqual('');
+    expect(alertBackground.style.bottom).toEqual('0px');    
+    expect(alertBackground.style.transition).toEqual("2s linear");
+    expect(alertBackground.style.height).toEqual("25%");
+    expect(alertBackground.style.visibility).toEqual("visible");
+  });
 });
 
-describe("The doExitTransition", function(){
-    var alertBackground;
+describe("The doExitTransition", function () {
+  var alertBackground;
 
-    beforeEach(function(){
-        document.body.innerHTML = "";
-        alertBackground = document.createElement("div");
-        alertBackground.setAttribute("id", "alert-background");
-        document.body.appendChild(alertBackground);
+  beforeEach(function () {
+    document.body.innerHTML = "";
+    alertBackground = document.createElement("div");
+    alertBackground.setAttribute("id", "alert-background");
+    document.body.appendChild(alertBackground);
+  });
 
-    });
+  it("should remove the styles correctly when the location is the top of the page", function () {
+    Display.doExitTransition("0");
+    expect(alertBackground.style.height).toEqual('0%');
+    expect(alertBackground.style.transition).toEqual("2s linear");
+  });
 
-    it("should make the height of the alert zero when position is top", function(){
-        Display.doExitTransition("0");
-        expect(alertBackground.style.height).toEqual('0%');
-    });
-
-    it("should make the height of the alert zero when position is bottom", function(){
-        Display.doExitTransition("2");
-        expect(alertBackground.style.height).toEqual('0%');
-    });
-
-    it("should make the height of the alert zero when position is middle", function(){
-        Display.doExitTransition("2");
-        expect(alertBackground.style.height).toEqual('0%');
-    });
-
-    it("should have a transition set when position is set to top", function(){
-        Display.doExitTransition("0");
-        expect(alertBackground.style.transition).toEqual("2s linear");
-    });
-
-    it("should have a transition set when position is set to bottom", function(){
-        Display.doExitTransition("2");
-        expect(alertBackground.style.transition).toEqual("2s linear");
-    });
-
-    it("should have an animation class when position is set to middle", function(){
-        Display.doExitTransition("1");
-        expect(alertBackground.classList.contains("middle-exit-animation"));
-    });
+  it("should remove the styles correctly when the location is middle of the page", function () {
+    Display.doExitTransition("1");
+    expect(alertBackground.style.height).toEqual('0%');
+    expect(alertBackground.classList.contains("middle-exit-animation"));
+  });
 
+it("should remove the styles correctly when the location is the bottom of the page", function () {
+  Display.doExitTransition("2");
+  expect(alertBackground.style.height).toEqual('0%');
+  expect(alertBackground.style.transition).toEqual("2s linear");
+});
 
 });