if (typeof ($assetsummary) != "function") {
    var ctrlindex = 0;
    var assetIconCollapsed = false;
    var alertsCollapsed = false;
    var infowindowScrollTop = 0;
    var assetInfoCache = [];
    var assetExtCache = [];
    $assetsummary = function (p, cid, assetid, alerttips, type, assets) {//type 0.left;1.bottom
        if (typeof p === "string")
            p = $("#" + p);
        if (!p)
            p = document;
        this.companyid = cid || "";
        this.assetid = assetid;
        this.alerttips = alerttips;
        this.type = type;
        this.assets = assets;
        this.asset = undefined;
        this.assetext = undefined;
        this.status = 0;
        this.ctrlindex = ctrlindex++;
        this.grid_alertsdt;
        this.assetchanged = null;
        var _this = this;

        this.basectrl = $('<div></div>');

        //if (this.assets && this.assets.length > 1) {
        //    this.basectrl.css('margin-top', 10);

        //    var div_assets = $('<div style="width: 450px;margin-left:46px;"></div>');
        //    div_assets.dropdown(this.assets, {
        //        search: true,
        //        valueKey: 'ID',
        //        textKey: 'DisplayName'
        //    });
        //    div_assets.find(".dropdown-wrapper").css("border", "1px solid #b9b9b9");
        //    if (this.assetid)
        //        div_assets.dropdownVal(this.assetid);

        //    div_assets.on('select', function (_e, item) {
        //        if (item.ID != _this.assetid) {
        //            var temps = _this.assets.filter(function (a) { return a.ID == item.ID })
        //            if (_this.assetchanged && temps && temps.length > 0)
        //                _this.assetchanged(_this.assets.indexOf(temps[0]));
        //        }
        //    });

        //    p.append(div_assets);
        //}

        p.append(this.basectrl);

        //this.maskbgctrl = $('<div class="maskbg"><div class="loading_icon icon c-spin"></div></div>');
        //p.append(this.maskbgctrl);

        this.loadingicon = $('<span class="loading c-spin" style="top: 60px;right: 13px;font-size: 20px;color: black;position: absolute;left:unset;width:unset;height:unset;line-height:unset;display:none;"></span>');
        p.append(this.loadingicon);

        this.loadingCount = 0;
        this.showLoading = function () {
            this.loadingCount++;
            this.loadingicon.show();
        }

        this.hideLoading = function () {
            this.loadingCount--;
            if (this.loadingCount === 0)
                this.loadingicon.hide();
        }

        this.refresh = function () {
            p.parent(".contentPane").unbind();
            _this.basectrl.empty();
            loadAssetInfo();
            loadAssetExtInfo();
        }

        this.clearCache = function () {
            assetInfoCache = [];
            assetExtCache = [];
        }

        if (this.assetid) {
            loadAssetInfo();
            loadAssetExtInfo();
        }

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

        function showAssetIcon() {
            var asset = _this.asset;
            var loc = asset.Location;
            var div_icon = $('<div></div>');
            var iconheight = p.height();
            if (iconheight == 0)
                iconheight = p.parent().height();
            if (_this.type == 0) {
                div_icon.css({ 'height': iconheight - 4, 'margin-top': -20 });
            }
            else {
                div_icon.css({ 'height': iconheight + 5 });
                //if (_this.assets && _this.assets.length > 1) {
                //    div_icon.css({ 'height': p.parent().height() + 5, 'margin-top': -42 });
                //}
                div_icon.removeClass("divicon_left");
                div_icon.addClass("divicon_bottom");
            }
            div_icon.removeClass("divicon_bottom");
            div_icon.addClass("divicon_left");

            var span = $('<span class="icondetail" style="cursor: pointer; " onclick="showMachineDetail(\'' + _this.companyid + '\',' + asset.Id + ', \'' + encodeURIComponent(asset.VIN).replace("'", "\\'") + '\')"  title="' + GetTextByKey("P_MV_DETAIL", "Detail") + '"></span>');
            div_icon.append(span);
            setIconBr(div_icon);
            span = $('<span class="icondirection" style="cursor: pointer;" onclick="doDirections(' + loc.Latitude + ',' + loc.Longitude + ')"  title="' + GetTextByKey("P_MV_DIRECTIONS", "Directions") + '"></span>');
            div_icon.append(span);
            setIconBr(div_icon);
            if (loc.FromSmartWitness && enableSmartWitness) {
                span = $("<span class='iconvideo' style='cursor:pointer;' onclick='openRequestVideoDialog(\"" + _this.companyid + "\"," + asset.Id + ")' title='" + GetTextByKey("P_MV_VIDEOREQUEST", "Video Request") + "'></span>");
                div_icon.append(span);
                setIconBr(div_icon);
            }
            span = $("<span class='iconmail' style='cursor:pointer;' onclick='openSendEmails(\"" + _this.companyid + "\"," + asset.Id + ",0)' title='" + GetTextByKey("P_MV_SENDLOCATION", "Send Location") + "'></span>");
            div_icon.append(span);
            setIconBr(div_icon);
            assetLocations[asset.Id] = loc;

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

            if (canViewAlertsManagement) {
                span = $('<span class="iconmapmanagealerts" style="cursor: pointer; " onclick="OnViewAlertsManagement(\'' + _this.companyid + '\',\'' + asset.Id + '\')"  title="' + GetTextByKey("P_ALERTSMANAGEMENT", "Alerts Management") + '"></span>');
                div_icon.append(span);
                setIconBr(div_icon);
            }
            if (canViewFuelRecords) {
                span = $('<span class="iconmapfuelrecord" style="cursor: pointer; " onclick="OnViewFuelRecords(\'' + _this.companyid + '\',\'' + asset.Id + '\')"  title="' + GetTextByKey("P_FUELRECORDS", "Fuel Records") + '"></span>');
                div_icon.append(span);
                setIconBr(div_icon);
            }
            if (canEditJobsite) {
                span = $('<span class="iconjobsite" style="cursor: pointer;"  title="' + GetTextByKey("P_JS_ADDJOBSITE", "Add Jobsite") + '"></span>');
                span.click(asset.Id, function (e) {
                    OnAddJobsite(e.data);
                });
                div_icon.append(span);
                setIconBr(div_icon);
            }

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

            if (type == 0) {
                div_icon.find("span").click(function (e) {
                    p.hide();
                    $('#assetsummarytrigle').hide();
                });
            }

            return div_icon;
        }

        function showAssetInfo() {
            if (!_this.asset) return;
            var asset = _this.asset;
            var loc = asset.Location;
            var br = '<br />';

            if (_this.type == 0) {
                var div_close = $('<div style="height:20px;"></div>');
                _this.basectrl.append(div_close);
                var span_close = $('<span class="clearbtn" style="float: right; padding: 5px;cursor:pointer;"></span>').click(function () {
                    p.hide();
                    $('#assetsummarytrigle').hide();
                });
                div_close.append(span_close);
            }

            if (showTooltipIcons) {
                var div_icon = showAssetIcon();
                _this.basectrl.append(div_icon);
            }

            var div_summary = $('<div class="assetsummaryinfo_div"></div>');
            if (!showTooltipIcons)
                div_summary.css("margin-left", 10);
            _this.basectrl.append(div_summary);

            if (asset.AssetIconUrl) {
                var div_assetpic = $('<div style="text-align:center;"></div>');
                var pic = $('<img style="max-width: 98%;max-height:60px;" />').attr('src', asset.AssetIconUrl);
                div_assetpic.append(pic);
                var span_picfold = $('<span class="iconpicup" style="float: right; padding: 5px;cursor:pointer;"></span>').click(function () {
                    if ($(this).hasClass('iconpicup')) {
                        $(this).removeClass("iconpicup");
                        $(this).addClass("iconpicdown");
                        div_assetpic.hide();
                        assetIconCollapsed = true;
                    }
                    else {
                        $(this).removeClass("iconpicdown");
                        $(this).addClass("iconpicup");
                        div_assetpic.show();
                        assetIconCollapsed = false;
                    }
                });
                if (assetIconCollapsed) {
                    span_picfold.removeClass("iconpicup");
                    span_picfold.addClass("iconpicdown");
                    div_assetpic.hide();
                }
                div_summary.append(span_picfold);

                div_summary.append(div_assetpic);
            }

            var b = $('<b style="font-weight:700;font-size:16px;"></b>').text(asset.DisplayName);
            div_summary.append(b).append(br);
            b = $('<b>' + GetTextByKey("P_MV_SN_COLON", "SN:") + ' </b>');
            div_summary.append(b);
            var label = $('<label></label>').text(asset.VIN);
            div_summary.append(label);
            b = $('<b style="margin-left:10px;">' + GetTextByKey("P_MV_TYPE_COLON", "Type:") + ' </b>');
            div_summary.append(b);
            label = $('<label></label>').text(asset.TypeName);
            div_summary.append(label).append(br);

            b = $('<b>' + GetTextByKey("P_MV_MAKE_COLON", "Make:") + ' </b>');
            div_summary.append(b);
            label = $('<label></label>').text(asset.MakeName);
            div_summary.append(label);
            b = $('<b style="margin-left:10px;">' + GetTextByKey("P_MV_MODEL_COLON", "Model:") + ' </b>');
            div_summary.append(b);
            label = $('<label></label>').text(asset.ModelName);
            div_summary.append(label).append(br).append(br);

            b = $('<b>' + GetTextByKey("P_MV_GROUPS_COLON", "Group(s):") + ' </b>');
            div_summary.append(b);
            label = $('<label></label>').text(asset.Groups);
            div_summary.append(label).append(br).append(br);

            var text = ""
            var value = "";
            var timevalue = "";
            if (asset.OnRoad) {
                text = GetTextByKey("P_MV_ODOMETER_COLON", "Odometer:");
                if (asset.Odometer && asset.Odometer.Corrected >= 0)
                    value = asset.Odometer.Corrected.toFixed(2) + " " + asset.Odometer.UOM
                timevalue = asset.OdometerAsofTimeLocalStr;
            }
            else {
                text = GetTextByKey("P_MV_HOURS_COLON", "Hours:");
                if (asset.EngineHours && asset.EngineHours.Corrected >= 0)
                    value = asset.EngineHours.Corrected.toFixed(2);
                timevalue = asset.EngineHoursAsofTimeLocalStr;
            }

            b = $('<b>' + text + ' </b>');
            div_summary.append(b);
            label = $('<label></label>').text(value);
            div_summary.append(label);
            if ((IsSupperAdmin || isAllowed) && canAddReading() && canEditAsset) {
                var span = $('<span class="assetsummaryplus" style="margin-left:15px;cursor:pointer;"></span>').click(openAddDialog);
                span.attr("title", GetTextByKey("P_MV_ADDREADING", "Add Reading"));
                div_summary.append(span);
            }
            div_summary.append(br);
            if (timevalue !== "") {
                label = $('<label></label>').text("(" + GetTextByKey("P_MV_ASOF", "as of ") + timevalue + ")");
                if ((asset.OnRoad && asset.IsOdometerRed) || (!asset.OnRoad && asset.IsEngineHoursRed))
                    label.css('color', 'red');
                div_summary.append(label).append(br);
            }
            div_summary.append(br);

            if (canViewPM) {
                var tb = $('<table style="width: 100%;display:none;" id="pmtable' + _this.ctrlindex + '"></table>');
                div_summary.append(tb);
            }

            b = $('<b>' + GetTextByKey("P_MV_JOBSITES_COLON", "Jobsite(s):") + ' </b>');
            div_summary.append(b);
            if (asset.Jobsites && asset.Jobsites !== "")
                label = $('<label></label>').text(asset.Jobsites);
            else
                label = $('<label></label>').text(GetTextByKey("P_MV_NOJOBSITEASSIGNED", "No Jobsite Assigned"));
            div_summary.append(label).append(br);
            if (asset.LocationAddress && asset.LocationAddress != "") {
                b = $('<b>' + GetTextByKey("P_MV_LOCATION_COLON", "Location:") + ' </b>');
                div_summary.append(b);
                label = $('<label></label>').text(asset.LocationAddress);
                div_summary.append(label).append(br);
                if (asset.LocationAsofTimeLocalStr !== "") {
                    label = $('<label></label>').text("(" + GetTextByKey("P_MV_ASOF", "as of ") + asset.LocationAsofTimeLocalStr + ")");
                    if (asset.IsLocationRed)
                        label.css('color', 'red');
                    div_summary.append(label).append(br);
                }
            }

            if (canViewInspection) {
                var div_inspection = $('<div style="min-width:450px;display:none;" id="divinspection_' + _this.ctrlindex + '"></div>');
                div_summary.append(div_inspection);
            }

            var tb = $('<table style="width:100%;"></table>');
            div_summary.append(tb);
            var tr = $('<tr></tr>');
            tb.append(tr);
            //asset.FuelLevel = 25;
            if (!isNaN(asset.FuelLevel) && asset.FuelLevel > 0) {
                var td_fuellevel = $('<td></td>');
                tr.append(td_fuellevel);
                var fuellevel_div = $('<div id="fuelleveldiv' + _this.ctrlindex + '" style="width:40px;height:120px;display:inline-block;padding-left:10px;padding-right:10px;"></div>');
                td_fuellevel.append(fuellevel_div);
                showFuelLevelChart1("fuelleveldiv" + _this.ctrlindex, 120, asset.FuelLevel);
            }
            if (loc) {
                if (asset.OnRoad && (loc.Speed > 0 || (loc.Speed == 0 && asset.MoveStatus != 0))) {
                    var isspeeding = false;
                    if (loc.PostedSpeedLimit > 0 && loc.Speed != 0 && loc.Speed > loc.PostedSpeedLimit)
                        isspeeding = true;

                    var td_speed = $('<td></td>');
                    tr.append(td_speed);

                    var speedtext = "";
                    if (loc.Speed == 0) {
                        if (asset.MoveStatus == 2)
                            speedtext = "Stopped On";
                        else if (asset.MoveStatus == 3)
                            speedtext = "Stopped Off";
                    }

                    var speed_div = $('<div id="speeddiv' + _this.ctrlindex + '" style="width:160px;height:160px;display:inline-block;"></div>');
                    td_speed.append(speed_div);
                    showSpeedChart("speeddiv" + _this.ctrlindex, loc.Speed, loc.PostedSpeedLimit, loc.SpeedUnits, speedtext);

                    if (loc.Heading > 0) {
                        var td_heading = $('<td></td>');
                        tr.append(td_heading);
                        var compass_div = $('<div id="compass_' + _this.ctrlindex + '" style="display:inline-block;"></div>');
                        td_heading.append(compass_div);
                        createCompass(compass_div, loc.Heading);
                    }
                }
            }

            div_summary.append(br);
            if (asset.Description && asset.Description !== "") {
                asset.Description = replaceHtmlText(asset.Description);
                b = $('<b>' + GetTextByKey("P_MV_DESCRIPTION_COLON", "Description:") + ' </b>');
                div_summary.append(b);
                label = $('<label></label>').html(asset.Description);
                div_summary.append(label).append(br).append(br);
            }

            if (_this.alerttips && _this.alerttips !== "") {
                var atips = replaceHtmlText(_this.alerttips)
                label = $('<label></label>').html(atips);
                div_summary.append(label).append(br);
            }
            if (canViewAlertsManagement) {
                var div_alerts = $('<div style="height:150px;min-width:450px;display:none;" id="divalerts_' + _this.ctrlindex + '"></div>');
                div_summary.append(div_alerts);
            }

            if (_this.assetext)
                showAssetExtInfo(_this.assetext);
        }

        function showAssetExtInfo(assetext) {
            var br = '<br />';
            if (canViewPM) {
                var tb = $('#pmtable' + _this.ctrlindex).empty().show();
                if (assetext.PMPlanItems && assetext.PMPlanItems.length > 0) {
                    for (var i = 0; i < assetext.PMPlanItems.length; i++) {
                        var pmplan = assetext.PMPlanItems[i];
                        var tr = $('<tr></tr>');
                        tb.append(tr);
                        var td = $('<td style="width:100px;vertical-align:top;"></td>');
                        tr.append(td);
                        if (i == 0) {
                            td.append($('<b>' + GetTextByKey("P_MV_NEXTSERVICE_COLON", "Next Service:") + ' </b>'));
                        }
                        td = $('<td style="text-align:left;"></td>').text(pmplan.NextPlanDetail);
                        tr.append(td);
                    }
                }

                if (assetext.MaintenanceRecordItem && assetext.MaintenanceRecordItem.ID) {
                    var item = assetext.MaintenanceRecordItem;
                    var tr = $('<tr></tr>');
                    tb.append(tr);
                    var td = $('<td style="width:100px;vertical-align:top;"></td>');
                    tr.append(td);
                    td.append($('<b>' + GetTextByKey("P_MV_LASTCOMPLETED_COLON", "Last Completed:") + ' </b>'));
                    td = $('<td style="text-align:left;"></td>').text(item.LastCompletedText);
                    tr.append(td);
                }
            }

            if (canViewInspection && assetext.InspectReportItem && assetext.InspectReportItem.Id !== "") {
                var divinspection = $('#divinspection_' + _this.ctrlindex).empty().show();
                b = $('<b>' + GetTextByKey("P_MV_LASTINSPECTION_COLON", "Last Inspection:") + '  </b>');
                divinspection.append(b);
                label = $('<a href="#"></a>').text(assetext.CommitTimeStr).click(openInspectionReport);
                divinspection.append(label).append(br).append(br);
            }

            if (canViewAlertsManagement && assetext.AlertItems && assetext.AlertItems.length > 0) {
                var divalerts = $('#divalerts_' + _this.ctrlindex).empty().show();
                var div_alertgrid = $('<div style="height:150px;min-width:450px;" id="divalertgrid_' + _this.ctrlindex + '"></div>');
                var div_alertstitle = $('<div style="min-width:450px;background-color:#0079c1;position:relative;"></div>');
                var span_alertstitle = $('<span></span>').text(GetTextByKey("P_MV_ALERTLAST14DAYS", "Alerts Last 14 Days"));
                div_alertstitle.append(span_alertstitle);
                var span_alertsicon = $('<span class="iconalertsup" style=right:10px;position:absolute;"></span>').click(function () {
                    if ($(this).hasClass('iconalertsup')) {
                        $(this).removeClass("iconalertsup");
                        $(this).addClass("iconalerts");
                        div_alertgrid.hide();
                        alertsCollapsed = true;
                    }
                    else {
                        $(this).removeClass("iconalerts");
                        $(this).addClass("iconalertsup");
                        div_alertgrid.show();
                        alertsCollapsed = false;
                    }
                });
                if (alertsCollapsed) {
                    span_alertsicon.removeClass("iconalertsup");
                    span_alertsicon.addClass("iconalerts");
                    div_alertgrid.hide();
                }
                div_alertstitle.append(span_alertsicon);
                divalerts.append(div_alertstitle);
                divalerts.append(div_alertgrid);

                InitAlertsGridData();
                showAlertsList(assetext.AlertItems);
            }
            srcollInfowindow();
        }

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

            _this.grid_alertsdt.setData(rows);
        }

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

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

        function devicerequest(method, param, callback, error) {
            var path = "";
            if (_network.root != null && _network.root.length > 0) {
                path = "MachineDeviceManagement/";
            }
            _network.request(path + "ManageMachines.aspx", -1, method, param, callback, error || function (e) {
                console.log(e);
            });
        }

        function createCompass(container, heading) {
            var options = {
                lineColor: '#8cc8ad',
                pointerColor: '#cc3735',
                lineWidth: 10,
                circleWidth: 10,
                radius: 50,
                //font: 'Verdana',
                fontSize: 14
            }
            var compass = new $compass(container, options);
            compass.draw(heading);
        }

        function loadAssetInfo() {
            var asset = assetInfoCache['' + _this.assetid];
            if (asset) {
                _this.asset = asset;
                if (_this.status == 0)
                    showAssetInfo();
                return;
            }
            _this.showLoading();
            devicerequest('GetAssetSummaryInfo', _this.companyid + String.fromCharCode(170) + _this.assetid, function (data) {
                _this.hideLoading();
                if (typeof data === 'string') {
                    _dialog.showAlert(GetTextByKey("P_SELECTASSETS_FAILEDGETLIST", 'Failed to get the machine list: ') + data, "Asset Summary");
                    return;
                }
                _this.asset = data;
                assetInfoCache['' + _this.assetid] = data;
                if (_this.status == 0)
                    showAssetInfo();
            }, function () {
                _this.hideLoading();
            });
        }

        function loadAssetExtInfo() {
            var ext = assetExtCache['' + _this.assetid];
            if (ext) {
                _this.assetext = ext;
                if (_this.status == 0 && _this.asset)
                    showAssetExtInfo(_this.assetext);
                return;
            }
            _this.showLoading();
            devicerequest('GetAssetExtInfo', _this.companyid + String.fromCharCode(170) + _this.assetid, function (data) {
                _this.hideLoading();
                if (typeof data === 'string') {
                    return;
                }
                _this.assetext = data;
                assetExtCache['' + _this.assetid] = data;
                if (_this.status == 0 && _this.asset)
                    showAssetExtInfo(_this.assetext);
            }, function () {
                _this.hideLoading();
            });
        }

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

                else
                    return _this.asset.EngineHours && (_this.asset.EngineHours.IsEmpty ||
                        _this.asset.EngineHours.DataSource.toLowerCase() == "calamp" ||
                        _this.asset.EngineHours.DataSource.toLowerCase() == "pedigree");
            }
        }


        function openAddDialog() {
            if (_this.asset.OnRoad) {
                openAddOdometer(_this.asset);
            }
            else {
                openAddEnginHours(_this.asset, _this.companyid);
            }
        }

        function openInspectionReport() {
            window.open("inspection/report.aspx?rid=" + _this.assetext.InspectReportItem.Id, "_blank");
        }

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

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

        function showFuelLevelChart1(id, height, value) {
            //  基于准备好的dom，初始化echarts实例
            var p = $("#" + id);

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

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

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

        function showFuelLevelChart(id, value) {
            //  基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));

            option = {
                tooltip: {
                    formatter: '{b} : {c}%'
                },
                toolbox: {
                    //feature: {
                    //    restore: {},
                    //    saveAsImage: {}
                    //}
                },
                series: [
                    {
                        name: 'Fuel level',
                        type: 'gauge',
                        detail: {
                            formatter: '{value}',
                            fontSize: 15
                        },
                        data: [{ value: value.toFixed(0), name: 'Fuel level' }],
                        radius: "98%",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 12,
                                //color: [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']] default
                                color: [[0.2, '#ff0000'], [0.4, '#ffc000'], [1, '#91c7ae']]
                            }
                        },
                        splitLine: {
                            show: true,
                            length: 12
                        },
                        axisLabel: {
                            show: true,
                            fontSize: 10,
                            distance: 3
                        },
                        title: {
                            fontSize: 11,
                            offsetCenter: ["0", -15]
                        }
                    }
                ]
            };
            myChart.setOption(option, true);

            //setInterval(function () {
            //    option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            //    myChart.setOption(option, true);
            //}, 2000);
        }

        this.setInfowindowScrollTop = function (top) {
            infowindowScrollTop = top;
        }

        function srcollInfowindow() {
            var infowindow = p.parent(".contentPane");
            if (infowindow.length > 0) {
                infowindow.unbind();
                infowindow.scrollTop(infowindowScrollTop);
                infowindow.scroll(function () {
                    infowindowScrollTop = infowindow.scrollTop();
                });
            }
        }
    }
}