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


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

        .selectinput {
            width: 150px;
            margin-right: 10px;
        }

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

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

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

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

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

        #dialogdatatb td {
            padding-top: 30px;
        }

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

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


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



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

        #basemapGallery {
            position: absolute;
            right: 15px;
            top: 35px;
            width: 370px;
            height: 120px;
            overflow: auto;
            display: none;
            z-index: 200;
            background-color: #EFEFEF;
        }
    </style>
    <script>
        //必须放在地图js之前
        var dojoConfig = {
            paths: {
                extras1: location.pathname.replace(/\/[^/]+$/, "") + "/../js/mapview"
            },
            cacheBust: true
        };
    </script>
    <script type="text/javascript" src="<%=GetFileUrlWithVersion("../js/vue.min.js")%>"></script>
    <script>Vue.config.productionTip = false; Vue.config.silent = true;</script>
    <script type="text/javascript" src="<%=GetFileUrlWithVersion("../js/components/datagrid.js")%>"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/3.40/esri/css/esri.css" />
    <script src="https://js.arcgis.com/3.40"></script>
    <script src="<%=GetFileUrlWithVersion("../js/editableselect.js")%>"></script>
    <script type="text/javascript" src="<%=GetFileUrlWithVersion("../js/mapcontrol.js")%>"></script>

    <script type="text/javascript">        
        var IsDealer = <%=IsDealer ?"true":"false"%>;
        var IsAdmin =<%=IsAdmin ?"true":"false"%>;
        var DataGrid = window.DataGrid || window['g5-datagrid'];


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

        function OnAdd(pid) {
            locationdata = undefined;
            locationID = undefined;
            pID = pid;

            $('#dialog_name').val('');
            $('#dialog_code').val('');
            $('#dialog_longitude').val('');
            $('#dialog_latitude').val('');
            $('#dialog_address').val('');
            $('#dialog_address2').val('');
            $('#dialog_city').val('');
            editableSelectState.val('');
            $('#dialog_zip').val('');
            $('#dialog_notes').val('');
            $('#imgfilogo').attr('src', '');
            $('#trimg').hide();
            $('#dialog_location .dialog-title span.title').text(GetTextByKey("P_SET_ADDLOCATIONS", "Add Location"));

            showmaskbg(true);
            $('#dialog_location')
                .attr('act', 'add')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_location').height()) / 3,
                    'left': (document.documentElement.clientWidth - $('#dialog_location').width()) / 2
                })
                .showDialogfixed();
            $('#dialog_name').focus();
        }

        var locationID;
        var pID;
        var locationdata;
        function OnEdit() {
            locationdata = undefined;
            var index = vue.$refs.grid.selectedIndex;
            if (index < 0) {
                showAlert(GetTextByKey("P_SET_PLEASESELECTLOCATION", "Please select Location."), GetTextByKey("P_SET_EDITLOCATIONS", "Edit Location")); return;
            }
            var location = vue.$refs.grid.source[index];
            if (!location) {
                locationID = undefined;
                pID = undefined;
                return;
            }

            locationID = location.ID;
            pID = location.PId;
            $('#dialog_name').val(location.Name);
            $('#dialog_code').val(location.Code);
            $('#dialog_longitude').val(location.Longitude);
            $('#dialog_latitude').val(location.Latitude);
            $('#dialog_address').val(location.Address);
            $('#dialog_address2').val(location.Address2);
            $('#dialog_city').val(location.City);
            editableSelectState.text(location.State);
            $('#dialog_zip').val(location.Zip);
            $('#dialog_notes').val(location.Notes);
            $('#imgfilogo').attr('src', '../titlelogo.ashx?tp=location&cmpid=' + location.ID + "&sn=" + Math.random() + "'");
            $('#trimg').show();
            $('#dialog_location .dialog-title span.title').text(GetTextByKey("P_SET_EDITLOCATIONS", "Edit Location"));
            showmaskbg(true);
            $('#dialog_location')
                .attr('act', 'edit')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_location').height()) / 3,
                    'left': (document.documentElement.clientWidth - $('#dialog_location').width()) / 2
                })
                .showDialogfixed();
            $('#dialog_name').focus();
        }

        function OnDblClick(e) {
            OnEdit();
        }

        function OnDelete() {
            var index = vue.$refs.grid.selectedIndex;
            if (index < 0) {
                return;
            }
            var loc = vue.$refs.grid.source[index];
            if (!loc) {
                return;
            }
            showConfirm(GetTextByKey("P_SET_DOYOUWANTTODELETETHELOCATION", 'Do you want to delete the location?'), GetTextByKey("P_SET_DELETELOCATIONS", "Delete Location"), function () {
                locationrequest("DeleteCustomerLocation", loc.ID, function (data) {
                    if (typeof (data) === "string") {
                        showAlert(data, GetTextByKey("P_SET_DELETELOCATIONS", "Delete Location"));
                    }
                    else
                        OnRefresh();
                }, function (err) {
                    showAlert(GetTextByKey("P_SET_FAILEDTODELETETHISLOCATION", 'Failed to delete this Location.'), GetTextByKey("P_SET_DELETELOCATIONS", "Delete Location"));
                });
            });
        }

        function OnRefresh() {
            showloading(true);

            var searchtxt = "";
            searchtxt = htmlencode($.trim($('#searchinputtxt').val()));
            locationrequest("GetCustomerLocations", searchtxt, function (data) {
                showloading(false);
                if (typeof (data) === "string") {
                    showAlert(data, GetTextByKey("P_SET_ERROR", 'Error'));
                    return;
                }

                showLocations(data);
            }, function (err) {
                console.log(err);
                showloading(false);
            });
        }

        function showLocations(data) {
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                r.LogoUrl = "../titlelogo.ashx?tp=location&cmpid=" + r.ID + "&sn=" + Math.random();
                r.Edit = "\uf044";
                r.Delete = "\uf00d";
            }
            vue.source = data;
        }

        var vue;
        //加载表格
        function initGrid() {
            showmaskbg(true);
            vue = new Vue({
                el: "#locationlist",
                components: {
                    'data-grid': DataGrid
                },
                data: {
                    columns: CreateStyleColumn(),
                    source: [],
                    totalRow: null
                },
                methods: {
                    rowdblclick: function () {
                        OnEdit();
                    }
                }

            });
            showmaskbg(false);
        }
        //创建列表的行
        function CreateStyleColumn() {
            var list_columns = [
                { name: 'Name', caption: GetTextByKey("P_SET_LOCATIONSNAME", "Location Name"), valueIndex: 'Name', type: 0, css: { 'width': 200, 'text-align': 'left' } },
                { name: 'Code', caption: GetTextByKey("P_SET_CODE", "Code"), valueIndex: 'Code', type: 0, css: { 'width': 200, 'text-align': 'left' } },
                //{ name: 'Latitude', caption: GetTextByKey("P_SET_LATITUDE", "Latitude"), valueIndex: 'Latitude', type: 0, css: { 'width': 150, 'text-align': 'left' } },
                //{ name: 'Longitude', caption: GetTextByKey("P_SET_LONGITUDE", "Longitude"), valueIndex: 'Longitude', type: 0, css: { 'width': 150, 'text-align': 'left' } },
                { name: 'Address', caption: GetTextByKey("P_SET_ADDRESS1", "Address 1"), valueIndex: 'Address', type: 0, css: { 'width': 200, 'text-align': 'left' } },
                { name: 'Address2', caption: GetTextByKey("P_SET_ADDRESS2", "Address 2"), valueIndex: 'Address2', type: 0, css: { 'width': 200, 'text-align': 'left' } },
                { name: 'City', caption: GetTextByKey("P_SET_CITY", "City"), valueIndex: 'City', type: 0, css: { 'width': 150, 'text-align': 'left' } },
                { name: 'State', caption: GetTextByKey("P_SET_STATE", "State"), valueIndex: 'State', type: 0, css: { 'width': 150, 'text-align': 'left' } },
                { name: 'Zip', caption: GetTextByKey("P_SET_ZIP", "Zip"), valueIndex: 'Zip', type: 0, css: { 'width': 150, 'text-align': 'left' } },
                { name: 'LogoUrl', caption: GetTextByKey("P_SET_LOGO", "Logo"), valueIndex: "LogoUrl", type: 7, css: { 'width': 80, 'text-align': 'left' } },
                { name: 'Notes', caption: GetTextByKey("P_SET_NOTES", "Notes"), valueIndex: 'Notes', type: 0, css: { 'width': 280, 'text-align': 'left' } },
                { name: 'AddSub', caption: "", valueIndex: 'Add', type: 5, css: { 'width': 30, 'text-align': 'center' } },
                { name: 'Location', caption: "", valueIndex: 'Location', type: 5, css: { 'width': 30, 'text-align': 'center' } },
                { name: 'Edit', caption: "", valueIndex: 'Edit', type: 5, css: { 'width': 30, 'text-align': 'center' } },
                { name: 'Delete', caption: "", valueIndex: 'Delete', type: 5, css: { 'width': 30, '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.type = list_columns[hd].type;
                col.enabled = true;
                col.width = list_columns[hd].css.width;
                col.align = list_columns[hd].css["text-align"]
                col.key = list_columns[hd].valueIndex;
                if (col.name === "Name") {
                    col.styleFilter = function (e) {
                        if (e.PId > 0)
                            return { 'padding-left': '24px' };
                        else
                            return { 'font-weight': 'bold' };
                    }
                }
                else if (col.name === "AddSub") {
                    col.onclick = function (e) {
                        var index = vue.$refs.grid.selectedIndex;
                        if (index < 0) return;
                        var dep = vue.$refs.grid.source[index];
                        OnAdd(dep.ID);
                    };
                    col.filter = function (e) {
                        if (e.PId > 0)
                            return "";
                        else
                            return "\uf067";
                    }
                    col.styleFilter = function (e) {
                        if (e.PId > 0)
                            return { 'dispaly': 'none' };
                        else
                            return {
                                'font-family': 'FontAwesome',
                                'cursor': 'pointer',
                                'color': 'rgb(123, 28, 33)'
                            };
                    }
                    col.attrs = { 'title': GetTextByKey("P_SET_ADD", 'Add') };
                }
                else if (col.name === "LogoUrl") {
                    col.styleFilter = function (item) {
                        return { width: '60px' };
                    }
                }
                else if (col.name === "Edit") {
                    col.onclick = function (e) {
                        OnEdit();
                    };
                    col.styleFilter = function (e) {
                        return {
                            'font-family': 'FontAwesome',
                            'cursor': 'pointer',
                            'color': 'rgb(123, 28, 33)'
                        };
                    }
                    col.attrs = { 'title': GetTextByKey("P_SET_EDIT", 'Edit') };
                }
                else if (col.name === "Delete") {
                    col.onclick = function (e) {
                        OnDelete();
                    };
                    col.styleFilter = function (e) {
                        return {
                            'font-family': 'FontAwesome',
                            'cursor': 'pointer',
                            'color': 'rgb(123, 28, 33)'
                        };
                    }
                    col.attrs = { 'title': GetTextByKey("P_SET_DELETE", 'Delete') };
                }
                else if (col.name === "Location") {
                    col.onclick = function (e, item) {
                        locationdata = item;
                        SelectLocation();
                    };
                    col.filter = function (e) {
                        return "\uf3c5";
                    }
                    col.styleFilter = function (e) {
                        return {
                            'font-family': 'FontAwesome',
                            'cursor': 'pointer',
                            'color': 'rgb(123, 28, 33)'
                        };
                    }
                    col.attrs = { 'title': GetTextByKey("P_SET_SELECTLOCATION", 'Select Location') };
                }
                columns.push(col);
            }
            return columns;
        }

        function OnDialogOK() {
            var item = {
                'Name': $.trim($('#dialog_name').val()),
                'Code': $.trim($('#dialog_code').val()),
                'Latitude': $.trim($('#dialog_latitude').val()),
                'Longitude': $.trim($('#dialog_longitude').val()),
                'Address': $.trim($('#dialog_address').val()),
                'Address2': $.trim($('#dialog_address2').val()),
                'City': $.trim($('#dialog_city').val()),
                'State': $.trim(editableSelectState.text()),
                'Zip': $.trim($('#dialog_zip').val()),
                'Notes': $.trim($('#dialog_notes').val())
            };
            var alerttitle;
            if (locationID) {
                item.ID = locationID;
                item.PId = pID;
                alerttitle = GetTextByKey("P_SET_EDITLOCATIONS", "Edit Location");
            } else {
                item.ID = -1;
                item.PId = pID;
                alerttitle = GetTextByKey("P_SET_ADDLOCATIONS", "Add Location");
            }

            if (!item.Name || item.Name.length == 0) {
                showAlert(GetTextByKey("P_SET_LOCATIONNAMECANNOTBEEMPTY", 'Location name cannot be empty.'), alerttitle);
                $('#dialog_name').focus();
                return;
            }
            if (item.Name.length > 100) {
                showAlert(GetTextByKey("P_SET_LOCATIONNAMEISTOOLONG", 'Location name is too long (> 100 characters).'), alerttitle);
                $('#dialog_name').focus();
                return;
            }

            if (item.Latitude === "" || isNaN(item.Latitude) || item.Latitude > 90 || item.Latitude < -90)
                item.Latitude = 0;
            if (item.Longitude === "" || isNaN(item.Longitude) || item.Longitude > 180 || item.Longitude < -180)
                item.Longitude = 0;

            if (item.Notes.length > 2000) {
                showAlert(GetTextByKey("P_SET_NOTESISTOOLONG", 'Notes is too long (> 2000 characters).'), alerttitle);
                $('#dialog_notes').focus();
                return;
            }

            showloading(true);
            var formData = new FormData();
            formData.append("fiLogoFile", fiLogoFile);
            formData.append("MethodName", "SaveCustomerLocation");
            formData.append("ClientData", htmldecode(JSON.stringify(item)));

            $.ajax({
                url: 'ManageLocations.aspx',
                type: 'POST',
                dataType: 'json',
                processData: false,
                contentType: false,
                data: formData,
                async: true,
                success: function (result) {
                    showloading(false);
                    if (result == "OK") {
                        $('#dialog_location').hideDialog();
                        fiLogoFile = undefined;
                        OnRefresh();
                    }
                    else {
                        showAlert(result, GetTextByKey("P_SET_SAVELOCATIONS", 'Save Location'));
                    }
                },
                error: function (err) {
                    showloading(false);
                    showAlert(err.statusText, GetTextByKey("P_SET_SAVELOCATIONS", 'Save Location'));
                }
            });
        }

        var editableSelectState;
        $(function () {
            setPageTitle(GetTextByKey("P_SET_MANAGELOCATIONS", 'Manage Locations'), true);
            initGrid();
            $('#btnBrowseLogo').click(browseLogo);

            editableSelectState = new $editableselect($("#dialog_state"), 50);
            editableSelectState.tabIndex(1);

            OnRefresh();

            getStates();

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

            $('#dialog_selectlocation').dialog(function () {
                if (!$("#dialog_location").is(":visible"))
                    showmaskbg(false);
            });

            $('#searchinputtxt').keydown(searchEnter);

            $(window).resize(function () {
                $("#locationlist").css("height", $(window).height() - $("#locationlist").offset().top - 4);
            }).resize();

        });

        var statedata = [];
        function getStates() {
            statedata.push("AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ",
                "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY");
            editableSelectState.datasource = statedata;
            editableSelectState.valuepath = ""
            editableSelectState.displaypath = "";
        }

        var fiLogoFile = undefined;
        function browseLogo() {
            var file = $('<input type="file" style="display: none;" accept="image/png,image/jpeg" />')
            file.change(function () {
                if (!/image\/\w+/.test(this.files[0].type)) {
                    showAlert(GetTextByKey("P_SET_LOCATIONLOGOISINVALID", 'The file type for the location logo is invalid. The file must be JPG or PNG.'), GetTextByKey("P_SET_SAVELOCATIONS", 'Save Location'));
                    return;
                }
                fiLogoFile = this.files[0];
                $("#imgfilogo").attr('src', window.URL.createObjectURL(fiLogoFile));
                $('#trimg').show();
            }).click();
        }

        function searchEnter(e) {
            if (e.keyCode == 13 || e.keyCode == 9) {
                OnRefresh();
            }
        }

        var mapctrl;
        function SelectLocation() {
            var d = $('#dialog_selectlocation');
            if (!mapctrl)
                mapctrl = new $mapcontrol(setmaplocation, onlocselectchanged);
            else
                setmaplocation();

            $('#dialog_selectlocation .dialog-title span.title').text(GetTextByKey("P_SET_SELECTLOCATION", "Select Location"));
            showmaskbg(true);
            d.css({
                'top': (document.documentElement.clientHeight - d.height()) / 3,
                'left': (document.documentElement.clientWidth - d.width()) / 2
            }).showDialogfixed();
        }

        function onlocselectchanged(lat, long) {
            $("#lbllatitude").text(lat);
            $("#lbllongtude").text(long);
        }

        function setmaplocation() {
            $("#lbllatitude").text("");
            $("#lbllongtude").text("");
            mapctrl.setLocation(0, 0);
            var latitude = 0;
            var longitude = 0;
            if (locationdata) {
                latitude = locationdata.Latitude;
                longitude = locationdata.Longitude;
            }
            else {
                latitude = $("#dialog_latitude").val();
                longitude = $("#dialog_longitude").val();
            }

            if (latitude === "" || isNaN(latitude) || latitude > 90 || latitude < -90)
                return;
            if (longitude === "" || isNaN(longitude) || longitude > 180 || longitude < -180)
                return;

            $("#lbllatitude").text(latitude);
            $("#lbllongtude").text(longitude);
            mapctrl.setLocation(latitude, longitude);
        }

        function OnSelectLocationOK() {
            $('#dialog_selectlocation').hideDialog();
            var loc = mapctrl.getLocation();
            if (locationdata) {
                locationdata.Latitude = loc[0];
                locationdata.Longitude = loc[1];
                saveLocation(locationdata);
            }
            else {
                $("#dialog_latitude").val(loc[0]);
                $("#dialog_longitude").val(loc[1]);
                GetAddress();
            }
        }

        function saveLocation(loc) {
            var item = {
                'ID': loc.ID,
                'PId': loc.PId,
                'Name': loc.Name,
                'Code': loc.Code,
                'Latitude': loc.Latitude,
                'Longitude': loc.Longitude,
                'Address': loc.Address,
                'Notes': loc.Notes
            };
            var p = htmldecode(JSON.stringify(item));
            locationrequest("SaveCustomerLocation", p, function (data) {
                if (data === 'OK')
                    OnRefresh();
            }, function (err) {
            });
        }

        var LocatorC = undefined;
        var PointC = undefined;
        var locator;
        function getAddress(lat, long) {
            if (!locator) {
                require([
                    "esri/tasks/locator",
                    "esri/geometry/Point"
                ], function (Locator, Point) {
                    LocatorC = Locator;
                    PointC = Point;
                    //var locator = new Locator("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_USA/GeocodeServer");
                    var locator = new LocatorC("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
                    locator.on("location-to-address-complete", function (evt) {
                        if (evt.address.address) {
                            if (evt.address.address.Address && evt.address.address.Address != "")
                                $('#dialog_address').val(evt.address.address.Address);
                            else
                                $('#dialog_address').val(evt.address.address.Match_addr);
                            $('#dialog_city').val(evt.address.address.City);
                            editableSelectState.text(evt.address.address.RegionAbbr);
                            $('#dialog_zip').val(evt.address.address.Postal);
                        }
                    });

                    var point = new PointC(long, lat);
                    locator.locationToAddress(point, 100);
                });
            }
            else {
                var point = new PointC(long, lat);
                locator.locationToAddress(point, 100);
            }
        }

        function GetAddress() {
            //var address = $('#dialog_address').val();
            //if (!address) {
            var longitude = $("#dialog_longitude").val();
            var latitude = $("#dialog_latitude").val();
            if (longitude === "" || isNaN(longitude) || longitude > 180 || longitude < -180)
                return;
            if (latitude === "" || isNaN(latitude) || latitude > 90 || latitude < -90)
                return;
            getAddress(latitude, longitude);
            //}
        }
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="recordcontent" style="padding: 0px; margin: 0px;">
        <div class="page_title" data-lgid="P_SET_MANAGELOCATIONS">Manage Locations</div>
        <div class="function_title">
            <span class="sbutton iconadd" onclick="OnAdd();" data-lgid="P_SET_ADD">Add</span>
            <span class="sbutton iconrefresh" onclick="OnRefresh();" data-lgid="P_SET_REFRESH">Refresh</span>
        </div>
        <div class="clear"></div>
        <div id="locationlist">
            <data-grid ref="grid" v-bind:columns="columns" v-bind:source="source" v-bind:allow-editing="true" v-on:rowdblclick="rowdblclick"
                v-bind:allow-auto-new-row="false" v-bind:total-row="totalRow" body-class="autoHeightBody">
            </data-grid>
        </div>
        <%--<div id="locationlist"></div>--%>
    </div>
    <div id="mask_bg" style="display: none;">
        <div class="loading c-spin"></div>
    </div>

    <div class="dialog" id="dialog_location" style="display: none; width: 500px;">
        <div class="dialog-title"><span class="title" data-lgid="P_SET_ADDLOCATIONS">Add Location</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <table>
                <tr>
                    <td class="label" data-lgid="P_SET_LOCATIONSNAME_COLON">Location Name:</td>
                    <td colspan="2">
                        <input type="text" id="dialog_name" maxlength="100" tabindex="1" style="width: 320px;" autocomplete="off" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_SET_CODE_COLON">Code:</td>
                    <td colspan="2">
                        <input type="text" id="dialog_code" maxlength="20" tabindex="1" style="width: 320px;" autocomplete="off" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_SET_LATITUDE_COLON">Latitude:</td>
                    <td>
                        <input type="text" id="dialog_latitude" disabled="disabled" maxlength="100" tabindex="1" style="width: 320px;" onblur="GetAddress()" autocomplete="off" /></td>
                    <td rowspan="2">
                        <span class="sbutton iconlocation" onclick="SelectLocation()" data-title-lgid="P_SET_SELECTLOCATION"></span></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_SET_LONGITUDE_COLON">Longitude:</td>
                    <td>
                        <input type="text" id="dialog_longitude" disabled="disabled" maxlength="100" tabindex="1" style="width: 320px;" onblur="GetAddress()" autocomplete="off" />
                    </td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_SET_ADDRESS1_COLON">Address 1:</td>
                    <td colspan="2">
                        <input type="text" id="dialog_address" maxlength="1000" tabindex="1" style="width: 320px;" autocomplete="off" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_SET_ADDRESS2_COLON">Address 2:</td>
                    <td colspan="2">
                        <input type="text" id="dialog_address2" maxlength="1000" tabindex="1" style="width: 320px;" autocomplete="off" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_SET_CITY_COLON">City:</td>
                    <td colspan="2">
                        <input type="text" id="dialog_city" maxlength="50" tabindex="1" style="width: 320px;" autocomplete="off" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_SET_STATE_COLON">State:</td>
                    <td colspan="2">
                        <div id="dialog_state" style="width: 322px; height: 22px;"></div>
                    </td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_SET_ZIP_COLON">Zip:</td>
                    <td colspan="2">
                        <input type="text" id="dialog_zip" maxlength="50" tabindex="1" style="width: 320px;" autocomplete="off" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_SET_LOGO_COLON">Logo:</td>
                    <td colspan="2">
                        <input id="btnBrowseLogo" type="button" value="Browse..." data-lgid="P_SET_BROWSE" tabindex="1" style="width: 120px; height: 22px;" />
                    </td>
                </tr>
                <tr id="trimg">
                    <td class="label"></td>
                    <td colspan="2">
                        <img id="imgfilogo" src="" style="width: 60px; height: 60px; margin: 5px;" />
                    </td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_SET_NOTES_COLON">Notes:</td>
                    <td colspan="2">
                        <textarea id="dialog_notes" class="inputbox" maxlength="1000" tabindex="6" style="width: 320px;"></textarea></td>
                </tr>
            </table>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_SET_CANCEL" class="dialog-close" tabindex="8" />
            <input type="button" onclick="OnDialogOK();" value="OK" data-lgid="P_SET_OK" tabindex="7" />
            <div class="clear"></div>
        </div>
    </div>

    <div class="dialog" id="dialog_selectlocation" style="display: none;">
        <div class="dialog-title"><span class="title" data-lgid="P_SET_SELECTLOCATION">Select Location</span><em class="dialog-close"></em></div>
        <div style="width: 900px; height: 600px;">
            <div id="mapdiv" style="width: 100%; height: 100%;">
            </div>
            <div id="basemapgalleryDiv">
                <div id="basemapImg"></div>
                <div id="basemapTitle"></div>
            </div>
            <div id="basemapGallery"></div>
        </div>
        <div class="dialog-func">
            <span data-lgid="P_SET_LATITUDE_COLON">Latitude:</span>
            <span id="lbllatitude"></span>
            <span data-lgid="P_SET_LONGITUDE_COLON" style="margin-left: 10px;">Longitude:</span>
            <span id="lbllongtude"></span>
            <input type="button" value="Cancel" data-lgid="P_SET_CANCEL" class="dialog-close" tabindex="8" />
            <input type="button" onclick="OnSelectLocationOK();" value="OK" data-lgid="P_SET_OK" tabindex="7" />
            <div class="clear"></div>
        </div>
    </div>
</asp:Content>