/* [radar_speed_share.js] Sections:
Initialization for shared variables
Radar View init
Radar tab UI
Draw radar points
Draw FoV section
Radar tab ruler ( a113n )
Unit functions
*/

// =======================================================================
// Initialization for shared variables
var radarViewWidth = 800;
var radarViewHeight = 600;

var json_world_camera_height;
var json_world_camera_degree;
var json_distance_format;
var json_distance_meter;
var json_world_radar_height;
var json_world_camera_distance;
var json_trial_life_time;
var json_radar_section_degree;
var json_camera_ip;
var json_camera_port;
var json_camera_username;
var json_camera_password;
var json_world_radar_height;
var json_target_x_axis;
var json_target_y_axis;
var json_radar_x_axis;
var json_radar_y_axis;
var json_calibration_radar;

var show_v1_radar = 1;
var show_v2_radar = 1;
var show_v3_radar = 1;

var radar_line = null;
var radar_circle = null;
var circle_radar = null;
var ruler_x_sign = null;
var ruler_y_sign = null;
var section_line1 = null;
var ptz_line
var circle_ptz;
// var ptz_degree_tmp = 0;
// var ptz_degree_offset = 0;

var speedThreshold = 0.1;

var canvasTripwire_radar;
var canvasTripwire_radarPTZ;
var canvasTripwire_speed;
var canvasTripwire_speedCamera;

var rulerRadar = null;
var rulerSpeed = null;

var radarShowImgInterval = "";
var speedShowImgInterval = "";

var g_getPtzImg = null;
var g_getCameraImg = null;

var enalbe_radar_xy_sync = 0;
// =======================================================================
// Radar View init
function func_getRadarData() {
    $.ajax({
        url: "/getradar",
        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);
            json_distance_format = jsonbuf["distance_format"];
            json_distance_meter = jsonbuf["distance_meter"];
            json_world_radar_height = jsonbuf["world_radar_height"];
            
            json_trial_life_time = jsonbuf["trial_life_time"];
            json_radar_section_degree = jsonbuf["radar_section_degree"];

            json_target_x_axis = jsonbuf["target_x_axis"];
            json_target_y_axis = jsonbuf["target_y_axis"];
            json_radar_x_axis = jsonbuf["radar_x_axis"];
            json_radar_y_axis = jsonbuf["radar_y_axis"];
            json_calibration_radar = jsonbuf["calibration_radar"];

            var jsoncamera = jsonbuf["camera"];

            json_world_camera_height = jsoncamera["world_camera_height"];
            json_world_camera_degree = jsoncamera["world_camera_degree"];
            json_world_camera_distance = jsoncamera["world_camera_distance"];

            json_camera_ip = jsoncamera["camera_ip"];
            json_camera_port = jsoncamera["camera_port"];
            json_camera_username = jsoncamera["camera_username"];
            json_camera_password = jsoncamera["camera_password"];

            // console.log(" sucess log radar data radar x,y", json_radar_x_axis, json_radar_y_axis, "target x,y", json_target_x_axis, json_target_y_axis);
        },
        error: function (retdata) {
            console.warn(retdata);
        }

    });
}

function func_getradarjson() {//local storage for radar.html UI setting, need revise leo 10-12 
    $.ajax({
        url: "/getradar",
        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);

            var jsoncamera = jsonbuf["camera"];
            localStorage.setItem('world_camera_height', jsoncamera["world_camera_height"]);
            localStorage.setItem("world_camera_degree", jsoncamera["world_camera_degree"]);
            localStorage.setItem("distance_format", jsonbuf["distance_format"]);
            localStorage.setItem("distance_meter", jsonbuf["distance_meter"]);
            localStorage.setItem("world_radar_height", jsonbuf["world_radar_height"]);
            localStorage.setItem("world_camera_distance", jsoncamera["world_camera_distance"]);
            localStorage.setItem("trial_life_time", jsonbuf["trial_life_time"]);
            localStorage.setItem("radar_section_degree", jsonbuf["radar_section_degree"]);
            localStorage.setItem("camera_ip", jsoncamera["camera_ip"]);
            localStorage.setItem("camera_port", jsoncamera["camera_port"]);
            localStorage.setItem("camera_username", jsoncamera["camera_username"]);
            localStorage.setItem("camera_password", jsoncamera["camera_password"]);
            localStorage.setItem("world_radar_height", jsonbuf["world_radar_height"]);
            localStorage.setItem("target_x_axis", jsonbuf["target_x_axis"]);
            localStorage.setItem("target_y_axis", jsonbuf["target_y_axis"]);
            localStorage.setItem("radar_x_axis", jsonbuf["radar_x_axis"]);
            localStorage.setItem("radar_y_axis", jsonbuf["radar_y_axis"]);
            localStorage.setItem("calibration_radar", jsonbuf["calibration_radar"]);
            localStorage.setItem("enable_ptz", jsonbuf["enable_camera"]);
            localStorage.setItem("enable_ip_setting", jsoncamera["ip_setting"]);
            console.log('jsoncamera["ip_setting"]:', jsoncamera["ip_setting"]);

        },
        error: function (retdata) {
            console.warn(retdata);
        }
    });
}

