var canvasTripwire_tof;
var canvasTripwire_camera;
var canvasTripwire_all;
var click_canvas_all = 0;

var TOF_VIEW_CANVAS_X = 640;
var TOF_VIEW_CANVAS_Y = 480;
var TOF_IMG_WIDTH = 640;
var TOF_IMG_HEIGHT = 480;

var data_tof = "";
var bbox_count = 0;
var plate_count = 0;
var plate_idx = 0;
var ai_json;
var complete_data = "";
var complete_flag = 0;
var content_len = 0;
var datas;
var n1 = -1, n2 = -1, n2_temp = -1;
var wait_count = 0;

var clear_count = 0;

var tof_json_install_angle;
var tof_json_enable_camera;
var tof_json_enable_tof_ground;
// var tof_json_enable_tof_wall;
var tof_json_camera_ip;
var tof_json_camera_port;
var tof_json_camera_username;
var tof_json_camera_password;

var tof_json_enable_ip_setting = "";

var tof_json_distance_options;
var tof_json_distance_threshold;
var tof_json_distance_min_max;
var tof_json_height_options;
var tof_json_height_threshold;
var tof_json_height_min_max;

var tof_json_ground_x;
var tof_json_ground_y;

var checkPTZ = "";

var k_index = -1;

var clickPointRadius = 4;

var groundPoint = null;
var groundPointRadius = 4;
var groundPointText = null;

var textColor = "red";//black
var stroke_color = "red";

var debugMode = 0; // 0 : release , 1 : debug

// =======================================================================

function func_getToFSettings() {
    $.ajax({
        url: "/gettof",
        type: "GET",
        async: false,
        beforeSend: function (xmlHttp) {
            xmlHttp.setRequestHeader("If-Modified-Since", "0");
            xmlHttp.setRequestHeader("Cache-Control", "no-cache");
            //xmlHttp.setRequestHeader("Authorization", "Basic " + btoa("username:password")); 
        },
        success: function (retdata) {
            var jsonbuf = JSON.parse(retdata);
            tof_json_install_angle = jsonbuf["install_angle"];
            tof_json_enable_camera = jsonbuf["enable_camera"];
            tof_json_enable_tof_ground = jsonbuf["enable_tof_ground"];

            tof_json_distance_options = jsonbuf["distance_options"];
            tof_json_distance_min_max = jsonbuf["distance_min_max"];
            tof_json_distance_threshold = jsonbuf["distance_threshold"];
            tof_json_height_options = jsonbuf["height_options"];
            tof_json_height_threshold = jsonbuf["height_threshold"];
            tof_json_height_min_max = jsonbuf["height_min_max"];

            tof_json_ground_x = jsonbuf["ground_x"];
            tof_json_ground_y = jsonbuf["ground_y"];

            // tof_json_enable_tof_wall = jsonbuf["enable_tof_wall"];

            var jsoncamera = jsonbuf["camera"];
            tof_json_enable_ip_setting = jsoncamera["ip_setting"];
            tof_json_camera_ip = jsoncamera["camera_ip"];
            tof_json_camera_port = jsoncamera["camera_port"];
            tof_json_camera_username = jsoncamera["camera_username"];
            tof_json_camera_password = jsoncamera["camera_password"];

            if (debugMode) {
                console.log("func_getToFSettings():");
                console.log("- tof_json_install_angle = ", tof_json_install_angle);
                console.log("- tof_json_enable_camera = ", tof_json_enable_camera);
                console.log("- tof_json_enable_tof_ground = ", tof_json_enable_tof_ground);
                // console.log("- tof_json_enable_tof_wall = ", tof_json_enable_tof_wall);
                console.log("- tof_json_enable_ip_setting = ", tof_json_enable_ip_setting);
                console.log("- tof_json_camera_ip = ", tof_json_camera_ip);
                console.log("- tof_json_camera_port = ", tof_json_camera_port);
                console.log("- tof_json_camera_username = ", tof_json_camera_username);
                console.log("- tof_json_camera_password = ", tof_json_camera_password);

                console.log("- tof_json_distance_options = ", tof_json_distance_options);
                console.log("- tof_json_distance_threshold = ", tof_json_distance_threshold);
                console.log("- tof_json_height_options = ", tof_json_height_options);
                console.log("- tof_json_height_threshold = ", tof_json_height_threshold);
            }
            
        },
        error: function (retdata) {
            console.warn(retdata);
        }

    });
}

