var isLoggedIn = false;


function CamConfiguration (camId, appendTo = $("#div#container")) {
    var _camId, _parent, _div, _data;

    }

/*
    CamConsole.php
    
    Okay, so this class is a big one! Builds a camera console that displays most recent live view, a map with viewshed polygon, & panorama

    If user is logged in, will offer additional tabs
        - Historical View: view cam history, including both single frame and panoramas. Offers azimuth selection on single frame searches
        - Configuration: alter camera configuration, including location info, connection settings, panorama configuration, and manual control
*/

function CamConsole(camId, appendTo=$("div#container")) {
    var _camId, _data, _div, _output, _controlBar,  _panorama, _camMonitor, _history, _camControl, _t;

    this.build = function () {
        /*
            So, build the cam console, including the additional tabs if user is logged in. Default to Latest View tab. If this is a new camera being created, switch to config tab.
        */

        var me = this;

        var navigation = $("<div>").addClass("btn-group cam-menu").attr({
                                                                        "role":"group",
                                                                        "aria-label":"Flir Navigation"
                                                                    });
        
        
        me._controlBar = $("<div>").addClass('control-bar').append($("<div>").addClass("cam-name-heading-box").append($("<h3>").addClass('cam-name-heading')), navigation);
        var panoDiv = $("<div>").addClass('panorama-area');
        var camMonitorDiv = $("<div>").addClass('cam-monitor-area');
        me._div = $("<div>").addClass("camera-console");

        me._div.append(me._controlBar);
        me._camMonitor = new CamMonitor(me._camId, me._div);
        me._panorama = new CamPanorama(me._camId, me._div, me._camMonitor._map);

        me._output.append(me._div);

          
    }

    this.getData = function() {
        /*
            Get the camera's information (to title the page)
        */

        var me = this;

        var success = function (result) {
            if (result.code == 1) {
                me._data = result.data;
            }

            me.updateHeading();
        }
        var finish = function () {

        }
        var fail = function() {

        }

        if (!me._paused && !isNaN(me._camId)) {
            var query = new AjaxQuery("/api/getCameraInfo", "GET", {camId: me._camId}, success, finish, fail);
        }

        me._t = setTimeout(function() {
            me.getData();
        }, 30000)
    }

    
    this.init = function () {
        var me = this;

        me._camId = camId;
        me._output = appendTo;

        me.getData();
        me.build();
    }

    this.updateHeading = function () {
        /*
            Update the heading to show the camera's name
        */

        var me = this;

        var headingBox = me._div.find('.cam-name-heading-box');
        var heading = me._div.find('.cam-name-heading');

        headingBox.html(heading);

        heading.html("<span class='cam-name-carrot'>&nbsp;>&nbsp;</span>" + me._data.camname.replaceAll("_", " "));

        heading.prepend($("<a>").attr({"href":"/cameras"}).html("Camera Management"));

        if (me._data.camnodeid) {
            let nodeButton = $("<a>").addClass('btn btn-secondary node-button').attr({'href':'/node/1/'+me._data.camnodeid}).html(
                $("<img>").attr({'src':'img/button.svg'}).css({"width":"24px"})
            );

            headingBox.append(
                nodeButton
                /*'<span>'+me._data.camnodeid+'</span>'*/
            );
        }

            }

    this.init();
}

 

function CamGallery (camType = "active", div = null, data = null, refreshRate = 30000, exclude = Array(), config = false) {
    /*
        Display a grid of auto-updating camera thumbnails, for either active or inactive cams
    */

    var _camType, _div, _thumbnails, _data, _refreshRate, _exclude, _overrideMobileHide;

    this.buildThumbnails = function() {
        /*
            Build the thumbnail grid
        */
        var me = this;
        if (screen.width > 1000 || me._overrideMobileHide) {

            me._data.forEach((val) => {
                me._thumbnails[val.camId] = new CamThumbnail(val.camId, me._div, val, Boolean(config));
                if (me._exclude.indexOf(val.camId) > -1) {
                    me._thumbnails[val.camId]._div.hide();
                }
                if (me._config) {
                    me._thumbnails[val.camId]._div.on("click", function () {
                        me._config.switchGalleries(val.camId, me._camType);
                    })
                }
            });

                    }
    }

    this.destroy = function (camId) {
        var me = this;

        if (Array.isArray(me._camType)) {
            me._thumbnails[camId]._div.remove();
            me._camType.splice(me._camType.indexOf(camId), 1);
        } else if (me._camType == 'active') {
            me._thumbnails[val.camId]._div.hide();
        }
    }

    this.getData = function () {
        /*
            Retrieve data for the cameras
        */

        var me = this;

        var success = function(result) {
            if (result.code == 1) {
                me.updateData(Object.values(result.data));
            }

            me._t = setTimeout(() => {
                me.getData();
            }, me._refreshRate);
        }
        var finish = function () {}
        var fail = function () {}

        var query = new AjaxQuery("/api/getCameraData", "GET", {cameraIds: me._camType}, success, finish, fail);
    }

    this.rebuildThumbnails = function() {
        /*
            Delete all the thumbnails and call the build function again (this is in case cameras are added, removed, or deactivated while a user has this page active)
        */

        var me = this;

        me._thumbnails.forEach((thumbnail) => {
            thumbnail._div.remove();
        });
        me.buildThumbnails();
    }

    this.updateData = function(data) {
        var me = this;
        me._data = data;

        me._data.sort(function (a, b) {
            let aName = a.camName.toLowerCase(),
                bName = b.camName.toLowerCase();

            if (aName < bName) {
                return -1;
            }
            if (aName > bName) {
                return 1;
            }
            return 0;
        });

        if (me._thumbnails.length == 0) {
            me.buildThumbnails();
        } else {
            me.updateThumbnails();
        }
    }

    this.updateThumbnails = function() {
        /*
            Update the image shown by each thumbnail with the new data.
        */

        var me = this;

        me._data.every((val) => {
            if (me._thumbnails[val.camId]) {
                me._thumbnails[val.camId].updateData(val);
            } else {
                me.rebuildThumbnails();
                return false;
            }
            return true;
        });

        me._thumbnails.every((thumbnail, camId) => {
            if (camId != 0 && !me._data.some(function(d) { return d.camId == camId})) {
                me.rebuildThumbnails();
                return false;
            } else {
                return true;
            }
        })

        if (Array.isArray(me._camType) && me._config && me._config._shown) {
            me._config._map.updateData(me._data);
        }
    }

    this.init = function () {
        var me = this;

        me._camType = camType;
        me._div = div ?? $("<div>").addClass("cam-gallery").attr({"id":me._camType+"-cams"});
        me._refreshRate = refreshRate;
        me._thumbnails = Array();
        me._exclude = exclude;
        me._config = config;
        me._overrideMobileHide = false;

        if (data == null) {
            me.getData();
        } else {
            me.updateData(data);
        }
    }

    this.init();
}

