var canvasTripwire;
var canvasTripwire_all;
var click_canvas_all = 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 = 4;//6
var MAX_DETECTION_ZONE = 8;

var G_VIEW_CANVAS_X = 480;
var G_VIEW_CANVAS_Y = 320;
var G_CAM_VIDEO_RES_WIDTH = 1920;
var G_CAM_VIDEO_RES_HEIGHT = 1080;
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 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 points_array = new Array(MAX_SIZE_POINTS);

var g_zone_id = 0;
var g_enable_show_pixel = 0;

var g_mydirection = new Array(MAX_DETECTION_ZONE);

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

var data_speed = "";
var bbox_count = 0;

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

var clear_count = 0;	//sophia add 20201207

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 = 1;

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

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 (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({ 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({ 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,
    });

    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 (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({ 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({ 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,
    });

    disabelIteraction(rectangle2);

    return rectangle2;
}

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, {
            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, {
            left: 50,
            top: 50,
            width: 50,
            height: 50,
            fontFamily: 'helvetica', // 字型
            fontSize: 15, // 字体大小
            fontWeight: '', // 字体粗细
            shadow: { color: 'black', blur: 5 },
            fill: '#CCFF33'
        });
    }
    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, {
            left: r_left,
            top: r_top,
            width: r_width,
            height: r_height,
            fontFamily: 'helvetica', // 字型
            fontSize: 18, // 字体大小
            fontWeight: '900', // 字体粗细
            shadow: { color: 'black', blur: 5 },
            fill: '#ff8c00'
        });

    }
    else {
        textcontent = new fabric.Text(showtext, {
            left: 50,
            top: 50,
            width: 50,
            height: 50,
            fontFamily: 'helvetica', // 字型
            fontSize: 18, // 字体大小
            fontWeight: '900', // 字体粗细
            shadow: { color: 'black', blur: 5 },
            fill: '#ff8c00'
        });
    }
    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, {
            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, {
            left: 50,
            top: 50,
            width: 50,
            height: 50,
            fontFamily: 'helvetica', // 字型
            fontSize: 15, // 字体大小
            fontWeight: '', // 字体粗细
            shadow: { color: 'black', blur: 5 },
            fill: '#ff0000'
        });
    }
    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, {
            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, {
            left: 50,
            top: 50,
            width: 50,
            height: 50,
            fontFamily: 'helvetica', // 字型
            fontSize: 15, // 字体大小
            fontWeight: '', // 字体粗细
            shadow: { color: 'black', blur: 5 },
            fill: '#0000ff'
        });
    }
    textcontent.setControlsVisibility({
        bl: true,
        br: true,
        tl: true,
        tr: true,
        mt: true,
        mb: true,
        ml: true,
        mr: true,
    });

    disabelIteraction(textcontent);

    return textcontent;
}

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

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) {
        arrow.visible = false;
    }
    else*/
    {
        arrow.visible = true;
    }

    disabelIteraction(arrow);
    return arrow;
}

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