function func_showToFSettings() {
    if (debugMode) {
        console.log("func_showToFSettings():");
        console.log("- tof_json_install_angle = ", tof_json_install_angle);
        console.log("- tof_json_enable_camera = ", tof_json_enable_camera);
        console.log("- tof_json_enable_tof_ground = ", tof_json_enable_tof_ground);
        // console.log("- tof_json_enable_tof_wall = ", tof_json_enable_tof_wall);
        console.log("- tof_json_camera_ip = ", tof_json_camera_ip);
        console.log("- tof_json_camera_port = ", tof_json_camera_port);
        console.log("- tof_json_camera_username = ", tof_json_camera_username);
        console.log("- tof_json_camera_password = ", tof_json_camera_password);

        console.log("- tof_json_distance_options = ", tof_json_distance_options);
        console.log("- tof_json_distance_threshold = ", tof_json_distance_threshold);
        console.log("- tof_json_height_options = ", tof_json_height_options);
        console.log("- tof_json_height_threshold = ", tof_json_height_threshold);
    }

    $('#install_angle').val(tof_json_install_angle);
    $('#camera_ip').val(tof_json_camera_ip);
    $('#camera_port').val(tof_json_camera_port);
    $('#camera_username').val(tof_json_camera_username);
    $('#camera_password').val(tof_json_camera_password);

    $('#distance_options').val(tof_json_distance_options);
    $('#distance_min_max').val(tof_json_distance_min_max);

    $('#distance_threshold').slider('setValue', tof_json_distance_threshold);

    $('#height_options').val(tof_json_height_options);
    $('#height_min_max').val(tof_json_height_min_max);

    $('#height_threshold').slider('setValue', tof_json_height_threshold);

    if(tof_json_enable_camera == true)
    {
        document.getElementById("enable_camera").checked = true;
        document.getElementById("ptz_view").style.display = "block";
        document.getElementById("tof_view").style.width = "50%";
        document.getElementById("tof_settings").style.width = "50%";

        document.getElementById("camera_setting_block").style.display = "block";
        //document.getElementById("camera_setting_block2").style.display = "block";
        document.getElementById("tof_settings0").style.display = "none";
    }else{
        document.getElementById("enable_camera").checked = false;
        document.getElementById("ptz_view").style.display = "none";
        document.getElementById("tof_view").style.width = "100%";
        document.getElementById("tof_settings").style.width = "50%";

        document.getElementById("camera_setting_block").style.display = "none";
        //document.getElementById("camera_setting_block2").style.display = "none";
        document.getElementById("tof_settings0").style.display = "block";
    }

    if(tof_json_enable_ip_setting == true){
        tof_json_enable_ip_setting = true;
        document.getElementById("enable_ip_setting").checked = true;
        var cleanIP = func_IPfilter(document.getElementById("camera_ip").value);

        checkPTZ = showRGBimage(
            cleanIP, // remoteIP
            document.getElementById("camera_username").value, // account
            document.getElementById("camera_password").value // password
        );
    }
    else {
        tof_json_enable_ip_setting = false;
        document.getElementById("enable_ip_setting").checked = false;
    }

    if(tof_json_enable_tof_ground == true)
    {
        document.getElementById("enable_ground").checked = true;
        enable_tof_ground();
    }
    else
    {
        document.getElementById("enable_ground").checked = false;
        enable_tof_ground();
    }

    // if(tof_json_enable_tof_wall == true)
    // {
    //     document.getElementById("enable_wall").checked = true;
    // }
    // else
    // {
    //     document.getElementById("enable_wall").checked = false;
    // }
}

function func_IPfilter(text) {
    var filterConditionHTTP = "http://";
    var filterConditionSlash = "/";

    // console.log("IP address input text:", text);

    if (text.includes(filterConditionHTTP)) {
        // console.log("'" + filterConditionHTTP + "' exist :", text.includes(filterConditionHTTP));
        text = text.replace(filterConditionHTTP, '');
    }

    while (text.includes(filterConditionSlash)) {
        // console.log("'" + filterConditionSlash + "' exist :", text.includes(filterConditionSlash));
        text = text.replace(filterConditionSlash, '');
    }

    // console.log("clean IP address:", text);
    return text;
}

function camera_view_toggle() {
    if ($('#enable_camera').is(":checked")) {
        tof_json_enable_camera = true;
        document.getElementById("ptz_view").style.display = "block";
        document.getElementById("tof_view").style.width = "50%";
        document.getElementById("tof_settings").style.width = "50%";

        document.getElementById("camera_setting_block").style.display = "block";
        //document.getElementById("camera_setting_block2").style.display = "block";
        document.getElementById("tof_settings0").style.display = "none";
    }
    else {
        tof_json_enable_camera = false;
        document.getElementById("ptz_view").style.display = "none";
        document.getElementById("tof_view").style.width = "100%";
        document.getElementById("tof_settings").style.width = "50%";

        document.getElementById("camera_setting_block").style.display = "none";
        //document.getElementById("camera_setting_block2").style.display = "none";
        document.getElementById("tof_settings0").style.display = "block";
    }
}

// 2023-01-05 add pcd view
// function camera_view_toggle() {
//     if ($('#enable_camera').is(":checked")) {
//         tof_json_enable_camera = true;
//         document.getElementById("pcd_view").style.display = "block";
//         document.getElementById("ptz_view").style.display = "block";
//         document.getElementById("tof_view").style.width = "33%";
//         document.getElementById("tof_settings").style.width = "25%";

//         document.getElementById("camera_setting_block").style.display = "block";
//         document.getElementById("camera_setting_block2").style.display = "block";
//         document.getElementById("tof_settings0").style.display = "none";
//     }
//     else {
//         tof_json_enable_camera = false;
//         document.getElementById("pcd_view").style.display = "none";
//         document.getElementById("ptz_view").style.display = "none";
//         document.getElementById("tof_view").style.width = "100%";
//         document.getElementById("tof_settings").style.width = "25%";

//         document.getElementById("camera_setting_block").style.display = "none";
//         document.getElementById("camera_setting_block2").style.display = "none";
//         document.getElementById("tof_settings0").style.display = "block";
//     }
// }



