Change alarmcues to accept arbitrary containing element

web/skins/classic/css/classic/views/event.css

@@ -12,15 +12,17 @@
 
 .alarmCue {
     background-color: #222222;
-    height: 1.5em;
+    height: 1.25em;
     text-align: left;
     margin: 0 auto 0 auto;
+    border-radius: 0 0 .3em .3em;
 }
 
 .alarmCue span {
     background-color:red;
-    height: 1.5em;
+    height: 100%;
     display: inline-block;
+    border-radius: 0;
 }
 
 span.noneCue {

web/skins/classic/css/dark/views/event.css

@@ -12,15 +12,17 @@
 
 .alarmCue {
     background-color: #222222;
-    height: 1.5em;
+    height: 1.25em;
     text-align: left;
     margin: 0 auto 0 auto;
+    border-radius: 0 0 .3em .3em;
 }
 
 .alarmCue span {
     background-color:red;
-    height: 1.5em;
+    height: 100%;
     display: inline-block;
+    border-radius: 0;
 }
 
 span.noneCue {

web/skins/classic/css/flat/views/event.css

@@ -12,15 +12,17 @@
 
 .alarmCue {
     background-color: #222222;
-    height: 1.5em;
+    height: 1.25em;
     text-align: left;
     margin: 0 auto 0 auto;
+    border-radius: 0 0 .3em .3em;
 }
 
 .alarmCue span {
     background-color:red;
-    height: 1.5em;
+    height: 100%;
     display: inline-block;
+    border-radius: 0;
 }
 
 span.noneCue {

web/skins/classic/views/event.php

@@ -180,7 +180,7 @@ Warning("Streamsrc: $streamSrc");
   }
 } // end if stream method
 ?>
-        <div id="alarmCue" class="alarmCue" style="width: <?php echo reScale($Event->Width(), $scale);?>px;"></div>
+        <div id="alarmCue" class="alarmCue"></div>
         <div id="progressBar" style="width: <?php echo reScale($Event->Width(), $scale);?>px;">
           <div class="progressBox" id="progressBox" title="" style="width: 0%;"></div>
         </div><!--progressBar-->

web/skins/classic/views/js/event.js

@@ -50,13 +50,13 @@ function initialAlarmCues (eventId) {
 
 function setAlarmCues (data) {
   cueFrames = data.frames;
-  alarmSpans = renderAlarmCues();
+  alarmSpans = renderAlarmCues(vid ? $j("#videoobj") : $j("#evtStream"));//use videojs width or zms width
   $j(".alarmCue").html(alarmSpans);
 }
 
-function renderAlarmCues () {
+function renderAlarmCues (containerEl) {
   if (cueFrames) {
-    var cueRatio = (vid ? $j("#videoobj").width() : $j("#evtStream").width()) / (cueFrames[cueFrames.length - 1].Delta * 100);//use videojs width or zms width
+    var cueRatio = containerEl.width() / (cueFrames[cueFrames.length - 1].Delta * 100);
     var minAlarm = Math.ceil(1/cueRatio);
     var spanTimeStart = 0;
     var spanTimeEnd = 0;
@@ -158,7 +158,7 @@ function changeScale() {
     alarmCue.width(newWidth);
     drawProgressBar();
   }
-  alarmCue.html(renderAlarmCues());//just re-render alarmCues.  skip ajax call
+  alarmCue.html(renderAlarmCues(vid ? $j("#videoobj") : $j("#evtStream")));//just re-render alarmCues.  skip ajax call
   if (scale == "auto") {
     Cookie.write('zmEventScaleAuto', 'auto', {duration: 10*365});
   }else{