function createCanvasTrafficLight_speed(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
    });

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

    canvasTripwire1.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
    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, ""));
    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, ""));
    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, ""));
    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, ""));
    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, ""));
    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, ""));
    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, ""));
    canvasTripwire8.add(insertTextLabel_Orange(0, 0, 50, 50, ""));
}

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

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 max_size_of_points = 4;

    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.

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 = '#6c87d4';
        poly1.cornerColor = "rgba(108, 135, 212, 0.8)";

        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 = '#6c87d4';
        poly2.cornerColor = "rgba(108, 135, 212, 0.8)";

        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 = '#6c87d4';
        poly3.cornerColor = "rgba(108, 135, 212, 0.8)";

        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 = '#6c87d4';
        poly4.cornerColor = "rgba(108, 135, 212, 0.8)";

        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 = '#6c87d4';
        poly5.cornerColor = "rgba(108, 135, 212, 0.8)";

        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 = '#6c87d4';
        poly6.cornerColor = "rgba(108, 135, 212, 0.8)";

        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 = '#6c87d4';
        poly7.cornerColor = "rgba(108, 135, 212, 0.8)";

        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 = '#6c87d4';
        poly8.cornerColor = "rgba(108, 135, 212, 0.8)";

        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: 320,//window.innerHeight
        width: 480//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 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(border_line_1, border_line_2) {
    g_enable_show_pixel = 0;
    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]);
            }
        }
    }
    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]);
            }
        }
    }
    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]);
            }
        }
    }
    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]);
            }
        }
    }
    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]);
            }
        }
    }
    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]);
            }
        }
    }
    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]);
            }
        }
    }
    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]);
            }
        }
    }

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

    points_array = GetPointLocation(g_zone_id);

    var different_index = 0;
    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;

    //linelengths_list += linelength1.toFixed(2) + " px\n";
    //linelengths_list_2 += linelength2.toFixed(2) + " px\n";
    linelengths_list += "#1:" + border_line_1 + "\n";
    linelengths_list_2 += "#2:" + border_line_2 + "\n";
    linelengths_list_3 += "#1:" + border_line_1 + "\n";
    linelengths_list_4 += "#2:" + border_line_2 + "\n";

    //Edit_Arrow();

    if (g_zone_id === 0) {
        var different_index = 0;
        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;

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

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


        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_3));
        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_4));

    }
    else if (g_zone_id === 1) {
        var different_index = 0;
        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;

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

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

        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_3));
        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_4));

    }
    else if (g_zone_id === 2) {

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

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

        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_3));
        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_4));

    }
    else if (g_zone_id === 3) {

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

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

        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_3));
        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_4));

    }
    else if (g_zone_id === 4) {

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

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

        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_3));
        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_4));

    }
    else if (g_zone_id === 5) {

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

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

        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_3));
        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_4));

    }
    else if (g_zone_id === 6) {

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

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

        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_3));
        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_4));

    }
    else if (g_zone_id === 7) {

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

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

        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_3));
        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_4));

    }

    g_enable_show_pixel = 1;
}

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