function validatingJSON(json) {
    var checkedjson;
    try {
        checkedjson = JSON.parse(json); //JSON parse only for try catch
        //console.log("json OK");
        //console.log(json);
    } catch (e) {
        checkedjson = null;
        console.log(e);//the character would be drop sometimes, for example the label "class_id" may be "clas_id". 
        //console.log(json);
    }
    return checkedjson;
}



// ===========================================================================================================

// 2023-01-05 original
function createCanvasCamera() {
    canvasTripwire_camera = new fabric.Canvas('canvasTripwireCamera', {
        height: TOF_VIEW_CANVAS_Y,//window.innerHeight
        width: TOF_VIEW_CANVAS_X//window.innerWidth
    });
    canvasTripwire_camera.requestRenderAll();
}

function createCanvasToF() {
    canvasTripwire_tof = new fabric.Canvas('CanvasTripwireToF', {
        height: TOF_VIEW_CANVAS_Y,//window.innerHeight
        width: TOF_VIEW_CANVAS_X//window.innerWidth
    });

    canvasTripwire_tof.requestRenderAll();
}

// function createCanvasCamera() {
//     canvasTripwire_camera = new fabric.Canvas('canvasTripwireCamera', {
//         height: 450,//window.innerHeight
//         width: 600//window.innerWidth
//     });
//     canvasTripwire_camera.requestRenderAll();
// }

// function createCanvasToF() {
//     canvasTripwire_tof = new fabric.Canvas('CanvasTripwireToF', {
//         height: 450,//window.innerHeight
//         width: 600//window.innerWidth
//     });

//     canvasTripwire_tof.requestRenderAll();
// }


// ===========================================================================================================

function enable_camera_change(){
    camera_view_toggle();
    func_setelement("enable_camera", tof_json_enable_camera);
}

function func_setelement(name_, value_) {
    if (debugMode)
        console.log("func_setelement input:", name_, " , value:", value_);

    $.ajax({
        url: "/settofconfig?ch=1&" + name_ + "=" + value_,
        method: "GET",
        async: false,
        beforeSend: function (xmlHttp) {
            xmlHttp.setRequestHeader("If-Modified-Since", "0");
            xmlHttp.setRequestHeader("Cache-Control", "no-cache");
            //xmlHttp.setRequestHeader("Authorization", "Basic " + btoa("username:password"));  
        },
        success: function (res) {
            console.info(res);
        },
        error: function (err) {
            console.warn(err);
        }
    });
    return false;
}

// tmp mark ( not using )
// var g_max_protected_objects = 2;
// var g_enable_show_pixel = 0;
// var radar_msg;
// var radar_dot = [];
// var radar_id_num = 10;
// var trial_array = {};

// function GetAlarmToF(alarm_data) {
//     // console.log("GetAlarmToF");
//     if (!!alarm_data) {
//         var datas;
//         var radar_json;
//         var complete_data = "";
//         var n1 = -1, n2 = -1, n2_temp = -1;

//         var max_protected_objects = 3;
//         // var max_protected_objects = g_max_protected_objects;
//         // if (g_enable_show_pixel === 1) {
//         //     max_protected_objects = g_max_protected_objects + 2;
//         // }

//         complete_data = complete_data.concat(alarm_data);

//         // n1 = complete_data.indexOf('{"AiRadar"');
//         n1 = complete_data.indexOf('"AiRadar"');

//         // n2_temp = complete_data.indexOf('"Type"');
//         n2_temp = complete_data.indexOf('"Speed"');

//         // n2 = complete_data.indexOf('}]}', n2_temp);
//         n2 = complete_data.indexOf('}]}', n2_temp);

//         if (n1 > 0 && n2_temp > 0 && n2 > 0 && (n1 + 7) < n2_temp && n2_temp < n2) {
//             // Ken 2022-09-22
//             // console.log("complete_data");
//             // console.log(complete_data);

//             wait_count = 0;
//             clear_count = 0;

//             complete_data = complete_data.replace(',"AiRadar"', ',\r\{"AiRadar"')

//             // console.log("complete_data");
//             // console.log(complete_data);

//             datas = complete_data.split(/\r\n|\r/);
//             complete_data = "";

//             // console.log("datas");
//             // console.log(datas);

//             //var check_cam_time = 0;
//             //var buffer_cam_time = "";
//             for (var i = datas.length - 1; i >= 0; i--) {
//                 /*
//                 if (datas[i].substring(0, 8) == 'CamTime:') {
//                     buffer_cam_time = "";
//                     buffer_cam_time = datas[i].slice();
//                 }*/
//                 if (datas[i].length > 11 && datas[i].substring(0, 11) == '{"AiRadar":' && datas[i].length < 8192 * 8) {
//                     //datas[i].replace(/\\'/g, "'");
//                     //datas[i].replace('\"', '"');

//                     // console.log(datas[i]);

//                     /*
//                     datas[i].replace('\n', '');
//                     datas[i].replace('\r', '');
//                     datas[i].replace('\t', '');
//                     datas[i].replace('\\', '');
//                     */

