<?php
$OL = "10.9.0";
require_once "../../config/settings.inc.php";
define("IEM_APPID", 95);
require_once "../../include/mlib.php";
force_https();
require_once "../../include/myview.php";
require_once "../../include/forms.php";
$t = new MyView();
require_once "../../include/cameras.inc.php";
$id = get_str404("id", "ISUC-006");

$t->title =  "Current + Live Web Camera Shots";
$t->jsextra = <<<EOM
 <script src='/vendor/openlayers/{$OL}/ol.js'></script>
 <script src='/vendor/openlayers/{$OL}/ol-layerswitcher.js'></script>
 <script src="/vendor/moment/2.30.1/moment.min.js"></script>
 <script src='viewer.js?d=1'></script>
EOM;
$t->headextra = <<<EOM
<link rel="stylesheet" href="/vendor/openlayers/{$OL}/ol.css" type="text/css">
<link rel="stylesheet" href="/vendor/openlayers/{$OL}/ol-layerswitcher.css" type="text/css">
<link rel="stylesheet" href="viewer.css" type="text/css">
EOM;

$t->content = <<<EOM
<div class="alert alert-warning text-center mb-3" role="alert">
  <strong>Notice:</strong> The newly created
  <a href="/one/?dashcam=1&rwis=1" class="alert-link">IEM One app</a>
  generally replicates this
  app's functionality and more.  If there are no user complaints, this app
  will be retired in the future.
</div>
<div class="row">
<div class="col-sm-4">
<h3><i class="bi bi-camera"></i> IEM Webcam Viewer</h3>
</div>
<div class='col-sm-4'>
    <strong>Mode:</strong>
<div class="btn-group" id="toggle_event_mode">
    <button type="button" class="btn btn-info locked_active">Realtime</button>
    <button type="button" class="btn btn-outline-secondary unlocked_inactive">Archive</button>
</div>
        </div>
        <div class='col-sm-4'>
<div id="dtdiv" style="display: none;">
<strong>Date &amp; Time:</strong>
<br />
<button data-offset="-60" class="btn btn-outline-secondary timecontrol" type="button">-1h</button>
<button data-offset="-5" class="btn btn-outline-secondary timecontrol" type="button">-5min</button>
<button data-offset="-1" class="btn btn-outline-secondary timecontrol" type="button">-1min</button>
<button data-offset="1" class="btn btn-outline-secondary timecontrol" type="button">+1min</button>
<button data-offset="5" class="btn btn-outline-secondary timecontrol" type="button">+5min</button>
<button data-offset="60" class="btn btn-outline-secondary timecontrol" type="button">+1h</button>
<br />
<div class="mb-3">
    <input type="datetime-local" id="dtpicker" class="form-control" />
</div>
</div>
        </div>
     </div>

<div class="row">
<div class="col-md-6">

<div id="singleimageview">
<img id="webcam_image" name="camera" src="/data/camera/stills/{$id}.jpg" class="img-fluid">
<br /><button role="button" id="liveshot">Request Live Shot</button>
<h3 id="webcam_title"></h3>
</div>

<div id="rwisview" style="display: none;">
<img id="rwismain" class="img-fluid">
<br />
<strong>Click on thumbnail to view</strong><br />
<div class="row" id="rwislist" style="height: 100px;">
</div>
</div><!-- ./rwisview -->
<br />
</div><!-- ./col-md-6 -->
<div class="col-md-6">
<div style="width: 100%; height: 400px;" id="map">
<div id="popup"></div>
</div>
<br />
<h3 id="radar_title">Application is Loading...</h3>

<table>
<tr><th>Key:</th>
<th><img src="/images/rwiscam.svg" style="height: 30px;"> IDOT RWIS</th>
<th><img src="/images/trackaplow.png" style="height: 30px;"> IDOT Track-A-Plow</th>
<th><img src="/images/yellow_arrow.png" style="height: 30px;"> Media Webcams</th>
</tr>
</table>
</div>
</div><!-- ./row -->

<br clear="all" />

<h3>Application Details</h3>

<p>This webpage should dynamically update while in "Realtime" mode, so there
    is no need to refresh the page.  If you click the "Archive" mode option,
    a time selector will appear and all presented data should be approximately
    valid at that time.</p>

<p>Routinely, the IEM is archiving webcam imagery every 5 minutes.  During
    interesting weather, this interval is decreased to every 1 minute.  So
    if you pick a minute (ie 35) divisible by 5, you are most likely to
    get an archived image.</p>

<p>The media webcams have pan-tilt-zoom capabilities along with the option to request
a live image.  The arrows on the map indicate the direction the webcam is pointed in, but
can sometimes be wrong for various painful reasons.</p>

<p>More information on the IEM's webcam work can be found
    <a href="/projects/webcam.php">here</a>.</p>

<div id="popover-content" style="display: none; width: 300px;">
  <!-- Hidden div with the popover content -->
  <p>This is the popover content</p>
</div>

EOM;
$t->render('full.phtml');
