function Incident(data, parent = $("div#container")) {
    var _parent, _camIds, _data, _camData, _refreshRate, 
        _lightbox, _popup,
        _map, _panos, _screenshots, 
        _paused, _timelapseMode, _prevFrame, _nextFrame,
        _tRefresh, _tLapse,
        _wasPaused,
        _config;

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

        var pauseButton = $("<button>").addClass("pause btn btn-dark").html(
                            $("<img>").attr({"src":"/img/pause_white_48dp.svg"})
                        ).css({"background-image": "none"}).on("click", function(e) {
                            me._paused = !me._paused;
                            var img = me._paused ? "play_arrow_white_48dp.svg" : "pause_white_48dp.svg";

                            pauseButton.find("img").attr({"src":`img/${img}`});

                            if (!me._timelapseMode && !me._paused) {
                                me.getData();
                            } else if (me._timelapseMode && !me._paused) {
                                me.showFrame(me._nextFrame);
                            } else {
                                clearTimeout(me._tRefresh);
                                clearTimeout(me._tLapse);
                            }
                        });

        var timelapseToggle = $("<button>").attr({"id":"timelapse-toggle"}).addClass("btn btn-dark").html("Play Timelapse").on("click focusout", function(e) {
                                    if (!me._timelapseMode && (e.type != "focusout" || selectLapseLength.css('display') == 'block')) {
                                        var t = setTimeout(() => {
                                            selectLapseLength.slideToggle();
                                            timelapseToggle.toggleClass("no-round");
                                        }, 100);
                                    } else if (me._timelapseMode) {
                                        let lapseControls = $(".lapse-ctrl");

                                        clearTimeout(me._tLapse);
                                        me._timelapseMode = false;
                                        timelapseToggle.html("Play Timelapse");
                                        refreshSelect.toggle();
                                        lapseControls.toggle();
                                        pauseButton.toggleClass("frame-btn");
                                        inciHeader.toggleClass("lapse-mode");
                                        $("div#screenshots").toggleClass("fixed");
                                        me._map._map._map.invalidateSize();
                                        if (me._paused) {
                                            pauseButton.click();
                                        } else {
                                            me.getData();
                                        }
                                    }
                                })

        var selectLapseLength = $("<div>").attr({"id":"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")
                                );

        var refreshSelect = $("<select>").attr({"id":"refresh-rate"}).addClass("form-control").append(
                                $("<option>").attr({"value":"10000"}).html("10s"),
                                $("<option>").attr({"value":"30000", "selected":"selected"}).html("30s"),
                                $("<option>").attr({"value":"60000"}).html("1m"),
                                $("<option>").attr({"value":"300000"}).html("5m"),
                                $("<option>").attr({"value":"900000"}).html("15m")
                            ).on("change", function(e) {
                                clearTimeout(me._tRefresh);
                                me._refreshRate = $(e.target).val();
                                me.getData();
                            });

        var controls = $("<div>").addClass("controls").append(
            $("<div>").addClass("frame-btns").append(
                $("<button>").attr({"id":"prev"}).addClass("lapse-ctrl frame-btn btn btn-dark").html(
                    $("<img>").attr({"src":"/img/chevron_left_white_48dp.svg"})
                ).on("click", function(e) {
                    if (!me._paused) {
                        pauseButton.click();
                    }
                    me.showFrame(me._prevFrame);
                }),
                pauseButton,
                $("<button>").attr({"id":"next"}).addClass("lapse-ctrl frame-btn btn btn-dark").html(
                    $("<img>").attr({"src":"/img/chevron_right_white_48dp.svg"})
                ).on("click", function(e) {
                    if (!me._paused) {
                        pauseButton.click();
                    }
                    me.showFrame(me._nextFrame);
                })
            ),
            refreshSelect
            ,
            $("<input>").attr({"type":"range", "min":"0", "max":"719", "value":"0", "id":"lapseSlider"}).addClass("slider lapse-ctrl").on("mousedown", function() {
                                                                                                                                        me._wasPaused = me._paused;
                                                                                                                                        clearTimeout(me._tLapse);
                                                                                                                                        if (!me._paused) {
                                                                                                                                            pauseButton.click();
                                                                                                                                        }
                                                                                                                                    }).on("input", function(e) {
                                                                                                                                        clearTimeout(me._tLapse);
                                                                                                                                        me.showFrame($(e.target).val());
                                                                                                                                    }).on("change", function() {
                                                                                                                                        if (!me._wasPaused) {
                                                                                                                                            pauseButton.click();
                                                                                                                                        }
                                                                                                                                    }),
            $("<div>").attr({"id":"timelapse-controls"}).append(
                timelapseToggle,
                selectLapseLength
            )
        )

        var inciHeader = $("<div>").addClass("control-bar").append(
            $("<h3>").addClass("inci-name-heading").append(
                $("<a>").attr({"href":"/incidents"}).html("Incidents"),
                "&nbsp;> " + me._data.incidisplayname)
        );


        var navigation = $("<div>").addClass("btn-group inci-menu").attr({
                                                                    "role":"group",
                                                                    "aria-label":"Incident Navigation"
                                                                });

        
        var controlArea = $("<div>").attr({"id":"inci-control-area"})

        if (me._data.inciactive) {
            controlArea.append(controls);
        }
        
        controlArea.append(navigation);

        me._parent.append(inciHeader.append(controlArea));

        var screenshotDiv = $("<div>").attr({"id":"screenshots"}).addClass("stacked").append(
            $("<button>").attr({"id":"toggle-image-size"}).addClass("btn btn-light").append(
                $("<img>").attr({"src":"img/open_in_full_black_48dp.svg"})
            ).on("click", function() {
                var container = $("#container");

                container.toggleClass("full-images");
                var img = container.hasClass("full-images") ? "close_fullscreen_black_48dp.svg" : "open_in_full_black_48dp.svg";
                if (container.hasClass("full-images")) {
                    $("div.cam-screenshot").css("width", "auto");
                } else {
                    $("div.cam-screenshot").css("width", $("img.screenshot").outerWidth());
                }


                $("#toggle-image-size img").attr("src", `/img/${img}`);

                me._map._map._map.invalidateSize();
            })
        )

        me._parent.append(screenshotDiv);

        me._map = new CamMap(me._camIds, me._parent, null, Array(me._data));
        //me._map._incidents = Array(me._data);

         

        var panoWrap = $("<div>").attr({"id":"pano-wrap"});

        var camColors = ['#6a3d9a','#1f78b4','#cab2d6','#a6cee3','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00',];
        var i = 0;

        me._camIds.forEach(function(c) {
            me._screenshots.push(new CamScreenshot(c, me._map, screenshotDiv, me._camData, camColors[i], true))
            me._panos.push(new CamPanorama(c, panoWrap, me._map))
            i++;
        })

        me._parent.append(panoWrap);

        if (me._data.incistream) {
                            if (window.location.hostname == "app.weathernode.net" && me._data.incistream.indexOf("app.weathernode.net") == -1) {
                    let idx = me._data.incistream.indexOf("weathernode.net");
                    if (idx != -1) {
                        me._data.incistream = me._data.incistream.substr(0, idx) + "app." + me._data.incistream.substr(idx);
                    }
                }
            
            var livestream = $("<div>").attr({"id":"livestream"}).append(
                $("<iframe>").attr({
                    "height":"100%",
                    "width":"100%",
                    "allowfullscreen":"true",
                    "src":me._data.incistream
                })
            )
            me._parent.append(livestream);
        }

         

        $("button.lapse-length").on("click", function(e) {
            clearTimeout(me._tRefresh);
            if (me._paused) {
                pauseButton.click();
            }
            me._timelapseMode = true;
            timelapseToggle.html("Exit Timelapse");
            refreshSelect.toggle();
            $(".lapse-ctrl").toggle();
            pauseButton.toggleClass("frame-btn");
            inciHeader.toggleClass("lapse-mode");
            $("div#screenshots").toggleClass("fixed");
            me._map._map._map.invalidateSize();
            me.getTimelapse($(e.target).val());
        });
    } 

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

        me._lightbox = $("<div>").attr({"id":"annoying-lightbox"});
        me._popup = $("<div>").attr({"id":"annoying-popup"}).append(
            $("<div>").addClass("container").append(
                $("<h1>").html("Welcome to Weathernode!"),
                $("<div>").attr({"id":"tab1"}).append(
                    $("<div>").addClass("row").append(
                        $("<div>").append(
                            $("<p>").html("This tool is for informational purposes only and should not be used to make safety decisions. Please follow all orders from local authorities and emergency personnel regarding evacuations, road closures, etc.")
                        ),
                        $("<div>").append(
                            $("<p>").html("Please note that this website is in Beta and there are some known issues:"),
                            $("<ul>").append(
                                $("<li>").html("Map may be out-of-sync with image captures, but should resolve with the next refresh.")
                            )
                        )
                    ),
                    $("<div>").addClass("row justify-content-end").append(
                        $("<button>").attr({"type":"button", "id":"okay"}).addClass("btn btn-primary").html("Okay")
                    )
                )
            )
        )

        me._parent.append(me._lightbox, me._popup);
    }

    this.evalPopup = function() {
        var me = this;
        var c = getCookie("popup-cookie-flir");

        if(c && c == "viewed") {
            me._lightbox.css("display","none");
            me._popup.css("display","none");
            $("div#legend").append($("<div/>")
                .html("clear cookie")
                .on("click", function() {
                    clearCookie("popup-cookie-flir");
                    $(this).remove();
                })
            );
        } else {
            me._lightbox.css("display","block");
            me._popup.css("display","block");
            $("button#okay").on("click", function() {
                $("div#annoying-popup, div#annoying-lightbox").css("display", "none");
                setCookie("popup-cookie-flir", "viewed", 30);
            })
        }
    }

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

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

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

        }
        var fail = function() {

        }

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

        if (me._data.inciactive) {
            me._tRefresh = setTimeout(() => {
                me.getData();
            }, me._refreshRate);
        }
    }

    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) {
                    $("input#lapseSlider").attr({
                        "max": me._keys.length - 1
                    });
                    me.showFrame(0);
                }
            }
        }
        var finish = function () {

        }
        var fail = function() {

        }

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

    this.init = function() {
        var me = this;
        
        me._parent = parent;
        me._data = data;
        me._camIds = me._data.incicams = me._data.incicams ? me._data.incicams.split(',') : Array();

        me.buildPopup();
        me.evalPopup();

        darkMode();
        fullscreen();

        me._panos = Array();
        me._refreshRate = 30000;
        me._screenshots = Array();
        me._parent.addClass("incident");
        me._paused = false;

        me.getData();
        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._camData[camId].camLat;
            data[camId].camLon = me._camData[camId].camLon;
            me._camData[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");

        $("input#lapseSlider").val(idx);
        if(newIdx >= me._keys.length) {
            $("button.pause").click();
            me._nextFrame = 0;
            return;
        }
        
        me._tLapse = setTimeout(function() {
            if (!me._paused) {
                me.showFrame(newIdx);
            }
        }, 400, newIdx);
    }

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

        if (me._camData) {
            me._screenshots.forEach(function(s) {
                s.updateData(me._camData);
            });
            me._map.updateData(me._camData);
        }
    }

    this.init();
}