emmc_python/Aida/alarm_on_airelay.js

var canvasTripwire;
var canvasTripwire_all;
var click_canvas_all = 0;
var click_cold_set = 0;
var click_mouse_set = 0;

var canvasTripwire1;
var canvasTripwire2;
var canvasTripwire3;
var canvasTripwire4;
var canvasTripwire5;
var canvasTripwire6;
var canvasTripwire7;
var canvasTripwire8;
var canvasTripwire_default;
var TripwireTrafficMode = 0;//0:Traffic Light,1:Tripwire
var TrafficLineMode = 0;//0:Rect,1:Line
var g_Ctrl_InfoTrafficLight = [];//0:index,1:left,2:top,3:width,4:height,5:direct,6:Traffic Light
var MAX_SIZE_POINTS = 6;
var MAX_DETECTION_ZONE = 8;
var count_zone = 0;

var MAX_COLDOBJECTS = 8;
var ready_to_reboot = 0;
// 08-26 影像尺寸 ( 480x320 , 3:2 ) 改滿版 ( 720 : 480 )
var G_VIEW_CANVAS_X = 720; // 480
var G_VIEW_CANVAS_Y = 480; // 320

var G_CAM_VIDEO_RES_WIDTH = 1920;
var G_CAM_VIDEO_RES_HEIGHT = 1080;

var G_CANVAS_WIDTH_RATIO = (G_VIEW_CANVAS_X / G_CAM_VIDEO_RES_WIDTH).toFixed(3);
var G_CANVAS_HEIGHT_RATIO = (G_VIEW_CANVAS_Y / G_CAM_VIDEO_RES_HEIGHT).toFixed(3);
var g_canvas_text_y_offset = 20; // canvas px


var MAX_MOVE_RADIUS = 30;

var MAX_HEIGHT = G_VIEW_CANVAS_Y;
var MAX_WIDTH = G_VIEW_CANVAS_X;

var g_check_cross = 0;

var current_state_hide_or_open_label = 0;
var current_state_hide_or_open_direction = 0;
var current_state_hide_or_open_speed = 0;
var current_state_hide_or_open_getalarmmotion = 1;

var currentPointPosition1 = new Array(MAX_SIZE_POINTS);
var currentPointPosition2 = new Array(MAX_SIZE_POINTS);
var currentPointPosition3 = new Array(MAX_SIZE_POINTS);
var currentPointPosition4 = new Array(MAX_SIZE_POINTS);
var currentPointPosition5 = new Array(MAX_SIZE_POINTS);
var currentPointPosition6 = new Array(MAX_SIZE_POINTS);
var currentPointPosition7 = new Array(MAX_SIZE_POINTS);
var currentPointPosition8 = new Array(MAX_SIZE_POINTS);

var parking_space = new Array(MAX_DETECTION_ZONE);
var parking_line = new Array(MAX_DETECTION_ZONE);

var coldobjects_X = new Array(MAX_COLDOBJECTS);
var coldobjects_Y = new Array(MAX_COLDOBJECTS);
var coldobjects_W = new Array(MAX_COLDOBJECTS);
var coldobjects_H = new Array(MAX_COLDOBJECTS);
var coldobjects_Object = new Array(MAX_COLDOBJECTS);
var check_if_existing_coldobjects = 0;

var g_tof_enable_show_distance = 0;
var g_tof_enable_show_height = 0;

{
    for (var i = 0; i < MAX_COLDOBJECTS; i++) {
        coldobjects_X[i] = 0;
        coldobjects_Y[i] = 0;
        coldobjects_W[i] = 0;
        coldobjects_H[i] = 0;
        coldobjects_Object[i] = "";
    }
}

var counter_count_msg = "";

var different_index = 0;

var g_drawing_canvas =
{
    bounding_left: -1,
    bounding_top: -1,
    down_x: -1,
    down_y: -1,
    move_x: -1,
    move_y: -1,
    draw_x: -1,
    draw_y: -1,
    draw_w: -1,
    draw_h: -1,
    direct: 1
};

var g_max_protected_objects = 2;

var g_tcp_tunnel_token = "airelay";


// ------------------------------
// LPR 相關部分

var MAX_LPR_ARRAY = 18;
var MAX_LPR_SHIFT = 5;
var LPR_Array = Array(MAX_LPR_ARRAY);
var LPR_confidence_array = Array(MAX_LPR_ARRAY);
var LPR_area_array = Array(MAX_LPR_ARRAY);
var LPR_color_array = Array(MAX_LPR_ARRAY);
var LPR_sec_color_array = Array(MAX_LPR_ARRAY);
var LPR_car_type_name_array = Array(MAX_LPR_ARRAY);
var LPR_center_direction_array = Array(MAX_LPR_ARRAY);

var MAX_LPBMP_ARRAY = 18;
var LPBMP_Array = Array(MAX_LPBMP_ARRAY); // lpr img path
//var LPR_Array = Array(MAX_LPBMP_ARRAY); // lpr text 
//var LPRC_Array = Array(MAX_LPBMP_ARRAY); // lpr contry

{
    for (var i = 0; i < MAX_LPR_ARRAY; i++) {
        LPR_Array[i] = "NULL";
        LPR_confidence_array[i] = "NULL";
        LPR_area_array[i] = "NULL";
        LPR_color_array[i] = "NULL";
        LPR_sec_color_array[i] = "NULL";
        LPR_car_type_name_array[i] = "NULL";
        LPR_center_direction_array[i] = "NULL";
    } 
}

{// LPBMP
    for (var i = 0; i < MAX_LPBMP_ARRAY; i++) {
        LPBMP_Array[i] = "NULL";
    } 
}

function push_lpr(mylpr, myarea, myconfidence, mycolor, myseccolor,mycartype,mycenter_direction) {
    for (var i = 0; i < MAX_LPR_ARRAY; i++) {
        if (LPR_Array[i] === "NULL") {
            LPR_Array[i] = mylpr;
            LPR_confidence_array[i] = myconfidence;
            LPR_area_array[i] = myarea;
            LPR_color_array[i] = mycolor;
            LPR_sec_color_array[i] = myseccolor;
            LPR_car_type_name_array[i] = mycartype;
            LPR_center_direction_array[i] = mycenter_direction;
            break;
        }
        else {

            if (i === MAX_LPR_ARRAY - 1) {
                var j = 0;
                for (j = 0; j < MAX_LPR_ARRAY - 1; j++) {
                    LPR_Array[j] = LPR_Array[j + 1];
                    LPR_confidence_array[j] = LPR_confidence_array[j + 1];
                    LPR_area_array[j] = LPR_area_array[j + 1];
                    LPR_color_array[j] = LPR_color_array[j + 1];
                    LPR_sec_color_array[j] = LPR_sec_color_array[j + 1];
                    LPR_car_type_name_array[j] = LPR_car_type_name_array[j + 1];
                    LPR_center_direction_array[j] = LPR_center_direction_array[j + 1];
                }
                LPR_Array[j] = mylpr;
                LPR_confidence_array[j] = myconfidence;
                LPR_area_array[j] = myarea;
                LPR_color_array[j] = mycolor;
                LPR_sec_color_array[j] = myseccolor;
                LPR_car_type_name_array[j] = mycartype;
                LPR_center_direction_array[j] = mycenter_direction;
            }
        }
    }
}


function push_LPBMP(jsonbuf){
    var new_LPBMP_path = jsonbuf.LPR_BMP;
    console.log("new_LPBMP_path:", new_LPBMP_path);

    if (LPBMP_Array[MAX_LPBMP_ARRAY - 1] != "NULL") {
        var j = 0;
        for (j = 0; j < MAX_LPBMP_ARRAY - 1; j++) {
            LPBMP_Array[j] = LPBMP_Array[j + 1];
        }
        LPBMP_Array[j] = new_LPBMP_path;
    }
    else
    {
        for (var i = 0; i < MAX_LPBMP_ARRAY; i++) {
            if (LPBMP_Array[i] === "NULL") {
                LPBMP_Array[i] = new_LPBMP_path;
                break;
            }
        }
    }

}



function get_lprimgpath(index) {
    var imgpath = "";
    if (LPBMP_Array[index] != "NULL") {
        imgpath = LPBMP_Array[index];
        // /emmc/plugin/Aida_data/storage/2024_9_11_10_18_16_140_9A0265_4.jpg
        // imgpath = imgpath.replace("/emmc/plugin", "..");
        // 09-11
        imgpath = imgpath.replace("/emmc/plugin/Aida_data", `/${g_tcp_tunnel_token}`);
        

    }
    // console.log(imgpath + " = " + LPBMP_Array[index] + "?");
    
    return imgpath;
}

function get_lprimgnum(){  //return the last index which is valid. -1 if all invalid.
   
    var j = 0;
    
    for(j=0; j< MAX_LPBMP_ARRAY; j++){
        if(LPBMP_Array[j] == "NULL")
            break;
    }
    //console.log("[get_lprimgnum] j = " + j);


    return j;  //return the last index which is valid. -1 if all invalid.
}



function checkURL(myURL) {
    var str = myURL;
    //判断URL地址的正则表达式为:http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
    //下面的代码中应用了转义字符"\"输出一个字符"/"
    var Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
    var objExp = new RegExp(Expression);
    if (objExp.test(str) == true) {
        return true;
    } else {
        return false;
    }
}


function setup_lprimg_in_anprindex() {
    set_lpr_content(get_lprimgnum());
}


var try_set_low_encoder = 0;

function set_lpr_content(img_num){
    if(img_num > 0){ // img_num = -1 when there has no valid lpr imgs.
        // remove old imgs
        //var lprimglist = document.getElementById("lpr_jpg");
        //while(lprimglist.hasChildNodes()){
            //lprimglist.removeChild(lprimglist.firstChild);
        //}

        //var fragment = document.createDocumentFragment();

        //add new imgs
        for(var i = 0; i < img_num; i++)   // img_num is from get_lprimgnum() which returns the last index of img in LPBMP_Array. 
        { 
            var index_lpr = img_num - i - 1;

            //var imgdiv = document.createElement("div");

            //var imgdiv = document.getElementById("lpr_jpg" + (i + 1).toString());
            //while (imgdiv.hasChildNodes()) {
                //imgdiv.removeChild(imgdiv.firstChild);
            //}
            var imgObj = document.createElement("img");
            imgObj.setAttribute("src", get_lprimgpath(index_lpr));
            imgObj.style.height = "80px";
            imgObj.style.width = "auto";
            imgObj.style.marginLeft = "auto";
            imgObj.style.marginRight = "auto";
            imgObj.style.display = "block";            


            var divObj = document.createElement("div");

            var href_html;
            var check_if_ok_href_html = 0;

            var imgtext = document.createElement("h4");//LPR_Array[index_lpr] + ", " + LPR_confidence_array[index_lpr]
            var lpr_text = "";

            var temp_lpr_array = LPR_Array[index_lpr];
            if (localStorage.getItem("barcode_qr") == "Yes") {

                if (checkURL(LPR_Array[index_lpr])) {
                    imgtext.style.color = "#6c87d4";
                    href_html = document.createElement("a");
                    href_html.setAttribute("href", LPR_Array[index_lpr]);
                    href_html.setAttribute("target", "_blank");
                    check_if_ok_href_html = 1;
                }

                if (LPR_Array[index_lpr].length > 15) {
                    temp_lpr_array = LPR_Array[index_lpr].slice(0, 15) + "..";
                }
                lpr_text = temp_lpr_array;
            }
            else {
                lpr_text = temp_lpr_array + ", " + LPR_confidence_array[index_lpr];
            }





            //lpr_text += ", \n";
            imgtext.appendChild(document.createTextNode(lpr_text));
            imgtext.style.display = "inline-block";
            //imgtext.style.whiteSpace = "pre";
            imgtext.style.lineHeight = "0px";

            var imgCar = document.createElement("img");

            var path_car_type = "";
            if (LPR_car_type_name_array[index_lpr] == "NULL" || LPR_car_type_name_array[index_lpr].length == 0) {
                path_car_type = "car";
            }
            else {
                path_car_type = LPR_car_type_name_array[index_lpr];
            }
  
            // imgCar.setAttribute("src", "./labels/car_type/" + path_car_type + "-white.png"); // 08-14 不適用於 Landing page 白底
            imgCar.setAttribute("src", "./labels/car_type/" + path_car_type + ".png");
            imgCar.style.width = "18px";
            imgCar.style.height = "15px";
            imgCar.style.display = "inline-block";

            divObj.appendChild(imgCar);

            if (check_if_ok_href_html == 1) {
                href_html.appendChild(imgtext);
                divObj.appendChild(href_html);
            }
            else {
                divObj.appendChild(imgtext);
            }

            var divObj2 = document.createElement("div");

            var color_text = LPR_color_array[index_lpr];
            var colorObj = document.createElement("input");
            colorObj.type = "button";
            colorObj.style.backgroundColor = color_text;
            colorObj.style.width = "18px";
            colorObj.style.height = "15px";
            // colorObj.style.border = "0px";
            colorObj.style.border = "1px solid gray";
            colorObj.style.display = "inline-block";
            colorObj.style.lineHeight = "0px";
            divObj2.appendChild(colorObj);

            if (LPR_sec_color_array[index_lpr] != LPR_color_array[index_lpr]) {
                var sec_color_text = LPR_sec_color_array[index_lpr];
                var sec_colorObj = document.createElement("input");
                sec_colorObj.type = "button";
                sec_colorObj.style.backgroundColor = sec_color_text;
                sec_colorObj.style.width = "18px";
                sec_colorObj.style.height = "15px";
                // sec_colorObj.style.border = "0px";
                sec_colorObj.style.border = "1px solid gray";
                sec_colorObj.style.display = "inline-block";
                sec_colorObj.style.lineHeight = "0px";
                divObj2.appendChild(sec_colorObj);
            }

            var imgtext2 = document.createElement("h4");
            if (LPR_area_array[index_lpr].length >= 1 && LPR_area_array[index_lpr] != "NULL") {
                var area_text = LPR_area_array[index_lpr];
                console.log("area_text: ", area_text);
                
                imgtext2.appendChild(document.createTextNode(area_text));
            }
            imgtext2.style.display = "inline-block";
            imgtext2.style.lineHeight = "0px";
            divObj2.appendChild(imgtext2);

            // 08-14 LPR_center_direction_array 需 getalarmmotion 有 center_direction
            
            if (LPR_center_direction_array[index_lpr].length >= 1 && LPR_center_direction_array[index_lpr] != "NULL") {
                var center_direction_text = "up_arrow";
                if (parseInt(LPR_center_direction_array[index_lpr]) >= 0) {
                    center_direction_text = "down_arrow";
                }
                else {
                    center_direction_text = "up_arrow";
                }                

                var img_direction = document.createElement("img");

                img_direction.setAttribute("src", "./images/" + center_direction_text + ".png");
                img_direction.style.width = "18px";
                img_direction.style.height = "15px";
                img_direction.style.display = "inline-block";

                divObj2.appendChild(img_direction);
            }


            //var imgtext2 = document.createElement("h4");//LPR_Array[index_lpr] + ", " + LPR_confidence_array[index_lpr]
            //var lpr_text2 = LPR_confidence_array[index_lpr];
            //imgtext2.appendChild(document.createTextNode("hello"));

            //imgdiv.appendChild(imgObj);

            //fragment.appendChild(imgdiv);

            var imgdiv = document.querySelector("#lpr_jpg_" + (i + 1).toString());
            while (imgdiv.hasChildNodes()) {
                imgdiv.removeChild(imgdiv.firstChild);
            }
            imgdiv.appendChild(imgObj);
            imgdiv.appendChild(divObj);
            imgdiv.appendChild(divObj2);
            // imgdiv.style.width = "50px";
            
            //imgdiv.appendChild(imgtext2);
            //console.log("path:" + get_lprimgpath(i));
            //document.getElementById("lpr_jpg_" + (i + 1).toString()).style.width = "auto";

        }

        var len = img_num;
        var loadCounter = 0;
        for (var i = 0; i < len; i++) {
            var index_lpr = img_num - i - 1;

            $(document.createElement("img")).attr('src', get_lprimgpath(index_lpr)).one("load", function () {
                //alert(get_lprimgpath(index_lpr)+ 'is loaded');
                loadCounter++;
                
            }).each(function () {
                if (this.complete) {
                    $(this).trigger("load");
                }
                else {
                    // this.src = '../Aida_data/storage/default.jpg';
                    // 09-11
                    this.src = `/${g_tcp_tunnel_token}/storage/default.jpg`;
                    //console.log(index_lpr);
                    //console.log(get_lprimgpath(index_lpr));
                    //console.log(this.src);
                }
            });
        }

        if (loadCounter < len-4) {
            //console.log("At least two are not loaded");
            console.log("try set low encoder");

            if (try_set_low_encoder == 0) {
                try_set_low_encoder = 1;
                var json_data = '{"system_setting": { "getimage_encoder_id": "' + "4" + '","getimage_encoder_id_HD": "' + "4" + '"}';
                json_data += '}';

                func_setconfigfile(json_data);
            }
        }
        else {
            //console.log("OK");
            //alert("all are loaded");
        }

       // lprimglist.appendChild(fragment);
    }
}


// ------------------------------


function roundDown (num, decimal) { return Math.floor((num + Number.EPSILON) * Math.pow(10, decimal)) / Math.pow(10, decimal); }

function segmentsIntr(a, b, c, d) {

    if ((a.x == c.x && a.y == c.y) ||
        (a.x == d.x && a.y == d.y)) {
        return { x: a.x, y: a.y};
    }
    else if ((b.x == c.x && b.y == c.y) ||
        (b.x == d.x && b.y == d.y)) {
        return { x: b.x, y: b.y };
    }


    // 三角形abc 面积的2倍  
    var area_abc = (a.x - c.x) * (b.y - c.y) - (a.y - c.y) * (b.x - c.x);

    // 三角形abd 面积的2倍  
    var area_abd = (a.x - d.x) * (b.y - d.y) - (a.y - d.y) * (b.x - d.x);

    if (area_abc == 0) {
        return { x: c.x, y: c.y };
    }
    else if (area_abd == 0) {
        return { x: d.x, y: d.y };
    }

    // 面积符号相同则两点在线段同侧,不相交 (对点在线段上的情况,本例当作不相交处理);  
    /*if (area_abc * area_abd >= 0) {
        return false;
    }*/

    // 三角形cda 面积的2倍  
    var area_cda = (c.x - a.x) * (d.y - a.y) - (c.y - a.y) * (d.x - a.x);
    // 三角形cdb 面积的2倍  
    // 注意: 这里有一个小优化.不需要再用公式计算面积,而是通过已知的三个面积加减得出.  
    var area_cdb = area_cda + area_abc - area_abd;

    if (area_cdb == 0) {
        return { x: b.x, y: b.y };
    }
    else if (area_cda == 0) {
        return { x: a.x, y: a.y };
    }

    /*
    if (area_cda * area_cdb >= 0) {
        return false;
    }*/

    //计算交点坐标  
    var t = area_cda / (area_abd - area_abc);
    var dx = t * (b.x - a.x),
        dy = t * (b.y - a.y);
    return { x: a.x + dx, y: a.y + dy };

}  

//var data_alarm = "";

/**
	 * @ Update Objects Info in g_Ctrl_InfoTrafficLight
	 *
	 * @ Input  :
	 * @ Return :
*/
var reconnect_websocket = null;

var request_live = null;
function getalarmmotion_value() {

    var ipStr = '/getalarmmotion';
    
    if (this.status == 404) {
        //request_live = setInterval(function () {
            
            //if (navigator.userAgent.match("MSIE") || (!!window.ActiveXObject || "ActiveXObject" in window))
                //GetRequest_Http();
            //else
            //    GetRequest_WebSocket();
        var replaceUrl = 'http://' + window.location.hostname + '/' + g_tcp_tunnel_token + '/Aida/index.html';
            //alert(replaceUrl);
            parent.window.location.replace(replaceUrl);
        //}, 5000);
    }
    else
    {
        /*
        if (navigator.userAgent.match("MSIE") || (!!window.ActiveXObject || "ActiveXObject" in window))
            GetRequest_Http();
        else*/
            // GetRequest_WebSocket(); // 原本寫法
        // 08-05 因 landing page 位於 80 port，改用舊方法直接拿看看
        // GetRequest_Http(); // 會有 SyntaxError: Unterminated string in JSON 的問題
        
        // 08-15
        GetRequest_Http_80port_fetch();

    }
}

var len_alarm = 0;
var bbox_count = 0;
var plate_count = 0;
var plate_idx = 0;

var complete_flag = 0;
var content_len = 0;

var wait_count = 0;

var clear_count = 0;	//sophia add 20201207
var clear_count_2 = 0; //檢查畫布畫久一點

var index_ = 0;

//var points_list = "";
var linelengths_list = "";
var points_array = new Array(MAX_SIZE_POINTS);

var g_zone_id = 0;
var g_enable_show_pixel = 0;
var g_enable_show_direction = 0;
var g_mydirection = new Array(MAX_DETECTION_ZONE);
var g_visible_arrow = 0;

{
    for (var i = 0; i < MAX_DETECTION_ZONE; i++) {
        g_mydirection[i] = 1;
    }
}

function open_visible_arrow() {
    g_visible_arrow = 1;
}

function hide_visible_arrow() {
    g_visible_arrow = 0;
}

function enable_show_direction() {
    g_enable_show_direction = 1;
    Edit_Arrow();
}

function disable_show_direction() {
    g_enable_show_direction = 0;
    Edit_Arrow();
}

