diff --git a/src/zm_storage.cpp b/src/zm_storage.cpp
index 3f80e26aa..ff2ba4997 100644
--- a/src/zm_storage.cpp
+++ b/src/zm_storage.cpp
@@ -62,16 +62,16 @@ Storage::Storage( unsigned int p_id ) {
 
 	if ( p_id ) {
 		char sql[ZM_SQL_SML_BUFSIZ];
-		snprintf( sql, sizeof(sql), "SELECT Id, Name, Path, Type, Scheme from Storage WHERE Id=%d", p_id );
+		snprintf(sql, sizeof(sql), "SELECT Id, Name, Path, Type, Scheme FROM Storage WHERE Id=%d", p_id);
 		Debug(2,"Loading Storage for %d using %s", p_id, sql );
 		zmDbRow dbrow;
-		if ( ! dbrow.fetch( sql ) ) {
-			Error( "Unable to load storage area for id %d: %s", p_id, mysql_error( &dbconn ) );
+		if ( !dbrow.fetch(sql) ) {
+			Error("Unable to load storage area for id %d: %s", p_id, mysql_error(&dbconn));
 		} else {
 			unsigned int index = 0;
-			id = atoi( dbrow[index++] );
-			strncpy( name, dbrow[index++], sizeof(name)-1 );
-			strncpy( path, dbrow[index++], sizeof(path)-1 );
+			id = atoi(dbrow[index++]);
+			strncpy(name, dbrow[index++], sizeof(name)-1);
+			strncpy(path, dbrow[index++], sizeof(path)-1);
       type_str = std::string(dbrow[index++]);
       scheme_str = std::string(dbrow[index++]);
       if ( scheme_str == "Deep" ) {
@@ -81,17 +81,17 @@ Storage::Storage( unsigned int p_id ) {
       } else {
         scheme = SHALLOW;
       }
-			Debug( 1, "Loaded Storage area %d '%s'", id, this->Name() );
+			Debug(1, "Loaded Storage area %d '%s'", id, this->Name());
 		}
 	}
-	if ( ! id ) {
+	if ( !id ) {
     if ( staticConfig.DIR_EVENTS[0] != '/' ) {
       // not using an absolute path. Make it one by appending ZM_PATH_WEB
-      snprintf( path, sizeof (path), "%s/%s", staticConfig.PATH_WEB.c_str( ), staticConfig.DIR_EVENTS.c_str() );
+      snprintf(path, sizeof (path), "%s/%s", staticConfig.PATH_WEB.c_str(), staticConfig.DIR_EVENTS.c_str());
     } else {
-      strncpy(path, staticConfig.DIR_EVENTS.c_str(), sizeof(path)-1 );
+      strncpy(path, staticConfig.DIR_EVENTS.c_str(), sizeof(path)-1);
     }
-		Debug(1,"No id passed to Storage constructor.  Using default path %s instead", path );
+		Debug(1,"No id passed to Storage constructor.  Using default path %s instead", path);
 		strcpy(name, "Default");
     scheme = MEDIUM;
     scheme_str = "Medium";
diff --git a/web/includes/Storage.php b/web/includes/Storage.php
index 95f1dab84..a7372b15a 100644
--- a/web/includes/Storage.php
+++ b/web/includes/Storage.php
@@ -223,5 +223,19 @@ class Storage {
     }
     return $this->{'Server'};
   }
+
+  public function to_json() {
+    $json = array();
+    foreach ($this->defaults as $key => $value) {
+      if ( is_callable(array($this, $key)) ) {
+        $json[$key] = $this->$key();
+      } else if ( array_key_exists($key, $this) ) {
+        $json[$key] = $this->{$key};
+      } else {
+        $json[$key] = $this->defaults{$key};
+      }
+    }
+    return json_encode($json);
+  }
 }
 ?>
diff --git a/web/skins/classic/views/events.php b/web/skins/classic/views/events.php
index b10a20370..fafebfc8d 100644
--- a/web/skins/classic/views/events.php
+++ b/web/skins/classic/views/events.php
@@ -190,8 +190,8 @@ while ( $event_row = dbFetchNext($results) ) {
   $scale = max( reScale( SCALE_BASE, $event->DefaultScale(), ZM_WEB_DEFAULT_SCALE ), SCALE_BASE );
 ?>
             <tr<?php if ($event->Archived()) echo ' class="archived"' ?>>
-              <td class="colId"><a href="?view=event&amp;eid=<?php echo $event->Id().$filterQuery.$sortQuery.'&amp;page=1"> '.$event->Id().($event->Archived()?'*':'') ?></a></td>
-              <td class="colName"><a href="?view=event&amp;eid=<?php echo $event->Id().$filterQuery.$sortQuery.'&amp;page=1"> '.validHtmlStr($event->Name()).($event->Archived()?'*':'') ?></a></td>
+              <td class="colId"><a href="?view=event&amp;eid=<?php echo $event->Id().$filterQuery.$sortQuery.'&amp;page=1">'.$event->Id().($event->Archived()?'*':'') ?></a></td>
+              <td class="colName"><a href="?view=event&amp;eid=<?php echo $event->Id().$filterQuery.$sortQuery.'&amp;page=1">'.validHtmlStr($event->Name()).($event->Archived()?'*':'') ?></a></td>
               <td class="colMonitorName"><?php echo makePopupLink( '?view=monitor&amp;mid='.$event->MonitorId(), 'zmMonitor'.$event->Monitorid(), 'monitor', $event->MonitorName(), canEdit( 'Monitors' ) ) ?></td>
               <td class="colCause"><?php echo makePopupLink( '?view=eventdetail&amp;eid='.$event->Id(), 'zmEventDetail', 'eventdetail', validHtmlStr($event->Cause()), canEdit( 'Events' ), 'title="'.htmlspecialchars($event->Notes()).'"' ) ?>
                     <?php if ($event->Notes() && ($event->Notes() != 'Forced Web: ')) echo "<br/><div class=\"small text-nowrap text-muted\">".$event->Notes()."</div>" ?></td>
@@ -227,12 +227,12 @@ while ( $event_row = dbFetchNext($results) ) {
       $streamSrc = $event->getStreamSrc(array(
         'mode'=>'jpeg', 'scale'=>$scale, 'maxfps'=>ZM_WEB_VIDEO_MAXFPS, 'replay'=>'single'));
 
-      $imgHtml = '<img id="thumbnail'.$event->id().'" src="'.$imgSrc.'" alt="'. validHtmlStr('Event '.$event->Id()) .'" style="width:'. validInt($event->ThumbnailWidth()) .'px;height:'. validInt($event->ThumbnailHeight()).'px;" onmouseover="this.src=\''.$streamSrc.'\';" onmouseout="this.src=\''.$imgSrc.'\';"/>';
+      $imgHtml = '<img id="thumbnail'.$event->id().'" src="'.$imgSrc.'" alt="'. validHtmlStr('Event '.$event->Id()) .'" style="width:'. validInt($event->ThumbnailWidth()) .'px;height:'. validInt($event->ThumbnailHeight()).'px;" stream_src="'.$streamSrc.'" still_src="'.$imgSrc.'"/>';
       echo '<a href="?view=event&amp;eid='. $event->Id().$filterQuery.$sortQuery.'&amp;page=1">'.$imgHtml.'</a>';
       echo '</td>';
   } // end if ZM_WEB_LIST_THUMBS
 ?>
-              <td class="colMark"><input type="checkbox" name="eids[]" value="<?php echo $event->Id() ?>" onclick="configureButton(this, 'eids[]');"/></td>
+              <td class="colMark"><input type="checkbox" name="eids[]" value="<?php echo $event->Id() ?>" data-onclick-this="configureButton"/></td>
             </tr>
 <?php
 }
@@ -274,25 +274,25 @@ if ( $pagination ) {
 }
 ?>
         <div id="contentButtons">
-          <button type="button" name="viewBtn" value="View" onclick="viewEvents(this, 'eids[]');" disabled="disabled">
-          <?php echo translate('View') ?>"
+          <button type="button" name="viewBtn" value="View" data-onclick-this="viewEvents" disabled="disabled">
+          <?php echo translate('View') ?>
           </button>
-          <button type="button" name="archiveBtn" value="Archive" onclick="archiveEvents(this, 'eids[]')" disabled="disabled">
+          <button type="button" name="archiveBtn" value="Archive" data-onclick-this="archiveEvents" disabled="disabled">
           <?php echo translate('Archive') ?>
           </button>
-          <button type="button" name="unarchiveBtn" value="Unarchive" onclick="unarchiveEvents(this, 'eids[]');" disabled="disabled">
+          <button type="button" name="unarchiveBtn" value="Unarchive" data-onclick-this="unarchiveEvents" disabled="disabled">
           <?php echo translate('Unarchive') ?>
           </button>
-          <button type="button" name="editBtn" value="Edit" onclick="editEvents(this, 'eids[]')" disabled="disabled">
+          <button type="button" name="editBtn" value="Edit" data-onclick-this="editEvents" disabled="disabled">
           <?php echo translate('Edit') ?>
           </button>
-          <button type="button" name="exportBtn" value="Export" onclick="exportEvents(this, 'eids[]')" disabled="disabled">
+          <button type="button" name="exportBtn" value="Export" data-onclick-this="exportEvents" disabled="disabled">
           <?php echo translate('Export') ?>
           </button>
-          <button type="button" name="downloadBtn" value="DownloadVideo" onclick="downloadVideo(this, 'eids[]')" disabled="disabled">
+          <button type="button" name="downloadBtn" value="DownloadVideo" data-onclick-this="downloadVideo" disabled="disabled">
           <?php echo translate('DownloadVideo') ?>
           </button>
-          <button type="button" name="deleteBtn" value="Delete" onclick="deleteEvents(this, 'eids[]');" disabled="disabled">
+          <button type="button" name="deleteBtn" value="Delete" data-onclick-this="deleteEvents" disabled="disabled">
           <?php echo translate('Delete') ?>
           </button>
         </div>
@@ -301,6 +301,7 @@ if ( $pagination ) {
   </div>
 <script nonce="<?php echo $cspNonce;?>">
   // These are defined in the .js.php but need to be updated down here.
+// This might be better done by selecting through the dom for the archived class
   archivedEvents = <?php echo !empty($archived)?'true':'false' ?>;
   unarchivedEvents = <?php echo !empty($unarchived)?'true':'false' ?>;
 </script>
diff --git a/web/skins/classic/views/filter.php b/web/skins/classic/views/filter.php
index b7d9bec22..66b7c8118 100644
--- a/web/skins/classic/views/filter.php
+++ b/web/skins/classic/views/filter.php
@@ -165,7 +165,7 @@ xhtmlHeaders(__FILE__, translate('EventFilter') );
         <div id="filterSelector"><label for="<?php echo 'Id' ?>"><?php echo translate('UseFilter') ?></label>
 <?php
 if ( count($filterNames) > 1 ) {
-   echo htmlSelect('Id', $filterNames, $filter->Id(), 'this.form.submit();');
+   echo htmlSelect('Id', $filterNames, $filter->Id(), array('data-on-change-this'=>'selectFilter'));
 } else {
 ?><select disabled="disabled"><option><?php echo translate('NoSavedFilters') ?></option></select>
 <?php
@@ -417,7 +417,7 @@ if ( canEdit('Events') ) {
 <?php 
   if ( $filter->Id() ) {
  ?>
-          <button type="button" value="Delete" onclick="deleteFilter(this, '<?php echo $filter->Name() ?>');"><?php echo translate('Delete') ?></button>
+          <button type="button" value="Delete" data-on-click-this="deleteFilter"><?php echo translate('Delete') ?></button>
 <?php 
   }
 }
diff --git a/web/skins/classic/views/js/events.js b/web/skins/classic/views/js/events.js
index 3e29cfb55..37e4092f9 100644
--- a/web/skins/classic/views/js/events.js
+++ b/web/skins/classic/views/js/events.js
@@ -17,12 +17,13 @@ function setButtonStates( element ) {
   form.deleteBtn.disabled = !(canEditEvents && checked);
 }
 
-function configureButton( element, name ) {
+function configureButton(event) {
+  var element = event.target;
   var form = element.form;
   var checked = element.checked;
   if ( !checked ) {
-    for (var i = 0; i < form.elements.length; i++) {
-      if ( form.elements[i].name.indexOf(name) == 0) {
+    for (var i = 0, len=form.elements.length; i < len; i++) {
+      if ( form.elements[i].name.indexOf('eids') == 0) {
         if ( form.elements[i].checked ) {
           checked = true;
           break;
@@ -42,15 +43,17 @@ function configureButton( element, name ) {
   form.deleteBtn.disabled = !(canEditEvents && checked);
 }
 
-function deleteEvents( element, name ) {
+function deleteEvents( element ) {
   if ( ! canEditEvents ) {
     alert("You do not have permission to delete events.");
     return;
   }
   var form = element.form;
+
   var count = 0;
-  for (var i = 0, len=form.elements.length; i < len; i++) {
-    if ( form.elements[i].name.indexOf(name) == 0 ) {
+  // This is slightly more efficient than a jquery selector because we stop after finding one.
+  for (var i = 0; i < form.elements.length; i++) {
+    if (form.elements[i].name.indexOf('eids') == 0) {
       if ( form.elements[i].checked ) {
         count++;
         break;
@@ -65,7 +68,7 @@ function deleteEvents( element, name ) {
   }
 }
 
-function editEvents( element, name ) {
+function editEvents( element ) {
   if ( ! canEditEvents ) {
     alert("You do not have permission to delete events.");
     return;
@@ -73,7 +76,7 @@ function editEvents( element, name ) {
   var form = element.form;
   var eids = new Array();
   for (var i = 0, len=form.elements.length; i < len; i++) {
-    if ( form.elements[i].name.indexOf(name) == 0 ) {
+    if (form.elements[i].name.indexOf('eids') == 0) {
       if ( form.elements[i].checked ) {
         eids[eids.length] = 'eids[]='+form.elements[i].value;
       }
@@ -82,25 +85,25 @@ function editEvents( element, name ) {
   createPopup('?view=eventdetail&'+eids.join('&'), 'zmEventDetail', 'eventdetail');
 }
 
-function downloadVideo( element, name ) {
+function downloadVideo( element ) {
   var form = element.form;
   var eids = new Array();
-  for (var i = 0; i < form.elements.length; i++) {
-    if (form.elements[i].name.indexOf(name) == 0) {
+  for (var i = 0, len=form.elements.length; i < len; i++) {
+    if (form.elements[i].name.indexOf('eids') == 0 ) {
       if ( form.elements[i].checked ) {
         eids[eids.length] = 'eids[]='+form.elements[i].value;
       }
     }
   }
-  createPopup( '?view=download&'+eids.join( '&' ), 'zmDownload', 'download' );
+  createPopup( '?view=download&'+eids.join('&'), 'zmDownload', 'download' );
 }
 
-function exportEvents(element, name) {
-  var form = $j(element.form);
+function exportEvents( element ) {
+  var form = element.form;
   if ( 0 ) {
   var eids = new Array();
-  for (var i = 0; i < form.elements.length; i++) {
-    if (form.elements[i].name.indexOf(name) == 0) {
+  for (var i = 0, len=form.elements.length; i < len; i++) {
+    if (form.elements[i].name.indexOf('eids') == 0 ) {
       if ( form.elements[i].checked ) {
         eids[eids.length] = 'eids[]='+form.elements[i].value;
       }
@@ -113,11 +116,11 @@ function exportEvents(element, name) {
   form.submit();
 }
 
-function viewEvents( element, name ) {
+function viewEvents( element ) {
   var form = element.form;
   var events = new Array();
-  for (var i = 0; i < form.elements.length; i++) {
-    if ( form.elements[i].name.indexOf(name) == 0) {
+  for (var i = 0, len=form.elements.length; i < len; i++) {
+    if ( form.elements[i].name.indexOf('eids') == 0 ) {
       if ( form.elements[i].checked ) {
         events[events.length] = form.elements[i].value;
       }
@@ -129,13 +132,13 @@ function viewEvents( element, name ) {
   }
 }
 
-function archiveEvents( element, name ) {
+function archiveEvents(element) {
   var form = element.form;
   form.elements['action'].value = 'archive';
   form.submit();
 }
 
-function unarchiveEvents(element, name) {
+function unarchiveEvents(element) {
   if ( ! canEditEvents ) {
     alert("You do not have permission to delete events.");
     return;
@@ -151,10 +154,26 @@ if ( openFilterWindow ) {
   location.replace( '?view='+currentView+'&page='+thisPage+filterQuery );
 }
 
+function thumbnail_onmouseover(event) {
+  var img = event.target;
+  img.src = img.getAttribute('stream_src');
+}
+function thumbnail_onmouseout(event) {
+  var img = event.target;
+  img.src = img.getAttribute('still_src');
+}
+
 function initPage() {
-  if (window.history.length == 1) {
+  if ( window.history.length == 1 ) {
     $j('#controls').children().eq(0).html('');
   }
+  $j('.colThumbnail img').each(function(){
+    this.addEventListener('mouseover',thumbnail_onmouseover,false);
+    this.addEventListener('mouseout',thumbnail_onmouseout,false);
+  });
+  $j('input[name=eids\\[\\]]').each(function(){
+    this.addEventListener('click',configureButton,false);
+  });
 }
 
 $j(document).ready(initPage);
diff --git a/web/skins/classic/views/js/filter.js b/web/skins/classic/views/js/filter.js
index 867386a22..efc677b04 100644
--- a/web/skins/classic/views/js/filter.js
+++ b/web/skins/classic/views/js/filter.js
@@ -1,3 +1,7 @@
+function selectFilter(element) {
+  element.form.submit();
+}
+
 function validateForm( form ) {
   var rows = $j(form).find('tbody').eq(0).find('tr');
   var obrCount = 0;
@@ -21,7 +25,6 @@ function validateForm( form ) {
     alert("There appear to be non-numeric characters in your limit. Limit must be a positive integer value or empty.");
     return false;
   }
-  console.log("Success validating");
   return true;
 }
 
@@ -104,9 +107,9 @@ function saveFilter( element ) {
   // Submit is done by the button type="submit"
 }
 
-function deleteFilter( element, name ) {
-  if ( confirm( deleteSavedFilterString+" '"+name+"'?" ) ) {
-    var form = element.form;
+function deleteFilter( element ) {
+  var form = element.form;
+  if ( confirm( deleteSavedFilterString+" '"+form.elements['filter[Name]'].value+"'?" ) ) {
     form.elements['action'].value = 'delete';
     form.submit();
   }
diff --git a/web/skins/classic/views/js/montagereview.js b/web/skins/classic/views/js/montagereview.js
index ccdea0a07..b50d59996 100644
--- a/web/skins/classic/views/js/montagereview.js
+++ b/web/skins/classic/views/js/montagereview.js
@@ -122,6 +122,11 @@ function getImageSource( monId, time ) {
     Event = events[Frame.EventId];
 
     var storage = Storage[Event.StorageId];
+    if ( ! storage ) {
+      // Storage[0] is guaranteed to exist as we make sure it is there in montagereview.js.php
+      console.log("No storage area for id " + Event.StorageId);
+      storage = Storage[0];
+    }
     // monitorServerId may be 0, which gives us the default Server entry
     var server = storage.ServerId ? Servers[storage.ServerId] : Servers[monitorServerId[monId]];
     return server.PathToIndex +
@@ -500,7 +505,8 @@ HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;
 
 var mouseisdown=false;
 function mdown(event) {
-  mouseisdown=true; mmove(event);
+  mouseisdown=true;
+  mmove(event);
 }
 function mup(event) {
   mouseisdown=false;
@@ -509,7 +515,8 @@ function mout(event) {
   mouseisdown=false;
 } // if we go outside treat it as release
 function tmove(event) {
-  mouseisdown=true; mmove(event);
+  mouseisdown=true;
+  mmove(event);
 }
 
 function mmove(event) {
@@ -835,13 +842,15 @@ function zoom(monId, scale) {
   }
 }
 
-function clickMonitor(event, monId) {
-  var monitor_element = $("Monitor"+monId.toString());
-  var pos_x = event.offsetX ? (event.offsetX) : event.pageX - monitor_element.offsetLeft;
-  var pos_y = event.offsetY ? (event.offsetY) : event.pageY - monitor_element.offsetTop;
-  if ( pos_x < monitor_element.width/4 && pos_y < monitor_element.height/4 ) {
+function clickMonitor(event) {
+  var element = event.target;
+  //var monitor_element = $("Monitor"+monId.toString());
+  var monId = element.getAttribute('monitor_id');
+  var pos_x = event.offsetX ? (event.offsetX) : event.pageX - element.offsetLeft;
+  var pos_y = event.offsetY ? (event.offsetY) : event.pageY - element.offsetTop;
+  if ( pos_x < element.width/4 && pos_y < element.height/4 ) {
     zoom(monId, 1.15);
-  } else if ( pos_x > monitor_element.width * 3/4 && pos_y < monitor_element.height/4 ) {
+  } else if ( pos_x > element.width * 3/4 && pos_y < element.height/4 ) {
     zoom(monId, 1/1.15);
   } else {
     showOneMonitor(monId);
@@ -910,9 +919,25 @@ function initPage() {
   }
   if ( !liveMode ) {
     canvas = $("timeline");
+
+    canvas.addEventListener('mousemove', mmove, false);
+    canvas.addEventListener('touchmove', tmove, false);
+    canvas.addEventListener('mousedown', mdown, false);
+    canvas.addEventListener('mouseup', mup, false);
+    canvas.addEventListener('mouseout', mout, false);
+
     ctx = canvas.getContext('2d');
     drawGraph();
   }
+  for ( i=0, len=monitorPtr.length; i < len; i += 1 ) {
+    var monitor_id = monitorPtr[i];
+    monitor_canvas = $('Monitor'+monitor_id);
+    if ( ! monitor_canvas ) {
+      console.log("No canvas found for monitor " + monitor_id);
+      continue;
+    }
+    monitor_canvas.addEventListener('click',clickMonitor,false);
+  }
   setSpeed(speedIndex);
   //setFit(fitMode);  // will redraw
   //setLive(liveMode);  // will redraw
diff --git a/web/skins/classic/views/js/montagereview.js.php b/web/skins/classic/views/js/montagereview.js.php
index a31bbfa9e..c887bb0e3 100644
--- a/web/skins/classic/views/js/montagereview.js.php
+++ b/web/skins/classic/views/js/montagereview.js.php
@@ -119,13 +119,21 @@ echo " };\n";
 } // end if initialmodeislive
 
 echo "\nvar Storage = [];\n";
+$have_storage_zero = 0;
 foreach ( Storage::find() as $Storage ) {
-  echo 'Storage[' . $Storage->Id() . '] = ' . json_encode($Storage). ";\n";
+  echo 'Storage[' . $Storage->Id() . '] = ' . $Storage->to_json(). ";\n";
+  if ( $Storage->Id() == 0 )
+    $have_storage_zero = true;
 }
+if ( !$have_storage_zero ) {
+  $Storage = new Storage();
+  echo 'Storage[0] = ' . $Storage->to_json(). ";\n";
+}
+
 echo "\nvar Servers = [];\n";
 // Fall back to get Server paths, etc when no using multi-server mode
 $Server = new Server();
-echo 'Servers[0] = new Server(' . json_encode($Server). ");\n";
+echo 'Servers[0] = new Server(' . $Server->to_json(). ");\n";
 foreach ( Server::find() as $Server ) {
   echo 'Servers[' . $Server->Id() . '] = new Server(' . $Server->to_json(). ");\n";
 }
diff --git a/web/skins/classic/views/montagereview.php b/web/skins/classic/views/montagereview.php
index 039938824..a822febbe 100644
--- a/web/skins/classic/views/montagereview.php
+++ b/web/skins/classic/views/montagereview.php
@@ -290,7 +290,7 @@ if ( (!$liveMode) and (count($displayMonitors) != 0) ) {
       </div>
 <?php } // end if !live ?>
       <div id="timelinediv">
-        <canvas id="timeline" onmousemove="mmove(event);" ontouchmove="tmove(event);" onmousedown="mdown(event);" onmouseup="mup(event);" onmouseout="mout(event);"></canvas>
+        <canvas id="timeline"></canvas>
         <span id="scrubleft"></span>
         <span id="scrubright"></span>
         <span id="scruboutput"></span>
@@ -304,8 +304,8 @@ if ( (!$liveMode) and (count($displayMonitors) != 0) ) {
   <div id="monitors">
 <?php
   // Monitor images - these had to be loaded after the monitors used were determined (after loading events)
-  foreach ($monitors as $m) {
-    echo '<canvas title="'.$m->Id().' ' .$m->Name().'" width="' . $m->Width() * $defaultScale . '" height="'  . $m->Height() * $defaultScale . '" id="Monitor' . $m->Id() . '" style="border:1px solid ' . $m->WebColour() . '" onclick="clickMonitor(event,' . $m->Id() . ')">No Canvas Support!!</canvas>';
+  foreach ( $monitors as $m ) {
+    echo '<canvas title="'.$m->Id().' ' .$m->Name().'" width="' . $m->Width() * $defaultScale . '" height="'  . $m->Height() * $defaultScale . '" id="Monitor' . $m->Id() . '" style="border:1px solid ' . $m->WebColour() . '" monitor_id="'.$m->Id().'">No Canvas Support!!</canvas>';
   }
 ?>
   </div>