<?php

/////////////////////////////////////////////////////////////////////////
//////////////   QUERY STRING VARIABLES   ///////////////////////////////
/////////////////////////////////////////////////////////////////////////

ini_set('display_errors','0');

$per_page = $_GET['pp'];

// Which page is being displayed?
$page_number = $_GET['pn'];

// Has the latest image been requestedautom
$latest_image = $_GET['latest_image'];

// Get daily and project variables
$last2hours = $_GET['last2hours'];
$today = $_GET['today'];
$yesterday = $_GET['yesterday'];
$project = $_GET['project'];

//Get custom time period variables if they exist
$start_year = $_GET['s1y'];
$start_month = $_GET['s1m'];
$start_time = $_GET['s1t'];

$stop_year = $_GET['s2y'];    
$stop_month = $_GET['s2m'];    
$stop_time = $_GET['s2t'];

// Are we saving a timelapse sequence?
$save_timelapse = $_GET['save_timelapse'];

// Get users IP address
$ip_address = $_SERVER['REMOTE_ADDR'];
$currentRemoteIP = file_get_contents("/home/subdomains/livetimelapse/public_html/remote_ip.txt");

$remote_ip = file_get_contents("/home/subdomains/livetimelapse/public_html/remote_ip.txt");

// Defaults if not set above
if (!$per_page) { $per_page = '20'; }
if (!$page_number) { $page_number = '1'; }

require('index.functions.php');

$start_day = check_month_days($start_month, $_GET['s1d']);
$stop_day = check_month_days($stop_month, $_GET['s2d']);


/////////////////////////////////////////////////////////////////////////
////////////// PROJECT SPECIFIC VARIABLES ///////////////////////////////
/////////////////////////////////////////////////////////////////////////
 
$cam = 'tlc_urbanutilities_lowood1';

$basedir_www = "https://www.livetimelapse.com.au/clients/urban-utilities/lowood/wx/index.html";
$basedir_archive = '/home/subdomains/livetimelapse/public_html/www/archive_timelapse';
$basedir_archive_www = 'http://timelapsearchives.bsch.com.au';

$project_start_date = "20230101";
$project_start_hour = "6";
$project_start_min = "00";
$project_start_ampm = "am";
$project_start_time_unix = strtotime("$project_start_date, {$project_start_hour}:{$project_start_min}$project_start_ampm");

$project_stop_date = "20271231";
$project_stop_hour = "6";
$project_stop_min = "00";
$project_stop_ampm = "pm";
$project_stop_time_unix = strtotime("$project_stop_date, {$project_stop_hour}:{$project_stop_min}$project_stop_ampm");

$project_limit_start_hour = "11";
$project_limit_start_min = "00";
$project_limit_start_ampm = "am";

$project_limit_stop_hour = "12";
$project_limit_stop_min = "00";
$project_limit_stop_ampm = "pm";

$max_project_images = '600';
  
$html_title = "Urban Utilities - Lowood (Camera 1)";
$html_client = "Urban Utilities";
$html_location = "Lowood QLD Australia";

$camera_quicklink_list[0]['link'] = "https://www.livetimelapse.com.au/clients/urban-utilities/lowood/camera-1.html{$global_admin_first}";
$camera_quicklink_list[0]['title'] = 'Camera 1';
$camera_quicklink_list[1]['link'] = "https://www.livetimelapse.com.au/clients/urban-utilities/lowood/camera-2.html{$global_admin_first}";
$camera_quicklink_list[1]['title'] = 'Camera 2';


// Calculate the project length in days
$current_date_midnight = date("Ymd", time()+86400);
$project_duration_unix = strtotime("$current_date_midnight, 12:00am") - strtotime("$project_start_date, 12:00am");
$project_duration_days = $project_duration_unix / 86400;
$project_images_per_day = round($max_project_images/$project_duration_days,1)-1;
if ($project_images_per_day < 1) { $project_images_per_day = 1; }

// Calculate how many hours are in the project day
$current_date = date("Ymd");
$daily_project_hours = ((strtotime("$current_date, {$project_stop_hour}:{$project_stop_min}$project_stop_ampm") - strtotime("$current_date, {$project_start_hour}:{$project_start_min}$project_start_ampm")) / 3600);

