diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php
index 1be8c378d..6e52dfadc 100644
--- a/web/skins/classic/views/event.php
+++ b/web/skins/classic/views/event.php
@@ -174,8 +174,8 @@ if ( $Event->DefaultVideo() ) {
 
       <p id="replayAllCountDown"></p>
       <p id="dvrControlsVjs" class="dvrControls">
-        <input type="button" value="&lt;+" id="prevBtnVjs" title="<?php echo translate('Prev') ?>" class="active" onclick="streamPrev( true );"/>
-        <input type="button" value="+&gt;" id="nextBtnVjs" title="<?php echo translate('Next') ?>" class="active" onclick="streamNext( true );"/>
+        <input type="button" value="&lt;+" id="prevBtnVjs" title="<?php echo translate('Prev') ?>" class="inactive" onclick="streamPrev( true );"/>
+        <input type="button" value="+&gt;" id="nextBtnVjs" title="<?php echo translate('Next') ?>" class="inactive" onclick="streamNext( true );"/>
       </p>
 
 <?php
@@ -219,7 +219,7 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
            <div class="progressBox" id="progressBox<?php echo $i ?>" title=""></div>
 <?php } ?>
         </div><!--progressBar-->
-        <div id="alarmCueJpeg" class="alarmCue" style="width: <?php echo reScale($Event->Width(), $scale);?>px;"><?php renderAlarmCues ();?></div>
+        <div id="alarmCueJpeg" class="alarmCue" style="width: <?php echo reScale($Event->Width(), $scale);?>px;"></div>
       </div><!--imageFeed-->
       </div>
 <?php } /*end if !DefaultVideo*/ ?>
@@ -265,11 +265,5 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
 } // end if Event exists
 ?>
   </div><!--page-->
-<!-- Alarm Cues on video.  -->
-<script type="text/javascript">
-  alarmHtml = '<div class="alarmCue">' + alarmHtml + '</div>'
-  $j(".vjs-progress-control").append(alarmHtml);
-  $j(".vjs-control-bar").addClass("vjs-zm");
-</script>
 </body>
 </html>
diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js
index 29ca7aedf..ce62c09f5 100644
--- a/web/skins/classic/views/js/event.js
+++ b/web/skins/classic/views/js/event.js
@@ -31,6 +31,92 @@ function vjsReplay(endTime) {
   });
 }
 
