<%@ Page Title="" Language="C#" MasterPageFile="~/IronIntelMasterPage.master" AutoEventWireup="true" CodeFile="FITracker.aspx.cs" Inherits="FITracker" %>

<asp:Content ID="Content1" ContentPlaceHolderID="holder_head" runat="Server">
    <link href="css/jquery.datetimepicker.css" rel="stylesheet" />
    <style type="text/css">
        .itemselcted {
            background-color: #ccc;
        }

        .itemhidden {
            display: none;
        }

        .itemsuggested {
            background-color: #ffff99;
        }

        #tbMachineTypes tbody tr:hover {
            cursor: default;
            background: #ddd;
        }

        #tbodyAssigned tr:hover {
            cursor: default;
            background: #ddd;
        }

        #tbodyUnassigned tr:hover {
            cursor: default;
            background: #ddd;
        }

        #tbodySelected tr:hover {
            cursor: default;
            background: #ddd;
        }

        #contentctrl {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .float_left {
            float: left;
        }

        .function_bar {
            float: right;
        }

        .user_main {
            padding: 0 4px;
        }

        #dialog_user_randompass {
            width: auto;
            height: 16px;
            margin: 3px 4px 0 4px;
        }

        .msgdiv {
            padding-bottom: 10px;
        }

        .msgtime {
            padding-left: 10px;
            padding-right: 10px;
            margin-bottom: 2px;
        }

        .msgself {
            white-space: pre-wrap;
            max-width: 240px;
            border-radius: 5px;
            padding-top: 8px;
            padding-bottom: 8px;
            padding-right: 20px;
            padding-left: 20px;
            display: inline-block;
            margin-right: 10px;
            background-color: #9eea6a;
            text-align: left;
        }

        .msgother {
            white-space: pre-wrap;
            max-width: 240px;
            border-radius: 5px;
            padding-top: 8px;
            padding-bottom: 8px;
            padding-right: 20px;
            padding-left: 20px;
            display: inline-block;
            margin-left: 10px;
            background-color: white;
        }

        .locicon:before {
            padding-right: 2px;
            font-family: 'FontAwesome';
            color: rgb(123,28,33);
            content: '\f3c5';
        }

        .jsicon:before {
            padding-right: 2px;
            font-family: 'FontAwesome';
            color: rgb(123,28,33);
            content: '\f312';
        }

        .deviceitem {
            padding-left: 15px;
            padding-right: 10px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
        }

            .deviceitem:hover {
                background-color: #cbcbcb;
            }

        .deviceselected {
            background-color: #e0e0e0;
        }

        .dialogspanbtn {
            font-size: 14px;
            font-weight: normal;
            font-family: 'CalciteWebCoreIcons', 'Fontawesome';
            cursor: pointer;
            background: rgb(249, 189, 117);
            padding: 2px;
        }

        .dialogedit:before {
            content: '\e61b';
        }


        #basemapImg {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-repeat: no-repeat;
            background-position: center center;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
        }

        #basemapTitle {
            position: absolute;
            z-index: 2;
            bottom: 0px;
            width: 90%;
            color: #4c4c4c;
            margin: 0;
            font-size: 10px;
            line-height: 12px;
            display: block;
            padding: 2px 5%;
            background: #fff;
            background: rgba(255, 255, 255, 0.80);
            -webkit-border-radius: 0 0 5px 5px;
            -moz-border-radius: 0 0 5px 5px;
            -o-border-radius: 0 0 5px 5px;
            border-radius: 0 0 5px 5px;
            text-align: center;
        }

        #basemapgalleryDiv {
            position: absolute;
            right: 15px;
            top: 35px;
            z-index: 199;
            background-color: #EFEFEF;
            height: 75px;
            width: 75px;
            border: solid 1px #57585A;
            border-radius: 5px;
            padding: 1px;
        }

        #basemapGallery {
            position: absolute;
            right: 15px;
            top: 35px;
            width: 370px;
            height: 120px;
            overflow: auto;
            display: none;
            z-index: 200;
            background-color: #EFEFEF;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/spectrum.css?v=1" />
    <script src="js/spectrum.js?v=1" type="text/javascript"></script>
    <script src="js/jquery.datetimepicker.full.js"></script>
    <script src="<%=GetFileUrlWithVersion("js/vue.min.js")%>"></script>
    <script>Vue.config.productionTip = false; Vue.config.silent = true;</script>
    <link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/css/esri.css" />
    <script src="https://js.arcgis.com/3.44"></script>
    <script>
        _network.trackerquery = function (method, param, callback, error, nolog) {
            _network.request("FITracker.aspx?tp=ashx", -1, method, param, callback, error, nolog);
        }

        var _allDevices;
        var deviceid;
        var assetid;
        var lastmsgid = -1;
        var devicevm;
        var deviceinfovm;

        function OnRefresh() {
            showloading(true);
            _network.trackerquery("GetTrackers", "", function (data) {
                showloading(false);
                _allDevices = data;
                showDeviceList(_allDevices);
            }, function (err) {
                showloading(false);
            });
        }

        function showDeviceList(data) {
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                for (var j in r) {
                    if (j === "DeviceName" && r["DeviceName"] === "") {
                        r["DeviceName"] = r["DeviceID"];
                        break;
                    }
                }
            }
            //devicevm.reload([]);
            devicevm.reload(data);
        }

        function deviceChanged(e, newevice) {
            var t = $(e.target);
            t.parent().parent().find(".deviceselected").removeClass("deviceselected");
            t.addClass("deviceselected");
            if (newevice) {
                deviceid = newevice.DeviceID;
                assetid = newevice.AssetID;
                lastmsgid = -1;
                $("#msgctrl").empty();
                loadTracker();
                deviceinfovm.reload(newevice);
            }
        }

        function OnEditAccuracy() {
            if (deviceid == undefined || deviceid <= 0) return;
            showmaskbg(true);
            $('#dialog_accuracy')
                .attr('act', 'add')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_accuracy').height()) / 3,
                    'left': (document.documentElement.clientWidth - $('#dialog_accuracy').width()) / 2
                })
                .showDialogfixed();
            $('#dialog_accuracyvalue').val($("#txtAccuracy").val()).select();
        }

        function SaveAccuracy() {
            if (deviceid == undefined || deviceid <= 0) return;

            var accuracy = $("#dialog_accuracyvalue").val();
            if (accuracy !== "" && isNaN(accuracy)) {
                showAlert(GetTextByKey("P_M3_ACCURACYFORMATERROR", 'Accuracy format error.'), GetTextByKey("P_M3_EDITACCURACY", "Edit Accuracy"));
                return false;
            }
            if (eval(accuracy) < 0) {
                showAlert(GetTextByKey("P_M3_ACCURACYCANNOTBELESSTHAN0", 'Accuracy cannot be less than 0.'), GetTextByKey("P_M3_EDITACCURACY", "Edit Accuracy"));
                return false;
            }
            var note = $.trim($('#dialog_accuracynote').val());

            var param = JSON.stringify([deviceid, accuracy, note]);
            param = htmlencode(param);
            _network.trackerquery("ChangeAcceptableAccuracy", param, function (data) {
                if (data !== '') {
                    showAlert(data, GetTextByKey("P_M3_SENDMESSAGE", 'Send Message'));
                }
                else {
                    $("#txtAccuracy").val(accuracy);
                    deviceinfovm.device.AcceptableAccuracy = accuracy;
                    $('#dialog_accuracy').hideDialog();
                }
            }, function (err) {
                showAlert(GetTextByKey("P_M3_FAILEDTOSENDMESSAGE", 'Failed to send message.'), GetTextByKey("P_M3_SENDMESSAGE", 'Send Message'));
            });
        }

        function loadTracker() {
            getMessages();
            execIframeFunc("reloaddata", [assetid, ""], "iframemachine");
        }

        var gettingmsgdeviceid = undefined;
        function getMessages() {
            if (deviceid == undefined || deviceid < 0 || gettingmsgdeviceid == deviceid)
                return;
            gettingmsgdeviceid = deviceid;
            let tempdeviceid = deviceid;
            var param = JSON.stringify([deviceid, lastmsgid]);
            _network.trackerquery("GetMessages", param, function (data) {
                if (typeof data === 'string') {
                    //showAlert(data, 'Get Messages');
                }
                else {
                    if (data.length > 0) {
                        if (tempdeviceid !== deviceid)
                            return;
                        for (var i = 0; i < data.length; i++) {
                            var msg = data[i];
                            if (lastmsgid >= msg.ID)
                                continue;
                            showMessage(msg);
                            lastmsgid = msg.ID;
                        }

                        var scrollHeight = $('#msgctrl').prop("scrollHeight");
                        $('#msgctrl').animate({ scrollTop: scrollHeight }, 400);
                    }
                }
                gettingmsgdeviceid = undefined;
            }, function (err) {
                gettingmsgdeviceid = undefined;
                //showAlert('Failed to get messages.', 'Get Messages');
            });
        }

        function postMessage(msg, type) {
            if (deviceid == undefined || deviceid <= 0) return;
            var param = JSON.stringify([deviceid, msg, type]);
            param = htmlencode(param);
            let tempdeviceid = deviceid;
            _network.trackerquery("PostMessage", param, function (data) {
                if (typeof data === 'string') {
                    showAlert(data, GetTextByKey("P_M3_SENDMESSAGE", 'Send Message'));
                }
                else {
                    var msg = data;
                    if (tempdeviceid !== deviceid)
                        return;
                    if (lastmsgid >= msg.ID)
                        return;
                    showMessage(msg);
                    lastmsgid = msg.ID;

                    var scrollHeight = $('#msgctrl').prop("scrollHeight");
                    $('#msgctrl').animate({ scrollTop: scrollHeight }, 400);
                }
            }, function (err) {
                showAlert(GetTextByKey("P_M3_FAILEDTOSENDMESSAGE", 'Failed to send message.'), GetTextByKey("P_M3_SENDMESSAGE", 'Send Message'));
            });
        }

        function sendMessage() {
            var msg = $("#txtmsg").val();
            if ($.trim(msg) === "") {
                showAlert(GetTextByKey("P_M3_MESSAGECANNOTBEEMPTY", 'Message cannot be empty.'), GetTextByKey("P_M3_SENDMESSAGE", 'Send Message'));
                return;
            }
            $("#txtmsg").val("").focus();
            //showMessage(msg, true);
            postMessage(msg, 0);
        }

        function showMessage(msg) {
            var msgctrl = $("#msgctrl");
            var div = $("<div class='msgdiv'></div>").appendTo(msgctrl);
            $("<div class='msgtime'></div>").text(msg.SenderName + " " + msg.TimeText).appendTo(div);
            var contentctrl = $("<div></div>").appendTo(div);
            if (msg.MessageType === 1 | msg.MessageType === 2) {
                var lat = 0;
                var lng = 0;
                var text = "";
                var index = msg.TextMessage.indexOf(",");
                if (index > 0)
                    lat = eval(msg.TextMessage.substring(0, index));
                var index1 = msg.TextMessage.indexOf(",", index + 1);
                if (index1 > 0) {
                    lng = eval(msg.TextMessage.substring(index + 1, index1));
                    text = msg.TextMessage.substring(index1 + 1);
                }
                if (msg.MessageType === 1) {
                    contentctrl.append($("<span class='jsicon'></span>"));
                }
                else if (msg.MessageType === 2) {
                    contentctrl.append($("<span class='locicon'></span>"));
                }
                contentctrl.css("padding-left", 10);
                var js = $("<a href='javascript:void(0);'></a>").text(text);
                contentctrl.append(js);
            }
            else
                contentctrl.text(msg.TextMessage);
            if (msg.IsSelf) {
                contentctrl.addClass("msgself");
                div.css("text-align", "right");
            }
            else
                contentctrl.addClass("msgother");
        }

        function getJobsites() {
            _network.trackerquery("GetJobsites", [], function (data) {
                if (typeof data !== 'string') {
                    var seljs = $("#selJobsites");
                    for (var i in data) {
                        var js = data[i];
                        seljs.append($('<option></option>')
                            .attr('value', js.ID)
                            .text(js.Name).data("jsobj", js));
                    }
                }
            }, function (err) {
            });
        }


        function sendJobsite() {
            $('#jobsitectrl').show();
        }

        function sendJobsiteMessage() {
            var seljs = $("#selJobsites");
            var selItem = seljs.find("option:selected");
            var js = selItem ? selItem.data("jsobj") : null;
            if (js) {
                var msg = "";
                msg += js.Latitude + ",";
                msg += js.Longitude + ",";
                msg += js.Name;
                postMessage(msg, 1);
            }
            $('#jobsitectrl').hide();
        }

        function sendLocation() {
            showmaskbg(true);
            $('#dialog_map')
                .attr('act', 'add')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_map').height()) / 3,
                    'left': (document.documentElement.clientWidth - $('#dialog_map').width()) / 2
                })
                .showDialog();
        }

        function sendLocationMessage() {
            var latitude = $('#maplatude').text();
            var longitude = $('#maplongitude').text();
            if (latitude !== "" && longitude !== "") {
                var msg = "";
                msg += latitude + ",";
                msg += longitude + ",";
                msg += "Location";
                postMessage(msg, 2);
                $('#dialog_map').hideDialog();
                showmaskbg(false);
            }
            else {
                showAlert(GetTextByKey("P_M3_PLEASESELECTALOCATIONTOSENDTO", 'Please select a location to send to.'), GetTextByKey("P_M3_SENDLOCATION", 'Send Location'));
            }
        }


        /*地图相关*/
        var polygonitem = [];
        var machineGraphics = [];
        var isMapLoaded = false;
        var isLoadingMap = false;
        var mapObj;
        var graphicLayer = undefined;
        var BasePointLayer = undefined;
        var BasePolygonLayer = undefined
        var DrawPolygonLayer = undefined
        var TransportationLayer = undefined
        var GraphicC = undefined;
        var PointC = undefined;
        var PictureMarkerSymbolC = undefined;
        var UnitsC = undefined;
        var CircleC = undefined;
        var SimpleFillSymbolC = undefined;
        var ExtentC = undefined;
        var DrawC = undefined;
        var toolbar = undefined;
        var PolygonC = undefined;
        var BasemapGalleryC = undefined;

        function loadMap() {
            require(["esri/map", "esri/graphic", "esri/geometry/Point", "esri/symbols/PictureMarkerSymbol", "esri/units",
                "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol", "esri/geometry/Extent", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/Polygon", "esri/dijit/BasemapGallery", "esri/layers/ArcGISTiledMapServiceLayer"],
                function (Map, Graphic, Point, PictureMarkerSymbol, Units, Circle, SimpleFillSymbol, Extent, Draw, SimpleMarkerSymbol,
                    SimpleLineSymbol, SimpleFillSymbol, Polygon, BasemapGallery, ArcGISTiledMapServiceLayer) {
                    MapC = Map;
                    GraphicC = Graphic;
                    PointC = Point;
                    PictureMarkerSymbolC = PictureMarkerSymbol;
                    UnitsC = Units;
                    CircleC = Circle;
                    SimpleFillSymbolC = SimpleFillSymbol;
                    ExtentC = Extent;
                    DrawC = Draw;
                    PolygonC = Polygon;
                    BasemapGalleryC = BasemapGallery;
                    mapObj = new MapC("mapdiv", {
                        basemap: "topo",
                        center: [-128.694315, 42.202091], // longitude, latitude
                        zoom: 4
                    });

                    dojo.connect(mapObj, "onClick", showCoordinates);
                    $('div.esriControlsBR').remove();
                    graphicLayer = new esri.layers.GraphicsLayer();
                    mapObj.addLayer(graphicLayer);
                    BasePointLayer = new esri.layers.GraphicsLayer();
                    mapObj.addLayer(BasePointLayer);
                    BasePolygonLayer = new esri.layers.GraphicsLayer();
                    mapObj.addLayer(BasePolygonLayer);

                    DrawPolygonLayer = new esri.layers.GraphicsLayer();
                    mapObj.addLayer(DrawPolygonLayer);

                    TransportationLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/arcgis/rest/services/Reference/World_Transportation/MapServer");

                    // create a toolbar for the map
                    //toolbar = new DrawC(mapObj);
                    //toolbar.on("draw-complete", completeshape);

                    initBasemapGallery(mapObj);

                    isLoadingMap = false;
                    isMapLoaded = true;
                });
        }

        function initBasemapGallery(map) {
            $(window).click(function (e) {
                if ($(e.target).attr("id") != "basemapImg")
                    $("#basemapGallery").hide();
            });
            var basemap = "topo";
            $("#basemapImg").css("background-image", "url('https://js.arcgis.com/3.44/esri/images/basemap/topo.jpg')");
            $("#basemapTitle").text(GetTextByKey("P_MAP_TOPOGRAPHIC", "Topographic"));

            var basemapGallery = new BasemapGalleryC({
                showArcGISBasemaps: false,
                map: map
            }, "basemapGallery");


            var satellitemap = new esri.dijit.Basemap({
                layers: [new esri.dijit.BasemapLayer({
                    url: "http://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"
                })],
                title: GetTextByKey("P_MAP_IMAGERY", "Imagery"),
                thumbnailUrl: "https://js.arcgis.com/3.44/esri/images/basemap/satellite.jpg"
            });
            basemapGallery.add(satellitemap);

            var topomap = new esri.dijit.Basemap({
                layers: [new esri.dijit.BasemapLayer({
                    url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
                })],
                title: GetTextByKey("P_MAP_TOPOGRAPHIC", "Topographic"),
                thumbnailUrl: "https://js.arcgis.com/3.44/esri/images/basemap/topo.jpg"
            });
            basemapGallery.add(topomap);

            var streetmap = new esri.dijit.Basemap({
                layers: [new esri.dijit.BasemapLayer({
                    //type: "OpenStreetMap",
                    url: "http://server.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"
                })],
                title: GetTextByKey("P_MAP_STREETS", "Streets"),
                thumbnailUrl: "https://js.arcgis.com/3.44/esri/images/basemap/streets.jpg"

            });
            basemapGallery.add(streetmap);

            basemapGallery.startup();

            basemapGallery.on("selection-change", function () {
                var basemap = basemapGallery.getSelected();
                if (basemap) {
                    if (basemap.title == "Imagery")
                        map.addLayer(TransportationLayer);
                    else
                        map.removeLayer(TransportationLayer);
                    $("#basemapImg").css("background-image", "url('" + basemap.thumbnailUrl + "')");
                    $("#basemapTitle").text(basemap.title);
                }
                $("#basemapGallery").hide();
            });

            basemapGallery.on("error", function (msg) {
                console.log("basemap gallery error:  ", msg);
            });
        }

        function showCoordinates(evt) {
            if (evt) {
                var mp = evt.mapPoint;
                $("#mapLocation").css("display", "block");
                $('#maplatude').text(mp.getLatitude().toFixed(6));
                $('#maplongitude').text(mp.getLongitude().toFixed(6));
            }

            locateJobSite();
        }

        function locateJobSite(isopen) {
            var latitude = parseFloat($('#maplatude').text());
            var longitude = parseFloat($('#maplongitude').text());
            if (latitude == 0 && longitude == 0) return;
            var point = new esri.geometry.Point({
                latitude: latitude,
                longitude: longitude
            });
            if (isopen) {
                mapObj.centerAndZoom(point, 3);
            }
            var symbol = new esri.symbol.TextSymbol({
                color: [0xf7, 0xc0, 0x03],//#f7c003
                haloColor: "black",
                haloSize: "1px",
                text: "\ue61d",
                xoffset: 3,
                yoffset: 3,
                font: {  // autocast as esri/symbols/Font
                    size: 32,
                    family: "CalciteWebCoreIcons",
                    weight: "bolder"
                }
            });
            graphicLayer.clear();
            var graphic = new esri.Graphic(point, symbol);
            graphicLayer.add(graphic);
        }

        $(function () {
            setPageTitle(GetTextByKey("P_M3", 'M3'), true);
            setFavoriteDisplay(true, 500);

            setInterval(getMessages, 5 * 1000);//定时获取消息
            getJobsites();

            devicevm = new Vue({
                el: '#devicelist',
                data: {
                    devices: []
                },
                methods: {
                    reload: function (data) {
                        this.devices = data;
                    },
                    deviceClick: function (e, d) {
                        deviceChanged(e, d);
                    }
                }
            });

            deviceinfovm = new Vue({
                el: '#deviceinfo',
                data: {
                    device: {}
                },
                methods: {
                    reload: function (data) {
                        this.device = data;
                    }
                }
            });

            $('#dialog_map').dialog(function () {
                showmaskbg(false);
            });

            $('#dialog_accuracy').dialog(function () {
                showmaskbg(false);
            });

            loadMap();
            $("#basemapgalleryDiv").click(null, function (e) {
                $("#basemapGallery").show();
            });

            $(window).resize(function () {
                //$("#devicelist").css("height", $(window).height() - $("#devicelist").offset().top - 4);
                //grid_dt && grid_dt.resize();
                //$("#rightctrl").css("height", $(window).height() - $("#rightctrl").offset().top - 4)
                //    .css("width", $(window).width() - 250);
            }).resize();

            $(document).mousedown(function (e) {
                var jsctrl = $('#jobsitectrl');
                var t = $(e.target);
                if (!t.is(jsctrl)
                    && !t.parent().is(jsctrl)
                    && !t.parent().parent().is(jsctrl)
                    && !t.is($("#btnSendJobsite")))
                    jsctrl.hide();
            });

            OnRefresh();
        });

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="holder_content" runat="Server">
    <div>
        <div id="contentctrl">
            <div class="page_title" data-lgid="P_M3">M3</div>
            <div class="function_title">
                <%--<span class="sbutton iconadd" onclick="OnAdd();">Add</span>--%>
                <span class="sbutton iconrefresh" onclick="OnRefresh();" data-lgid="P_M3_REFRESH">Refresh</span>
            </div>
            <div>
                <div id="devicelist" style="position: absolute; width: 240px; left: 5px; top: 75px; bottom: 5px; line-height: 30px; border: 1px solid gray;">
                    <div style="margin-left: 7px; font-size: 14px; font-weight: bold;" data-lgid="P_M3_DEVICES">Devices</div>
                    <div v-for="device in devices">
                        <div class='deviceitem' v-on:click="deviceClick($event,device)" v-bind:title="device.DeviceName">{{device.DeviceName}}</div>
                    </div>
                </div>
                <div id="rightctrl" style="position: absolute; top: 75px; left: 250px; right: 0px; bottom: 0px;">
                    <div id="deviceinfo" style="border: 1px solid gray; height: 60px; line-height: 24px; min-width: 1100px;">
                        <table>
                            <tr>
                                <td style="text-align: right;"><b data-lgid="P_M3_DEVICEID_COLON">Device ID:</b></td>
                                <td style="min-width: 140px;">{{device.DeviceID}}</td>
                                <td style="text-align: right; padding-left: 10px;"><b data-lgid="P_M3_DEVICENAME_COLON">Device Name:</b></td>
                                <td style="min-width: 140px;">{{device.DeviceName}}</td>
                                <td style="text-align: right; padding-left: 10px;"><b data-lgid="P_M3_DEVICETYPE_COLON">Device Type:</b></td>
                                <td style="min-width: 120px;">{{device.DeviceType}}</td>
                                <td style="text-align: right; padding-left: 10px;"><b data-lgid="P_M3_ACCURACY_COLON">Accuracy:</b></td>
                                <td style="min-width: 120px; white-space: nowrap;">
                                    <input type="text" id="txtAccuracy" v-model="device.AcceptableAccuracy" maxlength="8" tabindex="14" style="width: 120px;" disabled="disabled" />
                                    <span id="spanEditAccuracy" class="dialogspanbtn dialogedit" title="Edit Accuracy" data-title-lgid="P_M3_EDITACCURACY" onclick="OnEditAccuracy();"></span></td>
                            </tr>
                            <tr>
                                <td style="text-align: right;"><b data-lgid="P_M3_ASSETNAME_COLON">Asset Name:</b></td>
                                <td>{{device.Name}}</td>
                                <td style="text-align: right; padding-left: 10px;"><b data-lgid="P_M3_MAKE_COLON">Make:</b></td>
                                <td>{{device.Make}}</td>
                                <td style="text-align: right; padding-left: 10px;"><b data-lgid="P_M3_MODEL_COLON">Model:</b></td>
                                <td>{{device.Model}}</td>
                                <td style="text-align: right; padding-left: 10px;"><b data-lgid="P_M3_TYPE_COLON">Type:</b></td>
                                <td>{{device.Type}}</td>
                            </tr>
                        </table>
                    </div>
                    <div style="position: absolute; top: 65px; bottom: 5px; border: 1px solid gray; width: 400px;">
                        <div id="msgctrl" style="position: absolute; top: 0px; bottom: 158px; width: 100%; background-color: #e5e5e5; overflow: auto;"></div>
                        <table style="position: absolute; bottom: 5px; width: 100%; border-collapse: collapse; border-spacing: 0;">
                            <tr style="height: 120px;">
                                <td>
                                    <textarea id="txtmsg" style="width: 392px; height: 118px; resize: none;"></textarea>
                                </td>
                            </tr>
                            <tr style="height: 30px;">
                                <td style="text-align: right; position: relative;">
                                    <div>
                                        <input id="btnSendLocation" type="button" value="Send Location" data-lgid="P_M3_SENDLOCATION" style="margin-right: 10px;" onclick="sendLocation();" />
                                        <input id="btnSendJobsite" type="button" value="Send Jobsite" data-lgid="P_M3_SENDJOBSITE" style="margin-right: 10px;" onclick="sendJobsite();" />
                                        <input type="button" value="Send" data-lgid="P_M3_SEND" style="margin-right: 10px;" onclick="sendMessage();" />
                                        <div id="jobsitectrl" style="position: absolute; background-color: #d2d2d2; top: -40px; right: 62px; padding-top: 10px; padding-bottom: 10px; padding-right: 5px; padding-left: 5px; display: none;">
                                            <select id="selJobsites" style="min-width: 120px; max-height: 280px;">
                                            </select>
                                            <input type="button" value="Send" data-lgid="P_M3_SEND" style="margin-left: 5px;" onclick="sendJobsiteMessage();" />
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div style="position: absolute; top: 65px; bottom: 10px; left: 405px; right: 1px; border: 1px solid gray; min-width: 690px;">
                        <iframe id="iframemachine" src="MapViewChart.aspx?ds=FITRACKER" style="width: 100%; height: 100%; display: block; border: none;"></iframe>
                    </div>
                </div>
            </div>
        </div>

        <div id="dialogmask" class="maskbg" style="display: none;">
            <div class="loading_icon icon c-spin"></div>
        </div>
    </div>

    <div id="mask_bg">
        <div class="loading c-spin"></div>
    </div>
    <div class="dialog" id="dialog_map" style="width: 1200px; display: none;">
        <div class="dialog-title"><span class="title" data-lgid="P_M3_SENDLOCATION">Send Location</span><em class="dialog-close"></em></div>

        <div class="dialog-content">
            <div style="float: left; margin-left: 5px; margin-top: -5px;">
                <div id="mapdiv" style="width: 1180px; height: 540px; background-color: Window;">
                </div>
                <div id="basemapgalleryDiv">
                    <div id="basemapImg"></div>
                    <div id="basemapTitle"></div>
                </div>
                <div id="basemapGallery"></div>

                <div id="mapLocation" class="dialog-func" style="float: left; display: none;">
                    <span style="margin-left: 5px;" data-lgid="P_M3_LATITUDE_COLON">Latitude:&nbsp;</span>
                    <label id="maplatude"></label>
                    <span data-lgid="P_M3_LONGITUDE_COLON">&nbsp;&nbsp;Longitude:&nbsp;</span><label id="maplongitude"></label>
                </div>

                <div class="dialog-func" style="float: right;">
                    <input type="button" class="dialog-close" style="height: 24px;" value="Cancel" data-lgid="P_M3_CANCEL" tabindex="13" />
                    <input type="button" onclick="sendLocationMessage();" style="height: 24px; width: unset;" value="Send" data-lgid="P_M3_SEND" tabindex="12" />
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="dialog_accuracy" class="dialog" style="display: none;">
        <div class="dialog-title"><span class="title" id="popupTitle" data-lgid="P_M3_EDITACCURACY">Edit Accuracy</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <table style="line-height: 30px;">
                <tr>
                    <td class="label" style="width: 100px;" data-lgid="P_M3_ACCURACY">Accuracy</td>
                    <td>
                        <input type="text" id="dialog_accuracyvalue" maxlength="100" tabindex="50" style="width: 240px;" /></td>
                </tr>
                <tr>
                    <td class="label" style="width: 100px;" data-lgid="P_M3_NOTE_COLON">Note:</td>
                    <td>
                        <textarea id="dialog_accuracynote" maxlength="1000" tabindex="51" style="width: 240px; height: 100px; max-width: unset;"></textarea>
                    </td>
                </tr>
            </table>
        </div>

        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_M3_CANCEL" class="dialog-close" tabindex="53" style="margin-right: 30px;" />
            <input type="button" onclick="SaveAccuracy();" value="OK" data-lgid="P_M3_OK" tabindex="52" />
            <div class="clear"></div>
        </div>
    </div>
</asp:Content>