//                     /*
//                     var alarm_test = '{"AiEngine":[{"id":0,"channel_id":1,"camera_name":"","res_height":1080,"res_width":1920,"confidence":59,"engine_type":1,"label_name":"car","class_id":2,"obj_type":0,"obj_tracking_id":1,"obj_dwell_time":23,"color_id":0,"color":"","linked_plate":"","x":83,"y":136,"w":215,"h":168,"parent_idx":-1,"behavior_id":0},{"id":1,"channel_id":1,"camera_name":"","res_height":1080,"res_width":1920,"confidence":43,"engine_type":1,"label_name":"car","class_id":2,"obj_type":0,"obj_tracking_id":2,"obj_dwell_time":23,"color_id":0,"color":"","linked_plate":"","x":158,"y":538,"w":218,"h":144,"parent_idx":-1,"behavior_id":0},{"id":2,"channel_id":1,"camera_name":"","res_height":1080,"res_width":1920,"confidence":82,"engine_type":1,"label_name":"car","class_id":2,"obj_type":0,"obj_tracking_id":3,"obj_dwell_time":23,"color_id":0,"color":"","linked_plate":"","x":342,"y":175,"w":321,"h":196,"parent_idx":-1,"behavior_id":0},{"id":3,"channel_id":1,"camera_name":"","res_height":1080,"res_width":1920,"confidence":49,"engine_type":1,"label_name":"car","class_id":2,"obj_type":0,"obj_tracking_id":6,"obj_dwell_time":23,"color_id":0,"color":"","linked_plate":"","x":362,"y":578,"w":253,"h":132,"parent_idx":-1,"behavior_id":0},{"id":4,"channel_id":1,"camera_name":"","res_height":1080,"res_width":1920,"confidence":69,"engine_type":1,"label_name":"car","class_id":2,"obj_type":0,"obj_tracking_id":4,"obj_dwell_time":23,"color_id":0,"color":"","linked_plate":"","x":714,"y":608,"w":239,"h":130,"parent_idx":-1,"behavior_id":0},{"id":5,"channel_id":1,"camera_name":"","res_height":1080,"res_width":1920,"confidence":31,"engine_type":1,"label_name":"car","class_id":2,"obj_type":0,"obj_tracking_id":5,"obj_dwell_time":23,"color_id":0,"color":"","linked_plate":"","x":1035,"y":663,"w":340,"h":179,"parent_idx":-1,"behavior_id":0}],"Count":6}';

//                     ai_json = JSON.parse(alarm_test);*/

//                     /*
//                     if (index_ == 0) {
//                         index_ = 1;
//                         alert(ai_json);
//                     }*/

//                     var temp = null;
//                     temp = datas[i].slice();

//                     radar_json = JSON.parse(temp);
//                     //radar_json = validatingJSON(temp);

//                     // console.log("radar_json", radar_json);

//                     // radar_msg = radar_json;


//                     datas[i] = null;
//                     //check_cam_time = 1;
//                     break;
//                 }

//             }
//             /*
//             if (check_cam_time === 1) {
//                 if (last_cam_time === "") {
//                     last_cam_time = buffer_cam_time;
//                     count_the_same_cam_time++;
//                 }
//                 else if (last_cam_time === buffer_cam_time) {
//                     count_the_same_cam_time++;
//                 }
//                 else {
//                     last_cam_time = buffer_cam_time;
//                     console.log(count_the_same_cam_time);
//                     count_the_same_cam_time = 0;
//                 }
//             }*/
//             if (radar_json != null) {
//                 bbox_count = radar_json.Count;
//             }
//             else {
//                 bbox_count = 0;
//             }

//             plate_count = 0;
//             plate_idx = 0;

//             /*
//             if (bbox_count == 0) {
//                 clear_count_2++;
//             }
//             else {
//                 clear_count_2 = 3;
//             }*/
//             /*if (clear_count_2 >= 3) */
//             {
//                 //clear_count_2 = 0;

//                 // RefreshCanvasObject(max_protected_objects);
//             }

//             //console.log("bbox_count: " + bbox_count.toString());
//             radar_id_num = (Math.random() * 100 % 10) + 1;
//             // console.log("radar_id_num", radar_id_num);
//             if (radar_json != null && (canvasTripwire_speed.getObjects().indexOf(section_line1) != -1)) {
//                 // console.log("radar_circle.radar_line.get('x1')");


//                 // console.log("canvasTripwire_speed.getObjects(radar_dot)", canvasTripwire_speed.getObjects(radar_dot));
//                 // while (canvasTripwire_speed.getObjects().indexOf(radar_dot) != -1) {
//                 //     canvasTripwire_speed.remove(radar_dot);

//                 // }
//                 // console.log("add circle_ptz indexOf:", canvasTripwire_speed.getObjects().indexOf(circle_ptz));
//                 // if (canvasTripwire_speed.getObjects().indexOf(circle_ptz) == -1) {
//                 //     RefreshradarDot(4);
//                 // } else if (canvasTripwire_speed.getObjects().indexOf(circle_ptz) != -1) {
//                 //     RefreshradarDot(5);
//                 // }

//                 // for (var id_index = 0; id_index < 10; id_index++) {
//                 //     canvasTripwire_speed.remove(radar_dot[id_index]);
//                 // }
//                 // console.log("radar_json.AiRadar.RadarArray.length", radar_json.AiRadar.RadarArray.length);
//                 // console.log("canvasTripwire_speed.getObjects().indexOf(0)", canvasTripwire_speed.getObjects().indexOf(radar_dot));

//                 var d = new Date();
//                 // console.log(d);
//                 var getTime_tmp = d.getTime();