function createCanvas(canvasVar, canvasName) {
    console.log("[radar_speed_share.js] createCanvas() - canvasName: '" + canvasName + "'");
    canvasVar = new fabric.Canvas('CanvasTripwire_' + canvasName, {
        height: radarViewHeight, // window.innerHeight
        width: radarViewWidth // window.innerWidth
    });
    canvasVar.requestRenderAll();
    return canvasVar;
}

// =======================================================================
// Radar tab UI

function change_show_radar_button_color() {
    if (show_v1_radar == 1) {
        btn_bg_border_color = 
        //document.getElementById("radar_v1").style.background = "#6c87d4";
        document.getElementById("radar_v1").style.background = "#373d40";        
        //document.getElementById("radar_v1").style.borderColor = "#6c87d4";
        document.getElementById("radar_v1").style.borderColor = "#373d40";
        document.getElementById("radar_v1").style.color = "white";
    } else {
        document.getElementById("radar_v1").style.background = "#BABABA";
        document.getElementById("radar_v1").style.borderColor = "#BABABA";
        document.getElementById("radar_v1").style.color = "black";
    }

    if (show_v2_radar == 1) {
        //document.getElementById("radar_v2").style.background = "#6c87d4";
        document.getElementById("radar_v2").style.background = "#ffa321";        
        //document.getElementById("radar_v2").style.borderColor = "#6c87d4";
        document.getElementById("radar_v2").style.borderColor = "#ffa321";

        document.getElementById("radar_v2").style.color = "white";
        //document.getElementById("radar_v2").style.color = "yellow";
    } else {
        document.getElementById("radar_v2").style.background = "#BABABA";
        document.getElementById("radar_v2").style.borderColor = "#BABABA";
        document.getElementById("radar_v2").style.color = "black";
    }

    if (show_v3_radar == 1) {
        //document.getElementById("radar_v3").style.background = "#6c87d4";
        document.getElementById("radar_v3").style.background = "#1445f7";
        //document.getElementById("radar_v3").style.borderColor = "#6c87d4";
        document.getElementById("radar_v3").style.borderColor = "#1445f7";
        
        document.getElementById("radar_v3").style.color = "white";
        //document.getElementById("radar_v3").style.color = "blue";
    } else {
        document.getElementById("radar_v3").style.background = "#BABABA";
        document.getElementById("radar_v3").style.borderColor = "#BABABA";
        document.getElementById("radar_v3").style.color = "black";
    }

    if (show_v1_radar == 1 && show_v2_radar == 1 && show_v3_radar == 1) {
        document.getElementById("radar_vall").style.background = "#6c87d4";
        document.getElementById("radar_vall").style.borderColor = "#6c87d4";
        document.getElementById("radar_vall").style.color = "white";
    } else {
        document.getElementById("radar_vall").style.background = "#BABABA";
        document.getElementById("radar_vall").style.borderColor = "#BABABA";
        document.getElementById("radar_vall").style.color = "black";
    }
}

function func_show_radar_point(btn) {
    var show = btn.value;

    if (show == 'V1') {
        if (show_v1_radar == 0) {
            show_v1_radar = 1;
        } else {
            show_v1_radar = 0;
        }
    }

    if (show == "V2") {
        if (show_v2_radar == 0) {
            show_v2_radar = 1;
        } else {
            show_v2_radar = 0;
        }
    }

    if (show == "V3") {
        if (show_v3_radar == 0) {
            show_v3_radar = 1;
        } else {
            show_v3_radar = 0;
        }
    }

    if (show == 'All') {
        if (show_v1_radar == 0 || show_v2_radar == 0 || show_v3_radar == 0) {
            show_v1_radar = 1;
            show_v2_radar = 1;
            show_v3_radar = 1;
        } else {
            show_v1_radar = 0;
            show_v2_radar = 0;
            show_v3_radar = 0;
        }
    }

    change_show_radar_button_color();
}


// =======================================================================
// Draw radar points