// Calculate the minutes between images
$mins1 = round($project_images_per_day / $daily_project_hours,2);
$minutes_between_project_images = round($mins1*60);

// Calculate the number of images to display from each day for the project long loop


/////////////////////////////////////////////////////////////////////////
//////////////   BEGIN MAIN SCRIPT        ///////////////////////////////
/////////////////////////////////////////////////////////////////////////

if ($last2hours == 'on' || $today == 'on' || $yesterday == 'on' || $project == 'on')
  {    
    
  ///////////////////////////////
  // PRE-DEFINED TIME PERIODS ///
  ///////////////////////////////
  
  if ($last2hours == 'on')
    {   
    $loop_speed = '120';
    $start_time_unix = time()-7200;
    $stop_time_unix = time();

    // If no start and stop details exist in the query string, use a default as below   
    $current_time = time();
    $current_date = date("Ymd");
    $yesterdays_date = date("Ymd",time()-86400);
    $relative_project_start = strtotime("$current_date, {$project_start_hour}:{$project_start_min}$project_start_ampm");
    $relative_project_stop = strtotime("$current_date, {$project_stop_hour}:{$project_stop_min}$project_stop_ampm");
    
    // If outside of the cameras operating hours, display the last hour of images
    if (($current_time > $relative_project_stop || $current_time < $relative_project_start))
      {
      if ($current_time > $relative_project_stop)
        {
        $relative_project_start = strtotime("$current_date, {$project_start_hour}:{$project_start_min}$project_start_ampm");
        $relative_project_stop = strtotime("$current_date, {$project_stop_hour}:{$project_stop_min}$project_stop_ampm");  
        $start_time_unix = $relative_project_stop - 7200;
        $stop_time_unix = $relative_project_stop;
        }
      else
        {
        $relative_project_start = strtotime("$yesterdays_date, {$project_start_hour}:{$project_start_min}$project_start_ampm");
        $relative_project_stop = strtotime("$yesterdays_date, {$project_stop_hour}:{$project_stop_min}$project_stop_ampm");  
        $start_time_unix =  $relative_project_stop - 3600;
        $stop_time_unix =  $relative_project_stop;
        }      
      }
      
    // If the start time is before the actual start time of the project for the current day
    if ($start_time_unix < $relative_project_start) { $start_time_unix = $relative_project_start; }
    }  
  elseif ($today == 'on')
    {
    $loop_speed = '120';
    $today_date = date("Ymd");      
    $start_time_unix = strtotime("$today_date, {$project_start_hour}:{$project_start_min}$project_start_ampm");
    $stop_time_unix = strtotime("$today_date, {$project_stop_hour}:{$project_stop_min}$project_stop_ampm");
    }
  elseif ($yesterday == 'on')
    {
    $loop_speed = '120';
    $yesterday_date = date("Ymd", time()-86400);      
    $start_time_unix = strtotime("$yesterday_date, {$project_start_hour}:{$project_start_min}$project_start_ampm");
    $stop_time_unix = strtotime("$yesterday_date, {$project_stop_hour}:{$project_stop_min}$project_stop_ampm");
    }
  elseif ($project == 'on')
    {
    $loop_speed = '120';
    $today_date = date("Ymd");      
    $start_time_unix = strtotime("$project_start_date, {$project_start_hour}:{$project_start_min}$project_start_ampm");
    $stop_time_unix = strtotime("$today_date, {$project_stop_hour}:{$project_stop_min}$project_stop_ampm");
    }
    
  $animation = 'yes';
  
  // We still need these variables to have the time options selected
  $start_time_unix = round_time($start_time_unix, 'down', '10');
  $start_year = date("Y", $start_time_unix);
  $start_month = strtolower(date("M", $start_time_unix));
  $start_day = date("d", $start_time_unix);
  $start_time = date("Hi", $start_time_unix);
  
  $stop_time_unix = round_time($stop_time_unix, 'up', '10');
  $stop_year = date("Y", $stop_time_unix);
  $stop_month = strtolower(date("M", $stop_time_unix));
  $stop_day = date("d", $stop_time_unix);
  $stop_time = date("Hi", $stop_time_unix);
  }
