From 8fd502382e2ffd254392b4100714fb3c0e1e1a35 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Fri, 14 Jul 2017 14:38:25 -0400
Subject: [PATCH] Update the camera images so they refresh every minute.

Also update the links for refreshing them.
---
 front-page.php | 47 ++++++++++++++++++++++++++++++++++++++---------
 style.css      |  2 +-
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/front-page.php b/front-page.php
index 77340df..c0be503 100644
--- a/front-page.php
+++ b/front-page.php
@@ -16,29 +16,30 @@
         <div class="row collapse">
             <div id="first-row" class="small-11 small-centered large-uncentered large-12 columns">
                 <h1 class="text-center">Petoskey Harbor and Little Traverse Bay Camera</h1>
-                <img alt="Little Traverse Bay" src="http://cams.gaslightmedia.com/cameras/images/GLM-Basin-MediumLarge.jpg?x=1">
+                <img id="cam1" alt="Little Traverse Bay" src="http://cams.gaslightmedia.com/cameras/images/GLM-Basin-MediumLarge.jpg?x=1">
             </div>
         </div>
         <div class="row collapse">
             <div class="small-11 small-centered large-uncentered large-12 columns">
-                <p><a target="_blank" href="http://cams.gaslightmedia.com/cameras/images/GLM-Basin-Large.jpg?x=1">Full Resolution</a> &bullet; <a href="#">Refresh Image</a> (image updates at one minute intervals) &bullet;<a href="<?php echo home_url('/'); ?>web-cam-policy/"> Web Camera Image Policy </a></p>
+                <p><a target="_blank"
+href="http://cams.gaslightmedia.com/cameras/images/GLM-Basin-Large.jpg?x=1">Full Resolution</a> &bullet; <a id="rCam1" href="#">Refresh Image</a> (image updates at one minute intervals) &bullet;<a href="<?php echo home_url('/'); ?>web-cam-policy/"> Web Camera Image Policy </a></p>
             </div>
         </div>
         <div id="second-row" class="row collapse">
             <div id="down-town" class="small-11 small-centered large-uncentered large-8 columns">
                 <h2 class="text-center large-text-left">Downtown Petoskey</h2>
-                <img alt="Downtown Petoskey" src="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">
+                <img id="cam2" alt="Downtown Petoskey" src="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">
             </div>
             <div class="show-for-large-up large-4 columns text-center right">
-               <div class="iframe-screen">                
-               <a href="https://player.vimeo.com/video/128990353" class="fancybox fancybox.iframe" data-fancybox-type="iframe"> 
+               <div class="iframe-screen">
+               <a href="https://player.vimeo.com/video/128990353" class="fancybox fancybox.iframe" data-fancybox-type="iframe">
                </a>
             </div>
                 <h3 class="text-center large-text-left">Featured Video</h3>
                     <iframe src="https://player.vimeo.com/video/128990353" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
             </div>
             <div class="show-for-medium-down small-11 columns small-centered">
-                <p><a  target="_blank" href="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">Full Resolution</a> &bullet; <a href="#">Refresh Image</a> (image updates at one minute intervals) &bullet;<a href="<?php echo home_url('/'); ?>web-cam-policy/"> Web Camera Image Policy </a></p>
+                <p><a  target="_blank" href="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">Full Resolution</a> &bullet; <a id="rCam2" href="#">Refresh Image</a> (image updates at one minute intervals) &bullet;<a href="<?php echo home_url('/'); ?>web-cam-policy/"> Web Camera Image Policy </a></p>
             </div>
         </div>
         <div class="row">
@@ -48,9 +49,10 @@
             </div>
         </div>
         <div id="final-row" class="row large-collapse show-for-large-up">
-            <p><a target="_blank" href="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">Full Resolution</a> &bullet; <a href="#">Refresh Image</a> (image updates at one minute intervals) &bullet; <a href="<?php echo home_url('/'); ?>web-cam-policy/"> Web Camera Image Policy </a> </p>
+            <p><a target="_blank"
+href="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">Full Resolution</a> &bullet; <a id="rCam3" href="#">Refresh Image</a> (image updates at one minute intervals) &bullet; <a href="<?php echo home_url('/'); ?>web-cam-policy/"> Web Camera Image Policy </a> </p>
         </div>
-    
+
         <div class="row">
          <div id="deal-small" class="small-12 text-center large-text-left large-3 columns show-for-medium-down">
             <a id="advent" href="<?php echo get_permalink(15); ?>"> Adventures</a>
@@ -60,7 +62,34 @@
         </div>
             <?php get_template_part('parts/main-content'); ?>
         </div>
-        
+
+        <script>
+            setInterval(function(){
+                refreshCam1();
+                refreshCam2();
+            }, 60000);
+            function refreshCam1() {
+                jQuery('#cam1').attr('src', 'http://cams.gaslightmedia.com/cameras/images/GLM-Basin-MediumLarge.jpg?x=1?t=' + Date.now());
+            }
+            function refreshCam2() {
+                jQuery('#cam2').attr('src', 'http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1&t=' + Date.now());
+            }
+            jQuery('#rCam1').click(function(e){
+                e.preventDefault();
+                refreshCam1();
+                return false;
+            });
+            jQuery('#rCam2').click(function(e){
+                e.preventDefault();
+                refreshCam2();
+                return false;
+            });
+            jQuery('#rCam3').click(function(e){
+                e.preventDefault();
+                refreshCam2();
+                return false;
+            });
+        </script>
 <!--
         <div class="row">
             <div class="small-12 medium-4 columns">
diff --git a/style.css b/style.css
index ae16e00..430e060 100644
--- a/style.css
+++ b/style.css
@@ -3,5 +3,5 @@ Theme Name: Petoskey.Com
 Author: Gaslight Media
 Author URI: http://www.gaslightmedia.com
 Description: A theme for Petoskey.Com
-Version: 1.0.9
+Version: 1.0.10
 */
-- 
2.17.1