//                 //steven modify                
//                 var a_x = radar_circle.radar_line.get('x1');
//                 var a_y = radar_circle.radar_line.get('y1');
//                 var b_x = radar_circle.radar_line.get('x2');
//                 var b_y = radar_circle.radar_line.get('y2');
//                 var ab_len = Math.sqrt((a_x - b_x) * (a_x - b_x) + (a_y - b_y) * (a_y - b_y));
//                 var distance_meter = document.getElementById("slider_distance").value;
//                 var scalex = ab_len / distance_meter;
//                 var rotate_theta = (Math.atan((b_y - a_y) / (b_x - a_x + 0.001)) * 180 / Math.PI) - 90;

//                 //console.log(" sucess log radar data    a x,y", a_x, a_y, "b x,y", b_x, b_y);

//                 if (b_x >= a_x) {
//                     document.getElementById("world_radar_degree").innerHTML = 270 + Math.round(rotate_theta);
//                 }
//                 else {
//                     if (b_y >= a_y) {
//                         document.getElementById("world_radar_degree").innerHTML = 180 + 270 + Math.round(rotate_theta);
//                     }
//                     else {
//                         document.getElementById("world_radar_degree").innerHTML = 90 + Math.round(rotate_theta);
//                     }
//                 }
//                 //steven modify

//                 // console.log("trial_array", trial_array);
//                 // draw_radar_dot();

//             }
//         }
//         else {
//             wait_count++;
//             if (wait_count >= 3) {
//                 wait_count = 0;
//                 complete_data = "";
//             }

//             clear_count++;
//             if (clear_count >= 3) {
//                 clear_count = 0;
//                 // if (canvasTripwire_speed.getObjects().indexOf(circle_ptz) == -1) {
//                 //     RefreshradarDot(4);
//                 // } else if (canvasTripwire_speed.getObjects().indexOf(circle_ptz) != -1) {
//                 //     RefreshradarDot(5);
//                 // }
//                 // RefreshCanvasObject(max_protected_objects);
//             }
//         }


//     }


// }


// #############################################################


function GetUrlPort() {
    var url_href = window.location.href;
    var arr_url = url_href.split(":")[2].split("/")[0];

    return arr_url;
}

var tof_GetRequest = null;
var tof_time_canvas = 250;
var tof_speed = 99999;
var tof_times_update_canvas = 0;
var tof_avg_speed = 7000;
var tof_imgUrl = "";
// var get_bg_count = 0;

function tofGetRequest() {
    clearInterval(tof_GetRequest);
    tof_GetRequest = setInterval(function GetRequest_set_interval() {
        var current_page = localStorage.getItem('current_page');

        if (current_page === 'tof') {
            // TODO:
            // data_tof = sessionStorage.getItem('getalarmmotion_data');
            // GetAlarmToF(data_tof);

            var NowDate = new Date();
            var h = NowDate.getHours();
            var m = NowDate.getMinutes();
            var s = NowDate.getSeconds();
            var ms = NowDate.getMilliseconds();
            
            var tofImgUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/snap?' + 'tof_' + h + '_' + m + '_' + s + '_' + ms;
            tof_imgUrl = tofImgUrl;
            tof_times_update_canvas++;
            
            if (tof_times_update_canvas >= 100) {

                tofMeasureBW((speed) => {
                    tof_speed = speed;
                })

                if (debugMode)
                    console.log(tof_speed + " KB/s");  //215 KB/sec

                tof_times_update_canvas = 0;

                if (tof_speed != 99999) {
                    tof_avg_speed = tof_avg_speed * 0.95 + tof_speed * 0.05;
                }

                if (tof_speed >= 15000 && tof_avg_speed >= 15000) {
                    tof_time_canvas = 100;
                }
                else if (tof_speed >= 10000 && tof_avg_speed >= 10000) {
                    tof_time_canvas = 250;
                }
                else if (tof_speed >= 7000 && tof_avg_speed >= 7000) {
                    tof_time_canvas = 250;
                }
                else if (tof_speed >= 4000 && tof_avg_speed >= 4000) {
                    tof_time_canvas = 250;
                }
                else {
                    tof_time_canvas = 250;
                }

                clearInterval(tof_GetRequest);
                tof_GetRequest = setInterval(GetRequest_set_interval, tof_time_canvas);
            }

            try {
                fabric.Image.fromURL(tofImgUrl, function (img) {
                    if (img != null && img._element != null) {
                        img.set({
                            scaleX: TOF_VIEW_CANVAS_X / img.width,
                            scaleY: TOF_VIEW_CANVAS_Y / img.height,
                        });
                        canvasTripwire_tof.setBackgroundImage(img, () => canvasTripwire_tof.renderAll.bind(canvasTripwire_tof));
                        img = null;
                    }
                });
            }
            catch (e) {
                console.log(e);
            }

            if (canvasTripwire_tof) {
                canvasTripwire_tof.renderAll();
            }

            tofImgUrl = null;
        }
        // ===========================================================================================================
    }, tof_time_canvas);
}

var g_GetPTZimg = null;