function func_drawRadarPoint(interval, canvas, tab) {
    // console.log("[radar_speed_share.js] func_drawRadarPoint() - canvasName: '" + tab + "'");

    clearInterval(interval);
    interval = setInterval(function drawRadarDot() {
        if (canvas.getObjects().indexOf(circle_ptz) == -1) {
            RefreshradarDot(6, canvas);
            if (tab === "speed") {
                // RefreshradarDot_PTZ(0); // Merge issue
            }
        } else {
            if (tab === "radar") {
                RefreshradarDot(8, canvas);
                canvas.remove(ptz_line);
                console.log("ptz_degree_tmp", parseInt(localStorage.getItem("ptz_degree_tmp")));
                // ptz_degree_tmp = radar_json.ptz_degree;
                var r = 50;
                var theta;
                theta = parseInt(localStorage.getItem("ptz_degree_tmp"));
                console.log("theta", theta);
                ptz_line.set({ 'x1': circle_ptz.left + circle_ptz.radius, 'y1': circle_ptz.top + circle_ptz.radius });
                ptz_line.set({ 'x2': circle_ptz.left + circle_ptz.radius - r * Math.cos(theta * Math.PI / 180), 'y2': circle_ptz.top + circle_ptz.radius - r * Math.sin(theta * Math.PI / 180) });
    
                canvas.add(ptz_line);
            } else {
                // Ken issue
                // speed tab
                RefreshradarDot(7, canvas);
                // RefreshradarDot_PTZ(0);
            }
        }
        var d = new Date();
        // console.log(d);
        var getTime_tmp = d.getTime();
        // console.log("getTime_tmp", getTime_tmp);
        for (var key in trial_array) {
            var rpi = trial_array[key]; // radar point info
            var t = rpi.Type;
            var x = rpi.world_radar_x;
            var y = rpi.world_radar_y;
            var csX = rpi.csX;
            var csY = rpi.csY;
            var c = rpi.C;
            var pointColor = func_getPointColor(json_trial_life_time, t, c);
            var textWidth = 50;
            var textHeight = 50;
            var text = "";
            //console.log(key, t, x, y, c);

            // Issue : =====================
            // draw
            // need add V1,V2,V3 show button
            // draw radar dot & text
            // =============================

            if (t == 1 && show_v1_radar) {
                radar_dot = makedot(
                    x, 
                    y, 
                    pointColor, 
                    Math.round(
                        (c / json_trial_life_time) * 5
                    )
                );
                canvas.add(radar_dot);

                if (c == json_trial_life_time)
                    text =  "FN: " + rpi.FrameNum +
                            " V1 (" + parseInt(x) + "," + parseInt(y) + ")," +
                            " Pos (" + parseFloat(rpi.PosX).toFixed(1) + "," + parseFloat(rpi.PosY).toFixed(1) + "," + parseFloat(rpi.PosZ).toFixed(1) + ")";
                    canvas.add(
                        insertTextLabel_Color(
                            x + (radar_dot.radius * 2), 
                            y + (radar_dot.radius * 2), 
                            textWidth,
                            textHeight, 
                            text,
                            pointColor
                        )
                    );
                // canvas.add(insertTextLabel_Color(x + (radar_dot.radius * 2), y + (radar_dot.radius * 2), 50, 50, "FN: " + rpi.FrameNum + " V1 (" + parseInt(x) + "," + parseInt(y) + "), Pos (" + parseFloat(rpi.PosX).toFixed(1) + "," + parseFloat(rpi.PosY).toFixed(1) + "," + parseFloat(rpi.PosZ).toFixed(1) + "), json(" + parseInt(rpi.json_world_radar_x) + "," + parseInt(rpi.json_world_radar_y) + ")", pointColor));
            } else if (t == 2 && show_v2_radar) {
                radar_dot = makedot( x, y, pointColor, 5);
                canvas.add(radar_dot);
                if (c == json_trial_life_time) {
                    canvas.add(
                        makerect(
                            x, 
                            y, 
                            csX, 
                            csY
                        )
                    );

                    text =  "FN: " + rpi.FrameNum +
                            " [DEBUG] V2 (" + parseInt(x) + "," + parseInt(y) + ")," +
                            "Pos (" + parseFloat(rpi.PosX).toFixed(1) + "," + parseFloat(rpi.PosY).toFixed(1) + ")";

                    canvas.add(
                        insertTextLabel_Color(
                            x + (radar_dot.radius * 2),
                            y + (radar_dot.radius * 2),
                            textWidth,
                            textHeight,
                            text,
                            pointColor
                        )
                    );
                    // canvas.add(insertTextLabel_Color(x + (radar_dot.radius * 2), y + (radar_dot.radius * 2), 50, 50, "FN: " + rpi.FrameNum + " [DEBUG] V2 (" + parseInt(x) + "," + parseInt(y) + "), Pos (" + parseFloat(rpi.PosX).toFixed(1) + "," + parseFloat(rpi.PosY).toFixed(1) + "), json(" + parseInt(rpi.json_world_radar_x) + "," + parseInt(rpi.json_world_radar_y) + ")", pointColor));
                }
            } else if (t == 3 && show_v3_radar && Math.abs(rpi.Speed) > speedThreshold) {
                radar_dot = makedot(
                    x,
                    y,
                    pointColor,
                    10
                );
                canvas.add(radar_dot);
                if (c == json_trial_life_time)
                    if (localStorage.getItem("speed_unit") == "MPH") { // KPH to MPH
                        console.log("KPH : ", rpi.Speed);
                        rpi.Speed = Math.round(rpi.Speed * 0.6213712 * 10) / 10
                        console.log("MPH : ", rpi.Speed);
                        console.log("-----------------");
                    }

                    text = "FN: " + rpi.FrameNum +
                    " V3 (" + parseInt(x) + "," + parseInt(y) + ")," +
                    " Pos (" + parseFloat(rpi.PosX).toFixed(1) + "," + parseFloat(rpi.PosY).toFixed(1) + ")," +
                    " Speed: " + parseFloat(rpi.Speed).toFixed(1);

                    canvas.add(
                        insertTextLabel_Color(
                            x + (radar_dot.radius * 2), 
                            y + (radar_dot.radius * 2), 
                            textWidth, 
                            textHeight,
                            text,
                            pointColor
                        )
                    );
                // canvas.add(insertTextLabel_Color(x + (radar_dot.radius * 2), y + (radar_dot.radius * 2), 50, 50, "FN: " + rpi.FrameNum + " V3 (" + parseInt(x) + "," + parseInt(y) + "), Pos (" + parseFloat(rpi.PosX).toFixed(1) + "," + parseFloat(rpi.PosY).toFixed(1) + ") Speed: " + parseFloat(rpi.Speed).toFixed(1) + " , json(" + parseInt(rpi.json_world_radar_x) + "," + parseInt(rpi.json_world_radar_y) + ")", color_tmp));
            }

            //C-1
            // var tmp_int = 128;
            // console.log("HEX",tmp_int.toString(16));

            //C-1
            // console.log("pointColor", pointColor);
            // c = c - 1;

            // console.log("json_trial_life_time", json_trial_life_time, "getTime_tmp", getTime_tmp, "rpi.time", rpi.time);
            // console.log((json_trial_life_time * 1000) - (getTime_tmp - rpi.time));

            rpi.C = Math.round(((json_trial_life_time * 1000) - (getTime_tmp - rpi.time)) / 1000);
            // console.log("c", c);
            //console.log(key, x, y, c);
            if (c < json_trial_life_time && t == 2) {
                delete trial_array[key];
            } else if (c <= 0) {
                delete trial_array[key];
            }
        }
        // console.log("getTime_tmp", getTime_tmp, "trial_array", trial_array);
    }, 50);
}