function updateObjects() {
    g_Ctrl_InfoTrafficLight.length = 0;
    var j = 0;
    if (TripwireTrafficMode == 1) {
        g_Ctrl_InfoTrafficLight[j] = [];
        g_Ctrl_InfoTrafficLight[j][0] = j;
        g_Ctrl_InfoTrafficLight[j][1] = 50;
        g_Ctrl_InfoTrafficLight[j][2] = 50;
        g_Ctrl_InfoTrafficLight[j][3] = 30;
        g_Ctrl_InfoTrafficLight[j][4] = 30;
        g_Ctrl_InfoTrafficLight[j][5] = 1;
        g_Ctrl_InfoTrafficLight[j][6] = 1;
        j++;
    }
    for (var i = 0; i < canvasTripwire.getObjects().length; i++) {
        g_Ctrl_InfoTrafficLight[j] = [];
        g_Ctrl_InfoTrafficLight[j][0] = j;
        g_Ctrl_InfoTrafficLight[j][1] = canvasTripwire.item(i).left;
        g_Ctrl_InfoTrafficLight[j][2] = canvasTripwire.item(i).top;
        g_Ctrl_InfoTrafficLight[j][3] = canvasTripwire.item(i).width;
        g_Ctrl_InfoTrafficLight[j][4] = canvasTripwire.item(i).height;
        g_Ctrl_InfoTrafficLight[j][5] = canvasTripwire.item(i).direction;
        g_Ctrl_InfoTrafficLight[j][6] = canvasTripwire.item(i).trafficlight;
        j++;
    }
}
/**
	 * @ create a rectangle object
	 *
	 * @ Input  :
     *          :1.r_left:left
     *          :2.r_top:top
     *          :3.r_width:width
     *          :4.r_height:height
     *          :5.r_direct:direction
     *          :6.trafficlight:trafficlight
	 * @ Return : rectangle object
*/
function insertTrafficLightRectangle(r_left, r_top, r_width, r_height, r_direct, r_tlight, r_name, r_number_row) {
    var rectangle;

    var color_type = '#00FF00';

    if (r_name != "object" &&
        r_name != "L._Plate_USA" &&
        r_name != "L._Plate_MAC/MYS" &&
        r_name != "L._Plate_VNM" &&
        r_name != "L._Plate_EUR" &&
        r_name != "L._Plate_GBR" &&
        r_name != "L._Plate_JPN" &&
        r_name != "L._Plate_THA" &&
        r_name != "L._Plate_IDN" &&
        r_name != "L._Plate_IDN2" &&
        r_name != "L._Plate_BGD" &&
        r_name != "L._Plate_MEA" &&
        r_name != "L._Plate_PHL" &&
        r_name != "L._Plate_AUS" &&
        r_name != "L._Plate_CNT_1LINE" &&
        r_name != "L._Plate_CNT_2LINES" &&
        r_name != "L._Plate_CNT_3LINES" &&
        r_name != "L._Plate_CNT_VERTICAL" &&
        r_name != "L._Plate_CNT_USDOT" &&
        r_name != "ambulance" &&
        r_name != "face" &&
        r_name != "blank" &&
        r_name != "stop_sign" &&
        r_name != "qrcode" &&
        r_name != "barcode" &&
        r_name != "L._Plate_TWN" &&
        r_name != "") {
        if (r_name == "person") {
            color_type = '#FF8C00';
        }
        else if(r_name == "car"){
            color_type = '#800080';
        }
    }
    else if (r_number_row == 2) {
        color_type = '#FFFF00';
    }


    if ((r_left != null) && (r_top != null) && (r_width != null) && (r_height != null)) {

        if (click_canvas_all >= 1 && click_cold_set >= 1) {
        }
        else {
            if (r_name != "object" &&
                r_name != "L._Plate_USA" &&
                r_name != "L._Plate_MAC/MYS" &&
                r_name != "L._Plate_VNM" &&
                r_name != "L._Plate_EUR" &&
                r_name != "L._Plate_GBR" &&
                r_name != "L._Plate_JPN" &&
                r_name != "L._Plate_THA" &&
                r_name != "L._Plate_IDN" &&
                r_name != "L._Plate_IDN2" &&
                r_name != "L._Plate_BGD" &&
                r_name != "L._Plate_MEA" &&
                r_name != "L._Plate_PHL" &&
                r_name != "L._Plate_AUS" &&
                r_name != "L._Plate_CNT_1LINE" &&
                r_name != "L._Plate_CNT_2LINES" &&
                r_name != "L._Plate_CNT_3LINES" &&
                r_name != "L._Plate_CNT_VERTICAL" &&
                r_name != "L._Plate_CNT_USDOT" &&
                r_name != "ambulance" &&
                r_name != "face" &&
                r_name != "blank" &&
                r_name != "stop_sign" &&
                r_name != "qrcode" &&
                r_name != "barcode" &&
                r_name != "L._Plate_TWN" &&
                r_name != "") {

                var temp_width = r_width;
                var temp_height = r_height;
                r_width = r_width * 1.095;
                r_height = r_height * 1.095;
                r_left = r_left - (r_width - temp_width) / 2;
                r_top = r_top - (r_height - temp_height) / 2;
            }
        }

        rectangle = new fabric.Rect({ objectCaching: false, trafficlight: r_tlight, direction: r_direct, left: r_left, top: r_top, stroke: color_type, strokeWidth: 1.5, fill: 'transparent', width: r_width, height: r_height, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' });

    }
    else {
        rectangle = new fabric.Rect({ objectCaching: false, trafficlight: 1, direction: 1, left: 50, top: 50, stroke: color_type, strokeWidth: 1.5, fill: 'transparent', width: 30, height: 30, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' });
    }

    rectangle.setControlsVisibility({
        bl: true,
        br: true,
        tl: true,
        tr: true,
        mt: true,
        mb: true,
        ml: true,
        mr: true,
    });

    if (r_name.length >= 1 && click_canvas_all >= 1 && click_cold_set >= 1) {
        rectangle.on('selected', function (e) {
            var selected_left = r_left * G_CAM_VIDEO_RES_WIDTH / MAX_WIDTH-20;
            var selected_top = r_top * G_CAM_VIDEO_RES_HEIGHT / MAX_HEIGHT-20;
            var selected_width = r_width * G_CAM_VIDEO_RES_WIDTH / MAX_WIDTH+40;
            var selected_height = r_height * G_CAM_VIDEO_RES_HEIGHT / MAX_HEIGHT+40;

            if (selected_left < 10)
                selected_left = 10;
            if (selected_top < 10)
                selected_top = 10;
            if (selected_width > G_CAM_VIDEO_RES_WIDTH - 20)
                selected_width = G_CAM_VIDEO_RES_WIDTH - 20;
            if (selected_height > G_CAM_VIDEO_RES_HEIGHT - 20)
                selected_height = G_CAM_VIDEO_RES_HEIGHT - 20;

            func_set_coldobjects(selected_left, selected_top, selected_width, selected_height, r_name);
        })
    }

    if (click_canvas_all >= 1 && click_cold_set >= 1) {
        //disabelIteraction(rectangle);
    }
    else {
        disabelIteraction(rectangle);
    }

    return rectangle;
}

function insertTrafficLightRectangle_Red(r_left, r_top, r_width, r_height, r_direct, r_tlight, r_name) {
    var rectangle2;
    if ((r_left != null) && (r_top != null) && (r_width != null) && (r_height != null)) {

        if (click_canvas_all >= 1 && click_cold_set >= 1) {
        }
        else {
            if (r_name != "object" &&
                r_name != "L._Plate_USA" &&
                r_name != "L._Plate_MAC/MYS" &&
                r_name != "L._Plate_VNM" &&
                r_name != "L._Plate_EUR" &&
                r_name != "L._Plate_GBR" &&
                r_name != "L._Plate_JPN" &&
                r_name != "L._Plate_THA" &&
                r_name != "L._Plate_IDN" &&
                r_name != "L._Plate_IDN2" &&
                r_name != "L._Plate_BGD" &&
                r_name != "L._Plate_MEA" &&
                r_name != "L._Plate_PHL" &&
                r_name != "L._Plate_AUS" &&
                r_name != "L._Plate_CNT_1LINE" &&
                r_name != "L._Plate_CNT_2LINES" &&
                r_name != "L._Plate_CNT_3LINES" &&
                r_name != "L._Plate_CNT_VERTICAL" &&
                r_name != "L._Plate_CNT_USDOT" &&
                r_name != "ambulance" &&
                r_name != "face" &&
                r_name != "blank" &&
                r_name != "stop_sign" &&
                r_name != "qrcode" &&
                r_name != "barcode" &&
                r_name != "L._Plate_TWN" &&
                r_name != "") {

                var temp_width = r_width;
                var temp_height = r_height;
                r_width = r_width * 1.095;
                r_height = r_height * 1.095;
                r_left = r_left - (r_width - temp_width) / 2;
                r_top = r_top - (r_height - temp_height) / 2;
            }
        }

        rectangle2 = new fabric.Rect({ objectCaching: false,trafficlight: r_tlight, direction: r_direct, left: r_left, top: r_top, stroke: '#FF0000', strokeWidth: 1.5, fill: 'transparent', width: r_width, height: r_height, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' });

    }
    else {
        rectangle2 = new fabric.Rect({ objectCaching: false,trafficlight: 1, direction: 1, left: 50, top: 50, stroke: '#FF0000', strokeWidth: 1.5, fill: 'transparent', width: 30, height: 30, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' });
    }

    rectangle2.setControlsVisibility({
        bl: true,
        br: true,
        tl: true,
        tr: true,
        mt: true,
        mb: true,
        ml: true,
        mr: true,
    });

    if (r_name.length >= 1 && click_canvas_all >= 1 && click_cold_set >= 1) {
        rectangle2.on('selected', function (e) {
            var selected_left = r_left * G_CAM_VIDEO_RES_WIDTH / MAX_WIDTH;
            var selected_top = r_top * G_CAM_VIDEO_RES_HEIGHT / MAX_HEIGHT;
            var selected_width = r_width * G_CAM_VIDEO_RES_WIDTH / MAX_WIDTH;
            var selected_height = r_height * G_CAM_VIDEO_RES_HEIGHT / MAX_HEIGHT;

            if (selected_left < 10)
                selected_left = 10;
            if (selected_top < 10)
                selected_top = 10;
            if (selected_width > G_CAM_VIDEO_RES_WIDTH - 20)
                selected_width = G_CAM_VIDEO_RES_WIDTH - 20;
            if (selected_height > G_CAM_VIDEO_RES_HEIGHT - 20)
                selected_height = G_CAM_VIDEO_RES_HEIGHT - 20;

            func_set_coldobjects(selected_left, selected_top, selected_width, selected_height, r_name);
        })
    }

    if (click_canvas_all >= 1 && click_cold_set >= 1) {
        //disabelIteraction(rectangle2);
    }
    else {
        disabelIteraction(rectangle2);
    }

    return rectangle2;
}

function insertTrafficLightRectangle_Blue(r_left, r_top, r_width, r_height, r_direct, r_tlight,enable_random_color,random_id) {
    var rectangle3;

    var color_type = '#0000ff';

    if (enable_random_color == 1) {
        if (random_id % 8 == 0) {
            color_type = '#f08902'
        }
        else if (random_id % 8 == 1) {
            color_type = '#f0e402'
        }
        else if (random_id % 8 == 2) {
            color_type = '#02f0b1'
        }
        else if (random_id % 8 == 3) {
            color_type = '#0261f0'
        }
        else if (random_id % 8 == 4) {
            color_type = '#0206f0'
        }
        else if (random_id % 8 == 5) {
            color_type = '#3a02f0'
        }
        else if (random_id % 8 == 6) {
            color_type = '#e402f0'
        }
        else if (random_id % 8 == 7) {
            color_type = '#4f0938'
        }
    }

    if ((r_left != null) && (r_top != null) && (r_width != null) && (r_height != null)) {
        rectangle3 = new fabric.Rect({ objectCaching: false, trafficlight: r_tlight, direction: r_direct, left: r_left, top: r_top, stroke: color_type, strokeWidth: 1.5, fill: 'transparent', width: r_width, height: r_height, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' });

    }
    else {
        rectangle3 = new fabric.Rect({ objectCaching: false, trafficlight: 1, direction: 1, left: 50, top: 50, stroke: color_type, strokeWidth: 1.5, fill: 'transparent', width: 30, height: 30, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' });
    }

    rectangle3.setControlsVisibility({
        bl: true,
        br: true,
        tl: true,
        tr: true,
        mt: true,
        mb: true,
        ml: true,
        mr: true,
    });

    disabelIteraction(rectangle3);

    return rectangle3;
}

function insertCircle_Red(r_left, r_top) {
    var rectangle2;
    if ((r_left != null) && (r_top != null)) {
        rectangle2 = new fabric.Circle({ objectCaching: false, left: r_left - 5.5, top: r_top - 5.5, stroke: '#FF0000', strokeWidth: 3, fill: 'transparent', radius: 5, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' });

    }
    else {
        rectangle2 = new fabric.Circle({ objectCaching: false, left: 50 - 5.5, top: 50 - 5.5, stroke: '#FF0000', strokeWidth: 3, fill: 'transparent', radius: 5, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' });
    }

    rectangle2.setControlsVisibility({
        bl: true,
        br: true,
        tl: true,
        tr: true,
        mt: true,
        mb: true,
        ml: true,
        mr: true,
    });

    if (click_canvas_all >= 1 && click_cold_set >= 1) {
        //disabelIteraction(rectangle2);
    }
    else {
        disabelIteraction(rectangle2);
    }

    return rectangle2;
}

function insertCircle_Green(r_left, r_top) {
    var rectangle2;
    if ((r_left != null) && (r_top != null) ) {
        rectangle2 = new fabric.Circle({ objectCaching: false, left: r_left-5.5, top: r_top-5.5, stroke: '#00FF00', strokeWidth: 3, fill: 'transparent', radius: 5, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' });

    }
    else {
        rectangle2 = new fabric.Circle({ objectCaching: false, left: 50-5.5, top: 50-5.5, stroke: '#00FF00', strokeWidth: 3, fill: 'transparent', radius: 5, opacity: 1, hasRotatingPoint: false, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B' });
    }

    rectangle2.setControlsVisibility({
        bl: true,
        br: true,
        tl: true,
        tr: true,
        mt: true,
        mb: true,
        ml: true,
        mr: true,
    });

    if (click_canvas_all >= 1 && click_cold_set >= 1) {
        //disabelIteraction(rectangle2);
    }
    else {
        disabelIteraction(rectangle2);
    }

    return rectangle2;
}



/**
	 * @ create a text object
	 *
	 * @ Input  :
     *          :1.r_left:left
     *          :2.r_top:top
     *          :3.r_width:width
     *          :4.r_height:height
     *          :5.r_direct:direction
     *          :6.trafficlight:trafficlight
	 * @ Return : text object
*/
function insertTextLabel(r_left, r_top, r_width, r_height, showtext) {
    var textcontent;
    if ((r_left != null) && (r_top != null) && (r_width != null) && (r_height != null)) {
        textcontent = new fabric.Text(showtext, {
            objectCaching: false,
            left: r_left,
            top: r_top,
            width: r_width,
            height: r_height,
            fontFamily: 'helvetica', // 字型
            fontSize: 15, // 字体大小
            fontWeight: '', // 字体粗细
            shadow: { color: 'black' ,blur: 5},
            fill: '#CCFF33'
        });

    }
    else {
        textcontent = new fabric.Text(showtext, {
            objectCaching: false,
            left: 50,
            top: 50,
            width: 50,
            height: 50,
            fontFamily: 'helvetica', // 字型
            fontSize: 15, // 字体大小
            fontWeight: '', // 字体粗细
            shadow: { color: 'black', blur: 5 },
            fill: '#CCFF33'
        });
    }
    //const text = new fabric.Text('Day 7 fabricjs')
    //canvas.add(text)
    /*
    { 
        trafficlight: 1,
        direction:1,
        left: 50, 
        top: 50, 
        stroke: '#00FF00', 
        strokeWidth: 1.5, 
        fill: 'transparent', 
        width: 30, 
        height: 30, 
        opacity: 1, 
        hasRotatingPoint: false, 
        transparentCorners: false, 
        cornerStyle: 'circle', 
        cornerSize: 10, 
        cornerColor: '#BDB76B'
    }
    */
    textcontent.setControlsVisibility({
        bl: true,
        br: true,
        tl: true,
        tr: true,
        mt: true,
        mb: true,
        ml: true,
        mr: true,
    });

    disabelIteraction(textcontent);

    return textcontent;
}

function insertTextLabel_Orange(r_left, r_top, r_width, r_height, showtext) {
    var textcontent;
    if ((r_left != null) && (r_top != null) && (r_width != null) && (r_height != null)) {
        textcontent = new fabric.Text(showtext, {
            objectCaching: false,
            left: r_left,
            top: r_top,
            width: r_width,
            height: r_height,
            fontFamily: 'helvetica', // 字型
            fontSize: 22, // 字体大小
            fontWeight: '900', // 字体粗细
            shadow: { color: 'black', blur: 5 },
            fill: '#ff8c00'
        });

    }
    else {
        textcontent = new fabric.Text(showtext, {
            objectCaching: false,
            left: 50,
            top: 50,
            width: 50,
            height: 50,
            fontFamily: 'helvetica', // 字型
            fontSize: 22, // 字体大小
            fontWeight: '900', // 字体粗细
            shadow: { color: 'black', blur: 5 },
            fill: '#ff8c00'
        });
    }
    //const text = new fabric.Text('Day 7 fabricjs')
    //canvas.add(text)
    /*
    { 
        trafficlight: 1,
        direction:1,
        left: 50, 
        top: 50, 
        stroke: '#00FF00', 
        strokeWidth: 1.5, 
        fill: 'transparent', 
        width: 30, 
        height: 30, 
        opacity: 1, 
        hasRotatingPoint: false, 
        transparentCorners: false, 
        cornerStyle: 'circle', 
        cornerSize: 10, 
        cornerColor: '#BDB76B'
    }
    */
    textcontent.setControlsVisibility({
        bl: true,
        br: true,
        tl: true,
        tr: true,
        mt: true,
        mb: true,
        ml: true,
        mr: true,
    });

    disabelIteraction(textcontent);

    return textcontent;
}

function insertTextLabel_Red(r_left, r_top, r_width, r_height, showtext) {
    var textcontent;
    if ((r_left != null) && (r_top != null) && (r_width != null) && (r_height != null)) {
        textcontent = new fabric.Text(showtext, {
            objectCaching: false,
            left: r_left,
            top: r_top,
            width: r_width,
            height: r_height,
            fontFamily: 'helvetica', // 字型
            fontSize: 15, // 字体大小
            fontWeight: '', // 字体粗细
            shadow: { color: 'black', blur: 5 },
            fill: '#ff0000'
        });

    }
    else {
        textcontent = new fabric.Text(showtext, {
            objectCaching: false,
            left: 50,
            top: 50,
            width: 50,
            height: 50,
            fontFamily: 'helvetica', // 字型
            fontSize: 15, // 字体大小
            fontWeight: '', // 字体粗细
            shadow: { color: 'black', blur: 5 },
            fill: '#ff0000'
        });
    }
    //const text = new fabric.Text('Day 7 fabricjs')
    //canvas.add(text)
    /*
    { 
        trafficlight: 1,
        direction:1,
        left: 50, 
        top: 50, 
        stroke: '#00FF00', 
        strokeWidth: 1.5, 
        fill: 'transparent', 
        width: 30, 
        height: 30, 
        opacity: 1, 
        hasRotatingPoint: false, 
        transparentCorners: false, 
        cornerStyle: 'circle', 
        cornerSize: 10, 
        cornerColor: '#BDB76B'
    }
    */
    textcontent.setControlsVisibility({
        bl: true,
        br: true,
        tl: true,
        tr: true,
        mt: true,
        mb: true,
        ml: true,
        mr: true,
    });

    disabelIteraction(textcontent);

    return textcontent;
}

function insertTextLabel_Blue(r_left, r_top, r_width, r_height, showtext) {
    var textcontent;
    if ((r_left != null) && (r_top != null) && (r_width != null) && (r_height != null)) {
        textcontent = new fabric.Text(showtext, {
            objectCaching: false,
            left: r_left,
            top: r_top,
            width: r_width,
            height: r_height,
            fontFamily: 'helvetica', // 字型
            fontSize: 15, // 字体大小
            fontWeight: '', // 字体粗细
            shadow: { color: 'black', blur: 5 },
            fill: '#0000ff'
        });

    }
    else {
        textcontent = new fabric.Text(showtext, {
            objectCaching: false,
            left: 50,
            top: 50,
            width: 50,
            height: 50,
            fontFamily: 'helvetica', // 字型
            fontSize: 15, // 字体大小
            fontWeight: '', // 字体粗细
            shadow: { color: 'black', blur: 5 },
            fill: '#0000ff'
        });
    }
    //const text = new fabric.Text('Day 7 fabricjs')
    //canvas.add(text)
    /*
    { 
        trafficlight: 1,
        direction:1,
        left: 50, 
        top: 50, 
        stroke: '#00FF00', 
        strokeWidth: 1.5, 
        fill: 'transparent', 
        width: 30, 
        height: 30, 
        opacity: 1, 
        hasRotatingPoint: false, 
        transparentCorners: false, 
        cornerStyle: 'circle', 
        cornerSize: 10, 
        cornerColor: '#BDB76B'
    }
    */
    textcontent.setControlsVisibility({
        bl: true,
        br: true,
        tl: true,
        tr: true,
        mt: true,
        mb: true,
        ml: true,
        mr: true,
    });

    disabelIteraction(textcontent);

    return textcontent;
}

//20201204 sophia add
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 enableIteraction(element) {
    element.lockScalingX = false;	//Prevents horizontal scaling
    element.lockScalingY = false;	//Prevents vertical scaling
    element.lockUniScaling = false;	//Prevents scaling in either X or Y direction but not in both. In other words, prevents non-proportional scaling of an object.
    element.lockRotation = false;	//Prevents rotation
    element.evented = true;
    element.selectable = true;
}
/**
	 * @ create a line object
	 *
	 * @ Input  :
     *          :1.coords:coordinate
     *          :2.r_direct:direction
	 * @ Return : line object
*/
function TrafficLine(coords, r_direct) {
    return new fabric.Line(coords, {
        fill: 'transparent',
        stroke: '#00FF00',
        selectable: true,
        hasRotatingPoint: false,
        strokeWidth: 1.5, opacity: 1, transparentCorners: false, cornerStyle: 'circle', cornerSize: 10, cornerColor: '#BDB76B', direction: r_direct, trafficlight: 0
    });
}

function cal_slope(p1_x,p1_y,p2_x,p2_y) {
    return p1_y != p2_y ? (p1_x - p2_x) / (p1_y - p2_y) * (-1) : 99;
}

function angle(cx, cy, ex, ey) {
    var dy = ey - cy;
    var dx = ex - cx;
    var theta = Math.atan2(dy, dx); // range (-PI, PI]
    theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
    if (theta < 0) theta = 360 + theta; // range [0, 360)
    return theta;
}


function AddArrowObject(p1x,p1y,p2x,p2y) {
    var start_x = p1x;
    var start_y = p1y;
    var end_x = p2x;
    var end_y = p2y;
    var angle_temp = angle(start_x, start_y, end_x, end_y);
    var left_temp = Math.abs(start_x + end_x) / 2;
    var top_temp = Math.abs(start_y + end_y) / 2;

    var strokeWidth_line = 5;
    var line = new fabric.Line([start_x, start_y, end_x, end_y], {
        strokeWidth: strokeWidth_line,
        fill: 'red',
        stroke: 'red',
        originX: 'center',
        originY: 'center'
    });

    var triangle = new fabric.Triangle({
        width: 20, height: 20,
        left: left_temp,
        top: top_temp, fill: 'red',
        angle: angle_temp,
        originX: 'center',
        originY: 'center'
    });

    var arrow_temp = [line, triangle];
    var arrow = new fabric.Group(arrow_temp);

    arrow.left = (start_x < end_x ? start_x : end_x) - strokeWidth_line / 2;
    arrow.top = (start_y < end_y ? start_y : end_y) - strokeWidth_line / 2;
    arrow.angle = 0;

    if (g_enable_show_direction === 0 || g_visible_arrow == 0) {
        arrow.visible = false;
    }
    else {
        arrow.visible = true;
    }

    disabelIteraction(arrow);
    return arrow;
}


function refresh_parking_info()
{
    if (parseInt(parking_space[g_zone_id], 10) >= 1 && parseInt(parking_line[g_zone_id], 10) >= 1) {

        var temp_current_point_position = new Array(MAX_SIZE_POINTS);
        if (g_zone_id == 0) {
            temp_current_point_position = currentPointPosition1;
        }
        else if (g_zone_id == 1) {
            temp_current_point_position = currentPointPosition2;
        }
        else if (g_zone_id == 2) {
            temp_current_point_position = currentPointPosition3;
        }
        else if (g_zone_id == 3) {
            temp_current_point_position = currentPointPosition4;
        }
        else if (g_zone_id == 4) {
            temp_current_point_position = currentPointPosition5;
        }
        else if (g_zone_id == 5) {
            temp_current_point_position = currentPointPosition6;
        }
        else if (g_zone_id == 6) {
            temp_current_point_position = currentPointPosition7;
        }
        else if (g_zone_id == 7) {
            temp_current_point_position = currentPointPosition8;
        }
        ///////////////////
        var num_row = parseInt(parking_line[g_zone_id], 10);
        var num_col = Math.ceil(parseInt(parking_space[g_zone_id], 10) / parseInt(parking_line[g_zone_id], 10));

        ////////////////////
        var count_lot = 0;

        var s_row_x = 0;
        var s_row_y = 0;
        var e_row_x = 0;
        var e_row_y = 0;

        var last_s_row_x = 0;
        var last_s_row_y = 0;
        var last_e_row_x = 0;
        var last_e_row_y = 0;

        var s_col_x = 0;
        var s_col_y = 0;
        var e_col_x = 0;
        var e_col_y = 0;

        var last_s_col_x = 0;
        var last_s_col_y = 0;
        var last_e_col_x = 0;
        var last_e_col_y = 0;

        for (var index_row = 0; index_row < num_row; index_row++) {

            if (index_row == 0) {
                last_s_row_x = temp_current_point_position[1].x;
                last_s_row_y = temp_current_point_position[1].y;
                last_e_row_x = temp_current_point_position[2].x;
                last_e_row_y = temp_current_point_position[2].y;

                s_row_x = (temp_current_point_position[1].x * (num_row - (index_row + 1)) + temp_current_point_position[0].x * (index_row + 1)) / num_row;
                s_row_y = (temp_current_point_position[1].y * (num_row - (index_row + 1)) + temp_current_point_position[0].y * (index_row + 1)) / num_row;
                e_row_x = (temp_current_point_position[2].x * (num_row - (index_row + 1)) + temp_current_point_position[3].x * (index_row + 1)) / num_row;
                e_row_y = (temp_current_point_position[2].y * (num_row - (index_row + 1)) + temp_current_point_position[3].y * (index_row + 1)) / num_row;
            }
            else if (index_row == num_row - 1) {
                last_s_row_x = s_row_x;
                last_s_row_y = s_row_y;
                last_e_row_x = e_row_x;
                last_e_row_y = e_row_y;

                s_row_x = temp_current_point_position[0].x;
                s_row_y = temp_current_point_position[0].y;
                e_row_x = temp_current_point_position[3].x;
                e_row_y = temp_current_point_position[3].y;
            }
            else {
                last_s_row_x = s_row_x;
                last_s_row_y = s_row_y;
                last_e_row_x = e_row_x;
                last_e_row_y = e_row_y;

                s_row_x = (temp_current_point_position[1].x * (num_row - (index_row + 1)) + temp_current_point_position[0].x * (index_row + 1)) / num_row;
                s_row_y = (temp_current_point_position[1].y * (num_row - (index_row + 1)) + temp_current_point_position[0].y * (index_row + 1)) / num_row;
                e_row_x = (temp_current_point_position[2].x * (num_row - (index_row + 1)) + temp_current_point_position[3].x * (index_row + 1)) / num_row;
                e_row_y = (temp_current_point_position[2].y * (num_row - (index_row + 1)) + temp_current_point_position[3].y * (index_row + 1)) / num_row;
            }

            for (var index_col = 0; index_col < num_col; index_col++) {
                if (count_lot < parseInt(parking_space[g_zone_id], 10)) {

                    if (index_col == 0) {
                        last_s_col_x = temp_current_point_position[1].x;
                        last_s_col_y = temp_current_point_position[1].y;
                        last_e_col_x = temp_current_point_position[0].x;
                        last_e_col_y = temp_current_point_position[0].y;

                        s_col_x = (temp_current_point_position[1].x * (num_col - (index_col + 1)) + temp_current_point_position[2].x * (index_col + 1)) / num_col;
                        s_col_y = (temp_current_point_position[1].y * (num_col - (index_col + 1)) + temp_current_point_position[2].y * (index_col + 1)) / num_col;
                        e_col_x = (temp_current_point_position[0].x * (num_col - (index_col + 1)) + temp_current_point_position[3].x * (index_col + 1)) / num_col;
                        e_col_y = (temp_current_point_position[0].y * (num_col - (index_col + 1)) + temp_current_point_position[3].y * (index_col + 1)) / num_col;
                    }
                    else if (index_col == num_col - 1) {
                        last_s_col_x = s_col_x;
                        last_s_col_y = s_col_y;
                        last_e_col_x = e_col_x;
                        last_e_col_y = e_col_y;

                        s_col_x = temp_current_point_position[2].x;
                        s_col_y = temp_current_point_position[2].y;
                        e_col_x = temp_current_point_position[3].x;
                        e_col_y = temp_current_point_position[3].y;
                    }
                    else {
                        last_s_col_x = s_col_x;
                        last_s_col_y = s_col_y;
                        last_e_col_x = e_col_x;
                        last_e_col_y = e_col_y;

                        s_col_x = (temp_current_point_position[1].x * (num_col - (index_col + 1)) + temp_current_point_position[2].x * (index_col + 1)) / num_col;
                        s_col_y = (temp_current_point_position[1].y * (num_col - (index_col + 1)) + temp_current_point_position[2].y * (index_col + 1)) / num_col;
                        e_col_x = (temp_current_point_position[0].x * (num_col - (index_col + 1)) + temp_current_point_position[3].x * (index_col + 1)) / num_col;
                        e_col_y = (temp_current_point_position[0].y * (num_col - (index_col + 1)) + temp_current_point_position[3].y * (index_col + 1)) / num_col;
                    }


                    var obj_point_0 = segmentsIntr(
                        { x: last_s_row_x, y: last_s_row_y },
                        { x: last_e_row_x, y: last_e_row_y },
                        { x: last_s_col_x, y: last_s_col_y },
                        { x: last_e_col_x, y: last_e_col_y });

                    var obj_point_1 = segmentsIntr(
                        { x: last_s_row_x, y: last_s_row_y },
                        { x: last_e_row_x, y: last_e_row_y },
                        { x: s_col_x, y: s_col_y },
                        { x: e_col_x, y: e_col_y });

                    var obj_point_2 = segmentsIntr(
                        { x: s_row_x, y: s_row_y },
                        { x: e_row_x, y: e_row_y },
                        { x: last_s_col_x, y: last_s_col_y },
                        { x: last_e_col_x, y: last_e_col_y });

                    var obj_point_3 = segmentsIntr(
                        { x: s_row_x, y: s_row_y },
                        { x: e_row_x, y: e_row_y },
                        { x: s_col_x, y: s_col_y },
                        { x: e_col_x, y: e_col_y });

                    if (obj_point_0 != false && obj_point_1 != false && obj_point_2 != false && obj_point_3 != false) {
                        var parking_lot_point_x = (obj_point_0.x + obj_point_1.x + obj_point_2.x + obj_point_3.x) / 4;
                        var parking_lot_point_y = (obj_point_0.y + obj_point_1.y + obj_point_2.y + obj_point_3.y) / 4;

                        if (g_zone_id == 0)
                            canvasTripwire1.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                        if (g_zone_id == 1)
                            canvasTripwire2.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                        if (g_zone_id == 2)
                            canvasTripwire3.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                        if (g_zone_id == 3)
                            canvasTripwire4.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                        if (g_zone_id == 4)
                            canvasTripwire5.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                        if (g_zone_id == 5)
                            canvasTripwire6.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                        if (g_zone_id == 6)
                            canvasTripwire7.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                        if (g_zone_id == 7)
                            canvasTripwire8.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));

                        if (g_zone_id == 0)
                            canvasTripwire1.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                        if (g_zone_id == 1)
                            canvasTripwire2.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                        if (g_zone_id == 2)
                            canvasTripwire3.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                        if (g_zone_id == 3)
                            canvasTripwire4.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                        if (g_zone_id == 4)
                            canvasTripwire5.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                        if (g_zone_id == 5)
                            canvasTripwire6.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                        if (g_zone_id == 6)
                            canvasTripwire7.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                        if (g_zone_id == 7)
                            canvasTripwire8.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));

                        count_lot++;
                    }
                }
            }
        }
    }
}

var polygon_zone1;
var polygon_zone2;
var polygon_zone3;
var polygon_zone4;
var polygon_zone5;
var polygon_zone6;
var polygon_zone7;
var polygon_zone8;

var red_light_zone1;
var red_light_zone2;
var red_light_zone3;
var red_light_zone4;
var red_light_zone5;
var red_light_zone6;
var red_light_zone7;
var red_light_zone8;

function createCanvasTrafficLight_alarm(mypoints1, mypoints2, mypoints3, mypoints4, mypoints5, mypoints6, mypoints7, mypoints8) {
    currentPointPosition1 = mypoints1;
    currentPointPosition2 = mypoints2;
    currentPointPosition3 = mypoints3;
    currentPointPosition4 = mypoints4;
    currentPointPosition5 = mypoints5;
    currentPointPosition6 = mypoints6;
    currentPointPosition7 = mypoints7;
    currentPointPosition8 = mypoints8;

    var min_x1 = 10000;
    var min_y1 = 10000;
    for (var i = 0; i < MAX_SIZE_POINTS; i++) {
        if (mypoints1[i].x < min_x1) {
            min_x1 = mypoints1[i].x;
        }
        if (mypoints1[i].y < min_y1) {
            min_y1 = mypoints1[i].y;
        }
    }

    var min_x2 = 10000;
    var min_y2 = 10000;
    for (var i = 0; i < MAX_SIZE_POINTS; i++) {
        if (mypoints2[i].x < min_x2) {
            min_x2 = mypoints2[i].x;
        }
        if (mypoints2[i].y < min_y2) {
            min_y2 = mypoints2[i].y;
        }
    }

    var min_x3 = 10000;
    var min_y3 = 10000;
    for (var i = 0; i < MAX_SIZE_POINTS; i++) {
        if (mypoints3[i].x < min_x3) {
            min_x3 = mypoints3[i].x;
        }
        if (mypoints3[i].y < min_y3) {
            min_y3 = mypoints3[i].y;
        }
    }

    var min_x4 = 10000;
    var min_y4 = 10000;
    for (var i = 0; i < MAX_SIZE_POINTS; i++) {
        if (mypoints4[i].x < min_x4) {
            min_x4 = mypoints4[i].x;
        }
        if (mypoints4[i].y < min_y4) {
            min_y4 = mypoints4[i].y;
        }
    }

    var min_x5 = 10000;
    var min_y5 = 10000;
    for (var i = 0; i < MAX_SIZE_POINTS; i++) {
        if (mypoints5[i].x < min_x5) {
            min_x5 = mypoints5[i].x;
        }
        if (mypoints5[i].y < min_y5) {
            min_y5 = mypoints5[i].y;
        }
    }

    var min_x6 = 10000;
    var min_y6 = 10000;
    for (var i = 0; i < MAX_SIZE_POINTS; i++) {
        if (mypoints6[i].x < min_x6) {
            min_x6 = mypoints6[i].x;
        }
        if (mypoints6[i].y < min_y6) {
            min_y6 = mypoints6[i].y;
        }
    }

    var min_x7 = 10000;
    var min_y7 = 10000;
    for (var i = 0; i < MAX_SIZE_POINTS; i++) {
        if (mypoints7[i].x < min_x7) {
            min_x7 = mypoints7[i].x;
        }
        if (mypoints7[i].y < min_y7) {
            min_y7 = mypoints7[i].y;
        }
    }

    var min_x8 = 10000;
    var min_y8 = 10000;
    for (var i = 0; i < MAX_SIZE_POINTS; i++) {
        if (mypoints8[i].x < min_x8) {
            min_x8 = mypoints8[i].x;
        }
        if (mypoints8[i].y < min_y8) {
            min_y8 = mypoints8[i].y;
        }
    }

    canvasTripwire1 = new fabric.Canvas('CanvasTripwire1', {
        height: G_VIEW_CANVAS_Y,//window.innerHeight
        width: G_VIEW_CANVAS_X//window.innerWidth
    });


    canvasTripwire2 = new fabric.Canvas('CanvasTripwire2', {
        height: G_VIEW_CANVAS_Y,//window.innerHeight
        width: G_VIEW_CANVAS_X//window.innerWidth
    });

    canvasTripwire3 = new fabric.Canvas('CanvasTripwire3', {
        height: G_VIEW_CANVAS_Y,//window.innerHeight
        width: G_VIEW_CANVAS_X//window.innerWidth
    });

    canvasTripwire4 = new fabric.Canvas('CanvasTripwire4', {
        height: G_VIEW_CANVAS_Y,//window.innerHeight
        width: G_VIEW_CANVAS_X//window.innerWidth
    });

    canvasTripwire5 = new fabric.Canvas('CanvasTripwire5', {
        height: G_VIEW_CANVAS_Y,//window.innerHeight
        width: G_VIEW_CANVAS_X//window.innerWidth
    });

    canvasTripwire6 = new fabric.Canvas('CanvasTripwire6', {
        height: G_VIEW_CANVAS_Y,//window.innerHeight
        width: G_VIEW_CANVAS_X//window.innerWidth
    });

    canvasTripwire7 = new fabric.Canvas('CanvasTripwire7', {
        height: G_VIEW_CANVAS_Y,//window.innerHeight
        width: G_VIEW_CANVAS_X//window.innerWidth
    });

    canvasTripwire8 = new fabric.Canvas('CanvasTripwire8', {
        height: G_VIEW_CANVAS_Y,//window.innerHeight
        width: G_VIEW_CANVAS_X//window.innerWidth
    });

    canvasTripwire_default = new fabric.Canvas('CanvasTripwire_default', {
        height: G_VIEW_CANVAS_Y,//window.innerHeight
        width: G_VIEW_CANVAS_X//window.innerWidth
    });

    canvasTripwire_default.requestRenderAll();

    canvasTripwire_all = new fabric.Canvas('CanvasTripwire_all', {
        height: G_VIEW_CANVAS_Y,//window.innerHeight
        width: G_VIEW_CANVAS_X//window.innerWidth
    });
    /*
    var rectBox = new fabric.Rect({
        width: 100,
        height: 100,
        top: 200,
        left: 200,
        fill: '#ff0000',
        opacity: 0.5
    })
    */
    /*
    var polBox = new fabric.Polygon([
        { x: 200, y: 50 },
        { x: 200, y: 0 },
        { x: 250, y: 50 },
        { x: 250, y: 100 },
        { x: 150, y: 100 },
        { x: 150, y: 50 }], {
            left: 200,
            top: 200,
            angle: 0,
            fill: '#ff0000',
            opacity: 0.5
        }
    );
    canvasTripwire.add(polBox);
    */
    polygon_zone1 = new fabric.Polygon(mypoints1, {
        left: min_x1,
        top: min_y1,
        fill: 'transparent',
        strokeWidth: 2,
        stroke: '#ffff00',
        scaleX: 1,
        scaleY: 1,
        opacity: 0.7,
        objectCaching: false,
        transparentCorners: false,
        //cornerColor: '#ff0000',
    });

    polygon_zone2 = new fabric.Polygon(mypoints2, {
        left: min_x2,
        top: min_y2,
        fill: 'transparent',
        strokeWidth: 2,
        stroke: '#ffff00',
        scaleX: 1,
        scaleY: 1,
        opacity: 0.7,
        objectCaching: false,
        transparentCorners: false,
        //cornerColor: '#ff0000',
    });

    polygon_zone3 = new fabric.Polygon(mypoints3, {
        left: min_x3,
        top: min_y3,
        fill: 'transparent',
        strokeWidth: 2,
        stroke: '#ffff00',
        scaleX: 1,
        scaleY: 1,
        opacity: 0.7,
        objectCaching: false,
        transparentCorners: false,
        //cornerColor: '#ff0000',
    });

    polygon_zone4 = new fabric.Polygon(mypoints4, {
        left: min_x4,
        top: min_y4,
        fill: 'transparent',
        strokeWidth: 2,
        stroke: '#ffff00',
        scaleX: 1,
        scaleY: 1,
        opacity: 0.7,
        objectCaching: false,
        transparentCorners: false,
        //cornerColor: '#ff0000',
    });

    polygon_zone5 = new fabric.Polygon(mypoints5, {
        left: min_x5,
        top: min_y5,
        fill: 'transparent',
        strokeWidth: 2,
        stroke: '#ffff00',
        scaleX: 1,
        scaleY: 1,
        opacity: 0.7,
        objectCaching: false,
        transparentCorners: false,
        //cornerColor: '#ff0000',
    });

    polygon_zone6 = new fabric.Polygon(mypoints6, {
        left: min_x6,
        top: min_y6,
        fill: 'transparent',
        strokeWidth: 2,
        stroke: '#ffff00',
        scaleX: 1,
        scaleY: 1,
        opacity: 0.7,
        objectCaching: false,
        transparentCorners: false,
        //cornerColor: '#ff0000',
    });

    polygon_zone7 = new fabric.Polygon(mypoints7, {
        left: min_x7,
        top: min_y7,
        fill: 'transparent',
        strokeWidth: 2,
        stroke: '#ffff00',
        scaleX: 1,
        scaleY: 1,
        opacity: 0.7,
        objectCaching: false,
        transparentCorners: false,
        //cornerColor: '#ff0000',
    });

    polygon_zone8 = new fabric.Polygon(mypoints8, {
        left: min_x8,
        top: min_y8,
        fill: 'transparent',
        strokeWidth: 2,
        stroke: '#ffff00',
        scaleX: 1,
        scaleY: 1,
        opacity: 0.7,
        objectCaching: false,
        transparentCorners: false,
        //cornerColor: '#ff0000',
    });

    polygon_zone1.lockMovementX = true;	//Prevents horizontal movement
    polygon_zone1.lockMovementY = true;	//Prevents vertical movement
    polygon_zone2.lockMovementX = true;	//Prevents horizontal movement
    polygon_zone2.lockMovementY = true;	//Prevents vertical movement
    polygon_zone3.lockMovementX = true;	//Prevents horizontal movement
    polygon_zone3.lockMovementY = true;	//Prevents vertical movement
    polygon_zone4.lockMovementX = true;	//Prevents horizontal movement
    polygon_zone4.lockMovementY = true;	//Prevents vertical movement
    polygon_zone5.lockMovementX = true;	//Prevents horizontal movement
    polygon_zone5.lockMovementY = true;	//Prevents vertical movement
    polygon_zone6.lockMovementX = true;	//Prevents horizontal movement
    polygon_zone6.lockMovementY = true;	//Prevents vertical movement
    polygon_zone7.lockMovementX = true;	//Prevents horizontal movement
    polygon_zone7.lockMovementY = true;	//Prevents vertical movement
    polygon_zone8.lockMovementX = true;	//Prevents horizontal movement
    polygon_zone8.lockMovementY = true;	//Prevents vertical movement

    canvasTripwire1.add(polygon_zone1);
    canvasTripwire2.add(polygon_zone2);
    canvasTripwire3.add(polygon_zone3);
    canvasTripwire4.add(polygon_zone4);
    canvasTripwire5.add(polygon_zone5);
    canvasTripwire6.add(polygon_zone6);
    canvasTripwire7.add(polygon_zone7);
    canvasTripwire8.add(polygon_zone8);

    canvasTripwire1.add(AddArrowObject(mypoints1[3].x, mypoints1[3].y, mypoints1[2].x, mypoints1[2].y));
    canvasTripwire2.add(AddArrowObject(mypoints2[3].x, mypoints2[3].y, mypoints2[2].x, mypoints2[2].y));
    canvasTripwire3.add(AddArrowObject(mypoints3[3].x, mypoints3[3].y, mypoints3[2].x, mypoints3[2].y));
    canvasTripwire4.add(AddArrowObject(mypoints4[3].x, mypoints4[3].y, mypoints4[2].x, mypoints4[2].y));
    canvasTripwire5.add(AddArrowObject(mypoints5[3].x, mypoints5[3].y, mypoints5[2].x, mypoints5[2].y));
    canvasTripwire6.add(AddArrowObject(mypoints6[3].x, mypoints6[3].y, mypoints6[2].x, mypoints6[2].y));
    canvasTripwire7.add(AddArrowObject(mypoints7[3].x, mypoints7[3].y, mypoints7[2].x, mypoints7[2].y));
    canvasTripwire8.add(AddArrowObject(mypoints8[3].x, mypoints8[3].y, mypoints8[2].x, mypoints8[2].y));

    canvasTripwire1.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire1.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire1.add(insertTextLabel_Orange(0, 0, 50, 50, ""));

    canvasTripwire2.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire2.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire2.add(insertTextLabel_Orange(0, 0, 50, 50, ""));

    canvasTripwire3.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire3.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire3.add(insertTextLabel_Orange(0, 0, 50, 50, ""));

    canvasTripwire4.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire4.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire4.add(insertTextLabel_Orange(0, 0, 50, 50, ""));

    canvasTripwire5.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire5.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire5.add(insertTextLabel_Orange(0, 0, 50, 50, ""));

    canvasTripwire6.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire6.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire6.add(insertTextLabel_Orange(0, 0, 50, 50, ""));

    canvasTripwire7.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire7.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire7.add(insertTextLabel_Orange(0, 0, 50, 50, ""));

    canvasTripwire8.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire8.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    canvasTripwire8.add(insertTextLabel_Orange(0, 0, 50, 50, ""));

    //polygon_zone.visible = false;

    refresh_parking_info();
}

function GetPointLocation(zone_id) {
    if (zone_id === 0)
        return currentPointPosition1;
    else if (zone_id === 1)
        return currentPointPosition2;
    else if (zone_id === 2)
        return currentPointPosition3;
    else if (zone_id === 3)
        return currentPointPosition4;
    else if (zone_id === 4)
        return currentPointPosition5;
    else if (zone_id === 5)
        return currentPointPosition6;
    else if (zone_id === 6)
        return currentPointPosition7;
    else if (zone_id === 7)
        return currentPointPosition8;
}

function polygonPositionHandler(dim, finalMatrix, fabricObject) {
    var x = (fabricObject.points[this.pointIndex].x - fabricObject.pathOffset.x),
        y = (fabricObject.points[this.pointIndex].y - fabricObject.pathOffset.y);
    return fabric.util.transformPoint(
        { x: x, y: y },
        fabric.util.multiplyTransformMatrices(
            fabricObject.canvas.viewportTransform,
            fabricObject.calcTransformMatrix()
        )
    );
}

function isPointInLine(point, point2, linePoint1, linePoint2) {

    //判斷兩條線是否平行或者共線

    var denominator = (point.y - point2.y) * (linePoint1.x - linePoint2.x) - (point2.x - point.x) * (linePoint2.y - linePoint1.y);

    if (denominator == 0)

        return false;

    //獲取兩條線延伸後的交點座標

    var x = ((point.x - point2.x) * (linePoint1.x - linePoint2.x) * (linePoint2.y - point2.y) +

        (point.y - point2.y) * (linePoint1.x - linePoint2.x) * point2.x - (linePoint1.y - linePoint2.y) * (point.x - point2.x) * linePoint2.x) / denominator;

    var y = -((point.y - point2.y) * (linePoint1.y - linePoint2.y) * (linePoint2.x - point2.x) +

        (point.x - point2.x) * (linePoint1.y - linePoint2.y) * point2.y - (linePoint1.x - linePoint2.x) * (point.y - point2.y) * linePoint2.y) / denominator;

    //判斷交點是否線上段上

    if ((x - point2.x) * (x - point.x) <= 0 && (y - point2.y) * (y - point.y) <= 0 && (x - linePoint2.x) * (x - linePoint1.x) <= 0 && (y - linePoint2.y) * (y - linePoint1.y) <= 0)
        return true;
    return false;

}

// define a function that will define what the control does
// this function will be called on every mouse move after a control has been
// clicked and is being dragged.
// The function receive as argument the mouse event, the current trasnform object
// and the current position in canvas coordinate
// transform.target is a reference to the current object being transformed,
function func_actionHandler(eventData, transform, x, y) {
    var polygon = transform.target,
        currentControl = polygon.controls[polygon.__corner],
        mouseLocalPosition = polygon.toLocalPoint(new fabric.Point(x, y), 'center', 'center'),
        polygonBaseSize = polygon._getNonTransformedDimensions(),
        size = polygon._getTransformedDimensions( 0, 0),
        finalPointPosition = {
            x: Math.round(mouseLocalPosition.x * polygonBaseSize.x / size.x + polygon.pathOffset.x),
            y: Math.round(mouseLocalPosition.y * polygonBaseSize.y / size.y + polygon.pathOffset.y)
        };

    var check_cross = 0;
    var check_move = 0;

    var max_size_of_points = g_enable_show_direction == 1 ? 4 : 6;

    var current_point_index = currentControl.pointIndex;
    var next_point_index = currentControl.pointIndex + 1 < max_size_of_points ? currentControl.pointIndex + 1 : 0;
    var last_point_index = currentControl.pointIndex - 1 >= 0 ? currentControl.pointIndex - 1 : max_size_of_points - 1;

    for (var i = 0; i < max_size_of_points; i++) {
        var current_index = i;
        var next_index = i + 1 < max_size_of_points ? i + 1 : 0;
        if (current_index != current_point_index && current_index != next_point_index && next_index != current_point_index && next_index != next_point_index) {
            if (isPointInLine(finalPointPosition, polygon.points[next_point_index], polygon.points[current_index], polygon.points[next_index])) {
                check_cross = 1;
            }
            if (isPointInLine(finalPointPosition, polygon.points[current_point_index], polygon.points[current_index], polygon.points[next_index])) {
                check_cross = 1;
            }
        }
    }
    for (var i = 0; i < max_size_of_points; i++) {
        var current_index = i;
        var last_index = i - 1 >= 0 ? i - 1 : max_size_of_points-1;
        if (current_index != current_point_index && current_index != last_point_index && last_index != current_point_index && last_index != last_point_index) {
            if (isPointInLine(finalPointPosition, polygon.points[last_point_index], polygon.points[current_index], polygon.points[last_index])) {
                check_cross = 1;
            }
            if (isPointInLine(finalPointPosition, polygon.points[current_point_index], polygon.points[current_index], polygon.points[last_index])) {
                check_cross = 1;
            }
        }
    }

    
    if (Math.sqrt(Math.pow(finalPointPosition.x - polygon.points[current_point_index].x, 2) + Math.pow(finalPointPosition.y - polygon.points[current_point_index].y, 2)) >= MAX_MOVE_RADIUS) {
        check_move = 1;
    }
    //console.log("polygon.pathOffset.x:" + polygon.pathOffset.x + "; polygon.pathOffset.y:" + polygon.pathOffset.y);

    if (check_cross == 0 && check_move == 0) {
        if (finalPointPosition.x < 10) {
            finalPointPosition.x = 10;
        }

        if (finalPointPosition.x > MAX_WIDTH - 10) {
            finalPointPosition.x = MAX_WIDTH - 10;
        }

        if (finalPointPosition.y < 10) {
            finalPointPosition.y = 10;
        }

        if (finalPointPosition.y > MAX_HEIGHT - 10) {
            finalPointPosition.y = MAX_HEIGHT - 10;
        }
        polygon.points[currentControl.pointIndex] = finalPointPosition;
    }

    g_check_cross = check_cross;

    /*
    for (var i = 0; i < 6; i++) {
        console.log("(" + i.toString() + ")" + polygon.points[i].x + "," + polygon.points[i].y);
    }*/

    return true;
}

function GetMaxWidth() {
    return MAX_WIDTH;
}

function GetMaxHeight() {
    return MAX_HEIGHT;
}
// define a function that can keep the polygon in the same position when we change its
// width/height/top/left.

function anchorWrapper1(anchorIndex, fn) {
    return function (eventData, transform, x, y) {
        var fabricObject = transform.target,
            absolutePoint = fabric.util.transformPoint({
                x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x),
                y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y),
            }, fabricObject.calcTransformMatrix()),
            actionPerformed = fn(eventData, transform, x, y),
            newDim = fabricObject._setPositionDimensions({}),
            polygonBaseSize = fabricObject._getNonTransformedDimensions(),
            newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x,
            newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y;
        //fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);
        fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);

        for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++)
            currentPointPosition1[index_point] = fabricObject.points[index_point];

        if (g_check_cross == 1) {
            currentPointPosition1[0].x = 156;
            currentPointPosition1[0].y = 64;
            currentPointPosition1[1].x = 156;
            currentPointPosition1[1].y = 160;
            currentPointPosition1[2].x = 156;
            currentPointPosition1[2].y = 256;

            currentPointPosition1[3].x = 313;
            currentPointPosition1[3].y = 256;
            currentPointPosition1[4].x = 313;
            currentPointPosition1[4].y = 160;
            currentPointPosition1[5].x = 313;
            currentPointPosition1[5].y = 64;

            g_check_cross = 0;
        }

        if (g_enable_show_direction == 1 || (parseInt(parking_space[0], 10) >= 1 && parseInt(parking_line[0], 10) >= 1)) {
            currentPointPosition1[4].x = (currentPointPosition1[0].x * 1 + currentPointPosition1[3].x * 2) / 3;
            currentPointPosition1[4].y = (currentPointPosition1[0].y * 1 + currentPointPosition1[3].y * 2) / 3;
            currentPointPosition1[5].x = (currentPointPosition1[0].x * 2 + currentPointPosition1[3].x * 1) / 3;
            currentPointPosition1[5].y = (currentPointPosition1[0].y * 2 + currentPointPosition1[3].y * 1) / 3;
        }

        different_index = anchorIndex;
        show_pixels_for_zone();
        Edit_Arrow();
        return actionPerformed;
    }
}

function anchorWrapper2(anchorIndex, fn) {
    return function (eventData, transform, x, y) {
        var fabricObject = transform.target,
            absolutePoint = fabric.util.transformPoint({
                x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x),
                y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y),
            }, fabricObject.calcTransformMatrix()),
            actionPerformed = fn(eventData, transform, x, y),
            newDim = fabricObject._setPositionDimensions({}),
            polygonBaseSize = fabricObject._getNonTransformedDimensions(),
            newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x,
            newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y;
        fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);

        for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++)
            currentPointPosition2[index_point] = fabricObject.points[index_point];

        if (g_check_cross == 1) {
            currentPointPosition2[0].x = 156;
            currentPointPosition2[0].y = 64;
            currentPointPosition2[1].x = 156;
            currentPointPosition2[1].y = 160;
            currentPointPosition2[2].x = 156;
            currentPointPosition2[2].y = 256;

            currentPointPosition2[3].x = 313;
            currentPointPosition2[3].y = 256;
            currentPointPosition2[4].x = 313;
            currentPointPosition2[4].y = 160;
            currentPointPosition2[5].x = 313;
            currentPointPosition2[5].y = 64;

            g_check_cross = 0;
        }

        if (g_enable_show_direction == 1 || (parseInt(parking_space[1], 10) >= 1 && parseInt(parking_line[1], 10) >= 1)) {
            currentPointPosition2[4].x = (currentPointPosition2[0].x * 1 + currentPointPosition2[3].x * 2) / 3;
            currentPointPosition2[4].y = (currentPointPosition2[0].y * 1 + currentPointPosition2[3].y * 2) / 3;
            currentPointPosition2[5].x = (currentPointPosition2[0].x * 2 + currentPointPosition2[3].x * 1) / 3;
            currentPointPosition2[5].y = (currentPointPosition2[0].y * 2 + currentPointPosition2[3].y * 1) / 3;
        }

        different_index = anchorIndex;
        show_pixels_for_zone();
        Edit_Arrow();
        return actionPerformed;
    }
}

function anchorWrapper3(anchorIndex, fn) {
    return function (eventData, transform, x, y) {
        var fabricObject = transform.target,
            absolutePoint = fabric.util.transformPoint({
                x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x),
                y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y),
            }, fabricObject.calcTransformMatrix()),
            actionPerformed = fn(eventData, transform, x, y),
            newDim = fabricObject._setPositionDimensions({}),
            polygonBaseSize = fabricObject._getNonTransformedDimensions(),
            newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x,
            newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y;
        fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);

        for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++)
            currentPointPosition3[index_point] = fabricObject.points[index_point];

        if (g_check_cross == 1) {
            currentPointPosition3[0].x = 156;
            currentPointPosition3[0].y = 64;
            currentPointPosition3[1].x = 156;
            currentPointPosition3[1].y = 160;
            currentPointPosition3[2].x = 156;
            currentPointPosition3[2].y = 256;

            currentPointPosition3[3].x = 313;
            currentPointPosition3[3].y = 256;
            currentPointPosition3[4].x = 313;
            currentPointPosition3[4].y = 160;
            currentPointPosition3[5].x = 313;
            currentPointPosition3[5].y = 64;

            g_check_cross = 0;
        }

        if (g_enable_show_direction == 1 || (parseInt(parking_space[2], 10) >= 1 && parseInt(parking_line[2], 10) >= 1)) {
            currentPointPosition3[4].x = (currentPointPosition3[0].x * 1 + currentPointPosition3[3].x * 2) / 3;
            currentPointPosition3[4].y = (currentPointPosition3[0].y * 1 + currentPointPosition3[3].y * 2) / 3;
            currentPointPosition3[5].x = (currentPointPosition3[0].x * 2 + currentPointPosition3[3].x * 1) / 3;
            currentPointPosition3[5].y = (currentPointPosition3[0].y * 2 + currentPointPosition3[3].y * 1) / 3;
        }

        different_index = anchorIndex;
        show_pixels_for_zone();
        Edit_Arrow();
        return actionPerformed;
    }
}

function anchorWrapper4(anchorIndex, fn) {
    return function (eventData, transform, x, y) {
        var fabricObject = transform.target,
            absolutePoint = fabric.util.transformPoint({
                x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x),
                y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y),
            }, fabricObject.calcTransformMatrix()),
            actionPerformed = fn(eventData, transform, x, y),
            newDim = fabricObject._setPositionDimensions({}),
            polygonBaseSize = fabricObject._getNonTransformedDimensions(),
            newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x,
            newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y;
        fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);

        for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++)
            currentPointPosition4[index_point] = fabricObject.points[index_point];

        if (g_check_cross == 1) {
            currentPointPosition4[0].x = 156;
            currentPointPosition4[0].y = 64;
            currentPointPosition4[1].x = 156;
            currentPointPosition4[1].y = 160;
            currentPointPosition4[2].x = 156;
            currentPointPosition4[2].y = 256;

            currentPointPosition4[3].x = 313;
            currentPointPosition4[3].y = 256;
            currentPointPosition4[4].x = 313;
            currentPointPosition4[4].y = 160;
            currentPointPosition4[5].x = 313;
            currentPointPosition4[5].y = 64;

            g_check_cross = 0;
        }

        if (g_enable_show_direction == 1 || (parseInt(parking_space[3], 10) >= 1 && parseInt(parking_line[3], 10) >= 1)) {
            currentPointPosition4[4].x = (currentPointPosition4[0].x * 1 + currentPointPosition4[3].x * 2) / 3;
            currentPointPosition4[4].y = (currentPointPosition4[0].y * 1 + currentPointPosition4[3].y * 2) / 3;
            currentPointPosition4[5].x = (currentPointPosition4[0].x * 2 + currentPointPosition4[3].x * 1) / 3;
            currentPointPosition4[5].y = (currentPointPosition4[0].y * 2 + currentPointPosition4[3].y * 1) / 3;
        }

        different_index = anchorIndex;
        show_pixels_for_zone();
        Edit_Arrow();
        return actionPerformed;
    }
}