function showRGBimage(remoteIP, account, password) {
    clearInterval(g_GetPTZimg);
    g_GetPTZimg = setInterval(function GetPTZimg_set_interval(remoteIP, account, password) {
        // console.log("remoteIP: ", remoteIP, ", account: ", account, ", password: ", password);
        var remotesnapUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/remotesnap' + Math.random();

        if (canvasTripwire_camera) {
            canvasTripwire_camera.renderAll();
        }
        try {
            fabric.Image.fromURL(remotesnapUrl, function (img) {
                if (img != null && img._element != null) {
                    img.set({
                        scaleX: TOF_VIEW_CANVAS_X / img.width,
                        scaleY: TOF_VIEW_CANVAS_Y / img.height,
                    });
                    canvasTripwire_camera.setBackgroundImage(img, () => canvasTripwire_camera.renderAll.bind(canvasTripwire_camera));
                    img = null;
                }
            });
        }
        catch (e) {
            console.log(e);
        }

        remotesnapUrl = null;

    }, tof_time_canvas, remoteIP, account, password);
}

function tofMeasureBW(fn) {
    var tofStartTime, tofEndTime, tofFileSize;
    var tof_xhr = new XMLHttpRequest();
    tof_xhr.onreadystatechange = () => {
        if (tof_xhr.readyState === 2) {
            tofStartTime = Date.now();
        }
        if (tof_xhr.readyState === 4 && tof_xhr.status === 200) {
            tofEndTime = Date.now();
            tofFileSize = tof_xhr.responseText.length;
            //console.log(tofFileSize);

            if (tofEndTime > tofStartTime) {
                var speed = tofFileSize / ((tofEndTime - tofStartTime) / 1000) / 1024;
                fn && fn(Math.floor(speed));
            }
            else {
                var speed = 99999;
                fn && fn(Math.floor(speed));
            }
        }
    }
    tof_xhr.open("GET", tof_imgUrl, true);
    tof_xhr.send();
}

// =======================================================================
// depth point
var clickPoint = null;
var pointInfoText = null;

function getPointText(x, y, depth, distance, height) {
    var text = "";

    var meterToft = 3.2808

    var depthmeter = Math.floor(depth * 1000) / 1000;
    var depthft = Math.floor(depth * meterToft * 1000) / 1000;

    var distancemeter = Math.floor(distance * 1000) / 1000;
    var distanceft = Math.floor(distance * meterToft * 1000) / 1000;

    var heightmeter = Math.floor(height * 1000) / 1000;
    var heightft = Math.floor(height * meterToft * 1000) / 1000;

    if (tof_json_enable_tof_ground) {
        text = "x: " + x + ", " +
            "y: " + y + ", " +
            "Inst: " + depthmeter + "M " + depthft + " Ft,\n" +
            "Dist: " + distancemeter + "M " + distanceft + " Ft, " +
            "Ht: " + heightmeter + "M " + heightft + "Ft";
    } else {
        text = "x: " + x + ", " +
            "y: " + y + ", " +
            "Inst: " + depthmeter + "M " + depthft + "Ft"; 
                //"Dist: " + distancemeter + "M " + distanceft + "Ft, " +
                //"Ht: " + heightmeter + "M " + heightft + "Ft"
    }
    return text;
}

function initClickPoint() {
    if (debugMode)
        console.log("[tof.js] initClickPoint()");

    clickPoint = makeCircle(-clickPointRadius, -clickPointRadius, clickPointRadius, 'red');
    clickPoint.name = "clickPoint";
    canvasTripwire_tof.add(clickPoint);

    var depth = 0.0; 
    var height = 0.0; 
    var distance = 0.0; 
    var textW = 50;
    var textH = 50;

    canvasTripwire_tof.on({
        // 'object:moving': onObjectMoving,
        // 'object:moved': onObjectMoved,
        // 'mouse:wheel': MouseWheel,
        // 'mouse:over': MouseOver,
        // 'mouse:out': MouseOut,
        // 'mouse:move': MouseMove,
        'mouse:down': MouseDown
    });

    function MouseDown(event) {
        // console.log(event.e);
        if (enableClickPoint) {
            var rect = document.getElementById("CanvasTripwireToF").getBoundingClientRect();
            var x = parseInt(event.e.clientX - rect.left);
            var y = parseInt(event.e.clientY - rect.top);
            var halfRadius = ( clickPointRadius / 2 );
            

            // update click point position
            clickPoint.set({
                'left': parseInt(x - halfRadius ),
                'top': parseInt(y - halfRadius )
            });

            var tofX = parseInt(x * ( TOF_IMG_WIDTH  / TOF_VIEW_CANVAS_X ));
            var tofY = parseInt(y * ( TOF_IMG_HEIGHT / TOF_VIEW_CANVAS_Y ));

            if (debugMode) {
                console.log("Canvas coordinate x: " + x, " , y: " + y);
                console.log("ToF coordinate tofX: " + tofX, " , tofY: " + tofY);
            }
            
            // AJAX -> gynet -> tof driver : get depth info by pixel coordinate
            $.ajax({
                url: "http://" + window.location.hostname + ":" + GetUrlPort() + "/gettofpixel?x=" + tofX + "&y=" + tofY + "&angle=" + $('#install_angle').val(),
                // url: "http://" + window.location.hostname + ":" + GetUrlPort() + "/gettofpixel?x=" + tofX + "&y=" + tofY,
                method: "GET",
                async: false,
                beforeSend: function (xmlHttp) {
                    xmlHttp.setRequestHeader("If-Modified-Since", "0");
                    xmlHttp.setRequestHeader("Cache-Control", "no-cache");
                },
                success: function (res) {
                    // console.info(res);
                    var jsonTmp = JSON.parse(res);
                    depth = jsonTmp['depth'];
                    height = jsonTmp['height'];
                    distance = jsonTmp['distance'];
                },
                error: function (err) {
                    console.warn(err);
                }
            });

            // update click point info
            if (!(pointInfoText === null)) {
                canvasTripwire_tof.remove(pointInfoText);
            }

            
            var textX = x + halfRadius;

            var yOffset = 5;
            var textY = y + halfRadius + yOffset;

            // prevent hidden text situation
            var textBoundryX = 200;
            var textBoundryY = 40;
            if (textX > TOF_VIEW_CANVAS_X - textBoundryX) {
                textX -= textBoundryX;
            }
            if (textY > TOF_VIEW_CANVAS_Y - textBoundryY) {
                textY -= textBoundryY;
                textY -= yOffset;
            }

            pointInfoText = insertTextLabel_Color(
                textX, // left
                textY, // top
                textW,
                textH, 
                getPointText(
                    tofX, 
                    tofY, 
                    Number(depth).toFixed(3), 
                    Number(distance).toFixed(2), 
                    Number(height).toFixed(2)
                ), // text info
                textColor,
                stroke_color
            );
            canvasTripwire_tof.add(pointInfoText);
        }
    }
}