function func_getPointColor(trial_life_time, point_type, c) {
    var a; // alpha
    var color = '#'; // HTML color index in hex

    if (trial_life_time == 0) {
        a = Math.round(((c + 0.9) / (trial_life_time + 0.9)) * 256) - 1;
    } else {
        a = Math.round(((c) / (trial_life_time)) * 256) - 1;
    }
    if (a > 255)
        a = 255;
    if (a < 0)
        a = 0;

    if (point_type == 3) {
        color += '6c87d4'; // V3 color
    } else if (point_type == 2) {
        color += 'fd9600'; // V2 color
    } else {
        color += '5c5c5c'; // V1 color
    }

    return color + a.toString(16);
}


// =======================================================================
// Draw FoV section

function func_drawRadarSection(tab) {
    // console.log("[radar_speed_share.js] func_drawRadarSection() - tab : '" + tab + "'");
    // var radar_line = makeLine([395, 555, 395, 100]);
    radar_line = makeLine([json_radar_x_axis, json_radar_y_axis, json_target_x_axis, json_target_y_axis]);
    radar_circle = makeCircle(json_target_x_axis, json_target_y_axis, radar_line, 'gray', 12);

    radar_circle.name = "radar_circle";

    circle_radar = makeCircle(json_radar_x_axis, json_radar_y_axis, radar_line, 'red', 12);
    circle_radar.name = "circle_radar";
    // circle_radar = new fabric.Circle({
    //     radius: 20, fill: 'red', left: 380, top: 550, selectable: false,
    // })
    //ruler sign
    ruler_x_sign = makeTriangle(100, 10, 'red', 20, 0);
    ruler_x_sign.name = "ruler_x_sign";

    ruler_y_sign = makeTriangle(20, 100, 'red', 20, 90);
    ruler_y_sign.name = "ruler_y_sign";
    //draw section//

    section_line1 = new fabric.Path('M 100 200 Q 400, 50, 700, 200 L 400 550 L 100 200 z', { fill: '#f5f5f580', stroke: 'black', strokeWidth: 5, objectCaching: false, selectable: false, evented: false });
    // var section_line1 = new fabric.Path('M 100 200', { fill: '', stroke: 'black', strokeWidth: 5, objectCaching: false, selectable: false });
    //console.log("radar x,y", json_radar_x_axis, json_radar_y_axis, "target x,y", json_target_x_axis, json_target_y_axis);

    // #6c87d4 opacity: 1


    // var section_line1 = new fabric.Path('M 400 550 L 100 200 z', { fill: '', stroke: 'yellow', objectCaching: false, selectable: false });
    // var section_line2 = new fabric.Path('M 400 550 L 700, 200 z', { fill: '', stroke: 'yellow', objectCaching: false, selectable: false });
    // var section_line3 = new fabric.Path('M 100 200 Q 400, 50, 700, 200 z', { fill: '', stroke: 'yellow', objectCaching: false, selectable: false });

    section_line1.path[2][1] = json_radar_x_axis;//localStorage.getItem("radar_x_axis");
    section_line1.path[2][2] = json_radar_y_axis;//localStorage.getItem("radar_y_axis");
    section_line1.path[1][1] = json_target_x_axis;//localStorage.getItem("target_x_axis");
    section_line1.path[1][2] = json_target_y_axis;//localStorage.getItem("target_y_axis");

    // console.log("ab_len:" + ab_len);
    var theta = json_radar_section_degree;
    var c_x = (Math.cos((-theta / 2) * Math.PI / 180) * (json_target_x_axis - json_radar_x_axis) - Math.sin((-theta / 2) * Math.PI / 180) * (json_target_y_axis - json_radar_y_axis)) + json_radar_x_axis;
    var c_y = (Math.sin((-theta / 2) * Math.PI / 180) * (json_target_x_axis - json_radar_x_axis) + Math.cos((-theta / 2) * Math.PI / 180) * (json_target_y_axis - json_radar_y_axis)) + json_radar_y_axis;
    //console.log("c_x,c_y:" + c_x + c_y);
    section_line1.path[0][1] = c_x;
    section_line1.path[0][2] = c_y;
    section_line1.path[3][1] = c_x;
    section_line1.path[3][2] = c_y;

    var d_x = (Math.cos((theta / 2) * Math.PI / 180) * (json_target_x_axis - json_radar_x_axis) - Math.sin((theta / 2) * Math.PI / 180) * (json_target_y_axis - json_radar_y_axis)) + json_radar_x_axis;
    var d_y = (Math.sin((theta / 2) * Math.PI / 180) * (json_target_x_axis - json_radar_x_axis) + Math.cos((theta / 2) * Math.PI / 180) * (json_target_y_axis - json_radar_y_axis)) + json_radar_y_axis;
    //console.log("d_x,d_y:" + d_x + d_y);
    section_line1.path[1][3] = d_x;
    section_line1.path[1][4] = d_y;

    radar_line.set({ 'x1': json_radar_x_axis, 'y1': json_radar_y_axis, 'x2': json_target_x_axis, 'y2': json_target_y_axis });

    circle_radar.set({ 'left': json_radar_x_axis - 12, 'top': json_radar_y_axis - 14 });
    radar_circle.set({ 'left': json_target_x_axis - 12, 'top': json_target_y_axis - 14 });
    if (tab === "radar") {
        ptz_line = new fabric.Line([100, 300, 150, 300], {
            fill: '#ff1493',
            stroke: '#ff1493',
            strokeWidth: 5,
            selectable: false,
            evented: false,
        });
        ptz_line.name = "ptz_line";
        // ptz_line = AddArrowObject(100, 300, 150, 300);

        circle_ptz;
        circle_ptz = makeCircle(ptz_line.get('x1') - 18, ptz_line.get('y1') - 20, ptz_line, 'yellow', 20);

        circle_ptz.name = "circle_ptz";
        circle_ptz.hasControls = circle_ptz.hasBorders = false;
    }
}