function anchorWrapper5(anchorIndex, fn) {
    return function (eventData, transform, x, y) {
        var fabricObject = transform.target,
            absolutePoint = fabric.util.transformPoint({
                x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x),
                y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y),
            }, fabricObject.calcTransformMatrix()),
            actionPerformed = fn(eventData, transform, x, y),
            newDim = fabricObject._setPositionDimensions({}),
            polygonBaseSize = fabricObject._getNonTransformedDimensions(),
            newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x,
            newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y;
        fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);

        for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++)
            currentPointPosition5[index_point] = fabricObject.points[index_point];

        if (g_check_cross == 1) {
            currentPointPosition5[0].x = 156;
            currentPointPosition5[0].y = 64;
            currentPointPosition5[1].x = 156;
            currentPointPosition5[1].y = 160;
            currentPointPosition5[2].x = 156;
            currentPointPosition5[2].y = 256;

            currentPointPosition5[3].x = 313;
            currentPointPosition5[3].y = 256;
            currentPointPosition5[4].x = 313;
            currentPointPosition5[4].y = 160;
            currentPointPosition5[5].x = 313;
            currentPointPosition5[5].y = 64;

            g_check_cross = 0;
        }

        if (g_enable_show_direction == 1 || (parseInt(parking_space[3], 10) >= 1 && parseInt(parking_line[3], 10) >= 1)) {
            currentPointPosition5[4].x = (currentPointPosition5[0].x * 1 + currentPointPosition5[3].x * 2) / 3;
            currentPointPosition5[4].y = (currentPointPosition5[0].y * 1 + currentPointPosition5[3].y * 2) / 3;
            currentPointPosition5[5].x = (currentPointPosition5[0].x * 2 + currentPointPosition5[3].x * 1) / 3;
            currentPointPosition5[5].y = (currentPointPosition5[0].y * 2 + currentPointPosition5[3].y * 1) / 3;
        }

        different_index = anchorIndex;
        show_pixels_for_zone();
        Edit_Arrow();
        return actionPerformed;
    }
}