// =======================================================================
// ground point


function enable_tof_ground(){
    tof_json_enable_tof_ground = $("#enable_ground").prop("checked");

    if (debugMode)
        console.log("enable_tof_ground() checked:", tof_json_enable_tof_ground);

    if (tof_json_enable_tof_ground) {
        // canvasTripwire_tof.remove(clickPoint);
        // canvasTripwire_tof.remove(pointInfoText);
        initGroundPoint();
    } else {
        canvasTripwire_tof.remove(groundPoint);
        canvasTripwire_tof.remove(groundPointText);

        // hide click point and text
        if (!(clickPoint === null)) {
            clickPoint.set({
                'left': -(clickPointRadius*2),
                'top': -(clickPointRadius*2)
            });
        }
        
        if (!(pointInfoText === null)) {
            canvasTripwire_tof.remove(pointInfoText);
        }
    }

    func_setelement("enable_tof_ground", tof_json_enable_tof_ground);
}

var enableClickPoint = true;

function setToFGround(x, y, angle) {
    var groundPointHeight = 0;

    $.ajax({
        url: "http://" + window.location.hostname + ":" + GetUrlPort() + "/gettofpixel?x=" + x + "&y=" + y + "&angle=" + angle + "&settofheight=1",
        method: "GET",
        async: false,
        beforeSend: function (xmlHttp) {
            xmlHttp.setRequestHeader("If-Modified-Since", "0");
            xmlHttp.setRequestHeader("Cache-Control", "no-cache");
        },
        success: function (res) {
            // console.info(res);
            var jsonTmp = JSON.parse(res);
            // 02-04 update ground point text
            groundPointHeight = jsonTmp['height'];

            if (debugMode) {
                console.log("[tof.js] ground point res:" , jsonTmp);
                console.log("[tof.js] ground point height: ", groundPointHeight);
                console.log("[tof.js] successfully set device height ");
            }
            
        },
        error: function (err) {
            if (debugMode) {
                console.log("[tof.js] set device height error");
                console.warn(err);
            }
        }
    });

    return groundPointHeight;
}