function GetSpeed(speed_data) {

    if (canvasTripwire1 && canvasTripwire2 && canvasTripwire3 && canvasTripwire4 && canvasTripwire5 && canvasTripwire6 && canvasTripwire7 && canvasTripwire8 && g_enable_show_pixel == 1) {
        if (!!speed_data) {
            var datas;
            var ai_json;
            var complete_data = "";
            var n1 = -1, n2 = -1, n2_temp = -1;

            var max_protected_objects = g_max_protected_objects;
            if (g_enable_show_pixel === 1) {
                max_protected_objects = g_max_protected_objects + 4;
            }

            complete_data = complete_data.concat(speed_data);
            n1 = complete_data.indexOf('{"AiEngine"');

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

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

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

                var AI_fps = ai_json.AI_fps;
                localStorage.setItem('AI_fps', AI_fps);
                var red_light = ai_json.red_light;
                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) */
                {
                    //clear_count_2 = 0;

                    RefreshCanvasObject(max_protected_objects);
                }

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

                if (red_light == 1) {
                    canvasTripwire1.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString()));
                    canvasTripwire2.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString()));
                    canvasTripwire3.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString()));
                    canvasTripwire4.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString()));
                    canvasTripwire5.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString()));
                    canvasTripwire6.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString()));
                    canvasTripwire7.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString()));
                    canvasTripwire8.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString() + ",Red:" + red_light.toString()));
                }
                else {
                    canvasTripwire1.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString()));
                    canvasTripwire2.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString()));
                    canvasTripwire3.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString()));
                    canvasTripwire4.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString()));
                    canvasTripwire5.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString()));
                    canvasTripwire6.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString()));
                    canvasTripwire7.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString()));
                    canvasTripwire8.add(insertTextLabel_Red(10, MAX_HEIGHT - 25, 50, 50, "FPS:" + AI_fps.toString()));
                }

                for (var i = 0; i < bbox_count /*&& i <= 10*/; i++) {
                    if (ai_json.AiEngine[i]) {

                        if (ai_json.AiEngine[i].parent_idx == -1) {

                            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") {

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

                                        AssignPlateObject(ai_json, i, plate_name);
                                    }
                                }

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

                                if (x == 0 || y == 0 || w == 0 || h == 0 || text_y == 0)
                                    continue;

                                /*if (x * 0.25 <= 20) {
                                    x = 80;
                                }
                                else if (x * 0.25 >= 460) {
                                    x = 1840;
                                }

                                if (y * 0.3 <= 20) {
                                    y = 66;
                                }
                                else if (y * 0.3 >= 300) {
                                    y = 999;
                                }

                                if (x * 0.25 + w * 0.25 >= 460) {
                                    w = (460 - x * 0.25) * 4;
                                }

                                if (y * 0.3 + h * 0.3 >= 300) {
                                    h = (300 - y * 0.3) * 3.33;
                                }*/

                                text_y = y - 66;

                                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 (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 (localStorage.getItem('current_state_hide_or_open_label') != null && current_state_hide_or_open_label != localStorage.getItem('current_state_hide_or_open_label')) {
                                        current_state_hide_or_open_label = localStorage.getItem('current_state_hide_or_open_label');
                                    }

                                    if (localStorage.getItem('current_state_hide_or_open_direction') != null && current_state_hide_or_open_direction != localStorage.getItem('current_state_hide_or_open_direction')) {
                                        current_state_hide_or_open_direction = localStorage.getItem('current_state_hide_or_open_direction');
                                    }

                                    if (localStorage.getItem('current_state_hide_or_open_speed') != null && current_state_hide_or_open_speed != localStorage.getItem('current_state_hide_or_open_speed')) {
                                        current_state_hide_or_open_speed = localStorage.getItem('current_state_hide_or_open_speed');
                                    }

                                    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,";
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    //label_word += ", " + color;

                                    if (behavior_id <= 0) {
                                        canvasTripwire1.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name, number_row));
                                        canvasTripwire2.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name, number_row));
                                        canvasTripwire3.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name, number_row));
                                        canvasTripwire4.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name, number_row));
                                        canvasTripwire5.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name, number_row));
                                        canvasTripwire6.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name, number_row));
                                        canvasTripwire7.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name, number_row));
                                        canvasTripwire8.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name, number_row));
                                    }
                                    else {
                                        canvasTripwire1.add(insertTrafficLightRectangle_Red(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name));
                                        canvasTripwire2.add(insertTrafficLightRectangle_Red(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name));
                                        canvasTripwire3.add(insertTrafficLightRectangle_Red(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name));
                                        canvasTripwire4.add(insertTrafficLightRectangle_Red(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name));
                                        canvasTripwire5.add(insertTrafficLightRectangle_Red(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name));
                                        canvasTripwire6.add(insertTrafficLightRectangle_Red(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name));
                                        canvasTripwire7.add(insertTrafficLightRectangle_Red(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name));
                                        canvasTripwire8.add(insertTrafficLightRectangle_Red(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, plate_name));
                                    }

                                    if (behavior_id >= 1) {
                                        if (current_state_hide_or_open_label) {
                                            //console.log("Behavior occured: " + behavior_id.toString() + "; ID: " + obj_tracking_id.toString() + "; zone: " + detection_zone_id.toString());
                                            canvasTripwire1.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire2.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire3.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire4.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire5.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire6.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire7.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire8.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 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";*/
                                    }
                                    else {
                                        if (current_state_hide_or_open_label) {
                                            canvasTripwire1.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire2.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire3.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire4.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire5.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire6.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire7.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                            canvasTripwire8.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, label_word));
                                        }
                                    }
                                }
                            }

                            plate_count++;
                            plate_idx++;
                        }
                    }
                }

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

                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);
    /*if (x * 0.25 <= 20) {
        x = 80;
    }
    else if (x * 0.25 >= 460) {
        x = 1840;
    }

    if (y * 0.3 <= 20) {
        y = 66;
    }
    else if (y * 0.3 >= 300) {
        y = 999;
    }

    if (x * 0.25 + w * 0.25 >= 460) {
        w = parseInt((460 - x * 0.25) * 4, 10);
    }

    if (y * 0.3 + h * 0.3 >= 300) {
        h = parseInt((300 - y * 0.3) * 3.33, 10);
    }*/

    text_y = y - 66;

    var area_name = "";
    var country_name = "";
    var out_label = "";
    var center_direction = ai_json.AiEngine[i_index].center_direction;
    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);


        out_label = plate_name /*+ ", " + area_name + " " + country_name + ", " + ai_json.AiEngine[i_index].confidence.toString() + "%"*/;
        out_label += ", ID: " + obj_tracking_id /*+ Concat_obj_dwell_time(obj_dwell_time)*/;
    }
    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);

        out_label = plate_name /*+ ", " + ai_json.AiEngine[i_index].confidence.toString() + "%"*/;
        out_label += ", ID: " + obj_tracking_id /*+ Concat_obj_dwell_time(obj_dwell_time)*/;
    }

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

    if (canvasTripwire1 && canvasTripwire2 && canvasTripwire3 && canvasTripwire4 && canvasTripwire5 && canvasTripwire6 && canvasTripwire7 && canvasTripwire8) {
        canvasTripwire1.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, "", 1));
        canvasTripwire2.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, "", 1));
        canvasTripwire3.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, "", 1));
        canvasTripwire4.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, "", 1));
        canvasTripwire5.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, "", 1));
        canvasTripwire6.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, "", 1));
        canvasTripwire7.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 1, 1, "", 1));
        canvasTripwire8.add(insertTrafficLightRectangle(x * 0.25, y * 0.3, w * 0.25, h * 0.3, 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) {
                canvasTripwire1.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire2.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire3.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire4.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire5.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire6.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire7.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire8.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
            }
            else {
                canvasTripwire1.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire2.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire3.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire4.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire5.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire6.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire7.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire8.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
            }
        }
        else {
            if (behavior_id >= 1) {
                canvasTripwire1.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire2.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire3.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire4.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire5.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire6.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire7.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire8.add(insertTextLabel_Red(x * 0.25, text_y * 0.3, 50, 50, out_label));
            }
            else {
                canvasTripwire1.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire2.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire3.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire4.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire5.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire6.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire7.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
                canvasTripwire8.add(insertTextLabel(x * 0.25, text_y * 0.3, 50, 50, out_label));
            }
        }
    }
}

