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 = 6;
var MAX_DETECTION_ZONE = 8;

var G_VIEW_CANVAS_X = 480;
var G_VIEW_CANVAS_Y = 320;

var MAX_HEIGHT = G_VIEW_CANVAS_Y;
var MAX_WIDTH = G_VIEW_CANVAS_X;

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

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 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) {
    var rectangle;

    var color_type = '#00FF00';

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

        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) {
    var rectangle2;
    if ((r_left != null) && (r_top != null) && (r_width != null) && (r_height != null)) {

        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: 22, // 字体大小
            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: 22, // 字体大小
            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 createCanvasTrafficLight() {
    canvasTripwire = new fabric.Canvas('CanvasTripwire', {
        height: 320,//window.innerHeight
        width: 480//window.innerWidth
    });
    canvasTripwire.requestRenderAll();
}

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

}

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

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

    return true;
}

function GetMaxWidth() {
    return MAX_WIDTH;
}

function GetMaxHeight() {
    return MAX_HEIGHT;
}
// define a function that can keep the polygon in the same position when we change its
// width/height/top/left.
function anchorWrapper1(anchorIndex, fn) {
    return function (eventData, transform, x, y) {
        var fabricObject = transform.target,
            absolutePoint = fabric.util.transformPoint({
                x: (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x),
                y: (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y),
            }, fabricObject.calcTransformMatrix()),
            actionPerformed = fn(eventData, transform, x, y),
            newDim = fabricObject._setPositionDimensions({}),
            polygonBaseSize = fabricObject._getNonTransformedDimensions(),
            newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x,
            newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y;
        //fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);
        fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);

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

        different_index = anchorIndex;
        //show_pixels_for_zone();

        return actionPerformed;
    }
}

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

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


        different_index = anchorIndex;
        //show_pixels_for_zone();

        return actionPerformed;
    }
}

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

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

        different_index = anchorIndex;
        //show_pixels_for_zone();

        return actionPerformed;
    }
}

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

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

        different_index = anchorIndex;
        //show_pixels_for_zone();

        return actionPerformed;
    }
}

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

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

        different_index = anchorIndex;
        //show_pixels_for_zone();

        return actionPerformed;
    }
}

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

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

        different_index = anchorIndex;
        //show_pixels_for_zone();

        return actionPerformed;
    }
}

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

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

        different_index = anchorIndex;
        //show_pixels_for_zone();

        return actionPerformed;
    }
}

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

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

        different_index = anchorIndex;
        //show_pixels_for_zone();

        return actionPerformed;
    }
}


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


function get_check_edit1() {
    return check_edit1;
}

function get_check_edit2() {
    return check_edit2;
}

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

function get_check_edit5() {
    return check_edit5;
}

function get_check_edit6() {
    return check_edit6;
}

function get_check_edit7() {
    return check_edit7;
}

function get_check_edit8() {
    return check_edit8;
}

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

    poly1.edit = !poly1.edit;
    if (poly1.edit) {
        var lastControl1 = poly1.points.length - 1;
        poly1.cornerStyle = 'circle';
        poly1.cornerColor = '#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 RenderAllCanvas() {
    if (canvasTripwire) {
        canvasTripwire.renderAll();
    }
    if (canvasTripwire1) {
        canvasTripwire1.renderAll();
    }
    if (canvasTripwire2) {
        canvasTripwire2.renderAll();
    }
    if (canvasTripwire3) {
        canvasTripwire3.renderAll();
    }
    if (canvasTripwire4) {
        canvasTripwire4.renderAll();
    }

    if (canvasTripwire5) {
        canvasTripwire5.renderAll();
    }
    if (canvasTripwire6) {
        canvasTripwire6.renderAll();
    }
    if (canvasTripwire7) {
        canvasTripwire7.renderAll();
    }
    if (canvasTripwire8) {
        canvasTripwire8.renderAll();
    }

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

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

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

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


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

    return arr_url;
}