elseif ($_GET['s1y'] && $_GET['s2y'])
  {  

  ///////////////////////////////
  // CUSTOM TIME PERIOD       ///
  ///////////////////////////////
  
  // Assorted Variables
  $loop_speed = '120';
    $animation = 'yes';
    
  //If the start and stop details exist from the query string, use them
  if ($start_year && $stop_year)
    {
    $start_time_unix = strtotime("$start_month $start_day,$start_year, $start_time");    
    $stop_time_unix = strtotime("$stop_month $stop_day, $stop_year, $stop_time");
    }
  else
    {
    // If no start and stop details exist in the query string, use a default as below   
    $current_time = time(); 
    $current_date = date("Ymd");
    $relative_project_start = strtotime("$current_date, {$project_start_hour}:{$project_start_min}$project_start_ampm");
    $relative_project_stop = strtotime("$current_date, {$project_stop_hour}:{$project_stop_min}$project_stop_ampm");  
  
    // If outside of the cameras operating hours, display the last hour of images
    if (($current_time > $relative_project_stop || $current_time < $relative_project_start))
      {
      if ($current_time > $relative_project_stop)
        {
        $start_time_unix = $relative_project_stop - 3600;
        $stop_time_unix = $relative_project_stop;
        }
      else
        {
        $start_time_unix =  $relative_project_stop - 90000;
        $stop_time_unix =  $relative_project_stop - 86400;
        }      
      }
    // Otherwise, default to the previous hours worth of images
    else
      {
      $start_time_unix = time()-3600;
      $stop_time_unix = time();
      }  
    }    
  
  // We still need these variables to have the time options selected
  $start_time_unix = round_time($start_time_unix, 'down', '10');
  $start_year = date("Y", $start_time_unix);
  $start_month = strtolower(date("M", $start_time_unix));
  $start_day = date("d", $start_time_unix);
  $start_time = date("Hi", $start_time_unix);
  
  $stop_time_unix = round_time($stop_time_unix, 'up', '10');
  $stop_year = date("Y", $stop_time_unix);
  $stop_month = strtolower(date("M", $stop_time_unix));
  $stop_day = date("d", $stop_time_unix);
  $stop_time = date("Hi", $stop_time_unix);
  
  }
else
  {
  // This is to show a default time selection for the custom time period
  $start_time_unix = round_time($start_time_unix, 'down', '10');
  $start_time_unix = time()-3600;
  $start_year = date("Y", $start_time_unix);
  $start_month = strtolower(date("M", $start_time_unix));
  $start_day = date("d", $start_time_unix);
  $start_time = date("Hi", $start_time_unix);
  
  $stop_time_unix = round_time($stop_time_unix, 'up', '10');
  $stop_time_unix = time();
  $stop_year = date("Y", $stop_time_unix);
  $stop_month = strtolower(date("M", $stop_time_unix));
  $stop_day = date("d", $stop_time_unix);
  $stop_time = date("Hi", $stop_time_unix);  
  
  }

// Creat the archived image list
if ($start_time_unix > $stop_time_unix)
  {
  $error = 'yes';
  }
elseif ($project == 'on')
  {
  $image_list = get_project_images($cam);
  }
else
  {
  $image_list = get_images($cam, $date, $start_time_unix, $stop_time_unix);
  }
  
$total_images = sizeof($image_list);
$animation_start_screen = date("g:ia, F j", $start_time_unix);
$animation_stop_screen = date("g:ia, F j", $stop_time_unix);