function CamHistory(camId, appendTo = $("div#container"), panorama = null, camMonitor = null) {
    var _camId, _parent, _div, _form, _overlay, _controls, _display, _panorama, _camMonitor, _data, _paused;

    /*
        Arguably the most complicated JS class I built for this site. Lots of event listeners and case checks from play/pause, prev/next, and seeker-scroll

        Basic function of this class is to allow the user to search for camera data with parameters. Major params are:
            Still/Timelapse - Still gets closest still to given timestamp, timelapse returns all data between two timestamps
            Panorama/Single Frame - Panorama returns panorama data (patchwork for still, stitched for timelapse), single frame returns single camera frames and viewshed polygon info
            Date/Time - For a still, select a date/time, will return closest data to that timestamp
              (Range)   For a timelapse, select a start & end time, will return all available data of the selected type between those times
            Azimuth - Limits query to within 1/3 a view frame of defined azimuth
              (Range) Limits query to between 2 azimuths with 1/3 a view frame padding on either side.
    */

    this.build = function() {
        /* 
            Build the form for requesting cam history
        */
        var me = this;

        me._div = $("<div>").addClass("cam-history");

        me._form = $("<form>").addClass("history-form").append(
                                                            $("<fieldset>").addClass("form-group row").append(
                                                                $("<legend>").addClass("col-form-label float-sm-left col-sm-2 pt-0").html("History Mode"),
                                                                $("<div>").addClass("col-sm-10").append(
                                                                    $("<div>").addClass("form-check form-check-inline").append(
                                                                        $("<input>").addClass("form-check-input").attr({
                                                                            "type":"radio",
                                                                            "required":true,
                                                                            "name":"historyType",
                                                                            "id":"cam-"+me._camId+"-still-radio",
                                                                            "value":"still"  
                                                                        }).on("change", function (e) {me.toggleDateTimeShown(e.target)}),
                                                                        $("<label>").addClass("form-check-label").attr({
                                                                            "for":"cam-"+me._camId+"-still-radio"
                                                                        }).html("Still")
                                                                    ),
                                                                    $("<div>").addClass("form-check form-check-inline").append(
                                                                        $("<input>").addClass("form-check-input").attr({
                                                                            "type":"radio",
                                                                            "required":true,
                                                                            "name":"historyType",
                                                                            "id":"cam-"+me._camId+"-timelapse-radio",
                                                                            "value":"timelapse"  
                                                                        }).on("change", function (e) {me.toggleDateTimeShown(e.target)}),
                                                                        $("<label>").addClass("form-check-label").attr({
                                                                            "for":"cam-"+me._camId+"-timelapse-radio"
                                                                        }).html("Timelapse")
                                                                    )
                                                                )
                                                            ),
                                                            $("<fieldset>").addClass("form-group row").append(
                                                                $("<legend>").addClass("col-form-label float-sm-left col-sm-2 pt-0").html("Image Type"),
                                                                $("<div>").addClass("col-sm-10").append(
                                                                    $("<div>").addClass("form-check form-check-inline").append(
                                                                        $("<input>").addClass("form-check-input").attr({
                                                                            "type":"radio",
                                                                            "required":true,
                                                                            "name":"imageType",
                                                                            "id":"cam-"+me._camId+"-pano-radio",
                                                                            "value":"pano"  
                                                                        }).on("change", function (e) {me.toggleAzimuthShown(e.target)}),
                                                                        $("<label>").addClass("form-check-label").attr({
                                                                            "for":"cam-"+me._camId+"-pano-radio"
                                                                        }).html("Panorama")
                                                                    ),
                                                                    $("<div>").addClass("form-check form-check-inline").append(
                                                                        $("<input>").addClass("form-check-input").attr({
                                                                            "type":"radio",
                                                                            "required":true,
                                                                            "name":"imageType",
                                                                            "id":"cam-"+me._camId+"-frame-radio",
                                                                            "value":"frame"  
                                                                        }).on("change", function (e) {me.toggleAzimuthShown(e.target)}),
                                                                        $("<label>").addClass("form-check-label").attr({
                                                                            "for":"cam-"+me._camId+"-frame-radio"
                                                                        }).html("Single Frame")
                                                                    )
                                                                )
                                                            ),
                                                            $("<div>").addClass("form-group row").css({"display":"none"}).append(
                                                                $("<label>").addClass("col-sm-2 col-form-label").html("Date/Time").attr({
                                                                    "for":"datetime"
                                                                }),
                                                                $("<div>").addClass("col-sm-10").append(
                                                                    $("<input>").addClass("form-control").attr({
                                                                        "type":"text",
                                                                        "name":"datetime",
                                                                        "id":"cam-"+me._camId+"-datetime-input"
                                                                    }).daterangepicker({
                                                                        "autoApply": true,
                                                                        "autoUpdateInput":true,
                                                                        "singleDatePicker": true,
                                                                        "maxDate": moment().tz("America/Los_Angeles"),
                                                                        "timePicker": true,
                                                                        "locale": {
                                                                            "format": "L LT z",
                                                                            "monthNames": [
                                                                                "January",
                                                                                "February",
                                                                                "March",
                                                                                "April",
                                                                                "May",
                                                                                "June",
                                                                                "July",
                                                                                "August",
                                                                                "September",
                                                                                "October",
                                                                                "November",
                                                                                "December"
                                                                            ]
                                                                        },
                                                                        "startDate": moment().tz("America/Los_Angeles"),
                                                                        "endDate": moment().tz("America/Los_Angeles")
                                                                    })
                                                                )
                                                            ),
                                                            $("<div>").addClass("form-group row").css({"display":"none"}).append(
                                                                $("<label>").addClass("col-sm-2 col-form-label").html("Date/Time Range").attr({
                                                                    "for":"datetime-range"
                                                                }),
                                                                $("<div>").addClass("col-sm-10").append(
                                                                    $("<input>").addClass("form-control").attr({
                                                                        "type":"text",
                                                                        "name":"datetime-range",
                                                                        "id":"cam-"+me._camId+"-datetime-range-input"
                                                                    }).daterangepicker({
                                                                        "autoApply": true,
                                                                        "autoUpdateInput":true,
                                                                        "maxDate": moment().tz("America/Los_Angeles"),
                                                                        "timePicker": true,
                                                                        "locale": {
                                                                            "format": "L LT z",
                                                                            "monthNames": [
                                                                                "January",
                                                                                "February",
                                                                                "March",
                                                                                "April",
                                                                                "May",
                                                                                "June",
                                                                                "July",
                                                                                "August",
                                                                                "September",
                                                                                "October",
                                                                                "November",
                                                                                "December"
                                                                            ]
                                                                        },
                                                                        "startDate": moment().tz("America/Los_Angeles"),
                                                                        "endDate": moment().tz("America/Los_Angeles")
                                                                    })
                                                                )
                                                            ),
                                                            $("<div>").addClass("form-group row").css({"display":"none"}).append(
                                                                $("<label>").addClass("col-sm-2 col-form-label").html("Azimuth (optional)").attr({
                                                                    "for":"azimuth"
                                                                }),
                                                                $("<div>").addClass("col-sm-10").append(
                                                                    $("<input>").addClass("circle-range-select").attr({
                                                                        "name":"azimuth",
                                                                        "data-auto-init":true,
                                                                        "data-single-value":true,
                                                                        "data-min":-1,
                                                                        "data-max":359,
                                                                        "value":"-1",
                                                                        "id":"cam-"+me._camId+"-azimuth-select"
                                                                    })
                                                                )
                                                            ),
                                                            $("<div>").addClass("form-group row").css({"display":"none"}).append(
                                                                $("<label>").addClass("col-sm-2 col-form-label").html("Azimuth Range(optional)").attr({
                                                                    "for":"azimuth-range"
                                                                }),
                                                                $("<div>").addClass("col-sm-10").append(
                                                                    $("<input>").addClass("circle-range-select").attr({
                                                                        "name":"azimuth-range",
                                                                        "data-auto-init":true,
                                                                        "data-min":-1,
                                                                        "data-max":359,
                                                                        "value":"-1;-1",
                                                                        "id":"cam-"+me._camId+"-azimuth-range-select"
                                                                    })
                                                                )
                                                            ),
                                                            $("<div>").addClass("form-group row").append(
                                                                $("<div>").addClass("col-sm-10").append(
                                                                    $("<button>").addClass("btn btn-primary").attr({"type":"submit"}).html("Submit")
                                                                )
                                                            )
                                                        );

        me._form.on("submit", function(e) {
            e.preventDefault();
            me.processForm();
        });

        me._display = $("<div>").addClass("cam-history-display").css({"display":"none"});
        if (!me._panorama) me._panorama = new CamPanorama(me._camId, me._display);
        if (!me._camMonitor) me._camMonitor = new CamMonitor(me._camId, me._display);

        me._div.append(me._form);
        me._div.append(me._display);
        me.buildControls();
        me._parent.append(me._div);
    }

    this.buildControls = function() {
        /*
            Build the controls for navigating cam history
        */

        var me = this;
        me._controls = $("<div>").addClass('cam-history-controls');

        me._controls.append($("<button>").attr({
                            "type":"button",
                            "class":"btn btn-dark timelapseControls playPause pause",
                            "title":"Pause"
                        }).on("click", (e) => {
                            var target = $(e.currentTarget);
                            if (target.hasClass("pause")) {
                                me.playPause("pause");
                                target.addClass("play").removeClass("pause");
                            } else if (target.hasClass("play")) {
                                me.playPause("play");
                                target.addClass("pause").removeClass("play");
                            }
                        }),
                        $("<button>").attr({
                            "type":"button",
                            "class":"btn btn-dark historyControls prev",
                            "title": "Previous"
                        }).on("click", (e) => {
                            me.prev();
                        }),
                        $("<button>").attr({
                            "type":"button",
                            "class":"btn btn-dark historyControls next",
                            "title": "Next"
                        }).on("click", (e) => {
                            me.next();
                        }),
                        $("<button>").attr({
                            "type":"button",
                            "class":"btn btn-dark historyControls stop",
                            "title":"Stop"
                        }).on("click", (e) => {
                            me.stop();
                        }),
                        $("<input>").attr({
                            "type":"range",
                            "class":"timelapseControls lapse-slider",
                            "min":0,
                            "max":0,
                            "value":0
                        }).on("mousedown", function(e) {
                            var playPause = me._controls.find('.playPause');
                            if (playPause.hasClass('pause')) {
                                playPause.click();
                                $(e.currentTarget).attr("data-was-paused", false);
                            } else {
                                $(e.currentTarget).attr("data-was-paused", true);
                            }
                        }).on("input", function(e) {
                            var idx = $(e.currentTarget).val();
                            me.toIndex(idx, false);
                        }).on("change", function(e) {
                            var idx = $(e.currentTarget).val();
                            var play = $(e.currentTarget).attr('data-was-paused') == 'false';
                            me.toIndex(idx, play);

                            if (play) {
                                me._controls.find('.playPause').removeClass('play').addClass('pause').attr({"title": "Pause", 'data-was-paused':null});
                                me._paused = false;
                            }
                        }));

        me._controls.hide();
        me._div.append(me._controls);

        me._panorama._controls = me._controls;
        me._camMonitor._controls = me._controls;
    }

    this.correctPausedVar = function() {
        /*
            Reset the _paused property to match what the button is displaying
        */

        var me = this;

        if (me._controls.find('.playPause').hasClass('play')) {
            me._paused = true;
        } else {
            me._paused = false;
        }
    }

    this.init = function() {
        var me = this;

        me._camId = camId;
        me._parent = appendTo;
        me._panorama = panorama;
        me._camMonitor = camMonitor;

        me.build();
    }

    this.next = function() {
        /*
            Is triggered when the "next" button is clicked. Displays the next available dataset for a given set of conditions
        */

        var me = this;
        var formData = new FormData(me._form[0]);

        me.correctPausedVar();

        if (formData.get('historyType') == 'still' && formData.get('imageType') == 'pano') {
            me._panorama.getPanoById(me._panorama._next);
        } else if (formData.get('historyType') == 'timelapse' && formData.get('imageType') == 'pano') {
            clearTimeout(me._panorama._tlT);
            me._panorama.showTimelapseFrame(me._panorama._next, !me._paused);
        } else if (formData.get('historyType') == 'still' && formData.get('imageType') == 'frame') {
            me._camMonitor.getDataById(me._camMonitor._data[me._camId].cmlgInfo.nextId);
        } else if (formData.get('historyType') == 'timelapse' && formData.get('imageType') == 'frame') {
            clearTimeout(me._camMonitor._tlT);
            me._camMonitor.showFrame(me._camMonitor._next, !me._paused);
        }
    }

    this.playPause = function(action) {
        /*
            Plays or pauses a timelapse
        */

        var me = this;
        var formData = new FormData(me._form[0]);

        if (formData.get('imageType') == 'pano' && action == 'pause') {
            clearTimeout(me._panorama._tlT);
            me._paused = true;
        } else if (formData.get('imageType') == 'frame' && action == 'pause') {
            clearTimeout(me._camMonitor._tlT);
            me._paused = true;
        } else if (formData.get('imageType') == 'pano' && action == 'play') {
            me._panorama.showTimelapseFrame(me._panorama._next);
            me._paused = false;
        } else if (formData.get('imageType') == 'frame' && action == 'play') {
            me._camMonitor.showFrame(me._camMonitor._next);
            me._paused = false;
        }
    }

    this.prev = function() {
        /*
            Is triggered when the "prev" button is clicked. Displays the previous available dataset for a given set of conditions
        */

        var me = this;
        var formData = new FormData(me._form[0]);

        me.correctPausedVar();

        if (formData.get('historyType') == 'still' && formData.get('imageType') == 'pano') {
            me._panorama.getPanoById(me._panorama._prev);
        } else if (formData.get('historyType') == 'timelapse' && formData.get('imageType') == 'pano') {
            clearTimeout(me._panorama._tlT);
            me._panorama.showTimelapseFrame(me._panorama._prev, !me._paused);
        } else if (formData.get('historyType') == 'still' && formData.get('imageType') == 'frame') {
            me._camMonitor.getDataById(me._camMonitor._data[me._camId].cmlgInfo.prevId);
        } else if (formData.get('historyType') == 'timelapse' && formData.get('imageType') == 'frame') {
            clearTimeout(me._camMonitor._tlT);
            me._camMonitor.showFrame(me._camMonitor._prev, !me._paused);
        }
    }

    this.processForm = function () {
        /*
            Gathers history form data and submits the appropriate request.
        */

        var me = this;
        var formData = new FormData(me._form[0]);

        var rangePicker = me._form.find("#cam-"+me._camId+"-datetime-range-input").data('daterangepicker');
        var timestamp = new Date(formData.get('datetime')).getTime() / 1000;
        var start = Math.floor(new Date(rangePicker.startDate).getTime() / 1000);
        var end = Math.floor(new Date(rangePicker.endDate).getTime() / 1000);
        var az;

        //reset controls
        var playPause = me._controls.find(".playPause");

        if (playPause.hasClass("play")) {
            playPause.addClass("pause").removeClass("play");
            me._paused = false;
        }

        var navButtons = me._controls.find(".prev, .next");

        navButtons.attr({disabled:false});
        
        if (formData.get('historyType') == 'still') {
            az = me._form.find("#cam-"+me._camId+"-azimuth-select").val();
            az = az == -1 ? false : az;
        } else if (formData.get('historyType') == 'timelapse') {
            az = me._form.find("#cam-"+me._camId+"-azimuth-range-select").val();
            az = az == "-1;-1" ? Array() : az.split(";");
        }

        if (formData.get('historyType') == 'still' && formData.get('imageType') == 'pano') {
            // Single panorama
            me._panorama._paused = true;
            me._panorama.getPanoByTimestamp(timestamp);
            me._camMonitor._container.hide();
            me._panorama._wrap.show();
            me._controls.addClass('history-mode').removeClass('timelapse-mode');
        } else if (formData.get('historyType') == 'timelapse' && formData.get('imageType') == 'pano') {
            // Panorama timelapse
            me._panorama._paused = true;
            me._panorama.getPanoTimelapse(start, end);
            me._camMonitor._container.hide();
            me._panorama._wrap.show();
            me._controls.removeClass('history-mode').addClass('timelapse-mode');
        } else if (formData.get('historyType') == 'still' && formData.get('imageType') == 'frame') {
            // Single still frame
            me._camMonitor.getDataByTimestamp(timestamp, az);
            me._panorama._wrap.hide();
            me._camMonitor._container.show();
            me._controls.addClass('history-mode').removeClass('timelapse-mode');
        } else if (formData.get('historyType') == 'timelapse' && formData.get('imageType') == 'frame') {
            // Frame-by-frame timelapse
            me._camMonitor.getTimelapse(start, end, az);
            me._panorama._wrap.hide();
            me._camMonitor._container.show();
            me._controls.removeClass('history-mode').addClass('timelapse-mode');
        }

        me._overlay = reportOverlay(me._div);
        me._controls.show();
    }

    this.stop = function () {
        /*
            Exit viewing mode and reset components
        */

        var me = this;
        clearTimeout(me._panorama._tlT);
        clearTimeout(me._camMonitor._t);
        clearTimeout(me._camMonitor._tlT);
        me._panorama._paused = false;
        me._panorama.getData();
        me._camMonitor.getData();
        me._panorama._wrap.hide();
        me._camMonitor._container.hide();
        me._controls.hide();
        me._overlay.remove();
    }

    this.toggleAzimuthShown = function (el) {
        /*
            Display the appropriate azimuth selector field for current radio button selections. If selections are not made, hide both.
        */

        var me = this;

        if (el) {
            var histType = me._form.find("input:radio[name=historyType]:checked").val();
            if (el.value == "pano") {
                if (histType == "timelapse") {
                    $("#cam-"+me._camId+"-timelapse-radio")[0].checked = false;                    
                    $("#cam-"+me._camId+"-still-radio")[0].checked = true;
                }
                me._form.find("#cam-"+me._camId+"-azimuth-select").parent().parent().parent().hide();
                me._form.find("#cam-"+me._camId+"-azimuth-range-select").parent().parent().parent().hide();
            } else if (el.value == "frame") {
                if (histType == "still") {
                    me._form.find("#cam-"+me._camId+"-azimuth-range-select").parent().parent().parent().hide();
                    me._form.find("#cam-"+me._camId+"-azimuth-select").parent().parent().parent().show();
                } else if (histType == "timelapse") {
                    me._form.find("#cam-"+me._camId+"-azimuth-select").parent().parent().parent().hide();
                    me._form.find("#cam-"+me._camId+"-azimuth-range-select").parent().parent().parent().show();
                }
            }
        }
    }

    this.toggleDateTimeShown = function (el) {
        /*
            Display the appropriate datetime selector field for current radio button selections. If selections are not made, hide both.
        */
        var me = this;
        
        var imgType = me._form.find("input:radio[name=imageType]:checked").val();

        if (el.value == "timelapse") {
            if (imgType == "pano") {
                $("#cam-"+me._camId+"-pano-radio")[0].checked = false;                    
                $("#cam-"+me._camId+"-frame-radio")[0].checked = true;
            }
            me._form.find("input#cam-"+me._camId+"-datetime-input").parent().parent().hide();
            me._form.find("input#cam-"+me._camId+"-datetime-range-input").parent().parent().show();
        } else if (el.value == "still") {
            me._form.find("input#cam-"+me._camId+"-datetime-input").parent().parent().show();
            me._form.find("input#cam-"+me._camId+"-datetime-range-input").parent().parent().hide();
        } else {
            me._form.find("input#cam-"+me._camId+"-datetime-input").parent().parent().hide();
            me._form.find("input#cam-"+me._camId+"-datetime-range-input").parent().parent().hide();
        }

        me.toggleAzimuthShown(me._form.find("input:radio[name=imageType]:checked")[0]);
    }

    this.toIndex = function(idx, play) {
        /*
            Display the frame at a given index in the active timelapse data
        */

        var me = this;
        var formData = new FormData(me._form[0]);

        if (formData.get("imageType") == "pano") {
            me._panorama.showTimelapseFrame(idx, play);
        } else if (formData.get("imageType") == "frame") {
            me._camMonitor.showFrame(idx, play);
        }
    }

    this.init();
}

