
function setmapwidth() {

    var gridViewControl = document.getElementById('gvData');
    if (gridViewControl != null) {
        document.getElementById('MapOuter').style.width = gridViewControl.width; //document.body.clientWidth ;//document.documentElement.clientWidth-35//screen.width - 35;
    }
    if (document.body.clientHeight < 640)
        document.getElementById('MapOuter').style.height = (document.body.clientHeight) + 'px';
    if (document.body.clientHeight < 800)
        document.getElementById('MapOuter').style.height = (document.body.clientHeight / 2) + 'px';
    else
        document.getElementById('MapOuter').style.height = (document.body.clientHeight / 2) + 'px';
}
function OfflineMapLoad() {
    document.getElementById("map-legend").innerHTML = iconLegendText();
    setmapwidth();
    var map = L.map('map').setView([25.138844674785265, 55.275999298267614], 10);
    L.tileLayer('../OfflineMap/dubai/{z}/{x}/{y}.png', {
        maxZoom: 15,
        minZoom: 2
        //,
        //tileSize: 256,
        //zoomOffset: -1
    }).addTo(map);
}

function clearMap() {
    document.getElementById('MapOuter').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";

    var ltMapIT = new Array();
    //setmapwidth();
    var container = L.DomUtil.get('map');
    if (container != null) {
        container._leaflet_id = null;
    }
    var map = L.map('map').setView([25.138844674785265, 55.275999298267614], 10);
    L.tileLayer('../OfflineMap/dubai/{z}/{x}/{y}.png', {
        maxZoom: 15,
        minZoom: 2
        //,
        //tileSize: 256,
        //zoomOffset: -1
    }).addTo(map);
}
function DisplayMapIt(latlng, pageName, mainCaption, isMessageVisbile, msgCaption, isDateTimeVisible,
    datetimeCaption, isAddressVisible, addressCaption, isLandmarkVisible, landmarkCaption, isSpeedVisible,
    speedCaption, addLandmarkCaption, isVehicleVisbile, vehicleCaption, isPolylineVisible, driverNameCaption, PassNumberCaption, isDriverNameVisible) {
    if (document.getElementById('MapOuter') != null) {
        document.getElementById('MapOuter').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";
        debugger;
        var ltMapIT = new Array();
        //setmapwidth();
        var container = L.DomUtil.get('map');
        if (container != null) {
            container._leaflet_id = null;
        }
        var map = L.map('map').setView([25.138844674785265, 55.275999298267614], 10);
        L.tileLayer('../OfflineMap/dubai/{z}/{x}/{y}.png', {
            maxZoom: 15,
            minZoom: 2
            //,tileSize: 256,
            //zoomOffset: -1
        }).addTo(map);

        var LeafIcon = L.Icon.extend({
            options: {
                //shadowUrl: 'Marker/leaf-shadow.png',
                //iconSize: [38, 95],
                //shadowSize: [50, 64],
                //iconAnchor: [22, 94],
                //shadowAnchor: [4, 62],
                //popupAnchor: [-3, -76]
            }
        });


        ltMapIT = latlng.split('~&~');

        var markers = L.markerClusterGroup();

        //for (var i = 0; i <= ltMapIT.length - 1; i++) {
        for (var i = ltMapIT.length - 1; i >= 0; i--) {
            if (ltMapIT[i] == "") {
            }
            else {
                var lng = new Array();
                lng = ltMapIT[i].split("~#~");
                var mapMarker = MapIT_Marker("", lng[3], lng[4], lng[5], lng[6], i, lng[2], lng[2],
                    lng[6], mainCaption, isVehicleVisbile, vehicleCaption, isMessageVisbile, msgCaption, isAddressVisible, addressCaption, isSpeedVisible, speedCaption,
                    isLandmarkVisible, landmarkCaption, lng[8], addLandmarkCaption, isDriverNameVisible, driverNameCaption, lng[9], lng[10], lng[11], lng[12], PassNumberCaption, lng[13], lng[11], lng[12], lng[13]);
                var icon = null;
                var Status = lng[4];
                if (Status == 'Offline' || Status == 'Engine') {
                    icon = '../images/Device_Offline.png';
                }
                else if (Status == 'Online') {
                    icon = '../images/Device_Online.png';
                }
                else if (Status == 'Information') {
                    icon = '../images/Device_Online.png';
                }
                else if (Status == 'Running') {
                    icon = '../images/Device_Running.png';
                    // icon = '../images/Device_Warning.png';
                }
                else if (Status == 'Shutdown' || Status == 'Controlled Shutdown') {
                    icon = '../images/Device_Shutdown.png';
                }
                else if (Status == 'Electrical Trip') {
                    icon = '../images/Device_ElectricalTrip.png';
                }
                else {
                    icon = '../images/Device_Warning.png';
                }
                var greenIcon = new LeafIcon({ iconUrl: icon });
                //L.marker([parseFloat(lng[0]), parseFloat(lng[1])], { icon: greenIcon }).addTo(map)
                //    .bindPopup(mapMarker).openPopup();

                //var marker = L.marker([parseFloat(lng[0]), parseFloat(lng[1])]).addTo(map)
                //    .bindPopup(mapMarker).openPopup();
                var marker = L.marker(new L.LatLng(parseFloat(lng[0]), parseFloat(lng[1])), { title: lng[5], icon: greenIcon });
                marker.on('mouseover', function (e) {
                    this.openPopup();
                });
                //marker.on('mouseout', function (e) {
                //    this.closePopup();
                //});
                marker.bindPopup(mapMarker);
                map.addLayer(marker);
                //If need Marker then un command the below code 
                //markers.addLayer(marker);
            }
        }
        //If need Marker then un command the below code 
        //markers.on('clustermouseover', function (c) {
        //    var strmark = "";
        //    var arrMarker = c.layer._markers;
        //    console.log(c);
        //    strmark = "<table class='table' style='margin-bottom:0px'><tr><th scope='col'>S.No</th><th scope='col'>Device Name</th></tr>";
        //    for (var i = 0; i < arrMarker.length; i++) {
        //        var Titlename = arrMarker[i].options.title;
        //        strmark = strmark + "<tr><td>" + (i + 1).toString() + "</td><td>" + Titlename + "</td></tr>";
        //    }
        //    strmark = strmark + "</table>";
        //    var popup = L.popup()
        //        .setLatLng(c.layer.getLatLng())
        //        .setContent(strmark)
        //        .openOn(map);
        //});
        /*map.addLayer(markers);*/
    }

}
function MapIT_Marker(point, heading, Status, VehName, id, i_No, addr, dist, msgDetails, mainHeading, isVehicleVisbile, vehCaption, isMessageVisbile, msgCaption, isAddressVisbile, addrCaption, isSpeedVisbile, speedCaption,
    isLandmarkVisible, landmarkCaption, landmarkName, canAddLandmark, isDriverNameVisible, driverNameCaption, driverName, driverPhoto, driverPhno, PhnoCaption, PassNmbCaption, Passnumber, DeviceID, VehicleTypeId, SiteName) {



    var icon = null;

    if (Status == 'Offline') {
        icon = '../images/Device_Offline.png';
    }
    else if (Status == 'Online') {
        icon = '../images/Device_Online.png';
    }
    else if (Status == 'Information') {
        icon = '../images/Device_Online.png';
    }
    else if (Status == 'Running') {
        icon = '../images/Device_Running.png';
        // icon = '../images/Device_Warning.png';
    }
    else if (Status == 'Shutdown') {
        icon = '../images/Device_Shutdown.png';
    }
    else {
        icon = '../images/Device_Warning.png';
    }

    var VDirection = "ltr";

    var tableAlign;
    if (VDirection == 'rtl') {
        tableAlign = 'right';
    }
    else {
        tableAlign = 'left';
    }
    var bubbleMessage = '<div style="text-align:' + tableAlign + ';"><table style="direction:' + VDirection + '" cellspacing=5 class=\'InfoBubble\'>';
    var monitorTabs = [];


    bubbleMessage += '<tr><td style="min-width:100px"><b>Site Name</b></td><td>' + SiteName + '</td>';
    bubbleMessage += '</tr>';

    if (isVehicleVisbile) {
        bubbleMessage += '<tr><td><b>' + ((vehCaption == null || vehCaption == '') ? 'Vehicle' : vehCaption) + '</b></td><td>' + VehName + '</td>';
        if (isDriverNameVisible) {
            bubbleMessage += '<td rowspan="3" align="left"><br><img src=" ' + ((driverPhoto == null || driverPhoto == '') ? '../images/default-user.svg' : driverPhoto) + '" width="60px" height="60px" alt="Driver" /></td>';
        }
        bubbleMessage += '</tr>';
    }
    if (isDriverNameVisible) {
        bubbleMessage += '<tr><td><b>' + ((driverNameCaption == null || driverNameCaption == '') ? 'Driver' : driverNameCaption) + '</b></td><td>' + ((driverName == null || driverName == '') ? '-' : driverName) + '</td></tr>';
        bubbleMessage += '<tr><td><b>' + ((PhnoCaption == null || PhnoCaption == '') ? 'Phno' : PhnoCaption) + '</b></td><td>' + driverPhno + '</td></tr>';
        bubbleMessage += '<tr><td><b>' + ((PassNmbCaption == null || PassNmbCaption == '') ? 'Pass Number' : PassNmbCaption) + '</b></td><td>' + Passnumber + '</td></tr>';
    }

    if (isMessageVisbile) {
        bubbleMessage += '<tr><td><b>' + ((msgCaption == null || msgCaption == '') ? VMessage : msgCaption) + '</b></td><td>' + msgDetails + '</td></tr>';
    }
    if (isAddressVisbile) {
        bubbleMessage += '<tr><td><b>' + ((addrCaption == null || addrCaption == '') ? VAddress : addrCaption) + '</b></td><td>' + addr + '</td></tr>';
    }

    if (isSpeedVisbile) {
        bubbleMessage += '<tr><td><b>' + 'Status' + '</b></td><td>' + Status + '</td></tr>';
    }
    bubbleMessage += '<tr><td colspan="2"><b><a href="Dashboard_SLD.aspx?DeviceID=' + DeviceID + '&DeviceName=' + VehName + '&DeviceType=' + VehicleTypeId + '">Goto SLD</a></b></tr>';

    bubbleMessage += '</table><div>';

    return bubbleMessage;
}

