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


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css">
        ::-ms-clear, ::-ms-reveal {
            display: none;
        }

        .edit-content table {
            border-collapse: collapse;
            width: 100%;
        }

            .edit-content table td.label {
                width: 200px;
                text-align: right;
                padding-right: 10px;
                line-height: 24px;
                height: 24px;
                vertical-align: top;
            }

            .edit-content table td input,
            .edit-content table td textarea {
                border: 1px solid #a9a9a9;
                width: 320px;
                height: 18px;
                padding: 1px;
            }

                .edit-content table td input[type="checkbox"] {
                    border: none;
                }

            .edit-content table td textarea {
                height: 100px;
                resize: none;
                /*max-width: 200px;*/
            }

        .a {
            text-decoration: none;
            color: #2140fb;
        }

        .subtitle {
            margin: 20px 40px 5px 0px;
            font-size: 16px;
            color: gray;
        }

            .subtitle span {
                margin-left: 10px;
            }

            .subtitle hr {
                background-color: #d8d8d8;
                border: none;
                height: 1px;
            }


        .machinetd {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .div-wsp {
            /*position: fixed;
            top: 300px;
            left: 0;
            right: 0;
            bottom: 0;*/
            border-top: 1px solid #000;
            margin-left: 1px;
        }

        .iframe-wsp {
            border: none;
            width: 100%;
            height: 100%;
        }

        .div-timeline {
            border-top: 1px solid #a9a9a9;
            padding-top: 4px;
        }

        .iframe-timeline {
            border: none;
            width: 100%;
            height: 100px;
        }


        .sizer {
            position: relative;
            width: 270px;
            z-index: 1;
        }



        .titlePane {
            background-color: #444444;
            color: #FFFFFF;
            line-height: 24px;
            padding-left: 6px;
            border-radius: 5px 5px 0px 0px;
            -webkit-border-radius: 5px 5px 0px 0px;
            cursor: default;
        }

        .titleButton {
            position: absolute;
            top: 2px;
            cursor: pointer;
        }

            .titleButton:before {
                padding-right: 8px;
                font-family: 'FontAwesome';
            }

            .titleButton.prev {
                right: 64px;
                background-position: -29px 0;
                width: 9px;
                height: 17px;
            }

            .titleButton.next {
                right: 46px;
                background-position: -16px 0;
                width: 9px;
                height: 17px;
            }

            .titleButton.close {
                right: 3px;
                background-position: 0 0;
                width: 12px;
                height: 17px;
                font-size: 15px;
            }

        .assetlable {
            font-weight: bold;
        }

        .assetblanklines {
            height: 12px;
        }

        .dialogbtn {
            height: 24px;
            cursor: pointer;
            background: rgb(249, 189, 117);
            padding: 2px;
        }

        .adjust-content table td.label {
            width: 130px;
            text-align: right;
            padding-right: 10px;
            line-height: 24px;
            height: 24px;
            vertical-align: top;
        }

        .adjust-content table td input {
            width: 200px;
        }

        .adjust-content table td select {
            width: 204px;
        }

        .function-title {
            float: left;
            font-weight: bold;
            margin: 6px 0 0 26px;
            font-size: 13px;
        }

        .function-bar {
            height: 30px;
            line-height: 30px;
            /*text-align: right;*/
            float: right;
        }

        #text-date {
            width: 100px;
        }


        .iconworkorder:before {
            font-family: FontAwesome;
            content: '\f732';
            font-size: 2.0em;
            font-weight: bold;
            color: #0079c1;
        }

        .iconmaintenancerecord:before {
            font-family: FontAwesome;
            content: '\f073';
            font-size: 2.0em;
            font-weight: bold;
            color: #0079c1;
        }

        .icondirection:before {
            content: '\f5eb';
            font-family: FontAwesome;
            font-size: 2.4em;
            font-weight: bold;
            color: #0079c1;
        }

        .iconmail:before {
            font-family: FontAwesome;
            content: '\f0e0';
            font-size: 2.4em;
            font-weight: bold;
            color: #0079c1;
        }

        .iconweather:before {
            font-family: FontAwesome;
            content: '\f746';
            font-size: 2.4em;
            font-weight: bold;
            color: #0079c1;
        }

        .iconasset:before {
            font-family: FontAwesome;
            content: '\f7d2';
            font-size: 2.0em;
            font-weight: bold;
            color: #0079c1;
        }

        .iconmapworkorder:before {
            font-family: FontAwesome;
            content: '\f732';
            font-size: 2.4em;
            font-weight: bold;
            color: #0079c1;
        }

        .iconlochis:before {
            font-family: FontAwesome;
            content: '\f1da';
            font-size: 2.4em;
            font-weight: bold;
            color: #0079c1;
        }

        .iconmapmanagealerts:before {
            font-family: FontAwesome;
            content: '\f071';
            font-size: 2.4em;
            font-weight: bold;
            color: #0079c1;
        }

        .iconmapfuelrecord:before {
            font-family: FontAwesome;
            content: '\f52f';
            font-size: 2.4em;
            font-weight: bold;
            color: #0079c1;
        }

        .iconatta:before {
            font-family: FontAwesome;
            content: '\f0c6';
            font-size: 2.4em;
            font-weight: bold;
            color: #0079c1;
        }

        .div_titlte {
            width: 100%;
            background: <%=MenuBackgroundColor%>;
            position: relative;
            text-align: center;
            line-height: 24px;
            font-weight: bold;
        }

        .assetsummaryplus:before {
            font-size: 12px;
            font-weight: normal;
            font-family: 'CalciteWebCoreIcons', 'Fontawesome';
            content: '\e620';
            margin-right: 5px;
            color: #0079c1;
        }

        .td_pm {
            vertical-align: top;
            white-space: nowrap;
            font-weight: bold;
        }

        .divicon {
            /*position: absolute;*/
            width: 40px;
            background-color: #EFEFEF;
            text-align: center;
            line-height: 35px;
            padding: 5px 5px;
            float: left;
            margin-left: 22px;
        }

        .divattp {
            width: 300px;
            margin-right: 10px;
            float: left;
            position: relative;
        }

        .divatt {
            width: 120px;
            height: 120px;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-right: 10px;
            cursor: pointer;
            border: 1px solid #b0b0b0;
            border-radius: 2px;
            box-shadow: rgba(0, 0, 0, 0.4);
            text-align: center;
            float: left;
            position: relative;
        }

        .picture {
            max-height: 100%;
            max-width: 100%;
            margin: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>

    <link href="<%=GetFileUrlWithVersion("../css/jquery.datetimepicker.css")%>" rel="stylesheet" />
    <script src="<%=GetFileUrlWithVersion("../Maintenance/js/inputdatactr.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../js/jquery.datetimepicker.full.js")%>"></script>
    <script src="<%=GetFileUrlWithVersion("../js/editableselect.js")%>"></script>
    <script src="<%=GetFileUrlWithVersion("../js/vue.min.js")%>"></script>
    <script src="<%=GetFileUrlWithVersion("js/adj_odometer.js")%>"></script>
    <script src="<%=GetFileUrlWithVersion("js/adj_enginehours.js")%>"></script>
    <script src="<%=GetFileUrlWithVersion("js/assetpm.js")%>"></script>
    <script src="<%=GetFileUrlWithVersion("../js/echarts.min.js")%>"></script>

    <script type="text/javascript">
        _network.root = '<%=Page.ResolveUrl("~/")%>';

        var currentdate = "<%=CurrentDate %>";
        var IsSupperAdmin =<%=IsSupperAdmin ?"true":"false"%>;
        var isAllowed = false;
        var IsDealer = <%=IsDealer ?"true":"false"%>;
        var CanEditPM = <%=CanEditPM ?"true":"false"%>;
        var canEditAsset = <%=CanEditAsset ?"true":"false"%>;
        var canViewWorkOrder = <%=CanViewWorkOrder ?"true":"false"%>;
        var canViewMR = <%=CanViewMR ?"true":"false"%>;
        var canViewAlertsManagement = <%=CanViewAlertsManagement ?"true":"false"%>;
        var canViewFuelRecords = <%=CanViewFuelRecords ?"true":"false"%>;
        var enableSmartWitness = <%=EnableSmartWitness?"true":"false"%>;
        var canViewInspection = <%=CanViewInspection?"true":"false"%>;
        var canViewPM = <%=CanViewPM?"true":"false"%>;

        function resizeBoard(width, height) {
            $('#div_wsp').css({
                width: width,
                height: height
            })
        }

        var contractorid = undefined;
        var assetid = undefined;
        var vin = undefined;

        var rentalsdata = [];
        var machines;
        var vm;

        function assetrequest(method, param, callback, error) {
            _network.request("AssetView/SingleAssetView.aspx", -1, method, param, callback, error || function (e) {
                console.log(e);
                showmaskbg(false, true);
                showAlert(GetTextByKey("P_MV_PAGEERROR", 'An unknown error occurred.  Please refresh page.'), GetTextByKey("P_MV_QUERY", 'Query'));
            });
        }
        function assetrequest1(method, param, callback, error) {
            _network.request("MachineDeviceManagement/AddMachine.aspx", -1, method, param, callback, error || function (e) {
                console.log(e);
                showmaskbg(false, true);
                showAlert(GetTextByKey("P_MV_PAGEERROR", 'An unknown error occurred.  Please refresh page.'), GetTextByKey("P_MV_QUERY", 'Query'));
            });
        }

        function devicerequest(method, param, callback, error) {
            _network.request("MachineDeviceManagement/ManageMachines.aspx", -1, method, param, callback, error || function (e) {
                console.log(e);
                showmaskbg(false, true);
                showAlert(GetTextByKey("P_MV_PAGEERROR", 'An unknown error occurred.  Please refresh page.'), GetTextByKey("P_MV_QUERY", 'Query'));
            });
        }

        function showConfirm1(msg, title, fok, fcancel) {
            $('#addodomask').show();
            $('#addenginehoursmask').show();
            _dialog.showConfirm(msg, title, function (e) {
                $('#addodomask').hide();
                $('#addenginehoursmask').hide();
                if (typeof fok === 'function') {
                    fok(e);
                }
            }, function () {
                $('#addodomask').hide();
                $('#addenginehoursmask').hide();
            });
        }

        function loadAsset(cid, aid, avin, type) {//type 0.mapview 1.manageasset
            if (type === 1) {
                $('#div_icon').hide();
                $('#div_assetcontent').css('padding-left', 0);
            }
            $('#dialog_addodometer').hideDialog();
            $('#addodomask').hide();
            $('#dialog_addenginehours').hideDialog();
            $('#addenginehoursmask').hide();
            _dialog.close($(".popupmsg"));

            $("#assetspeeddiv").hide();
            $("#assetfuelleveldiv").hide();

            contractorid = cid;
            assetid = aid;
            vin = avin;
            GetUserPermission();
            getCustomerTimeZone();
            if (assetid) {
                $('#div_icon').empty();
                $('#dialog_assetattachments').hideDialog();
                loadAssetInfo();
                loadMapView();
                loadWorkspace();

                $('#div_timeline').hide();
                timelineLoaded = false;
                assetrequest('IsCalampPrimaryLocation', contractorid + String.fromCharCode(170) + assetid, function (data) {
                    if (data == '1') {
                        var dt = new Date(currentdate);
                        var text_date = $('#text-date');
                        var m = dt.getMonth() + 1;
                        var d = dt.getDate();
                        text_date.val((m < 10 ? '0' : '') + m + '/' + (d < 10 ? '0' : '') + d + '/' + dt.getFullYear());
                        $('#iftimeline').attr('src', 'AssetTimeline.aspx?id=' + assetid + '&cid=' + contractorid).on('load', function () {
                            setTimeout(function () {
                                timelineLoaded = true;
                                OnRefresh();
                            });
                        });
                        $('#div_timeline').show();
                    }
                });
            }
        }

        function refresh() {
            if (!IsSupperAdmin)
                GetUserPermission();
            if (assetid) {
                loadAssetInfo();
                loadMapView();
                loadWorkspace();
            }
        }

        function loadMapView() {
            if ($("#ifmapview").prop("src"))
                execIframeFunc("reloaddata", [assetid, vin], "ifmapview");
            else
                $("#ifmapview").prop("src", "AssetMapView.aspx?machineid=" + assetid + "&vin=" + vin);
        }

        var workspaceConfig = undefined;
        function loadWorkspace() {
            //加了个resetPivot(pivots)方法，传进来[{iid:'...',vals:['..']},...]的对象就行
            var wspivots = [{ "iid": "BDFAE7E6-9E1F-4BE5-8B98-3BCF227C5DB7", "vals": [vin] }];
            //var wspivots = [{ "iid": "e64de7da-539e-471f-afd7-80e5bd298167", "vals": [assetid] }];
            if (!$("#ifwsp").attr("src")) {
                assetrequest("GetAssetDetailWorkspaceConfig", "", function (data) {
                    if (typeof (data) === "string") {
                        return;
                    }
                    workspaceConfig = data;
                    var p = generatewspparam();
                    $("#ifwsp").attr("src", "AssetSingleWorkspace.aspx?" + p);
                });
            }
            else {
                execIframeFunc("resetPivot", [getwspparam()], "ifwsp");
            }
            // src="AssetSingleWorkspace.aspx?iid=be9860fa-c718-41b6-8d48-b734ceca8fd0&wspivots=%22%5B%7B%5C%22iid%5C%22%3A%5C%22e64de7da-539e-471f-afd7-80e5bd298167%5C%22%2C%5C%22vals%5C%22%3A%5B%5C%2290%5C%22%5D%7D%5D%22&lgid=en-us"
            //IID=07336716-614E-4B6B-BF2A-4917A4D1370F&wspivots=[{"iid":"00000000-0000-0000-0000-00000000","vals":["1152600"]},{"iid":"3BD3EFB4-B134-1395-D6E5-E2D8CA762A3A","vals":["072919httest2"]}]
        }

        function generatewspparam() {
            var wspivots = [];
            var p = "iid=";
            if (workspaceConfig) {
                p += workspaceConfig.WorkspaceIID;
                var wspivots = getwspparam();
                p += "&wspivots=" + encodeURIComponent(JSON.stringify(wspivots)) + "&lgid=en-us";
            }
            return p;
        }

        function getwspparam() {
            var wspivots = [];
            if (workspaceConfig) {
                if (workspaceConfig.MachineIDPivotIID) {
                    wspivots.push({ "iid": workspaceConfig.MachineIDPivotIID, "vals": ["" + assetid] });
                }
                if (workspaceConfig.VINPivotIID) {
                    wspivots.push({ "iid": workspaceConfig.VINPivotIID, "vals": [vin] });
                }
            }
            return wspivots;
        }

        $(function () {
            initTime();
            initTimeZone();

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

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

            $('#dialogadd_odometerdate').datetimepicker({
                timepicker: false,
                format: 'm/d/Y',
                enterLikeTab: false,
                onSelectDate: function (v, inp) {
                    var date = new DateFormatter().formatDate(v, 'm/d/Y 00:00:00');
                    inp.parent().data('val', [date]);
                }
            });
            $('#dialogaddenginehours_date').datetimepicker({
                timepicker: false,
                format: 'm/d/Y',
                enterLikeTab: false,
                onSelectDate: function (v, inp) {
                    var date = new DateFormatter().formatDate(v, 'm/d/Y 00:00:00');
                    inp.parent().data('val', [date]);
                }
            });

            function resizeContent() {
                //$('#divcontent').css('height', $(window).height() - $('#divcontent').offset().top - 4);
                //$('.content_main').css('min-height', 0);
            }

            vm = new Vue({
                el: '#assetinfo',
                data: {
                    asset: {
                        CurrentLocation: {},
                        CurrentHours: {},
                        CurrentIdleHours: {},
                        CurrentOdometer: {}
                    }
                },
                methods: {
                    reload: function (data) {
                        this.asset = data;
                    }
                }
            });

            window.onresize = resizeContent;
            resizeContent();

            var dt = new Date(currentdate);
            var text_date = $('#text-date');
            var m = dt.getMonth() + 1;
            var d = dt.getDate();
            text_date.val((m < 10 ? '0' : '') + m + '/' + (d < 10 ? '0' : '') + d + '/' + dt.getFullYear());
            //window.parent.OnTimelineLoaded(text_date[0]);
            text_date.datetimepicker({
                timepicker: false,
                format: 'm/d/Y',
                enterLikeTab: false,
                onSelectDate: function (v, inp) {
                    var date = new DateFormatter().formatDate(v, 'm/d/Y 00:00:00');
                    inp.parent().data('val', [date]);
                }
            });
        });

        var timelineLoaded = false;
        function OnRefresh() {
            if (!timelineLoaded) {
                return;
            }
            var date = $('#text-date').val();
            $('#iftimeline')[0].contentWindow.OnRefresh(date);
        }

        function OnClose() {
            window.parent.closePopupView();
        }

        var assetdata;
        function loadAssetInfo() {
            showloading(true);
            $('#td_scheduledmaintenance').empty();
            $('#td_rental').empty();
            $('#td_alerts').empty();
            $('#td_assetstatus').empty();
            $('#td_utilization').empty();
            $('#span_location').hide();
            $('#span_currentoperator').hide();
            $('#btnodometeradd').hide();
            $('#btnenginehoursadd').hide();
            assetdata = undefined;
            getNowFormatDate();
            assetrequest("GetAssetDetailInfo", contractorid + String.fromCharCode(170) + assetid, function (data) {
                showloading(false);
                if (typeof (data) === "string") {
                    return;
                }
                assetdata = data;

                if (!isNaN(assetdata.FuelLevel) && assetdata.FuelLevel > 0) {
                    showFuelLevelChart(60, assetdata.FuelLevel);
                }

                if (!data.CurrentLocation) {
                    $('#span_location').hide();
                    data.CurrentLocation = {};
                }
                else {
                    $('#span_location').show();
                    showLocationInfo(data);
                }
                if (data.CurrentOperator)
                    $('#span_currentoperator').show();
                else
                    $('#span_currentoperator').hide();

                if (!data.CurrentHours)
                    data.CurrentHours = { 'IsEmpty': true };
                else
                    data.CurrentHours.IsEmpty = false;
                if (!data.CurrentIdleHours)
                    data.CurrentIdleHours = {};
                if (!data.CurrentOdometer)
                    data.CurrentOdometer = { 'IsEmpty': true };
                else
                    data.CurrentOdometer.IsEmpty = false;

                vm.reload(data);

                createAssetIcon(data);
                GetAssetRental();

                if (data.Description && data.Description !== "") {
                    data.Description = replaceHtmlText(data.Description);
                    $("#tddesc").html(data.Description);
                }
                else
                    $("#tddesc").html("");

                if ((IsSupperAdmin || isAllowed) && canAddReading() && canEditAsset) {
                    if (data.OnRoad) {
                        $('#btnodometeradd').show();
                        $('#btnenginehoursadd').hide();
                    }
                    else {
                        $('#btnodometeradd').hide();
                        $('#btnenginehoursadd').show();
                    }
                }
            }, function (err) {
                showloading(false);
            });
        }

        function createScheduledMaintenanceTd() {
            $('#td_scheduledmaintenance').empty();
            var ttd = $('#td_scheduledmaintenance');
            var div = $('<div class="div_titlte">' + GetTextByKey("P_MV_SCHEDULEDMAINTENANCE", "Scheduled Maintenance") + '</div>');
            var tab = $('<table style="width: 100%;"></table>');
            ttd.append(div);
            ttd.append(tab);
            var tr = $('<tr></tr>');
            tab.append(tr);
            var td = $('<td colspan="2" id="td_lastinspection" style="display: none;"></td>');
            tr.append(td);
            var b = $('<b>' + GetTextByKey("P_MV_LASTINSPECTION_COLON", "Last Inspection:") + ' </b>');
            td.append(b);
            b = $('<b><a href="#" id="a_lastinspection"></a></b>');
            td.append(b);

            tr = $('<tr></tr>');
            tab.append(tr);
            td = $('<td class="td_pm">' + GetTextByKey("P_MV_REVENTATIVEMAINTENANCEPLAN_COLON", "PM Plan: ") + '</td>');
            tr.append(td);
            td = $('<td><span id="sppmplan"></span></td>');
            tr.append(td);
            td = $('<td></td>');
            tr.append(td);
            var span = $('<span id="btnaddplan" class="iconasset" style="cursor: pointer; margin-left: 8px;width:30px;" onclick="showPMSchedules();"></span>').attr('title', GetTextByKey("P_MV_EDITPLAN", "Edit Plan"));
            td.append(span);

            tr = $('<tr id="tr_nextservice" style="display: none;"></tr>');
            tab.append(tr);
            td = $('<td class="td_pm" style="font-weight:unset;">' + GetTextByKey("P_MV_NEXTSERVICE_COLON", "Next Service: ") + '</td>');
            tr.append(td);
            td = $('<td colspan="2" id="td_nextservice"></span></td>');
            tr.append(td);

            tr = $('<tr></tr>');
            tab.append(tr);
            td = $('<td colspan="3" id="td_maintenancerecord" style="display: none;"></td>');
            tr.append(td);
        }

        function createRentalInfomationTd() {
            $('#td_rental').empty();
            var ttd = $('#td_rental');
            var div = $('<div class="div_titlte">' + GetTextByKey("P_MV_RENTALINFORMATION", "Rental Information") + '</div>');
            var tab = $('<table style="width: 100%;"></table>');
            ttd.append(div);
            ttd.append(tab);
            var tr = $('<tr></tr>');
            tab.append(tr);
            var td = $('<td style="width: 80px;">' + GetTextByKey("P_MV_STARTDATE_COLON", "Start Date:") + '</td>');
            tr.append(td);
            var span = $('<span style="margin-left: 5px;"  id="rental_startdate"></span>');
            td.append(span);

            tr = $('<tr></tr>');
            tab.append(tr);
            td = $('<td style="width: 110px;" >' + GetTextByKey("P_MV_PROJECTRETURNDATE_COLON", "Proj Return Date:") + '</td>');
            tr.append(td);
            var span = $('<span style="margin-left: 5px;" id="rental_projreturndate"></span>');
            td.append(span);

            tr = $('<tr></tr>');
            tab.append(tr);
            td = $('<td style="width: 110px;"> ' + GetTextByKey("P_MV_RENTALSTATUS_COLON", "Rental Status:") + '</td>');
            tr.append(td);
            var span = $('<span style="margin-left: 5px;" id="rental_rentalstatus"></span>');
            td.append(span);
        }

        function createGridTd(type) {
            var width = 400;
            var title = "";
            if (type === "alerts") {
                width = 450;
                title = GetTextByKey("P_MV_ALERTLAST14DAYS", "Alerts Last 14 Days");
            }
            else if (type === "assetstatus") {
                width = 400;
                title = GetTextByKey("P_MV_ASSETSTATUS", "Asset Status");
            }
            else if (type === "utilization") {
                width = 500;
                title = GetTextByKey("P_MV_UTILIZATION", "Utilization");
            }

            var td = $('#td_' + type);
            td.empty();
            var div = $('<div class="div_titlte">' + title + '</div>');
            //div.css('width', width);
            td.append(div);
            div = $('<div style="height: 150px;" id="div' + type + '"></div>');
            //div.css('width', width);
            td.append(div);
        }
        function showFuelLevelChart(height, value) {
            //  基于准备好的dom，初始化echarts实例
            var p = $("#assetfuelleveldiv");
            p.empty().show();

            p.append($("<div></div>").text(GetTextByKey("P_MV_FUEL", "Fuel")));
            var bar = $("<div></div>").css("height", height).css("width", 30).css("border", "2px #0079c1 solid").css("position", "relative");
            p.append(bar);

            var topbar = $("<div></div>").css("height", height * (1 - value / 100));
            bar.append(topbar);
            var bottombar = $("<div></div>").css("height", height * (value / 100));
            bar.append(bottombar);
            if (value > 40)
                bottombar.css("background-color", "#91c7ae");
            else if (value > 25)
                bottombar.css("background-color", "#ffc000");
            else
                bottombar.css("background-color", "#ff0000");

            for (var i = 0; i < 10; i++) {
                var cell = $("<div></div>").css("height", height / 10).css("border-bottom", "1px #0079c1 solid")
                    .css("width", "100%").css("position", "absolute").css("top", i * height / 10);
                bar.append(cell);
            }
            p.append($("<div></div>").text(value + "%"));
        }

        function showLocationInfo(asset) {
            var loc = asset.CurrentLocation;
            if (asset.OnRoad && (loc.Speed > 0 || (loc.Speed == 0 && asset.MoveStatus != 0))) {
                var speedtext = "";
                if (loc.Speed == 0) {
                    if (asset.MoveStatus == 2)
                        speedtext = "Stopped On";
                    else if (asset.MoveStatus == 3)
                        speedtext = "Stopped Off";
                }
                showSpeedChart(loc.Speed, loc.PostedSpeedLimit, loc.SpeedUnits, speedtext);
            }
        }

        var speedChart;
        function showSpeedChart(speed, postspeed, units, speedtext) {
            var max = Math.max(speed, postspeed);
            max = (parseInt(max / 25) + 1) * 25;
            if (postspeed <= 0)
                postspeed = max;
            $("#assetspeeddiv").show();
            //  基于准备好的dom，初始化echarts实例
            if (!speedChart)
                speedChart = echarts.init(document.getElementById("assetspeeddiv"));

            option = {
                tooltip: {
                    formatter: '{c} {b}'
                },
                toolbox: {
                },
                //backgroundColor: 'black',
                series: [
                    {
                        name: units,
                        type: 'gauge',
                        max: max,
                        detail: {
                            //formatter: '{value}',
                            formatter: function (value) {
                                var v = value + " " + units
                                if (speedtext != "")
                                    v += "\r\n\r\n" + speedtext
                                return v;
                            },
                            offsetCenter: speedtext != "" ? ["0", "60%"] : ["0", "40%"],
                            fontSize: 10,
                            color: speedtext != "" ? "black" : "auto"
                        },
                        data: [{ value: speed.toFixed(0)/*, name: units*/ }],
                        radius: "98%",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 10,
                                //color: [[postspeed / max, '#91c7ae'], [1, '#c23531']]
                                color: [[postspeed / max, '#91c7ae'], [1, '#ff0000']]
                            }
                        },
                        splitLine: {
                            show: true,
                            length: 12
                        },
                        axisTick: {
                            splitNumber: 2
                        },
                        axisLabel: {
                            show: true,
                            fontSize: 9,
                            //fontWeight: "bold",
                            distance: 3,
                            formatter: function (value) {
                                return value.toFixed(0);
                            },
                        },
                        title: {
                            fontSize: 9,
                            offsetCenter: ["0", -15]
                        }
                    }
                ]
            };
            speedChart.setOption(option, true);
        }

        function canAddReading() {
            if (!assetdata)
                return false;
            if (assetdata.ShareStatus == 2)
                return false;
            if (!assetdata.TelematicsEnabled)
                return true;
            else {
                if (assetdata.OnRoad)
                    return assetdata.CurrentOdometer.IsEmpty ||
                        assetdata.CurrentOdometer.DataSource.toLowerCase() == "calamp" ||
                        assetdata.CurrentOdometer.DataSource.toLowerCase() == "pedigree";

                else
                    return assetdata.CurrentHours.IsEmpty ||
                        assetdata.CurrentHours.DataSource.toLowerCase() == "calamp" ||
                        assetdata.CurrentHours.DataSource.toLowerCase() == "pedigree";
            }
        }

        var PMAlertMessages = undefined;

        function GetPMInfo() {
            showloading(true);
            $('#sppmplan').text("");
            //$('#pm_description').text("");
            $("#btnPMMsgExp").hide();
            assetrequest("GetPMInfo", contractorid + String.fromCharCode(170) + assetid, function (data) {
                showloading(false);
                if (typeof (data) === "string") {
                    ;
                    return;
                }
                var pmstr = GetTextByKey("P_MV_NOPLANASSIGNED", "No Plan Assigned.");
                if (data.ScheduleNames && data.ScheduleNames.length > 0)
                    pmstr = data.ScheduleNames;
                $('#sppmplan').text(pmstr);

                SetDivIconHeight();
            }, function (err) {
                showloading(false);
            });
        }

        function showPMAlertMessages() {
            var pmdesc = ""
            if (PMAlertMessages && PMAlertMessages.length > 0) {
                var max = PMAlertMessages.length;
                if ($("#btnPMMsgExp").hasClass("iconchevronleft"))
                    max = 3;
                for (var i = 0; i < PMAlertMessages.length && i < max; i++) {
                    var msg = PMAlertMessages[i];
                    if (msg.indexOf("OVERDUE") == 0)
                        pmdesc += "<font color='#FF0000'>" + msg + "</font><br/>";
                    else
                        pmdesc += msg + "<br/>";
                }
                $('#pm_description').html(pmdesc);
            }
        }

        function showPMAlertExpend() {
            var btn = $("#btnPMMsgExp");
            if (btn.hasClass("iconchevrondown")) {
                btn.removeClass("iconchevrondown").addClass("iconchevronleft");
            }
            else {
                btn.removeClass("iconchevronleft").addClass("iconchevrondown");
            }

            showPMAlertMessages();
        };

        function GetAssetExtInfo(rentaldata) {
            showloading(true);
            assetrequest("GetAssetExtInfo", contractorid + String.fromCharCode(170) + assetid, function (data) {
                showloading(false);
                if (typeof (data) === "string") {
                    return;
                }
                CreateScheduledMaintenance(data);
                if (rentaldata) {
                    createRentalInfomationTd();
                    ShowAssetRental(rentaldata);
                }
                createGrid(data);
                SetDivIconHeight();
            }, function (err) {
                showloading(false);
            });
        }

        function GetAssetRental() {
            assetrequest("GetAssetRental", contractorid + String.fromCharCode(170) + assetid, function (data) {
                if (typeof (data) === "string") {
                    return;
                }

                GetAssetExtInfo(data);
            }, function (err) {
            });
        }

        function ShowAssetRental(rental) {
            $('#tab_rentalinformation').show();
            $('#rental_startdate').text(rental.RentalDateStr);
            $('#rental_projreturndate').text(rental.ProjectReturnDateStr);
            if (rental.ProjectReturnDateStr !== "" && rental.ReturnDateStr === "")
                $('#rental_projreturndate').css('color', 'red');
            else
                $('#rental_projreturndate').css('color', 'black');
            $('#rental_rentalstatus').text(rental.RentalStatus);
            if (rental.RentalStatus.toLowerCase() === "overdue")
                $('#rental_rentalstatus').css('color', 'red');
            else
                $('#rental_rentalstatus').css('color', 'black');
        }

        function CreateScheduledMaintenance(data) {
            if (canViewPM) {
                createScheduledMaintenanceTd();
                if (canViewInspection && data.InspectReportItem && data.InspectReportItem.Id !== "") {
                    $('#td_lastinspection').show();
                    $('#a_lastinspection').text(data.InspectReportItem.CommitTimeStr);
                    $('#a_lastinspection').click(function () {
                        window.open("../Inspection/Report.aspx?rid=" + data.InspectReportItem.Id, "_blank");
                    });
                }
                else {
                    $('#td_lastinspection').hide();
                    $('#a_lastinspection').text('');
                }

                if (canViewPM && data.PMPlanItems && data.PMPlanItems.length > 0) {
                    var tr = $("#tr_nextservice");
                    tr.show();
                    var td = $('#td_nextservice');
                    td.empty();
                    for (var i = 0; i < data.PMPlanItems.length; i++) {
                        var pmplan = data.PMPlanItems[i];
                        var label = $('<label></label>').text(pmplan.NextPlanDetail);
                        if (pmplan.LastAlertUnAddressed)
                            label.css('color', 'red');
                        td.append(label);
                        td.append('<br />');
                    }
                }
                else {
                    $('#tr_nextservice').hide();
                    $('#td_nextservice').empty();
                }

                if (canViewPM && data.MaintenanceRecordItem && data.MaintenanceRecordItem.ID) {
                    var item = data.MaintenanceRecordItem;
                    var td = $('#td_maintenancerecord');
                    td.show();
                    td.empty();
                    var b = $('<lable>' + GetTextByKey("P_MV_LASTCOMPLETED_COLON", "Last Completed:") + ' </lable>');
                    td.append(b);
                    var label = $('<label></label>').text(item.LastCompletedText);
                    td.append(label).append('<br />');
                }
                else {
                    $('#td_maintenancerecord').hide();
                    $('#td_maintenancerecord').empty();
                }

                GetPMInfo();
            }
        }

        function createGrid(data) {
            if ((canViewInspection || canViewAlertsManagement)
                && data.AlertItems && data.AlertItems.length > 0) {
                createGridTd("alerts");
                $('#divalerts').show();
                InitAlertsGridData();
                showAlertsList(data.AlertItems);
            }

            if (data.AssetStatusItems && data.AssetStatusItems.length > 0) {
                createGridTd("assetstatus");
                InitAssetStatusGridData();
                showAssetStatusList(data.AssetStatusItems);
            }
        }

        function OnEditAsset() {
            window.parent.OnEditAsset(contractorid, assetid);
        }

        function OnViewWorkOrder() {
            window.parent.OnViewWorkOrder(contractorid, assetid);
        }

        function OnViewMaintenanceRecord() {
            window.parent.OnViewMaintenanceRecord(contractorid, assetid);
        }

        function OnViewMaintenanceRecord() {
            window.parent.OnViewMaintenanceRecord(contractorid, assetid);
        }

        function doDirections(lat, lng) {
            window.parent.doDirections(lat, lng);
        }

        function doWeather(lat, lng) {
            window.parent.doWeather(lat, lng);
        }

        function openSendLocation(cid, assetid) {
            window.parent.openSendEmails(cid, assetid, 0);
        }

        function doLocationHistory(cid, assetid, name) {
            window.parent.doLocationHistory(cid, assetid, name);
        }

        function OnViewAlertsManagement(ctrid, assetid) {
            window.parent.OnViewAlertsManagement(ctrid, assetid);
        }

        function OnViewFuelRecords(ctrid, assetid) {
            window.parent.OnViewFuelRecords(ctrid, assetid);
        }

        function SetDivIconHeight() {
            var ah = $('#assetinfo').height();
            if (ah)
                $('#div_icon').css('height', ah - 10);

            //var imgw = $('#td_img').width();
            //if (imgw)
            //    $('#div_img').css('width', imgw);

        }

        //************************Add Reading**************************************//

        function GetUserPermission() {
            devicerequest("GetUserPermission", contractorid, function (data) {
                if (typeof (data) === "string") {
                    showAlert(data, 'Error');
                    return;
                }
                isAllowed = data;
            }, function (err) {
            })
        }

        function initTime() {
            var c = $('#dialogadd_timehour');
            for (var i = 0; i < 24; i++) {
                if (i < 10)
                    c.append($("<option></option>").val("0" + i).text("0" + i))
                else
                    c.append($("<option></option>").val(i).text(i))
            }
            c = $('#dialogadd_timeminute');
            for (var i = 0; i < 60; i++) {
                if (i < 10)
                    c.append($("<option></option>").val("0" + i).text("0" + i))
                else
                    c.append($("<option></option>").val(i).text(i))
            }
            c = $('#dialogaddenginehours_timehour');
            for (var i = 0; i < 24; i++) {
                if (i < 10)
                    c.append($("<option></option>").val("0" + i).text("0" + i))
                else
                    c.append($("<option></option>").val(i).text(i))
            }
            c = $('#dialogaddenginehours_timeminute');
            for (var i = 0; i < 60; i++) {
                if (i < 10)
                    c.append($("<option></option>").val("0" + i).text("0" + i))
                else
                    c.append($("<option></option>").val(i).text(i))
            }
        }

        function initTimeZone() {
            devicerequest("GetTimeZones", "", function (data) {
                if (data) {
                    var sel2 = $("#dialogadd_odometertimezone");
                    sel2.empty();
                    var sel3 = $("#dialogadd_enginehourstimezone");
                    sel3.empty();
                    if (data && data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            sel2.append($("<option></option>").val(data[i].Key).text("(" + data[i].Value + ")" + data[i].Key).attr("offset", data[i].Tag1));
                            sel3.append($("<option></option>").val(data[i].Key).text("(" + data[i].Value + ")" + data[i].Key).attr("offset", data[i].Tag1));
                        }
                    }
                    sel2.val("UTC");
                    sel3.val("UTC");
                }
            }, function (err) {
            });
        }

        function getCustomerTimeZone() {
            assetrequest1("GetCustomerTimeZone", contractorid, function (data) {
                if (data) {
                    customertimezone = data.Key;
                    customerdatetime = data.Value;

                    var datetime = customerdatetime.split(' ');
                    var time = datetime[0];
                    var st = datetime[1].split(':');
                    var hours = st[0].length == 1 ? "0" + st[0] : st[0];
                    var minutes = st[1];

                    $("#dialogadd_odometertimezone").val(customertimezone);
                    $('#dialogadd_odometerdate').val(time);
                    $('#dialogadd_timehour').val(hours);
                    $('#dialogadd_timeminute').val(minutes);

                    $("#dialogadd_enginehourstimezone").val(customertimezone);
                    $('#dialogaddenginehours_date').val(time);
                    $('#dialogaddenginehours_timehour').val(hours);
                    $('#dialogaddenginehours_timeminute').val(minutes);
                }
            }, function (err) {
            });
        }


        function setIconBr(div_icon) {
            var br = '<br />';
            //if (_this.type == 0)
            div_icon.append(br);
        }

        function createAssetIcon(asset) {
            var loc = asset.CurrentLocation;
            var div_icon = $('#div_icon');
            div_icon.empty();
            var span = $('<span class="icondirection" style="cursor: pointer;"  onclick="doDirections(' + loc.Latitude + ',\'' + loc.Longitude + '\')"  title="' + GetTextByKey("P_MV_DIRECTIONS", "Directions") + '"></span>');
            div_icon.append(span);
            setIconBr(div_icon);
            if (loc.FromSmartWitness && enableSmartWitness) {
                span = $("<span class='iconvideo' style='cursor:pointer;' onclick='openRequestVideoDialog(" + asset.ID + ")' title='" + GetTextByKey("P_MV_VIDEOREQUEST", "Video Request") + "'></span>");
                div_icon.append(span);
                setIconBr(div_icon);
            }
            span = $("<span class='iconmail' style='cursor:pointer;' onclick='openSendLocation(\"" + contractorid + "\"," + asset.ID + ")' title='" + GetTextByKey("P_MV_SENDLOCATION", "Send Location") + "'></span>");
            div_icon.append(span);
            setIconBr(div_icon);
            //assetLocations[asset.ID] = loc;

            span = $('<span class="iconweather" style="cursor: pointer; " onclick="doWeather(' + loc.Latitude + ',\'' + loc.Longitude + '\')"  title="' + GetTextByKey("P_MV_WEATHER", "Weather") + '"></span>');
            div_icon.append(span);
            setIconBr(div_icon);
            if (canEditAsset) {
                span = $('<span class="iconasset" style="cursor: pointer; " onclick="OnEditAsset(\'' + contractorid + '\',\'' + asset.ID + '\')"  title="' + GetTextByKey("P_MV_EDITASSET", "Edit Asset") + '"></span>');
                div_icon.append(span);
                setIconBr(div_icon);
            }
            if (canViewWorkOrder) {
                span = $('<span class="iconmapworkorder" style="cursor: pointer; " onclick="OnViewWorkOrder(\'' + contractorid + '\',\'' + asset.ID + '\')"  title="' + GetTextByKey("P_MV_WORKORDERS", "Work Orders") + '"></span>');
                div_icon.append(span);
                setIconBr(div_icon);
            }
            if (canViewMR) {
                span = $('<span class="iconmaintenancerecord" style="cursor: pointer; " onclick="OnViewMaintenanceRecord(\'' + contractorid + '\',\'' + asset.ID + '\')"  title="' + GetTextByKey("P_MV_MAINTENANCERECORD", "Maintenance Record") + '"></span>');
                div_icon.append(span);
                setIconBr(div_icon);
            }
            span = $('<span class="iconlochis" style="cursor: pointer; " onclick="doLocationHistory(\'' + contractorid + '\',' + asset.ID + ', \'' + encodeURIComponent(asset.DisplayName).replace("'", "\\'") + '\')" title="' + GetTextByKey("P_MA_LOCATIONHISTORY", "Location History") + '" data-asset=' + asset + '></span>');
            div_icon.append(span);
            setIconBr(div_icon);

            if (canViewAlertsManagement) {
                span = $('<span class="iconmapmanagealerts" style="cursor: pointer; " onclick="OnViewAlertsManagement(\'' + contractorid + '\',\'' + asset.ID + '\')"  title="' + GetTextByKey("P_ALERTSMANAGEMENT", "Alerts Management") + '"></span>');
                div_icon.append(span);
                setIconBr(div_icon);
            }
            if (canViewFuelRecords) {
                span = $('<span class="iconmapfuelrecord" style="cursor: pointer; " onclick="OnViewFuelRecords(\'' + contractorid + '\',\'' + asset.ID + '\')"  title="' + GetTextByKey("P_FUELRECORDS", "Fuel Records") + '"></span>');
                div_icon.append(span);
                setIconBr(div_icon);
            }

            if (asset.AttachmentCount > 0) {
                span = $('<span class="iconatta" style="cursor: pointer;"  title="' + GetTextByKey("P_WO_ATTACHMENTS", "Attachments") + '"></span>');
                span.click(asset.ID, function (e) {
                    getAssetMapAttachments(e.data);
                });
                div_icon.append(span);
                setIconBr(div_icon);
            }
        }

        var grid_alertsdt;
        function showAlertsList(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                for (var j in r) {
                    if (j === "AlertLocalTime")
                        r[j] = { DisplayValue: r["AlertLocalTimeStr"], Value: r[j] };
                }
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_alertsdt.setData(rows);
        }

        function InitAlertsGridData() {
            grid_alertsdt = new GridView('#divalerts');
            grid_alertsdt.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'AlertLocalDateStr', caption: GetTextByKey("P_MV_DATE", "Date"), valueIndex: 'AlertLocalDateStr', css: { 'width': 70, 'text-align': 'left' } },
                { name: 'AlertLocalTimeStr', caption: GetTextByKey("P_MV_TIME", "Time"), valueIndex: 'AlertLocalTimeStr', css: { 'width': 75, 'text-align': 'left' } },
                { name: 'Level', caption: GetTextByKey("P_MV_LEVEL", "Level"), valueIndex: 'Level', css: { 'width': 60, 'text-align': 'left' } },
                { name: 'Description', caption: GetTextByKey("P_MV_DESCRIPTION", "Description"), valueIndex: 'Description', css: { 'width': 200, 'text-align': 'left' } }
            ];
            var columns = [];
            // head
            for (var hd in list_columns) {
                var col = {};
                col.name = list_columns[hd].name;
                col.caption = list_columns[hd].caption;
                col.visible = true;
                col.sortable = true;
                col.width = list_columns[hd].css.width;
                col.align = list_columns[hd].css["text-align"]
                col.key = list_columns[hd].valueIndex;
                col.allowFilter = list_columns[hd].allowFilter;
                columns.push(col);
            }
            grid_alertsdt.canMultiSelect = false;
            grid_alertsdt.columns = columns;
            grid_alertsdt.init();

            grid_alertsdt.selectedrowchanged = function (rowindex) {
                var rowdata = grid_alertsdt.source[rowindex];
                if (rowdata) {
                }
            }
        }

        var grid_assetstatusdt;
        function showAssetStatusList(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                for (var j in r) {
                    if (j === "EventLocalTime")
                        r[j] = { DisplayValue: r["EventLocalTimeStr"], Value: r[j] };
                }
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_assetstatusdt.setData(rows);
        }

        function InitAssetStatusGridData() {
            grid_assetstatusdt = new GridView('#divassetstatus');
            grid_assetstatusdt.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'EventLocalTime', caption: GetTextByKey("P_MV_DATE", "Date"), valueIndex: 'EventLocalTime', css: { 'width': 100, 'text-align': 'left' } },
                { name: 'AttributeName', caption: GetTextByKey("P_MV_READING", "Reading"), valueIndex: 'AttributeName', css: { 'width': 120, 'text-align': 'left' } },
                { name: 'Result', caption: GetTextByKey("P_MV_RESULT", "Result"), valueIndex: 'Result', css: { 'width': 150, 'text-align': 'left' } }
            ];
            var columns = [];
            // head
            for (var hd in list_columns) {
                var col = {};
                col.name = list_columns[hd].name;
                col.caption = list_columns[hd].caption;
                col.visible = true;
                col.sortable = true;
                col.width = list_columns[hd].css.width;
                col.align = list_columns[hd].css["text-align"]
                col.key = list_columns[hd].valueIndex;
                col.allowFilter = list_columns[hd].allowFilter;
                columns.push(col);
            }
            grid_assetstatusdt.canMultiSelect = false;
            grid_assetstatusdt.columns = columns;
            grid_assetstatusdt.init();

            grid_assetstatusdt.selectedrowchanged = function (rowindex) {
                var rowdata = grid_assetstatusdt.source[rowindex];
                if (rowdata) {
                }
            }
        }


        var grid_utilizationdt;
        function showUtilizationList(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                for (var j in r) {
                    if (j === "AlertLocalTime")
                        r[j] = { DisplayValue: r["AlertLocalTimeStr"], Value: r[j] };
                }
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_utilizationdt.setData(rows);
        }

        function InitUtilizationGridData() {
            grid_utilizationdt = new GridView('#divutilization');
            grid_utilizationdt.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'AlertLocalTime', caption: "", valueIndex: 'AlertLocalTime', css: { 'width': 70, 'text-align': 'left' } },
                { name: 'TotalHours', caption: GetTextByKey("P_MV_TOTALHOURS", "Total Hours"), TotalHours: 'Level', css: { 'width': 80, 'text-align': 'left' } },
                { name: 'WorkingHours', caption: GetTextByKey("P_MV_TOTALHOURS", "Working Hours"), TotalHours: 'WorkingHours', css: { 'width': 100, 'text-align': 'left' } },
                { name: 'IdleHours', caption: GetTextByKey("P_MV_IDLEHOURS", "Idle Hours"), TotalHours: 'IdleHours', css: { 'width': 80, 'text-align': 'left' } },
                { name: 'IdleHours', caption: GetTextByKey("P_MV_IDLEHOURS", "Idle %"), TotalHours: 'IdleHours', css: { 'width': 80, 'text-align': 'left' } }
            ];
            var columns = [];
            // head
            for (var hd in list_columns) {
                var col = {};
                col.name = list_columns[hd].name;
                col.caption = list_columns[hd].caption;
                col.visible = true;
                col.sortable = true;
                col.width = list_columns[hd].css.width;
                col.align = list_columns[hd].css["text-align"]
                col.key = list_columns[hd].valueIndex;
                col.allowFilter = list_columns[hd].allowFilter;
                columns.push(col);
            }
            grid_utilizationdt.canMultiSelect = false;
            grid_utilizationdt.columns = columns;
            grid_utilizationdt.init();

            grid_utilizationdt.selectedrowchanged = function (rowindex) {
                var rowdata = grid_utilizationdt.source[rowindex];
                if (rowdata) {
                }
            }
        }

        function getNowFormatDate() {
            assetrequest("GetNowFormatDate", '', function (data) {
                $("#refreshTimeDiv").text(GetTextByKey("P_MV_LASTREFRESHED", "Last Refreshed: ") + data);

            }, function (err) {
            });
        }

        /** Assets Attachment **/
        var imgTypes = [".jfif", ".jpg", ".jpeg", ".bmp", ".png", ".tiff", ".gif"];
        var printTypes = ['.pdf', ".jfif", ".jpg", ".jpeg", ".bmp", ".png", ".tiff", ".gif"];//types to be loaded to print
        function getAssetMapAttachments(assetid) {
            showmaskbg(true);
            $('#dialog_assetattachments').css({
                'top': (document.documentElement.clientHeight - $('#dialog_assetattachments').height()) / 4,
                'left': (document.documentElement.clientWidth - $('#dialog_assetattachments').width()) / 2
            }).showDialogfixed();

            var div_aatts = $("#divassetattachments").empty();
            div_aatts.find(".attachmentsmask").show();
            assetrequest("GetAssetMapAttachments", JSON.stringify([contractorid, assetid]), function (data) {
                div_aatts.find(".attachmentsmask").hide();
                if (data && data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        var att = data[i];
                        if (imgTypes.indexOf(att.FileType.toLowerCase()) >= 0)
                            att.ThumbnailUrl = att.Url + "&thumb=1";
                        var div = createAttaDiv(att);

                        if ($.inArray(att.FileType.toLowerCase(), printTypes) >= 0) {
                            var sprint = $('<span class="attaprint"></span>').attr('title', GetTextByKey("P_WO_PRINT", 'Print')).click(att, function (e) {
                                openPrintFrame(e.data.AttachmentType, e.data.AttachmentIdStr);
                            });
                            div.append(sprint);
                        }

                        if (att.FileType.toLowerCase() != "url") {
                            var sdownload = $('<span class="attadownload"></span>').attr('title', GetTextByKey("P_WO_DOWNLOAD", 'Download')).click(att, function (e) {
                                openDownloadFrame(e.data.Url + "&d=1");
                            });
                            div.append(sdownload);
                        }

                        div_aatts.append(div);
                    }
                }
            }, function () {
                div_aatts.find(".attachmentsmask").hide();
            });
        }

        function createAttaDiv(att, iswoatta) {
            var div = $('<div class="divatt"></div>').attr('title', att.Name);

            if (!att.FileType || att.FileType == "") att.FileType = ".jpg";
            if (imgTypes.indexOf(att.FileType.toLowerCase()) >= 0) {
                var pic = $('<img class="picture"></img>').attr('src', att.ThumbnailUrl);
                pic.click(att, function (e) {
                    window.open(e.data.Url, "_blank")
                });
                div.append(pic);
            }
            else {
                var sdown = $('<img class="picture" />').click(att, function (e) {
                    window.open(e.data.Url);
                });
                setAttachemntIcon(att.FileType, sdown);
                div.append(sdown);
            }
            return div
        }

        function setAttachemntIcon(filetype, sdown) {
            if ([".doc", ".docx"].indexOf(filetype) >= 0) {
                sdown.attr('src', '../img/icon/word.jpg')
            } else if ([".xls", ".xlsx"].indexOf(filetype) >= 0) {
                sdown.attr('src', '../img/icon/excel.jpg')
            } else if ([".ppt", ".pptx"].indexOf(filetype) >= 0) {
                sdown.attr('src', '../img/icon/ppt.jpg')
            } else if ([".pdf", ".xps"].indexOf(filetype) >= 0) {
                sdown.attr('src', '../img/icon/pdf.jpg')
            } else if ([".mp4", ".mov", ".avi", ".mkv", ".3gp", ".ts", ".m2ts"].indexOf(filetype) >= 0) {
                sdown.attr('src', '../img/icon/vedio.jpg')
            } else if ([".zip", ".rar", ".7z"].indexOf(filetype) >= 0) {
                sdown.attr('src', '../img/icon/zip.jpg')
            } else if ([".msg"].indexOf(filetype) >= 0) {
                sdown.attr('src', '../img/icon/msg.jpg')
            } else if ([".xml"].indexOf(filetype) >= 0) {
                sdown.attr('src', '../img/icon/xml.jpg')
            } else {
                sdown.attr('src', '../img/icon/txt.jpg')
            }
        }
        /** End Assets Attachment **/
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="mask_bg" style="display: none;">
        <div class="loading c-spin"></div>
    </div>
    <div>
        <div class="clear"></div>
        <div id="divcontent" style="overflow: auto; font-size: 13px;">
            <div class="titlePane">
                <span>&nbsp;</span>
                <%--<span class="iconprevious titleButton prev" id="btnNext" onclick="OnPrevious();"></span>
                            <span class="iconnext titleButton next" id="btnPrevious" onclick="OnNext();"></span>--%>
                <span class="iconclose titleButton close" onclick="OnClose();"></span>
            </div>
            <div>
                <div id="div_icon" class="divicon">
                </div>
                <div id="div_assetcontent" style="padding-left: 72px;">
                    <table style="width: 100%;" id="assetinfo">
                        <tr>
                            <%--<td style="width: 30%; padding: 10px; border: 1px solid black; text-align:center;">--%>
                            <td style="width: 30%; padding: 10px;">
                                <div id="div_img" style="border: 1px solid black; min-width: 320px; width: 100%; height: 250px; text-align: center; vertical-align: middle;">
                                    <img v-bind:src="asset.AssetIconUrl" style="height: 248px; max-width: 100%; max-height: 100%;" />
                                </div>
                            </td>
                            <td style="width: 35%; vertical-align: top; min-width: 300px;">
                                <table>
                                    <tr>
                                        <td style="width: 60%; line-height: 20px;">
                                            <b style="font-size: 16px;">{{asset.DisplayName}}</b>
                                            <br />
                                            <label data-lgid="P_MA_ASSETTYPE_COLON">Asset Type:</label>
                                            <label>{{asset.TypeName}}</label>
                                            <br />
                                            <b class="assetlable" data-lgid="P_MV_MAKE_COLON">Make:</b>
                                            <b>{{asset.MakeName}}</b>
                                            <b class="assetlable" data-lgid="P_MV_MODEL_COLON">Model:</b>
                                            <b>{{asset.ModelName}}</b>
                                            <br />
                                            <label data-lgid="P_MV_VINSN_COLON">VIN/SN:</label>
                                            <label>{{asset.VIN}}</label>
                                            <br />
                                            <label data-lgid="P_MV_YEAR_COLON">Year:</label>
                                            <label>{{asset.MakeYear>0?asset.MakeYear:""}}</label>
                                            <br />
                                            <b data-lgid="P_MV_GROUPS_COLON">Group(s):</b>
                                            <label>{{asset.GroupNames}}</label>
                                            <br />
                                            <br />
                                            <span id="span_currentoperator" style="display: none;">
                                                <label data-lgid="P_MV_CURRENTOPERATOR_COLON">Current Operator:</label>
                                                <label>{{asset.CurrentOperator}}</label>
                                                <br />
                                                <br />
                                            </span>
                                            <b data-lgid="P_MV_DESCRIPTION_COLON">Description:</b>
                                            <label id="tddesc"></label>
                                        </td>
                                        <td style="width: 40%; text-align: right; vertical-align: top;">
                                            <br />
                                            <b style="font-size: 14px;" data-lgid="P_MV_ODOMETER_COLON" v-bind:style="{display: asset.OnRoad?'': 'none'}">Odometer:</b>
                                            <b style="font-size: 14px;" data-lgid="P_MV_HOURS_COLON" v-bind:style="{display: asset.OnRoad?'none': ''}">Hours:</b>
                                            <b style="font-size: 14px;">{{asset.OnRoad?formatNumber(asset.CurrentOdometer.Corrected): formatNumber(asset.CurrentHours.Corrected)}} </b>
                                            <span id="btnodometeradd" class="assetsummaryplus" style="display: none; cursor: pointer;" onclick="openAddOdometer();"></span>
                                            <span id="btnenginehoursadd" class="assetsummaryplus" style="display: none; cursor: pointer;" onclick="openAddEnginHours();"></span>
                                            <br />
                                            <label v-bind:style="{color: (asset.OnRoad?asset.CurrentOdometer.AsofTimeOverdue: asset.CurrentHours.AsofTimeOverdue)?'red': 'black'}">(as of {{asset.OnRoad?asset.CurrentOdometer.AsofTimeLocalStr: asset.CurrentHours.AsofTimeLocalStr}})</label>
                                        </td>
                                    </tr>
                                </table>
                                <table>
                                    <tr id="tr_alerts" style="display: none;">
                                        <td><span title="Idle hours for last 14 calendar days." data-title-lgid="P_MV_IDLEHOURSFORLAST14CALENDARDAYS" data-lgid="P_MV_LDLEHOURS">ldle Hours:</span></td>
                                        <td>{{asset.CurrentIdleHours.Hours}}</td>
                                    </tr>
                                </table>
                            </td>
                            <td style="width: 35%; vertical-align: top;">
                                <table style="width: 100%;">
                                    <tr>
                                        <td style="vertical-align: top; position: relative;">
                                            <iframe id="ifmapview" style="width: 100%; min-width: 320px; height: 260px; border: 1px;"></iframe>
                                            <div id="assetfuelleveldiv" style="position: absolute; top: 5px; right: 20px;"></div>
                                            <div id="assetspeeddiv" style="position: absolute; top: 105px; right: 10px; width: 130px; height: 135px; background-color: white;"></div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr style="vertical-align: top; height: 150px;">
                            <td id="td_scheduledmaintenance" style="padding: 0px 10px;"></td>
                            <td id="td_rental" style="padding: 0px 10px;"></td>
                            <td id="td_locationinformation" style="padding: 0px 10px;">
                                <div class="div_titlte" data-lgid="P_MV_LOCATIONASSIGNMENTINFORMATION">Location Assignment Information</div>
                                <b class="assetlable" style="width: 140px;" data-lgid="P_MV_LOCATION_COLON">Location:</b>
                                <b>{{asset.CurrentLocation.Address}}</b>
                                <br />
                                <span id="span_location" style="display: none;">
                                    <label v-bind:style="{color: asset.CurrentLocation.AsofTimeOverdue?'red': 'black'}">(as of {{asset.CurrentLocation.AsofTimeLocalStr}} )</label>
                                    <br />
                                    <br />
                                </span>
                                <b id="refreshTimeDiv"></b>
                                <br />
                                <br />
                                <b data-lgid="P_MV_JOBSITE_COLON">Jobsite:</b>
                                <label>{{asset.CurrentJobSiteNames}}</label>
                            </td>
                        </tr>
                        <tr style="vertical-align: top;">
                            <td id="td_alerts" style="padding: 0px 10px;"></td>
                            <td id="td_assetstatus" style="padding: 0px 10px;"></td>
                            <td id="td_utilization" style="padding: 0px 10px;"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div style="text-align: center; font-weight: 600; font-size: 16px; display: none;">
        <table style="width: 100%;">
            <tr>
                <td data-lgid="P_MV_TOTALHOURS_COLON">Total Hours:</td>
                <td></td>
                <td>|</td>
                <td data-lgid="P_MV_WORKINGHOURS_COLON">Working Hours:</td>
                <td></td>
                <td>|</td>
                <td data-lgid="P_MV_LDLEHOURS">Idle Hours:</td>
                <td></td>
                <td>|</td>
            </tr>
        </table>
    </div>
    <div id="div_timeline" class="div-timeline" style="display: none">
        <div class="function-title" data-lgid="P_MV_TIMELINE">Timeline</div>
        <div class="function-bar">
            <input id="text-date" type="text" />
            <span class="sbutton iconrefresh" onclick="OnRefresh();" data-lgid="P_MV_REFRESH">Refresh</span>
        </div>
        <div style="clear: both"></div>
        <iframe id="iftimeline" class="iframe-timeline"></iframe>
    </div>
    <div id="div_wsp" class="div-wsp">
        <iframe id="ifwsp" class="iframe-wsp"></iframe>
    </div>

    <div class="dialog" id="dialog_addodometer" style="display: none; width: 600px;">
        <div id="addodomask" class="maskbg" style="display: none; z-index: 1;"></div>
        <div class="dialog-title"><span class="title" data-lgid="P_MV_ADDODOMETER">Add Odometer</span><em class="dialog-close"></em></div>
        <div class="dialog-content adjust-content">
            <table style="line-height: 25px; width: 100%;">
                <tr>
                    <td class="label" title="Odometer at time of reading" data-titlt-lgid="P_MV_ODOMETERATTIMEOFREADING" data-lgid="P_MV_ODOMETER_COLON">Odometer:</td>
                    <td>
                        <input type="text" id="dialogadd_odometer" maxlength="8" tabindex="151" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_MV_ODOMETERUOM_COLON">Odometer UOM:</td>
                    <td>
                        <select id="dialogadd_sel_odometeruom" tabindex="152" style="width: 204px; height: 22px;">
                            <option value="Mile" data-lgid="P_MV_MILE">Mile</option>
                            <option value="Kilometre" data-lgid="P_MV_KILOMETER">Kilometer</option>
                        </select></td>
                </tr>
                <tr>
                    <td class="label" title="Time zone of asset reading" data-titlt-lgid="P_MV_TIMEZONEOFASSETREADING" data-lgid="P_MV_TIMEZON_COLON">Time Zone:</td>
                    <td>
                        <select id="dialogadd_odometertimezone" tabindex="153" /></td>
                </tr>
                <tr>
                    <td class="label" title="Date of reading" data-titlt-lgid="P_MV_DATEOFREADING" data-lgid="P_MV_ODOMETERDATE_COLON">Odometer Date:</td>
                    <td>
                        <input type="text" id="dialogadd_odometerdate" maxlength="8" tabindex="154" /></td>
                </tr>
                <tr>
                    <td class="label" title="Time of reading (military)" data-titlt-lgid="P_MV_TIMEOFREADINGMILITARY" data-lgid="P_MV_ODOMETERTIME_COLON">Odometer Time:</td>
                    <td>
                        <select id="dialogadd_timehour" style="width: 48px;" tabindex="155"></select><span style="font-weight: bold;">&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                        <select id="dialogadd_timeminute" style="width: 48px;" tabindex="156"></select></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_MV_NOTES_COLON">Notes:</td>
                    <td>
                        <textarea id="dialogadd_notes" maxlength="1000" tabindex="157" style="width: 420px; height: 100px; margin-top: 3px;"></textarea></td>
                </tr>
            </table>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_MV_CANCEL" class="dialog-close" tabindex="159" />
            <input type="button" onclick="OnAddOdometer();" value="Submit" data-lgid="P_MV_SUBMIT" tabindex="158" />
            <div class="clear"></div>
        </div>
    </div>

    <div class="dialog" id="dialog_addenginehours" style="display: none; width: 600px;">
        <div id="addenginehoursmask" class="maskbg" style="display: none; z-index: 1;"></div>
        <div class="dialog-title"><span class="title" data-lgid="P_MV_ADDOENGINEHOURS">Add Engine Hours</span><em class="dialog-close"></em></div>
        <div class="dialog-content adjust-content">
            <table style="line-height: 28px; width: 100%;">
                <tr>
                    <td class="label" title="Engine Hours at time of reading" data-title-lgid="P_MV_ENGINEHOURSATTIMEOFREADING" data-lgid="P_MV_ENGINEHOURS_COLON">Engine Hours:</td>
                    <td>
                        <input type="text" id="dialogaddgenginehours_enginehours" maxlength="8" tabindex="171" /></td>
                </tr>
                <tr>
                    <td class="label" title="Time zone of asset reading" data-titlt-lgid="P_MV_TIMEZONEOFASSETREADING" data-lgid="P_MV_TIMEZON_COLON">Time Zone:</td>
                    <td>
                        <select id="dialogadd_enginehourstimezone" tabindex="172" /></td>
                </tr>
                <tr>
                    <td class="label" title="Date of reading" data-titlt-lgid="P_MV_DATEOFREADING" data-lgid="P_MV_ENGINEHOURSDATE_COLON">Engine Hours Date:</td>
                    <td>
                        <input type="text" id="dialogaddenginehours_date" maxlength="8" tabindex="173" /></td>
                </tr>
                <tr>
                    <td class="label" title="Time of reading (military)" data-titlt-lgid="P_MV_TIMEOFREADINGMILITARY" data-lgid="P_MV_ENGINEHOURSTIME_COLON">Engine Hours Time:</td>
                    <td>
                        <select id="dialogaddenginehours_timehour" style="width: 48px;" tabindex="174"></select><span style="font-weight: bold;">&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                        <select id="dialogaddenginehours_timeminute" style="width: 48px;" tabindex="175"></select></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_MV_NOTES_COLON">Notes:</td>
                    <td>
                        <textarea id="dialogaddenginehours_Notes" maxlength="1000" tabindex="176" style="width: 420px; height: 100px; margin-top: 3px;"></textarea></td>
                </tr>
            </table>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_MV_CANCEL" class="dialog-close" tabindex="178" />
            <input type="button" onclick="OnAddEngineHours();" value="Submit" data-lgid="P_MV_SUBMIT" tabindex="177" />
            <div class="clear"></div>
        </div>
    </div>

    <div class="dialog" id="dialog_pmschedulelist" style="display: none; width: 640px;">
        <div id="pmschedulelistmask" class="maskbg" style="display: none; z-index: 1;"></div>
        <div class="dialog-title"><span class="title" data-lgid="P_MV_EDITPLAN">Edit Plan</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <div id="pmschedulelist" style="height: 300px;"></div>
        </div>
        <div class="dialog-func">
            <input type="button" value="OK" data-lgid="P_MV_OK" class="dialog-close" tabindex="178" />
            <%--<input type="button" onclick="OnAddEngineHours();" value="Submit" tabindex="177" />--%>
            <div class="clear"></div>
        </div>
    </div>

    <div class="dialog" id="dialog_pm" style="display: none; min-width: 540px; max-width: 720px; z-index: 2;">
        <div class="dialog-title"><span class="title" data-lgid="P_MV_ADDASSETTOSCHEDULE">Add Asset To Schedule</span><em class="dialog-close"></em></div>
        <div class="dialog-content" style="line-height: 24px; padding-left: 20px; padding-right: 20px;">
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_MV_CANCEL" class="dialog-close" tabindex="201" />
            <input type="button" id="btnSetPMSchedule" value="OK" data-lgid="P_MV_OK" tabindex="200" />
            <div class="clear"></div>
        </div>
    </div>

    <div class="dialog" id="dialog_assetattachments" style="display: none; width: 600px;">
        <div class="dialog-title"><span class="title" data-lgid="P_WO_ATTACHMENTS">Attachments</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <div id="divassetattachments" style="height: 320px; overflow-y: auto;"></div>
        </div>
        <div class="dialog-func">
            <input type="button" value="Close" data-lgid="P_MV_CLOSE" class="dialog-close" tabindex="178" />
            <div class="clear"></div>
        </div>
        <div id="attachmentsmask" class="maskbg" style="display: none;"></div>
    </div>
</asp:Content>