function CamMap(camIds, appendTo = $("div#container"), data = null, incidents = null) {
    var _camIds, _data, _parent,
        _mapDiv, _map, _incidents,
        _markers, _icons, _polys, _lines, _firePerimeter,
        _headingLines;

    this.build = function () {
        /*
            Build the map
        */

        var me = this;

        /* 
            So, the Leaflet Builder class requires an id for the div, but I can see a scenario where we might want to have multiple maps associated with a given camera on the same 
            page. Thus, I'm using a randomly generated 6-digit suffix.
        */
        var id = "map-"+Math.floor(Math.random() * 999999);
        me._mapDiv = $("<div>").addClass('cam-map').attr({"id":id});
        me._parent.append(me._mapDiv);

        var center = Array(38.200185, -118.914063);

        // Determine the center of the map by averaging locations of incidents or cameras, whichever is available.
        if (me._incidents.length > 0) {
            me._incidents.forEach(function(el) {
                if (!Array.isArray(el.incicoords)) {
                    el.incicoords = el.incicoords.split(",");
                }

                center[0] += parseFloat((el.incicoords[0] / me._incidents.length).toFixed(6));
                center[1] += parseFloat((el.incicoords[1] / me._incidents.length).toFixed(6));
            });
        } else if (me._camIds.length > 0 && Object.keys(me._data).length > 0) {
            if (window.location.pathname != '/cameras' && window.location.pathname != '/test2') {
                me._camIds.forEach(function(el) {
                    center[0] += me._data[el].camLat / me._camIds.length;
                    center[1] += me._data[el].camLon /  me._camIds.length;
                });
            }
        }

        // Build the map
        me._map = new LeafletBuilder(id, center, 10);
        me._map._map.setMaxZoom();
        if (me._map._baseMaps["Terrain"]) {
            me._map._baseMaps["Terrain"].addTo(me._map._map); // This is for the Stamen map layer
        }
        me._map._map.createPane('viewsheds');
        me._map._map.createPane('targets');
        me._map._map.createPane('offline-cams');
        me._map._map.createPane('online-cams');
        me._map._map.createPane('heading-lines');
        me.updateData(me._data);

        // If there are incidents, make some invisible markers for each one and zoom the map out so that all are visible
        me.recenterMap();

        // Get the fire perimeter map
        //me.getFireMap();
    }

	this.buildIcons = function() {
		/*	helper function to build the icons for the thing
		 */
		var me = this;
		var LeafIcon = L.Icon.extend({
			options: {
				iconSize:		[29, 27],
				iconAnchor:		[15, 13],
				popupAnchor:	[-3, -3]
			}
		});

		var url = "img/";
		me._icons = [];
		me._icons.none = new LeafIcon({ iconUrl: url + "Weathernode_none.svg" });
		me._icons.blue = new LeafIcon({ iconUrl: url + "Weathernode_blue.svg" });
		me._icons.green = new LeafIcon({ iconUrl: url + "Weathernode_green.svg" });
		me._icons.yellow = new LeafIcon({ iconUrl: url + "Weathernode_yellow.svg" });
		me._icons.orange = new LeafIcon({ iconUrl: url + "Weathernode_orange.svg" });
		me._icons.red = new LeafIcon({ iconUrl: url + "Weathernode_red.svg" });
		me._icons.darkred = new LeafIcon({ iconUrl: url + "Weathernode_darkred.svg" });
		me._icons.humid0 = new LeafIcon({ iconUrl: url + "Weathernode_humid0.svg" });
		me._icons.humid25 = new LeafIcon({ iconUrl: url + "Weathernode_humid25.svg" });
		me._icons.humid50 = new LeafIcon({ iconUrl: url + "Weathernode_humid50.svg" });
		me._icons.humid75 = new LeafIcon({ iconUrl: url + "Weathernode_humid75.svg" });
		me._icons.humid100 = new LeafIcon({ iconUrl: url + "Weathernode_humid100.svg" });
		me._icons.temp0 = new LeafIcon({ iconUrl: url + "Weathernode_temp0.svg" });
		me._icons.temp25 = new LeafIcon({ iconUrl: url + "Weathernode_temp25.svg" });
		me._icons.temp50 = new LeafIcon({ iconUrl: url + "Weathernode_temp50.svg" });
		me._icons.temp75 = new LeafIcon({ iconUrl: url + "Weathernode_temp75.svg" });
		me._icons.temp100 = new LeafIcon({ iconUrl: url + "Weathernode_temp100.svg" });
		me._icons.alertOrange = new LeafIcon({ iconUrl: url + "orange-alert.svg" });
		me._icons.alertRed = new LeafIcon({ iconUrl: url + "red-alert.svg" });
		me._icons.alertOffline = new LeafIcon({ iconUrl: url + "offline-alert.svg" });
	}
    
    this.clearMap = function(removeFireMap = false) {
        var me = this;

        if (removeFireMap && me._firePerimeter) {
            me._firePerimeter.remove();
            me._firePerimeter = null;
        }

        // Remove current polygons & lines
        me._markers.forEach((m) => {
            m.remove();
        });
        me._polys.forEach((p) => {
            p.remove();
        });
        me._lines.forEach((l) => {
            l.remove();
        });

        // Reset 
        me._markers = [];
        me._polys = [];
        me._lines = [];
    }

    this.getFireMap = function(inciName = false) {
        /*
            Get a fire perimeter map from the CA Forestry Dept.
            Visible here: https://gis.data.cnra.ca.gov/datasets/f72ebe741e3b4f0db376b4e765728339_0/explore?location=39.998757%2C-120.964404%2C8.21
            
            Links will probably need to be updated each year.

            If incidents are defined for this map, get the perimeters for those. If not, get all perimeters on the map.
        */

        var me = this;

        if (inciName) {
            if (me._firePerimeter) {
                me._firePerimeter.remove();
            }
            me._firePerimeter = me._map._L.esri.featureLayer({
                url: "https://services3.arcgis.com/T4QMspbfLg3qTGWY/ArcGIS/rest/services/CY_WildlandFire_Perimeters_ToDate/FeatureServer/0",
                style: function () {
                    return { color: "#e60000", weight: 1};
                },
                where: "poly_incidentName = '"+inciName.toLowerCase()+"'"
            });

            me._firePerimeter.addTo(me._map._map);

            me._firePerimeter.on("load", () => {
                if (me._data) {
                    me.updateData(me._data);
                } else {
                    me.redraw();
                }
            });                
        } else if (!me._firePerimeter && me._incidents.length > 0) {
            // If fire perimeter is not yet set, we need to define the query
            var inciSearch = "";
            me._incidents.forEach(function(el) {
                if (inciSearch != "") {
                    inciSearch += " or ";
                }
                inciSearch += "poly_incidentName = '"+el.inciname.toLowerCase()+"'";
            });

            // Query the map (update this link if not working)
            me._firePerimeter = me._map._L.esri.featureLayer({
                url: "https://services3.arcgis.com/T4QMspbfLg3qTGWY/ArcGIS/rest/services/CY_WildlandFire_Perimeters_ToDate/FeatureServer/0",
                style: function () {
                    return { color: "#e60000", weight: 1};
                },
                where: inciSearch
            });

            me._firePerimeter.addTo(me._map._map)

            me._firePerimeter.on("load", () => {
                if (me._data) {
                    me.updateData(me._data);
                } else {
                    me.redraw();
                }
            }).on("createfeature", function () {
                me.recenterMap();
            });
        } else if (me._firePerimeter) {
            // If fire perimeter is set, we just need to remove it and add it back to the map. This will re-run the query.
            me._firePerimeter.remove();
            me._firePerimeter.addTo(me._map._map);
        }

        // Set a timeout to refresh the map
        var t = setTimeout(() => {
            me.getFireMap();
        }, 3600000);
    }

    this.getIncidents = function () {
        /*
            Get a list of active incidents associated with the camera ID's assigned to this map
        */
        var me = this;

        var success = function (result) {
            if (result.code == 1) {
                me._incidents = Object.values(result.data);
                if (!me._map) {
                    me.build();
                }
                if (me._incidents) {
                    me.getFireMap();
                }
                me.recenterMap();
            }
        }
        var finish = function () {
        }
        var fail = function (result) {
            if (result.err == "No incidents found" && me._data && !me._map) {
                me.build();
            }
        }

        var query = new AjaxQuery("/api/incidents", "GET", {camIds: me._camIds}, success, finish, fail);
    }

    this.init = function () {
        var me = this;

        me._camIds = camIds;
        me._parent = appendTo;
        me._data = data ?? Array();
        me._incidents = incidents ?? Array();
        me._markers = Array();
        me._icons = Array()
        me._polys = Array();
        me._lines = Array();
        me._headingLines = Array();
        me.buildIcons();

        if (me._incidents.length == 0 && window.location.pathname != '/cameras' && window.location.pathname != '/test2') {
            me.getIncidents();
        } else if (window.location.pathname != '/cameras' && window.location.pathname != '/test2') {
            me.build();
            me.getFireMap();
        } else {
            me.build();
        }
    }

    this.recenterMap = function () {
        var me = this;

        var markers = Array();
        var bounds = L.latLngBounds([]);

        if (me._incidents.length > 0) {
            me._incidents.forEach(function(el) {
                if (el.incibounds) {
                    bounds.extend(L.latLngBounds(el.incibounds))
                }
            });
        }

        if (Object.keys(me._data).length > 0) {
            Object.values(me._data).forEach(function(el) {
                if (me._camIds.includes(el.camId)) {
                    markers.push(L.marker([el.camLat, el.camLon]));
                }
            });
        }

        if (markers.length > 0) {
            markers = new L.featureGroup(markers);
            bounds.extend(markers.getBounds());
        }

        if (me._polys.length > 0) {
            me._polys.forEach(function(p) {
                bounds.extend(p.getBounds());
            });
        } 

        if (me._firePerimeter) {
            me._firePerimeter.eachFeature(function(layer) {
                var layerBounds = layer.getBounds();
                var mapBounds = me._map._map.getBounds();
                if (bounds.overlaps(layerBounds) || bounds.overlaps(mapBounds)) {
                    bounds.extend(layerBounds);
                }
            });
        }

        if (!bounds.isValid) {
            if (me._incidents.length > 0) {
                me._incidents.forEach(function(el) {
                    markers.push(L.marker([el.incicoords[0],el.incicoords[1]]));
                });
            }
        }



        if (bounds.isValid()) {
            me._map._map.fitBounds(bounds, {maxZoom:10});
        }
    }

    this.redraw = function () {
        var me = this;

        me._markers.forEach((m) => {
            m.remove();
            m.addTo(me._map._map);
        });
        me._polys.forEach((p) => {
            p.remove();
            p.addTo(me._map._map);
        });
        me._lines.forEach((l) => {
            l.remove();
            l.addTo(me._map._map);
        });
    }

    this.removeFromArrays = function (poly, line) {
        var me = this;

        let polyIdx = me._polys.findIndex((el) => el == poly);
        let lineIdx = me._lines.findIndex((el) => el == line);

        me._polys.splice(polyIdx, 1);
        me._lines.splice(lineIdx, 1);
    }

    this.updateData = function (data) {
        /*
            Update the polygons & lines shown on the map
        */
        var me = this;
        var recenterFlag = false;

        if (data) {
            if ((me._data.length ?? Object.keys(me._data).length) != Object.keys(data).length) {
                recenterFlag = true;
            }

            me._data = data;
        } else {
            return false;
        }

        if (!me._map) {
            me.build();
        }

        //if (window.location.pathname == '/cameras') {
            var vals = Object.values(me._data);
            var colors = ['#6a3d9a','#1f78b4','#cab2d6','#a6cee3','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00',]; // Colors for polygons, change as needed for visibility

            vals.forEach(function(v) {
                var popupText = '';
                let colo = Array();

                if (!isNaN(v.camName.slice(-1)) || (globals.poles.indexOf(v.camName.substr(v.camName.lastIndexOf('_') + 1)) != -1)) {
                    let cam1basename = v.camName.substr(0, v.camName.lastIndexOf('_'));
                    let siteCams = vals.filter(function(v2) {
                        let cam2basename = v2.camName.substr(0, v2.camName.lastIndexOf('_'));

                        if (cam1basename == cam2basename) {
                            return true;
                        } else {
                            return false;
                        }
                    });

                    siteCams.sort(function(a, b) {
                        let i1 = parseInt(a.camName.slice(a.camName.lastIndexOf('_')));
                        let i2 = parseInt(b.camName.slice(b.camName.lastIndexOf('_')));

                        return i1 - i2;
                    });

                    siteCams.forEach(function(v2, i) {
                        if (i > 0) {
                            popupText += '<br>';
                        }
                        colo.push(v2.camId);
                        popupText += '<a href="/cam-console/' + v2.camId + '">' + v2.camName.replaceAll(/_/g, " ") + '</a>';
                    })
                } else {
                    popupText = '<a href="/cam-console/' + v.camId + '">' + v.camName.replaceAll(/_/g, " ") + '</a>'
                }

                
                popupText += '<br><span>ISP:&nbsp;' + v.camIsp + '</span>';
                popupText += '<br><span>Sponsor:&nbsp;' + v.camSponsor + '</span>';
                popupText += '<br><span>County:&nbsp;' + v.camCounty + '</span>';
                popupText += '<br><span>Region:&nbsp;' + v.camRegion + '</span>';

                if (me._markers[v.camId]) {
                    me._markers[v.camId].setLatLng([v.camLat, v.camLon]);
                    me._markers[v.camId].setRotationAngle((v.camOffline ? 0 : adjustDegrees(Math.round(v.camAzimuth) + 180)));
                } else if (v.camActive || me._camIds.includes(v.camId)) {
                    me._markers[v.camId] = me._map._L.marker(
                        [v.camLat, v.camLon],
                        {
                            "rotationAngle":(v.camOffline ? 0 : adjustDegrees(Math.round(v.camAzimuth) + 180)),
                            "icon": (v.camOffline ? me._icons.alertOffline : me._icons.blue),
                            "pane": (v.camOffline ? "offline-cams" : "online-cams"),
                            "colo": colo
                        }
                    ).addTo(me._map._map).bindPopup(popupText)
                }
                
                if (me._camIds.includes(v.camId) && !v.camOffline) {
                    if (me._polys[v.camId] && me._lines[v.camId]) {
                        me._polys[v.camId].setLatLngs(v.camPolygon);
                        me._lines[v.camId].setLatLngs(v.camHeadingLine);
                    } else {
                        var i = me._camIds.indexOf(v.camId);
                        me._polys[v.camId] = L.polygon(v.camPolygon, {color:colors[i % colors.length],stroke: false,fillOpacity:0.4, 'pane':'viewsheds'}).addTo(me._map._map).bindPopup('<a href="/cam-console/' + v.camId + '">' + v.camName.replaceAll(/_/g, " ") + '</a>');
                        me._lines[v.camId] = L.polygon(v.camHeadingLine, {color:colors[i % colors.length], 'pane':'targets'}).addTo(me._map._map);
                        me._headingLines[v.camId] = L.polyline(v.camHeadingLine, {color:'#e31a1c', 'pane':'heading-lines'});
                    }
                }
            });
        //} else {
        /*if (window.location.href != '/cameras') {
            me.clearMap();

            // Remove current polygons & lines

            var i = 0;

            // Create new polygons & lines and add them to map and arrays
            if (data) {
                Object.values(me._data).forEach(function(v) {
                    if (me._camIds.includes(v.camId)) {
                        i = me._camIds.indexOf(v.camId);
                        me._polys.push(L.polygon(v.camPolygon, {color:colors[i % colors.length],stroke: false,fillOpacity:0.4}).addTo(me._map._map).bindPopup('<a href="/cam-console/' + v.camId + '">' + v.camName.replaceAll(/_/g, " ") + '</a>'));
                        me._polys.push(L.polygon(v.camHeadingLine, {color:colors[i % colors.length]}).addTo(me._map._map));
                    }
                })
            }
        }*/

        if (recenterFlag) {
            me.recenterMap();
        }
    }

    this.updateHeadingLine = function(camId, azimuth) {
        var me = this;

        let data = me._data[camId];

        me._headingLines[camId].setLatLngs([[data.camLat, data.camLon], getDistantPoint(data.camLat, data.camLon, azimuth, 35)]);
    }

    this.init();
}