// =======================================================================
// Ruler ( a113n )
function enable_xy_sync(e){
    //$('#slider_distance_y').slider('setValue', 100);
    
    //if ($('#enable_ptz').is(":checked")) {
    if (e.checked) {
        enalbe_radar_xy_sync = 1;                
    }
    else {
        enalbe_radar_xy_sync = 0;
    } 
    
    if (enalbe_radar_xy_sync == 1) {
        var distance_meter_x = document.getElementById("slider_distance").value;                
        $('#slider_distance_y').slider('setValue', distance_meter_x);
    }

}

function set_ruler(rulerVar, tab) {
    // console.log("[radar_speed_share.js] set_ruler() tab:", tab);
    // console.log(document.getElementById("ruler_wrapper_" + tab));
    rulerVar = new ruler({
        container: document.getElementById("ruler_wrapper_" + tab), // reference to DOM element to apply rulers on
        rulerHeight: 30, // thickness of ruler
        fontFamily: 'arial',// font for points
        fontSize: '15px',
        strokeStyle: 'black',
        lineWidth: 1,
        enableMouseTracking: true,
        enableToolTip: true
    });
    return rulerVar;
}

function rescale_ruler(rulerVar) {
    var scale_factor = cal_ruler_scale();
    //console.log("[rescale_ruler]" + document.getElementById("distance_format").value);

    if (scale_factor > 0) {
        rulerVar.api.setScale(scale_factor);
        //rulerVar.api.setScale(scale_factor); //15=0.01875
    }
    else // some error msg maybe?
    {
        console.log("scale_factor is less than zero.");
        rulerVar.api.setScale(1);
    }

    //draw section
    rulerVar.api.setPos({ x: circle_radar.left - (circle_radar.radius / 2) - 12, y: circle_radar.top - (circle_radar.radius / 2) - 14 });
    ruler_x_sign.set({ 'left': circle_radar.left + (circle_radar.radius / 2) + (ruler_x_sign.width / 2) - 14, 'top': 10 });
    ruler_y_sign.set({ 'left': 20, 'top': circle_radar.top + (circle_radar.radius / 2) + (ruler_y_sign.width / 2) - 16 });
    console.log("rescale_ruler()");
}

