fleet-contractor/Site/MapView.aspx

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

<asp:Content ID="Content1" ContentPlaceHolderID="holder_head" runat="Server">
    <style>
        html,
        body {
            /*font-family: sans-serif;*/
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        /*此页面需要设置z-index*/
        #mask_bg,
        .maskbg {
            z-index: 500;
        }

        #dialog_parameter {
            z-index: 651;
        }

        .dialog {
            z-index: 651;
        }

        #parameter_left {
            background: #f4f4f4;
            height: 100%;
            width: 200px;
            float: left;
            color: #000;
            position: relative;
        }

        div {
            cursor: default;
        }

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

        #iframelochis {
            width: -moz-calc(100% - 20px);
            width: -webkit-calc(100% - 20px);
            width: calc(100% - 20px);
            display: block;
            border: none;
            height: -moz-calc(100% - 40px);
            height: -webkit-calc(100% - 40px);
            height: calc(100% - 40px);
            margin-left: 10px;
            margin-bottom: 10px;
        }

        #routeConfigDiv {
            position: fixed;
            left: 48px;
            top: 60px;
            bottom: 0;
            z-index: 30;
            background-color: white;
            box-shadow: 10px 0 10px rgba(0,0,0,.2);
            color: white;
            overflow-y: auto;
        }

            #routeConfigDiv > .routeConfigTop {
                background-color: #1A73E8;
            }

            #routeConfigDiv > .routeConfigBottom {
                color: black;
                padding-top: 20px;
            }

        .routeConfigBottom > .routeSummary {
            line-height: 30px;
            padding: 0 20px 10px 20px;
            width: 380px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 20px;
        }

            .routeConfigBottom > .routeSummary > .routeSummaryTitle {
                font-size: 1.6em;
                font-weight: 500;
            }

            .routeConfigBottom > .routeSummary > .routeSummaryDetail {
                font-size: 1.2em;
                color: gray;
            }

            .routeConfigBottom > .routeSummary .fa-car {
                font-size: 1.2em;
                padding-right: 6px;
                font-weight: bold;
            }

                .routeConfigBottom > .routeSummary .fa-car::before {
                    content: '\f1b9';
                }

            .routeConfigBottom > .routeSummary .routeSummaryDistance {
                margin-left: 10px;
            }

        .routeConfigBottom > .routeFeature {
            line-height: 30px;
            padding: 0 20px 0 40px;
            position: relative;
            width: 360px;
        }

            .routeConfigBottom > .routeFeature > .fa {
                position: absolute;
                width: 24px;
                height: 24px;
                left: 10px;
                top: 3px;
                line-height: 24px;
                text-align: center;
                font-size: 1.3em;
            }

                .routeConfigBottom > .routeFeature > .fa::before {
                    content: '\f054';
                }

            .routeConfigBottom > .routeFeature > .fa-ship::before {
                content: '\f21a';
            }

            .routeConfigBottom > .routeFeature > .fa-merge-right {
                transform: scaleX(-1);
            }

                .routeConfigBottom > .routeFeature > .fa-merge-right::before,
                .routeConfigBottom > .routeFeature > .fa-merge::before {
                    content: '\f387';
                }

            .routeConfigBottom > .routeFeature > .fa-up::before {
                content: '\f176';
            }

            .routeConfigBottom > .routeFeature > .fa-left::before,
            .routeConfigBottom > .routeFeature > .fa-right::before {
                content: '\f148';
            }

            .routeConfigBottom > .routeFeature > .fa-back::before {
                content: '\f175';
            }

            .routeConfigBottom > .routeFeature > .fa-left {
                transform: rotate(-90deg);
            }

            .routeConfigBottom > .routeFeature > .fa-right {
                transform: scaleX(-1) rotate(-90deg);
            }

            .routeConfigBottom > .routeFeature > .fa-back {
                transform: rotate(180deg);
            }

            .routeConfigBottom > .routeFeature > .routeFeatureMessage {
                font-size: 1.2em;
            }

            .routeConfigBottom > .routeFeature > .routeFeatureDetail {
                color: #aaa;
                position: relative;
                height: 30px;
                font-size: 0.9em;
            }

                .routeConfigBottom > .routeFeature > .routeFeatureDetail > .routeFeatureDetailBorder {
                    border-bottom: 1px solid #ccc;
                    position: absolute;
                    width: 100%;
                    top: 50%;
                }

                .routeConfigBottom > .routeFeature > .routeFeatureDetail > span {
                    background-color: white;
                    position: absolute;
                    padding-right: 10px;
                }

        #routeConfigDiv > .routeConfigBody {
            margin: 10px;
            position: relative;
        }

        #routeDragStopItem {
            position: absolute;
            opacity: 0.6;
            background-color: white;
            color: black;
            line-height: 24px;
            padding: 0 30px;
            width: 294px;
        }

        .routeConfigTitle {
            padding: 10px;
            background-color: #185ABC;
            line-height: 26px;
        }

            .routeConfigTitle > span {
                margin-left: 4px;
                font-size: 14px;
            }

            .routeConfigTitle > .fa {
                float: right;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                cursor: pointer;
            }

            .routeConfigTitle > .fa-close {
                font-size: 1.6em;
                transform: rotate(45deg);
            }

                .routeConfigTitle > .fa-close::before {
                    content: '\f067';
                }

            .routeConfigTitle > .fa-email,
            .routeConfigTitle > .fa-share {
                font-size: 1.2em;
            }

                .routeConfigTitle > .fa-email::before {
                    content: '\f0e0';
                }

                .routeConfigTitle > .fa-share::before {
                    content: '\f1e0';
                }

        .routeConfigBody {
            padding: 0 10px;
        }

        #routeStops {
            max-height: 520px;
            overflow-y: auto;
        }

            #routeStops::-webkit-scrollbar {
                width: 0;
            }

        .routeStopItem {
            border-bottom: 1px solid #ccc;
            padding: 4px 4px 4px 0;
            margin: 6px 0 0 70px;
            position: relative;
        }

            .routeStopItem:first-child {
                margin-top: 0;
            }

            .routeStopItem > .routeStopName {
                border: none;
                outline: none;
                display: block;
                margin-right: 40px;
                width: 280px;
                background-color: transparent;
                color: white;
                /*mix-blend-mode: color-dodge;*/
                box-sizing: border-box;
                height: 24px;
            }

                .routeStopItem > .routeStopName::-moz-selection {
                    background-color: #4a398a;
                }

                .routeStopItem > .routeStopName::selection {
                    background-color: #4a398a;
                }

                .routeStopItem > .routeStopName::placeholder {
                    color: lightgray;
                }

                .routeStopItem > .routeStopName::-moz-placeholder {
                    color: lightgray;
                }

                .routeStopItem > .routeStopName::-webkit-input-placeholder {
                    color: lightgray;
                }

                .routeStopItem > .routeStopName.focusing {
                    background-color: #185ABC;
                    font-weight: bold;
                }

            .routeStopItem > .routeStopItemFunction,
            .routeStopItem > .routeStopItemSortter,
            .routeStopItem > .routeStopItemGrabber {
                position: absolute;
                height: 24px;
            }

            .routeStopItem > .routeStopItemFunction {
                left: -70px;
                width: 20px;
            }

            .routeStopItem > .routeStopItemSortter {
                left: -50px;
                width: 30px;
            }

            .routeStopItem > .routeStopItemGrabber {
                left: -20px;
                width: 20px;
            }

                .routeStopItem > .routeStopItemFunction > .fa,
                .routeStopItem > .routeStopItemSortter > .fa,
                .routeStopItem > .routeStopItemGrabber > .fa {
                    position: absolute;
                    line-height: 24px;
                    font-weight: 500;
                    width: 14px;
                    text-align: center;
                }

            .routeStopItem > .routeStopItemFunction > .fa,
            .routeStopItem > .routeStopItemSortter > .fa {
                cursor: pointer;
            }

            .routeStopItem > .routeStopItemFunction > .fa-lock::before {
                content: '\f30d';
            }

            .routeStopItem > .routeStopItemFunction > .fa-unlock {
                color: #999;
            }

                .routeStopItem > .routeStopItemFunction > .fa-unlock::before {
                    content: '\f3c2';
                }

            .routeStopItem > .routeStopItemSortter > .fa-up::before {
                content: '\f176';
            }

            .routeStopItem > .routeStopItemSortter > .fa-down {
                left: 13px;
            }

                .routeStopItem > .routeStopItemSortter > .fa-down::before {
                    content: '\f175';
                }

            .routeStopItem > .routeStopItemGrabber > .fa-stop {
                font-size: 0.8em;
                /*cursor: grab;*/
            }

                .routeStopItem > .routeStopItemGrabber > .fa-stop::before {
                    content: '\f111';
                }

            .routeStopItem > .routeStopItemGrabber > .fa-stop-end::before {
                content: '\f3c5';
            }

            .routeStopItem > .routeStopItemGrabber > .fa-dot {
                margin-top: 16px;
            }

                .routeStopItem > .routeStopItemGrabber > .fa-dot::before {
                    content: '\f142';
                }

            .routeStopItem > .fa {
                float: right;
                width: 20px;
                line-height: 20px;
                text-align: center;
                cursor: pointer;
                font-size: 1.3em;
            }

                .routeStopItem > .routeStopItemFunction > .fa:hover,
                .routeStopItem > .routeStopItemSortter > .fa:hover,
                .routeStopItem > .fa:hover {
                    color: orangered;
                }

            .routeStopItem > .fa-pick {
                position: absolute;
                right: 20px;
            }

                .routeStopItem > .fa-pick::before {
                    content: '\f05b';
                }

            .routeStopItem > .fa-remove {
                transform: rotate(45deg);
                width: 15px;
            }

                .routeStopItem > .fa-remove::before {
                    content: '\f067';
                }

        #routePlaces,
        #routeCurrentLocation {
            position: absolute;
            line-height: 30px;
            background-color: white;
            color: black;
            width: 280px;
            z-index: 1;
            box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
        }

            #routePlaces > div {
                white-space: nowrap;
                overflow-x: hidden;
                text-overflow: ellipsis;
            }

                #routePlaces > div:hover,
                #routeCurrentLocation:hover {
                    background-color: #ddd;
                    cursor: pointer;
                }

            #routePlaces .fa-place,
            #routeCurrentLocation > .fa-location {
                margin: 0 8px 0 10px;
                font-weight: 500;
            }

                #routePlaces .fa-place::before {
                    content: '\f3c5';
                }

                #routeCurrentLocation > .fa-location::before {
                    content: '\f601';
                }

        #routeAddStop {
            line-height: 24px;
            cursor: pointer;
            float: left;
        }

            #routeAddStop:hover {
                color: #999;
            }

        .routeButton {
            padding: 6px 20px;
            border: none;
            background-color: #185ABC;
            color: white;
            cursor: pointer;
            width: 160px;
        }

            .routeButton:hover {
                background-color: #195BCC;
            }

        .routeConfigBody .fa-loading {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 1.6em;
            line-height: 28px;
        }

            .routeConfigBody .fa-loading::before {
                content: '\f3f4';
            }

        .routeCategory {
            /*border: 1px solid #ccc;*/
            padding: 10px;
            margin-top: 20px;
        }

            .routeCategory > div {
                line-height: 24px;
            }

            .routeCategory .routeRadio,
            .routeCategory .routeCheckbox {
                visibility: hidden;
            }

                .routeCategory .routeRadio + span,
                .routeCategory .routeCheckbox + span {
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    line-height: 12px;
                    position: absolute;
                    top: 7px;
                    left: 3px;
                    font-weight: 500;
                    font-size: 13px;
                }

                .routeCategory .routeCheckbox + span {
                    font-size: 14px;
                }

                .routeCategory .routeRadio:checked + span::before {
                    content: '\f192';
                }

                .routeCategory .routeRadio + span::before {
                    content: '\f111';
                }

                .routeCategory .routeCheckbox:checked + span::before {
                    content: '\f14a';
                }

                .routeCategory .routeCheckbox + span::before {
                    content: '\f0c8';
                }

        #btnToggleTimeline {
            font-family: FontAwesome;
            font-size: 1.2em;
            font-weight: bold;
            border: none;
            background-color: transparent;
            position: absolute;
        }
    </style>
    <link rel="stylesheet" href="<%=GetFileUrlWithVersion("js/contextmenu/jquery.contextMenu.min.css")%>" />
    <link rel="stylesheet" href="<%=GetFileUrlWithVersion("css/split_sub.css")%>" />
    <link rel="stylesheet" href="<%=GetFileUrlWithVersion("css/mapview.css")%>" />
    <link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/css/esri.css" />
    <link rel="stylesheet" href="<%=GetFileUrlWithVersion("css/jquery.datetimepicker.css")%>" />
    <link rel="stylesheet" href="<%=GetFileUrlWithVersion("css/playbar.css")%>" />
    <link rel="stylesheet" href="<%=GetFileUrlWithVersion("fic/fic/css/form.css")%>" />
    <style type="text/css">
        .context-menu-icon.context-menu-hover {
            background-color: #ccc;
            color: black;
        }

            .context-menu-icon.context-menu-hover:before {
                background-color: #ccc;
                color: black;
            }
    </style>
    <script>
        //必须放在地图js之前
        var dojoConfig = {
            paths: {
                extras1: location.pathname.replace(/\/[^/]+$/, "") + "/js/mapview"
            },
            cacheBust: true
        };
    </script>
    <script src="<%=GetFileUrlWithVersion("js/jquery.datetimepicker.full.js")%>"></script>
    <script src="<%=GetFileUrlWithVersion("js/contextmenu/jquery.contextMenu.min.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("js/contextmenu/jquery.ui.position.min.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("js/vue.min.js")%>"></script>
    <script src="<%=GetFileUrlWithVersion("js/echarts.min.js")%>"></script>
    <script src="<%=GetFileUrlWithVersion("js/compass.js")%>"></script>
    <script>Vue.config.productionTip = false; Vue.config.silent = true;</script>
    <script src="https://js.arcgis.com/3.44"></script>
    <%--<script src="<%=GetFileUrlWithVersion("js/mapinit3.19.js")%>"></script>--%>
    <script src="<%=GetFileUrlWithVersion("js/mapview/mapview.min.js")%>"></script>
    <%--mapview.min.js 不能包含clusterlayer.js--%>
    <script src="<%=GetFileUrlWithVersion("fic/js/utility.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("fic/fic/js/controls/form.js") %>"></script>
    <script src="<%=GetFileUrlWithVersion("js/language.js")%>"></script>
    <script src="<%=GetFileUrlWithVersion("js/assetsummary.js")%>"></script>
    <script src="<%=GetFileUrlWithVersion("js/jobsitesummary.js")%>"></script>

    <script type="text/javascript">
        var IsDealer = <%=IsDealer?"true":"false"%>;
        var companyid = "<%=CompanyID%>";//当前公司id,调API时需传入CompanyId
        var companyids = "";//选中的公司id，Contractor站点为空
        var leftCtrlWidth = 420;
        var rightCtrlWidth = 320;
        var mapHelper;
        var isMapLoaded = false;
        var hasContractor = false;
        var canShowLocationHistory = false;
        var machineAlert, jobSiteAlert;
        var userParams = undefined;
        var assetObject = undefined;
        var jobsiteObject = undefined;
        var pivotsDialogOpend = false;

        var serVersion = "";
        var notShowDetail = false;
        var notShowIcons = false;
        var Datasource = "";

        var currentTabIndex = 0;
        var enableSmartWitness = <%=EnableSmartWitness?"true":"false"%>;
        var canEditAsset = <%=CanEditAsset?"true":"false"%>;
        var canEditJobsite = <%=CanEditJobsite?"true":"false"%>;
        var canViewWorkOrder = <%=CanViewWorkOrder?"true":"false"%>;
        var canViewMR = <%=CanViewMR?"true":"false"%>;
        var canViewAlertsManagement = <%=CanViewAlertsManagement?"true":"false"%>;
        var canViewFuelRecords = <%=CanViewFuelRecords?"true":"false"%>;
        var canViewInspection = <%=CanViewInspection?"true":"false"%>;
        var canViewPM = <%=CanViewPM?"true":"false"%>;
        var showTooltipIcons = true;
        var MSGWebSocketURL = "<%=MSGWebSocketURL%>";
        var AiNotifyAddress = "<%=AiNotifyAddress%>";
        var MapViewSearchAssetsApiAddress = "<%=MapViewSearchAssetsApiAddress%>";
        var MapViewQueryViewAssetsApiAddress = "<%=MapViewQueryViewAssetsApiAddress%>";

        var IsSupperAdmin =<%=IsSupperAdmin ?"true":"false"%>;
        var isAllowed = <%=CanAjdustAttr ?"true":"false"%>;
        var currentdate = "<%=CurrentDate %>";

        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 systemrequest(method, param, callback, error) {
            _network.request("SystemSettings/SystemOptions.aspx", -1, method, param, callback, error || function (e) {
                console.log(e);
                showmaskbg(false, true);
                showAlert(GetTextByKey('P_WO_PAGEERROR', 'An unknown error occurred.  Please refresh page.'), GetTextByKey('P_WO_QUERY', 'Query'));
            });
        }

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

        function refreshData(isauto) {
            if (pivotsDialogOpend)//在设置Pivot时，不刷新数据
                return;
            if (isauto && PopupViewShowing)//显示AssetView，不自动刷新数据
                return;
            if (PopupViewShowing)//手动刷新数据，关闭AssetView
                closePopupView();

            try {
                if (machineAlert) {
                    _dialog.close(machineAlert);
                    machineAlert = null;
                }
                assetObject.searchMachine1(isauto);
            }
            catch (e) {
                machineAlert = _dialog.showAlert(GetTextByKey("P_MV_UNABLETOOBTAINASSETDATAATTEMPTINGTORECONNECT", 'Unable to obtain asset data.  Attempting to reconnect...'), GetTextByKey("P_MV_REFRESHASSETDATA", 'Refresh asset data'));
            }

            getShapeFileInfos();
        }

        var systemunitofodometer;
        function GetSystemUnitOfOdometer() {
            systemrequest("GetSystemUnitOfOdometer", "", function (data) {
                systemunitofodometer = data;
                $('#dialogadd_sel_odometeruom').val(systemunitofodometer);
            }, function (err) {
            });
        }

        var emailUrl = void 0;
        $(function () {
            setPageTitle(GetTextByKey("P_MODULE_MAPVIEW", 'Map View'), false);
            setFavoriteDisplay(true, 100);
            GetSystemUnitOfOdometer();

            InitGridData();

            $(window).resize(function () {
                resiezrightCtrl();
            });

            var tabs = ["tabMachines", "tabJobSiets", "tabAssetGroups", "tabShapes"];

            init();
            initPlayBar();

            $('#selContractor').dropdown([], {
                search: false,
                multiselect: true,
                valueKey: 'Key',
                textKey: 'Value'
            }).on('collapsed', function () {
                var cids = $('#selContractor').dropdownVals();
                if (cids)
                    companyids = cids.join(",");
                else
                    companyids = "";
                BasicAssetsExpire = true;

                $("#selMapAlertLayer").empty();
                $("#tbLegend").empty();
                userParams.MapViewContratorID = companyids;
                setUserParams();

                clearLocationHistory();
                $("#locationhistoryDiv").hide();
                resiezrightCtrl();
                $("#tripDiv").hide();

                refreshData(false);
            });

            getCustomerTimeZone();
            $("#dateTo").datetimepicker({
                timepicker: false,
                format: 'm/d/Y',
                scrollMonth: false,
                scrollTime: false,
                scrollInput: false,
            });
            $("#dateFrom").datetimepicker({
                timepicker: false,
                format: 'm/d/Y',
                scrollMonth: false,
                scrollTime: false,
                scrollInput: false,
            });
            $("#dialog_videodate").datetimepicker({
                timepicker: false,
                format: 'm/d/Y',
                scrollMonth: false,
                scrollTime: false,
                scrollInput: false,
            });

            $("#dialog_videoct").change(null, function (e) {
                var ct = $("#dialog_videoct").prop("checked")
                $("#dialog_videodate").prop("disabled", !ct);
                $("#dialog_videohour").prop("disabled", !ct);
                $("#dialog_videominute").prop("disabled", !ct);
            });

            $("#btnMachineSearch").click(null, function (e) {
                if (isMapLoaded) {
                    if (PopupViewShowing)//手动刷新数据，关闭AssetView
                        closePopupView();
                    assetObject.searchMachine1(false);
                }
            });

            $("#txtMachineSearchText").keydown(function (e) {
                if (e.keyCode == 13) {
                    $("#btnMachineSearch").click();
                }
            });

            $("#btnJobSiteSearch").click(null, function (e) {
                if (isMapLoaded) {
                    if (PopupViewShowing)//手动刷新数据，关闭AssetView
                        closePopupView();
                    jobsiteObject.searchJobSite(false);
                }
            });

            $("#txtJobSiteSearchText").keydown(function (e) {
                if (e.keyCode == 13) {
                    $("#btnJobSiteSearch").click();
                }
            });

            $("#btnAssetGroupSearch").click(null, function (e) {
                if (isMapLoaded) {
                    if (PopupViewShowing)//手动刷新数据，关闭AssetView
                        closePopupView();
                    assetObject.getAssetGroups(false);
                }
            });

            $("#txtAssetGroupSearchText").keydown(function (e) {
                if (e.keyCode == 13) {
                    $("#btnAssetGroupSearch").click();
                }
            });

            $("#btnShapeSearch").click(null, function (e) {
                if (isMapLoaded) {
                    if (PopupViewShowing)//手动刷新数据，关闭AssetView
                        closePopupView();
                    getShapeFileInfos();
                }
            });

            $("#txtShapeSearchText").keydown(function (e) {
                if (e.keyCode == 13) {
                    $("#btnShapeSearch").click();
                }
            });

            $("#chkSelectAll").click(null, function (e) {
                jobsiteObject.selectAllJobsites($("#chkSelectAll").prop("checked"));
            });

            $("#chkSelectAllAssetGroup").click(null, function (e) {
                assetObject.selectAllAssetGroups($("#chkSelectAllAssetGroup").prop("checked"));
            });

            $("#chkSelectAllShape").click(null, function (e) {
                $("#shapeList").children().each(function () {
                    var shapechk = $(this).children(":first");
                    if (shapechk.prop("checked") != $("#chkSelectAllShape").prop("checked"))
                        shapechk.click();
                });
            });

            $("#tabMachines").click(null, function (e) {
                tabChanged(e);
                if (assetObject != null) {
                    assetObject.onscrollAssets();
                    $('#contentCtrl').scrollTop(0);
                    assetObject.refreshAssetList();
                }
            });

            $("#tabJobSiets").click(null, function (e) {
                tabChanged(e);
                if (jobsiteObject != null) {
                    jobsiteObject.onscrollJobsiteMachines();
                    $('#contentCtrl').scrollTop(0);
                    jobsiteObject.refreshJobsiteList();
                }
            });

            $("#tabAssetGroups").click(null, function (e) {
                tabChanged(e);
                if (assetObject != null) {
                    assetObject.onscrollGroupMachines();
                    $('#contentCtrl').scrollTop(0);
                    assetObject.refreshAssetGroupList();
                }
            });

            $("#tabShapes").click(null, function (e) {
                tabChanged(e);
            });

            $("#btnSaveSearchDetault").click(null, function (e) {
                userParams.Onroad = $("#selOnroad").val();
                userParams.Attachment = $("#selAttachment").val();
                userParams.AssetDefaultSearch = $('#txtMachineSearchText').val();
                userParams.JobSiteDefaultSearch = $('#txtJobSiteSearchText').val();
                userParams.AssetGroupDefaultSearch = $('#txtAssetGroupSearchText').val();
                userParams.ExcludeNoLocation = $("#exclude00Div").attr("state") != "0";// $("#chkExcludeNoLoc").prop("checked");
                userParams.UnShownMachines = assetObject.getUnShownMachines();
                userParams.UnShownJobsites = jobsiteObject.getUnShownJobsites();
                userParams.UnShownJobsiteMachines = jobsiteObject.getUnShownMachines();

                setUserParams();
            });

            $('#btnToggleTimeline').on('click', function () {
                if ($('#divtimelineview').is(':visible')) {
                    closePopupView();
                    return;
                }

                $("#divtimelineview").show();
                $("#divmapview").hide();
                execIframeFunc("OnRefresh", [companyids], "iftimelineview");
                PopupViewShowing = true;

                clearLocationHistory();//关闭历史记录
                $("#locationhistoryDiv").hide();
                resiezrightCtrl();
                $("#tripDiv").hide();
            });

            $("#btnLoadSearchDetault").click(null, function (e) {
                var searches = userParams.MapViewSearches;

                if (!searches || searches.length == 0) {
                    _dialog.showAlert(GetTextByKey("P_MV_YOUHAVENOSAVEDSEARCHES", 'You have no saved searches.'), '');
                    return;
                }
                var search = getDefaultSearch(searches);
                if (!search) {
                    showConfirm(GetTextByKey("P_MV_YOUHAVENODEFAULTSERACH", 'You have no default serach. Would you like to view your saved searches?'), '', function () {
                        openSavedSearches();
                    });
                }
                else {
                    setSavedSearche(search);
                    refreshData(false);
                }
            });

            function getDefaultSearch(searches) {
                if (searches) {
                    for (var i = 0; i < searches.length; i++) {
                        if (searches[i].IsDefault)
                            return searches[i];
                    }
                }
                return null;
            }

            $(".showall").click(null, function (e) {
                $("#selOnroad").val("-1");
                $("#selAttachment").val("-1");
                $('#txtMachineSearchText').val("");
                $('#txtJobSiteSearchText').val("");
                $('#txtAssetGroupSearchText').val("");
                //$('#chkExcludeNoLoc').prop("checked", false);
                setExclude00(false);
                assetObject.setUnShownMachines([]);
                jobsiteObject.setUnShownJobsites([]);
                jobsiteObject.setUnShownMachines([]);

                resetMachineState();
                refreshData(false);
            });

            $('#btnLoadTrip').click(null, function () {
                openTrips();
                getLocationHistory(true);
            });
            $('#selLocDatasource').on('change', function () {
                changeLocDatasource();
                userParams.BreadcrumbLocationSource = $("#selLocDatasource").val();
                setUserParams();
            });
            $('#btnTheftModeReload').on('click', function () {
                getLocationHistory(true);
            });

            $("#btnClearLocationHistory").click(null, function (e) {
                clearLocationHistory();
                $("#locationhistoryDiv").hide();
                resiezrightCtrl();
                $("#tripDiv").hide();

                if (selectedAsset)
                    selectedAsset.State.Highlight = false;
            });

            $("#btnClearTrip").click(null, function (e) {
                $("#tripDiv").hide();
                $("#tbTrips").empty();
            });

            //$('#btnClearTheft').on('click', function () {
            //    exitTheftMode(true);
            //    if ($.playBar.onPlayClick) {
            //        $.playBar.onPlayClick(true);
            //    }
            //});

            $("#selOnroad").change(null, function (e) {
                refreshData(false);
            });

            $("#selAttachment").change(null, function (e) {
                refreshData(false);
            });

            $("#chkExcludeNoLoc").change(null, function (e) {
                refreshData(false);
            });

            $("#showDealerLocationsDiv").click(null, function (e) {
                if ($("#showDealerLocationsDiv").attr("state") == "1")
                    setCookie("ShowDealerLocations", "0");
                else
                    setCookie("ShowDealerLocations", "1");

                setDealerLocations(getCookie("ShowDealerLocations") !== "0");
            });

            function setDealerLocations(on) {
                if (on) {
                    $("#showDealerLocationsDiv").attr("state", "1").attr("title", GetTextByKey("P_MV_TURNOFFDEALERLOCATIONS", "Turn Off Dealer Locations"));
                    $("#showDealerLocationsPanel").css("background-color", "#ffffff");
                    if (assetObject)
                        assetObject.showLocations();
                }
                else {
                    $("#showDealerLocationsDiv").attr("state", "0").attr("title", GetTextByKey("P_MV_TURNONDEALERLOCATIONS", "Turn On Dealer Locations"));
                    $("#showDealerLocationsPanel").css("background-color", "#cbcbcb");
                    if (assetObject)
                        assetObject.clearLocations();
                }
            }

            $("#showTrafficDiv").click(null, function (e) {
                if ($("#showTrafficDiv").attr("state") == "1")
                    setCookie("ShowTraffic", "0");
                else
                    setCookie("ShowTraffic", "1");

                setTraffic(getCookie("ShowTraffic") !== "0");
            });

            function setTraffic(on) {
                if (on) {
                    mapHelper.showTraffic(true);
                    $("#showTrafficDiv").attr("state", "1").attr("title", GetTextByKey("P_MV_TURNOFFTRAFFIC", "Turn Off Traffic"));
                    $("#showTrafficPanel").css("background-color", "#ffffff");
                    $("#showTrafficicon").css("color", "#579AFC");
                }
                else {
                    mapHelper.showTraffic(false);
                    $("#showTrafficDiv").attr("state", "0").attr("title", GetTextByKey("P_MV_TURNONTRAFFIC", "Turn On Traffic"));
                    $("#showTrafficPanel").css("background-color", "#cbcbcb");
                    $("#showTrafficicon").css("color", "#000000");
                }
            }

            $("#showWeatherDiv").click(null, function (e) {
                if ($("#showWeatherDiv").attr("state") == "1")
                    setCookie("ShowWeather", "0");
                else
                    setCookie("ShowWeather", "1");

                setWeather(getCookie("ShowWeather") !== "0");
            });

            function setWeather(on) {
                if (on) {
                    mapHelper.showWeather(true);
                    $("#showWeatherDiv").attr("state", "1").attr("title", GetTextByKey("P_MV_TURNOFFWEATHER", "Turn Off Weather"));
                    $("#showWeatherPanel").css("background-color", "#ffffff");
                    $("#showWeathericon").css("color", "#579AFC");
                }
                else {
                    mapHelper.showWeather(false);
                    $("#showWeatherDiv").attr("state", "0").attr("title", GetTextByKey("P_MV_TURNONWEATHER", "Turn On Weather"));
                    $("#showWeatherPanel").css("background-color", "#cbcbcb");
                    $("#showWeathericon").css("color", "#000000");
                }
            }

            var routeChanged = false;
            var routeChangeNext = void 0;
            function closeRoutePlaces() {
                $('#routePlaces').hide();
                mapHelper.clearPlaces();
            }

            $('#routeConfigDiv').on('click', function (e) {
                if ($(e.target).parents('#routePlaces').length == 0) {
                    closeRoutePlaces();
                }
            });
            $('#routeConfigDiv').find('.fa-close').on('click', function () {
                $('#routeConfigDiv').hide();
                $('#showRouteBg').css('background-color', '#cbcbcb');
                $('#routeDiv').attr('title', GetTextByKey('P_MV_TURNON_ROUTENAVIGATION', 'Turn On Route Navigation'));
                mapHelper.clearRouteHistory();
            });
            $('#routeDiv').on('click', function () {
                if ($('#routeConfigDiv').is(':visible')) {
                    $('#routeConfigDiv').hide();
                    $('#showRouteBg').css('background-color', '#cbcbcb');
                    $('#routeDiv').attr('title', GetTextByKey('P_MV_TURNON_ROUTENAVIGATION', 'Turn On Route Navigation'));
                    mapHelper.clearRouteHistory();
                } else {
                    $('#routeConfigDiv').show();
                    $('#showRouteBg').css('background-color', 'white');
                    $('#routeDiv').attr('title', GetTextByKey('P_MV_TURNOFF_ROUTENAVIGATION', 'Turn Off Route Navigation'));
                }
            });
            function getGoogleUrlForStops() {
                var stops = [];
                var items = $('#routeStops').children('.routeStopItem');
                for (var i = 0; i < items.length; i++) {
                    var input = $(items[i]).children('.routeStopName');
                    stops.push(encodeURIComponent(input.val()));
                    //var stop = $(items[i]).children('.routeStopName').data('stop');
                    //if (stop != null) {
                    //    if (stop.assetId != null) {
                    //        var pos = mapHelper.getRouteLocationFromAsset(stop.assetId);
                    //        if (pos != null) {
                    //            stop.x = pos.x;
                    //            stop.y = pos.y;
                    //        }
                    //    }
                    //    stops.push(String(stop.y) + ',' + String(stop.x));
                    //}
                }
                if ($('#checkRouteReturnInitial').prop('checked')) {
                    stops.push(encodeURIComponent($(items[0]).children('.routeStopName').val()));
                    //var stop = $(items[0]).children('.routeStopName').data('stop');
                    //if (stop != null) {
                    //    stops.push(String(stop.y) + ',' + String(stop.x));
                    //}
                }
                if (stops.length < 2) {
                    return;
                }
                var url = 'https://www.google.com/maps/dir/?api=1&travelmode=driving';
                url += '&origin=' + stops[0];
                url += '&destination=' + stops[stops.length - 1];
                if (stops.length > 2) {
                    var waypoints = '';
                    for (var i = 1; i < stops.length - 1; i++) {
                        waypoints += '|' + stops[i];
                    }
                    url += '&waypoints=' + waypoints.substring(1);
                }
                return url;
            }

            function sendRouteEmail() {
                _setype = 3;    // route
                var title = GetTextByKey('P_MV_SENDROUTE', 'Send Route');
                grid_dt.columns[2].visible = false;
                grid_dt.init();
                _network.mapviewquery('GetContacts', '', function (data) {
                    showContactList(data);
                }, function () { });
                $('#tr_textaddr').hide();
                $('#sendlocation_otheremailaddress').val('');
                $('#sendlocation_othertextaddress').val('');
                $('#sendlocation_desc').val('');
                showmaskbg(true);
                $('#dialog_sendlocation .dialog-title span.title').text(title);
                $('#dialog_sendlocation')
                    .attr('act', 'edit')
                    .css({
                        'width': 500,
                        'top': (document.documentElement.clientHeight - $('#dialog_sendlocation').height()) / 4,
                        'left': (document.documentElement.clientWidth - $('#dialog_sendlocation').width()) / 2
                    })
                    .showDialogfixed();
            }

            $('#routeConfigDiv').find('.fa-email').on('click', function () {
                if (routeChanged) {
                    routeChangeNext = function () {
                        var url = getGoogleUrlForStops();
                        if (url != null) {
                            emailUrl = url;
                            sendRouteEmail();
                        } else {
                            emailUrl = void 0;
                        }
                    };
                    $('#buttonGetRoute').trigger('click');
                } else {
                    var url = getGoogleUrlForStops();
                    if (url != null) {
                        emailUrl = url;
                        sendRouteEmail();
                    } else {
                        emailUrl = void 0;
                    }
                }
            });
            $('#routeConfigDiv').find('.fa-share').on('click', function () {
                if (routeChanged) {
                    routeChangeNext = function () {
                        var url = getGoogleUrlForStops();
                        if (url != null) {
                            window.open(url);
                        }
                    };
                    $('#buttonGetRoute').trigger('click');
                } else {
                    var url = getGoogleUrlForStops();
                    if (url != null) {
                        window.open(url);
                    }
                }
            });

            function getTimeLabel(time) {
                if (time < 1) {
                    // seconds
                    var seconds = Math.round(time * 60);
                    if (seconds > 0) {
                        return seconds + ' ' + GetTextByKey('P_MV_SECONDS', 'seconds');
                    }
                    //} else if (seconds > 0) {
                    //    return seconds + ' second';
                    //}
                    return '';
                } else if (time < 100) {
                    var minutes = Math.round(time);
                    //if (minutes > 1) {
                    return minutes + ' ' + GetTextByKey('P_MV_MINUTES', 'minutes');
                    //} else {
                    //    return minutes + ' minute';
                    //}
                } else {
                    var hours = Math.round(time / 60);
                    //if (hours > 1) {
                    return hours + ' ' + GetTextByKey('P_MV_HOURS', 'hours');
                    //} else {
                    //    return hours + ' hour';
                    //}
                }
            }

            function getDetailLabel(attributes) {
                var message = getTimeLabel(attributes.time);
                var hasTime = message != null && message.length > 0;
                if (attributes.length > 0) {
                    if (hasTime) {
                        message += ' (';
                    }
                    message += getDistance(attributes.length);
                    if (hasTime) {
                        message += ')';
                    }
                }
                return message;
            }

            function getLabelStyle(ele, attributes) {
                ele.text(attributes.text);
                switch (attributes.maneuverType) {
                    case 'esriDMTDepart':
                    case 'esriDMTStop':
                        ele.css('font-weight', 'bold');
                        break;
                }
                return ele;
            }

            function getRouteFeature(feature) {
                var style;
                switch (feature.attributes.maneuverType) {
                    case 'esriDMTStraight':
                        style = 'fa-up';
                        break;
                    case 'esriDMTFerry':
                        style = 'fa-ship';
                        break;
                    case 'esriDMTRampLeft':
                        style = 'fa-merge';
                        break;
                    case 'esriDMTRampRight':
                        style = 'fa-merge-right';
                        break;
                    case 'esriDMTUTurn':
                        style = 'fa-back';
                        break;
                    case 'esriDMTTurnLeft':
                    case 'esriDMTForkLeft':
                    case 'esriDMTBearLeft':
                    case 'esriDMTSharpLeft':
                    case 'esriDMTTurnRightLeft':
                    case 'esriDMTTurnLeftLeft':
                        style = 'fa-left';
                        break;
                    case 'esriDMTTurnRight':
                    case 'esriDMTForkRight':
                    case 'esriDMTBearRight':
                    case 'esriDMTSharpRight':
                    case 'esriDMTTurnLeftRight':
                    case 'esriDMTTurnRightRight':
                        style = 'fa-right';
                        break;
                }
                var icon = $('<em class="fa"></em>');
                if (style != null) {
                    icon.addClass(style);
                }
                return $('<div class="routeFeature"></div>').append(
                    icon,
                    getLabelStyle($('<span class="routeFeatureMessage"></span>'), feature.attributes),
                    $('<div class="routeFeatureDetail"></div>').append(
                        $('<div class="routeFeatureDetailBorder"></div>'),
                        $('<span></span>').text(getDetailLabel(feature.attributes))
                    )
                );
            }

            function getRouteSummary(direction) {
                return $('<div class="routeSummary"></div>').append(
                    $('<div class="routeSummaryTitle"></div>').text(direction.routeName),
                    $('<div class="routeSummaryDetail"></div>').append(
                        $('<em class="fa fa-car"></em>'),
                        $('<span class="routeSummaryTime"></span>').text(getTimeLabel(direction.summary.totalTime)),
                        $('<span class="routeSummaryDistance"></span>').text('(' + getDistance(direction.summary.totalLength) + ')')
                    )
                );
            }

            function getDistance(length) {
                if (typeof systemunitofodometer !== 'undefined' && systemunitofodometer === 'Kilometre') {
                    var km = length;
                    if (km < 1) {
                        return Math.round(km * 1000) + ' ' + GetTextByKey('P_MV_METER', 'm');
                    }
                    return km.toFixed(2) + ' ' + GetTextByKey('P_MV_KILOMETER', 'km');
                }
                var miles = length;
                var ft = miles * 5280;
                if (ft > 1000) {
                    return miles.toFixed(2) + ' ' + GetTextByKey('P_MV_MILE', 'mi');
                }
                return ft.toFixed(2) + ' ' + GetTextByKey('P_MV_FEET', 'ft');
            }

            function startGettingRoute(next) {
                return function () {
                    if (gettingRoute) {
                        return;
                    }
                    var count = 0;
                    var inputs = $('#routeStops').find('.routeStopName');
                    for (var i = 0; i < inputs.length; i++) {
                        var input = $(inputs[i]);
                        var stop = input.data('stop');
                        if (stop != null && stop.assetId != null) {
                            var pos = mapHelper.getRouteLocationFromAsset(stop.assetId);
                            if (pos != null && (pos.x != stop.x || pos.y != stop.y)) {
                                stop.x = pos.x;
                                stop.y = pos.y;
                                count++;
                                (function (s, inp) {
                                    mapHelper.getRouteFromPositionAsync(pos).then(function (r) {
                                        var label = getAddressLabel(r.address);
                                        s.name = label;
                                        inp.val(label);
                                        count--;
                                    });
                                })(stop, input);
                            }
                        }
                    }

                    if (count > 0) {
                        $('.routeConfigBody .fa-loading').show();
                        console.log('starting resolve asset location name...');
                        var r = setInterval(function () {
                            if (count <= 0) {
                                $('.routeConfigBody .fa-loading').hide();
                                console.log('done.');
                                clearInterval(r);
                                next();
                            }
                        }, 100);
                    } else {
                        next();
                    }
                };
            }

            var gettingRoute = false;
            function getRoute(optimize) {
                return function () {
                    if (gettingRoute) {
                        return;
                    }
                    var stops = {
                        //'spatialReference': {
                        //    'wkid': 102100
                        //},
                        'features': []
                    };
                    var items = $('#routeStops').children('.routeStopItem');
                    for (var i = 0; i < items.length; i++) {
                        var stop = $(items[i]).children('.routeStopName').data('stop');
                        if (stop != null) {
                            //if (stop.assetId != null) {
                            //    var pos = mapHelper.getRouteLocationFromAsset(stop.assetId);
                            //    if (pos != null) {
                            //        stop.x = pos.x;
                            //        stop.y = pos.y;
                            //    }
                            //}
                            stops.features.push({
                                'geometry': {
                                    'x': stop.x,
                                    'y': stop.y
                                },
                                'attributes': {
                                    'Name': stop.name
                                }
                            });
                        }
                    }
                    if ($('#checkRouteReturnInitial').prop('checked')) {
                        var stop = $(items[0]).children('.routeStopName').data('stop');
                        if (stop != null) {
                            stops.features.push({
                                'geometry': {
                                    'x': stop.x,
                                    'y': stop.y
                                },
                                'attributes': {
                                    'Name': stop.name
                                }
                            });
                        }
                    }
                    if (stops.features == null || stops.features.length < 2) {
                        return;
                    }
                    gettingRoute = true;
                    $('.routeConfigBody .fa-loading').show();
                    var url = 'https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World/solve?f=json'; //&stops=' + stops.join('; ');
                    var data = 'stops=' + JSON.stringify(stops);
                    if (optimize) {
                        data += '&findBestSequence=true&returnStops=true';
                        if ($('#routeLockStart').hasClass('fa-unlock')) {
                            data += '&preserveFirstStop=false';
                        }
                        if (!$('#checkRouteReturnInitial').prop('checked') && $('#routeLockEnd').hasClass('fa-unlock')) {
                            data += '&preserveLastStop=false';
                        }
                    }
                    if ($('#radioRouteShortest').prop('checked')) {
                        data += '&impedanceAttributeName=Miles';
                    }
                    // language
                    data += '&directionsLanguage=' + _fleet.currentMapLang;
                    if (typeof systemunitofodometer !== 'undefined' && systemunitofodometer === 'Kilometre') {
                        data += '&directionsLengthUnits=esriNAUKilometers';
                    }
                    data += '&outputGeometryPrecision=20';
                    $.ajax({
                        url: 'proxy/proxy.ashx?' + encodeURIComponent(url),
                        type: 'POST',
                        //processData: false,
                        contentType: 'application/x-www-form-urlencoded',
                        data: data,
                        success: function (result) {
                            gettingRoute = false;
                            $('.routeConfigBody .fa-loading').hide();
                            console.log(result);
                            if (result.error) {
                                var message = result.error.message;
                                if (result.error.details && result.error.details.length > 0) {
                                    message += '\n\n' + result.error.details.join('\n');
                                }
                                _dialog.showAlert(message, GetTextByKey('P_MV_ROUTE_DIRECTION', 'Route Navigation'));
                            } else {
                                var paths = result.routes.features[0].geometry.paths;
                                var start = 0;
                                for (var i = 0; i < paths.length; i++) {
                                    mapHelper.showRouteFromStart(paths[i], start, i == paths.length - 1);
                                    start += paths[i].length;
                                }
                                // directions
                                var container = $('.routeConfigBottom').empty();
                                container.append(getRouteSummary(result.directions[0]));
                                if (result.directions) {
                                    var features = result.directions[0].features;
                                    for (var i = 0; i < features.length; i++) {
                                        container.append(getRouteFeature(features[i]));
                                    }
                                }
                                // stops
                                if (result.stops) {
                                    var features = result.stops.features;
                                    var inputs = $('#routeStops').find('.routeStopName');
                                    features.sort(function (a, b) {
                                        a = a.attributes && a.attributes.Sequence;
                                        b = b.attributes && b.attributes.Sequence;
                                        return a > b ? 1 : a < b ? -1 : 0;
                                    });
                                    if (features.length >= inputs.length) {
                                        var assets = {};
                                        for (var i = 0; i < inputs.length; i++) {
                                            var inp = $(inputs[i]);
                                            var feat = features[i];
                                            var stop = inp.data('stop');
                                            if (stop == null) {
                                                stop = {};
                                            }
                                            stop.x = feat.geometry.x;
                                            stop.y = feat.geometry.y;
                                            if (stop.assetId != null) {
                                                assets[stop.name] = stop.assetId;
                                            }
                                            stop.name = feat.attributes.Name;
                                            inp.val(stop.name);
                                            inp.data('stop', stop);
                                        }
                                        for (var i = 0; i < inputs.length; i++) {
                                            var inp = $(inputs[i]);
                                            var stop = inp.data('stop');
                                            if (stop != null) {
                                                var assetId = assets[stop.name];
                                                if (assetId != null) {
                                                    stop.assetId = assetId;
                                                } else {
                                                    delete stop.assetId;
                                                }
                                            }
                                        }
                                    }
                                }
                                routeChanged = false;
                                if (typeof routeChangeNext === 'function') {
                                    routeChangeNext();
                                    routeChangeNext = void 0;
                                }
                            }
                        },
                        error: function () {
                            gettingRoute = false;
                            $('.routeConfigBody .fa-loading').hide();
                        }
                    });
                };
            }

            $('#buttonGetRoute').on('click', startGettingRoute(getRoute()));
            $('#buttonOptimizeRoute').on('click', startGettingRoute(getRoute(true)));

            $('#routeStops').on('click', function (e) {
                var etarget = $(e.target);
                if (etarget.is('.fa-remove')) {
                    etarget.parent().remove();
                } else if (etarget.is('.fa-pick')) {
                    if (window.currentRouteStop != null) {
                        window.currentRouteStop.removeClass('focusing');
                    }
                    window.currentRouteStop = etarget.parent().children('.routeStopName');
                    var offset = window.currentRouteStop.offsetInParent($('#routeStops'));
                    $('#routeCurrentLocation').css({
                        left: offset.left,
                        top: offset.top + 30
                    }).show();
                    window.currentRouteStop.addClass('focusing');
                    routeChanged = true;
                }
            });
            $('#routeCurrentLocation').on('click', function () {
                $('#routeCurrentLocation').hide();
                navigator.geolocation.getCurrentPosition(function (pos) {
                    mapHelper.getRouteFromPosition(pos.coords);
                }, function (err) {
                    _dialog.showAlert(err.message, GetTextByKey('P_MV_ROUTE_DIRECTION', 'Route Navigation'))
                });
            });

            //$('#routeStops').on('drop', function (e) {
            //    console.log('drop: ', e);
            //});

            var currentDragItem;

            function setupDrag(ele) {
                ele.on('dragstart', function (e) {
                    currentDragItem = $(e.target).parent().parent().children('.routeStopName');
                    $('#routeDragStopItem').text(currentDragItem.val()).css({
                        left: e.originalEvent.clientX - 60,
                        top: e.originalEvent.clientY - 75
                    }).show();
                }).on('drag', function (e) {
                    $('#routeDragStopItem').css({
                        left: e.originalEvent.clientX - 60,
                        top: e.originalEvent.clientY - 75
                    });
                }).on('dragend', function (e) {
                    $('#routeDragStopItem').hide();
                });
                return ele;
            }

            function setupSortUp(ele) {
                ele.on('click', function (e) {
                    var parent = $(e.target).parent().parent();
                    var input = parent.children('.routeStopName');
                    var prevParent = parent.prev();
                    var prev = prevParent.children('.routeStopName');
                    input.detach().appendTo(prevParent);
                    if (prevParent.is('.routeStopItemStart')) {
                        input.attr('placeholder', GetTextByKey('P_MV_ROUTE_STARTLOCATION', 'Starting location or asset'));
                    } else {
                        input.attr('placeholder', GetTextByKey('P_MV_ROUTE_LOCATION', 'Location or asset'));
                    }
                    prev.detach().appendTo(parent);
                    if (parent.is('.routeStopItemEnd')) {
                        prev.attr('placeholder', GetTextByKey('P_MV_ROUTE_ENDLOCATION', 'Ending location or asset'));
                    } else {
                        prev.attr('placeholder', GetTextByKey('P_MV_ROUTE_LOCATION', 'Location or asset'));
                    }
                });
                return ele;
            }
            function setupSortDown(ele) {
                ele.on('click', function (e) {
                    var parent = $(e.target).parent().parent();
                    var input = parent.children('.routeStopName');
                    var nextParent = parent.next();
                    var next = nextParent.children('.routeStopName');
                    input.detach().appendTo(nextParent);
                    if (nextParent.is('.routeStopItemEnd')) {
                        input.attr('placeholder', GetTextByKey('P_MV_ROUTE_ENDLOCATION', 'Ending location or asset'));
                    } else {
                        input.attr('placeholder', GetTextByKey('P_MV_ROUTE_LOCATION', 'Location or asset'));
                    }
                    next.detach().appendTo(parent);
                    if (parent.is('.routeStopItemStart')) {
                        next.attr('placeholder', GetTextByKey('P_MV_ROUTE_STARTLOCATION', 'Starting location or asset'));
                    } else {
                        next.attr('placeholder', GetTextByKey('P_MV_ROUTE_LOCATION', 'Location or asset'));
                    }
                });
                return ele;
            }

            $('#routeStops').find('.fa-stop').each(function () { setupDrag($(this)) });
            $('#routeStops').find('.fa-up').each(function () { setupSortUp($(this)) });
            $('#routeStops').find('.fa-down').each(function () { setupSortDown($(this)) });
            $('#routeStops').find('.fa-lock').each(function () {
                $(this).on('click', function () {
                    var ethis = $(this);
                    if (ethis.hasClass('fa-lock')) {
                        ethis.removeClass('fa-lock');
                        ethis.addClass('fa-unlock');
                    } else if (ethis.hasClass('fa-unlock')) {
                        if (!$('#checkRouteReturnInitial').prop('checked') || !ethis.is('#routeLockEnd')) {
                            ethis.removeClass('fa-unlock');
                            ethis.addClass('fa-lock');
                        }
                    }
                });
            });
            $('#checkRouteReturnInitial').on('change', function () {
                if ($(this).prop('checked')) {
                    if ($('#routeLockEnd').hasClass('fa-lock')) {
                        $('#routeLockEnd').removeClass('fa-lock').addClass('fa-unlock');
                    }
                }
            });

            $('.routeCategory').find('span.fa').each(function () {
                $(this).on('click', function () {
                    $(this).prev().trigger('click');
                });
            });

            $('#routeAddStop').on('click', function () {
                var item = $('<div class="routeStopItem"></div>');
                item.append(
                    $('<div class="routeStopItemSortter"></div>').append(
                        setupSortUp($('<em class="fa fa-up"></em>')),
                        setupSortDown($('<em class="fa fa-down"></em>'))
                    ),
                    $('<div class="routeStopItemGrabber"></div>').append(
                        setupDrag($('<em class="fa fa-stop" draggable="true"></em>')),
                        $('<em class="fa fa-dot"></em>')
                    ),
                    $('<em class="fa fa-remove"></em>'),
                    $('<em class="fa fa-pick"></em>'),
                    $('<input autocomplete="off" class="routeStopName" type="text"></input>')
                        .attr('placeholder', GetTextByKey('P_MV_ROUTE_LOCATION', 'Location or asset'))
                        .on('input', function () { $.throttle(onRouteTyped, 400, this); })
                        .on('change', onRouteChanged)
                );
                item.insertBefore($('#routeStops').children('.routeStopItem').last());
            });
            $('#routeStops').find('.routeStopName').each(function () {
                $(this)
                    .on('input', function () { $.throttle(onRouteTyped, 400, this); })
                    .on('change', onRouteChanged);
            })
            function onRouteChanged() {
                var inputs = $('#routeStops').find('.routeStopName');
                var stops = [];
                for (var i = 0; i < inputs.length; i++) {
                    var stop = $(inputs[i]).data('stop');
                    if (stop != null) {
                        stops.push(stop);
                    }
                }
                console.log('refresh stops', stops);
                mapHelper.showSelection(stops);
            }
            function onRouteTyped() {
                var place = $(this).val();
                var next = showPlaces.bind(this);
                mapHelper.searchPlaces(place, next);
                //navigator.geolocation.getCurrentPosition(function (pos) {
                //    console.log('searching', place, pos.coords);
                //    mapHelper.searchPlaces(place, pos.coords, next);
                //}, function () {
                //    console.log('searching', place);
                //    mapHelper.searchPlaces(place, void 0, next);
                //});
            }
            function getName(addr) {
                var names = [];
                if ((addr.address || '').length > 0) {
                    names.push(addr.address);
                }
                if ((addr.attributes.Place_addr || '').length > 0) {
                    if (addr.attributes.Place_addr != addr.address) {
                        names.push(addr.attributes.Place_addr);
                    }
                }
                return names.join(', ');
            }
            function showPlaces(addrs) {
                var container = $('#routePlaces').data('parent', $(this));
                container.empty();
                if (addrs == null || addrs.length == 0) {
                    container.hide();
                    return;
                }
                for (var i = 0; i < addrs.length; i++) {
                    var addr = addrs[i];
                    var name = getName(addr);
                    var div = $('<div></div>').data('addr', addr);
                    div.append(
                        $('<em class="fa fa-place"></em>'),
                        $('<span></span>').text(name).attr('title', name)
                    );
                    container.append(div);
                }
                var offset = $(this).offsetInParent($('#routeStops'));
                container.css({
                    left: offset.left,
                    top: offset.top + 30
                }).show();
                mapHelper.showPlaces(addrs);
            }
            $('#routePlaces').on('click', function (e) {
                var ele = $(e.target);
                while (!ele.is('div')) {
                    var parent = ele.parent();
                    if (parent == null) {
                        break;
                    }
                    ele = parent;
                }
                var addr = ele.data('addr');
                if (addr == null) {
                    return;
                }
                var input = $('#routePlaces').data('parent');
                if (input == null) {
                    return;
                }
                closeRoutePlaces();
                var name = addr.attributes.Place_addr || addr.address;
                input.val(name).data('stop', {
                    'x': addr.location.x,
                    'y': addr.location.y,
                    'name': name
                }).trigger('change');
            });

            $("#autoRecenterDiv").click(null, function (e) {
                if ($("#autoRecenterDiv").attr("state") == "1")
                    userParams.AutoRecenterMap = false;
                else
                    userParams.AutoRecenterMap = true;
                setUserParams();
                setAutoRecenter(userParams.AutoRecenterMap);
            });

            function setAutoRecenter(on) {
                if (on) {
                    $("#autoRecenterDiv").attr("state", "1").attr("title", GetTextByKey("P_MV_TURNOFFAUTORECENTERMAP", "Turn Off Auto-Recenter Map"));
                    $("#autoRecenterPanel").css("background-color", "#ffffff");
                }
                else {
                    $("#autoRecenterDiv").attr("state", "0").attr("title", GetTextByKey("P_MV_TURNONAUTORECENTERMAP", "Turn On Auto-Recenter Map"));
                    $("#autoRecenterPanel").css("background-color", "#cbcbcb");
                }
            }

            $("#jsTooltipDiv").click(null, function (e) {
                if ($("#jsTooltipDiv").attr("state") == "1")
                    userParams.ShowJSTooltip = false;
                else
                    userParams.ShowJSTooltip = true;
                setUserParams();
                setJSTooltip(userParams.ShowJSTooltip);
            });

            function setJSTooltip(on) {
                if (on) {
                    $("#jsTooltipDiv").attr("state", "1").attr("title", GetTextByKey("P_MV_TURNOFFVISIBILITYOFJOBSITETOOLTIPDURINGMOUSEHOVER", "Turn off visibility of Jobsite Tooltip during mouse hover"));
                    $("#jsTooltipPanel").css("background-color", "#ffffff");
                }
                else {
                    $("#jsTooltipDiv").attr("state", "0").attr("title", GetTextByKey("P_MV_TURNONVISIBILITYOFJOBSITETOOLTIPDURINGMOUSEHOVER", "Turn on visibility of Jobsite Tooltip during mouse hover"));
                    $("#jsTooltipPanel").css("background-color", "#cbcbcb");
                }
            }

            $("#exclude00Div").click(null, function (e) {
                if ($("#exclude00Div").attr("state") == "1")
                    userParams.ExcludeNoLocation = false;
                else
                    userParams.ExcludeNoLocation = true;
                setUserParams();
                setExclude00(userParams.ExcludeNoLocation);
                refreshData(false);
            });

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

            function tabChanged(e) {
                var t = $(e.target);
                $(".tabheaderselected").addClass("tabheader");
                $(".tabheaderselected").removeClass("tabheaderselected");
                t.removeClass("tabheader");
                t.addClass("tabheaderselected");

                var id = t.attr("id");
                if (currentTabIndex != tabs.indexOf(id)) {
                    currentTabIndex = tabs.indexOf(id);
                    gotoTab();
                }
            }

            function gotoTab() {
                if (currentTabIndex == 0) {
                    $("#machineCtrl").show();
                    $("#jobSiteCtrl").hide();
                    $("#assetGroupCtrl").hide();
                    $("#shapeCtrl").hide();

                    $("#machineHeader").show();
                    $("#jobSiteHeader").hide();
                    $("#assetGroupHeader").hide();
                    $("#shapeHeader").hide();
                }
                else if (currentTabIndex == 1) {
                    $("#machineCtrl").hide();
                    $("#jobSiteCtrl").show();
                    $("#assetGroupCtrl").hide();
                    $("#shapeCtrl").hide();

                    $("#machineHeader").hide();
                    $("#jobSiteHeader").show();
                    $("#assetGroupHeader").hide();
                    $("#shapeHeader").hide();
                }
                else if (currentTabIndex == 2) {
                    $("#machineCtrl").hide();
                    $("#jobSiteCtrl").hide();
                    $("#assetGroupCtrl").show();
                    $("#shapeCtrl").hide();

                    $("#machineHeader").hide();
                    $("#jobSiteHeader").hide();
                    $("#assetGroupHeader").show();
                    $("#shapeHeader").hide();
                }
                else if (currentTabIndex == 3) {
                    $("#machineCtrl").hide();
                    $("#jobSiteCtrl").hide();
                    $("#assetGroupCtrl").hide();
                    $("#shapeCtrl").show();

                    $("#machineHeader").hide();
                    $("#jobSiteHeader").hide();
                    $("#assetGroupHeader").hide();
                    $("#shapeHeader").show();
                }
            }

            function init() {
                _network.mapviewquery("GetUserParams", "", function (data) {
                    if (data) {
                        userParams = data;
                        setExclude00(data.ExcludeNoLocation);
                        setJSTooltip(data.ShowJSTooltip);
                        setAutoRecenter(data.AutoRecenterMap);
                        $("#selLocDatasource").val(data.BreadcrumbLocationSource).change();
                    }
                    loadMap();
                });
            }

            function onscrollAssets(e) {
                if (assetObject != null) {
                    if (document.getElementById('machineCtrl').style.display !== 'none') {
                        assetObject.onscrollAssets(e);
                    } else if (document.getElementById('assetGroupCtrl').style.display !== 'none') {
                        assetObject.onscrollGroupMachines(e);
                    }
                }
                if (jobsiteObject != null) {
                    if (document.getElementById('jobSiteCtrl').style.display !== 'none') {
                        jobsiteObject.onscrollJobsiteMachines(e);
                    }
                }
            }

            function loadMap() {
                document.getElementById('contentCtrl').addEventListener('scroll', onscrollAssets, { passive: true });

                mapHelper = new MapHelper(onMapInitialized);
                assetObject = new AssetObject(mapHelper);
                jobsiteObject = new JobsiteObject(mapHelper);

                var search = getDefaultSearch(userParams.MapViewSearches);
                if (search)
                    setSavedSearche(search);
            }

            function onMapInitialized() {
                isMapLoaded = true;
                setDealerLocations(getCookie("ShowDealerLocations") !== "0");//default on
                setTraffic(getCookie("ShowTraffic") == "1");//default off
                setWeather(getCookie("ShowWeather") == "1");//default off
                initData(onDataInitialized);
            }

            function initData(callback) {
                $("#historyCtrl").show();//所有类型站点都显示Show History
                $("#exclude00Div").css("display", "inline-block");
                $("#autoRecenterDiv").css("display", "inline-block");
                $("#jsTooltipDiv").css("display", "inline-block");
                $("#showTrafficDiv").css("display", "inline-block");
                $("#showWeatherDiv").css("display", "inline-block");
                $("#routeDiv").css("display", "inline-block");
                showOtherIcons();

                assetObject.getContractor(callback);
            }

            function onDataInitialized() {
                isMapLoaded = true;
                gotoTab();
                refreshData(true);
                setInterval(function () { refreshData(true) }, userParams.MapRefreshInterval * 1000);//开启定时刷新
                setTimeout(checkServerVersion, 60000);

                if (typeof initaiwebsocket != 'undefined')//屏蔽aisocket
                    initaiwebsocket();
            }

            function checkServerVersion() {//检查服务端版本号，如果服务端已经更新，刷新当前页面
                _network.mapviewquery("GetServerVersion", "", function (data) {
                    if (serVersion != "" && serVersion != data) {
                        setTimeout(function () {
                            window.location.reload(true);
                        })
                        return;
                    }
                    serVersion = data;
                    setTimeout(checkServerVersion, 60000);
                });
            }

            function showOtherIcons() {
                //var leftCtrl = $("#leftCtrl");
                //$("#mapMeunDiv").css("left", leftCtrl.width() + 20);
            }

            $("#selMapAlertLayer").change(null, function (e) {
                userParams.MapAlertLayer = $("#selMapAlertLayer").val();
                setUserParams();
                refreshData();
            });

            $("#splitIcon").click(null, function (e) {
                var leftCtrl = $("#leftCtrl");
                var splitIcon = $("#splitIcon");
                var mapView = $("#mapView");
                var assetView = $("#divassetview");
                var timelineView = $('#divtimelineview');
                var imgc = $("#splitIconImg");
                if (leftCtrl.hasClass("leftCtrl")) {
                    leftCtrl.removeClass("leftCtrl");
                    leftCtrl.width(leftCtrlWidth);
                    splitIcon.css("left", leftCtrlWidth + 1);
                    mapView.css("left", leftCtrlWidth + 1);
                    assetView.css("left", leftCtrlWidth + 1);
                    timelineView.css('left', leftCtrlWidth + 1);
                    imgc.attr("src", "img/left.png");
                }
                else {
                    leftCtrl.addClass("leftCtrl");
                    leftCtrl.width(0);
                    splitIcon.css("left", 1);
                    mapView.css("left", 1);
                    assetView.css("left", 1);
                    timelineView.css('left', 1);
                    imgc.attr("src", "img/right.png");
                }

                $("#contentCtrl").css("top", $("#divleft1").height() + $("#divleft2").height() + 10);
                displayFilerIcon();
                showOtherIcons();
            });

            $("#splitIconRight").click(null, function (e) {
                var rightCtrl = $("#rightCtrl");
                var splitIcon = $("#splitIconRight");
                //var mapView = $("#mapView");
                var imgc = $("#splitIconImgRight");
                if (rightCtrl.hasClass("rightCtrl")) {
                    rightCtrl.removeClass("rightCtrl");
                    rightCtrl.width(rightCtrlWidth);
                    splitIcon.css("right", rightCtrlWidth + 1);
                    //mapView.css("right", rightCtrlWidth + 1);
                    imgc.attr("src", "img/right.png");
                }
                else {
                    rightCtrl.addClass("rightCtrl");
                    rightCtrl.width(0);
                    splitIcon.css("right", 1);
                    //mapView.css("right", 1);
                    imgc.attr("src", "img/left.png");
                }
            });


            $('#dialog_parameter').dialog(function () {
                showmaskbg(false);
                pivotsDialogOpend = false;
            });

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

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

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

            $('#dialog_addenginehours').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]);
                }
            });

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

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

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

            $("#dialog_timeperiod").change(null, function (e) {
                locationTimeperiodChange();
            });

            $('#assetsummary').mouseleave(function (e) {
                var t = $(e.target);
                if (!t.hasClass('iconalertsup') && !t.hasClass('iconalerts')) {
                    $("#assetsummary").hide();
                    $("#assetsummarytrigle").hide();
                }
            });

            window.ondocumentclick = function (e) {
                $(document.body).click();
            };

            //$("#splitIcon").click();
            initTime();
            initTimeZone();
            var time = new Date(currentdate);
            time = (time.getMonth() + 1) + "/" + time.getDate() + "/" + time.getFullYear();
            $('#dateFrom').val(time);
            $('#dateTo').val(time);
            $('#dialog_starttimehour').val('00');
            $('#dialog_starttimeminute').val('00');
            $('#dialog_endtimehour').val('23');
            $('#dialog_endtimeminute').val('59');

            loadHelpTip();

            //$('#sendlocation_othertextaddress').focus(function (e) {
            //    var left = $('#dialog_sendlocation').offset().left + $('#dialog_sendlocation').width() + 2;
            //    var top = $('#dialog_sendlocation').offset().top + $("#dialog_sendlocation").height() - $("#div_tooltip").height() - 9;
            //    $('#div_tooltip').css({ 'display': '', 'left': left, 'top': top });
            //});
            //$('#sendlocation_othertextaddress').blur(function () {
            //    $('#div_tooltip').css('display', 'none');
            //});
        });

        function setExclude00(on) {
            if (on) {
                $("#exclude00Div").attr("state", "1").attr("title", GetTextByKey("P_MV_INCLUDEASSETSWITHNOREPORTEDLOCATION", "Include assets with no reported location(0, 0)"));
                $("#exclude00Panel").css("background-color", "#ffffff");
            }
            else {
                $("#exclude00Div").attr("state", "0").attr("title", GetTextByKey("P_MV_EXCLUDEASSETSWITHNOREPORTEDLOCATION", "Exclude assets with no reported location(0, 0)"));
                $("#exclude00Panel").css("background-color", "#cbcbcb");
            }
        }

        function setTimeSelect(time) {
            if (time.toString().length == 1)
                return "0" + time;
            else
                return time.toString();
        }

        function initTime() {
            var c = $('#dialog_starttimehour');
            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 = $('#dialog_starttimeminute');
            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 = $('#dialog_endtimehour');
            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 = $('#dialog_endtimeminute');
            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))
            }

            var c = $('#dialog_videohour');
            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 = $('#dialog_videominute');
            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 = $('#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 getMachineContacts(cid, assetid) {
            var p = cid + ";" + assetid;

            _network.mapviewquery("GetMachineContacts", p, function (data) {
                showContactList(data);
            }, function () {
            });
        }

        function getJobsiteContacts(cid, jsid) {
            var p = cid + ";" + jsid;

            _network.mapviewquery("GetJobsiteContacts", p, function (data) {
                showContactList(data);
            }, function () {
            });
        }


        function showContactList(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                r.Text = false;
                r.Email = false;
                rows.push(r);
            }

            grid_dt.setData(rows);
        }

        var grid_dt;
        function InitGridData() {
            grid_dt = createGridView('#contactlist');
            var list_columns = [
                { name: 'DisplayName', caption: GetTextByKey("P_MV_CONTACTNAME", "Contact Name"), valueIndex: 'DisplayName', css: { 'width': 148, 'text-align': 'left' } },
                { name: 'ContactTypeName', caption: GetTextByKey("P_MV_CONTACTTYPE", "Contact Type"), valueIndex: 'ContactTypeName', css: { 'width': 148, 'text-align': 'left' } },
                { name: 'Text', caption: GetTextByKey("P_MV_TEXT", "Text"), valueIndex: 'Text', type: 3, css: { 'width': 45, 'text-align': 'center' } },
                { name: 'Email', caption: GetTextByKey("P_MV_EMAIL", "Email"), valueIndex: 'Email', type: 3, css: { 'width': 60, 'text-align': 'center' } }
            ];
            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;
                if (list_columns[hd].type) {
                    col.type = list_columns[hd].type;
                }
                columns.push(col);
                if (col.name === "Text") {
                    col.enabled = function (item) {
                        return item.Mobile !== '';
                    };
                }
                if (col.name === "Email") {
                    col.enabled = function (item) {
                        return item.ID !== '';
                    };
                }
            }
            grid_dt.canMultiSelect = false;
            grid_dt.columns = columns;
            grid_dt.init();
        }

        function CheckEmail(mail) {
            var filter = /^\w[-\w.+]*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if (mail.length == 0)
                return true;
            return filter.test(mail);
        }

        var _seid;
        var _setype;
        function openSendEmails(cid, id, type) {
            _seid = id;
            _setype = type;
            var title = "";
            grid_dt.columns[2].visible = true;
            grid_dt.init();
            if (type == 1) {
                title = GetTextByKey("P_MV_SENDJOBSITE", 'Send Jobsite');
                getJobsiteContacts(cid, id);
            }
            else {
                title = GetTextByKey("P_MV_SENDLOCATION", 'Send Location');
                getMachineContacts(cid, id);
            }
            $('#tr_textaddr').show();
            $('#sendlocation_otheremailaddress').val('');
            $('#sendlocation_othertextaddress').val('');
            if (_setype == 0)
                $('#sendlocation_desc').val('Fleet Intelligence on behalf of [site name]. [User Name] sent directions to [asset name]. Please do not reply to this text.');
            else if (_setype == 1)
                $('#sendlocation_desc').val('Fleet Intelligence on behalf of [site name]. [User Name] sent info to [jobsite]. Please do not reply to this text.');
            else
                $('#sendlocation_desc').val('');
            showmaskbg(true);
            $('#dialog_sendlocation .dialog-title span.title').text(title);
            $('#dialog_sendlocation').data("cid", cid)
                .attr('act', 'edit')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_sendlocation').height()) / 4,
                    'left': (document.documentElement.clientWidth - $('#dialog_sendlocation').width()) / 2
                }).showDialogfixed();
        }

        function onSendEmails() {
            var cid = $('#dialog_sendlocation').data("cid");
            if (grid_dt.source.length == 0) {
                $('#dialog_sendlocation').hideDialog();
                showmaskbg(false);
                return;
            }
            var title = "";
            if (_setype == 1) {
                title = GetTextByKey("P_MV_SENDJOBSITE", 'Send Jobsite');
            }
            else if (_setype == 3) {
                title = GetTextByKey('P_MV_SENDROUTE', 'Send Route');
            }
            else {
                title = GetTextByKey("P_MV_SENDLOCATION", 'Send Location');
            }
            var emailaddress = [];
            var textaddress = [];

            var otheremailaddressstr = $('#sendlocation_otheremailaddress').val();
            if (otheremailaddressstr !== "") {
                var address = otheremailaddressstr.split(';');
                for (var i = 0; i < address.length; i++) {
                    if (!CheckEmail($.trim(address[i]))) {
                        _dialog.showAlert(GetTextByKey("P_MV_OTHEREMAILADDRESSISINVALID", 'The other email address {0} is invalid.').replace('{0}', address[i]), title);
                        return;
                    }
                    emailaddress.push({ 'Key': '', 'Value': address[i] });
                }
            }

            var othertextaddressstr = $('#sendlocation_othertextaddress').val();
            if (othertextaddressstr !== "") {
                var address = othertextaddressstr.split(';');
                for (var i = 0; i < address.length; i++) {
                    if (!checkPhoneNumber($.trim(address[i]))) {
                        _dialog.showAlert(GetTextByKey("P_MV_THEOTHERPHONENUMBERISINVALID", 'The other phone number {0} is invalid.').replace('{0}', address[i]), title);
                        return;
                    }
                    textaddress.push({ 'Key': '', 'Value': address[i] });
                }
            }

            var tempsource = grid_dt.source;
            for (var i = 0; i < tempsource.length; i++) {
                var ct = tempsource[i];
                if (ct.Email) {
                    emailaddress.push({ 'Key': ct.IID, 'Value': ct.ID });
                }
                if (ct.Text && checkPhoneNumber(ct.Mobile)) {
                    textaddress.push({ 'Key': ct.IID, 'Value': ct.Mobile });
                }
            }

            if (emailaddress.length == 0 && textaddress.length == 0) {
                $('#dialog_sendlocation').hideDialog();
                showmaskbg(false);
                return;
            }

            var item = {
                'Type': _setype,
                'CompanyID': cid,
                'ObjectID': _seid,
                'Description': $('#sendlocation_desc').val(),
                'EmailAddress': emailaddress,
                'TextAddress': textaddress
            };
            if (_setype == 3) {
                var body = '<p><a href="' + emailUrl + '" target="_blank">' + GetTextByKey('P_MV_CLICKOPENGOOGLE', '') + '</a></p>';
                body += '<p>' + $('.routeConfigBottom').html() + '</p>';
                item.HtmlBody = body;
                item.Title = $('.routeSummaryTitle').text();
            }

            _network.mapviewquery("SendEmails", htmlencode(JSON.stringify(item)), function (data) {
                if (data === "OK") {
                    _dialog.showAlert(GetTextByKey("P_MV_MESSAGESENT", 'Message sent.'), title);
                }
                else
                    _dialog.showAlert(data, GetTextByKey("P_MV_ERROR", 'Error'));

                $('#dialog_sendlocation').hideDialog();
                showmaskbg(false);
            }, function (err) {
                if (_setype == 1)
                    _dialog.showAlert(GetTextByKey("P_MV_FAILEDTOSENDJOBSITE", 'Failed to send jobsite.'), title);
                else if (_setype == 3)
                    _dialog.showAlert(GetTextByKey('P_MV_FAILEDSENDROUTE', 'Failed to send route.'), title);
                else
                    _dialog.showAlert(GetTextByKey("P_MV_FAILEDTOSENDLOCATION", 'Failed to send location.'), title);
            });
        }

        function loadHelpTip() {
            var text = "Text addresses should be entered as number@carrier text suffix. "
                + "<br/>The major carriers are listed below.<br/>"
                + "<br/>Alltel Wireless: @mms.alltel.net"
                + "<br/>AT&T Wireless: @mms.att.net"
                + "<br/>AT&T Mobility (formerly Cingular): @mobile.mycingular.com"
                + "<br/>Boost Mobile: @mms.mycricket.com"
                + "<br/>Metro PCS: @mymetropcs.com"
                + "<br/>Sprint (PCS): @pm.sprint.com"
                + "<br/>Sprint (Nextel): @messaging.nextel.com"
                + "<br/>Straight Talk: @mypixmessages.com"
                + "<br/>T-Mobile: @tmomail.net"
                + "<br/>U.S. Cellular: @mms.uscc.net"
                + "<br/>Verizon: @vzwpix.com"
                + "<br/>Virgin Mobile: @vmpix.com"
                + "<br/>"
                + "<br/>For example, for cellphone number:  480-123-4567 on Verizon, "
                + "<br/>the text address would be:  4801234567@vzwpix.com"
                + "<br/>"
                + "<br/>To send to a second recipient, separate the values with a ;. For "
                + "<br/>example:  4801234567@vzwpix.com;4808901234@tmomail.net";
            var tip = GetTextByKey('P_MV_TEXTADDRESSHELPTIP', text);
            tip = replaceHtmlText(tip);
            var div = $("<div id='div_tooltip' class='div_tooltip' style='display:none; '></div>").html(tip);
            $(window.document.body).append(div);
        }

        function OnEditAsset(cid, aid) {
            ShowMachineDialog("edit");
            if (canEditAsset) {
                if (!$("#iframemachine").attr("src")) {
                    $("#iframemachine").attr("src", "MachineDeviceManagement/AddMachine.aspx?cid=" + (cid || ""))
                        .on('load', function () {
                            execIframeFunc("editasset", [cid, aid], "iframemachine");
                        });
                }
                else {
                    execIframeFunc("editasset", [cid, aid], "iframemachine");
                }
            }
        }

        function CloseDialog() {
            $('#dialog_machine1').hideDialog();
            execIframeFunc("refresh", [], "ifassetview");
            showmaskbg(false);
            setPageTitle(GetTextByKey("P_MODULE_MAPVIEW", 'Map View'), false);
        }

        function ShowMachineDialog(type) {
            showmaskbg(true);
            $('#dialog_machine1').attr('act', type).showDialogRight1(300);
        }

        function OnEditJobsite(js) {
            ShowJobsiteDialog();

            if (!$("#iframejobsite").attr("src")) {
                $("#iframejobsite").attr("src", "Jobsite/AddJobsite.aspx?InDialog=1&mid=")
                    .on('load', function () {
                        execIframeFunc("init", [js], "iframejobsite");
                    });
            }
            else {
                execIframeFunc("init", [js], "iframejobsite");
            }
        }

        function OnAddJobsite(assetid) {
            ShowJobsiteDialog();

            if (!$("#iframejobsite").attr("src")) {
                $("#iframejobsite").attr("src", "Jobsite/AddJobsite.aspx?InDialog=1&mid=")
                    .on('load', function () {
                        execIframeFunc("init", [null, assetid], "iframejobsite");
                    });
            }
            else {
                execIframeFunc("init", [null, assetid], "iframejobsite");
            }
        }

        function CloseJobsiteDialog() {
            $('#dialog_jobsite').hideDialog();
            jobsiteObject && jobsiteObject.searchJobSite(true);
            showmaskbg(false);
            setPageTitle(GetTextByKey("P_MODULE_MAPVIEW", 'Map View'), false);
        }

        function ShowJobsiteDialog() {
            showmaskbg(true);
            $('#dialog_jobsite').showDialogRight1(300);
        }

        function OnViewWorkOrder(cid, aid) {//Dealer无此功能，cid暂时不用
            ShowWorkOrderDialog();

            if (!$("#iframeworkorder").attr("src")) {
                $("#iframeworkorder").attr("src", "Maintenance/WorkOrderMaintenance.aspx?InDialog=1&mid=" + aid);
            }
            else {
                execIframeFunc("changeasset", [aid], "iframeworkorder");
            }
        }

        function OnViewMaintenanceRecord(cid, aid) {//和workorder共享一个dialog和iframe. Dealer无此功能，cid暂时不用
            ShowWorkOrderDialog();

            if (!$("#iframeworkorder").attr("src")) {
                $("#iframeworkorder").attr("src", "Maintenance/MaintanceRecordsManagement.aspx?InDialog=1&mid=" + aid);
            }
            else {
                execIframeFunc("changeasset", [aid], "iframeworkorder");
            }
        }

        function CloseWorkOrderDialog() {
            $('#dialog_workorder').hideDialog();
            showmaskbg(false);
            setPageTitle(GetTextByKey("P_MODULE_MAPVIEW", 'Map View'), false);
        }

        function ShowWorkOrderDialog() {
            showmaskbg(true);
            $('#dialog_workorder').showDialogRight1(300);
        }

        function OnViewAlertsManagement(cid, aid) {//Dealer无此功能，cid暂时不用
            ShowAlertsManagementDialog();

            if (!$("#iframealertsmanagement").attr("src")) {
                $("#iframealertsmanagement").attr("src", "Maintenance/AlertsManagement.aspx?InDialog=1&mid=" + aid);
            }
            else {
                execIframeFunc("changeasset", [aid], "iframealertsmanagement");
            }
        }

        function CloseAlertsManagementDialog() {
            $('#dialog_alertsmanagement').hideDialog();
            showmaskbg(false);
            setPageTitle(GetTextByKey("P_MODULE_MAPVIEW", 'Map View'), false);
        }

        function ShowAlertsManagementDialog() {
            showmaskbg(true);
            $('#dialog_alertsmanagement').showDialogRight1(300);
        }

        function OnViewFuelRecords(cid, aid) {//Dealer无此功能，cid暂时不用
            ShowFuelRecordsDialog();

            if (!$("#iframefuelrecords").attr("src")) {
                $("#iframefuelrecords").attr("src", "Maintenance/FuelRecordManagement.aspx?InDialog=1&mid=" + aid);
            }
            else {
                execIframeFunc("changeasset", [aid], "iframefuelrecords");
            }
        }

        function CloseFuelRecordsDialog() {
            $('#dialog_fuelrecords').hideDialog();
            showmaskbg(false);
            setPageTitle(GetTextByKey("P_MODULE_MAPVIEW", 'Map View'), false);
        }

        function ShowFuelRecordsDialog() {
            showmaskbg(true);
            $('#dialog_fuelrecords').showDialogRight1(300);
        }


        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() {
            //由于可以选择多个Contractor，Dealer站点也获取自己的TimeZone
            assetrequest1("GetCustomerTimeZone", "", 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) {
            });
        }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="holder_content" runat="Server">
    <div id="layout">
        <div id="leftCtrl" class="leftCtrl">
            <div style="margin-top: 5px;">
                <div id="divleft1">
                    <div>
                        <div id="contractorCtrl" style="margin-left: 5px; display: none;">
                            <span style="font-weight: bold;" data-lgid="P_MA_CONTRACTORS_COLON">Contractors: </span>
                            <%--<select id="selContractor" style="width: 160px;"></select>--%>
                            <div id="selContractor" style="width: 160px; margin-left: 5px;"></div>
                        </div>
                    </div>
                    <div style="margin-top: 6px;">
                        <select id="selOnroad" style="width: 70px; margin-left: 15px;">
                            <option value="-1" data-lgid="P_SELECT_ALL">All</option>
                            <option value="1" data-lgid="P_MV_ONROAD">Onroad</option>
                            <option value="0" data-lgid="P_MV_OFFROAD">Offroad</option>
                        </select>
                        <input type="button" id="btnLoadSearchDetault" value="Load Default" data-lgid="P_MV_LOADDEFAULT" title="Load Default Search" data-title-lgid="P_MV_LOADDEFAULTSEARCH" style="margin-left: 3px; width: 95px;" />
                        <input type="button" id="btnSavedSearches" value="Saved Searches" data-lgid="P_MV_SAVEDSEARCHES" title="Saved Searches" data-title-lgid="P_MV_SAVEDSEARCHES" style="margin-left: 3px; width: 107px;" />
                        <input type="button" id="btnSaveSearchDetault" value="Save Search" data-lgid="P_MV_SAVESEARCH" title="Save Search as Default" data-title-lgid="P_MV_SAVESEARCHASDEFAULT" style="margin-left: 3px; width: 85px;" />
                        <input type="button" id="btnToggleTimeline" value="&#xf622;" title="Click to toggle the timeline panel display." data-title-lgid="P_MV_TOGGLE_TIMELINES" style="margin-left: 3px; display: none;" />
                    </div>
                    <div id="machineHeader" style="margin-left: 10px;">
                        <input type="password" style="display: none" autocomplete="new-password" />
                        <input type="text" id="txtMachineSearchText" style="margin-left: 5px; width: 210px;" autocomplete="off" />
                        <input type="button" id="btnMachineSearch" value="Search" data-lgid="P_MV_SEARCH" style="margin-left: 3px; width: 70px;" />
                        <input type="button" class="showall" value="Show All" data-lgid="P_MV_SHOWALL" style="margin-left: 3px; width: 80px;" />
                    </div>
                    <div id="jobSiteHeader" style="margin-left: 10px; display: none;">
                        <input type="text" id="txtJobSiteSearchText" style="margin-left: 5px; width: 193px;" autocomplete="off" />
                        <input type="button" id="btnJobSiteSearch" value="Search" data-lgid="P_MV_SEARCH" style="margin-left: 3px; width: 70px;" />
                        <input type="button" class="showall" value="Show All" data-lgid="P_MV_SHOWALL" style="margin-left: 3px; width: 80px;" />
                    </div>
                    <div id="assetGroupHeader" style="margin-left: 10px; display: none;">
                        <input type="text" id="txtAssetGroupSearchText" style="margin-left: 5px; width: 193px;" autocomplete="off" />
                        <input type="button" id="btnAssetGroupSearch" value="Search" data-lgid="P_MV_SEARCH" style="margin-left: 3px; width: 70px;" />
                        <input type="button" class="showall" value="Show All" data-lgid="P_MV_SHOWALL" style="margin-left: 3px; width: 80px;" />
                    </div>
                    <div id="shapeHeader" style="margin-left: 10px; display: none;">
                        <input type="text" id="txtShapeSearchText" style="margin-left: 5px; width: 193px;" autocomplete="off" />
                        <input type="button" id="btnShapeSearch" value="Search" data-lgid="P_MV_SEARCH" style="margin-left: 3px; width: 70px;" />
                        <input type="button" class="showall" value="Show All" data-lgid="P_MV_SHOWALL" style="margin-left: 3px; width: 80px;" />
                    </div>
                    <div style="margin-left: 10px;">
                        <select id="selAttachment" style="width: 120px; margin-left: 5px;">
                            <option value="-1" data-lgid="P_SELECT_ALL">All</option>
                            <option value="1" data-lgid="P_MV_ATTACHMENTSONLY">Attachments Only</option>
                            <option value="0" data-lgid="P_MV_NOATTACHMENTS">No Attachments</option>
                        </select>
                    </div>
                </div>
                <div id="divleft2">
                    <table style="border-collapse: collapse; border-spacing: 0; width: 100%; line-height: 20px; margin-top: 3px; font-size: 16px; font-weight: bold;">
                        <tr style="height: 24px;">
                            <td style="border-bottom: 1px solid black; width: 10px;">&nbsp;</td>
                            <td class="tabheaderselected" id="tabMachines" style="width: 60px;" data-lgid="P_MV_ASSETS">Assets</td>
                            <td class="tabheader notfirsttab" id="tabJobSiets" style="width: 80px;" data-lgid="P_MV_JOBSITES">Jobsites</td>
                            <td class="tabheader notfirsttab" id="tabAssetGroups" style="width: 110px;" data-lgid="P_MV_ASSETGROUPS">Asset Groups</td>
                            <td class="tabheader notfirsttab" id="tabShapes" style="width: 60px;" data-lgid="P_MV_SHAPES">Shapes</td>
                            <td style="border-bottom: 1px solid black;">&nbsp;</td>
                        </tr>
                    </table>
                </div>
                <div id="contentCtrl" class="leftcontent">
                    <div id="machineCtrl" style="margin-top: 5px;">
                        <div id="machineList" v-bind:style="bodyContainerStyle" style="position: relative">
                            <div v-bind:style="bodyContentStyle" style="position: absolute; width: 100%;">
                                <div class='machineitem' v-for="machine in innerMachines" v-bind:class="machine.State.Highlight ?'selectedmachine': ''" v-on:mouseleave="assetSummaryMouseleave(machine,$event)">
                                    <input type='checkbox' v-model="machine.State.Selected" class='machineitemchk' v-on:change="chkMachineClick(machine)" />
                                    <a href='javascript:void(0);' v-on:click="linkMachineClick(machine)" v-on:mouseover="assetSummaryMouseover(machine,$event)">{{machine.DisplayName}}</a>
                                    <span class="icondetail1 pointer" style="margin-left: 10px;" v-on:click="machineDetailClick(machine)" data-title-lgid="P_MV_DETAIL"></span>
                                    <span class="hisicon pointer" style='margin-left: 10px;' v-on:click="locationHistoryClick(machine,$event)" v-bind:title="HistoryTitle"></span>
                                    <div class='otherinfo' v-bind:style="{display: machine.State.ShowSummary ?'none': ''}">
                                        <label data-lgid="P_MV_SN_COLON">SN:</label>{{machine.VIN}}&emsp;
                                            <label data-lgid="P_MV_MAKE_COLON">Make:</label>
                                        {{machine.Make}}<br />
                                        <label data-lgid="P_MA_ASSETTYPE_COLON">Asset Type: </label>
                                        {{machine.AssetType}}&emsp;
                                           <label data-lgid="P_MV_MODEL_COLON">Model: </label>
                                        {{machine.Model}}<br />
                                    </div>
                                    <%--<div class="assetsummary" v-bind:style="{display: machine.State.ShowSummary ?'': 'none'}"></div>--%>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="jobSiteCtrl" style="display: none;">
                        <div>
                            <input type="checkbox" id="chkSelectAll" style="height: 26px;" /><span data-lgid="P_MA_SELECTALL">Select All</span>
                        </div>
                        <div id="jobsiteList" v-bind:style="bodyContainerStyle" style="position: relative">
                            <div v-bind:style="bodyContentStyle" style="position: absolute; width: 100%;">
                                <div class='machineitem' style="height: 26px;" v-for="machine in innerJobsiteMachines">
                                    <template v-if="machine.__isJobsite">
                                        <span v-bind:class="machine.Collapsed ?'treeiconc': 'treeicone'" v-on:click="treeIconClick($event,machine)"></span>
                                        <input type='checkbox' v-model="machine.Selected" v-bind:indeterminate.prop="machine.__indeterminate" class='machineitemchk jobsite' v-on:change="chkJobsiteClick($event,machine)" title="Select All Assets" data-title-lgid="P_MA_SELECTALLASSETS" />
                                        <span v-bind:class="machine.Shown ?'unselectable switchon': 'unselectable switchoff'" style='margin-right: 5px;' v-show="machine.ID>=0" v-on:click="showJobsiteClick($event,machine)" title="Job Fence On" data-title-lgid="P_MA_JOBFENCEON"></span>
                                        <a v-on:click="linkJobSiteClick($event,machine)" href='javascript:void(0);'>{{machine.Name}}</a>
                                    </template>
                                    <template v-else>
                                        <div style="margin-left: 24px" v-bind:class="machine.State.Highlight ?'subul selectedmachine': 'subul'">
                                            <input type='checkbox' v-model="machine.State.Selected" class='machineitemchk' v-on:change="chkMachineClick(machine)" />
                                            <a href='javascript:void(0);' v-on:click="linkMachineClick(machine)">{{machine.DisplayName}}</a>
                                            <span class="hisicon pointer" style='margin-left: 20px;' v-on:click="locationHistoryClick(machine,$event)" v-bind:title="HistoryTitle"></span>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="assetGroupCtrl" style="display: none;">
                        <div>
                            <input type="checkbox" id="chkSelectAllAssetGroup" style="height: 26px;" /><span data-lgid="P_MA_SELECTALL">Select All</span>
                        </div>
                        <div id="assetGroupList" v-bind:style="bodyContainerStyle" style="position: relative">
                            <div v-bind:style="bodyContentStyle" style="position: absolute; width: 100%;">
                                <div class='machineitem' style="height: 26px;" v-for="machine in innerAssetgroupMachines">
                                    <template v-if="machine.__isGroup">
                                        <span v-bind:class="machine.Collapsed ?'treeiconc': 'treeicone'" v-on:click="treeIconClick($event,machine)"></span>
                                        <input type='checkbox' v-model="machine.Selected" v-bind:indeterminate.prop="machine.__indeterminate" class='machineitemchk assetgroup' v-on:change="chkAssetGroupClick($event,machine)" title="Select All Assets" data-title-lgid="P_MA_SELECTALLASSETS" />
                                        <a v-on:click="linkAssetGroupClick($event,machine)" href='javascript:void(0);'>{{machine.Name}}</a>&emsp;
                                    </template>
                                    <template v-else>
                                        <div style="margin-left: 24px" v-bind:class="machine.State.Highlight ?'subul selectedmachine': 'subul'">
                                            <input type='checkbox' v-model="machine.State.Selected" class='machineitemchk' v-on:change="chkMachineClick(machine)" />
                                            <a href='javascript:void(0);' v-on:click="linkMachineClick(machine)">{{machine.DisplayName}}</a>
                                            <span class="hisicon pointer" style='margin-left: 20px;' v-on:click="locationHistoryClick(machine,$event)" v-bind:title="HistoryTitle"></span>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="shapeCtrl" style="display: none;">
                        <table style="width: 100%;">
                            <tr>
                                <td>
                                    <input type="checkbox" id="chkSelectAllShape" /><span data-lgid="P_MA_SELECTALL">Select All</span></td>
                                <td style="text-align: right;">
                                    <input type="button" id="btnImportShapeFile" style="display: none;" value="Import Shape File" data-lgid="P_MV_IMPORTSHAPEFILE" onclick="openImportShapeFile();" /></td>
                            </tr>
                        </table>
                        <div id="shapeList">
                            <div class='machineitem' v-for="shape in shapes">
                                <input type='checkbox' v-model="shape.Selected" class='machineitemchk' v-on:change="chkShapeClick($event,shape)" />
                                <a href='javascript:void(0);' v-on:click="linkShapeClick(shape)" class="machineitemlink" style="max-width: 300px;" v-bind:title="shape.Name">{{shape.Name}}</a>
                                <span class="deleteicon pointer" style='margin-left: 20px; font-size: 12px;' v-on:click="deleteShapeClick(shape,$event)" v-bind:title="DeleteTitle"></span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div id="splitIcon" style="cursor: pointer;">
            <img id="splitIconImg" src="img/right.png" style="height: 45px; width: 20px;" />
        </div>

        <%--Map View--%>
        <div id="divmapview">
            <div id="mapView">
            </div>
            <%--<div id="basemapToggleDiv">
            </div>--%>
            <%--<div class="basemapgallery">
                <div id="bgPanel" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Switch Basemap', closable:true, open:false">
                    <div data-dojo-type="dijit/layout/ContentPane" style="width: 380px; height: 280px; overflow: auto;">
                        <div id="basemapGallery"></div>
                    </div>
                </div>
            </div>--%>
            <div id="basemapgalleryDiv">
                <div id="basemapImg"></div>
                <div id="basemapTitle"></div>
            </div>
            <div id="basemapGallery"></div>

            <div id="filterIconDiv" style="display: none">
                <div class="filtericon"></div>
            </div>
            <div id="mapMeunDiv">
                <div id="exclude00Div" state="0" style="display: none;">
                    <div id="exclude00Panel" style="padding: 8px; border: 1px solid #d8d8d8; background-color: #cbcbcb; border-radius: 3px; cursor: pointer; display: flex;">
                        <img id="exclude00icon" src="img/locslash.png" style="height: 24px; width: 24px;" />
                    </div>
                </div>
                <div id="jsTooltipDiv" state="0" style="display: none;">
                    <div id="jsTooltipPanel" style="padding: 8px; border: 1px solid #d8d8d8; background-color: #cbcbcb; border-radius: 3px; cursor: pointer; display: flex;">
                        <img id="jsTooltipicon" src="img/jobsite1.png" style="height: 24px; width: 24px;" />
                    </div>
                </div>
                <div id="autoRecenterDiv" state="0" style="display: none;">
                    <div id="autoRecenterPanel" style="padding: 8px; border: 1px solid #d8d8d8; background-color: #cbcbcb; border-radius: 3px; cursor: pointer; display: flex;">
                        <img id="recentericon" src="img/recenter.png" style="height: 24px; width: 24px;" />
                    </div>
                </div>
                <div id="showDealerLocationsDiv" style="display: none; margin-top: 3px;" state="1" title="Turn Off Dealer Locations" data-title-lgid="P_MV_TURNOFFDEALERLOCATIONS">
                    <div id="showDealerLocationsPanel" style="padding: 8px; border: 1px solid #d8d8d8; background-color: #f6f6f6; border-radius: 3px; cursor: pointer; display: flex;">
                        <%=Logo1 %>
                    </div>
                </div>
                <div id="showTrafficDiv" style="display: none; margin-top: 3px;" state="0" title="Turn On Traffic" data-title-lgid="P_MV_TURNONTRAFFIC">
                    <div id="showTrafficPanel" style="padding: 8px; border: 1px solid #d8d8d8; background-color: #cbcbcb; border-radius: 3px; cursor: pointer; display: flex;">
                        <img id="showTrafficicon" src="img/traffic.png" style="height: 24px; width: 24px;" />
                        <%--<div id="showTrafficicon" class="traffic" style="height: 24px; width: 24px; text-align: center; cursor: pointer;"></div>--%>
                    </div>
                </div>
                <div id="showWeatherDiv" style="display: none; margin-top: 3px;" state="0" title="Turn On Weather" data-title-lgid="P_MV_TURNONWEATHER">
                    <div id="showWeatherPanel" style="padding: 8px; border: 1px solid #d8d8d8; background-color: #cbcbcb; border-radius: 3px; cursor: pointer; display: flex;">
                        <img id="showWeathericon" src="img/weather.png" style="height: 24px; width: 24px;" />
                        <%--<div id="showWeathericon" class="weathericon" style="height: 24px; width: 24px; text-align: center; cursor: pointer;"></div>--%>
                    </div>
                </div>
                <%if (EnableRouteOptimization)
                    { %>
                <div id="routeDiv" style="display: none; background-color: #efefef; margin-top: 3px" title="Turn On Route Navigation" data-title-lgid="P_MV_TURNON_ROUTENAVIGATION">
                    <div id="showRouteBg" style="padding: 8px; border: 1px solid #d8d8d8; background-color: #cbcbcb; border-radius: 3px; cursor: pointer; display: flex;">
                        <img id="showRouteicon" src="img/route.png" style="height: 24px; width: 24px;" />
                    </div>
                </div>
                <%} %>
            </div>
            <%if (EnableRouteOptimization)
                { %>
            <div id="routeConfigDiv" style="display: none">
                <div class="routeConfigTop">
                    <div class="routeConfigTitle">
                        <span data-lgid="P_MV_ROUTE_DIRECTION">Route Navigation</span>
                        <em class="fa fa-close" data-title-lgid="P_JS_CLOSE"></em>
                        <em class="fa fa-share" data-title-lgid="P_MV_OPENINGOOGLEMAP"></em>
                        <em class="fa fa-email" data-title-lgid="P_MV_EMAIL"></em>
                    </div>
                    <table class="routeConfigBody">
                        <tr>
                            <td style="position: relative">
                                <div id="routeStops">
                                    <div class="routeStopItem routeStopItemStart">
                                        <div class="routeStopItemFunction">
                                            <em id="routeLockStart" class="fa fa-lock"></em>
                                        </div>
                                        <div class="routeStopItemSortter">
                                            <em class="fa fa-down"></em>
                                        </div>
                                        <div class="routeStopItemGrabber">
                                            <em class="fa fa-stop" draggable="true"></em>
                                            <em class="fa fa-dot"></em>
                                        </div>
                                        <em class="fa fa-pick"></em>
                                        <input autocomplete="off" class="routeStopName" data-holder-lgid="P_MV_ROUTE_STARTLOCATION" placeholder="Starting location or asset" type="text" />
                                    </div>
                                    <div class="routeStopItem routeStopItemEnd">
                                        <div class="routeStopItemFunction">
                                            <em id="routeLockEnd" class="fa fa-lock"></em>
                                        </div>
                                        <div class="routeStopItemSortter">
                                            <em class="fa fa-up"></em>
                                        </div>
                                        <div class="routeStopItemGrabber">
                                            <em class="fa fa-stop fa-stop-end" draggable="true"></em>
                                        </div>
                                        <em class="fa fa-pick"></em>
                                        <input autocomplete="off" class="routeStopName" data-holder-lgid="P_MV_ROUTE_ENDLOCATION" placeholder="Ending location or asset" type="text" />
                                    </div>
                                </div>
                                <div id="routeDragStopItem"></div>
                                <div id="routeCurrentLocation" style="display: none">
                                    <em class="fa fa-location"></em>
                                    <span data-lgid="P_MV_CURRENTLOCATION">Current Location</span>
                                </div>
                                <div id="routePlaces" style="display: none"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div id="routeAddStop" data-lgid="P_MV_ROUTE_ADDSTOP">+ Add Locations</div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; position: relative">
                                <button id="buttonGetRoute" class="routeButton" data-lgid="P_MV_ROUTE_GETDIRECTIONS">Get Directions</button>
                                <em class="fa c-spin fa-loading" style="display: none"></em>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center">
                                <button id="buttonOptimizeRoute" class="routeButton" data-lgid="P_MV_ROUTE_OPTIMIZEROUTE">Optimize Route</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="routeCategory">
                                    <div style="float: right; line-height: 24px; position: relative">
                                        <input id="checkRouteReturnInitial" class="routeCheckbox" type="checkbox" /><span class="fa"></span>
                                        <label for="checkRouteReturnInitial" data-lgid="P_MV_ROUTE_RETURN_INITIAL">Return to Initial Location</label>
                                    </div>
                                    <div style="position: relative; float: left">
                                        <input type="radio" id="radioRouteFastest" class="routeRadio" name="routeOption" checked="checked" /><span class="fa"></span><label for="radioRouteFastest" data-lgid="P_MV_ROUTE_FASTESTROUTE">Fastest Route</label>
                                    </div>
                                    <div style="position: relative; float: left; clear: both">
                                        <input type="radio" id="radioRouteShortest" class="routeRadio" name="routeOption" /><span class="fa"></span><label for="radioRouteShortest" data-lgid="P_MV_ROUTE_SHORTESTROUTE">Shortest Route</label>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="routeConfigBottom"></div>
            </div>
            <%} %>
            <div id="mapAlertLayerDiv" style="display: none">
                <table>
                    <tr>
                        <td data-lgid="P_MV_MAPALERTLAYER">Map Alert Layer</td>
                        <td>
                            <select id="selMapAlertLayer" style="width: 200px;"></select></td>
                        <td>
                            <img src="img/filters.png" alt="Set Parameter(s)" title="Set Parameter(s)" data-title-lgid="P_MV_SETPARAMETERS" style="padding-left: 5px; display: none;" id="setparameter" onclick="openSetAlertLayerParameters();" /></td>
                    </tr>
                </table>
            </div>
            <div id="loadingDiv" style="display: none;">
                <div class="loadingmach icnmach icn-spinmach"></div>
            </div>
            <div id="refreshTimeDiv"></div>

            <div id="splitIconRight" style="cursor: pointer; display: none;">
                <img id="splitIconImgRight" src="img/left.png" style="height: 45px; width: 20px;" />
            </div>

            <div id="rightCtrl" class="rightCtrl">
                <div class="rightitem">
                    <div class="subtitle contactinfo">
                        <span class="sbutton iconchevrondown" target="divLegend" onclick="OnRightExpend(this)"></span>
                        <span data-lgid="P_MV_LEGEND" style="font-size: 20px; font-weight: bold;">Legend</span>
                    </div>
                    <div id="divLegend" style="width: 100%; overflow: auto;">
                        <table id="tbLegend" style="margin-left: 0px; border-collapse: collapse; border-spacing: 0;">
                        </table>
                    </div>
                </div>

                <div id="locationhistoryDiv" style="position: fixed; bottom: 0; display: none;">
                    <div class="rightitem" id="theftDiv" style="position: relative;">
                        <div class="subtitle contactinfo">
                            <span class="sbutton iconchevrondown" target="divTheft" onclick="OnRightExpend(this)"></span>
                            <span data-lgid="P_MV_LOCATIONSOURCES" style="font-size: 20px; font-weight: bold;">Location Source(s)</span>
                            <%--<span class="clearbtn" id="btnClearTheft" style="position: absolute; padding: 5px; right: 0; top: 0"></span>--%>
                        </div>
                        <div id="divTheft" style="width: 250px; padding-left: 20px;">
                            <div id="containerTheft"></div>
                            <div>
                                <select id="selLocDatasource">
                                    <option value="0" data-lgid="P_MV_PRIMARYONLY">Primary Only</option>
                                    <option value="1" data-lgid="P_MV_THEFTMODEMULTIPLELINES">Theft Mode (Multiple Lines)</option>
                                    <option value="2" data-lgid="P_MV_COMBINEDSINGLELINE">Combined (Single Line)</option>
                                </select>
                            </div>
                        </div>
                        <div id="theftLoading" style="display: none;"><span class="QuickLoading c-spin"></span></div>
                    </div>

                    <div class="rightitem">
                        <table style="line-height: 25px; width: 100%; table-layout: fixed;">
                            <tr>
                                <td style="padding-left: 5px; width: 75px;" data-lgid="P_MV_ASSET_COLON">Asset:</td>
                                <td><span id="spMachineName" data-lgid="P_MV_NOASSETSELECTED" style="font-weight: bold; word-break: break-word;">No asset selected.</span></td>
                            </tr>
                            <tr>
                                <td style="padding-left: 5px;" data-lgid="P_MV_TIMEPERIOD_COLON">Time Period:</td>
                                <td>
                                    <select id="dialog_timeperiod" tabindex="12" style="width: 90px; height: 22px;">
                                        <option value="1" selected="selected" data-lgid="P_MV_TODAY">Today</option>
                                        <option value="5" data-lgid="P_MV_LAST24HOURS">Last 24 Hours</option>
                                        <option value="2" data-lgid="P_MV_PRIORDAY">Prior Day</option>
                                        <option value="3" data-lgid="P_MV_LAST7DAYS">Last 7 Days</option>
                                        <option value="4" data-lgid="P_MV_CUSTOM">Custom</option>
                                    </select></td>

                            </tr>
                            <tr>
                                <td style="padding-left: 5px;" data-lgid="P_MV_FROM_COLON">From:</td>
                                <td>
                                    <input type="text" id="dateFrom" maxlength="12" tabindex="27" style="width: 70px;" autocomplete="off" />
                                    <select id="dialog_starttimehour" style="width: 48px; margin-left: 3px;" tabindex="3"></select><span style="font-weight: bold;">&nbsp;:&nbsp;</span>
                                    <select id="dialog_starttimeminute" style="width: 48px; margin-left: 0;" tabindex="4"></select>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding-left: 5px;" data-lgid="P_MV_TO_COLON">To:</td>
                                <td>
                                    <input type="text" id="dateTo" maxlength="12" tabindex="27" style="width: 70px;" autocomplete="off" />
                                    <select id="dialog_endtimehour" style="width: 48px; margin-left: 3px;" tabindex="5"></select><span style="font-weight: bold;">&nbsp;:&nbsp;</span>
                                    <select id="dialog_endtimeminute" style="width: 48px; margin-left: 0;" tabindex="6"></select>
                                </td>
                            </tr>
                            <tr>
                                <td id="playBarContainer" colspan="2" style="text-align: center; width: 240px;">
                                    <div id="divPlayBar" style="background-color: #C0C0C0;"></div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="text-align: right;">
                                    <input id="chkExclude00Loc" checked="checked" type="checkbox" style="display: none" /><span style="margin-right: 10px; display: none" data-lgid="P_MV_TO_EXCLUDE00LOCATIONS">Exclude 0,0 Locations</span>
                                    <span id="btnHisLoading" class="QuickLoading" style="margin-left: 6px; display: none;"></span>
                                    <span id="btnLoadTrip" class="TripReport" style="margin-left: 6px;" title="Trip Report" data-title-lgid="P_MV_TRIPREPORT"></span>
                                    <%--<span id="btnTheftMode" class="TheftMode" style="margin-left: 6px;" title="Theft Mode" data-title-lgid="P_MV_THEFTMODE"></span>--%>
                                    <span id="btnTheftModeReload" class="BarPlayEnd" style="margin-left: 6px; display: none" title="Quick Load/Skip to End" data-title-lgid="P_MV_QUICKLOADSKIPTOEND"></span>
                                    <span class="clearbtn" id="btnClearLocationHistory" style="margin-left: 6px;" title="Clear" data-title-lgid="P_MV_CLEAR"></span>
                                    <%--<input type="button" value="Clear" id="btnClearLocationHistory" />--%>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <%--Single Asset View--%>
        <div id="divassetview" style="display: none;">
            <iframe id="ifassetview" src="AssetView/SingleAssetView.aspx?canedit=1" style="width: 100%; height: 100%; display: block; border: none;"></iframe>
            <div class="maskbg" style="display: none;"></div>
        </div>

        <div id="divtimelineview" style="display: none;">
            <iframe id="iftimelineview" src="AssetView/AssetsTimeline.aspx" style="width: 100%; height: 100%; display: block; border: none;"></iframe>
            <div class="maskbg" style="display: none;"></div>
        </div>

        <div id="tripDiv" style="display: none;">
            <div>
                <span class="clearbtn" id="btnClearTrip" style="float: right; padding: 5px;"></span>
            </div>
            <div style="position: absolute; top: 30px; bottom: 0; right: 0; overflow: auto; width: 100%;">
                <table id="tbTrips" style="line-height: 24px; border-collapse: collapse; border-spacing: 0; width: 100%;table-layout:fixed;">
                </table>
            </div>
        </div>

        <%--<div id="locationhistoryDiv" style="display: none;">
        </div>--%>
        <div id="assetsummary" style="display: none;"></div>
        <div id="assetsummarytrigle" class="assetsummarytrigle" style="display: none;"></div>
    </div>

    <div id="mapmenu">
        <ul>
            <li><a href="#"></a></li>
        </ul>
    </div>

    <div id="mask_bg" style="display: none;">
        <div class="loading c-spin"></div>
    </div>
    <div class="dialog" id="dialog_parameter" style="display: none; width: 320px;">
        <div class="dialog-title"><span class="title" data-lgid="P_MV_SETPARAMETERS">Set Parameter(s)</span><em class="dialog-close"></em></div>
        <div class="dialog-content" style="height: 300px;">
            <div id="parameter_left" style="height: 100%; overflow: auto;">
                <ul id="ul_parameter" class="ul_menu">
                </ul>
            </div>
            <div id="parameter_right" style="height: 100%; overflow: auto;"></div>
            <div style="clear: both;"></div>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_MV_CANCEL" class="dialog-close" tabindex="12" />
            <input type="button" onclick="setParameterCompleted();" value="OK" data-lgid="P_MV_OK" tabindex="11" />
            <div class="clear"></div>
        </div>
    </div>

    <div class="dialog" id="dialog_sendlocation" style="display: none; width: 510px;">
        <div class="dialog-title"><span class="title" data-lgid="P_MV_SENDLOCATION">Send Location</span><em class="dialog-close"></em></div>
        <div class="dialog-content" style="height: 378px;">
            <table>
                <tr>
                    <td colspan="2" data-lgid="P_MV_SENDTHISTO">Who do you want to send this to? Select from existing relationships or manual entry.</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="contactlist" style="height: 168px; width: 470px; margin-left: 10px; margin-right: 10px;"></div>
                    </td>
                </tr>
                <tr style="height: 24px;">
                    <td colspan="2" data-lgid="P_MV_SEPARATEMULTIPLEMANUALLYENTEREDEMAILORPHONENUMBERSWITHASEMICOLON">Separate multiple manually entered email or phone numbers with a semi-colon (;).</td>
                </tr>
                <tr style="height: 24px;">
                    <td style="text-align: right; padding-right: 5px;"><span data-lgid="P_MV_OTHEREMAILADDRESS">Other Email Address</span>
                    </td>
                    <td>
                        <input type="text" id="sendlocation_otheremailaddress" style="width: 350px;" autocomplete="off" /></td>
                </tr>
                <tr id="tr_textaddr" style="height: 24px;">
                    <td style="text-align: right; padding-right: 5px;"><span data-lgid="P_MV_OTHERTEXTNUMBERS">Other Text Numbers</span>
                    </td>
                    <td>
                        <input type="text" id="sendlocation_othertextaddress" style="width: 350px;" autocomplete="off" />
                    </td>
                    <%--<span id="span_hepler" class='helper pointer' title='Help'></span>--%>
                </tr>
                <tr style="height: 24px;">
                    <td style="text-align: right; padding-right: 5px;" data-lgid="P_MV_DESCRIPTION">Description</td>
                    <td>
                        <textarea id="sendlocation_desc" style="width: 350px; height: 80px; resize: none;">
                            Fleet Intelligence on behalf of [site name]. [User Name] sent directions to [asset name]. Please do not reply to this text.
                        </textarea></td>
                </tr>
            </table>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_MV_CANCEL" class="dialog-close" tabindex="12" />
            <input type="button" onclick="onSendEmails();" value="OK" data-lgid="P_MV_OK" tabindex="11" />
            <div class="clear"></div>
        </div>
    </div>

    <div class="dialog" id="dialog_savedsearches" style="display: none; width: 320px;">
        <div class="dialog-title"><span class="title" data-lgid="P_MV_SAVEDSEARCHES">Saved Searches</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <table style="line-height: 30px;">
                <tr>
                    <td>
                        <div id="savedsearchlist" style="height: 260px; width: 420px;"></div>
                    </td>
                </tr>
                <tr>
                    <td><span data-lgid="P_MV_SEARCHNAME">Search Name</span>
                        <input type="text" id="savedsearch_searchname" style="width: 300px;" autocomplete="off" /></td>
                </tr>
            </table>

        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_MV_CANCEL" class="dialog-close" tabindex="12" />
            <input type="button" onclick="onLoadSavedSearches();" value="Load" data-lgid="P_MV_LOAD" tabindex="11" />
            <div class="clear"></div>
        </div>

        <div id="savedsearches_mask_bg" class="maskbg" style="display: none;"></div>
    </div>

    <div class="dialog" id="dialog_savesearch" style="display: none; width: 320px;">
        <div class="dialog-title"><span class="title" data-lgid="P_MV_SAVESEARCH">Save Search</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <table style="line-height: 30px;">
                <tr>
                    <td>
                        <div id="savesearchlist" style="height: 236px; width: 420px;"></div>
                    </td>
                </tr>
                <tr>
                    <td><span data-lgid="P_MV_SEARCHNAME">Search Name</span>
                        <input type="text" id="savesearch_searchname" style="width: 300px;" autocomplete="off" /></td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" id="savesearch_default" /><span data-lgid="P_MV_SAVEASDEFAULT">Save as default</span></td>
                </tr>
            </table>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_MV_CANCEL" class="dialog-close" tabindex="12" />
            <input type="button" onclick="onSaveSearch();" value="Save" data-lgid="P_MV_SAVE" tabindex="11" />
            <div class="clear"></div>
        </div>
    </div>

    <div class="dialog" id="dialog_machine1" style="display: none; height: 100%; border-bottom: 0; border-top: 0;">
        <%--<div class="dialog-title"><span class="title">Add Work Order</span></div>--%>
        <iframe id="iframemachine" style="width: 100%; height: 100%; display: block; border: none;"></iframe>
        <div class="maskbg" style="display: none;"></div>
    </div>

    <div class="dialog" id="dialog_jobsite" style="display: none; height: 100%; border-bottom: 0; border-top: 0;">
        <iframe id="iframejobsite" style="width: 100%; height: 100%; display: block; border: none;"></iframe>
        <div class="maskbg" style="display: none;"></div>
    </div>

    <div class="dialog" id="dialog_workorder" style="display: none; height: 100%; border-bottom: 0; border-top: 0;">
        <iframe id="iframeworkorder" style="width: 100%; height: 100%; display: block; border: none;"></iframe>
        <div class="maskbg" style="display: none;"></div>
    </div>

    <div class="dialog" id="dialog_alertsmanagement" style="display: none; height: 100%; border-bottom: 0; border-top: 0;">
        <iframe id="iframealertsmanagement" style="width: 100%; height: 100%; display: block; border: none;"></iframe>
        <div class="maskbg" style="display: none;"></div>
    </div>

    <div class="dialog" id="dialog_fuelrecords" style="display: none; height: 100%; border-bottom: 0; border-top: 0;">
        <iframe id="iframefuelrecords" style="width: 100%; height: 100%; display: block; border: none;"></iframe>
        <div class="maskbg" style="display: none;"></div>
    </div>

    <div class="dialog" id="dialog_lochis" style="display: none;">
        <div class="dialog-title"><span class="title" data-lgid="P_MA_LOCATIONHISTORY">Location History</span><em class="dialog-close"></em></div>
        <iframe id="iframelochis" src="AssetView/AssetLocationHis.aspx" style=""></iframe>
    </div>


    <div class="dialog" id="dialog_importshapefile" style="display: none; width: 500px;">
        <div class="dialog-title"><span class="title" data-lgid="P_MV_IMPORTSHAPEFILE">Import Shape File</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <table>
                <tr>
                    <td class="label" style="width: 50px;" data-lgid="P_MV_NAME_COLON">Name:</td>
                    <td>
                        <input type="text" id="dialog_shapename" style="width: 402px;" autocomplete="off" tabindex="22" maxlength="100" /></td>
                </tr>
                <tr>
                    <td class="label" style="width: 50px;" data-lgid="P_MV_NOTES_COLON">Notes:</td>
                    <td>
                        <textarea id="dialog_shapenotes" style="width: 400px; height: 80px; resize: none;" tabindex="23" maxlength="1000"></textarea></td>
                </tr>
                <tr>
                    <td class="label" style="width: 50px;"></td>
                    <td>
                        <input id="importshapefile" type="button" value="Import Shape File" data-lgid="P_MV_IMPORTSHAPEFILE" onclick="UploadImportShapeFile();" style="width: unset; height: 24px; float: left; background-color: #f4f4f4; border: 1px solid #a9a9a9" />
                        <div id="span_filename" style="max-width: 280px; overflow: hidden; word-break: keep-all; white-space: nowrap; float: left; margin-left: 10px;"></div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_MV_CANCEL" class="dialog-close" tabindex="25" />
            <input type="button" onclick="SaveImportShapeFile();" value="OK" data-lgid="P_MV_OK" tabindex="24" />
            <div class="clear"></div>
        </div>
    </div>

    <div class="dialog" id="dialog_requestvideo" style="display: none; width: 320px;">
        <div class="dialog-title"><span class="title" data-lgid="P_MV_VIDEOREQUEST">Video Request</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <table>
                <tr>
                    <td class="label" data-lgid="P_MV_CUSTOMTIME_COLON">Custom Time:</td>
                    <td>
                        <input type="checkbox" id="dialog_videoct" tabindex="1" />
                    </td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_MV_DATE_COLON">Date:</td>
                    <td>
                        <input type="text" id="dialog_videodate" tabindex="1" />
                    </td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_MV_TIME_COLON">Time:</td>
                    <td>
                        <select id="dialog_videohour" style="width: 48px;" tabindex="2"></select><span style="font-weight: bold;">&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                        <select id="dialog_videominute" style="width: 48px;" tabindex="3"></select>
                    </td>
                </tr>
                <tr>
                    <td class="label" style="width: 100px;" data-lgid="P_MV_VIDEOCLIPLENGTH_COLON">Video Clip Length:</td>
                    <td>
                        <input type="radio" id="r30sec" name="cliplen" checked="checked" tabindex="5" /><label for="r30sec" data-lgid="P_MV_30SECONDS">30 Seconds</label>
                    </td>
                </tr>
                <tr>
                    <td class="label"></td>
                    <td>
                        <input type="radio" id="r120sec" name="cliplen" tabindex="6" /><label for="r120sec" data-lgid="P_MV_120SECONDS">120 Seconds</label>
                    </td>
                </tr>
            </table>
            <input type="hidden" id="dialog_hlogid" />
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_MV_CANCEL" class="dialog-close" tabindex="12" />
            <input type="button" onclick="requestVideo();" value="Submit" data-lgid="P_MV_SUBMIT" tabindex="11" />
            <div class="clear"></div>
        </div>
    </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" style="width: 130px;" data-title-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-title-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-title-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-title-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" style="width: 130px;" 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-title-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-title-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-title-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_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>