function initGroundPoint() {
    var canvasCenterX = parseInt(tof_json_ground_x,10);
    var canvasCenterY = parseInt(tof_json_ground_y, 10);

    var initX = canvasCenterX - groundPointRadius;
    var initY = canvasCenterY - groundPointRadius;

    var textW = 50;
    var textH = 50;

    var angle = tof_json_install_angle;

    groundPoint = makeCircle(initX, initY, groundPointRadius, 'green');
    groundPoint.name = "groundPoint";
    canvasTripwire_tof.add(groundPoint);

    var groundHeight = setToFGround(initX, initY, angle);

    var meterToft = 3.2808

    var groundHeightmeter = Math.floor(groundHeight * 1000) / 1000;
    var groundHeighthft = Math.floor(groundHeight * meterToft * 1000) / 1000;

    groundPointText = insertTextLabel_Color(
        canvasCenterX - groundPointRadius, // left
        canvasCenterY + groundPointRadius, // top
        textW,
        textH, 
        "Ground: " + groundHeightmeter + " M " + groundHeighthft + " Ft",
        textColor,
        stroke_color
    );
    canvasTripwire_tof.add(groundPointText);

    // ground point events

    canvasTripwire_tof.on('mouse:move', function(e) {
        // console.log(e);
        // console.log("[tof.js] initGroundPoint - tof_json_enable_tof_ground:", tof_json_enable_tof_ground);
        // if (tof_json_enable_tof_ground) {
        if (e.target === null) {
            console.log("check target null >>> can create click point");
            enableClickPoint = true;
        } else {
            // console.log("hover on something >>> do not create clik point");
            // console.log("e.target.name: ", e.target.name);
            if ( (e.target.name == "groundPoint") || (e.target.name == "wallPoint") ) {
                enableClickPoint = false;
            } else {
                // TODO add ground point condition
                enableClickPoint = true;
            }
        }
        // } else {
        //     enableClickPoint = false;
        // }

        // console.log("[tof.js] initGroundPoint - enableClickPoint:", enableClickPoint);
    });

    canvasTripwire_tof.on({
        'object:moving': onObjectMoving,
        'object:moved': onObjectMoved,
        // 'mouse:over': onMouseOver,
        // 'mouse:out': MouseOut,
        // 'mouse:move': MouseMove,
        // 'mouse:down': MouseDown
    });

    function onObjectMoving(e) {

        if (e.target.name == "groundPoint") {
            var p = e.target;
            // console.log(p);
            // var toLeft = p.left;
            // var toTop = p.top;
            if (p.left < 0)
                p.left = 0;
            if (p.left > (TOF_VIEW_CANVAS_X - (groundPointRadius*2)))
                p.left = (TOF_VIEW_CANVAS_X - (groundPointRadius*2));
            if (p.top < 0)
                p.top = 0;
            if (p.top > (TOF_VIEW_CANVAS_Y - (groundPointRadius*2)))
                p.top = (TOF_VIEW_CANVAS_Y - (groundPointRadius*2));

            // console.log("groundPoint moving | x: ", p.top, " , y: ", p.left);

            // update position
            groundPointText.set({
                'left': p.left+(groundPointRadius*2),
                'top':p.top+(groundPointRadius*2)
            });
        }
        
        canvasTripwire_tof.requestRenderAll();
    }

    function onObjectMoved(e) {
        if (e.target.name == "groundPoint") {
            var p = e.target;

            var tofX = parseInt((p.left+groundPointRadius) * ( TOF_IMG_WIDTH  / TOF_VIEW_CANVAS_X ));
            var tofY = parseInt((p.top+groundPointRadius) * ( TOF_IMG_HEIGHT / TOF_VIEW_CANVAS_Y ));

            tof_json_ground_x = tofX.toString();
            tof_json_ground_y = tofY.toString();

            if (debugMode) {
                console.log("[tof.js] ground point - onObjectMoved | x: ", p.left, " , y : ", p.top);
                console.log("[tof.js] ground point - tofX: " + tofX, " , tofY: " + tofY);
            }

            angle = $('#install_angle').val();

            var groundHeight = setToFGround(tofX, tofY, angle);

            var meterToft = 3.2808

            var groundHeightmeter = Math.floor(groundHeight * 1000) / 1000;
            var groundHeighthft = Math.floor(groundHeight * meterToft * 1000) / 1000;

            // update height and position
            canvasTripwire_tof.remove(groundPointText);
            groundPointText = insertTextLabel_Color(
                p.left+(groundPointRadius*2), // left
                p.top+(groundPointRadius*2), // top
                textW,
                textH, 
                "Ground: " + groundHeightmeter + " M " + groundHeighthft + " Ft",
                textColor,
                stroke_color
            );
            canvasTripwire_tof.add(groundPointText);

        }
    }
}

// =======================================================================
// wall point

// function enable_tof_wall(){
//     console.log("enable_tof_wall() checked:");
//     console.log($("#enable_wall").prop( "checked"));

//     var enable_tof_wall = $("#enable_wall").prop("checked");

//     func_setelement("enable_tof_wall", enable_tof_wall);
// }

// =======================================================================
// Unit functions

function insertTextLabel_Color(r_left, r_top, r_width, r_height, showtext, fill_color, stroke_color) {
    var textcontent;
    if ((r_left != null) && (r_top != null) && (r_width != null) && (r_height != null)) {
        textcontent = new fabric.Text(showtext, {
            left: r_left,
            top: r_top,
            width: r_width,
            height: r_height,
            fontFamily: 'helvetica',
            fontSize: 15, 
            fontWeight: '',
            // shadow: { color: 'black', blur: 5 },
            fill: fill_color,
            stroke: stroke_color
        });

    }
    else {
        textcontent = new fabric.Text(showtext, {
            left: 50,
            top: 50,
            width: 50,
            height: 50,
            fontFamily: 'helvetica',
            fontSize: 15,
            fontWeight: '',
            // shadow: { color: 'black', blur: 5 },
            fill: fill_color,
            stroke: stroke_color
        });
    }
    textcontent.setControlsVisibility({
        bl: true,
        br: true,
        tl: true,
        tr: true,
        mt: true,
        mb: true,
        ml: true,
        mr: true,
    });

    disabelIteraction(textcontent);

    return textcontent;
}

function makeCircle(left, top, radius, color) {
    var c = new fabric.Circle({
        left: left - radius,
        top: top - radius,
        strokeWidth: 2,
        radius: radius,
        fill: color,
        stroke: '#FFFFFF'
    });
    c.hasControls = c.hasBorders = false;

    return c;
}


function disabelIteraction(element) {
    //https://github.com/fabricjs/fabric.js/wiki/Preventing-object-modification
    element.lockMovementX = true;	//Prevents horizontal movement
    element.lockMovementY = true;	//Prevents vertical movement
    element.lockScalingX = true;	//Prevents horizontal scaling
    element.lockScalingY = true;	//Prevents vertical scaling
    element.lockUniScaling = true;	//Prevents scaling in either X or Y direction but not in both. In other words, prevents non-proportional scaling of an object.
    element.lockRotation = true;	//Prevents rotation
    element.selectable = false;
    element.evented = false;
}


function check_threshold(option) {
    var targetID = option + "_threshold";
    var threshold = document.getElementById(targetID).value;

    if (threshold > 7.4 || threshold < 0.3) {
        alert("The threshold value shold be 0.3 ~ 7.4. Please redefine the "+ option +" threshold, thanks.");
        $("#"+targetID).val('');
    }
}