/*
    Displays a screenshot from a camera and a map showing the corresponding viewshed
*/

function CamMonitor(camId, appendTo = $("div#container")) {
    var _output, _refreshRate, _t, _paused;
    var _container, _camId, _data, _siteCoords, 
        _screenshots, _map, _moveLog;
    var _timelapseData, _tlT, _lapsePaused, _controls;
    var _prev, _next;
    var _camControl;

    this.build = function() {
        /*
            Build the things
        */

        var me = this;

        me._container = $("<div>").attr("id", "console-"+me._camId).addClass("cam-monitor");

        
        me._output.append(me._container);

        me._map = new CamMap([me._camId.toString()], me._container, me._data);
        me._screenshots.push(new CamScreenshot([me._camId], me._map, me._container, me._data, '#6a3d9a'));
         
    }

    this.getData = function() {
        /*
            Get the data
        */
        var me = this;

        var success = function (result) {
            if (result.code == 1) {
                if (me._data && me._data[me._camId]) {
                    var temp = me._data[me._camId];
                }

                me._data = result.data;

                if (temp != undefined && me._data[me._camId].camScreenshotTimestamp < temp.camScreenshotTimestamp) {
                    me._data[me._camId] = temp;
                }

                if (!me._siteCoords && temp != undefined) {
                    me._siteCoords = [me._data[me._camId].camLat, me._data[me._camId].camLon];
                }
            }

            me._t = setTimeout(() => {
                me.getData();
            }, me._refreshRate);

            if (me._data[me._camId]) {
                me.updateData();
            }
        }
        var finish = function () {

        }
        var fail = function() {

        }

        if (!me._paused) {
            var query = new AjaxQuery("/api/getCameraData", "GET", {cameraIds: "both"}, success, finish, fail);
        }
    }

     

    this.getDataById = function(dataId) {
        /*
            Get data for a particular camera log
        */
        var me = this;

        var success = function(result) {
            if (result.code == 1) {
                clearTimeout(me._t);
                me._data = result.data;
                me.updateData();
                //console.log(result);
            }
        }
        var finish = function() {

        }
        var fail = function() {

        }

        var query = new AjaxQuery("/api/cameraLog/byId", "GET", {cmlgId: dataId, azimuth: me._data[me._camId].cmlgInfo.azimuth ?? null}, success, finish, fail);
    }

     

    this.init = function() {
        var me = this;

        me._camId = camId
        me._refreshRate = 5000;
         
        me._output = appendTo;
        me._screenshots = Array();

        me.build();
        me.getData();
    }
    
     
    
    this.updateData = function() {
        /*
            update the displayed data
        */

        var me = this;

        if (!me._container) {
            me.build();
        }

        if (me._screenshots.length > 0) {
            me._screenshots.forEach(function(s) {
                if (me._data[s._camId].camScreenshot && !s._timelapseMode) {
                    s.updateData(me._data);
                } else if (me._data[s._camId].camScreenshot) {
                    s._tempData = me._data;
                }
            });
        }

        if (me._map) {
            //me._map.updateData(me._data);
        }
    }

    this.init();
}