function anchorWrapper6(anchorIndex, fn) {
    return function (eventData, transform, x, y) {
        var fabricObject = transform.target,
            absolutePoint = fabric.util.transformPoint({
                x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x),
                y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y),
            }, fabricObject.calcTransformMatrix()),
            actionPerformed = fn(eventData, transform, x, y),
            newDim = fabricObject._setPositionDimensions({}),
            polygonBaseSize = fabricObject._getNonTransformedDimensions(),
            newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x,
            newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y;
        fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);

        for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++)
            currentPointPosition6[index_point] = fabricObject.points[index_point];

        if (g_check_cross == 1) {
            currentPointPosition6[0].x = 156;
            currentPointPosition6[0].y = 64;
            currentPointPosition6[1].x = 156;
            currentPointPosition6[1].y = 160;
            currentPointPosition6[2].x = 156;
            currentPointPosition6[2].y = 256;

            currentPointPosition6[3].x = 313;
            currentPointPosition6[3].y = 256;
            currentPointPosition6[4].x = 313;
            currentPointPosition6[4].y = 160;
            currentPointPosition6[5].x = 313;
            currentPointPosition6[5].y = 64;

            g_check_cross = 0;
        }

        if (g_enable_show_direction == 1 || (parseInt(parking_space[3], 10) >= 1 && parseInt(parking_line[3], 10) >= 1)) {
            currentPointPosition6[4].x = (currentPointPosition6[0].x * 1 + currentPointPosition6[3].x * 2) / 3;
            currentPointPosition6[4].y = (currentPointPosition6[0].y * 1 + currentPointPosition6[3].y * 2) / 3;
            currentPointPosition6[5].x = (currentPointPosition6[0].x * 2 + currentPointPosition6[3].x * 1) / 3;
            currentPointPosition6[5].y = (currentPointPosition6[0].y * 2 + currentPointPosition6[3].y * 1) / 3;
        }

        different_index = anchorIndex;
        show_pixels_for_zone();
        Edit_Arrow();
        return actionPerformed;
    }
}

function anchorWrapper7(anchorIndex, fn) {
    return function (eventData, transform, x, y) {
        var fabricObject = transform.target,
            absolutePoint = fabric.util.transformPoint({
                x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x),
                y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y),
            }, fabricObject.calcTransformMatrix()),
            actionPerformed = fn(eventData, transform, x, y),
            newDim = fabricObject._setPositionDimensions({}),
            polygonBaseSize = fabricObject._getNonTransformedDimensions(),
            newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x,
            newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y;
        fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);

        for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++)
            currentPointPosition7[index_point] = fabricObject.points[index_point];

        if (g_check_cross == 1) {
            currentPointPosition7[0].x = 156;
            currentPointPosition7[0].y = 64;
            currentPointPosition7[1].x = 156;
            currentPointPosition7[1].y = 160;
            currentPointPosition7[2].x = 156;
            currentPointPosition7[2].y = 256;

            currentPointPosition7[3].x = 313;
            currentPointPosition7[3].y = 256;
            currentPointPosition7[4].x = 313;
            currentPointPosition7[4].y = 160;
            currentPointPosition7[5].x = 313;
            currentPointPosition7[5].y = 64;

            g_check_cross = 0;
        }

        if (g_enable_show_direction == 1 || (parseInt(parking_space[3], 10) >= 1 && parseInt(parking_line[3], 10) >= 1)) {
            currentPointPosition7[4].x = (currentPointPosition7[0].x * 1 + currentPointPosition7[3].x * 2) / 3;
            currentPointPosition7[4].y = (currentPointPosition7[0].y * 1 + currentPointPosition7[3].y * 2) / 3;
            currentPointPosition7[5].x = (currentPointPosition7[0].x * 2 + currentPointPosition7[3].x * 1) / 3;
            currentPointPosition7[5].y = (currentPointPosition7[0].y * 2 + currentPointPosition7[3].y * 1) / 3;
        }

        different_index = anchorIndex;
        show_pixels_for_zone();
        Edit_Arrow();
        return actionPerformed;
    }
}


function anchorWrapper8(anchorIndex, fn) {
    return function (eventData, transform, x, y) {
        var fabricObject = transform.target,
            absolutePoint = fabric.util.transformPoint({
                x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x),
                y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y),
            }, fabricObject.calcTransformMatrix()),
            actionPerformed = fn(eventData, transform, x, y),
            newDim = fabricObject._setPositionDimensions({}),
            polygonBaseSize = fabricObject._getNonTransformedDimensions(),
            newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x,
            newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y;
        fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);

        for (var index_point = 0; index_point < MAX_SIZE_POINTS; index_point++)
            currentPointPosition8[index_point] = fabricObject.points[index_point];

        if (g_check_cross == 1) {
            currentPointPosition8[0].x = 156;
            currentPointPosition8[0].y = 64;
            currentPointPosition8[1].x = 156;
            currentPointPosition8[1].y = 160;
            currentPointPosition8[2].x = 156;
            currentPointPosition8[2].y = 256;

            currentPointPosition8[3].x = 313;
            currentPointPosition8[3].y = 256;
            currentPointPosition8[4].x = 313;
            currentPointPosition8[4].y = 160;
            currentPointPosition8[5].x = 313;
            currentPointPosition8[5].y = 64;

            g_check_cross = 0;
        }

        if (g_enable_show_direction == 1 || (parseInt(parking_space[3], 10) >= 1 && parseInt(parking_line[3], 10) >= 1)) {
            currentPointPosition8[4].x = (currentPointPosition8[0].x * 1 + currentPointPosition8[3].x * 2) / 3;
            currentPointPosition8[4].y = (currentPointPosition8[0].y * 1 + currentPointPosition8[3].y * 2) / 3;
            currentPointPosition8[5].x = (currentPointPosition8[0].x * 2 + currentPointPosition8[3].x * 1) / 3;
            currentPointPosition8[5].y = (currentPointPosition8[0].y * 2 + currentPointPosition8[3].y * 1) / 3;
        }

        different_index = anchorIndex;
        show_pixels_for_zone();
        Edit_Arrow();
        return actionPerformed;
    }
}

var check_edit1 = 0;
var check_edit2 = 0;
var check_edit3 = 0;
var check_edit4 = 0;
var check_edit5 = 0;
var check_edit6 = 0;
var check_edit7 = 0;
var check_edit8 = 0;

function get_check_edit1() {
    return check_edit1;
}

function get_check_edit2() {
    return check_edit2;
}

function get_check_edit3() {
    return check_edit3;
}
function get_check_edit4() {
    return check_edit4;
}

function get_check_edit5() {
    return check_edit5;
}

function get_check_edit6() {
    return check_edit6;
}

function get_check_edit7() {
    return check_edit7;
}

function get_check_edit8() {
    return check_edit8;
}

function Edit1() {
    // clone what are you copying since you
    // may want copy and paste on different moment.
    // and you do not want the changes happened
    // later to reflect on the copy.
    var poly1 = canvasTripwire1.getObjects()[0];
    canvasTripwire1.setActiveObject(poly1);

    poly1.edit = !poly1.edit;
    if (poly1.edit) {
        var lastControl1 = poly1.points.length - 1;
        poly1.cornerStyle = 'circle';
        poly1.cornerColor = "rgba(108, 135, 212, 0.8)";
        poly1.cornerSize = 20;

        poly1.controls = poly1.points.reduce(function (acc1, point1, index1) {
            acc1['p' + index1] = new fabric.Control({
                positionHandler: polygonPositionHandler,
                actionHandler: anchorWrapper1(index1 > 0 ? index1 - 1 : lastControl1, func_actionHandler),
                actionName: 'modifyPolygon1',
                pointIndex: index1
            });
            return acc1;
        }, {});

        check_edit1 = 1;
    } else {
        //poly1.cornerColor = 'black';
        //poly1.cornerStyle = 'rect';
        //poly1.controls = fabric.Object.prototype.controls;
        poly1.controls = null;
        poly1.cornerColor = null;
        poly1.cornerStyle = null;
        check_edit1 = 0;
    }
    poly1.hasBorders = !poly1.edit;
    canvasTripwire1.requestRenderAll();
}

function Edit2() {
    // clone what are you copying since you
    // may want copy and paste on different moment.
    // and you do not want the changes happened
    // later to reflect on the copy.
    var poly2 = canvasTripwire2.getObjects()[0];
    canvasTripwire2.setActiveObject(poly2);

    poly2.edit = !poly2.edit;
    if (poly2.edit) {
        var lastControl2 = poly2.points.length - 1;
        poly2.cornerStyle = 'circle';
        poly2.cornerColor = "rgba(108, 135, 212, 0.8)";
        poly2.cornerSize = 20;

        poly2.controls = poly2.points.reduce(function (acc2, point2, index2) {
            acc2['p' + index2] = new fabric.Control({
                positionHandler: polygonPositionHandler,
                actionHandler: anchorWrapper2(index2 > 0 ? index2 - 1 : lastControl2, func_actionHandler),
                actionName: 'modifyPolygon2',
                pointIndex: index2
            });
            return acc2;
        }, {});

        check_edit2 = 1;
    } else {
        //poly2.cornerColor = 'black';
        //poly2.cornerStyle = 'rect';
        //poly2.controls = fabric.Object.prototype.controls;
        poly2.controls = null;
        poly2.cornerColor = null;
        poly2.cornerStyle = null;

        check_edit2 = 0;
    }
    poly2.hasBorders = !poly2.edit;
    canvasTripwire2.requestRenderAll();
}

function Edit3() {
    // clone what are you copying since you
    // may want copy and paste on different moment.
    // and you do not want the changes happened
    // later to reflect on the copy.
    var poly3 = canvasTripwire3.getObjects()[0];
    canvasTripwire3.setActiveObject(poly3);

    poly3.edit = !poly3.edit;
    if (poly3.edit) {
        var lastControl3 = poly3.points.length - 1;
        poly3.cornerStyle = 'circle';
        poly3.cornerColor = "rgba(108, 135, 212, 0.8)";
        poly3.cornerSize = 20;

        poly3.controls = poly3.points.reduce(function (acc3, point3, index3) {
            acc3['p' + index3] = new fabric.Control({
                positionHandler: polygonPositionHandler,
                actionHandler: anchorWrapper3(index3 > 0 ? index3 - 1 : lastControl3, func_actionHandler),
                actionName: 'modifyPolygon3',
                pointIndex: index3
            });
            return acc3;
        }, {});

        check_edit3 = 1;
    } else {
        //poly3.cornerColor = 'black';
        //poly3.cornerStyle = 'rect';
        //poly3.controls = fabric.Object.prototype.controls;
        poly3.controls = null;
        poly3.cornerColor = null;
        poly3.cornerStyle = null;

        check_edit3 = 0;
    }
    poly3.hasBorders = !poly3.edit;
    canvasTripwire3.requestRenderAll();
}

function Edit4() {
    // clone what are you copying since you
    // may want copy and paste on different moment.
    // and you do not want the changes happened
    // later to reflect on the copy.
    var poly4 = canvasTripwire4.getObjects()[0];
    canvasTripwire4.setActiveObject(poly4);

    poly4.edit = !poly4.edit;
    if (poly4.edit) {
        var lastControl4 = poly4.points.length - 1;
        poly4.cornerStyle = 'circle';
        poly4.cornerColor = "rgba(108, 135, 212, 0.8)";
        poly4.cornerSize = 20;

        poly4.controls = poly4.points.reduce(function (acc4, point4, index4) {
            acc4['p' + index4] = new fabric.Control({
                positionHandler: polygonPositionHandler,
                actionHandler: anchorWrapper4(index4 > 0 ? index4 - 1 : lastControl4, func_actionHandler),
                actionName: 'modifyPolygon4',
                pointIndex: index4
            });
            return acc4;
        }, {});

        check_edit4 = 1;
    } else {
        //poly4.cornerColor = 'black';
        //poly4.cornerStyle = 'rect';
        //poly4.controls = fabric.Object.prototype.controls;
        poly4.controls = null;
        poly4.cornerColor = null;
        poly4.cornerStyle = null;

        check_edit4 = 0;
    }
    poly4.hasBorders = !poly4.edit;
    canvasTripwire4.requestRenderAll();
}

function Edit5() {
    // clone what are you copying since you
    // may want copy and paste on different moment.
    // and you do not want the changes happened
    // later to reflect on the copy.
    var poly5 = canvasTripwire5.getObjects()[0];
    canvasTripwire5.setActiveObject(poly5);

    poly5.edit = !poly5.edit;
    if (poly5.edit) {
        var lastControl5 = poly5.points.length - 1;
        poly5.cornerStyle = 'circle';
        poly5.cornerColor = "rgba(108, 135, 212, 0.8)";
        poly5.cornerSize = 20;

        poly5.controls = poly5.points.reduce(function (acc5, point5, index5) {
            acc5['p' + index5] = new fabric.Control({
                positionHandler: polygonPositionHandler,
                actionHandler: anchorWrapper5(index5 > 0 ? index5 - 1 : lastControl5, func_actionHandler),
                actionName: 'modifyPolygon5',
                pointIndex: index5
            });
            return acc5;
        }, {});

        check_edit5 = 1;
    } else {
        //poly4.cornerColor = 'black';
        //poly4.cornerStyle = 'rect';
        //poly4.controls = fabric.Object.prototype.controls;
        poly5.controls = null;
        poly5.cornerColor = null;
        poly5.cornerStyle = null;

        check_edit5 = 0;
    }
    poly5.hasBorders = !poly5.edit;
    canvasTripwire5.requestRenderAll();
}

function Edit6() {
    // clone what are you copying since you
    // may want copy and paste on different moment.
    // and you do not want the changes happened
    // later to reflect on the copy.
    var poly6 = canvasTripwire6.getObjects()[0];
    canvasTripwire6.setActiveObject(poly6);

    poly6.edit = !poly6.edit;
    if (poly6.edit) {
        var lastControl6 = poly6.points.length - 1;
        poly6.cornerStyle = 'circle';
        poly6.cornerColor = "rgba(108, 135, 212, 0.8)";
        poly6.cornerSize = 20;

        poly6.controls = poly6.points.reduce(function (acc6, point6, index6) {
            acc6['p' + index6] = new fabric.Control({
                positionHandler: polygonPositionHandler,
                actionHandler: anchorWrapper6(index6 > 0 ? index6 - 1 : lastControl6, func_actionHandler),
                actionName: 'modifyPolygon6',
                pointIndex: index6
            });
            return acc6;
        }, {});

        check_edit6 = 1;
    } else {
        //poly4.cornerColor = 'black';
        //poly4.cornerStyle = 'rect';
        //poly4.controls = fabric.Object.prototype.controls;
        poly6.controls = null;
        poly6.cornerColor = null;
        poly6.cornerStyle = null;

        check_edit6 = 0;
    }
    poly6.hasBorders = !poly6.edit;
    canvasTripwire6.requestRenderAll();
}

function Edit7() {
    // clone what are you copying since you
    // may want copy and paste on different moment.
    // and you do not want the changes happened
    // later to reflect on the copy.
    var poly7 = canvasTripwire7.getObjects()[0];
    canvasTripwire7.setActiveObject(poly7);

    poly7.edit = !poly7.edit;
    if (poly7.edit) {
        var lastControl7 = poly7.points.length - 1;
        poly7.cornerStyle = 'circle';
        poly7.cornerColor = "rgba(108, 135, 212, 0.8)";
        poly7.cornerSize = 20;

        poly7.controls = poly7.points.reduce(function (acc7, point7, index7) {
            acc7['p' + index7] = new fabric.Control({
                positionHandler: polygonPositionHandler,
                actionHandler: anchorWrapper7(index7 > 0 ? index7 - 1 : lastControl7, func_actionHandler),
                actionName: 'modifyPolygon7',
                pointIndex: index7
            });
            return acc7;
        }, {});

        check_edit7 = 1;
    } else {
        //poly4.cornerColor = 'black';
        //poly4.cornerStyle = 'rect';
        //poly4.controls = fabric.Object.prototype.controls;
        poly7.controls = null;
        poly7.cornerColor = null;
        poly7.cornerStyle = null;

        check_edit7 = 0;
    }
    poly7.hasBorders = !poly7.edit;
    canvasTripwire7.requestRenderAll();
}

function Edit8() {
    // clone what are you copying since you
    // may want copy and paste on different moment.
    // and you do not want the changes happened
    // later to reflect on the copy.
    var poly8 = canvasTripwire8.getObjects()[0];
    canvasTripwire8.setActiveObject(poly8);

    poly8.edit = !poly8.edit;
    if (poly8.edit) {
        var lastControl8 = poly8.points.length - 1;
        poly8.cornerStyle = 'circle';
        poly8.cornerColor = "rgba(108, 135, 212, 0.8)";
        poly8.cornerSize = 20;

        poly8.controls = poly8.points.reduce(function (acc8, point8, index8) {
            acc8['p' + index8] = new fabric.Control({
                positionHandler: polygonPositionHandler,
                actionHandler: anchorWrapper8(index8 > 0 ? index8 - 1 : lastControl8, func_actionHandler),
                actionName: 'modifyPolygon8',
                pointIndex: index8
            });
            return acc8;
        }, {});

        check_edit8 = 1;
    } else {
        //poly4.cornerColor = 'black';
        //poly4.cornerStyle = 'rect';
        //poly4.controls = fabric.Object.prototype.controls;
        poly8.controls = null;
        poly8.cornerColor = null;
        poly8.cornerStyle = null;

        check_edit8 = 0;
    }
    poly8.hasBorders = !poly8.edit;
    canvasTripwire8.requestRenderAll();
}

function createCanvasTrafficLight() {
    canvasTripwire = new fabric.Canvas('CanvasTripwire', {
        height: G_VIEW_CANVAS_Y,//window.innerHeight
        width: G_VIEW_CANVAS_X//window.innerWidth
    });
    canvasTripwire.requestRenderAll();
}



//-----------------------------------------------------------------------------------------------------------------

function polygonArea(points) {
    var i, j;
    var area = 0;
    for (i = 0; i < points.length; i++) {
        j = (i+1) % points.length;
        area += points[i].x * points[j].y;
        area -= points[i].y * points[j].x;
    }
    area /= 2;
    return Math.abs(area);
}

function func_rotate_direction() {
    g_mydirection[g_zone_id]++;
    if (g_mydirection[g_zone_id] === 5) {
        g_mydirection[g_zone_id] = 1;
    }
    Edit_Arrow();
}

function func_set_direction(temp_direction,temp_zone_id) {
    if (temp_direction >= 1 && temp_direction <= 4) {
        g_mydirection[temp_zone_id] = temp_direction;
    }
}

function func_get_direction(temp_zone_id) {
    return g_mydirection[temp_zone_id];
}

var g_first_edit_zone = 0;
function Edit_Zone(enable_zone_in_four_point) {
    if (g_zone_id >= 0 && g_zone_id <= 7) {
        g_first_edit_zone = 1;
        MAX_SIZE_POINTS = 6;
        points_array = GetPointLocation(g_zone_id);

        if (enable_zone_in_four_point === 0)
            MAX_SIZE_POINTS = 6;
        else
            MAX_SIZE_POINTS = 4;

        var temp_points_array = [];

        for (var i = 0; i < MAX_SIZE_POINTS; i++) {
            temp_points_array.push({
                x: 0,
                y: 0
            });
        }

        var min_x_temp = 10000;
        var min_y_temp = 10000;

        for (var i = 0; i < MAX_SIZE_POINTS; i++) {
            temp_points_array[i].x = points_array[i].x;
            temp_points_array[i].y = points_array[i].y;
            if (temp_points_array[i].x < min_x_temp)
                min_x_temp = temp_points_array[i].x;
            if (temp_points_array[i].y < min_y_temp)
                min_y_temp = temp_points_array[i].y;
        }

        var polygon_zone_temp = new fabric.Polygon(temp_points_array, {
            left: min_x_temp,
            top: min_y_temp,
            fill: 'transparent',
            strokeWidth: 2,
            stroke: '#ffff00',
            scaleX: 1,
            scaleY: 1,
            opacity: 0.7,
            objectCaching: false,
            transparentCorners: false,
            //cornerColor: '#ff0000',
        });
        polygon_zone_temp.lockMovementX = true;	//Prevents horizontal movement
        polygon_zone_temp.lockMovementY = true;	//Prevents vertical movement

        if (g_zone_id === 0) {
            canvasTripwire1.insertAt(polygon_zone_temp, 0, true);

            disabelIteraction(canvasTripwire2.getObjects()[0]);
            disabelIteraction(canvasTripwire3.getObjects()[0]);
            disabelIteraction(canvasTripwire4.getObjects()[0]);
            disabelIteraction(canvasTripwire5.getObjects()[0]);
            disabelIteraction(canvasTripwire6.getObjects()[0]);
            disabelIteraction(canvasTripwire7.getObjects()[0]);
            disabelIteraction(canvasTripwire8.getObjects()[0]);
            Edit1();
           
        }
        else if (g_zone_id === 1) {
            canvasTripwire2.insertAt(polygon_zone_temp, 0, true);

            disabelIteraction(canvasTripwire1.getObjects()[0]);
            disabelIteraction(canvasTripwire3.getObjects()[0]);
            disabelIteraction(canvasTripwire4.getObjects()[0]);
            disabelIteraction(canvasTripwire5.getObjects()[0]);
            disabelIteraction(canvasTripwire6.getObjects()[0]);
            disabelIteraction(canvasTripwire7.getObjects()[0]);
            disabelIteraction(canvasTripwire8.getObjects()[0]);
            Edit2();
        }
        else if (g_zone_id === 2) {
            canvasTripwire3.insertAt(polygon_zone_temp, 0, true);

            disabelIteraction(canvasTripwire1.getObjects()[0]);
            disabelIteraction(canvasTripwire2.getObjects()[0]);
            disabelIteraction(canvasTripwire4.getObjects()[0]);
            disabelIteraction(canvasTripwire5.getObjects()[0]);
            disabelIteraction(canvasTripwire6.getObjects()[0]);
            disabelIteraction(canvasTripwire7.getObjects()[0]);
            disabelIteraction(canvasTripwire8.getObjects()[0]);
            Edit3();
        }
        else if (g_zone_id === 3) {
            canvasTripwire4.insertAt(polygon_zone_temp, 0, true);

            disabelIteraction(canvasTripwire1.getObjects()[0]);
            disabelIteraction(canvasTripwire2.getObjects()[0]);
            disabelIteraction(canvasTripwire3.getObjects()[0]);
            disabelIteraction(canvasTripwire5.getObjects()[0]);
            disabelIteraction(canvasTripwire6.getObjects()[0]);
            disabelIteraction(canvasTripwire7.getObjects()[0]);
            disabelIteraction(canvasTripwire8.getObjects()[0]);
            Edit4();
        }
        else if (g_zone_id === 4) {
            canvasTripwire5.insertAt(polygon_zone_temp, 0, true);

            disabelIteraction(canvasTripwire1.getObjects()[0]);
            disabelIteraction(canvasTripwire2.getObjects()[0]);
            disabelIteraction(canvasTripwire3.getObjects()[0]);
            disabelIteraction(canvasTripwire4.getObjects()[0]);
            disabelIteraction(canvasTripwire6.getObjects()[0]);
            disabelIteraction(canvasTripwire7.getObjects()[0]);
            disabelIteraction(canvasTripwire8.getObjects()[0]);
            Edit5();
        }
        else if (g_zone_id === 5) {
            canvasTripwire6.insertAt(polygon_zone_temp, 0, true);

            disabelIteraction(canvasTripwire1.getObjects()[0]);
            disabelIteraction(canvasTripwire2.getObjects()[0]);
            disabelIteraction(canvasTripwire3.getObjects()[0]);
            disabelIteraction(canvasTripwire4.getObjects()[0]);
            disabelIteraction(canvasTripwire5.getObjects()[0]);
            disabelIteraction(canvasTripwire7.getObjects()[0]);
            disabelIteraction(canvasTripwire8.getObjects()[0]);
            Edit6();
        }
        else if (g_zone_id === 6) {
            canvasTripwire7.insertAt(polygon_zone_temp, 0, true);

            disabelIteraction(canvasTripwire1.getObjects()[0]);
            disabelIteraction(canvasTripwire2.getObjects()[0]);
            disabelIteraction(canvasTripwire3.getObjects()[0]);
            disabelIteraction(canvasTripwire4.getObjects()[0]);
            disabelIteraction(canvasTripwire5.getObjects()[0]);
            disabelIteraction(canvasTripwire6.getObjects()[0]);
            disabelIteraction(canvasTripwire8.getObjects()[0]);
            Edit7();
        }
        else if (g_zone_id === 7) {
            canvasTripwire8.insertAt(polygon_zone_temp, 0, true);

            disabelIteraction(canvasTripwire1.getObjects()[0]);
            disabelIteraction(canvasTripwire2.getObjects()[0]);
            disabelIteraction(canvasTripwire3.getObjects()[0]);
            disabelIteraction(canvasTripwire4.getObjects()[0]);
            disabelIteraction(canvasTripwire5.getObjects()[0]);
            disabelIteraction(canvasTripwire6.getObjects()[0]);
            disabelIteraction(canvasTripwire7.getObjects()[0]);
            Edit8();
        }
    }
}

function Edit_Arrow() {
    points_array = GetPointLocation(g_zone_id);

    if (g_zone_id >= 0 && g_zone_id <= 7) {

        var index_point = g_mydirection[g_zone_id] - 1;
        var next_point = index_point + 1 >= 4 ? 0 : index_point + 1;
        var start_x = points_array[next_point].x;
        var start_y = points_array[next_point].y;
        var end_x = points_array[index_point].x;
        var end_y = points_array[index_point].y;

        if (g_zone_id === 0)
            canvasTripwire1.insertAt(AddArrowObject(start_x, start_y, end_x, end_y), 1, true);
        else if (g_zone_id === 1)
            canvasTripwire2.insertAt(AddArrowObject(start_x, start_y, end_x, end_y), 1, true);
        else if (g_zone_id === 2)
            canvasTripwire3.insertAt(AddArrowObject(start_x, start_y, end_x, end_y), 1, true);
        else if (g_zone_id === 3)
            canvasTripwire4.insertAt(AddArrowObject(start_x, start_y, end_x, end_y), 1, true);
        else if (g_zone_id === 4)
            canvasTripwire5.insertAt(AddArrowObject(start_x, start_y, end_x, end_y), 1, true);
        else if (g_zone_id === 5)
            canvasTripwire6.insertAt(AddArrowObject(start_x, start_y, end_x, end_y), 1, true);
        else if (g_zone_id === 6)
            canvasTripwire7.insertAt(AddArrowObject(start_x, start_y, end_x, end_y), 1, true);
        else if (g_zone_id === 7)
            canvasTripwire8.insertAt(AddArrowObject(start_x, start_y, end_x, end_y), 1, true);
    }
}

function set_g_zone_id(zone_id) {
        g_zone_id = zone_id;
}

