
    <!DOCTYPE html>
    <html>
       <head>
        
	<script src="js/jsani/lib/jquery-1.11.1.min.js"></script>
	<script src="js/jsani/lib/jquery-ui-1.11.2/jquery-ui.min.js"></script>
	<link href="js/jsani/lib/jquery-ui-1.11.2/jquery-ui.min.css" rel="stylesheet" type="text/css">
	<script src="js/jsani/jquery.jsani.min.js"></script>
        <link href="js/jsani/jquery.jsani.min.css" rel="stylesheet" type="text/css">

       </head>

<style type="text/css">
html, body {
  height: 100%;
}

#caminfo {
height: 100%;
}

table {
border-collapse: collapse;
}

table,th,td {
border: 1px solid black;
padding-horizontal: 15px;

}


</style>
<body>


<div style="width: auto; height: 150px; margin: auto;">

<div id="caminfo">
<table>
    <tbody id="camstats"></tbody>
<form onsubmit="return false;" method="post" name="gifit">
<input type="submit" name="stopit" value="Stop Auto Refresh" onclick="stoptimer()"/>
</form>
</table>


</div>
</div>

<div style="width: auto; margin: auto;">
	<div id="animation_1"></div>
</div>

<div id="archive">
<label>Current archive length is 15 days</label>
 <form onsubmit="return false;" method="post" name="archive">
  <label for="archive">Enter Ending Date Time For Archive Data (YYYY-MM-DD HH:MM) UTC</label>
  <input type="text" id="dtg" name="dtg">
  <input type="submit" name="submit" value="Submit" onclick="archiveshow()" />
  </form>
<br>

 <form onsubmit="return false;" method="post" name="gifit">
  <label for="gifit">Enter frame delay and last frame delay (ms) to make an animated gif from loaded frames (will take a couple seconds).</label>
  <br>
  <label for="delay">Delay</label>
  <input type="text" id="delay" name="delay" value="20" size="6">
  <label for="delay">Last Frame Delay</label>
  <input type="text" id="lastdelay" name="lastdelay" value="200" size="6">
 <label for="maxh">Constrain Horizonal Size</label>
  <input type="text" id="maxh" name="maxh" value="500" size="6">
 <label for="maxv">Constrain Vertical Size</label>
  <input type="text" id="maxv" name="maxv" value="400" size="6">
 <label for="delay">Last Frame Delay</label>
  <input type="submit" name="gifit" value="Make GIF" onclick="makemp4()"/>
  </form>



  

</div>


<script>

<?php 

$camid = pg_escape_string($_GET['camid']);
echo('var camid = ' . $_GET["camid"] . ';'); 
if($_GET['dtg'] ?? null){
$endtime = pg_escape_string($_GET['dtg']);
}
if($_GET['camimages'] ?? null){
$camimages = $_GET['camimages'];
echo('var camimages = ' . $_GET["camimages"] . ';'); 
}
if(!$_GET['camimages'] ?? null){
echo('var camimages = ' . 20 . ';'); 
}




if($_GET['dtg'] ?? null){
echo('var camtime = ' . json_encode($_GET["dtg"]). ';'); 
}



?>

externalcam = [];


function archiveshow() {
    archive = document.getElementById("dtg").value;
    archive=archive.trim().replace(/ /g, '+');
    window.open("one.php?camid=" + camid + "&camimages=" + camimages + "&dtg=" + archive);
}




function doTheInsert(label1,value1,label2,value2) {
  newRow="<td>" + label1 + "</td><td>" + value1 + "</td><td>" + label2 + "</td><td>" + value2 + "</td>";
  document.getElementById('camstats').innerHTML += newRow;
}