function CamMoveLog(camId, parent) {
    var _camId;
    var _parent, _div, _tableDiv, _table, _data, _camControl;

    this.build = function() {
        var me = this;

        me._tableDiv = $("<div>").addClass("report-wrap");
        me._div = $("<div>").addClass("report-wrap cam-move-log").append($("<h4>").html("Camera Movement Log"), me._tableDiv);
        me._parent.append(me._div);

        me.getData();
    }

    this.buildTable = function() {
        var me = this;
		me._div.html();

		var d = new Date();
		var time = (d.getTime() / 1000);
		
		me._table = new BuildTable(
			me._tableDiv,
			me._data,
			Array("User Name", "Message", "Phone #", "Pan/Tilt/Zoom", "Time Moved", "Priority"),
			Array(
				{ "index":"username", "sort":"str", "format":function(idx) { return idx } },
				{ "index":"cchlmessage" },
				{ "index":"cchlphone", "sort":"int", "format":function(idx) { return formatPhone(idx) }},
				{ "index":"cchlazimuth", "sort":"int", "format":function(idx, row) {
                    let span = $("<span>").addClass("cam-log-pos-span").html(row.cchlazimuth+'&deg; T/'+row.cchlelevation+'&deg;/'+(Math.round(row.cchlzoom/10909 * 1000)/10)+"%")
                    
                    span.on("click", function() {
                        me._camControl.sendCameraMoveRequest(row.cchlazimuth, row.cchlelevation, row.cchlzoom)
                    })

                    return span;
                } },
				{ "index":"cchltimestamp", "sort":"int", "format":function(idx, row) { 
                    var timestamp = new Date(idx * 1000);
                    return timestamp.toLocaleDateString('en-US', {timeZone:'America/Los_Angeles'})+" "+timestamp.toLocaleTimeString('en-US', {hour12: false, timeZone:'America/Los_Angeles'})+" PT" } },
				{ "index":"cchlhighpriority", "sort":"int", "format":function(idx) { return '<span class="large badge badge-' + (idx ? "danger" : "secondary") + '">' + (idx ? "High" : "Low") + "</span>"}}
			),
			null,
			null,
			null,
			200,
            false
		);
    }

    this.getData = function() {
		var me = this;
		AjaxQuery("/api/cameraMoveLog", "GET", {camId:me._camId}, function(result) {
			me._data = result.data;
			me.buildTable();
			var t = setTimeout(function() {
				me.getData();
			}, 20000);
		});
	}

    this.init = function() {
        var me = this;

        me._camId = camId;
        me._parent = parent;

        me.build();
    }

    this.init();
}

/*
    Displays a patchwork panorama from a given camera (can optionally display historical data and timelapse)
*/