function cal_ruler_scale() {
    var scale_factor = 1;
    var distance = document.getElementById("slider_distance").value;

    // if (document.getElementById("distance_format").value == "meter") {
    if (localStorage.getItem("distance_format") == "meter") {
        
        scale_factor = (distance / 150) * 0.1875; // 150/800 = 0.1875
    }
    // else if (document.getElementById("distance_format").value == "feet") {
    else if (localStorage.getItem("distance_format") == "feet") {
        scale_factor = (distance / 500) * 0.625; // 500/800 = 0.625
    }
    else {
        scale_factor = -1;
    }

    return scale_factor;
}

function sent_ruler_scale_value() {
    //Mark at 20230110 Steven
    /* 
    // $("#IFRAME_RADAR").prop("scrolling", "no");
    var delta = e.e.deltaY;
    console.log("e:", e);
    console.log("delta:", delta);
    // var zoom = canvas.getZoom();
    // var zoom;
    // zoom = 0.999 ** delta;
    // if (zoom > 20) zoom = 20;
    // if (zoom < 0.01) zoom = 0.01;
    // console.log("zoom:", zoom);

    if (delta > 0) {
        // console.log("document.getElementById(slider_distance).value:", parseInt(document.getElementById("slider_distance").value) + 5);
        $('#slider_distance').slider('setValue', parseInt(document.getElementById("slider_distance").value) + 5);
    } else if (delta < 0) {
        // console.log("document.getElementById(slider_distance).value:", document.getElementById("slider_distance").value - 5);
        $('#slider_distance').slider('setValue', document.getElementById("slider_distance").value - 5);
    }
    // canvas.setZoom(zoom);
    // opt.e.preventDefault();
    // opt.e.stopPropagation();
    // $("#IFRAME_RADAR").prop("scrolling", "yes");
    */

    rescale_ruler(rulerRadar);
    
    func_setelement("distance_meter", document.getElementById("slider_distance").value);
    
    func_setelement("distance_meter_y", document.getElementById("slider_distance_y").value);
}

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

function insertTextLabel_Color(r_left, r_top, r_width, r_height, showtext, fill_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
        });

    }
    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
        });
    }
    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, radar_line, color) {
    var c = new fabric.Circle({
        left: left - 12,
        top: top - 12,
        strokeWidth: 2,
        radius: 12,
        fill: color,
        stroke: '#FFFFFF'
    });
    c.hasControls = c.hasBorders = false;

    c.radar_line = radar_line;


    return c;
}

function makeTriangle(left, top, color, radius, angle) {
    var c = new fabric.Triangle({
        left: left,
        top: top,
        width: radius,
        height: radius,
        fill: color,
        stroke: '#FFFFFF',
        angle: angle
    });
    c.hasControls = c.hasBorders = false;
    return c;
}