function iconLegendText() {
    var height = '';
    var VLegendAlign = "left";
    var VCurrLocation = "Curr. Location";
    var VLegendHeader = "Legends";
    var VDirection = "ltr";
    var VAlarms = "Alarms";
    if (location.pathname.indexOf("AdvancedHistoryPage.aspx") != -1 || location.pathname.indexOf("VehicleSummary.aspx") != -1) {
        var landmarkIconText = "";
        var landmarkIconTextForFullscreen = "";
        var downIconText = "";
    }
    else {
        var landmarkIconText = '';
        var landmarkIconTextForFullscreen = '';
        var downIconText = (document.getElementById('gvHistory') != null) ? landmarkIconTextForFullscreen : (document.getElementById('gvData') != null) ? landmarkIconText : (document.getElementById('hdnLandmarkEntries') != null && document.getElementById('hdnLandmarkEntries').value.length != 0) ? landmarkIconTextForFullscreen : "";
    }

    var CurrentPosistion = (document.getElementById('gvHistory') != null) ? "<tr>" +
        "  <td style='padding-left:2px'><img src='../images/down.svg' alt='current location' style='height:15px;width:15px'/></td>" +
        "  <td align=" + VLegendAlign + "><span class='txt' id='spLocation' runat='server' style='font:11px arial;color:#333333'>&nbsp;&nbsp;-&nbsp;&nbsp;" + VCurrLocation + "</span></td>" +
        "</tr>" : '';

    var legendText = "<div class='panel' align='center' id='lnkLegend'> <h2><b>" + VLegendHeader + "</b></h2><div class='panelcontent'><table id='tblLegend' align='right'" + height + " style='direction:" + VDirection + ";'>" +
        "<tr><td align='right' style='padding: 6px 0px 6px 6px;'>" +
        "<table cellpadding='2' cellspacing='2' align='right' width='195px' " +
        ((location.pathname.indexOf("FullscreenMap.aspx") != -1 && location.search.indexOf("?pMy9nEs9WLFPu5OGp76JWA==") != -1) ?
            "height='20px'>" +
            "<tr>" +
            "  <td style='padding-left:2px'><img src='../images/fuellow-1_.svg' alt='Alarms' style='height:15px;width:15px' /></td>" +
            "  <td align='" + VLegendAlign + "'><span class='txt' id='spAlarms' runat='server' style='font:11px arial;color:#333333'>&nbsp;&nbsp;-&nbsp;&nbsp;" + VAlarms + "</span></td>" +
            "</tr>" + CurrentPosistion + "</table></td></tr></table>"
            :
            "height='114px'>" +
            ((location.pathname.indexOf("HistoryPage.aspx") != -1 && location.pathname.indexOf("AdvancedHistoryPage.aspx") == -1) ?
                "<tr>" +
                "  <td style='padding-left:2px' align='center'><img src='../images/Start_point_legend.svg' alt='Ignition On' style='height:15px;width:15px' /></td>" +
                "  <td align='" + VLegendAlign + "'><span class='txt' id='spIgnitionOn' runat='server' style='font:11px arial;color:#333333'>&nbsp;&nbsp;-&nbsp;&nbsp;" + VStart + "</span></td>" +
                "</tr>" +
                "<tr>" +
                "  <td style='padding-left:2px' align='center'><img src='../images/End_point_legend.svg' alt='Ignition Off' style='height:15px;width:15px' /></td>" +
                "  <td align='" + VLegendAlign + "'><span class='txt' id='spIgnitionOff' runat='server' style='font:11px arial;color:#333333'>&nbsp;&nbsp;-&nbsp;&nbsp;" + VDestination + "</span></td>" +
                "</tr>" +
                "<tr>" +
                "  <td style='padding-left:2px'><img src='../images/car1_Mod.svg' alt='Animate' style='height:15px;width:15px' /></td>" +
                "  <td align='" + VLegendAlign + "'><span class='txt' id='spMoving' runat='server' style='font:11px arial;color:#333333'>&nbsp;&nbsp;-&nbsp;&nbsp;Playback Icon</span></td>" +
                "</tr>" : "") +
            "<tr>" +
            "  <td style='padding-left:2px'><img src='../images/Device_Offline.png' alt='Ignition On' style='height:15px;width:15px' /></td>" +
        "  <td align='" + VLegendAlign + "'><span class='txt' id='spIgnitionOn' runat='server' style='font:11px arial;color:#333333'>&nbsp;&nbsp;-&nbsp;&nbsp;" + "offline / No Communication" + "</span></td>" +
            "</tr>" +
            "<tr>" +
            "  <td style='padding-left:2px'><img src='../images/Device_Online.png' alt='Ignition Off' style='height:15px;width:15px' /></td>" +
            "  <td align='" + VLegendAlign + "'><span class='txt' id='spIgnitionOff' runat='server' style='font:11px arial;color:#333333'>&nbsp;&nbsp;-&nbsp;&nbsp;" + "Information" + "</span></td>" +
            "</tr>" +
            "<tr>" +
            "  <td style='padding-left:2px'><img src='../images/Device_Running.png' alt='Ignition On' style='height:15px;width:15px' /></td>" +
        "  <td align='" + VLegendAlign + "'><span class='txt' id='spMoving' runat='server' style='font:11px arial; color:#333333'>&nbsp;&nbsp;-&nbsp;&nbsp;" + "Running on MAINS" + "</span></td>" +
            "</tr>" +
            "<tr>" +
            "  <td style='padding-left:2px'><img src='../images/Device_Warning.png' alt='Idling' style='height:15px;width:15px' /></td>" +
        "  <td align='" + VLegendAlign + "'><span class='txt'  id='spIdling' runat='server' style='font:11px arial;color:#333333'>&nbsp;&nbsp;-&nbsp;&nbsp;" + "Running on Generator" + "</span></td>" +
            "</tr>" +
            "<tr>" +
            "  <td style='padding-left:2px'><img src='../images/Device_ElectricalTrip.png' alt='moving' style='height:15px;width:15px' /></td>" +
            "  <td align='" + VLegendAlign + "'><span class='txt' id='spMoving' runat='server' style='font:11px arial;color:#333333'>&nbsp;&nbsp;-&nbsp;&nbsp;" + "Electrical Trip" + "</span></td>" +
            "</tr>" +
            "<tr>" +
            "  <td style='padding-left:2px'><img src='../images/Device_Shutdown.png' alt='sleep' style='height:15px;width:15px' /></td>" +
        "  <td align='" + VLegendAlign + "'><span class='txt' id='spSleep' runat='server' style='font:11px arial;color:#333333'>&nbsp;&nbsp;-&nbsp;&nbsp;" + "MAINS & Generator FAILED" + "</span></td>" +
            "</tr>" +
            "</table></td></tr></table>") +
        "</div><b>" + downIconText + "</b></div>";
    return legendText;
}