function CamPanorama(camId, appendTo = $("div#container"), map = false) {
    var _camId, _wrap, _pano, _data, _historyData, _timelapseData, _i, _tlT, _awaitT, _controls, _output, _refreshAt, _paused,
        _prev, _next,
        _camCoords, _camControl, _dragBox, _map, _headingBox;

    this.awaitPano = function(panoId, i = 0) {
        var me = this;

        me.getData();

        let t = setTimeout(function() {
            let currentPanoId = Array.isArray(me._data) && me._data.length == 0 ? 0 : Object.values(Object.values(me._data)[0])[0].pano_id;

            if (currentPanoId >= panoId) {
                return true;
            } else if (i < 10) {
                me._awaitT = setTimeout(function() {
                    me.awaitPano(panoId, i++);
                }, 30000);
            } else {
                alert("Unfortunately, your panorama request has failed. Please try again or contact the help desk.");
            }
        }, 200);
    }

    this.buildPanoWrap = function() {
        /*
            Build the html for the pano display area
        */

        var me = this;
        var timestamp = Object.values(Object.values(me._data)[0])[0].pano_finished;
        me._refreshAt = parseInt(timestamp) + 600;
        var camName = "";
        var id = "cam-" + me._camId + "-pano";

        var timestamp = new Date(timestamp * 1000);

        me._headingBox = $("<div>").addClass('pano-overlay heading-overlay').append(
            $('<p>').html("X: ").append($("<span>").addClass('az'), "&deg; T"),
            $('<p>').html("Y: ").append($("<span>").addClass('el'), "&deg;")
        );

        var panoWrap = $("<div>").addClass("pano-close-wrap").append(
            me._headingBox,
            $("<div>").addClass("pano-overlay timestamp-wrap").append($("<div>").addClass("timestamp badge badge-light").html(timestamp.toLocaleDateString('en-US', {timeZone:'America/Los_Angeles'})+" "+timestamp.toLocaleTimeString('en-US', {timeZone:'America/Los_Angeles', hour: '2-digit', minute: '2-digit', hourCycle: "h23"})+" PT"),
            $("<button>").attr({
                "type":"button",
                "class":"btn btn-light timelapseControls expandContract expand",
                "title":"Expand"
            }).on("click", function(e) {
                var btn = $(e.currentTarget);

                btn.toggleClass('expand contract');
                btn.parent().parent().find('.pano').toggleClass('expanded');
            }) 
        ));
        /*
            This is the code I used to do timelapse previously. This is all handled by the CamHistory class now, and I don't anticipate needing it here again.
            If it's 2023 and this is still commented out, feel free to delete it.

        var timeInput = $("<input>")
                            .attr({"type": "text",
                                "name": "datetime",
                                "class": "form-control pano-time",
                                "data-cam-id": me._camId
                                }).daterangepicker({
                                    "autoApply": true,
                                    "autoUpdateInput":true,
                                    "singleDatePicker": true,
                                    "maxDate": moment.unix(timestamp),
                                    "timePicker": true,
                                    "locale": {
                                        "format": "MM/DD/YYYY hh:mm A",
                                        "monthNames": [
                                            "January",
                                            "February",
                                            "March",
                                            "April",
                                            "May",
                                            "June",
                                            "July",
                                            "August",
                                            "September",
                                            "October",
                                            "November",
                                            "December"
                                        ]
                                    },
                                    "startDate": moment.unix(timestamp),
                                    "endDate": moment.unix(timestamp)
                                }).on('apply.daterangepicker', (ev, picker) => {
                                    var searchTime = new Date(picker.startDate).getTime() / 1000;
                                    me.getPanoByTimestamp(searchTime);
                                });
        var form = $("<div>")
            .addClass("panoSearch")
            .append(
                $("<button>").attr({
                    "type":"button",
                    "class":"btn btn-dark timelapseControls playPause pause",
                    "title":"Pause"
                }).on("click", (e) => {
                    var target = $(e.currentTarget);
                    if (target.hasClass("pause")) {
                        target.removeClass("pause");
                        target.addClass("play");
                        target.attr("title","Play");
                        clearTimeout(me._tlT);
                    } else if (target.hasClass("play")) {
                        target.removeClass("play");
                        target.addClass("pause");
                        target.attr("title","Pause");
                        var idx = target.parents(".panoSearch").find('.next').attr('data-timelapse-index');
                        me.showTimelapseFrame(idx);
                    }
                }),
                $("<button>").attr({
                    "type":"button",
                    "class":"btn btn-dark historyControls prev",
                    "title": "Previous"
                }).on("click", (e) => {
                    if (me._wrap.hasClass("history-mode")) {
                        var panoId = $(e.currentTarget).attr('data-pano-id');
                        me.getPanoById(panoId);
                    } else if (me._wrap.hasClass("timelapse-mode")) {
                        var idx = $(e.currentTarget).attr('data-timelapse-index');
                        me.showTimelapseFrame(idx, false);
                    }
                }),
                $("<input>").attr({
                    "type":"range",
                    "class":"timelapseControls lapse-slider",
                    "min":0,
                    "max":0,
                    "value":0
                }).on("mousedown", function(e) {
                    var playPause = me._pano.parents('.pano-display-wrap').find('.playPause');
                    if (playPause.hasClass('pause')) {
                        playPause.click();
                        $(e.currentTarget).attr("data-was-paused", false);
                    } else {
                        $(e.currentTarget).attr("data-was-paused", true);
                    }
                }).on("input", function(e) {
                    var idx = $(e.currentTarget).val();
                    me.showTimelapseFrame(idx, false);
                }).on("change", function(e) {
                    var idx = $(e.currentTarget).val();
                    var play = $(e.currentTarget).attr('data-was-paused') == 'false';
                    me.showTimelapseFrame(idx, play);

                    if (play) {
                        me._pano.parents('.pano-display-wrap').find('.playPause').removeClass('play').addClass('pause').attr({"title": "Pause", 'data-was-paused':null});
                    }
                }),
                $("<button>").attr({
                    "type":"button",
                    "class":"btn btn-dark historyControls next",
                    "title": "Next"
                }).on("click", (e) => {
                    if (me._wrap.hasClass("history-mode")) {
                        var panoId = $(e.currentTarget).attr('data-pano-id');
                        me.getPanoById(panoId);
                    } else if (me._wrap.hasClass("timelapse-mode")) {
                        var idx = $(e.currentTarget).attr('data-timelapse-index');
                        me.showTimelapseFrame(idx, false);
                    }
                }),
                $("<button>").attr({
                    "type":"button",
                    "class":"btn btn-dark historyControls goToCurrent",
                    "title": "Go to Current"
                }).on("click", function() {
                    me.goToCurrent();
                }),
                $("<input>")
                    .attr({"type": "hidden",
                        "name": "camId",
                        "value": me._camId}),
                timeInput,
            );

        var timelapseBtn = $("<button>").addClass("timelapse-range btn btn-dark").attr({"data-cam-id":me._camId}).html("Timelapse")
                            .daterangepicker({
                                    "autoApply": true,
                                    "autoUpdateInput":true,
                                    "maxDate": moment.unix(timestamp),
                                    "timePicker": true,
                                    "opens":'left',
                                    "locale": {
                                        "format": "MM/DD/YYYY hh:mm A",
                                        "monthNames": [
                                            "January",
                                            "February",
                                            "March",
                                            "April",
                                            "May",
                                            "June",
                                            "July",
                                            "August",
                                            "September",
                                            "October",
                                            "November",
                                            "December"
                                        ]
                                    },
                                    "startDate": moment.unix(timestamp),
                                    "endDate": moment.unix(timestamp)
                                }).on('apply.daterangepicker', (ev, picker) => {
                                    var start = new Date(picker.startDate).getTime() / 1000;
                                    var end = new Date(picker.endDate).getTime() / 1000;
                                    me.getPanoTimelapse(start, end);
                                });

        form.append(timelapseBtn);*/
        //var testDate = new Date($("form#searchTest input[name='datetime']").val())
        //testDate.getTime()/1000

        // Again, old, likely irrelevant code. Delete it if it's still here after a while
        for(var i in me._data) {
            if(camName == "") {
                camName = me._data[i][0].cam_name;
                //me._wrap.append($("<h3/>").html(camName.replace(/\_/g, " ")));
                            }
        }

        me.fillPanoWithData(me._data);
        panoWrap.append(me._pano);
        me._wrap.append(panoWrap);

        me._wrap.on('mouseenter', function(e) {
            me._headingBox.show();
            me._map._headingLines[me._camId].addTo(me._map._map._map);
        }).on('mouseleave', function(e) {
            me._headingBox.hide();
            me._map._headingLines[me._camId].remove();
        }).on('mouseover mousemove', function(e) {
            let x = e.offsetX, y = e.offsetY;
            let parentPos = $(e.target).parent().position();
            let quarterImg = e.target.width/4;

            let left = parentPos.left + e.offsetX - quarterImg;
            let top = parentPos.top + e.offsetY;

            if ($(this).width() - left < me._headingBox.outerWidth()) {
                left -= me._headingBox.outerWidth();
            }
            if ($(this).height() - top < me._headingBox.outerHeight()) {
                top -= me._headingBox.outerHeight();
            }

            /*me._headingBox.css({
                "left": left + 'px',
                "top": top + 'px'
            })*/
        });
        
            }

    this.fillPanoWithData = function(data) {
        /*
            Populate the div with patchwork of images
        */

        var me = this;

        me._pano.html("");

        let heightModifier;

        if (!me._camCoords) {
            let sampData = Object.values(Object.values(me._data)[0])[0];

            me._camCoords = {"lat": sampData.cam_lat, "lon": sampData.cam_lon};
        }

        switch (parseInt(Object.values(Object.values(me._data)[0])[0].camtyp_id)) {
            case 1:
            case 2:
            case 3:
            case 4:
                heightModifier = 0.8;
                break;
            case 6:
                heightModifier = 0.6006;
                break;
            case 5:
            default:
                heightModifier = 0.5625;
                break;
        }

        for(var i in data) {
            var panoRow = $("<div/>").addClass("pano-row");
            for(var j in data[i]) {
                var row = data[i][j];
                var xSplit = (row.camtyp_max_fov / 2);
                var ySplit = (xSplit * heightModifier);
                xSplit = (row.camtyp_class == 'axis' ? xSplit/2 : xSplit);
                var tc = (parseFloat(row.cmlg_cam_elevation) + ySplit).toFixed(1);
                var bc = (parseFloat(row.cmlg_cam_elevation) - ySplit).toFixed(1);
                var lc = (parseFloat(row.cmlg_cam_azimuth) - xSplit).toFixed(1);
                var rc = (parseFloat(row.cmlg_cam_azimuth) + xSplit).toFixed(1);

                var img = $("<img/>")
                    .attr({
                        "src": s3base+me.screenshotUrl(row),
                        "alt": "flir camera feed",
                    })
                    .data({
                        "camId": row.cam_id,
                        "camAz": row.cmlg_cam_azimuth,
                        "camElev": row.cmlg_cam_elevation,
                        "camWidth": row.camtyp_max_fov,
                        "camType": row.camtyp_id,
                        "camTc": tc,
                        "camBc": bc,
                        "camLc": lc,
                        "camRc": rc,
                    }).on("load", (e) => {
                                    var img = $(e.target);
                                    var wrap = img.parent();
                                    var t = setTimeout(function() {
                                        wrap.css("width", "auto");
                                        wrap.css("width", row.camtyp_class == 'axis' ? img.outerWidth()/2 : img.outerWidth());
                                    }, 500);
                    }).on("mouseover mousemove", function(e) {
                        var data = $(this).data();
                        let coords = getCoordsFromImageClickEvent(e.originalEvent, data.camAz, data.camElev, data.camWidth, data.camType);

                        me._headingBox.find('span.az').html(adjustDegrees(coords.xAdj).toFixed(1));
                        me._headingBox.find('span.el').html(coords.yAdj);

                        me._map.updateHeadingLine(me._camId, coords.xAdj);
                    })
                
                var imgWrap = $("<div/>")
                    .addClass("pano-img-wrap")
                    .append(img)
                    /*.append($("<div/>").addClass("pos tc").append($("<p/>").html('Y: ' + tc)))
                    .append($("<div/>").addClass("pos bc").append($("<p/>").html('Y: ' + bc)))
                    .append($("<div/>").addClass("pos lc").append($("<p/>").html('X: ' + parseFloat(lc < 360 ? lc : lc - 360).toFixed(1))))
					.append($("<div/>").addClass("pos rc").append($("<p/>").html('X: ' + parseFloat(rc < 360 ? rc : rc - 360).toFixed(1))))*/

                if (row.camtyp_class == 'axis') imgWrap.css({"overflow":"hidden"})
                
                panoRow.append(imgWrap);
            }

            me._pano.append(panoRow);
        }
    }

    this.getCamId = function(camData) {
        /* 
            Get the cam ID from the data (It's buried pretty deep into the log, so drill in and find it)
        */

        for(var i in camData) {
            for(var j in camData[i]) {
                return camData[i][j].cam_id;
            }
        }
    }

    this.getData = function() {
        /*
            Get the list of images for the latest pano
        */

        var me = this;
        var get = new AjaxQuery('api/panoramas/list', 'GET',
            {"camId":me._camId},
            function(result) {
                if(result.code == 0 || result.err != '') {
                    //
                } else if(result.code == 1) {
                    if (Object.keys(me._data).length > 0) {
                        var curTimestamp = Object.values(Object.values(me._data)[0])[0].pano_finished;
                        var newTimestamp = Object.values(Object.values(result.data)[0])[0].pano_finished;
                    }

                    if (curTimestamp != newTimestamp || Object.keys(me._data).length == 0) {
                        me._data = result.data;
                        me.updatePreview();

                        clearTimeout(me._i);
                        me.setupTimer();
                    }
                }
            }
        )
    }

    this.getOldestTimestamp = function() {
        /*
            Get the timestamp of the oldest panorama for this camera (to limit the datetime form element) This will probably need to get moved to CamHistory
        */

        var me = this;
        var history = new AjaxQuery('api/panoramas/list/history', 'GET',
            {"camId":me._camId},
            function(result) {
                if(result.code == 0 || result.err != '') {
                    //
                } else if(result.code == 1) {
                    //me.setSearchMin(result.data[me._camId]);
                }
            }
        )
    }

    


this.screenshotUrl = function(panoFrameData) {
    var me = this;
    var timestamp = new Date(panoFrameData['pano_finished'] * 1000);
    var formattedTimestamp = timestamp.toISOString().slice(0,10).replaceAll('-','/');
    var prefix = "/data/thumb/"+panoFrameData['cam_id']+"/"+formattedTimestamp+"/"
    return prefix+panoFrameData['cmlg_img_name'];
}

    this.init = function() {
        var me = this;
        me._camId = camId;
        me._data = Array();
        me._output = appendTo;
        me._timelapseData = Array();
        me._dragBox = false;
        me._map = map;

        me.setupTimer();
        
        me._wrap = $("<div>").addClass("pano-display-wrap").append(
                    );
        me._output.append(me._wrap);
        
        var id = "cam-" + me._camId + "-pano";
        me._pano = $("<div>")
            .addClass("pano")
            .attr("id", id)
            .on("mousewheel", function(e) {
                scrollHorizontally(e, id);
            })

        this.getData();

        window.addEventListener('resize', function() {
            me.updatePanoWrap(me._data);
        })
    }

    this.runClock = function() {
        /*
            Runs every second. Check if it is time to update the panorama. If the next pano is more than 16 minutes past due, only run this every 5 minutes.
        */

        return;

        var me = this;
        var d = new Date();
        var curMin = d.getMinutes();
        var curSec = d.getTime() / 1000;
        
        /*var countdown = me._refreshAt - curSec;

        var countdownStr;

        if (countdown > 0) {
            countdownStr = Math.floor(countdown / 60) + ":" + Math.floor(countdown % 60).toString().padStart(2, '0');
        } else {
            countdownStr = "0:00";
        }

        me._wrap.find('.countdown').html(countdownStr);*/

        if(curSec >= me._refreshAt && !me._paused) {
            if (curSec - me._refreshAt > 60) {
                clearInterval(me._i);
                me._i = setInterval(function() {
                    me.runClock();
                }, 10000);
            } else if (me._i > 1) {
                clearInterval(me._i);
                me._i = setInterval(function() {
                    me.runClock();
                }, 1000);
            }
            this.getData();
        }
    }


    this.setSearchMin = function(oldest) {
        /*
            Set the minimum datetime for historical data (will be migrated to CamHistory eventually)
        */
        var me = this;
        var searchField = $("input.pano-time");
        var timelapseBtn = $("button.timelapse-range");

        searchField.data("daterangepicker").minDate = moment.unix(oldest);
        timelapseBtn.data("daterangepicker").minDate = moment.unix(oldest);
    }

    this.setupTimer = function() {
        /*
            Set the update clock
        */

        return;

        var me = this;

        me._i = setInterval(function() {
            me.runClock();
        }, 1000);
    }

    this.updatePanoWrap = function(data, search = false) {
        /*
            Update the patchwork panorama with new data
        */

        var me = this;
        var panoLeft = me._pano.scrollLeft();
        var timestamp = Object.values(Object.values(data)[0])[0].pano_finished;
        
        if (!search) {
            me._refreshAt = parseInt(timestamp) + 600;
        }

        
        if (!me._pano.hasClass("paused") || search) {
            me.fillPanoWithData(data);

            function scrollLeft(i = 0) {
                me._pano.scrollLeft(panoLeft);

                if (me._pano.scrollLeft() == 0 && i < 10) {
                    var t = setTimeout(function() {
                        scrollLeft(i+1);
                    }, 1500)
                }
            }

            if (panoLeft != 0) {
                var t = setTimeout(function() {
                    scrollLeft();
                }, 1500);
            }
        }
    }

    this.updatePreview = function() {
        /*
            Build/update the pano wrap
        */

        var me = this;
        if(me._pano.html() == "") {
            me.buildPanoWrap(me._data, me._camId);
        } else {
            me.updatePanoWrap(me._data);
        }
    }

    this.init();
}