?>
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Weather Station Data : Real-Time</title>

    <link rel="stylesheet" type="text/css" href="style/mesowx.css"/>

    <script type="302751d01f6bd44df7314fa6-text/javascript" src="js/lib/jquery-2.0.3.min.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="js/lib/d3.v3.min.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="js/lib/highstock.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="meso/js/meso.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="js/mesowx.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="meso/js/ChangeIndicatedValue.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="js/WindCompass.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="meso/js/AggregateDataProvider.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="meso/js/AbstractRealTimeRawDataProvider.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="meso/js/PollingRealTimeRawDataProvider.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="meso/js/StatsDataProvider.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="meso/js/AbstractHighstockChart.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="meso/js/MesoConsole.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="js/MesoWxConsole.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="js/MesoWxWindCompass.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="js/RawChart.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="js/ArchiveChart.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="js/RealTimeChart.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="js/Config.js"></script>
    <script type="302751d01f6bd44df7314fa6-text/javascript" src="js/MesoWxApp.js"></script>
    
    <script type="302751d01f6bd44df7314fa6-text/javascript">
        $(function() {
            new mesowx.MesoWxApp(mesowx.Config).start();
        });
    </script>

    <style>        
        
      html, body {
        font-family:"Helvetica", "Arial", sans-serif;
        font-size: 11pt;
        margin: 7px 0px 50px 0px;
        background-color:white;
        color: black;
      }
      
      * {
        box-sizing: border-box; 
      }
      
        
      #wrapper {
        text-align: center;
      }
      
      #displayTable {
        width: 1180px;
        margin: 0px auto;
        background-color: rgb(217,224,240);
        box-shadow: 0px 0px 20px -1px black;
        border-radius: 10px;
      }
      
      #header {
        background-color: rgb(247, 247, 247);
        width: 1180px;
        padding: 10px;
        border-radius: 10px 10px 0px 0px;
      }
      
      #logo {
        float: left;
        width: 404px;
        height: 69px;
      }
      
      #headerText {
        float: right;
        text-align: right;
      }
            
      #navBar {
        background-color: rgb(6,66,115);
        color: white;
        padding: 5px;
      }
      
      #currentLocation {
        float: left;      
        padding: 3px 8px 3px 8px;
      }
      
      #cameraLinks {          
        float: right;
      }      
      
      #progress_bar_container
        {
        width:100%;
        padding-left:0px;
        padding-right:0px;
        padding-top:0px;
        }
        
      #progress_wrapper
        {
        position:relative;
        width:100%;
        height:30px;
        padding-top:0px;
        padding-bottom:0px;
        align:center;
        border:solid 1px #595858;
        }
        
      #exifData
        {
        position: absolute;
        bottom: 15px;
        left: 0px;
        padding: 8px;
        font-size: 120%;
        color: yellow;
        text-shadow: 1px 1px black;
        }
        
      #cameraInfo
        {
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 8px;
        font-size: 100%;
        color: yellow;
        text-shadow: 1px 1px black;
        text-align: left;
        }
      
      #controls {
        float: left;
        width: 200px;
        
      }
      
      #imageDIV {
        float: right;
        width: 980px;        
      }
        
        
      #cameraImage {
        width: 980px;
      }
      
      #weatherDIV {
        width: 1180px;
      }
      
      .bold {
        font-weight: bold;
      }
      
      .large {
        font-size: 150%;
      }
      
      .cameraLink {
        display: inline-block;
        font-weight: bold;
        text-decoration: none;
        color: black;
        background-color: rgb(111, 132, 180);
        padding: 3px 8px 3px 8px;   
        border-radius: 3px;
        text-shadow: 1px 1px 1px 1px rgb(90, 90, 90);
      
        transition: background .25s ease-in-out;
        -moz-transition: background .25s ease-in-out;
        -webkit-transition: background .25s ease-in-out;
      
      }
      
      .cameraLink:hover {
        color: red;
        background-color: white;
        text-shadow: 0px;
      }
      
      .cameraLinkCurrentPage {
        color: red;
        background-color: white;
        text-shadow: 0px;       
      }      
      

      .gradient
        {
        /* fallback (Opera) */
        background: #c3cde8;
        /* Mozilla: */
        background: -moz-linear-gradient(left, #c3cde8, #FFFFFF);
        /* Chrome, Safari:*/
        background: -webkit-gradient(linear, left top, right top, from(#c3cde8), to(#FFFFFF));
        /* MSIE */
        filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#c3cde8', EndColorStr='#FFFFFF', GradientType=1);
        }

      
      .headingLarge
        {
        color: #002352;
        font-weight:bold;
        padding: 10px 3px 10px 3px;
        font-size: 118%;
        letter-spacing:1px;
        
        }

      .headingSmall
        {
        color: #002352;
        font-weight:bold;
        letter-spacing:1px;
        }
              
      .textInstructions {
        padding: 7px;
        text-align: justify;
      }

      .text
        {
        color: #012c5a;
        }
       
      .time
        {
        width:70px;
        }
       
      .link
        {
        color: #002352;
        font-weight:bold;
        padding-top:10px;
        padding-bottom:10px;
        }
      
      .camera_menu
        {
        width:220px;
        }
       
      A:LINK, A:VISITED, A:ACTIVE
        {
        text-decoration: none;
        letter-spacing:1px;
        color: #002352;
        }
        
      A:HOVER
        {
        text-decoration: none;
        color: red;
        }
        
      .buttona
        {    
        font: Verdana, Geneva, Arial, Helvetica, sans-serif;    
        background-color: #D7E5F2;    
        color: #102132;
        padding:10px;
        padding-top:5px;
        padding-bottom:5px;
        
        } 
        
      .button {
       background-color: #b9caf7;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       -moz-box-shadow: 2px 2px 1px #999;
       -webkit-box-shadow: 2px 2px 1px #999;
       border: solid 1px #CCC;
      font-size:14px;
       color: #000000;
       text-shadow: 1px 1px 5px #000000;
       padding: 3px 8px 3px 8px;
       }
       
       .button:hover {
       background-color: #05b3ff;
       text-shadow: none;
       cursor: pointer; 
       }
      
        
      .progress_bar
        {
        z-index:0;
        position:absolute;
        top:0px;
        left:0px;
        width:1px;
        height:28px;
        padding:0px;
        border-right:solid 1px #595858;
        background-color:#064273;
        color: white;
        text-align:left;  
        }
      
      .progress_text
        {
        z-index:1;
        position:absolute;
        top:5px;
        left:0px;
        height: 100%;
        width: 100%;
        padding:0px;
        padding-top:0px;
        text-align:middle;
        color: #a2a0a0;
        }  
      
      .infoHeader
        {
        display: inline-block;
        color: red;
        padding: 2px 5px 2px 5px;
        }  
        
      .infoText
        {
        display: inline-block;
        color: green;
        }  
      
      
      .controlsLink {
        
        padding: 10px;
        border-top: 1px solid gray;
        
      }
     
     
      .acameraImage img {
        width: 360px;
        box-shadow: 2px 2px 2px black;
        
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
      }
          
      .acameraImage img:hover {
          opacity: 0.6;
      }
          
    </style>
  </head>
  <body>    
    <div id="wrapper">
      <div id="displayTable">
        <div id="header">
          <div id="logo">
            <img id="timeLapseLogo" src="https://www.livetimelapse.com.au/images/logo.png">
          </div>
          <div id="headerText">
            <div class="bold large">Welcome Urban Utilities</div>
            <div>Time Lapse Management Console V1.3</div>
          </div>
          <div style="clear:both;"></div>
        </div>
        <div id="navBar">
          <div id="currentLocation">
            Loowood QLD Australia
          </div>
          <div id="cameraLinks">
            
            <a href="https://www.livetimelapse.com.au/clients/urban-utilities/lowood/camera-1.html"><span class="cameraLink">Camera 1</span></a>
            <a href="https://www.livetimelapse.com.au/clients/urban-utilities/lowood/camera-1-zoom.html"><span class="cameraLink">Camera 1 Zoom</span></a> 
            <a href="https://www.livetimelapse.com.au/clients/urban-utilities/lowood/camera-2.html"><span class="cameraLink">Camera 2</span></a>
            <a href="https://www.livetimelapse.com.au/clients/urban-utilities/lowood/wx/index.html"><span class="cameraLink">Weather Station</span></a>
    
          </div>
          <div style="clear:both;"></div>
        </div>
        <div id="innerBody">  
         
        
          <div id="imageDIV">
          <?php
          
          $cache = rand(0,20000);
          
          if ($animation == 'yes' && $total_images == 0) {
            
            }
          elseif ($animation == 'yes' && $error != 'yes') {
            
            ?>
            
            <div style="padding:3px 0px 3px 0px;">
            <div id="progress_bar_container" align="center">
              <div id="progress_wrapper">
                <div id="progress_text" class="progress_text">&nbsp;</div>
                <div id="progress_bar" class="progress_bar">&nbsp;</div>
              </div>
            </div>  
          
            <input type="hidden" id="finished_text" value="Displaying <b><?php echo $total_images; ?></b> images between <?php echo $animation_start_screen; ?> and <?php echo $animation_stop_screen; ?>">
            
            <ilayer name="animationlayer" left="1" top="1" id="animationlayer">
              <img style="border: solid 1px #C1C1C1;" src="https://www.livetimelapse.com.au/images/bigtransparent.gif" name="animation" id="timelapseimage" border="0">
            </ilayer>
            </div>
            
            <?php
          
            }
          else {
            if ($error != 'yes') {
              
              ?>     
                    
     
              <?php
                   
              } else {
                    
                ?>
              
                <div>Sorry, you have chosen an invalid start and stop time.</div>
                
                <?php
              
              }
            }
            
          ?>
          </div>
          <div style="clear:both;"></div>
  
          <div id="weatherDIV">
            <div id="charts-container"></div>
            <div id="mesowx-console" class="wx-console console-vertical" id="wx-console-vertical">
              <div class="outTemp-group reading-group">
                  <div><span class="outTemp-value reading-value"></span><span class="outTemp-unit unit-label"></span></div>
                  <div class="feels-like-container">feels like <span class="heatindex-value feels-like-value reading-value"></span><span class="windchill-value feels-like-value reading-value"></span><span class="windchill-unit unit-label"></span></div>
                  <span class="desc">temperature<span>
              </div>
              <div class="dewpoint-group reading-group">
                  <span class="dewpoint-value reading-value"></span><span class="dewpoint-unit unit-label"></span>
                  <span class="desc">dewpoint<span>
              </div>
              <div class="wind-group reading-group">
                  <!--span class="windSpeed-value reading-value"></span><span class="windSpeed-unit unit-label"></span>
                  <span class="windDir-value reading-value"></span-->
                  <div id="compass" class="compass"></div>
                  <span class="desc">wind</span>
              </div>
              <div class="out-hum-group reading-group">
                  <span class="outHumidity-value reading-value"></span><span class="outHumidity-unit unit-label"></span>
                  <span class="desc">humidity</span>
              </div>
              <!--<div class="bar-group reading-group">
                  <span class="barometer-value reading-value"></span><span class="barometer-unit unit-label"></span>
                  <span class="desc">pressure</span>
              </div>-->
              <div class="rain-group reading-group">
                  <!--
                      Setup Note:
            
                      If you have a station that supplies the dayRain field (e.g. Davis) and want to display 
                      it (along with dynamic hiding/showing of the rain rate depending on if it's raining), 
                      simply comment out the following line and remove the comments around the commented two
                      lines below it.
                  <span class="rainRate-value reading-value"></span><span class="rainRate-unit unit-label"></span>
                  -->
                  <span class="dayRain-value reading-value"></span><span class="dayRain-unit unit-label"></span> 
                  <div class="rainRate-container"><span class="rainRate-value reading-value"></span><span class="rainRate-unit unit-label"></span></div>
                  <span class="desc">rain</span>
              </div>
              <div id="chart-selector">
                <div class="chart-selector-link"><a id="real-time-selector" href="#">Real-time</a></div>
                <div class="chart-selector-link"><a id="today-selector" href="#">24-hours</a></div>
                <div class="chart-selector-link"><a id="archive-selector" href="#">Archive</a></div>
              </div>
              <div class="last-update"><span class="dateTime-value"></span></div>
            </div>
            <div style="clear:both;"></div>

          </div><!-- End Weather -->
        </div><!-- End Inner Body -->
      </div><!-- End Display Table -->
    </div><!-- End Wrapper -->         
  <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="302751d01f6bd44df7314fa6-|49" defer></script></body>
 </html>