function makeLine(coords) {
    return new fabric.Line(coords, {
        fill: 'red',
        stroke: 'red',
        strokeWidth: 5,
        selectable: false,
        evented: false
    });
}

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

function makerect(left, top, width, height) {
    var c = new fabric.Rect({
        top: parseInt(top - (Math.abs(height) / 2)),
        left: parseInt(left - (Math.abs(width) / 2)),
        width: parseInt(Math.abs(width)),
        height: parseInt(Math.abs(height)),
        strokeWidth: 2,
        fill: '#00960000',//fd960000
        stroke: '#009600',//fd9600
        evented: false
    });
    c.hasControls = c.hasBorders = false;
    return c;
}

function RefreshradarDot(protected_objects, canvas) {
    while (canvas.getObjects().length > protected_objects) {
        var items = canvas.getObjects();
        if (items[canvas.getObjects().length - 1]) {
            canvas.remove(items[canvas.getObjects().length - 1]);
        }
    }
}

// Merge issue
// function RefreshradarDot_PTZ(protected_objects) {
//     while (canvasTripwire_speedCamera.getObjects().length > protected_objects) {
//         var items = canvasTripwire_speedCamera.getObjects();
//         if (items[canvasTripwire_speedCamera.getObjects().length - 1]) {
//             canvasTripwire_speedCamera.remove(items[canvasTripwire_speedCamera.getObjects().length - 1]);
//         }
//     }
// }

// 2022-12-29 Merge issue : multible defined in all .js
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 func_getRadarInfo(tab, canvas, imgInterval) {
    // 原 func_getradarinfo()
    console.log("[radar_speed_share.js] func_getRadarInfo() TAB: ", tab);

    $('#trial_life_time').val(localStorage.getItem("trial_life_time"));

    $('#radar_height').val(localStorage.getItem("world_radar_height"));
    $('#distance_format').val(localStorage.getItem("distance_format"));
    $('#ptz_height').val(localStorage.getItem("world_camera_height"));
    $('#slider_distance').slider('setValue', localStorage.getItem("distance_meter"));
    $('#ptz_degree').slider('setValue', localStorage.getItem("world_camera_degree"));
    document.getElementById("TEXT_DISTANCE_FORMAT1").innerHTML = TEXT_DISTANCE_FORMAT;
    document.getElementById("TEXT_DISTANCE_FORMAT2").innerHTML = TEXT_DISTANCE_FORMAT;
    if (tab == "radar") {
        document.getElementById("TEXT_DISTANCE_FORMAT3").innerHTML = TEXT_DISTANCE_FORMAT;
    }

    $('#world_radar_degree').val(localStorage.getItem("world_radar_degree"));
    
    if (tab == "radar") {
        $('#radar_section_degree').val(localStorage.getItem("radar_section_degree"));
    }

    $('#camera_ip').val(localStorage.getItem("camera_ip"));
    $('#camera_port').val(localStorage.getItem("camera_port"));
    $('#camera_username').val(localStorage.getItem("camera_username"));
    $('#camera_password').val(localStorage.getItem("camera_password"));
    document.getElementById("calibration_radar").checked = true;
    enable_calibration_radar_temp = "Yes";
    // 11-16 memory enable ptz & ip setting
    // console.log("localStorage.getItem(enable_ptz)",localStorage.getItem("enable_ptz"));
    if(localStorage.getItem("enable_ptz") == "true")
    {
        document.getElementById("enable_ptz").checked = true;
        enable_ptz_temp = "Yes";
        document.getElementById("ptz_view").style.display = "block";
        document.getElementById("radar_view").style.width = "50%";
        document.getElementById("radar_settings").style.width = "25%";
        document.getElementById("radar_settings2").style.width = "25%";
        document.getElementById("ptz_setting_block").style.display = "block";
        document.getElementById("ptz_setting_block2").style.display = "block";
        document.getElementById("radar_settings0").style.display = "none";
        // console.log("set .getItem(enable_ptz) YES",localStorage.getItem("enable_ptz"));
    }else{
        document.getElementById("enable_ptz").checked = false;
        enable_ptz_temp = "No";
        document.getElementById("ptz_view").style.display = "none";
        document.getElementById("radar_view").style.width = "100%";
        document.getElementById("radar_settings").style.width = "25%";
        document.getElementById("radar_settings2").style.width = "25%";
        document.getElementById("ptz_setting_block").style.display = "none";
        document.getElementById("ptz_setting_block2").style.display = "none";
        document.getElementById("radar_settings0").style.display = "block";
        // console.log("set .getItem(enable_ptz) NO",localStorage.getItem("enable_ptz"));
    }
    // console.log("localStorage.getItem(ip_setting)",localStorage.getItem("enable_ip_setting"));

    if(localStorage.getItem("enable_ip_setting") == "true"){
        // console.log("set .getItem(enable_ip_setting) YES",localStorage.getItem("enable_ip_setting"));
        enable_ip_setting_temp = "true";
        localStorage.setItem("enable_ip_setting", "true");
        document.getElementById("enable_ip_setting").checked = true;
        // var ip = document.getElementById("camera_ip").value;
        // var user = document.getElementById("camera_username").value;
        // var pwd = document.getElementById("camera_password").value;
        // if (tab === "radar") {
        //     showPTZimage(ip, user, pwd);
        // } else if (tab === "speed") {
        //     showCameraImage(ip, user, pwd);
        // }
        canvas, imgInterval = showRGBimage(
            canvas,
            imgInterval,
            document.getElementById("camera_ip").value, // remoteIP
            document.getElementById("camera_username").value, // account
            document.getElementById("camera_password").value // password
        );
    }
    else {
        enable_ip_setting_temp = "false";
        localStorage.setItem("enable_ip_setting", "false");
        document.getElementById("enable_ip_setting").checked = false;
        // if (tab === "radar") {
        //     clearInterval(g_getPtzImg);
        // } else if (tab === "speed") {
        //     clearInterval(g_getCameraImg);
        // }

        clearInterval(imgInterval);
        
        var canvasSuffix = "";
        if (tab === "radar") {
            canvasSuffix = "radarPTZ";
        } else if (tab === "speed") {
            canvasSuffix = "speedCamera";
        }
        // console.log("canvasSuffix:", canvasSuffix);
        var cxt = document.getElementById("CanvasTripwire_" + canvasSuffix).getContext("2d");
        cxt.clearRect(0,0,canvas.width,canvas.height); 
    }

    // Issue
    // console.log('localStorage.getItem("calibration_radar").checked :',localStorage.getItem("calibration_radar"));
    // console.log('document.getElementById(calibration_radar).checked',document.getElementById("calibration_radar").checked);
    // if (localStorage.getItem("calibration_radar") == "true") {
    //     document.getElementById("enable_calibration_radar").checked = true;
    //     console.log('document.getElementById(enable_calibration_radar).checked',document.getElementById("enable_calibration_radar").checked);
    //     mix_scale_radar_visible();
    //     console.log('document.getElementById(enable_calibration_radar).checked',document.getElementById("enable_calibration_radar").checked);
    // }else {
    //     document.getElementById("enable_calibration_radar").checked = false;
    //     console.log('document.getElementById(enable_calibration_radar).checked',document.getElementById("enable_calibration_radar").checked);
    //     mix_scale_radar_hidden();
    //     console.log('document.getElementById(enable_calibration_radar).checked',document.getElementById("enable_calibration_radar").checked);
    // }
    return canvas, imgInterval;
}




