<!DOCTYPE html>
 <head>
    <meta charset="utf-8">
    <title>M2Diagram add marker demo</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://diagram.measuresquare.com/scripts/m2diag.js"></script>
 </head>
 <body>
    <div style="text-align:center;margin-top:20px;">
        <canvas id="canvas" style="width:750px;height:450px;border:1px solid #333;"></canvas>
    </div>
    <script>
        let roomStatusGreen = true;
        const markerDict = new Object();
        let options = {
            apiKey: 'YOUR_PUBLIC_KEY_HERE', toolbar: {
                zoomIn: true,
                zoomOut: true,
                resetView: true,
                switch3d: true
            }, viewSetting: {
                showImage: true,
                showLabel: true,
                showDimension: false,
                showWallSection: false,
                showAnnotation: false
            },
            eventState: {
                 onSelectShape: function (event, shape, point) {
                    if (shape != null) {
                        console.log(point);
                        if (shape.id in markerDict) {
                            setModalAttr(shape.id);
                            if (markerDict[shape.id]['type'] == 'controllable') {
                                $('#on-off-button').show();
                            } else if (markerDict[shape.id]['type'] == 'temperature'){
                                $('#on-off-button').hide();
                                console.log(shape.id);
                                console.log(shape.parentShape.id);
                                let prodData = {
                                    uniqueId: 'NEW_PRODUCT_ID'};
                                prodData['color'] = "#FFFF00";
                                diag.replaceProduct(shape.parentShape.id, prodData);
                            } else {
                                $('#on-off-button').hide();
                            }
                            $('#myModal').modal('show');
                            
                        } else {
                            /*if (shape.id == "itSgEuCr") {
                                $('#roomTempModal').modal('show');
                            }*/
                        }
                    }
                },
                onTouchEnd: function (event, shape, points) {
                    if (shape != null) {
                        console.log(shape.id)
                    }
                }
            }
        };
        
        function createSensor(object) {
            var sensorObject = {
                "id": object['id'],
                "name": object['name'],
                "location": object['location'],
                "xPos": object['xPos'],
                "yPos": object['yPos'],
                "type": object['type'],
                "url": object['url'],
                "status": 'Inactive'
            };
            return sensorObject;
        }
        
        let diag = new m2Diag.Engine('canvas', options);
        let projectId = 'YOUR_PROJECT_ID';
        diag.loadCloudData(projectId);
        diag.state.onDataLoaded = function () {
            const sensorArray = [
                { 'id': 'abc123', 'name': 'Motion Sensor', 'location': 'rm00', 'xPos': 6067.275809315451, 'yPos': 125.84839760198304, 'type': 'motion', 'url': 'https://url.com' },
                { 'id': 'abc234', 'name': 'Door Sensor', 'location': 'rm00', 'xPos': -389.6400264645377, 'yPos': 1824.069385933409, 'type': 'door', 'url': 'https://url.com' },
                { 'id': 'abc345', 'name': 'Leak Sensor', 'location': 'rm00', 'xPos': -9334.830745301202, 'yPos': -1189.5880605934663, 'type': 'moisture', 'url': 'https://url.com' },
                { 'id': 'abc456', 'name': 'Philips Hue Bulb 1', 'location': 'rm00', 'xPos': -6815.0587118260855, 'yPos': 4065.4939773226865, 'type': 'controllable', 'url': 'https://url.com' },
                { 'id': 'abc567', 'name': 'Air Vent Bdrm 2', 'location': 'rm00', 'xPos': -389.6400264645377, 'yPos': -1189.5880605934663, 'type': 'airvent', 'url': 'https://url.com' }
            ];
            for (i = 0; i < sensorArray.length; i++) {
                let sensor = createSensor(sensorArray[i]);
                let xPos = sensor['xPos'];
                let yPos = sensor['yPos'];
                //console.log("Coordinates" + xPos + ", " + yPos);
                var point = new m2Diag.Point();
                point.x = xPos;
                point.y = yPos;
                var marker;
                if (sensor['type'] == 'moisture') {
                    marker = diag.addMarker(point, 'MOISTURE_IMAGE');
                    marker.moveable = true;
                } else if (sensor['type'] == 'motion') {
                    marker = diag.addMarker(point, 'MOTION_IMAGE');
                    marker.moveable = true;
                } else if (sensor['type'] == 'door') {
                    marker = diag.addMarker(point, 'DOOR_IMAGE');
                    marker.moveable = true;
                } else if (sensor['type'] == 'controllable') {
                    marker = diag.addMarker(point, 'CONTROLLABLE_DEVICE_IMAGE');
                    marker.moveable = true;
                } else if (sensor['type'] == 'airvent') {
                    marker = diag.addMarker(point, 'AIR_VENT_IMAGE');
                    marker.moveable = true;
                }
                markerDict[marker.id] = sensor;
            }
            diag.refresh();
            
            function updateMarkerStatus(oldMarkerId) {
                let samePoint = new m2Diag.Point();
                samePoint.x = markerDict[oldMarkerId]['xPos']
                samePoint.y = markerDict[oldMarkerId]['yPos']

                if (markerDict[oldMarkerId]['status'] == 'Inactive') {
                    diag.removeMarker(oldMarkerId)
                    var newMarker = generateChangeStatusMarker(samePoint, markerDict[oldMarkerId]['type'],'Active');
                    fixedMarkerKey = newMarker.id;
                    markerDict[newMarker.id] = markerDict[oldMarkerId];
                    markerDict[newMarker.id]['status'] = 'Active';
                    $('#modal-sensor-status ').text(markerDict[newMarker.id]['status']);
                    delete markerDict[oldMarkerId];

                } else {
                    diag.removeMarker(oldMarkerId)
                    var newMarker = generateChangeStatusMarker(samePoint, markerDict[oldMarkerId]['type'], 'Inactive');
                    fixedMarkerKey = newMarker.id;
                    markerDict[newMarker.id] = markerDict[oldMarkerId];
                    markerDict[newMarker.id]['status'] = 'Inactive';
                    $('#modal-sensor-status ').text(markerDict[newMarker.id]['status']);
                    delete markerDict[oldMarkerId];
                }
                diag.refresh();
            }
            
            function generateChangeStatusMarker(point, type, changeToStatus) {
                var newMarker;
                if (type == 'controllable') {
                    if (changeToStatus == 'Inactive') {
                        newMarker = diag.addMarker(point, 'CONTROLLABLE_DEVICE_IMAGE');
                        document.getElementById("audio-light-switch").play();
                    } else {
                        newMarker = diag.addMarker(point, 'CONTROLLABLE_DEVICE_ACTIVE_IMAGE');
                        document.getElementById("audio-light-switch").play();
                    }
                } else if (type == 'motion'){
                    if (changeToStatus == 'Inactive') {
                        newMarker = diag.addMarker(point, 'MOTION_IMAGE');
                    } else {
                        newMarker = diag.addMarker(point, 'MOTION_ACTIVE_IMAGE');
                    }
                } else if (type == 'door'){
                    if (changeToStatus == 'Inactive') {
                        newMarker = diag.addMarker(point, 'DOOR_CLOSE_IMAGE');
                        document.getElementById("audio-door-close").play();
                    } else {
                        newMarker = diag.addMarker(point, 'DOOR_IMAGE');
                        document.getElementById("audio-door-open").play();
                    }
                } else if (type == 'moisture'){
                    if (changeToStatus == 'Inactive') {
                        newMarker = diag.addMarker(point, 'MOISTURE_IMAGE');
                    } else {
                        newMarker = diag.addMarker(point, 'MOISTURE_ACTIVE_IMAGE');
                    }
                } else if (type == 'airvent'){
                    if (changeToStatus == 'Inactive') {
                        newMarker = diag.addMarker(point, 'AIR_VENT_IMAGE');
                    } else {
                        newMarker = diag.addMarker(point, 'AIR_VENT_ACTIVE_IMAGE');
                    }
                }
                return newMarker;
            }
            $("#on-off-btn-2").click(function () {
                var oldMarkerId = getMarkerIdByType('controllable');
                updateMarkerStatus(oldMarkerId);
            });

            $("#trigger-moisture-btn").click(function () {
                var oldMarkerId = getMarkerIdByType('moisture');
                updateMarkerStatus(oldMarkerId);
            });

            $("#trigger-door-btn").click(function () {
                var oldMarkerId = getMarkerIdByType('door');
                updateMarkerStatus(oldMarkerId);
            });

            $("#trigger-motion-btn").click(function () {
                var oldMarkerId = getMarkerIdByType('motion');
                updateMarkerStatus(oldMarkerId);
            });

            $("#trigger-airvent-btn").click(function () {
                var oldMarkerId = getMarkerIdByType('airvent');
                updateMarkerStatus(oldMarkerId);
            });

            $("#add-temp-btn").click(function () {
                let originalState = diag.state;
                let ms = new m2Diag.MoveAddMarkerState(diag, 'content/temperature.png');
                diag.state = ms;

                // if you want to get the new added marker instance, bind the onMarkerAdded event
                ms.onMarkerAdded = function (marker) {
                    marker.moveable = true;
                    console.log(marker);
                    console.log(marker.parentShape.id);
                    let tempObject = { 'id': 'abc678', 'name': 'Temperature Sensor', 'location': 'rm00', 'xPos': marker.position._x, 'yPos': marker.position._y, 'type': 'temperature', 'url': 'https://url.com' };
                    let tempSensor = createSensor(tempObject);
                    markerDict[marker.id] = tempSensor;

                    let prodData = {
                        uniqueId: 'NEW_PRODUCT_ID'
                    };
                    if (roomStatusGreen) {
                        prodData['color'] = "#4fa12a";
                        diag.replaceProduct(marker.parentShape.id, prodData);
                        roomStatusGreen = false;
                    } else {
                        prodData['color'] = "#d12626";
                        diag.replaceProduct(marker.parentShape.id, prodData);
                        roomStatusGreen = true;
                    }
                    
                    diag.state = originalState;
                }
                // do this when right-click to cancel
                ms.onMarkerCanceled = function () {
                    diag.state = originalState;
                }
            });
            
        }
        function setModalAttr(shapeId) {
            $('#myModal .modal-title ').text(markerDict[shapeId]['name']);
            $('#myModal').attr('name', shapeId);
            $('#modal-sensor-type').text(markerDict[shapeId]['type']);
            $('#modal-sensor-location ').text(markerDict[shapeId]['location']);
            $('#modal-sensor-status ').text(markerDict[shapeId]['status']);
        }
        
        function getMarkerIdByType(type) {
            for (var markerId in markerDict) {
                if (markerDict[markerId]['type'] == type) {
                    return markerId;
                }
            }
            return null;
        }
        
     </script>
     <button class="btn btn-default" id="on-off-btn-2" style="display: inline-block;">Smart Bulb</button>
     <button class="btn btn-default" id="trigger-moisture-btn" style="display: inline-block;">Moisture</button>
     <button class="btn btn-default" id="trigger-door-btn" style="display: inline-block;">Door</button>
     <button class="btn btn-default" id="trigger-motion-btn" style="display: inline-block;">Motion</button>
     <button class="btn btn-default" id="trigger-room-color" style="display: inline-block;">Room Color Change</button>
     <button class="btn btn-default" id="trigger-airvent-btn" style="display: inline-block;">Air Vent Open/Close</button>
     <button class="btn btn-default" id="add-temp-btn" style="display: inline-block;">Click to Add Temp Sensor</button>
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Sensor Name</h4>
                    <button id="on-off-button">On/Off</button>
                </div>
                <div class="modal-body">
                    <p class="sensor-detail"><h5>Type:</h5><span id="modal-sensor-type">NaN</span></p>
                    <p class="sensor-detail">Location:<span id="modal-sensor-location">NaN</span></p>
                    <p class="sensor-detail">Status:<span id="modal-sensor-status">NaN</span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
    <div id="roomTempModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title">Temperature:<input type="text" id="input-temp" name="input-temp">
                    </h3>
                    <p><a class="btn btn-default" id="submit-temp-btn" style="margin:10px">Submit Temperature &raquo;</a></p>
                </div>
                <div class="modal-body">
                    <p class="sensor-detail">Location:<span id="modal-sensor-location">Bdrm 1</span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
    <audio preload="auto" id="audio-door-open" src="content/audio_door_open.mp3" type="audio/mpeg">
        Your browser does not support the <code>audio</code> element.
    </audio>
    <audio preload="auto" id="audio-door-close" src="content/audio_door_close.mp3" type="audio/mpeg">
        Your browser does not support the <code>audio</code> element.
    </audio>
    <audio preload="auto" id="audio-light-switch" src="content/audio_light_switch.mp3" type="audio/mpeg">
        Your browser does not support the <code>audio</code> element.
    </audio>
  </body>
</html>