function CamScreenshot (camId, map = null, appendTo = $("div#container"), data = null, color = null, link = false) {
    var _camId, _parent, _screenshotDiv, _borderColor, _screenshot, _timestampDiv, _linked, _map;
    var _data, _tempData;
    var _poly, _line;
    var _t, _streamButton, _fullscreenButton, _isFullscreen, _zoomSlider, _zoomChanged;
    var _camControl, _headingBox, _dragBox;
    var _timelapseMode, _timelapseData, _timelapseControls, _tLapse, _paused, _wasPaused;
    var _prevFrame, _nextFrame;

    this.build = function () {
        /*
            build the image area
        */

        var me = this;

        me._screenshot = $("<img>").addClass("screenshot").on("load", (e) => {
            var img = $(e.target);
            var wrap = img.parent();
            wrap.css("width", "auto");
            wrap.css("width", img.outerWidth())
            if (me._map._map && me._map._map._map) {
                me._map._map._map.invalidateSize();
            }
        })

        $(window).on("resize", function() {
            me._screenshot.trigger('load');
        })

        me._headingBox = $("<div>").addClass('heading-overlay').append(
            $('<p>').html("X: ").append($("<span>").addClass('az'), "&deg; T"),
            $('<p>').html("Y: ").append($("<span>").addClass('el'), "&deg;")
        );

        if (me._borderColor) {
            me._screenshot.css("border-color", me._borderColor);
        }

        if (me._linked) {
            var link = $("<a>").attr({"href":`/cam-console/${me._camId}`}).append(me._screenshot);
        }

        me._fullscreenButton = $("<button>").addClass('btn btn-light fullscreen-button').append(
            $("<span>").addClass("material-icons").html('fullscreen')
        ).on('click', function() {
            me.fullscreenToggle();
        });

        me._timelapseButton = me._camId == 1007 ? $("<button>").addClass('btn btn-light timelapse-button').append(
            $("<span>").addClass("material-icons").html('play_arrow')
        ).on('click', function() {
            if (!me._timelapseMode) {
                console.log('timelapse time!');
                selectLapseLength.slideToggle();
                //me.fullscreenToggle();
            } else {
                if (me._zoomSlider) {
                    me._zoomSlider.show();
                }
                if (me._timelapseControls) {
                    me._timelapseControls.hide();
                }
                clearTimeout(me._tLapse);
                me._timelapseMode = false;
                me._timelapseButton.find('span').html('play_arrow');
                me.updateData(me._tempData);
            }
        }) : '';

                    let isJeremiah = false;
        
        var selectLapseLength = me._camId == 1007 ? $("<div>").addClass('select-lapse-length').append(
                                    $("<button>").attr({"value":"900"}).addClass("lapse-length btn btn-light").html("15 minutes"),
                                    $("<button>").attr({"value":"3600"}).addClass("lapse-length btn btn-light").html("1 hour"),
                                    $("<button>").attr({"value":"10800"}).addClass("lapse-length btn btn-light").html("3 hour"),
                                    $("<button>").attr({"value":"21600"}).addClass("lapse-length btn btn-light").html("6 hour"),
                                    $("<button>").attr({"value":"43200"}).addClass("lapse-length btn btn-light").html("12 hour")
                                ) : '';

        if (selectLapseLength) {
            selectLapseLength.find('.lapse-length').on("click", function (e) {
                if (!me._timelapseMode) {
                    console.log($(e.target).html());                   

                    if (me._timelapseControls) {
                        if (me._paused) {
                            me._timelapseControls.find('.playpause').click();
                        }
                        me._timelapseControls.show();
                    }
                    me._timelapseMode = true;
                    me._timelapseButton.find('span').html("stop");


                    /*pauseButton.toggleClass("frame-btn");
                    inciHeader.toggleClass("lapse-mode");
                    $("div#screenshots").toggleClass("fixed");
                    me._map._map._map.invalidateSize();*/
                    if (me._zoomSlider) {
                        me._zoomSlider.hide();
                    }
                    me.getTimelapse($(e.target).val());
                    selectLapseLength.slideToggle();
                }
            })
        }

        let timelapseInit = me._camId == 1007 ? $("<div>").addClass('timelapse-init').append(me._timelapseButton, selectLapseLength) : '';

        $(document).on("keyup", function(e) {
            if (e.key === "Escape" && me._isFullscreen) {
                me.fullscreenToggle();
            }
        })
        
        me._timestampDiv = $("<div>").addClass("timestamp badge badge-light");
        me._screenshotDiv = $("<div>").addClass('cam-screenshot').attr("id", "screenshot-"+me._camId).append($("<div>").addClass('cam-screenshot-wrap').append(link ?? me._screenshot, me._timestampDiv, timelapseInit, me._fullscreenButton, me._headingBox));

        if (me._camId == 1007) {
            me._timelapseControls = $("<div>").addClass("timelapse-controls").append(
                $("<button>").addClass('prev btn btn-light').html(
                    $("<span>").addClass('material-icons').html('chevron_left')
                ).on("click", function(e) {
                    if (!me._paused) {
                        me._timelapseControls.find('.playpause').click();
                    }
                    me.showFrame(me._prevFrame);
                }),
                $("<button>").addClass('playpause btn btn-light').html(
                    $("<span>").addClass('material-icons').html('pause')
                ).on("click", function (e) {
                    me._paused = !me._paused;
                    $(this).find('span').html(me._paused ? 'play_arrow' : 'pause')

                    if (me._timelapseMode && !me._paused) {
                        me.showFrame(me._nextFrame);
                    } else {
                        clearTimeout(me._tLapse);
                    }
                }),
                $("<button>").addClass('next btn btn-light').html(
                    $("<span>").addClass('material-icons').html('chevron_right')
                ).on("click", function(e) {
                    if (!me._paused) {
                        me._timelapseControls.find('.playpause').click();
                    }
                    me.showFrame(me._nextFrame);
                }),
                $("<input>").attr({"type":"range", "min":"0", "max":"719", "value":"0"}).addClass("slider").on("mousedown", function() {
                    me._wasPaused = me._paused;
                    clearTimeout(me._tLapse);
                    if (!me._paused) {
                        me._timelapseControls.find('.playpause').click();
                    }
                }).on("input", function(e) {
                    clearTimeout(me._tLapse);
                    me.showFrame($(e.target).val());
                }).on("change", function() {
                    clearTimeout(me._tLapse);
                    if (!me._wasPaused) {
                        me._timelapseControls.find('.playpause').click();
                    }
                })
            ).hide();

            me._screenshotDiv.find(".cam-screenshot-wrap").append(me._timelapseControls);
        }

        me._screenshotDiv.on('click', function(e) {
            if ($(e.target).hasClass('fullscreen-img')) {
                me.fullscreenToggle();
            }
        });
        
        me._screenshotDiv.on("mouseenter", function(e) {
            me._headingBox.show();
            me._map._headingLines[me._camId].addTo(me._map._map._map);
        }).on("mouseleave", function(e) {
            me._headingBox.hide();
            me._map._headingLines[me._camId].remove();
        }).on('mouseover mousemove', function(e) {
            let data = me._data[me._camId];

            let coords = getCoordsFromImageClickEvent(e.originalEvent, data.camAzimuth, data.camElevation, data.camViewWidth, data.camType);

            me._headingBox.find('span.az').html(coords.xAdj);
            me._headingBox.find('span.el').html(coords.yAdj);

            let left = e.offsetX, top = e.offsetY;

            if ($(this).width() - left < me._headingBox.outerWidth()) {
                left -= me._headingBox.outerWidth();
            }
            if ($(this).height() - top < me._headingBox.outerHeight()) {
                top -= me._headingBox.outerHeight();
            }

            me._map.updateHeadingLine(me._camId, coords.xAdj);

            /*me._headingBox.css({
                "left": left + 'px',
                "top": top + 'px'
            })*/
        });

        me._parent.append(me._screenshotDiv);

        if (me._data) {
            me.updateData();
        }
    }

    this.screenshotUrl = function() {
        var me = this;
        var timestamp = new Date(me._data[me._camId].camScreenshotTimestamp * 1000);
        var formattedTimestamp = timestamp.toISOString().slice(0,10).replaceAll('-','/');
        var prefix = "/data/img/"+me._camId+"/"+formattedTimestamp+"/"
        return prefix+me._data[me._camId].camScreenshot;
    }

    
    this.getTimelapse = function(seconds) {
        var me = this;

        var success = function(result) {
            if (result.code == 1) {
                me._timelapseData = result.data;
                me._keys = Object.keys(me._timelapseData);

                if (me._keys.length > 0) {
                    if (me._timelapseControls) {
                        me._timelapseControls.find("input.slider").attr({
                            "max": me._keys.length - 1
                        });
                    }
                    me.showFrame(0);
                }
            }
        }
        var finish = function () {

        }
        var fail = function() {

        }

        var query = new AjaxQuery("/api/getCameraTimelapse", "POST", {cameraIds: me._camId, lapseLength:seconds}, success, finish, fail);
    }

    this.fullscreenToggle = function() {
        var me = this;

        if (!me._isFullscreen) {
            me._screenshotDiv.addClass('fullscreen-img');
            me._fullscreenButton.find('span').html('fullscreen_exit');
            me._isFullscreen = true;
            $("body").addClass('noScroll');
        } else {
            me._screenshotDiv.removeClass('fullscreen-img');
            me._fullscreenButton.find('span').html('fullscreen');
            me._isFullscreen = false;
            $("body").removeClass('noScroll');
        }

        me._screenshot.trigger('load');
    }

    this.init = function () {
        var me = this;

        me._camId = camId;
        me._map = map;
        me._parent = appendTo;
        me._data = data;
        me._tempData = data;
        me._borderColor = color;
        me._linked = link;
        me._zoomChanged = 0;
        me._dragBox = false;
        me._isFullscreen = false;

        me.build();
    }

    
    this.showFrame = function(idx) {
        var me = this;
        idx = Number(idx);

        me._prevFrame = idx-1 >= 0 ? idx-1 : 0;
        me._nextFrame = idx+1 < me._keys.length ? idx+1 : me._keys.length-1;

        var data = me._timelapseData[me._keys[idx]];

        Object.keys(data).forEach((camId) => {
            data[camId].camLat = me._data[camId].camLat;
            data[camId].camLon = me._data[camId].camLon;
            me._data[camId] = data[ camId ];
        });
        me.updateData();
        var newIdx = idx + 1;
        var timestamp = new Date(me._keys[idx] * 1000);
        //var timestring = (timestamp.getMonth()+1)+"/"+timestamp.getDate()+"/"+timestamp.getFullYear()+" "+(timestamp.getHours()).toString().padStart(2,"0")+":"+(timestamp.getMinutes()).toString().padStart(2,"0")+":"+(timestamp.getSeconds()).toString().padStart(2,"0");

        //$("#timestamp").html(timestamp.toLocaleDateString('en-US', {timeZone:'America/Los_Angeles'})+" "+timestamp.toLocaleTimeString('en-US', {hour12: false, timeZone:'America/Los_Angeles'})+" PT");

        if (me._timelapseControls) {
            me._timelapseControls.find("input.slider").val(idx);
        }
        if(newIdx >= me._keys.length) {
            //$("button.pause").click();
            me._nextFrame = 0;
            return;
        }
        
        me._tLapse = setTimeout(function() {
            if (!me._paused) {
                me.showFrame(newIdx);
            }
        }, 300, newIdx);
    }

    this.updateData = function (data = this._data) {
        /*
            Update the src of the img
        */

        var me = this;

        me._data = data;

        var timestamp = new Date(me._data[me._camId].camScreenshotTimestamp * 1000);


                    me._screenshot.attr("src", s3base+me.screenshotUrl());
            me._timestampDiv.html(timestamp.toLocaleDateString('en-US', {timeZone:'America/Los_Angeles'})+" "+timestamp.toLocaleTimeString('en-US', {timeZone:'America/Los_Angeles', hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: "h23"})+" PT");
        
        if (me._map && me._map._map) {
            me._map.updateData(me._data);
            /*if (me._poly) {me._poly.remove()};
            if (me._line) {me._line.remove()};

            me._poly = L.polygon(me._data[me._camId].camPolygon, {color:me._borderColor,stroke: false,fillOpacity:0.4}).addTo(me._map._map._map);
            me._line = L.polyline(me._data[me._camId].camHeadingLine, {color:me._borderColor}).addTo(me._map._map._map);

            me._map.removeFromArrays(me._poly, me._line);

            me._map._polys.push(me._poly);
            me._map._lines.push(me._line);*/
        } else {
            var t = setTimeout(function() {me.updateData()}, 500);
        }
    }

    this.init();
}