function showRGBimage(canvas, interval, remoteIP, account, password) {
    
    clearInterval(interval);

    interval = setInterval(function getRGBimgSetInterval(remoteIP, account, password, canvas) {

        var remotesnapUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/remotesnap' + Math.random();

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

        if (localStorage.getItem("enable_ip_setting") === "true") {
            console.log("remoteIP: ", remoteIP, ", account: ", account, ", password: ", password);
            try {
                fabric.Image.fromURL(remotesnapUrl, function (img) {
                    if (img != null && img._element != null) {
                        img.set({
                            scaleX: radarViewWidth / img.width,
                            scaleY: radarViewHeight / img.height,
                        });
                        canvas.setBackgroundImage(img, () => canvas.renderAll.bind(canvas));
                        img = null;
                    }
                });
            }
            catch (e) {
                console.log(e);
            }
        }

        remotesnapUrl = null;

    }, g_time_canvas, remoteIP, account, password, canvas);

    return canvas, interval;
}

// function showPTZimage(remoteIP, account, password) {
//     clearInterval(g_getPtzImg);
//     g_getPtzImg = setInterval(function GetPTZimg_set_interval(remoteIP, account, password) {
//         console.log("[share.js] showPTZimage() - remoteIP: ", remoteIP, ", account: ", account, ", password: ", password);
//         var remotesnapUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/remotesnap' + Math.random(); // TODO 要能夾帶上述變數進去

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

//         remotesnapUrl = null;
//         // return "Success";

//     }, g_time_canvas, remoteIP, account, password);
// }

// function showCameraImage(remoteIP, account, password) {
//     clearInterval(g_getCameraImg);
//     g_getCameraImg = 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(); // TODO 要能夾帶上述變數進去

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

//         remotesnapUrl = null;
//         return "Success";

//     }, g_time_canvas, remoteIP, account, password);
// }