function updatetable() {
$.getJSON("single.php?camid=" + camid, function(caminfo){
       document.getElementById('camstats').innerHTML = '';
       doTheInsert('State',caminfo[0]['state'],'County',caminfo[0]['county']);
       doTheInsert('Public Zone', caminfo[0]['pzone'], 'CWA', caminfo[0]['cwa']);
       doTheInsert('Elevation',caminfo[0]['elevation'] + ' feet', 'Direct link to feed (all may not be accessible from RLX)','<a href="' + caminfo[0]['url'] + '">' + 'link' + '</a>');
       if (caminfo[0]['source'] == null) {
       doTheInsert('Source for sharing','none', 'Permission to share (if null, use judgement)',caminfo[0]['permission']);
       }
       if (caminfo[0]['source'] != null) {
       doTheInsert('Source for sharing','<a href="' + caminfo[0]['source'] + '" target=”_blank">' + 'link' + '</a>', 'Permission to share (if null, use judgement)',caminfo[0]['permission']);
       }


       doTheInsert('Description','<a href="' + googleMap(caminfo[0]['lat'],caminfo[0]['lon']) + '" target=”_blank">' + caminfo[0]['description'] + '</a>', '','');
       document.title = 'Cam: ' + caminfo[0]['description'];
});
}

function googleMap(lat, lon){
        return "http://maps.google.com/maps?t=k&q=loc:" + lat + "+" + lon + "&basemap=satellite";
}




function getcam() {
if (typeof camtime !== 'undefined') {
    var reqstring = "individualcam.php?camid=" + camid + '&camimages=' + camimages + '&dtg=' + camtime;
    
} else {
    var reqstring = "individualcam.php?camid=" + camid + '&camimages=' + camimages;
    
}

//$.getJSON("individualcam.php?camid=" + camid + '&camimages=' + camimages, function(data){
$.getJSON(reqstring, function(data){    
 var camlist = [];
 var filetimes = [];

 for(var i in data){
  camlist.push(data[i].filepath);
  filetimes.push('<a href="./camdata/' + data[i].filepath + '">Pause Loop and click this to view image directly</a>      ' + 'Image Retrieved: ' + data[i].dateutc + ' UTC');
  externalcam.push("./camdata/" + data[i].filepath);
  }
camlist.reverse();
filetimes.reverse();
externalcam.reverse();
var animation = $("#animation_1").jsani({
                                baseDir: './camdata',
                                imageSrcs: camlist,
                                aniWidth: 800,
                                aniHeight: 600,
                                //initdwell: 200,
				frameLabels: filetimes,
                                controls: ['framelabel', 'stopplay', 'firstframe', 'previous', 'next', 'lastframe', 'looprock', 'slow', 'fast', 'zoom'],
                                last_frame_pause: 8,
                                //first_frame_pause: 1,
                                //frame_pause: '0:5, 3:6'
                        });


updatetable();
});

}


getcam();

//    window.setInterval('refresh()', 60000); 	
    const myInterval = setInterval('refresh()', 60000);
    function refresh() {
        window.location.reload();
    }

function stoptimer() {
  clearInterval(myInterval);
}





function makemp4() {
    var delay = document.getElementById("delay").value;
    var lastdelay = document.getElementById("lastdelay").value;
    var maxh = document.getElementById("maxh").value;
    var maxv = document.getElementById("maxv").value;
    $.ajax({
        type: "POST",
        url: 'mp4.php',
        data: {data: externalcam, images: camimages, delay: delay, lastdelay: lastdelay, maxh: maxh, maxv: maxv},
        success: function(data) {
            var giffy = document.createElement('img');
            giffy.src = `data:image/gif;base64,${data}`;
            var outputImg = document.createElement('a');
            outputImg.innerHTML = "Click here or on the image to save gif <br>";
            outputImg.appendChild(giffy);
            outputImg.href = giffy.src;
            outputImg.download = "loof.gif";
            giffy.href = giffy.src;
            giffy.download = "loop.gif";             
            outputImg.appendChild(giffy)
            document.body.appendChild(outputImg);
            //document.body.appendChild(giffy);
            //window.open('about:blank').document.body.appendChild(outputImg);
            //var OpenWindow = window.open('about:blank','_blank');
            //OpenWindow.document.body.appendChild(outputImg);
        }
    });





}







</script>

<div id='hidden' style="display: none;">
</div>


</body>
</html>