function CamThumbnail (camId, appendTo = $("div#container"), data = Array(), checkbox = false) {
    var _camId, _parent, _div, _offlineOverlay, _img, _data, _nameSpan, _refreshRate, _inciGallery;

    this.build = function() {
        /*
            Build a camera thumbnail (shown in CamGallery instances)
        */

        var me = this;

        me._img = $("<img>").addClass('thumbnail-img').attr({
            "src": me._data.camScreenshot ? s3base+me.thumbUrl() : null
        })
        me._nameSpan = $("<span>").addClass('cam-name badge badge-light').html(me._data.camName ? me._data.camName.replaceAll(/_/g, " ") : '');

        
        if (me._camId == null) {
            me._img.attr({"src":"https://weathernode.net/img/add_black_48dp.svg"}).on("load", function() {
                if (!me._parent.parent().is(":visible")) {
                    var hide = true;
                    me._parent.parent().show();
                }
                me._img.css("max-height", me._img.outerWidth() * 0.8);
                if (hide) {
                    me._parent.parent().hide();
                }
            });
            me._nameSpan.html("New Camera");
        }

        me._div = $("<div>").addClass("cam-option"+(me._data.camOffline && me._data.camActive ? " offline" : " online")).append(
            $("<div>").addClass('cam-thumb').append(
                me._img
            ),
            //$("<p>").addClass('cam-name').append(
                me._nameSpan
            //)
        ).on("click", function () {
            if (!me._inciGallery) {
                window.location.href = "/cam-console/"+(me._camId ?? "new");
            }
        });

        if (!me._data.camActive && me._camId != 'hover') {
            me._div.css({"position":"relative"});
            var overlay = $("<div>").addClass("cam-thumbnail-overlay").css({
                "position":"absolute",
                "display":"flex",
                "justify-content":"center",
                "align-items":"center",
                "width":"100%",
                "height":"100%",
                "background-color":"rgba(255,255,255,0.7)",
                "top":"0px",
                "left":"0px",
                "z-index":"500"
            });

            overlay.on("hover")

            me._div.append(overlay);
        }

        me._offlineOverlay = $("<div>").addClass("offline-thumb").append(
            $("<span>").addClass("material-icons").html("wifi_off")
        );

        let now = new Date();

        if (me._data.camScreenshotTimestamp < (now.getTime()/1000) - 120) {
            me._div.append(me._offlineOverlay);
        } else if (me._offlineOverlay.is(":visible")) {
            me._offlineOverlay.remove();
        }

        me._parent.append(me._div);
    }

    this.thumbUrl = function() {
        var me = this;
        var timestamp = new Date(me._data.camScreenshotTimestamp * 1000);
        var formattedTimestamp = timestamp.toISOString().slice(0,10).replaceAll('-','/');
        var prefix = "/data/thumb/"+me._camId+"/"+formattedTimestamp+"/"
        return prefix+me._data.camScreenshot;
    }

    this.fullSizeUrl = function() {
        var me = this;
        var timestamp = new Date(me._data.camScreenshotTimestamp * 1000);
        var formattedTimestamp = timestamp.toISOString().slice(0,10).replaceAll('-','/');
        var prefix = "/data/img/"+me._camId+"/"+formattedTimestamp+"/"
        return prefix+me._data.camScreenshot;
    }

    this.getData = function() {
        /*
            Get data for this thumbnail (only used if not part of a gallery)
        */

        var me = this;

        var success = function (result) {
            if (result.code == 1) {
                me._data = result.data[me._camId];
            }

            me._t = setTimeout(() => {
                me.getData();
            }, me._refreshRate);

            me.updateData();
        }
        var finish = function () {

        }
        var fail = function() {

        }

        if (!me._paused && me._camId) {
            var query = new AjaxQuery("/api/getCameraData", "GET", {cameraIds: [me._camId]}, success, finish, fail);
        }
    }

    this.init = function() {
        var me = this;

        me._camId = camId;
        me._parent = appendTo;
        me._data = data;
        me._refreshRate = 20000;
        me._inciGallery = checkbox;

        me.build();

        if (Object.keys(me._data).length == 0 && !isNaN(me._camId)) {
            me.getData();
        }
    }

    this.updateData = function(data = me._data) {
        /*
            Update the displayed image/name
        */

        var me = this;

        me._data = data;

        let now = new Date();

        if (me._data.camScreenshotTimestamp < (now.getTime()/1000) - 120) {
            me._div.append(me._offlineOverlay);
        } else if (me._offlineOverlay.is(":visible")) {
            me._offlineOverlay.remove();
        }

        me._img.attr({
            "src": me._data.camScreenshot ? (me._div.hasClass('map-hover-thumbnail') ? s3base+me.fullSizeUrl() : s3base+me.thumbUrl()) : null
        });
        
        me._nameSpan.html(me._data.camName ? me._data.camName.replace(/_/g, " ") : '');
    }

    this.init();
}

function getCoordsFromImageClickEvent(e, centerX, centerY, viewWidth, camType) {
    let screenshot = $(e.currentTarget);

    let w = screenshot.width();
    let h = screenshot.height();
    let x = e.offsetX;
    let y = e.offsetY;

    let heightModifier;

    switch (parseInt(camType)) {
        case 1:
        case 2:
        case 3:
        case 4:
            heightModifier = 0.8;
            break;
        case 6: 
            heightModifier = 0.6006;
            break;
        case 5:
        default:
            heightModifier = 0.5625;
            break; 
    }

    viewHeight = viewWidth * heightModifier;

    let xAdj = parseFloat(((parseFloat(centerX)-(viewWidth/2)) + ((x/w)*parseFloat(viewWidth))).toFixed(1));
    let yAdj = parseFloat(((parseFloat(centerY)+(viewHeight/2)) - ((y/h)*parseFloat(viewHeight))).toFixed(1));

    return { xAdj, yAdj };
}