window.AddMyCameraEvent = function() {
    var thisclass = $("#addCameraButton").attr("class");
    var ID = $("#addCameraButton").attr("data-id");
    var add;
    if (thisclass == "btn btn-primary") {
        add = true;
    } else {
        add = false;
    }
    $.ajax('/Camera/SaveMyCameras', {
        traditional: true,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify({ CameraId: ID, isChecked: add }),
        type: 'POST'
    }).done(function () {
        //if mobile
        if (window.DisplayMyCamerasMobile) {
            window.DisplayMyCamerasMobile();
        }
        if (window.DisplayMyCameras) {
            window.DisplayMyCameras();
        }

        if (add) {
            $("#addCameraButton").addClass('btn-danger').removeClass('btn-primary');
            $("#addCameraButton").prop("value", window.resources.Remove);
            $("#addCameraButton").attr("title", window.resources.RemoveCameras);
        } else {
            $("#addCameraButton").addClass('btn-primary').removeClass('btn-danger');
            $("#addCameraButton").prop("value", window.resources.Add);
            $("#addCameraButton").attr("title", window.resources.AddCameras);
        }

        $(document).trigger('layer-changed', ['MyCameras', null]);
    });    
};

window.DisplayMyCameras = function (listId) {    
    if (!listId) {
        listId = $("#myCameraList").val();
    }
    //ajax call to get all cameras or default cameras
    $.ajax('/Camera/GetUserCameras', {
        type: 'GET',
        data: {
            listId: listId
        },
        cache: false
    }).done(function (obj) {
        //ensure data is valid
        if (Array.isArray(obj.data)) {
            var data = obj.data;
            if (obj.myCameras) {
                var index = window.MyCameras.findIndex((list) => list.id == listId)
                if (index > -1) {
                    window.MyCameras[index].cameras = data;
                }
                $("#myCameraList").val(listId);
            }
            $('.cameraCarousel').slick('slickRemove', null, null, true);             
            if (data.length === 0) {
                $('#NoCameras').show();
                $('#myCameraTitle').hide();
                return;
            }

            $('#NoCameras').hide();
            $('#myCameraTitle').show();
            for (var i = 0; i < data.length; i++) {
                var dirDesc = "";
                // RWIS cam's description4 doesn't have value which comes across as "N/A"; "S.O." for french
                var hasDirDesc = (data[i].description3 != "N/A" && data[i].description3 != "S.O.") && (data[i].description4 == "N/A" || data[i].description4 == "S.O.");
                if (hasDirDesc) {
                    dirDesc = "<div class=\"dirDescHeader\">" + data[i].description3 + "</div>";
                }
                var imgHtml = '<img id="carouselId-' + data[i].id + '" data-id="' + data[i].id + '" data-title="' + data[i].displayName + '" data-lazy="/map/Cctv/' + data[i].id + '"  data-url="/map/Cctv/' + data[i].id + '" class="myCamImg" alt="' + data[i].description1 + '" data-refresh-rate="' + data[i].refreshRateMs + '" />';
                if (resources.CameraImageLink == "True") {
                    $('.cameraCarousel').slick('slickAdd', '<div>' + dirDesc + '<a href="/map/Cctv/' + data[i].id + '"  target="_blank">' + imgHtml + '</a>' + GetVideoHTMLForMyCameras(data[i]) + '</div>');
                } else {
                    $('.cameraCarousel').slick('slickAdd', '<div>' + dirDesc + imgHtml + GetVideoHTMLForMyCameras(data[i]) + '</div>');
                }
            }

            if (data.length > 0) {
                $(document).trigger('cameraCarouselLoaded');
            }
        }
    });

    function GetVideoHTMLForMyCameras(camera) {
        var html = '';
        if (resources.CctvEnableVideo == "True") {
            if (!camera.videoDisabled && camera.videoUrl && camera.videoType != null) {
                html += '<div id="' + camera.id + '-myVideoContainer" data-cameraid="' + camera.id + '" data-videoauth="' + camera.isVideoAuthRequired + '" data-videourl="' + camera.videoUrl + '" data-streamtype="' + camera.videoType + '"></div>';
                var disabledAttr = !camera.displayCamera ? "disabled" : "";
                html += '<div class="text-center"><button class="btn btn-default btn-xs showMyVideo" id="showVideo-' + camera.id + '" data-camera-id="' + camera.id + '"' + disabledAttr + '> ' + resources.ShowVideo + ' </button>';
                html += '<button class="btn btn-default btn-xs hideMyVideo" id="hideVideo-' + camera.id + '" data-camera-id="' + camera.id + '" style="display:none">' + resources.HideVideo + '</button></div>';
            }
            else if (camera.videoDisabled) {
                html += '<div class="text-center">  ' + resources.CctvNoVideoAtThisTime + '  </div>';
            }
            else {
                html += '<div class="text-center">  ' + resources.CctvNoVideo + '</div>';
            }
        }
        return html;
    }
};