+$j.ajaxSetup ({timeout: AJAX_TIMEOUT }); //sets timeout for all getJSON.
+
+var cueFrames = null; //make cueFrames availaible even if we don't send another ajax query
+
+function initialAlarmCues () {
+  $j.getJSON("api/events/"+eventData.Id+".json", setAlarmCues); //get frames data for alarmCues and inserts into html
+}
+
+function setAlarmCues (data) { 
+  cueFrames = data.event.Frame;
+  alarmSpans = renderAlarmCues();
+  if ( vid ) {
+    $j(".vjs-progress-control").append('<div class="alarmCue">' + alarmSpans +  '</div>');
+    $j(".vjs-control-bar").addClass("vjs-zm");
+  } else {
+    $j("#alarmCueJpeg").html(alarmSpans);
+  }
+}
+
+function renderAlarmCues () {
+  if (cueFrames) {
+    var cueRatio = (vid ? $j("#videoobj").width() : $j("#progressBar").width()) / (cueFrames[cueFrames.length - 1].Delta * 100);//use videojs width or nph-zms width
+    var minAlarm = Math.ceil(1/cueRatio);
+    var spanTimeStart = 0;
+    var spanTimeEnd = 0;
+    var alarmed = 0;
+    var alarmHtml = "";
+    var pixSkewNone = 0;
+    var pixSkewAlarm = 0;
+    var skip = 0;
+    for (let i = 0; i < cueFrames.length; i++) {
+      skip = 0;
+      frame = cueFrames[i];
+      if (frame.Type == "Alarm" && alarmed == 0) { //From nothing to alarm.  End nothing and start alarm.
+        alarmed = 1;
+        if (frame.Delta == 0) continue;  //If event starts with an alarm or too few for a nonespan
+        spanTimeEnd = frame.Delta * 100;
+        spanTime = spanTimeEnd - spanTimeStart;
+        let pix = cueRatio * spanTime;
+        pixSkewNone += pix - Math.round(pix);//average out the rounding errors.
+        pix = Math.round(pix);
+        if ((pixSkewNone > 1 || pixSkewNone < -1) && pix + Math.round(pixSkewNone) > 0) { //add skew if it's a pixel and won't zero out span. 
+          pix += Math.round(pixSkewNone);
+          pixSkewNone = pixSkewNone - Math.round(pixSkewNone);
+        }
+        alarmHtml += '<span class="alarmCue noneCue" style="width: ' + pix + 'px;"></span>';
+        spanTimeStart = spanTimeEnd;
+      } else if (frame.Type !== "Alarm" && alarmed == 1) { //from alarm to nothing.  End alarm and start nothing.
+        futNone = 0;
+        indexPlus = i+1;
+        if (((frame.Delta * 100) - spanTimeStart) < minAlarm && indexPlus < cueFrames.length) continue; //alarm is too short and there is more event
+        while (futNone < minAlarm) { //check ahead to see if there's enough for a nonespan
+          if (indexPlus >= cueFrames.length) break; //check if end of event.
+          futNone = (cueFrames[indexPlus].Delta *100) - (frame.Delta *100);
+          if (cueFrames[indexPlus].Type == "Alarm") {
+            i = --indexPlus;
+            skip = 1;
+            break;
+          }
+          indexPlus++;
+        }
+        if (skip == 1) continue;  //javascript doesn't support continue 2;
+        spanTimeEnd = frame.Delta *100;
+        spanTime = spanTimeEnd - spanTimeStart;
+        alarmed = 0;
+        pix = cueRatio * spanTime;
+        pixSkewAlarm += pix - Math.round(pix);
+        pix = Math.round(pix);
+        if ((pixSkewAlarm > 1 || pixSkewAlarm < -1) && pix + Math.round(pixSkewAlarm) > 0) {
+          pix += Math.round(pixSkewAlarm);
+          pixSkewAlarm = pixSkewAlarm - Math.round(pixSkewAlarm);
+        }
+        alarmHtml += '<span class="alarmCue" style="width: ' + pix + 'px;"></span>';
+        spanTimeStart = spanTimeEnd;
+      } else if (frame.Type == "Alarm" && alarmed == 1 && i + 1 >= cueFrames.length) { //event ends on an alarm
+        spanTimeEnd = frame.Delta * 100;
+        spanTime = spanTimeEnd - spanTimeStart;
+        alarmed = 0;
+        pix = Math.round(cueRatio * spanTime);
+        alarmHtml += '<span class="alarmCue" style="width: ' + pix + 'px;"></span>';
+      }
+    }
+    return alarmHtml;
+  }
+}
+
 function setButtonState( element, butClass ) {
   if ( element ) {
     element.className = butClass;
@@ -46,16 +132,17 @@ function changeScale() {
   var baseHeight = eventData.Height;
   var newWidth = ( baseWidth * scale ) / SCALE_BASE;
   var newHeight = ( baseHeight * scale ) / SCALE_BASE;
-
-	if ( vid ) {
-    // Using video.js
-		vid.width = newWidth;
-		vid.height = newHeight;
-	} else {
+  if ( vid ) {
+  // Using video.js
+    $j("#videoobj").width(newWidth);
+    $j("#videoobj").height(newHeight);
+    $j("div.alarmCue").html(renderAlarmCues());//just re-render alarmCues.  skip ajax call
+    Cookie.write( 'zmEventScale'+eventData.MonitorId, scale, { duration: 10*365 } );
+  } else {
     streamScale( scale );
-		var streamImg = document.getElementById('evtStream');
-		streamImg.style.width = newWidth + "px";
-		streamImg.style.height = newHeight + "px";
+    var streamImg = document.getElementById('evtStream');
+    streamImg.style.width = newWidth + "px";
+    streamImg.style.height = newHeight + "px";
     Cookie.write( 'zmEventScale'+eventData.MonitorId, scale, { duration: 10*365 } );
   }
 }
@@ -841,6 +928,7 @@ function initPage() {
   //FIXME prevent blocking...not sure what is happening or best way to unblock
   if ( $('videoobj') ) {
     vid = videojs("videoobj");
+    initialAlarmCues(); //call ajax+renderAlarmCues after videojs is.  should be only call to initialAlarmCues
   }
   if ( vid ) {
 /*
@@ -863,6 +951,7 @@ function initPage() {
   } else {
     streamCmdTimer = streamQuery.delay( 250 );
     eventQuery.pass( eventData.Id ).delay( 500 );
+    initialAlarmCues(); //call ajax+renderAlarmCues for nph-zms.  should be only call to initialAlarmCues
 
     if ( canStreamNative ) {
       var streamImg = $('imageFeed').getElement('img');
diff --git a/web/skins/classic/views/js/event.js.php b/web/skins/classic/views/js/event.js.php
index 23e6eb827..b8dbd8d94 100644
--- a/web/skins/classic/views/js/event.js.php
+++ b/web/skins/classic/views/js/event.js.php
@@ -47,80 +47,3 @@ var canStreamNative = <?php echo canStreamNative()?'true':'false' ?>;
 //
 var deleteString = "<?php echo translate('Delete') ?>";
 var causeString = "<?php echo translate('AttrCause') ?>";
-
-//
-// AlarmCues
-//
-<?php
-function renderAlarmCues () {
-  global $Event, $scale;
-  $sql = 'SELECT *, unix_timestamp(TimeStamp) AS UnixTimeStamp FROM Frames WHERE EventID = ? ORDER BY FrameId';
-  $frames = dbFetchAll($sql, NULL, array($_REQUEST['eid']));
-  if (count($frames)) {
-    $width = reScale($Event->Width(), $scale);
-    $lastFrame = end($frames);
-    $lastTime = $lastFrame['Delta'] * 100;
-    $ratio = $width / $lastTime;
-    $minAlarm = ceil(1 / $ratio);
-    $spanTimeStart = 0;
-    $spanTimeEnd = 0;
-    $alarmed = 0;
-    $alarmHtml = "";
-    $pixSkewNone = 0;
-    $pixSkewAlarm = 0;
-    $skip = 0;
-    foreach ($frames as $key => $frame) {
-      if ($frame['Type'] == "Alarm" && $alarmed == 0) { //From nothing to alarm.  End nothing and start alarm.
-        if ($skip > $key) continue;
-        $alarmed = 1;
-        if ($frame['Delta'] == 0) continue; //If event starts with alarm
-        $spanTimeEnd = $frame['Delta'] * 100;
-        $spanTime = $spanTimeEnd - $spanTimeStart;
-        $pix = $ratio * $spanTime;
-        $pixSkewNone += $pix - round($pix);
-        $pix = round($pix);
-        if (($pixSkewNone > 1 || $pixSkewNone < -1) && $pix + round($pixSkewNone) > 0) { //add skew if it's a pixel and won't zero span
-          $pix += round($pixSkewNone);
-          $pixSkewNone = $pixSkewNone - round($pixSkewNone);
-        }
-        $alarmHtml .= "<span class=\"alarmCue noneCue\" style=\"width:" . $pix . "px;\"></span>";
-        $spanTimeStart = $spanTimeEnd;
-      } elseif ($frame['Type'] !== "Alarm" && $alarmed == 1) { //from Alarm to nothing.  End alarm and start nothing.
-        if ($skip > $key) continue;
-        $futNone = 0;
-        $keyPlus = $key + 1;
-        while ($futNone < $minAlarm) { //check ahead to see if there's enough for a none.
-          if (!array_key_exists($keyPlus, $frames )) break; //check if end of event
-          $futNone = ($frames[$keyPlus]['Delta'] * 100) - ($frame['Delta'] * 100);
-          if ($frames[$keyPlus]['Type'] == "Alarm") {
-            $skip = $keyPlus;
-            continue 2;
-          }
-          $keyPlus +=1;
-        }
-        if ((($frame['Delta'] * 100) - $spanTimeStart) < $minAlarm && (array_key_exists($keyPlus, $frames))) continue; //alarm short and more event
-        $spanTimeEnd = $frame['Delta'] * 100;
-        $spanTime = $spanTimeEnd - $spanTimeStart;
-        $alarmed = 0;
-        $pix = $ratio * $spanTime;
-        $pixSkewAlarm += $pix - round($pix);
-        $pix = round($pix);
-        if (($pixSkewAlarm > 1 || $pixSkewAlarm < -1) && $pix + round($pixSkewAlarm) > 0) {
-          $pix += round($pixSkewAlarm);
-          $pixSkewAlarm = $pixSkewAlarm - round($pixSkewAlarm);
-        }
-        $alarmHtml .= "<span class=\"alarmCue\" style=\"width:" . $pix . "px;\"></span>";
-        $spanTimeStart = $spanTimeEnd;
-      } elseif ($frame['Type'] == "Alarm" && $alarmed == 1 && !array_key_exists($key+1, $frames)) { // event ends on alarm
-        $spanTimeEnd = $frame['Delta'] * 100;
-        $spanTime = $spanTimeEnd - $spanTimeStart;
-        $alarmed = 0;
-        $pix = round($ratio * $spanTime);
-        $alarmHtml .= "<span class=\"alarmCue\" style=\"width:" . $pix . "px;\"></span>";
-      }
-    }
-    echo $alarmHtml;
-  }
-}
-?>
-var alarmHtml = '<?php renderAlarmCues (); ?>';