function show_pixels_for_zone() {

    linelengths_list = "";
    var linelengths_list_2 = "";
    var linelengths_list_3 = "";

    points_array = GetPointLocation(g_zone_id);

    var temp_different_index = different_index + 1 < MAX_SIZE_POINTS ? different_index + 1: 0;

    var last_different_index = temp_different_index - 1 >= 0 ? temp_different_index - 1 : MAX_SIZE_POINTS - 1;
    var next_different_index = temp_different_index + 1 < MAX_SIZE_POINTS ? temp_different_index + 1 : 0;

    var current_x = points_array[temp_different_index].x * G_CAM_SENSOR_RES_WIDTH / G_VIEW_CANVAS_X;
    var current_y = points_array[temp_different_index].y * G_CAM_SENSOR_RES_HEIGHT / G_VIEW_CANVAS_Y;
    var last_x = points_array[last_different_index].x * G_CAM_SENSOR_RES_WIDTH / G_VIEW_CANVAS_X;
    var last_y = points_array[last_different_index].y * G_CAM_SENSOR_RES_HEIGHT / G_VIEW_CANVAS_Y;
    var next_x = points_array[next_different_index].x * G_CAM_SENSOR_RES_WIDTH / G_VIEW_CANVAS_X;
    var next_y = points_array[next_different_index].y * G_CAM_SENSOR_RES_HEIGHT / G_VIEW_CANVAS_Y;

    var linelength1 = Math.sqrt(Math.pow((current_x - last_x), 2) + Math.pow((current_y - last_y), 2));
    var linelength2 = Math.sqrt(Math.pow((next_x - current_x), 2) + Math.pow((next_y - current_y), 2));
    linelengths_list += linelength1.toFixed(2) + " px\n";
    linelengths_list_2 += linelength2.toFixed(2) + " px\n";

    linelengths_list_3 += "FOV: " + ((polygonArea(points_array) / (G_VIEW_CANVAS_X * G_VIEW_CANVAS_Y))*100).toFixed(0) + " %\n"; 
    var max_protected_objects = g_max_protected_objects;

    if (g_zone_id === 0) {
        while (canvasTripwire1.getObjects().length > max_protected_objects) {
            var items = canvasTripwire1.getObjects();
            if (items[canvasTripwire1.getObjects().length - 1]) {
                canvasTripwire1.remove(items[canvasTripwire1.getObjects().length - 1]);
            }
        }

        canvasTripwire1.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[last_different_index].x) / 2, (points_array[temp_different_index].y + points_array[last_different_index].y) / 2, 50, 50, linelengths_list));
        canvasTripwire1.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[next_different_index].x) / 2, (points_array[temp_different_index].y + points_array[next_different_index].y) / 2, 50, 50, linelengths_list_2));
        canvasTripwire1.add(insertTextLabel_Orange(0, 0, 50, 50, linelengths_list_3));
        g_enable_show_pixel = 1;
        setTimeout(function () { g_enable_show_pixel = 0; },3000);
    }
    else if (g_zone_id === 1) {
        while (canvasTripwire2.getObjects().length > max_protected_objects) {
            var items = canvasTripwire2.getObjects();
            if (items[canvasTripwire2.getObjects().length - 1]) {
                canvasTripwire2.remove(items[canvasTripwire2.getObjects().length - 1]);
            }
        }
        canvasTripwire2.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[last_different_index].x) / 2, (points_array[temp_different_index].y + points_array[last_different_index].y) / 2, 50, 50, linelengths_list));
        canvasTripwire2.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[next_different_index].x) / 2, (points_array[temp_different_index].y + points_array[next_different_index].y) / 2, 50, 50, linelengths_list_2));
        canvasTripwire2.add(insertTextLabel_Orange(0, 0, 50, 50, linelengths_list_3));
        g_enable_show_pixel = 1;
        setTimeout(function () { g_enable_show_pixel = 0; }, 3000);
    }
    else if (g_zone_id === 2) {
        while (canvasTripwire3.getObjects().length > max_protected_objects) {
            var items = canvasTripwire3.getObjects();
            if (items[canvasTripwire3.getObjects().length - 1]) {
                canvasTripwire3.remove(items[canvasTripwire3.getObjects().length - 1]);
            }
        }
        canvasTripwire3.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[last_different_index].x) / 2, (points_array[temp_different_index].y + points_array[last_different_index].y) / 2, 50, 50, linelengths_list));
        canvasTripwire3.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[next_different_index].x) / 2, (points_array[temp_different_index].y + points_array[next_different_index].y) / 2, 50, 50, linelengths_list_2));
        canvasTripwire3.add(insertTextLabel_Orange(0, 0, 50, 50, linelengths_list_3));
        g_enable_show_pixel = 1;
        setTimeout(function () { g_enable_show_pixel = 0; }, 3000);
    }
    else if (g_zone_id === 3) {
        while (canvasTripwire4.getObjects().length > max_protected_objects) {
            var items = canvasTripwire4.getObjects();
            if (items[canvasTripwire4.getObjects().length - 1]) {
                canvasTripwire4.remove(items[canvasTripwire4.getObjects().length - 1]);
            }
        }
        canvasTripwire4.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[last_different_index].x) / 2, (points_array[temp_different_index].y + points_array[last_different_index].y) / 2, 50, 50, linelengths_list));
        canvasTripwire4.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[next_different_index].x) / 2, (points_array[temp_different_index].y + points_array[next_different_index].y) / 2, 50, 50, linelengths_list_2));
        canvasTripwire4.add(insertTextLabel_Orange(0, 0, 50, 50, linelengths_list_3));
        g_enable_show_pixel = 1;
        setTimeout(function () { g_enable_show_pixel = 0; }, 3000);
    }
    else if (g_zone_id === 4) {
        while (canvasTripwire5.getObjects().length > max_protected_objects) {
            var items = canvasTripwire5.getObjects();
            if (items[canvasTripwire5.getObjects().length - 1]) {
                canvasTripwire5.remove(items[canvasTripwire5.getObjects().length - 1]);
            }
        }
        canvasTripwire5.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[last_different_index].x) / 2, (points_array[temp_different_index].y + points_array[last_different_index].y) / 2, 50, 50, linelengths_list));
        canvasTripwire5.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[next_different_index].x) / 2, (points_array[temp_different_index].y + points_array[next_different_index].y) / 2, 50, 50, linelengths_list_2));
        canvasTripwire5.add(insertTextLabel_Orange(0, 0, 50, 50, linelengths_list_3));
        g_enable_show_pixel = 1;
        setTimeout(function () { g_enable_show_pixel = 0; }, 3000);
    }
    else if (g_zone_id === 5) {
        while (canvasTripwire6.getObjects().length > max_protected_objects) {
            var items = canvasTripwire6.getObjects();
            if (items[canvasTripwire6.getObjects().length - 1]) {
                canvasTripwire6.remove(items[canvasTripwire6.getObjects().length - 1]);
            }
        }
        canvasTripwire6.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[last_different_index].x) / 2, (points_array[temp_different_index].y + points_array[last_different_index].y) / 2, 50, 50, linelengths_list));
        canvasTripwire6.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[next_different_index].x) / 2, (points_array[temp_different_index].y + points_array[next_different_index].y) / 2, 50, 50, linelengths_list_2));
        canvasTripwire6.add(insertTextLabel_Orange(0, 0, 50, 50, linelengths_list_3));
        g_enable_show_pixel = 1;
        setTimeout(function () { g_enable_show_pixel = 0; }, 3000);
    }
    else if (g_zone_id === 6) {
        while (canvasTripwire7.getObjects().length > max_protected_objects) {
            var items = canvasTripwire7.getObjects();
            if (items[canvasTripwire7.getObjects().length - 1]) {
                canvasTripwire7.remove(items[canvasTripwire7.getObjects().length - 1]);
            }
        }
        canvasTripwire7.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[last_different_index].x) / 2, (points_array[temp_different_index].y + points_array[last_different_index].y) / 2, 50, 50, linelengths_list));
        canvasTripwire7.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[next_different_index].x) / 2, (points_array[temp_different_index].y + points_array[next_different_index].y) / 2, 50, 50, linelengths_list_2));
        canvasTripwire7.add(insertTextLabel_Orange(0, 0, 50, 50, linelengths_list_3));
        g_enable_show_pixel = 1;
        setTimeout(function () { g_enable_show_pixel = 0; }, 3000);
    }
    else if (g_zone_id === 7) {
        while (canvasTripwire8.getObjects().length > max_protected_objects) {
            var items = canvasTripwire8.getObjects();
            if (items[canvasTripwire8.getObjects().length - 1]) {
                canvasTripwire8.remove(items[canvasTripwire8.getObjects().length - 1]);
            }
        }
        canvasTripwire8.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[last_different_index].x) / 2, (points_array[temp_different_index].y + points_array[last_different_index].y) / 2, 50, 50, linelengths_list));
        canvasTripwire8.add(insertTextLabel_Orange((points_array[temp_different_index].x + points_array[next_different_index].x) / 2, (points_array[temp_different_index].y + points_array[next_different_index].y) / 2, 50, 50, linelengths_list_2));
        canvasTripwire8.add(insertTextLabel_Orange(0, 0, 50, 50, linelengths_list_3));
        g_enable_show_pixel = 1;
        setTimeout(function () { g_enable_show_pixel = 0; }, 3000);
    }

    refresh_parking_info();

}




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;
}

//var last_cam_time = "";
//var count_the_same_cam_time = 0; 

function get_counter_count_msg() {
    return counter_count_msg;
}

var i_cold_times = 0;
var g_cold_times = 20;

function change_g_cold_times(temp_cold_times) {
    g_cold_times = temp_cold_times;
}

function GetAlarm_radar_speed(alarm_data) {
    // console.log(check_events_array);

    for (var i = 0; i < check_events_array.length; i++) {
        // console.log(document.getElementById(check_events_array[i]).checked);

        if (document.getElementById(check_events_array[i]).checked === true) {
            var behavior_input = document.getElementById(check_events_array[i]);

            if ((i < 15) || (localStorage.getItem("Radar_recognition") != "Yes")){
                // console.log("Pass in speed detection");
                continue;
            } else {
                if (!!alarm_data) {
                    var datas;
                    var radar_json;
                    var complete_data = "";
                    var n1 = -1, n2 = -1, n2_temp = -1;
            
                    complete_data = complete_data.concat(alarm_data);
                    n1 = complete_data.indexOf('"AiRadar"');
                    n2_temp = complete_data.indexOf('"Speed"');
                    n2 = complete_data.indexOf('}]}', n2_temp);
            
                    if (n1 > 0 && n2_temp > 0 && n2 > 0 && (n1 + 7) < n2_temp && n2_temp < n2) {
            
                        wait_count = 0;
                        clear_count = 0;
            
                        // Ken 2022-09-22 將字串轉換成過去格式，以符合後續 split 並比對 AiRadar 字串的邏輯 
                        complete_data = complete_data.replace(',"AiRadar"', ',\r\{"AiRadar"')
            
                        datas = complete_data.split(/\r\n|\r/);
                        complete_data = "";
            
                        //var check_cam_time = 0;
                        //var buffer_cam_time = "";
                        for (var j = datas.length - 1; j >= 0; j--) {
                            /*
                            if (datas[i].substring(0, 8) == 'CamTime:') {
                                buffer_cam_time = "";
                                buffer_cam_time = datas[i].slice();
                            }*/
                            if (datas[j].length > 11 && datas[j].substring(0, 11) == '{"AiRadar":' && datas[j].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[j].slice();
            
                                radar_json = JSON.parse(temp);
                                //radar_json = validatingJSON(temp);
            
                                // console.log("radar_json", radar_json);
            
                                // radar_msg = radar_json;
            
            
                                datas[j] = null;
                                //check_cam_time = 1;
                                break;
                            }
            
                        }
            
                        radar_id_num = (Math.random() * 100 % 10) + 1;
            
                        if (radar_json != null) {
                            for (var id_index = 0; id_index <= radar_json.AiRadar.RadarArray.length - 1; id_index++) {
                                if (radar_json.AiRadar.RadarArray[id_index].Type == 1) {
                                    console.log("V1 point pass");
                                } else if (radar_json.AiRadar.RadarArray[id_index].Type == 2) {
                                    console.log("V2 point pass");
                                } else if (radar_json.AiRadar.RadarArray[id_index].Type == 3) {
                                    // 速度偵測
                                    var speed = radar_json.AiRadar.RadarArray[id_index].Speed;
                                    console.log("Speed:", speed);

                                    if (behavior_input.id == "High speed detection (RADAR)") {
                                        console.log("need to get upper bound: ", speed_upper_bound);
                                        if (speed > speed_upper_bound) {
                                            console.log("!!! > upper bound");
                                            // TODO: 看要怎麼處理警示的部分
                                        }
                                    } else if (behavior_input.id == "Low speed detection (RADAR)") {
                                        console.log("need to get lower bound: ", speed_lower_bound);
                                        if (speed < speed_lower_bound) {
                                            console.log("!!! < lower bound");
                                            // TODO: 看要怎麼處理警示的部分
                                        }
                                    }
                                } else {
                                    console.log("radar_json.AiRadar.RadarArray[" + id_index + "].Type", radar_json.AiRadar.RadarArray[id_index].Type);
                                }
            
            
                            }
                        }
                        
                    }
                    else {
                        wait_count++;
                        if (wait_count >= 3) {
                            wait_count = 0;
                            complete_data = "";
                        }
            
                        clear_count++;
                        if (clear_count >= 3) {
                            clear_count = 0;
                        }
                    }
            
            
                }


                


            }
        }
    }


    


}