function RenderAllCanvas() {
    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();
    }
}

function RefreshCanvasObject(max_protected_objects) {    
    if (typeof canvasTripwire1 !== 'undefined') {
        //Clear all objects
        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";
    }

    if (typeof canvasTripwire2 !== 'undefined') {
        //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";
    }

    if (typeof canvasTripwire3 !== 'undefined') {
        //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";
    }

    if (typeof canvasTripwire4 !== 'undefined') {
        //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";
    }

    if (typeof canvasTripwire5 !== 'undefined') {
        //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";
    }

    if (typeof canvasTripwire6 !== 'undefined') {
        //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";
    }

    if (typeof canvasTripwire7 !== 'undefined') {
        //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";
    }

    if (typeof canvasTripwire8 !== 'undefined') {
        //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";
    }
}

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

    return arr_url;
}

var g_Canvas_BackgroundImage = null;
var g_h = -1;
var g_m = -1;
var g_s = -1;
var g_ms = -1;

var g_time_canvas = 83;
var g_imgUrl = "";
var g_speed = 99999;
var g_times_update_canvas = 0;
var g_avg_speed = 7000;
var g_count_frame = 0;

function update_canvas() {
    clearInterval(g_Canvas_BackgroundImage);
    g_Canvas_BackgroundImage = setInterval(function update_canvas_set_interval() {
        var current_page = localStorage.getItem('current_page');
        if (current_page === 'speed_index') {

            //g_times_update_canvas++;
            g_count_frame++;

            if (data_speed != sessionStorage.getItem('getalarmmotion_data')) {
                data_speed = sessionStorage.getItem('getalarmmotion_data');
                GetSpeed(data_speed);
            }

            if (g_count_frame % 2 == 0) {
                g_count_frame = 0;
                g_times_update_canvas++;
                var win_width = G_VIEW_CANVAS_X, win_height = G_VIEW_CANVAS_Y;

                var NowDate = new Date();
                var h = NowDate.getHours();
                var m = NowDate.getMinutes();
                var s = NowDate.getSeconds();
                var ms = NowDate.getMilliseconds();


                if (g_h == -1 || g_m == -1 || g_s == -1 || g_ms == -1) {
                    g_h = h;
                    g_m = m;
                    g_s = s;
                    g_ms = ms;
                }

                var imgUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/getimage_ori?' + 'speed_index_' + h + '_' + m + '_' + s + '_' + ms;
                if (localStorage.getItem("Radar_recognition") == "Yes") {
                    imgUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/Aida/images/gray_background.png';
                }
                else if (localStorage.getItem("ToF_recognition") === "Yes") {
                    imgUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/getimage_ori?' + 'speed_index_' + h + '_' + m + '_' + s + '_' + ms;
                }
                g_imgUrl = imgUrl;

                try {
                    fabric.Image.fromURL(imgUrl, function (img) {
                        if (img != null && img._element != null) {
                            img.set({
                                scaleX: win_width / img.width,
                                scaleY: win_height / img.height,
                            });

                            if (current_dzone === "dzone_1" && count_zone >= 1) {
                                document.getElementById("CanvasTripwire1").style.visibility = "visible";
                                document.getElementById("CanvasTripwire2").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire3").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire4").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire5").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire6").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire7").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire8").style.visibility = "hidden";

                                document.getElementsByClassName("div-a")[0].style.visibility = "visible";
                                document.getElementsByClassName("div-b")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-c")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-d")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-e")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-f")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-g")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-h")[0].style.visibility = "hidden";

                                canvasTripwire1.setBackgroundImage(img, canvasTripwire1.renderAll.bind(canvasTripwire1));
                            }
                            else if (current_dzone === "dzone_2" && count_zone >= 2) {
                                document.getElementById("CanvasTripwire1").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire2").style.visibility = "visible";
                                document.getElementById("CanvasTripwire3").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire4").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire5").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire6").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire7").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire8").style.visibility = "hidden";

                                document.getElementsByClassName("div-a")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-b")[0].style.visibility = "visible";
                                document.getElementsByClassName("div-c")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-d")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-e")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-f")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-g")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-h")[0].style.visibility = "hidden";

                                canvasTripwire2.setBackgroundImage(img, canvasTripwire2.renderAll.bind(canvasTripwire2));
                            }
                            else if (current_dzone === "dzone_3" && count_zone >= 3) {
                                document.getElementById("CanvasTripwire1").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire2").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire3").style.visibility = "visible";
                                document.getElementById("CanvasTripwire4").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire5").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire6").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire7").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire8").style.visibility = "hidden";

                                document.getElementsByClassName("div-a")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-b")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-c")[0].style.visibility = "visible";
                                document.getElementsByClassName("div-d")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-e")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-f")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-g")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-h")[0].style.visibility = "hidden";

                                canvasTripwire3.setBackgroundImage(img, canvasTripwire3.renderAll.bind(canvasTripwire3));
                            }
                            else if (current_dzone === "dzone_4" && count_zone >= 4) {
                                document.getElementById("CanvasTripwire1").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire2").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire3").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire4").style.visibility = "visible";
                                document.getElementById("CanvasTripwire5").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire6").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire7").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire8").style.visibility = "hidden";

                                document.getElementsByClassName("div-a")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-b")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-c")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-d")[0].style.visibility = "visible";
                                document.getElementsByClassName("div-e")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-f")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-g")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-h")[0].style.visibility = "hidden";

                                canvasTripwire4.setBackgroundImage(img, canvasTripwire4.renderAll.bind(canvasTripwire4));
                            }
                            else if (current_dzone === "dzone_5" && count_zone >= 5) {
                                document.getElementById("CanvasTripwire1").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire2").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire3").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire4").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire5").style.visibility = "visible";
                                document.getElementById("CanvasTripwire6").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire7").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire8").style.visibility = "hidden";

                                document.getElementsByClassName("div-a")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-b")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-c")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-d")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-e")[0].style.visibility = "visible";
                                document.getElementsByClassName("div-f")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-g")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-h")[0].style.visibility = "hidden";

                                canvasTripwire5.setBackgroundImage(img, canvasTripwire5.renderAll.bind(canvasTripwire5));
                            }
                            else if (current_dzone === "dzone_6" && count_zone >= 6) {
                                document.getElementById("CanvasTripwire1").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire2").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire3").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire4").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire5").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire6").style.visibility = "visible";
                                document.getElementById("CanvasTripwire7").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire8").style.visibility = "hidden";

                                document.getElementsByClassName("div-a")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-b")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-c")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-d")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-e")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-f")[0].style.visibility = "visible";
                                document.getElementsByClassName("div-g")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-h")[0].style.visibility = "hidden";

                                canvasTripwire6.setBackgroundImage(img, canvasTripwire6.renderAll.bind(canvasTripwire6));
                            }
                            else if (current_dzone === "dzone_7" && count_zone >= 7) {
                                document.getElementById("CanvasTripwire1").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire2").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire3").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire4").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire5").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire6").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire7").style.visibility = "visible";
                                document.getElementById("CanvasTripwire8").style.visibility = "hidden";

                                document.getElementsByClassName("div-a")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-b")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-c")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-d")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-e")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-f")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-g")[0].style.visibility = "visible";
                                document.getElementsByClassName("div-h")[0].style.visibility = "hidden";

                                canvasTripwire7.setBackgroundImage(img, canvasTripwire7.renderAll.bind(canvasTripwire7));
                            }
                            else if (current_dzone === "dzone_8" && count_zone >= 8) {
                                document.getElementById("CanvasTripwire1").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire2").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire3").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire4").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire5").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire6").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire7").style.visibility = "hidden";
                                document.getElementById("CanvasTripwire8").style.visibility = "visible";

                                document.getElementsByClassName("div-a")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-b")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-c")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-d")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-e")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-f")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-g")[0].style.visibility = "hidden";
                                document.getElementsByClassName("div-h")[0].style.visibility = "visible";

                                canvasTripwire8.setBackgroundImage(img, canvasTripwire8.renderAll.bind(canvasTripwire8));
                            }


                            if ((h * 3600 + m * 60 + s + ms / 1000) > (g_h * 3600 + g_m * 60 + g_s + g_ms / 1000)) {
                                g_h = h;
                                g_m = m;
                                g_s = s;
                                g_ms = ms;
                            }

                            if ((g_h * 3600 + g_m * 60 + g_s + g_ms / 1000) - (h * 3600 + m * 60 + s + ms / 1000) >= 3600) {
                                g_h = h;
                                g_m = m;
                                g_s = s;
                                g_ms = ms;
                            }

                            img = null;
                        }
                    });
                }
                catch (e) {
                    //console.log(e);
                }
                imgUrl = null;
                if (g_times_update_canvas >= 10) {
                    g_times_update_canvas = 0;
                    if (localStorage.getItem('AI_fps') != null) {
                        g_time_canvas = 1000 / localStorage.getItem('AI_fps') / 2;
                        clearInterval(g_Canvas_BackgroundImage);
                        g_Canvas_BackgroundImage = setInterval(update_canvas_set_interval, g_time_canvas);
                    }
                }
            }
        }
    }, g_time_canvas);
}

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