function GetAlarm(alarm_data) {

    if (canvasTripwire_all && canvasTripwire && canvasTripwire1 && canvasTripwire2 && canvasTripwire3 && canvasTripwire4 && canvasTripwire5 && canvasTripwire6 && canvasTripwire7 && canvasTripwire8 && click_mouse_set == 0) {
        if (!!alarm_data) {
            var datas;
            var ai_json;
            var complete_data = "";
            var n1 = -1, n2 = -1, n2_temp = -1;

            // console.log("[GetAlarm] localStorage fetchHttpGetalarm:", localStorage.getItem("fetchHttpGetalarm"));
            // console.log("[GetAlarm] g_max_protected_objects:", g_max_protected_objects);
            

            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('{"AiEngine"');

            n2_temp = complete_data.indexOf('"Count"');

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

            // console.log(`[GetAlarm] n1:${n1} , n2_temp:${n2_temp} , n2:${n2}`);

            if (n1 > 0 && n2_temp > 0 && n2 > 0 && (n1 + 7) < n2_temp && n2_temp < n2) {
                wait_count = 0;
                clear_count = 0;
                datas = complete_data.split(/\r\n|\r/);
                complete_data = "";

                //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();
                    }*/

                    // console.log(`datas[${i}].length: ${datas[i].length}`);
                    
                    if (datas[i].length > 12 && datas[i].substring(0, 12) == '{"AiEngine":' && datas[i].length < 8192 * 8) {
                        //datas[i].replace(/\\'/g, "'");
                        //datas[i].replace('\"', '"');

                        /*
                        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();

                        ai_json = JSON.parse(temp);
                        //ai_json = validatingJSON(temp);
                        // console.log("ai_json:");
                        // console.log(ai_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;
                    }
                }*/

                // console.log(ai_json);

				if (localStorage.getItem("ToF_recognition") === "Yes"){
                    // console.log("ai_json.AIToF:");
                    // console.log(ai_json.AIToF);
                    func_changeColorBarMinMax(ai_json.AIToF);
                }
                // 08-05 80 port 拿 getalarmmotion 沒有這兩個值
                if (localStorage.getItem("fetchHttpGetalarm") == "No") {
                    // WebSocket 才有 red_light 和 AI_fps
                    var AI_fps = ai_json.AI_fps;
                    localStorage.setItem('AI_fps', AI_fps);
                    var red_light = ai_json.red_light;
                }


                // console.log("ai_json.Count:");
                // console.log(ai_json.Count);
                
                if (ai_json != null) {
                    bbox_count = ai_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) */
                if (localStorage.getItem("fetchHttpGetalarm") == "No")
                {
                    //clear_count_2 = 0;
                    // console.log("[WebSocket] max_protected_objects: ", max_protected_objects);
                    RefreshCanvasObject(max_protected_objects);
                }

                //console.log("bbox_count: " + bbox_count.toString());

                // console.log("ai_json.counter_count:", ai_json.counter_count);
                

                if (ai_json != null && typeof ai_json.counter_count !== 'undefined') {
                    counter_count_msg = "";

                    for (var j = 0; j < 8; j++) {
                        var spacing = (j == 3 || j == 7) ? "" : normal_spacing;
                        counter_count_msg += (counter_cust_name[j] + ":&nbsp;" + ai_json.counter_count[j] + "&nbsp;," + spacing);
                        if (j == 3) {
                            counter_count_msg += "</br>";
                        }
                    }
                    localStorage.setItem('counter_count_msg', counter_count_msg);
                }
                else {
                    counter_count_msg = "";
                    for (var j = 0; j < 8; j++) {
                        var spacing = (j == 3 || j == 7) ? "" : normal_spacing;
                        counter_count_msg += (counter_cust_name[j] + ":&nbsp;" + "&nbsp" + "&nbsp;," + spacing);
                        if (j == 3) {
                            counter_count_msg += "</br>";
                        }
                    }
                    localStorage.setItem('counter_count_msg', counter_count_msg);
                }


                if (check_if_existing_coldobjects == 1) {

                    for (var index_cold = 0; index_cold < MAX_COLDOBJECTS; index_cold++) {
                        if (coldobjects_X[index_cold] >= 1 && coldobjects_Y[index_cold] >= 1 && coldobjects_W[index_cold] >= 1 && coldobjects_H[index_cold] >= 1
                            && coldobjects_Object[index_cold].length >= 1) {

                            var translate_name = func_translate_name(coldobjects_Object[index_cold]);

                            canvasTripwire_all.add(insertTrafficLightRectangle_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO, coldobjects_W[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_H[index_cold] * G_CANVAS_HEIGHT_RATIO, 1, 1, 0, 0));
                            canvasTripwire.add(insertTrafficLightRectangle_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO, coldobjects_W[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_H[index_cold] * G_CANVAS_HEIGHT_RATIO, 1, 1, 0, 0));
                            canvasTripwire1.add(insertTrafficLightRectangle_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO, coldobjects_W[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_H[index_cold] * G_CANVAS_HEIGHT_RATIO, 1, 1, 0, 0));
                            canvasTripwire2.add(insertTrafficLightRectangle_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO, coldobjects_W[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_H[index_cold] * G_CANVAS_HEIGHT_RATIO, 1, 1, 0, 0));
                            canvasTripwire3.add(insertTrafficLightRectangle_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO, coldobjects_W[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_H[index_cold] * G_CANVAS_HEIGHT_RATIO, 1, 1, 0, 0));
                            canvasTripwire4.add(insertTrafficLightRectangle_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO, coldobjects_W[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_H[index_cold] * G_CANVAS_HEIGHT_RATIO, 1, 1, 0, 0));
                            canvasTripwire5.add(insertTrafficLightRectangle_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO, coldobjects_W[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_H[index_cold] * G_CANVAS_HEIGHT_RATIO, 1, 1, 0, 0));
                            canvasTripwire6.add(insertTrafficLightRectangle_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO, coldobjects_W[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_H[index_cold] * G_CANVAS_HEIGHT_RATIO, 1, 1, 0, 0));
                            canvasTripwire7.add(insertTrafficLightRectangle_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO, coldobjects_W[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_H[index_cold] * G_CANVAS_HEIGHT_RATIO, 1, 1, 0, 0));
                            canvasTripwire8.add(insertTrafficLightRectangle_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO, coldobjects_W[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_H[index_cold] * G_CANVAS_HEIGHT_RATIO, 1, 1, 0, 0));

                            canvasTripwire_all.add(insertTextLabel_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO - 18, 50, 50, translate_name));
                            canvasTripwire.add(insertTextLabel_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO - 18, 50, 50, translate_name));
                            canvasTripwire1.add(insertTextLabel_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO - 18, 50, 50, translate_name));
                            canvasTripwire2.add(insertTextLabel_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO - 18, 50, 50, translate_name));
                            canvasTripwire3.add(insertTextLabel_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO - 18, 50, 50, translate_name));
                            canvasTripwire4.add(insertTextLabel_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO - 18, 50, 50, translate_name));
                            canvasTripwire5.add(insertTextLabel_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO - 18, 50, 50, translate_name));
                            canvasTripwire6.add(insertTextLabel_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO - 18, 50, 50, translate_name));
                            canvasTripwire7.add(insertTextLabel_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO - 18, 50, 50, translate_name));
                            canvasTripwire8.add(insertTextLabel_Blue(coldobjects_X[index_cold] * G_CANVAS_WIDTH_RATIO, coldobjects_Y[index_cold] * G_CANVAS_HEIGHT_RATIO - 18, 50, 50, translate_name));
                        }
                    }

                    //i_cold_times++;
                    //if (i_cold_times >= g_cold_times) {
                        //check_if_existing_coldobjects = 0;
                        //i_cold_times = 0;
                    //}
                }

                var insert_red_text = "";
                
                if (localStorage.getItem("fetchHttpGetalarm") == "No") {
                    // WebSocket 才有 red_light 和 AI_fps
                    if (red_light == 1 && enable_cloud == "Yes") {
                        insert_red_text = "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString() + ",";
                    }
                    else if (red_light == 0 && enable_cloud == "Yes") {
                        insert_red_text = "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString() + ",";
                    }
                    else {
                        insert_red_text = "FPS:" + AI_fps.toString() + ",";
                    }
                }
                // 08-05 80 port getalarmmotion 缺少 red_light 和 AI_fps 就不用這段前綴

                var insert_red_text_max = "";
                var insert_red_text_min = "";

                
                

                if (current_state_hide_or_open_getalarmmotion == 1) {
                    for (var i = 0; i < bbox_count /*&& i <= 10*/; i++) {
                        // console.log(ai_json.AiEngine[i]);
                        if (ai_json.AiEngine[i]) {
                            // 08-05 80 port getalarmmotion 沒定義 parent_idx
                            // console.log((typeof ai_json.AiEngine[i].parent_idx == 'undefined'));
                            // 針對 Landingpage 連線方式繞過既有過濾條件
                            if ((ai_json.AiEngine[i].parent_idx == -1) || (localStorage.getItem("fetchHttpGetalarm") == "Yes")) {

                                if (ai_json.AiEngine[i].label_name == "L._Plate_USA" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_MAC/MYS" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_VNM" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_EUR" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_GBR" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_JPN" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_THA" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_IDN" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_IDN2" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_BGD" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_MEA" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_PHL" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_AUS" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_CNT_1LINE" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_CNT_2LINES" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_CNT_3LINES" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_CNT_VERTICAL" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_CNT_USDOT" ||
                                    ai_json.AiEngine[i].label_name == "ambulance" ||
                                    ai_json.AiEngine[i].label_name == "face" ||
                                    ai_json.AiEngine[i].label_name == "blank" ||
                                    ai_json.AiEngine[i].label_name == "stop_sign" ||
                                    ai_json.AiEngine[i].label_name == "qrcode" ||
                                    ai_json.AiEngine[i].label_name == "barcode" ||
                                    ai_json.AiEngine[i].label_name == "L._Plate_TWN") {


                                        try {
                                            if (ai_json.AiEngine[i].properties) {
                                                if (ai_json.AiEngine[i].properties.plate) {
                                                    var plate_name = "";
                                                    if (ai_json.AiEngine[i].label_name == "ambulance")
                                                        plate_name = plate_name.concat(ai_json.AiEngine[i].label_name);
                                                    else if (ai_json.AiEngine[i].label_name == "blank")
                                                        plate_name = plate_name.concat(ai_json.AiEngine[i].label_name);
                                                    else if (ai_json.AiEngine[i].label_name == "stop_sign")
                                                        plate_name = plate_name.concat(ai_json.AiEngine[i].label_name);
                                                    else
                                                        plate_name = plate_name.concat(ai_json.AiEngine[i].properties.plate);
                                                    /*
                                                    plate_name = plate_name.replace(/[「」‘’']/g, '');
                                                    if (plate_name === '' || plate_name === '0') {
                                                        continue;
                                                    }*/

                                                    // -------------
                                                    // 08-09 嵌入輪播 Block
                                                    // 因 Landing page 缺少 ANPR TAB localStorage 才有的 enable_only_once_to_post 這邊省略過濾條件
                                                    push_lpr(
                                                        plate_name, 
                                                        ai_json.AiEngine[i].properties.area, 
                                                        ai_json.AiEngine[i].confidence.toString() + "%", 
                                                        COLOR_ARRAY[ai_json.AiEngine[i].color_id], 
                                                        COLOR_ARRAY[ai_json.AiEngine[i].sec_color_id], 
                                                        ai_json.AiEngine[i].car_type_name, 
                                                        ai_json.AiEngine[i].center_direction
                                                    );
                                                    
                                                    if (("LPR_BMP" in ai_json.AiEngine[i])) {
                                                        push_LPBMP(ai_json.AiEngine[i]);
                                                        set_lpr_content(get_lprimgnum()); // get_lprimgnum() returns the last index of img in LPBMP_Array
                                                    }
                                                    // -------------

                                                    AssignPlateObject(ai_json, i, plate_name);
                                                }
                                            }
                                        } catch (error) {
                                            console.log(error);
                                        }


                                }
                                else {
                                    var x = parseInt(ai_json.AiEngine[i].x, 10);
                                    var y = parseInt(ai_json.AiEngine[i].y, 10);
                                    var w = parseInt(ai_json.AiEngine[i].w, 10);
                                    var h = parseInt(ai_json.AiEngine[i].h, 10);
                                    var obj_tracking_id = parseInt(ai_json.AiEngine[i].obj_tracking_id, 10);
                                    var number_row = ai_json.AiEngine[i].number_row;

                                    var text_y = parseInt((ai_json.AiEngine[i].y + ai_json.AiEngine[i].h), 10);

                                    text_y = y - (g_canvas_text_y_offset * (G_CAM_VIDEO_RES_HEIGHT / G_VIEW_CANVAS_Y));

                                    var plate_name = "";
                                    plate_name = plate_name.concat(ai_json.AiEngine[i].label_name);
                                    plate_name = plate_name.replace(/[「」‘’']/g, '');

                                    if (plate_name === '' || plate_name === '0') {
                                        continue;
                                    }
                                    if (canvasTripwire_all && canvasTripwire && canvasTripwire1 && canvasTripwire2 && canvasTripwire3 && canvasTripwire4 && canvasTripwire5 && canvasTripwire6 && canvasTripwire7 && canvasTripwire8) {
                                        var translate_name = func_translate_name(plate_name);
                                        

                                        var behavior_id = ai_json.AiEngine[i].behavior_id;
                                        var detection_zone_id = ai_json.AiEngine[i].detection_zone_id;
                                        var obj_dwell_time = ai_json.AiEngine[i].obj_dwell_time;
                                        var color = ai_json.AiEngine[i].color;
                                        var center_direction = ai_json.AiEngine[i].center_direction;
                                        var center_stability = ai_json.AiEngine[i].center_stability;
                                        //var center_speed = ai_json.AiEngine[i].center_speed;
                                        var progress_bar = ai_json.AiEngine[i].progress_bar;

                                        var tof_distance = ai_json.AiEngine[i].tof_distance;
                                        var tof_height = ai_json.AiEngine[i].tof_height;

                                        var code_content = ai_json.AiEngine[i].code_content;

                                        var label_word = "";

                                        if (plate_name == "bg_learning") {
                                            if (current_state_hide_or_open_label == 1) {
                                                label_word = "Bg_learning, prg: " + progress_bar.toString() + "%" + ", ID: " + obj_tracking_id + Concat_obj_dwell_time(obj_dwell_time);
                                            }
                                        }
                                        else if (plate_name == "tof_point") {
                                            //if (current_state_hide_or_open_label == 1)
                                            {
                                                if (ai_json.AiEngine[i].max_distance != 0 && ai_json.AiEngine[i].max_height != 0) {
                                                    label_word = "Max";

                                                    var meterToft = 3.2808
                                                    var maxmeter = Math.floor((ai_json.AiEngine[i].max_distance / 1000) * 1000) / 1000;
                                                    var maxft = Math.floor((ai_json.AiEngine[i].max_distance / 1000) * meterToft * 1000) / 1000;

                                                    var maxmeter_h = Math.floor((ai_json.AiEngine[i].max_height / 1000) * 1000) / 1000;
                                                    var maxft_h = Math.floor((ai_json.AiEngine[i].max_height / 1000) * meterToft * 1000) / 1000;

                                                    insert_red_text_max = "Max,";
                                                    if (g_tof_enable_show_distance == 1)
                                                        insert_red_text_max += "Dist: " + maxmeter.toString() + "M " + maxft.toString() + "Ft,";
                                                    if (g_tof_enable_show_height == 1)
                                                        insert_red_text_max += "Ht: " + maxmeter_h.toString() + "M " + maxft_h.toString() + "Ft,";
                                                    if (g_tof_enable_show_distance == 0 && g_tof_enable_show_height == 0) {
                                                        insert_red_text_max += "Dist: " + maxmeter.toString() + "M " + maxft.toString() + "Ft,";
                                                        insert_red_text_max += "Ht: " + maxmeter_h.toString() + "M " + maxft_h.toString() + "Ft,";
                                                    }
                                                }
                                                else if (ai_json.AiEngine[i].min_distance != 0 && ai_json.AiEngine[i].min_height != 0) {
                                                    label_word = "Min";

                                                    var meterToft = 3.2808
                                                    var minmeter = Math.floor((ai_json.AiEngine[i].min_distance / 1000) * 1000) / 1000;
                                                    var minft = Math.floor((ai_json.AiEngine[i].min_distance / 1000) * meterToft * 1000) / 1000;

                                                    var minmeter_h = Math.floor((ai_json.AiEngine[i].min_height / 1000) * 1000) / 1000;
                                                    var minft_h = Math.floor((ai_json.AiEngine[i].min_height / 1000) * meterToft * 1000) / 1000;

                                                    insert_red_text_min = "Min,";
                                                    if (g_tof_enable_show_distance == 1)
                                                        insert_red_text_min += "Dist: " + minmeter.toString() + "M " + minft.toString() + "Ft,";
                                                    if (g_tof_enable_show_height == 1)
                                                        insert_red_text_min += "Ht: " + minmeter_h.toString() + "M " + minft_h.toString() + "Ft,";
                                                    if (g_tof_enable_show_distance == 0 && g_tof_enable_show_height == 0) {
                                                        insert_red_text_min += "Dist: " + minmeter.toString() + "M " + minft.toString() + "Ft,";
                                                        insert_red_text_min += "Ht: " + minmeter_h.toString() + "M " + minft_h.toString() + "Ft,";
                                                    }
                                                }
                                            }
                                        }
                                        else {
                                            if (plate_name == "object") {
                                                if (current_state_hide_or_open_direction == 1) {
                                                    label_word = translate_name + ", N:" + ai_json.AiEngine[i].confidence.toString() + "%" + ", L:" + ai_json.AiEngine[i].confidence2.toString() + "%";
                                                }

                                                if (current_state_hide_or_open_speed == 1) {
                                                    if (label_word.length >= 1) {
                                                        label_word += ", ID: " + obj_tracking_id + Concat_obj_dwell_time(obj_dwell_time);
                                                    }
                                                    else {
                                                        label_word = "ID: " + obj_tracking_id + Concat_obj_dwell_time(obj_dwell_time);
                                                    }
                                                }
                                            }
                                            else {
                                                if (current_state_hide_or_open_label == 1) {
                                                    if (code_content.length == 0) {
                                                        if (localStorage.getItem("events_default_version") != null && localStorage.getItem("events_default_version") == "4") {
                                                            label_word = translate_name;
                                                        }
                                                        else {
                                                            label_word = translate_name + ", " + ai_json.AiEngine[i].confidence.toString() + "%";
                                                        }
                                                    }
                                                    else
                                                        label_word = translate_name + ", " + code_content;
                                                }
                                                if (current_state_hide_or_open_direction == 1) {
                                                    if (center_direction.length == 0) {
                                                        if (label_word.length >= 1) {
                                                            label_word += ", ID: " + obj_tracking_id + Concat_obj_dwell_time(obj_dwell_time);
                                                        }
                                                        else {
                                                            label_word = "ID: " + obj_tracking_id + Concat_obj_dwell_time(obj_dwell_time);
                                                        }
                                                    }
                                                    else {
                                                        if (label_word.length >= 1) {
                                                            label_word += ", ID: " + obj_tracking_id + Concat_obj_dwell_time(obj_dwell_time) + ", D:" + center_direction;
                                                        }
                                                        else {
                                                            label_word = "ID: " + obj_tracking_id + Concat_obj_dwell_time(obj_dwell_time) + ", D:" + center_direction;
                                                        }
                                                    }

                                                    if (typeof center_stability !== 'undefined') {
                                                        if (center_stability.length == 0) {

                                                        }
                                                        else {
                                                            if (label_word.length >= 1) {
                                                                label_word += ", St:" + center_stability;
                                                            }
                                                            else {
                                                                label_word = "St:" + center_stability;
                                                            }
                                                        }
                                                    }
                                                }

                                                //if (current_state_hide_or_open_speed == 1 && center_speed.length >= 1) {
                                                    //if (label_word.length >= 1) {
                                                        //label_word += ", S:" + center_speed;
                                                    //}
                                                    //else {
                                                        //label_word = "S:" + center_speed;
                                                    //}
                                                //}

                                                if (localStorage.getItem("events_default_version") != null && localStorage.getItem("events_default_version") == "4") {
                                                    if (current_state_hide_or_open_speed == 1) {
                                                        if (label_word.length >= 1) {
                                                            label_word += ", " + ai_json.AiEngine[i].confidence.toString() + "%";
                                                        }
                                                        else {
                                                            label_word = ai_json.AiEngine[i].confidence.toString() + "%";
                                                        }
                                                    }
                                                }

                                                var tof_distance = ai_json.AiEngine[i].tof_distance;
                                                var tof_height = ai_json.AiEngine[i].tof_height;

                                                if (tof_distance && tof_height) {

                                                    var meterToft = 3.2808
                                                    var tof_meter = roundDown(tof_distance, 3);
                                                    var tof_ft = roundDown(Math.floor(tof_distance * meterToft * 1000) / 1000, 3);

                                                    var tof_meter_h = roundDown(tof_height, 3);
                                                    var tof_ft_h = roundDown(Math.floor(tof_height * meterToft * 1000) / 1000, 3);

                                                    if (g_tof_enable_show_distance == 1) {
                                                        if (label_word.length >= 1) {
                                                            label_word += ", Dist: " + tof_meter.toString() + "M " + tof_ft.toString() + "Ft,";
                                                        }
                                                        else {
                                                            label_word = "Dist: " + tof_meter.toString() + "M " + tof_ft.toString() + "Ft,";
                                                        }
                                                    }

                                                    if (g_tof_enable_show_height == 1) {
                                                        if (label_word.length >= 1) {
                                                            label_word += ", Ht: " + tof_meter_h.toString() + "M " + tof_ft_h.toString() + "Ft,";
                                                        }
                                                        else {
                                                            label_word = "Ht: " + tof_meter_h.toString() + "M " + tof_ft_h.toString() + "Ft,";
                                                        }
                                                    }


                                                    if (g_tof_enable_show_distance == 0 && g_tof_enable_show_height == 0) {
                                                        if (label_word.length >= 1) {
                                                            label_word += ", Dist: " + tof_meter.toString() + "M " + tof_ft.toString() + "Ft,";
                                                            label_word += "Ht: " + tof_meter_h.toString() + "M " + tof_ft_h.toString() + "Ft,";
                                                        }
                                                        else {
                                                            label_word = "Dist: " + tof_meter.toString() + "M " + tof_ft.toString() + "Ft,";
                                                            label_word += "Ht: " + tof_meter_h.toString() + "M " + tof_ft_h.toString() + "Ft,";
                                                        }
                                                    }
                                                }
                                            }
                                        }

                                        if (label_word.length >= 1) {
                                            label_word += ", " + color;
                                        }
                                        else {
                                            label_word = color;
                                        }
                                        //console.log(label_word);

                                        if (plate_name == "tof_point") {
                                            if ((ai_json.AiEngine[i].max_distance != 0 && ai_json.AiEngine[i].max_height != 0) ||
                                                (ai_json.AiEngine[i].min_distance != 0 && ai_json.AiEngine[i].min_height != 0)
                                            ) {
                                                if (behavior_id <= 0) {
                                                    canvasTripwire_all.add(insertCircle_Green(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire.add(insertCircle_Green(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire1.add(insertCircle_Green(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire2.add(insertCircle_Green(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire3.add(insertCircle_Green(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire4.add(insertCircle_Green(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire5.add(insertCircle_Green(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire6.add(insertCircle_Green(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire7.add(insertCircle_Green(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire8.add(insertCircle_Green(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                }
                                                else {
                                                    canvasTripwire_all.add(insertCircle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire.add(insertCircle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire1.add(insertCircle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire2.add(insertCircle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire3.add(insertCircle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire4.add(insertCircle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire5.add(insertCircle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire6.add(insertCircle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire7.add(insertCircle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                    canvasTripwire8.add(insertCircle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO));
                                                }
                                            }
                                        }
                                        else {
                                            if (behavior_id <= 0) {
                                                canvasTripwire_all.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name, number_row));
                                                canvasTripwire.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name, number_row));
                                                canvasTripwire1.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name, number_row));
                                                canvasTripwire2.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name, number_row));
                                                canvasTripwire3.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name, number_row));
                                                canvasTripwire4.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name, number_row));
                                                canvasTripwire5.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name, number_row));
                                                canvasTripwire6.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name, number_row));
                                                canvasTripwire7.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name, number_row));
                                                canvasTripwire8.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name, number_row));
                                            }
                                            else {
                                                // 11-01
                                                // console.log("trigger any events... , behavior_id: ", behavior_id); // 禁區 0 , 久留 4, 警戒線 8
                                                // console.log(ai_json.AiEngine[i]); // 沒有和 zone index 相關的資訊
                                                // console.log("detection_zone_id: ", detection_zone_id); // undefined

                                                func_checkTriggerZoneStatus(behavior_id); // 為了連動 zone polygon 變顏色

                                                canvasTripwire_all.add(insertTrafficLightRectangle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name));
                                                canvasTripwire.add(insertTrafficLightRectangle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name));
                                                canvasTripwire1.add(insertTrafficLightRectangle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name));
                                                canvasTripwire2.add(insertTrafficLightRectangle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name));
                                                canvasTripwire3.add(insertTrafficLightRectangle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name));
                                                canvasTripwire4.add(insertTrafficLightRectangle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name));
                                                canvasTripwire5.add(insertTrafficLightRectangle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name));
                                                canvasTripwire6.add(insertTrafficLightRectangle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name));
                                                canvasTripwire7.add(insertTrafficLightRectangle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name));
                                                canvasTripwire8.add(insertTrafficLightRectangle_Red(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, plate_name));
                                            }
                                        }

                                        if (behavior_id >= 1) {
                                            if (label_word.length >= 1) {
                                                //console.log("Behavior occured: " + behavior_id.toString() + "; ID: " + obj_tracking_id.toString() + "; zone: " + detection_zone_id.toString());
                                                canvasTripwire_all.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire1.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire2.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire3.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire4.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire5.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire6.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire7.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire8.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                            }
                                            /*
                                            for (var index_click = 0; index_click < click_canvas_all; index_click++) {
                                                canvasTripwire_all.getObjects()[index_click].stroke = "#ff0000";
                                            }
                                            canvasTripwire1.getObjects()[0].stroke = "#ff0000";
                                            canvasTripwire2.getObjects()[0].stroke = "#ff0000";
                                            canvasTripwire3.getObjects()[0].stroke = "#ff0000";
                                            canvasTripwire4.getObjects()[0].stroke = "#ff0000";
                                            canvasTripwire5.getObjects()[0].stroke = "#ff0000";
                                            canvasTripwire6.getObjects()[0].stroke = "#ff0000";
                                            canvasTripwire7.getObjects()[0].stroke = "#ff0000";
                                            canvasTripwire8.getObjects()[0].stroke = "#ff0000";
                                            */
                                        }
                                        else {
                                            if (label_word.length >= 1) {
                                                canvasTripwire_all.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire1.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire2.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire3.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire4.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire5.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire6.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire7.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                                canvasTripwire8.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                            }
                                        }

                                    }
                                }

                                plate_count++;
                                plate_idx++;
                            }
                        }
                    }

                    var bbox_count_short = 0;
                    var bbox_count_long = 0;

                    if (ai_json != null && ai_json.short != null && ai_json.long != null) {
                        bbox_count_short = ai_json.short.count_short;
                        bbox_count_long = ai_json.long.count_long;
                    }

                    for (var i = 0; i < bbox_count_short; i++) {
                        if (ai_json.short.ShortPostRecorder[i]) {
                            var x = ai_json.short.ShortPostRecorder[i].x;
                            var y = ai_json.short.ShortPostRecorder[i].y;
                            var w = ai_json.short.ShortPostRecorder[i].w;
                            var h = ai_json.short.ShortPostRecorder[i].h;
                            var obj_tracking_id = ai_json.short.ShortPostRecorder[i].obj_tracking_id.toString();

                            text_y = y - (g_canvas_text_y_offset * (G_CAM_VIDEO_RES_HEIGHT / G_VIEW_CANVAS_Y));
                            var plate_name = ai_json.short.ShortPostRecorder[i].name;
                            var updatetime = ai_json.short.ShortPostRecorder[i].updatetime.toString();

                            var i_bbox = ai_json.short.ShortPostRecorder[i].i.toString();
                            var zone_idx = (ai_json.short.ShortPostRecorder[i].zone_idx + 1).toString();

                            var firstgettime = ai_json.short.ShortPostRecorder[i].firstgettime.toString();
                            var count_interval = ai_json.short.ShortPostRecorder[i].count_interval.toString();

                            var totaltime = ai_json.short.ShortPostRecorder[i].totaltime.toString();

                            var label_word = "";

                            if (canvasTripwire_all && canvasTripwire && canvasTripwire1 && canvasTripwire2 && canvasTripwire3 && canvasTripwire4 && canvasTripwire5 && canvasTripwire6 && canvasTripwire7 && canvasTripwire8) {
                                var translate_name = func_translate_name(plate_name);

                                if (current_state_hide_or_open_label == 1 && current_state_hide_or_open_direction == 1) {
                                    label_word = translate_name;

                                    if (label_word.length >= 1) {
                                        label_word += ", idx: " + i_bbox + "; dwell: " + totaltime + "(" + updatetime + "," + firstgettime + ")";
                                    }
                                    else {
                                        label_word = "idx: " + i_bbox + "; dwell: " + totaltime + "(" + updatetime + "," + firstgettime + ")";
                                    }
                                }

                                if (current_state_hide_or_open_speed == 1) {
                                    if (label_word.length >= 1) {
                                        label_word += ", ID: " + obj_tracking_id + ", zone:" + zone_idx + ", interval:" + count_interval;;
                                    }
                                    else {
                                        label_word = "ID: " + obj_tracking_id + ", zone:" + zone_idx + ", interval:" + count_interval;
                                    }
                                }

                                canvasTripwire_all.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire1.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire2.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire3.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire4.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire5.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire6.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire7.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire8.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));

                                if (label_word.length >= 1) {
                                    canvasTripwire_all.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire1.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire2.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire3.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire4.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire5.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire6.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire7.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire8.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                }
                            }
                        }
                    }

                    for (var i = 0; i < bbox_count_long; i++) {
                        if (ai_json.long.LongPostRecorder[i]) {
                            var x = ai_json.long.LongPostRecorder[i].x;
                            var y = ai_json.long.LongPostRecorder[i].y;
                            var w = ai_json.long.LongPostRecorder[i].w;
                            var h = ai_json.long.LongPostRecorder[i].h;
                            var obj_tracking_id = ai_json.long.LongPostRecorder[i].obj_tracking_id.toString();

                            text_y = y - (g_canvas_text_y_offset * (G_CAM_VIDEO_RES_HEIGHT / G_VIEW_CANVAS_Y));
                            var plate_name = ai_json.long.LongPostRecorder[i].name;
                            var updatetime = ai_json.long.LongPostRecorder[i].updatetime.toString();

                            var i_bbox = ai_json.long.LongPostRecorder[i].i.toString();
                            var zone_idx = (ai_json.long.LongPostRecorder[i].zone_idx + 1).toString();

                            var firstgettime = ai_json.long.LongPostRecorder[i].firstgettime.toString();
                            var count_interval = ai_json.long.LongPostRecorder[i].count_interval.toString();

                            var totaltime = ai_json.long.LongPostRecorder[i].totaltime.toString();

                            var label_word = "";

                            if (canvasTripwire_all && canvasTripwire && canvasTripwire1 && canvasTripwire2 && canvasTripwire3 && canvasTripwire4 && canvasTripwire5 && canvasTripwire6 && canvasTripwire7 && canvasTripwire8) {
                                var translate_name = func_translate_name(plate_name);

                                if (current_state_hide_or_open_label == 1 && current_state_hide_or_open_direction == 1) {
                                    label_word = translate_name + ", L";

                                    if (label_word.length >= 1) {
                                        label_word += ", idx: " + i_bbox + "; dwell: " + totaltime + "(" + updatetime + "," + firstgettime + ")";
                                    }
                                    else {
                                        label_word = "idx: " + i_bbox + "; dwell: " + totaltime + "(" + updatetime + "," + firstgettime + ")";
                                    }
                                }

                                if (current_state_hide_or_open_speed == 1) {
                                    if (label_word.length >= 1) {
                                        label_word += ", ID: " + obj_tracking_id + ", zone:" + zone_idx + ", interval:" + count_interval;;
                                    }
                                    else {
                                        label_word = "ID: " + obj_tracking_id + ", zone:" + zone_idx + ", interval:" + count_interval;
                                    }
                                }

                                canvasTripwire_all.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire1.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire2.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire3.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire4.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire5.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire6.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire7.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));
                                canvasTripwire8.add(insertTrafficLightRectangle_Blue(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, 1, obj_tracking_id));

                                if (label_word.length >= 1) {
                                    canvasTripwire_all.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire1.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire2.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire3.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire4.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire5.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire6.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire7.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                    canvasTripwire8.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, label_word));
                                }
                            }
                        }
                    }


                    if (insert_red_text_min.length >= 1 && insert_red_text_max.length >= 1) {
                        insert_red_text += insert_red_text_min + '\n';
                        insert_red_text += insert_red_text_max;
                        if (canvasTripwire_all && canvasTripwire && canvasTripwire1 && canvasTripwire2 && canvasTripwire3 && canvasTripwire4 && canvasTripwire5 && canvasTripwire6 && canvasTripwire7 && canvasTripwire8) {
                            canvasTripwire_all.add(insertTextLabel_Red(10, MAX_HEIGHT - 50, 50, 50, insert_red_text));
                            canvasTripwire.add(insertTextLabel_Red(10, MAX_HEIGHT - 50, 50, 50, insert_red_text));
                            canvasTripwire1.add(insertTextLabel_Red(10, MAX_HEIGHT - 50, 50, 50, insert_red_text));
                            canvasTripwire2.add(insertTextLabel_Red(10, MAX_HEIGHT - 50, 50, 50, insert_red_text));
                            canvasTripwire3.add(insertTextLabel_Red(10, MAX_HEIGHT - 50, 50, 50, insert_red_text));
                            canvasTripwire4.add(insertTextLabel_Red(10, MAX_HEIGHT - 50, 50, 50, insert_red_text));
                            canvasTripwire5.add(insertTextLabel_Red(10, MAX_HEIGHT - 50, 50, 50, insert_red_text));
                            canvasTripwire6.add(insertTextLabel_Red(10, MAX_HEIGHT - 50, 50, 50, insert_red_text));
                            canvasTripwire7.add(insertTextLabel_Red(10, MAX_HEIGHT - 50, 50, 50, insert_red_text));
                            canvasTripwire8.add(insertTextLabel_Red(10, MAX_HEIGHT - 50, 50, 50, insert_red_text));
                        }

                    }
                    else {
                        insert_red_text += insert_red_text_min;
                        insert_red_text += insert_red_text_max;
                        if (canvasTripwire_all && canvasTripwire && canvasTripwire1 && canvasTripwire2 && canvasTripwire3 && canvasTripwire4 && canvasTripwire5 && canvasTripwire6 && canvasTripwire7 && canvasTripwire8) {
                            canvasTripwire_all.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, insert_red_text));
                            canvasTripwire.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, insert_red_text));
                            canvasTripwire1.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, insert_red_text));
                            canvasTripwire2.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, insert_red_text));
                            canvasTripwire3.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, insert_red_text));
                            canvasTripwire4.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, insert_red_text));
                            canvasTripwire5.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, insert_red_text));
                            canvasTripwire6.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, insert_red_text));
                            canvasTripwire7.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, insert_red_text));
                            canvasTripwire8.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, insert_red_text));
                        }

                    }

                    if (ai_json != null && typeof ai_json.counter_zone !== 'undefined') {
                        for (var index_counter = 0; index_counter < 8; index_counter++) {
                            var counter_zone = ai_json.counter_zone[index_counter];
                            for (var index_try = 0; index_try < 8; index_try++) {
                                var index_zone = -1;
                                if (counter_zone >= 128) {
                                    counter_zone -= 128;
                                    index_zone = 7;
                                }
                                else if (counter_zone >= 64) {
                                    counter_zone -= 64;
                                    index_zone = 6;
                                }
                                else if (counter_zone >= 32) {
                                    counter_zone -= 32;
                                    index_zone = 5;
                                }
                                else if (counter_zone >= 16) {
                                    counter_zone -= 16;
                                    index_zone = 4;
                                }
                                else if (counter_zone >= 8) {
                                    counter_zone -= 8;
                                    index_zone = 3;
                                }
                                else if (counter_zone >= 4) {
                                    counter_zone -= 4;
                                    index_zone = 2;
                                }
                                else if (counter_zone >= 2) {
                                    counter_zone -= 2;
                                    index_zone = 1;
                                }
                                else if (counter_zone >= 1) {
                                    counter_zone -= 1;
                                    index_zone = 0;
                                }
                                else {
                                    break;
                                }

                                if (typeof ai_json.counter_count !== 'undefined') {
                                    var text_counter_count = "Count:" + ai_json.counter_count[index_zone].toString();

                                    if (canvasTripwire1 && canvasTripwire2 && canvasTripwire3 && canvasTripwire4 && canvasTripwire5 && canvasTripwire6 && canvasTripwire7 && canvasTripwire8) {

                                        if (index_zone == 0)
                                            canvasTripwire1.add(insertTextLabel_Red(MAX_WIDTH / 2, MAX_HEIGHT - 25, 50, 50, text_counter_count));
                                        if (index_zone == 1)
                                            canvasTripwire2.add(insertTextLabel_Red(MAX_WIDTH / 2, MAX_HEIGHT - 25, 50, 50, text_counter_count));
                                        if (index_zone == 2)
                                            canvasTripwire3.add(insertTextLabel_Red(MAX_WIDTH / 2, MAX_HEIGHT - 25, 50, 50, text_counter_count));
                                        if (index_zone == 3)
                                            canvasTripwire4.add(insertTextLabel_Red(MAX_WIDTH / 2, MAX_HEIGHT - 25, 50, 50, text_counter_count));
                                        if (index_zone == 4)
                                            canvasTripwire5.add(insertTextLabel_Red(MAX_WIDTH / 2, MAX_HEIGHT - 25, 50, 50, text_counter_count));
                                        if (index_zone == 5)
                                            canvasTripwire6.add(insertTextLabel_Red(MAX_WIDTH / 2, MAX_HEIGHT - 25, 50, 50, text_counter_count));
                                        if (index_zone == 6)
                                            canvasTripwire7.add(insertTextLabel_Red(MAX_WIDTH / 2, MAX_HEIGHT - 25, 50, 50, text_counter_count));
                                        if (index_zone == 7)
                                            canvasTripwire8.add(insertTextLabel_Red(MAX_WIDTH / 2, MAX_HEIGHT - 25, 50, 50, text_counter_count));
                                    }
                                }
                            }
                        }
                    }

                    if (ai_json != null) {
                        if (ai_json.vz1 == "Yes")
                            canvasTripwire1.getObjects()[0].stroke = "#ff0000";
                        if (ai_json.vz2 == "Yes")
                            canvasTripwire2.getObjects()[0].stroke = "#ff0000";
                        if (ai_json.vz3 == "Yes")
                            canvasTripwire3.getObjects()[0].stroke = "#ff0000";
                        if (ai_json.vz4 == "Yes")
                            canvasTripwire4.getObjects()[0].stroke = "#ff0000";
                        if (ai_json.vz5 == "Yes")
                            canvasTripwire5.getObjects()[0].stroke = "#ff0000";
                        if (ai_json.vz6 == "Yes")
                            canvasTripwire6.getObjects()[0].stroke = "#ff0000";
                        if (ai_json.vz7 == "Yes")
                            canvasTripwire7.getObjects()[0].stroke = "#ff0000";
                        if (ai_json.vz8 == "Yes")
                            canvasTripwire8.getObjects()[0].stroke = "#ff0000";
                    }

                    // 11-01
                    func_checkZoneColor();

                    if (canvasTripwire_all && canvasTripwire && canvasTripwire1 && canvasTripwire2 && canvasTripwire3 && canvasTripwire4 && canvasTripwire5 && canvasTripwire6 && canvasTripwire7 && canvasTripwire8) {
                        for (var index_zone = 0; index_zone < count_zone; index_zone++) {
                            if (parseInt(parking_space[index_zone], 10) >= 1 && parseInt(parking_line[index_zone], 10) >= 1) {

                                var temp_current_point_position = new Array(MAX_SIZE_POINTS);
                                if (index_zone == 0) {
                                    temp_current_point_position = currentPointPosition1;
                                }
                                else if (index_zone == 1) {
                                    temp_current_point_position = currentPointPosition2;
                                }
                                else if (index_zone == 2) {
                                    temp_current_point_position = currentPointPosition3;
                                }
                                else if (index_zone == 3) {
                                    temp_current_point_position = currentPointPosition4;
                                }
                                else if (index_zone == 4) {
                                    temp_current_point_position = currentPointPosition5;
                                }
                                else if (index_zone == 5) {
                                    temp_current_point_position = currentPointPosition6;
                                }
                                else if (index_zone == 6) {
                                    temp_current_point_position = currentPointPosition7;
                                }
                                else if (index_zone == 7) {
                                    temp_current_point_position = currentPointPosition8;
                                }
                                ///////////////////
                                var num_row = parseInt(parking_line[index_zone], 10);
                                var num_col = Math.ceil(parseInt(parking_space[index_zone], 10) / parseInt(parking_line[index_zone], 10));

                                ////////////////////
                                var count_lot = 0;

                                var s_row_x = 0;
                                var s_row_y = 0;
                                var e_row_x = 0;
                                var e_row_y = 0;

                                var last_s_row_x = 0;
                                var last_s_row_y = 0;
                                var last_e_row_x = 0;
                                var last_e_row_y = 0;

                                var s_col_x = 0;
                                var s_col_y = 0;
                                var e_col_x = 0;
                                var e_col_y = 0;

                                var last_s_col_x = 0;
                                var last_s_col_y = 0;
                                var last_e_col_x = 0;
                                var last_e_col_y = 0;

                                for (var index_row = 0; index_row < num_row; index_row++) {

                                    if (index_row == 0) {
                                        last_s_row_x = temp_current_point_position[1].x;
                                        last_s_row_y = temp_current_point_position[1].y;
                                        last_e_row_x = temp_current_point_position[2].x;
                                        last_e_row_y = temp_current_point_position[2].y;

                                        s_row_x = (temp_current_point_position[1].x * (num_row - (index_row + 1)) + temp_current_point_position[0].x * (index_row + 1)) / num_row;
                                        s_row_y = (temp_current_point_position[1].y * (num_row - (index_row + 1)) + temp_current_point_position[0].y * (index_row + 1)) / num_row;
                                        e_row_x = (temp_current_point_position[2].x * (num_row - (index_row + 1)) + temp_current_point_position[3].x * (index_row + 1)) / num_row;
                                        e_row_y = (temp_current_point_position[2].y * (num_row - (index_row + 1)) + temp_current_point_position[3].y * (index_row + 1)) / num_row;
                                    }
                                    else if (index_row == num_row - 1) {
                                        last_s_row_x = s_row_x;
                                        last_s_row_y = s_row_y;
                                        last_e_row_x = e_row_x;
                                        last_e_row_y = e_row_y;

                                        s_row_x = temp_current_point_position[0].x;
                                        s_row_y = temp_current_point_position[0].y;
                                        e_row_x = temp_current_point_position[3].x;
                                        e_row_y = temp_current_point_position[3].y;
                                    }
                                    else {
                                        last_s_row_x = s_row_x;
                                        last_s_row_y = s_row_y;
                                        last_e_row_x = e_row_x;
                                        last_e_row_y = e_row_y;

                                        s_row_x = (temp_current_point_position[1].x * (num_row - (index_row + 1)) + temp_current_point_position[0].x * (index_row + 1)) / num_row;
                                        s_row_y = (temp_current_point_position[1].y * (num_row - (index_row + 1)) + temp_current_point_position[0].y * (index_row + 1)) / num_row;
                                        e_row_x = (temp_current_point_position[2].x * (num_row - (index_row + 1)) + temp_current_point_position[3].x * (index_row + 1)) / num_row;
                                        e_row_y = (temp_current_point_position[2].y * (num_row - (index_row + 1)) + temp_current_point_position[3].y * (index_row + 1)) / num_row;
                                    }

                                    for (var index_col = 0; index_col < num_col; index_col++) {
                                        if (count_lot < parseInt(parking_space[index_zone], 10)) {

                                            if (index_col == 0) {
                                                last_s_col_x = temp_current_point_position[1].x;
                                                last_s_col_y = temp_current_point_position[1].y;
                                                last_e_col_x = temp_current_point_position[0].x;
                                                last_e_col_y = temp_current_point_position[0].y;

                                                s_col_x = (temp_current_point_position[1].x * (num_col - (index_col + 1)) + temp_current_point_position[2].x * (index_col + 1)) / num_col;
                                                s_col_y = (temp_current_point_position[1].y * (num_col - (index_col + 1)) + temp_current_point_position[2].y * (index_col + 1)) / num_col;
                                                e_col_x = (temp_current_point_position[0].x * (num_col - (index_col + 1)) + temp_current_point_position[3].x * (index_col + 1)) / num_col;
                                                e_col_y = (temp_current_point_position[0].y * (num_col - (index_col + 1)) + temp_current_point_position[3].y * (index_col + 1)) / num_col;
                                            }
                                            else if (index_col == num_col - 1) {
                                                last_s_col_x = s_col_x;
                                                last_s_col_y = s_col_y;
                                                last_e_col_x = e_col_x;
                                                last_e_col_y = e_col_y;

                                                s_col_x = temp_current_point_position[2].x;
                                                s_col_y = temp_current_point_position[2].y;
                                                e_col_x = temp_current_point_position[3].x;
                                                e_col_y = temp_current_point_position[3].y;
                                            }
                                            else {
                                                last_s_col_x = s_col_x;
                                                last_s_col_y = s_col_y;
                                                last_e_col_x = e_col_x;
                                                last_e_col_y = e_col_y;

                                                s_col_x = (temp_current_point_position[1].x * (num_col - (index_col + 1)) + temp_current_point_position[2].x * (index_col + 1)) / num_col;
                                                s_col_y = (temp_current_point_position[1].y * (num_col - (index_col + 1)) + temp_current_point_position[2].y * (index_col + 1)) / num_col;
                                                e_col_x = (temp_current_point_position[0].x * (num_col - (index_col + 1)) + temp_current_point_position[3].x * (index_col + 1)) / num_col;
                                                e_col_y = (temp_current_point_position[0].y * (num_col - (index_col + 1)) + temp_current_point_position[3].y * (index_col + 1)) / num_col;
                                            }


                                            var obj_point_0 = segmentsIntr(
                                                { x: last_s_row_x, y: last_s_row_y},
                                                { x: last_e_row_x, y: last_e_row_y},
                                                { x: last_s_col_x, y: last_s_col_y },
                                                { x: last_e_col_x, y: last_e_col_y });

                                            var obj_point_1 = segmentsIntr(
                                                { x: last_s_row_x, y: last_s_row_y },
                                                { x: last_e_row_x, y: last_e_row_y },
                                                { x: s_col_x, y: s_col_y },
                                                { x: e_col_x, y: e_col_y });

                                            var obj_point_2 = segmentsIntr(
                                                { x: s_row_x, y: s_row_y },
                                                { x: e_row_x, y: e_row_y },
                                                { x: last_s_col_x, y: last_s_col_y },
                                                { x: last_e_col_x, y: last_e_col_y });

                                            var obj_point_3 = segmentsIntr(
                                                { x: s_row_x, y: s_row_y },
                                                { x: e_row_x, y: e_row_y },
                                                { x: s_col_x, y: s_col_y },
                                                { x: e_col_x, y: e_col_y });
                                            /*
                                            console.log("CCCCCC");
                                            console.log(s_row_x);
                                            console.log(s_row_y);
                                            console.log(e_row_x);
                                            console.log(e_row_y);
                                            console.log(s_col_x);
                                            console.log(s_col_y);
                                            console.log(e_col_x);
                                            console.log(e_col_y);
                                            console.log("DDDDDDD");
                                            console.log("AAAAAAA");
                                            console.log(obj_point_0);
                                            console.log(obj_point_1);
                                            console.log(obj_point_2);
                                            console.log(obj_point_3);
                                            console.log("BBBBBBBBBB");*/
                                            if (obj_point_0 != false && obj_point_1 != false && obj_point_2 != false && obj_point_3 != false) {
                                                var parking_lot_point_x = (obj_point_0.x + obj_point_1.x + obj_point_2.x + obj_point_3.x) / 4;
                                                var parking_lot_point_y = (obj_point_0.y + obj_point_1.y + obj_point_2.y + obj_point_3.y) / 4;

                                                if (ai_json.parking_space_check_table[index_zone][count_lot] == 1) {
                                                    canvasTripwire_all.add(insertCircle_Red(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire.add(insertCircle_Red(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire1.add(insertCircle_Red(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire2.add(insertCircle_Red(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire3.add(insertCircle_Red(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire4.add(insertCircle_Red(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire5.add(insertCircle_Red(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire6.add(insertCircle_Red(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire7.add(insertCircle_Red(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire8.add(insertCircle_Red(parking_lot_point_x, parking_lot_point_y));

                                                    canvasTripwire_all.add(insertTextLabel_Red(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire.add(insertTextLabel_Red(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire1.add(insertTextLabel_Red(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire2.add(insertTextLabel_Red(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire3.add(insertTextLabel_Red(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire4.add(insertTextLabel_Red(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire5.add(insertTextLabel_Red(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire6.add(insertTextLabel_Red(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire7.add(insertTextLabel_Red(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire8.add(insertTextLabel_Red(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                }
                                                else {
                                                    canvasTripwire_all.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire1.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire2.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire3.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire4.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire5.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire6.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire7.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));
                                                    canvasTripwire8.add(insertCircle_Green(parking_lot_point_x, parking_lot_point_y));

                                                    canvasTripwire_all.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire1.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire2.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire3.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire4.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire5.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire6.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire7.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                    canvasTripwire8.add(insertTextLabel(parking_lot_point_x - 5.5, parking_lot_point_y - 22.5, 50, 50, (count_lot + 1).toString()));
                                                }

                                                count_lot++;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                RenderAllCanvas();
                ai_json = null;
            }
            else {
                wait_count++;
                if (wait_count >= 3) {
                    wait_count = 0;
                    complete_data = "";
                }

                clear_count++;
                if (clear_count >= 3) {
                    clear_count = 0;

                    RefreshCanvasObject(max_protected_objects);
                }
            }
        }
    }
}

function Concat_obj_dwell_time(obj_dwell_time) {
    if (parseInt(obj_dwell_time, 10) >= 1) {
        return "; dwell: " + obj_dwell_time;
    }
    else
        return "";
}

function AssignPlateObject(ai_json,i_index,plate_name) {
    var x = parseInt(ai_json.AiEngine[i_index].x, 10);
    var y = parseInt(ai_json.AiEngine[i_index].y, 10);
    var w = parseInt(ai_json.AiEngine[i_index].w, 10);
    var h = parseInt(ai_json.AiEngine[i_index].h, 10);
    var text_y = parseInt((ai_json.AiEngine[i_index].y + ai_json.AiEngine[i_index].h), 10);
    //console.log(text_y);

    text_y = y - (g_canvas_text_y_offset * (G_CAM_VIDEO_RES_HEIGHT / G_VIEW_CANVAS_Y));

    var area_name = "";
    var country_name = "";
    var out_label = "";
    var center_direction = ai_json.AiEngine[i_index].center_direction;
    var center_stability = ai_json.AiEngine[i_index].center_stability;
    //var center_speed = ai_json.AiEngine[i_index].center_speed;

    if (ai_json.AiEngine[i_index].label_name == "L._Plate_USA" ||
        ai_json.AiEngine[i_index].label_name == "L._Plate_THA" ||
        ai_json.AiEngine[i_index].label_name == "L._Plate_BGD" ||
        ai_json.AiEngine[i_index].label_name == "L._Plate_MEA" ||
        ai_json.AiEngine[i_index].label_name == "L._Plate_AUS" ||
        ai_json.AiEngine[i_index].label_name == "L._Plate_EUR" ||
        ai_json.AiEngine[i_index].label_name == "L._Plate_JPN") {
        area_name = area_name.concat(ai_json.AiEngine[i_index].properties.area);
        country_name = country_name.concat(ai_json.AiEngine[i_index].properties.country);

        var obj_dwell_time = ai_json.AiEngine[i_index].obj_dwell_time;
        var obj_tracking_id = parseInt(ai_json.AiEngine[i_index].obj_tracking_id, 10);

        if (current_state_hide_or_open_label == 1) {
            out_label = plate_name + ", " + area_name + " " + country_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%";
        }
    }
    else {
        var obj_dwell_time = ai_json.AiEngine[i_index].obj_dwell_time;
        var obj_tracking_id = parseInt(ai_json.AiEngine[i_index].obj_tracking_id, 10);

        if (current_state_hide_or_open_label == 1) {
            out_label = plate_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%";
        }
    }

    if (current_state_hide_or_open_direction == 1) {
        if (center_direction.length == 0) {
            if (out_label.length >= 1) {
                out_label += ", ID: " + obj_tracking_id + Concat_obj_dwell_time(obj_dwell_time);
            }
            else {
                out_label += "ID: " + obj_tracking_id + Concat_obj_dwell_time(obj_dwell_time);
            }
        }
        else {
            if (out_label.length >= 1) {
                out_label += ", ID: " + obj_tracking_id + Concat_obj_dwell_time(obj_dwell_time) + ", D:" + center_direction;
            }
            else {
                out_label = "ID: " + obj_tracking_id + Concat_obj_dwell_time(obj_dwell_time) + ", D:" + center_direction;
            }
        }

        if (typeof center_stability !== 'undefined') {
            if (center_stability.length == 0) {

            }
            else {
                if (out_label.length >= 1) {
                    out_label += ", St:" + center_stability;
                }
                else {
                    out_label = "St:" + center_stability;
                }
            }
        }
    }

    //if (current_state_hide_or_open_speed == 1 && center_speed.length >= 1) {
        //if (out_label.length >= 1) {
            //out_label += ", S:" + center_speed;
        //}
        //else {
            //out_label = "S:" + center_speed;
        //}
    //}

    if (canvasTripwire && canvasTripwire1 && canvasTripwire2 && canvasTripwire3 && canvasTripwire4 && canvasTripwire5 && canvasTripwire6 && canvasTripwire7 && canvasTripwire8) {
        canvasTripwire.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, "", 1));
        canvasTripwire1.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, "", 1));
        canvasTripwire2.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, "", 1));
        canvasTripwire3.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, "", 1));
        canvasTripwire4.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, "", 1));
        canvasTripwire5.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, "", 1));
        canvasTripwire6.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, "", 1));
        canvasTripwire7.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, "", 1));
        canvasTripwire8.add(insertTrafficLightRectangle(x * G_CANVAS_WIDTH_RATIO, y * G_CANVAS_HEIGHT_RATIO, w * G_CANVAS_WIDTH_RATIO, h * G_CANVAS_HEIGHT_RATIO, 1, 1, "", 1));

        var behavior_id = ai_json.AiEngine[i_index].behavior_id;
        if (ai_json.AiEngine[i_index].label_name == "L._Plate_USA" ||
            ai_json.AiEngine[i_index].label_name == "L._Plate_THA" ||
            ai_json.AiEngine[i_index].label_name == "L._Plate_BGD" ||
            ai_json.AiEngine[i_index].label_name == "L._Plate_MEA" || 
            ai_json.AiEngine[i_index].label_name == "L._Plate_AUS" || 
            ai_json.AiEngine[i_index].label_name == "L._Plate_EUR" || 
            ai_json.AiEngine[i_index].label_name == "L._Plate_JPN") {
            if (behavior_id >= 1) {
                canvasTripwire.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire1.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire2.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire3.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire4.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire5.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire6.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire7.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire8.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
            }
            else {
                canvasTripwire.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire1.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire2.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire3.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire4.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire5.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire6.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire7.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire8.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
            }
        }
        else {
            if (behavior_id >= 1) {
                canvasTripwire.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire1.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire2.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire3.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire4.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire5.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire6.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire7.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire8.add(insertTextLabel_Red(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
            }
            else {
                canvasTripwire.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire1.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire2.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire3.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire4.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire5.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire6.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire7.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
                canvasTripwire8.add(insertTextLabel(x * G_CANVAS_WIDTH_RATIO, text_y * G_CANVAS_HEIGHT_RATIO, 50, 50, out_label));
            }
        }
    }
}

function RenderAllCanvas() {
    if (canvasTripwire) {
        canvasTripwire.renderAll();
    }
    if (canvasTripwire1) {
        canvasTripwire1.renderAll();
    }
    if (canvasTripwire2) {
        canvasTripwire2.renderAll();
    }
    if (canvasTripwire3) {
        canvasTripwire3.renderAll();
    }
    if (canvasTripwire4) {
        canvasTripwire4.renderAll();
    }
    if (canvasTripwire5) {
        canvasTripwire5.renderAll();
    }
    if (canvasTripwire6) {
        canvasTripwire6.renderAll();
    }
    if (canvasTripwire7) {
        canvasTripwire7.renderAll();
    }
    if (canvasTripwire8) {
        canvasTripwire8.renderAll();
    }
    if (canvasTripwire_all) {
        canvasTripwire_all.renderAll();
    }
}

function RefreshCanvasObject(max_protected_objects) {
    if (typeof canvasTripwire !== 'undefined') {
        //Clear all objects
        // console.log(canvasTripwire.getObjects());
        while (canvasTripwire.getObjects().length > 0) {
            var items = canvasTripwire.getObjects();
            if (items[canvasTripwire.getObjects().length - 1]) {
                canvasTripwire.remove(items[canvasTripwire.getObjects().length - 1]);
            }
            // canvasTripwire.remove(items[canvasTripwire.getObjects().length - 1]);
        }
        
        // console.log(canvasTripwire.getObjects());
        // console.log("--------------------------");
    }

    if (typeof canvasTripwire1 !== 'undefined') {
        //Clear all objects
        // console.log(canvasTripwire1.getObjects());
        while (canvasTripwire1.getObjects().length > max_protected_objects) {
            var items = canvasTripwire1.getObjects();
            if (items[canvasTripwire1.getObjects().length - 1]) {
                canvasTripwire1.remove(items[canvasTripwire1.getObjects().length - 1]);
            }
        }
        canvasTripwire1.getObjects()[0].stroke = "#ffff00";

        // console.log(canvasTripwire1.getObjects());
        // console.log("--------------------------");
    }


    if (typeof canvasTripwire2 !== 'undefined') {
        // console.log(canvasTripwire2.getObjects());
        //Clear all objects
        while (canvasTripwire2.getObjects().length > max_protected_objects) {
            var items = canvasTripwire2.getObjects();
            if (items[canvasTripwire2.getObjects().length - 1]) {
                canvasTripwire2.remove(items[canvasTripwire2.getObjects().length - 1]);
            }
        }
        canvasTripwire2.getObjects()[0].stroke = "#ffff00";

        // console.log(canvasTripwire2.getObjects());
        // console.log("--------------------------");
    }


    if (typeof canvasTripwire3 !== 'undefined') {
        // console.log(canvasTripwire3.getObjects());
        //Clear all objects
        while (canvasTripwire3.getObjects().length > max_protected_objects) {
            var items = canvasTripwire3.getObjects();
            if (items[canvasTripwire3.getObjects().length - 1]) {
                canvasTripwire3.remove(items[canvasTripwire3.getObjects().length - 1]);
            }
        }
        canvasTripwire3.getObjects()[0].stroke = "#ffff00";
        
        // console.log(canvasTripwire3.getObjects());
        // console.log("--------------------------");
    }

    if (typeof canvasTripwire4 !== 'undefined') {
        // console.log(canvasTripwire4.getObjects());
        //Clear all objects
        while (canvasTripwire4.getObjects().length > max_protected_objects) {
            var items = canvasTripwire4.getObjects();
            if (items[canvasTripwire4.getObjects().length - 1]) {
                canvasTripwire4.remove(items[canvasTripwire4.getObjects().length - 1]);
            }
        }
        canvasTripwire4.getObjects()[0].stroke = "#ffff00";
        
        // console.log(canvasTripwire4.getObjects());
        // console.log("--------------------------");
    }

    if (typeof canvasTripwire5 !== 'undefined') {
        // console.log(canvasTripwire5.getObjects());
        //Clear all objects
        while (canvasTripwire5.getObjects().length > max_protected_objects) {
            var items = canvasTripwire5.getObjects();
            if (items[canvasTripwire5.getObjects().length - 1]) {
                canvasTripwire5.remove(items[canvasTripwire5.getObjects().length - 1]);
            }
        }
        canvasTripwire5.getObjects()[0].stroke = "#ffff00";
        
        // console.log(canvasTripwire5.getObjects());
        // console.log("--------------------------");
    }

    if (typeof canvasTripwire6 !== 'undefined') {
        // console.log(canvasTripwire6.getObjects());
        //Clear all objects
        while (canvasTripwire6.getObjects().length > max_protected_objects) {
            var items = canvasTripwire6.getObjects();
            if (items[canvasTripwire6.getObjects().length - 1]) {
                canvasTripwire6.remove(items[canvasTripwire6.getObjects().length - 1]);
            }
        }
        canvasTripwire6.getObjects()[0].stroke = "#ffff00";
        
        // console.log(canvasTripwire6.getObjects());
        // console.log("--------------------------");
    }

    if (typeof canvasTripwire7 !== 'undefined') {
        // console.log(canvasTripwire7.getObjects());
        //Clear all objects
        while (canvasTripwire7.getObjects().length > max_protected_objects) {
            var items = canvasTripwire7.getObjects();
            if (items[canvasTripwire7.getObjects().length - 1]) {
                canvasTripwire7.remove(items[canvasTripwire7.getObjects().length - 1]);
            }
        }
        canvasTripwire7.getObjects()[0].stroke = "#ffff00";
        // console.log(canvasTripwire7.getObjects());
        // console.log("--------------------------");
    }

    if (typeof canvasTripwire8 !== 'undefined') {
        // console.log(canvasTripwire8.getObjects());
        //Clear all objects
        while (canvasTripwire8.getObjects().length > max_protected_objects) {
            var items = canvasTripwire8.getObjects();
            if (items[canvasTripwire8.getObjects().length - 1]) {
                canvasTripwire8.remove(items[canvasTripwire8.getObjects().length - 1]);
            }
        }
        canvasTripwire8.getObjects()[0].stroke = "#ffff00";
        // console.log(canvasTripwire8.getObjects());
        // console.log("--------------------------");
    }

    if (typeof canvasTripwire_all !== 'undefined') {
        // console.log("click_canvas_all:", click_canvas_all);
        // console.log(canvasTripwire_all.getObjects());
        //Clear all objects
        while (canvasTripwire_all.getObjects().length > click_canvas_all) {
            var items = canvasTripwire_all.getObjects();
            if (items[canvasTripwire_all.getObjects().length - 1]) {
                canvasTripwire_all.remove(items[canvasTripwire_all.getObjects().length - 1]);
            }
            // canvasTripwire_all.remove(items[canvasTripwire_all.getObjects().length - 1]);
        }

        for (var index_click = 0; index_click < click_canvas_all; index_click++) {
            canvasTripwire_all.getObjects()[index_click].stroke = "#ffff00";
        }
        // console.log(canvasTripwire_all.getObjects());
        // console.log("--------------------------");
    }
}


/*
function GetRequest(url) {
    sessionStorage.setItem('getalarmmotion_data', "");
    var data_temp = "";
    var data_buffer = "";
    var i_found = 0;
    var m1 = 0;
    var m2 = 0;
    var m2_temp = 0;
    var complete_data_m = "";
    var alarm_data = "";


    var xhttp = new XMLHttpRequest();    
    xhttp.onreadystatechange = function () {
        if (this.status === 200) {
            clearInterval(request_live);
            data_temp = "";
            data_temp = this.responseText.substring(data_temp, this.responseText.length - 1);
            //console.log("this.responseText.length: " + this.responseText.length.toString());
            //console.log("readyState " + this.readyState.toString());
            sessionStorage.setItem('getalarmmotion_data', data_temp);
            GetAlarm(data_temp);
            alarm_data = "";
            data_buffer = "";
            i_found = 0;
            this.responseText = "";
            //console.log("[clear]this.responseText.length: " + this.responseText.length.toString());
               
            //}

            
            if (this.responseText.length >= 500000) {
                xhttp.abort();
                xhttp.open("GET", url, true);

                xhttp.timeout = 300 * 1000; // time in milliseconds
                xhttp.setRequestHeader("Cache-Control", "no-cache");
                xhttp.setRequestHeader("Pragma", "no-cache");

                xhttp.send(null);
            }
        }
    };

    xhttp.open("GET", url, true);

    xhttp.timeout = 300*1000; // time in milliseconds

    xhttp.setRequestHeader("Cache-Control", "no-cache");
    xhttp.setRequestHeader("Pragma", "no-cache");

    xhttp.send(null);
}*/
var websocket_reconnect_flag = 0;

var ws = null;
var wait_data = 0;
//var last_performace_time = 0;
function GetRequest_WebSocket() {
    localStorage.setItem("fetchHttpGetalarm", "No");
    sessionStorage.setItem('getalarmmotion_data', "");
    var data_temp = "";
    wait_data = 0;
    // console.log("GetRequest_WebSocket");
    if ("WebSocket" in window) {
        //console.log("WebSocket is supported by your Browser!");
        //console.log(navigator.userAgent);
        // Let us open a web socket

		if ( navigator.userAgent.indexOf( "nvr_auth=" ) != -1 )
            ws = new WebSocket("ws://" + window.location.hostname + '/' + g_tcp_tunnel_token + "/getalarmmotion?" + navigator.userAgent );
		else
            ws = new WebSocket("ws://" + window.location.hostname + '/' + g_tcp_tunnel_token + "/getalarmmotion");

        // 08-05 嘗試從 80 port 直接拿，但會出現 Connection error
        // if ( navigator.userAgent.indexOf( "nvr_auth=" ) != -1 )
        //     ws = new WebSocket("ws://" + window.location.hostname + "/getalarmmotion?" + navigator.userAgent );
		// else
        //     ws = new WebSocket("ws://" + window.location.hostname + "/getalarmmotion");
        // console.log(ws);
        
        keepAlive();

        ws.onopen = function () {

            // Web Socket is connected, send data using send()
            //ws.send("Message to send");
            console.log("ws.onopen...");
            clearInterval(request_live);


            //clearInterval(reconnect_websocket);
            //websocket_reconnect_flag = 0;
        };

        ws.onmessage = function (evt) {
            //var current_performace_time = window.performance.now();

            //if (last_performace_time != 0) {
                //量測websocket時間
                //console.log("GetRequest WebSocket time:" + (current_performace_time - last_performace_time) + "ms");
            //}

            var received_msg = evt.data;
            //console.log("websocket:");
            //console.log(received_msg);

            /*
            clearInterval(request_live);
            clearInterval(reconnect_websocket);
            websocket_reconnect_flag = 0;*/
            data_temp = "";
            data_temp = received_msg;
            //console.log("this.responseText.length: " + this.responseText.length.toString());
            //console.log("readyState " + this.readyState.toString());

            console.log("[WebSocket] /getalarmmotion : ");
            console.log(data_temp);
            // 這邊 data_temp 會自動依照 myboundry 裁成一段一段，但是帶有 CamTime: 2024-08-05 18:23:25 ms:322\r\n\r\n
            sessionStorage.setItem('getalarmmotion_data', data_temp);
            //last_performace_time = current_performace_time;
            var current_page = localStorage.getItem('current_page');
            if (current_page === 'alarm' || current_page === 'alarm_nvr') {
                GetAlarm(data_temp);
            }
            //console.log("websocket here");
            wait_data = 0;
        };

        ws.onclose = function () {
            // websocket is closed.
            console.log("Connection is closed...");

            cancelKeepAlive();

            ws = null;
            setTimeout(function () {
                GetRequest_WebSocket();
            }, 1000);

            //websocket_reconnect_flag = 1;
            //reConnect();
        };

        ws.onerror = function (e) {
            // websocket is error.
            console.log("Connection is error");
            console.log(e);
           
            //cancelKeepAlive();
            //websocket_reconnect_flag = 1;
            //reConnect();
            ws.close();
        }

        

    } else {

        // The browser doesn't support WebSocket
        //console.log("WebSocket NOT supported by your Browser!");
    }
}

/*
function reConnect() { 
    //console.log("socket 連線斷開,正在嘗試重新建立連線"); 
    
    if (websocket_reconnect_flag == 1)
    {
        reconnect_websocket = setInterval(function () {
            GetRequest_WebSocket();        
        }, 5000);    
    }
}*/

var timerID = 0;
function keepAlive() {
    var timeout = 5000;
    //console.log("keepAlive:" + ws.readyState);
    //console.log("wait_data:" + wait_data.toString());
    if (ws.readyState != 2)//fail receive
        wait_data++;
    if (wait_data >= 20)
        ws.close();
    else
        timerID = setTimeout(keepAlive, timeout);
}
function cancelKeepAlive() {
    if (timerID) {
        clearTimeout(timerID);
    }
}


var normal_spacing = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
function func_initCounterMsg() {
    
    counter_count_msg = "";
    for (var j = 0; j < 8; j++) {
        var spacing = (j == 3 || j == 7) ? "" : normal_spacing;

        counter_count_msg += (counter_cust_name[j] + ":&nbsp;0&nbsp;," + spacing);
        if (j == 3) {
            counter_count_msg += "</br>";
        }
    }
    localStorage.setItem('counter_count_msg', counter_count_msg);
}


var g_getalarmmotion_last_fetch_time = null;
var checkIntervalID = null;

function func_checkGetRequest() {
    var checkIntervalTime = 200;
    var fetch_time_out = 1000;
    var counter = 0;
    var max_retry_time = 20;

    if (g_getalarmmotion_last_fetch_time == null) {
        g_getalarmmotion_last_fetch_time = Date.now();
    }

    if (checkIntervalID) {
        clearInterval(checkIntervalID);
    }

    checkIntervalID = setInterval(function () {
        var time_diff = (Date.now() - g_getalarmmotion_last_fetch_time);
        // console.log(`[func_checkGetRequest][${checkIntervalID}] checking last fetch time: ${g_getalarmmotion_last_fetch_time} , time_diff: ${time_diff} , counter: ${counter}`);
        if ( time_diff > fetch_time_out ) {
            GetRequest_Http_80port_fetch();
            clearInterval(checkIntervalID);
        }

        counter++;

        if (counter > max_retry_time) {
            clearInterval(checkIntervalID);
        }
    }, checkIntervalTime)
}

var g_decoder = new TextDecoder('utf-8');
function GetRequest_Http_80port_fetch() {
    // console.log("[GetRequest_Http_80port_fetch] start");
    localStorage.setItem("fetchHttpGetalarm", "Yes");
    if (g_getalarmmotion_last_fetch_time == null) {
        g_getalarmmotion_last_fetch_time = Date.now();
    }

    func_initCounterMsg();

    var port = localStorage.getItem('landing_page_port');
    // console.log("[GetRequest_Http_80port_fetch] getalarmmotion port : ", port);

    var noJsonStringCounter = 0;
    
    // 2.response.body.getReader()
    fetch("http://" + window.location.hostname + ":" + port + "/getalarmmotion", {
        method: 'GET',
    })
    .then(response => {
        // console.log(response);
        var reader = response.body.getReader();
        var lastJsonString = '';
        var camTime = '';
        var check_if_start_to_receive_aiengine = 0;
        var count_end = 0;
        var check_if_receive_ok = 0;
        //var g_fetchIntervalTime = 50;

        function read()
        {
            //console.log("Date:" + Date.now());
            reader.read().then(({ done, value }) => {				
                if (done) {
                    // console.log('http getalarmmotion complete');
                    //return;
                }
                else {
                    // 08-24 以當前傳輸間隔換算1秒能傳的次數，沒物件資訊時，以 noJsonStringCounter 判斷是否須清除殘留物件
                    var fetchIntervalTime = (Date.now() - g_getalarmmotion_last_fetch_time);
                    //g_fetchIntervalTime = fetchIntervalTime;
                    var refreshCounterThreshold = 1000 / fetchIntervalTime;
                    // console.log(`fetchIntervalTime : ${fetchIntervalTime} , refreshCounterThreshold : ${refreshCounterThreshold} , check noJsonStringCounter : ${noJsonStringCounter}`);
                    g_getalarmmotion_last_fetch_time = Date.now();
                    // 紀錄最後收到資訊的時間，以供斷線重連檢查用

                    // 處理收到的資料
                    var chunk = g_decoder.decode(value, { stream: true });
                    // console.log('Received chunk:', chunk);

                    var lines = chunk.split(/\r?\n/);

                    lines.forEach(line => {
                        if (line.startsWith('CamTime:')) {
                            lastJsonString = '';
                            check_if_start_to_receive_aiengine = 0;
                            count_end = 0;
                            camTime = line;
                            check_if_receive_ok = 0;
                        }
                        else if (line.startsWith('{"AiEngine"')) {
                            lastJsonString = line;
                            check_if_start_to_receive_aiengine = 1;
                        }
                        else if (line.length >= 2 && check_if_start_to_receive_aiengine == 1) {
                            lastJsonString += line;
                        }
                        else if (check_if_start_to_receive_aiengine == 1) {
                            count_end++;
                        }
                    });

                    if (count_end == 2) {
                        check_if_receive_ok = 1;
                    }

                    // 不論有無 Json 字串都可能用到
                    var max_protected_objects = g_max_protected_objects;
                    if (g_enable_show_pixel === 1) {
                        max_protected_objects = g_max_protected_objects + 2;
                    }

                    if (check_if_receive_ok == 1) {
                        // 80 port getalarmmotion 有物件才會有JSON字串，清理 canvas 要提早到這邊
                        // 加入 click_mouse_set 條件，避免導致 Cold zone 設定過程取不到座標
                        if (localStorage.getItem("fetchHttpGetalarm") == "Yes" && click_mouse_set == 0) {
                            // console.log("g_max_protected_objects:", g_max_protected_objects);
                            RefreshCanvasObject(max_protected_objects);
                            noJsonStringCounter = 0;
                            // console.log(`--- RefreshCanvasObject for normal getalarmmotion procedure and reset noJsonStringCounter : ${noJsonStringCounter}`);
                        }
                        var data = `${camTime}\r\n\r\n${lastJsonString}`; // 銜接原 WebSocket 傳 GetAlarm 格式
                        // console.log('data:\n', data);
                        GetAlarm(data);

                        lastJsonString = '';
                        camTime = '';
                        check_if_start_to_receive_aiengine = 0;
                        count_end = 0;
                        check_if_receive_ok = 0;
                    } else {
                        if (localStorage.getItem("events_default_version") != "4")
                        {
                            // 非 Live View 版本的 udp 傳輸機制不同，要偵測沒物件情況清理 canvas
                            // 記錄沒傳 Json 字串的次數，判斷是否滿足約1秒能傳的次數，做 refresh 清除殘留物件
                            noJsonStringCounter++;
                            if (noJsonStringCounter > refreshCounterThreshold && localStorage.getItem("fetchHttpGetalarm") == "Yes" && click_mouse_set == 0) {
                                RefreshCanvasObject(max_protected_objects);
                                noJsonStringCounter = 0;
                                console.log(`=== RefreshCanvasObject for residual boxes and reset noJsonStringCounter : ${noJsonStringCounter}`);
                            }
                        }
                    }
                }
                read();
            });
        }
        read();
    })
    .catch(error => {
        // 發生錯誤後稍等一段時間再重試
		console.error("Fetch error:", error);
        setTimeout(GetRequest_Http_80port_fetch, 2000);
    });

}


function GetRequest_Http() {
    var xhttp = new XMLHttpRequest();
    var data = "Null";
    xhttp.onreadystatechange = function () {
        if (this.status == 200) {
            clearInterval(request_live);
            data = this.responseText.substring(data, this.responseText.length - 1);
            sessionStorage.setItem('getalarmmotion_data', data);
            GetAlarm(data);
        }
    };
    xhttp.open("GET", "http://" + window.location.hostname + '/' + g_tcp_tunnel_token + "/getalarmmotion", true);
    xhttp.setRequestHeader("Cache-Control", "no-cache");
    xhttp.setRequestHeader("Pragma", "no-cache");
    //xhttp.setRequestHeader("Authorization", "Basic " + btoa("username:password")); 

    xhttp.addEventListener("load", function (e) {
        //console.log(xhttp.responseText);
    }, false)

    xhttp.send(null);
}

function func_set_coldobjects(object_x, object_y, object_w, object_h, object_name) {
    console.log(`[func_set_coldobjects] obj x:${object_x} , y:${object_y} , w:${object_w} , h:${object_h} , name:${object_name}`);

    $.ajax({
        url: '/' + g_tcp_tunnel_token + "/setconfig?coldobjects&x=" + object_x + "&y=" + object_y + "&w=" + object_w + "&h=" + object_h + "&Object=" + object_name,
        method: "GET",
        async: true,
        beforeSend: function (xmlHttp) {
            xmlHttp.setRequestHeader("If-Modified-Since", "0");
            xmlHttp.setRequestHeader("Cache-Control", "no-cache");
            //xmlHttp.setRequestHeader("Authorization", "Basic " + btoa("username:password")); 
        },
        success: function () {
            //console.info();
        },
        error: function () {
            setTimeout(func_set_coldobjects(object_x, object_y, object_w, object_h, object_name), 3000);
            console.warn();
        }
    });
    return false;
}

function func_get_coldobjects() {
    $.ajax({
        url: '/' + g_tcp_tunnel_token + "/getconfig?coldobjects=all",
        method: "GET",
        async: true,
        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) {
            //console.log(retdata);
            var data_cold = validatingJSON(retdata);
            check_if_existing_coldobjects = 0;
            var temp_check_if_existing_coldobjects = 0;

            if (data_cold != null) {
                for (var i = 0; i < MAX_COLDOBJECTS; i++) {
                    coldobjects_X[i] = data_cold.cold_objects[i].X;
                    coldobjects_Y[i] = data_cold.cold_objects[i].Y;
                    coldobjects_W[i] = data_cold.cold_objects[i].W;
                    coldobjects_H[i] = data_cold.cold_objects[i].H;
                    coldobjects_Object[i] = data_cold.cold_objects[i].Object;

                    if (coldobjects_Object[i] == "ban_zone") {
                        if (G_LANG == "zh_tw")
                            coldobjects_Object[i] = "排除區域";
                        else if (G_LANG == "ja_jp")
                            coldobjects_Object[i] = "排他的ゾーン";
                        else if (G_LANG == "it_it")
                            coldobjects_Object[i] = "zona_esclusiva";
                        else
                            coldobjects_Object[i] = "exclusive_zone";
                    }

                    if (coldobjects_X[i] >= 1 && coldobjects_Y[i] >= 1 && coldobjects_W[i] >= 1 && coldobjects_H[i] >= 1 && coldobjects_Object[i].length >= 1) {
                        temp_check_if_existing_coldobjects = 1;
                    }
                }
            }
            check_if_existing_coldobjects = temp_check_if_existing_coldobjects;

            //console.info();
        },
        error: function () {
            setTimeout(func_get_coldobjects(), 3000);
            console.warn();
        }
    });
    return false;
}

function func_clean_coldobjects() {
    $.ajax({
        url: '/' + g_tcp_tunnel_token + "/getconfig?coldobjects=clean",
        method: "GET",
        async: true,
        beforeSend: function (xmlHttp) {
            xmlHttp.setRequestHeader("If-Modified-Since", "0");
            xmlHttp.setRequestHeader("Cache-Control", "no-cache");
            //xmlHttp.setRequestHeader("Authorization", "Basic " + btoa("username:password")); 
        },
        success: function () {

            //console.info();
        },
        error: function () {
            setTimeout(func_clean_coldobjects(), 3000);
            console.warn();
        }
    });
    return false;
}

function func_translate_name(translate_name) {

    var json_label_names = JSON.parse(LABEL_NAMES);
    var json_label_names_zh_tw = JSON.parse(LABEL_NAMES_zh_tw);
    var json_label_names_ja_jp = JSON.parse(LABEL_NAMES_ja_jp);
    var json_label_names_it_it = JSON.parse(LABEL_NAMES_it_it);

    if (localStorage.getItem("dataset_ver").search("RAFFIC") >= 1) {
        var data = json_label_names.Tiny_Traffic[0];
        var data_zh_tw = json_label_names_zh_tw.Tiny_Traffic[0];
        var data_ja_jp = json_label_names_ja_jp.Tiny_Traffic[0];
        var data_it_it = json_label_names_it_it.Tiny_Traffic[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (localStorage.getItem("events_default_version") != null && localStorage.getItem("events_default_version") == "4") {
                            if (translate_name == "person") {
                                if (G_LANG == "zh_tw")
                                    translate_name = "人";
                                else if (G_LANG == "ja_jp")
                                    translate_name = "人";
                                else if (G_LANG == "it_it")
                                    translate_name = "Umana";
                                else
                                    translate_name = "Human";
                            }
                            else if (translate_name == "car") {
                                if (G_LANG == "zh_tw")
                                    translate_name = "車";
                                else if (G_LANG == "ja_jp")
                                    translate_name = "車";
                                else if (G_LANG == "it_it")
                                    translate_name = "Veicolo";
                                else
                                    translate_name = "Vehicle";
                            }
                            else {
                                if (G_LANG == "zh_tw")
                                    translate_name = label_names_zh_tw;
                                else if (G_LANG == "ja_jp")
                                    translate_name = label_names_ja_jp;
                                else if (G_LANG == "it_it")
                                    translate_name = label_names_it_it;
                            }
                        }
                        else {
                            if (G_LANG == "zh_tw")
                                translate_name = label_names_zh_tw;
                            else if (G_LANG == "ja_jp")
                                translate_name = label_names_ja_jp;
                            else if (G_LANG == "it_it")
                                translate_name = label_names_it_it;
                        }
                        break;
                    }
                }
            }
        }
    }
    if (localStorage.getItem("dataset_ver").search("IFIRE") >= 1) {
        var data = json_label_names.AIFIRE[0];
        var data_zh_tw = json_label_names_zh_tw.AIFIRE[0];
        var data_ja_jp = json_label_names_ja_jp.AIFIRE[0];
        var data_it_it = json_label_names_it_it.AIFIRE[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }
    if (localStorage.getItem("dataset_ver").search("IAERO") >= 1) {
        var data = json_label_names.AIAERO[0];
        var data_zh_tw = json_label_names_zh_tw.AIAERO[0];
        var data_ja_jp = json_label_names_ja_jp.AIAERO[0];
        var data_it_it = json_label_names_it_it.AIAERO[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }
    if (localStorage.getItem("dataset_ver").search("ITOF") >= 1) {
        var data = json_label_names.AITOF[0];
        var data_zh_tw = json_label_names_zh_tw.AITOF[0];
        var data_ja_jp = json_label_names_ja_jp.AITOF[0];
        var data_it_it = json_label_names_it_it.AITOF[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }
    if (localStorage.getItem("dataset_ver").search("UMAN") >= 1) {
        var data = json_label_names.AIHUMAN[0];
        var data_zh_tw = json_label_names_zh_tw.AIHUMAN[0];
        var data_ja_jp = json_label_names_ja_jp.AIHUMAN[0];
        var data_it_it = json_label_names_it_it.AIHUMAN[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }
    if (localStorage.getItem("dataset_ver").search("ISAFTY") >= 1) {
        var data = json_label_names.AISAFETY[0];
        var data_zh_tw = json_label_names_zh_tw.AISAFETY[0];
        var data_ja_jp = json_label_names_ja_jp.AISAFETY[0];
        var data_it_it = json_label_names_it_it.AISAFETY[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }
    if (localStorage.getItem("dataset_ver").search("IPRODUCTION") >= 1) {
        var data = json_label_names.AIPRODUCTION[0];
        var data_zh_tw = json_label_names_zh_tw.AIPRODUCTION[0];
        var data_ja_jp = json_label_names_ja_jp.AIPRODUCTION[0];
        var data_it_it = json_label_names_it_it.AIPRODUCTION[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }
    if (localStorage.getItem("dataset_ver").search("ISHIP") >= 1) {
        var data = json_label_names.AISHIP[0];
        var data_zh_tw = json_label_names_zh_tw.AISHIP[0];
        var data_ja_jp = json_label_names_ja_jp.AISHIP[0];
        var data_it_it = json_label_names_it_it.AISHIP[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }

    if (localStorage.getItem("license_type").search("LPR") >= 1) {
        var data = json_label_names.AIANPR[0];
        var data_zh_tw = json_label_names_zh_tw.AIANPR[0];
        var data_ja_jp = json_label_names_ja_jp.AIANPR[0];
        var data_it_it = json_label_names_it_it.AIANPR[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }

    if (localStorage.getItem("dataset_ver").search("IAML") >= 1) {
        var data = json_label_names.AIAML[0];
        var data_zh_tw = json_label_names_zh_tw.AIAML[0];
        var data_ja_jp = json_label_names_ja_jp.AIAML[0];
        var data_it_it = json_label_names_it_it.AIAML[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }
    if (localStorage.getItem("dataset_ver").search("IFRONTBACK") >= 1) {
        var data = json_label_names.AIFRONTBACK[0];
        var data_zh_tw = json_label_names_zh_tw.AIFRONTBACK[0];
        var data_ja_jp = json_label_names_ja_jp.AIFRONTBACK[0];
        var data_it_it = json_label_names_it_it.AIFRONTBACK[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }
    if (localStorage.getItem("dataset_ver").search("IRAIL") >= 1) {
        var data = json_label_names.AIRAILWAY[0];
        var data_zh_tw = json_label_names_zh_tw.AIRAILWAY[0];
        var data_ja_jp = json_label_names_ja_jp.AIRAILWAY[0];
        var data_it_it = json_label_names_it_it.AIRAILWAY[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }

    if (localStorage.getItem("dataset_ver").search("ISPORTS") >= 1) {
        var data = json_label_names.AISPORTS[0];
        var data_zh_tw = json_label_names_zh_tw.AISPORTS[0];
        var data_ja_jp = json_label_names_ja_jp.AISPORTS[0];
        var data_it_it = json_label_names_it_it.AISPORTS[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }

    if (localStorage.getItem("dataset_ver").search("IFACE") >= 1) {
        var data = json_label_names.AIFACE[0];
        var data_zh_tw = json_label_names_zh_tw.AIFACE[0];
        var data_ja_jp = json_label_names_ja_jp.AIFACE[0];
        var data_it_it = json_label_names_it_it.AIFACE[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }

    if (localStorage.getItem("dataset_ver").search("IGARBAGE") >= 1) {
        var data = json_label_names.AIGARBAGE[0];
        var data_zh_tw = json_label_names_zh_tw.AIGARBAGE[0];
        var data_ja_jp = json_label_names_ja_jp.AIGARBAGE[0];
        var data_it_it = json_label_names_it_it.AIGARBAGE[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }

    if (localStorage.getItem("dataset_ver").search("IGENDER") >= 1) {
        var data = json_label_names.AIGENDER[0];
        var data_zh_tw = json_label_names_zh_tw.AIGENDER[0];
        var data_ja_jp = json_label_names_ja_jp.AIGENDER[0];
        var data_it_it = json_label_names_it_it.AIGENDER[0];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                if (data[key] != "_s") {
                    var label_names = data[key];
                    if (label_names == translate_name) {
                        var label_names_zh_tw = data_zh_tw[key];
                        var label_names_ja_jp = data_ja_jp[key];
                        var label_names_it_it = data_it_it[key];
                        if (G_LANG == "zh_tw")
                            translate_name = label_names_zh_tw;
                        else if (G_LANG == "ja_jp")
                            translate_name = label_names_ja_jp;
                        else if (G_LANG == "it_it")
                            translate_name = label_names_it_it;
                        break;
                    }
                }
            }
        }
    }

    return translate_name;
}

// ---------------------------------------------------------------
// ToF min max

function func_changeColorBarMinMax(tofInfo) {
    //console.log("[alarm.js] /getalarmmotion min_tof_range", tofInfo.min_tof_range);
    //console.log("[alarm.js] /getalarmmotion max_tof_range", tofInfo.max_tof_range);
    //console.log("----------------------------------------");

    // convert "Meter" to "CM" & "inch"
    //var cmToInchRatio = 0.3937;
    var meterToft = 3.2808

    var minmeter = Math.floor(tofInfo.min_tof_range * 1000) / 1000;
    var minft = Math.floor(tofInfo.min_tof_range * meterToft * 1000) / 1000;

    var maxmeter = Math.floor(tofInfo.max_tof_range * 1000) / 1000;
    var maxft = Math.floor(tofInfo.max_tof_range * meterToft * 1000) / 1000;

    var canvasDiv = $("#CanvasTripwire1").parent().parent().parent();
    var canvasH = canvasDiv.height();
    var tofMinMaxTextHeight = 16;
    var color_map_height = canvasH - (tofMinMaxTextHeight * 2);

    var ratio_current_min = minmeter / 7.4;
    var ratio_current_max = maxmeter / 7.4 - ratio_current_min;
    var ratio_max = 1 - ratio_current_min - ratio_current_max;

    //if (minmeter < 0.3)
        //$("#tof_current_min div:first").html('<div>Too little, Min:' + minmeter.toString() + 'M&ensp;' + minft.toString() + 'Ft</div>');
    //else if (minmeter > 7.4)
        //$("#tof_current_min div:first").html('<div>Too large, Min:' + minmeter.toString() + 'M&ensp;' + minft.toString() + 'Ft</div>');
    //else
        $("#tof_current_min div:first").html('<div>Min:' + minmeter.toString() + 'M&ensp;' + minft.toString() + 'Ft</div>');

    //if (maxmeter < 0.3 )
        //$("#tof_current_max div:first").html('<div>Too little, Max:' + maxmeter.toString() + 'M&ensp;' + maxft.toString() + 'Ft</div>');
    //else if (maxmeter > 7.4)
        //$("#tof_current_max div:first").html('<div>Too large, Max:' + maxmeter.toString() + 'M&ensp;' + maxft.toString() + 'Ft</div>');
    //else
        $("#tof_current_max div:first").html('<div>Max:' + maxmeter.toString() + 'M&ensp;' + maxft.toString() + 'Ft</div>');

    $("#tof_current_min").css("margin-top", Math.round(color_map_height * ratio_current_min - 10).toString() + "px");
    $("#tof_current_max").css("margin-top", Math.round(color_map_height * ratio_current_max - 10).toString() + "px");
    $("#tofMax").css("margin-top", Math.round(color_map_height * ratio_max - 10).toString() + "px");

    if (minmeter >= maxmeter) {
        $("#tof_current_min").css("display", "none");
        $("#tof_current_max").css("display", "none");
        $("#tofMax").css("margin-top", Math.round(color_map_height - 14).toString() + "px");
    }
    else {
        $("#tof_current_min").css("display", "block");
        $("#tof_current_max").css("display", "block");
    }

}


var g_event_stream = null;

function create_canvas_stream1() {
    var ui_width = G_VIEW_CANVAS_X;
    var ui_height = G_VIEW_CANVAS_Y;

    var l_cgi = "/websocket?";
    var l_token = "";
    var streamIndex = 1; // 預設 LILIN version 拿 Encoder 2

    var g_event_para = new _codec_para();
    
    // 09-10 依據不同版本切換串流
    // 共用
    var decoder_PROFILE_ETYPE_Array = '1';
    var decoder_AD_TYPE = 5;
    var decoder_AD_RATE = '8000'

    // 差異部分
    var decoder_PROFILE_W = '720';
    var decoder_PROFILE_H = '480';
    var decoder_PROFILE_FPS = '15';

    if (localStorage.getItem("events_default_version") != null && localStorage.getItem("events_default_version") == "4")
    {
        streamIndex = 2; // 針對 Live View 版本的雙模機器改拿 Encoder 3
    }

    var event_uri = l_cgi + 'eventstream=' + streamIndex.toString() + l_token; 
    
    // 取得 ipcam service video 設定
    $.ajax({
        url: '/get_sencode_info', // 替換為實際 API URL
        method: 'GET',
        async: false,
        dataType: 'xml',
        success: function(data) {
            // console.log(data);
            
            // 根據指定索引檢索 stream 節點
            var stream = $(data).find('stream').eq(streamIndex);
            if (stream.length) {
                decoder_PROFILE_W = stream.find('width').text();
                decoder_PROFILE_H = stream.find('height').text();
                decoder_PROFILE_FPS = stream.find('fps').text();
                
                console.log('H264 Stream Index:', streamIndex, 'Width:', decoder_PROFILE_W, 'Height:', decoder_PROFILE_H, 'FPS:' , decoder_PROFILE_FPS);
            } else {
                console.error('Stream with index', streamIndex, 'not found.');
            }
        },
        error: function(xhr, status, error) {
            console.error('Error fetching data:', error);
        }
    });

    g_event_para.worker_num = 1;
    g_event_para.vc[0] = { width: decoder_PROFILE_W, height: decoder_PROFILE_H, id: "CanvasBgContainer", frameszie: 4096000 };            
    g_event_para.droplatencydecoded = true;

    g_event_stream = new _codec(g_event_para);           
    g_event_stream.streamType = WS_WR;

    var node = document.getElementById(g_event_para.vc[0].id);
    node.appendChild(g_event_stream.get_vc_element(0));

    g_event_stream.set_vc_element_size(0, ui_width, ui_height); //display size
    g_event_stream.init_event(0, 0, event_uri);
    g_event_stream.DecodeInit(decoder_PROFILE_ETYPE_Array, decoder_AD_TYPE, decoder_PROFILE_W, decoder_PROFILE_H, decoder_PROFILE_FPS, decoder_AD_RATE, 16000);
    
    return g_event_stream;
}

function openAida() {
    var port = localStorage.getItem('plugin_wan_port');
    var url = 'http://' + window.location.hostname + ':' + port + '/Aida/index.html';
    window.open(url, '_blank');
}

function openIVSsettins() {
    var port = localStorage.getItem('plugin_wan_port');
    var url = 'http://' + window.location.hostname + ':' + port + '/Aida/object_index.html';
    window.open(url, '_blank', 'resizable=yes,top=0,left=0,width=900,height=400');
}

var k_count = -1;
function func_setconfigfile(json_data) {
    waitSeconds(100);
    $.ajax({
        url: '/' + g_tcp_tunnel_token +  "/setconfigfile",
        method: "POST",
        async: false,
        data: json_data,
        //contentType: false,
        processData: false,
        timeout: 5000,
        cache: false,
        xhrFields: {
            withCredentials: true        // 設置為 true 如果需要帶上 Cookies 或其他認證
        },
        contentType: 'text/plain',  // 傳送純文本
        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) {
            //console.info();
        },
        error: function (retdata) {
            console.warn(retdata);
            k_count++;

            if (k_count <= 94) {
                waitSeconds(1000);
                func_setconfigfile(json_data);
            }
        }
    });
    return false;
}

// 11-01
var defaultPolygonColor = "#ffff00"; // 預設色號 亮黃色的 Zone
var alarmColor = "#ff0000"; // 觸發 禁區、違停、警戒線 事件時，顯示紅色的 Zone ( Polygon )
var defaultZoneAlarmStatus = {'behavior_id': 0, 'red_zone': 0, 'time_stamp': 0};
var g_zoneAlarmStatus = func_initZoneAlarmStatus(defaultZoneAlarmStatus);
var g_zoneAlarmColorDisplayTime = 2; // Unit : second

function func_checkZoneColor()
{
    // console.log("g_zoneAlarmStatus: ", g_zoneAlarmStatus);

    var currentTimeDiff = null;
    var zoneColor = defaultPolygonColor;
    for (var zoneIndex = 0; zoneIndex < MAX_DETECTION_ZONE; zoneIndex++)
    {
        zoneColor = defaultPolygonColor;

        if (g_zoneAlarmStatus[zoneIndex]['time_stamp'] > 0)
        {
            currentTimeDiff = new Date().getTime() - g_zoneAlarmStatus[zoneIndex]['time_stamp'];
            if (currentTimeDiff > (g_zoneAlarmColorDisplayTime * 1000))
            {
                // console.log(`[func_checkZoneColor] reset g_zoneAlarmStatus[${zoneIndex}]`);
                
                g_zoneAlarmStatus[zoneIndex]['behavior_id'] = 0;
                g_zoneAlarmStatus[zoneIndex]['red_zone'] = 0;
                g_zoneAlarmStatus[zoneIndex]['time_stamp'] = 0;
            } // else 的 zone 仍在顯示時間內，仰賴 red_zone 賦予警報顏色

            if (g_zoneAlarmStatus[zoneIndex]['red_zone'] == 1) 
            {
                zoneColor = alarmColor;
            } // else 的 zone 應是剛被 reset 狀態值的，以預設顏色顯示

        } // else 是 時間戳被歸零的 以預設顏色顯示

        // console.log(`[func_checkZoneColor] check zone ${(zoneIndex+1)} color:${zoneColor}`);

        // check all zone
        // console.log("check show_all_zone: ", show_all_zone);
        if (show_all_zone == 0) 
        {
            // check which canvas is active
            try 
            {
                window["canvasTripwire"+(zoneIndex+1)].getObjects()[0].stroke = zoneColor;
            }
            catch (error)
            {
                console.log(error);
            }
            
        }
        else
        {
            if (zoneIndex < count_zone) {
                // console.log(`[func_checkZoneColor] activeZoneIndex: ${zoneIndex}`);
                canvasTripwire_all.getObjects()[zoneIndex].stroke = zoneColor;
            }

            
        }
    }

}


function func_checkTriggerZoneStatus(behavior_id)
{
    // console.log("checked_trigger_events:");
    // console.log(checked_trigger_events);

    //var trigger_index = null;

    /*if (behavior_id == 1) // 禁區
    { 
        trigger_index = 0;
    }
    else if (behavior_id == 4) // 違停
    { 
        trigger_index = 1;
    }
    else if (behavior_id == 8) // 警戒線
    { 
        trigger_index = 4;
    }*/

    for (var zoneIndex = 0; zoneIndex < MAX_DETECTION_ZONE; zoneIndex++) {
        for (var trigger_index = 0; trigger_index < MAX_SIZE_IDC_LIST_TRIGGER_EVENTS; trigger_index++) {
            if (checked_trigger_events[zoneIndex][trigger_index] == 1) {
                if (g_zoneAlarmStatus[zoneIndex]['time_stamp'] == 0) {
                    g_zoneAlarmStatus[zoneIndex]['behavior_id'] = behavior_id;
                    g_zoneAlarmStatus[zoneIndex]['time_stamp'] = new Date().getTime();
                    // console.log(`[func_checkTriggerZoneStatus] init g_zoneAlarmStatus[${zoneIndex}]['time_stamp']:${g_zoneAlarmStatus[zoneIndex]['time_stamp']}`);
                    g_zoneAlarmStatus[zoneIndex]['red_zone'] = 1;
                }
                break;
            }
        }
    }

    // console.log("[func_checkTriggerZoneStatus] check g_zoneAlarmStatus:");
    // console.log(g_zoneAlarmStatus);
}

function func_initZoneAlarmStatus(defaultValue)
{
    var array = [];
    for (var i = 0; i < MAX_DETECTION_ZONE; i++) 
    {
        // 確保每個元素都是一個新的副本，避免不同 Zone 紀載不同行為時互相干擾狀態值
        array.push(JSON.parse(JSON.stringify(defaultValue)));
    }
    return array;
}