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

<asp:Content ID="Content1" ContentPlaceHolderID="holder_head" runat="Server">
    <style type="text/css">
        #contentctrl {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .function_bar {
            float: right;
        }

        .dialog .dialog-title .dialog-close {
            float: right;
            margin-right: 6px;
            cursor: pointer;
        }

            .dialog .dialog-title .dialog-close:before {
                content: '\e600';
            }

        .dialog-content table {
            border-collapse: collapse;
            width: 100%;
            line-height: 38px;
        }

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

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

            .dialog-content table td textarea {
                margin-top: 6px;
            }

            .dialog-content table td select {
                width: 254px;
                height: 24px;
            }

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

            .dialog-content table td textarea {
                height: 150px;
                width: 500px;
                max-width: 500px;
            }

        .icon {
            font-family: CalciteWebCoreIcons;
            cursor: default;
        }

        .table_holder {
            border-collapse: collapse;
            height: 400px;
        }

            .table_holder thead th {
                text-align: left;
            }

            .table_holder tbody tr {
                line-height: 28px;
                height: 28px;
            }

            .table_holder td {
                vertical-align: top;
            }

            .table_holder .td_controller {
                vertical-align: middle;
                padding: 40px 8px;
                /*border-left: 1px solid #b0b0b0;
                border-right: 1px solid #b0b0b0;*/
            }

        .ctl_button {
            font-family: 'CalciteWebCoreIcons';
            display: block;
            margin: 6px auto;
            width: 60px;
            height: 22px;
            line-height: 21px;
            padding: 0;
        }

        .machine_filter {
            height: 32px;
            line-height: 32px;
        }

            .machine_filter select {
                height: 23px;
                min-width: 100px;
                max-width: 300px;
            }

            .machine_filter span {
                margin-left: 8px;
            }

        .ybutton {
            width: auto;
            line-height: normal;
            margin-left: 6px;
            border: none;
            background: rgb(249, 189, 117);
            padding: 5px 14px;
            cursor: pointer;
        }

            .ybutton:hover {
                background: #d7690E;
            }

        .machines {
            /*table-layout: fixed;*/
            word-break: keep-all;
        }

            .machines td {
                padding-right: 5px;
                white-space: nowrap;
            }
    </style>
    <link rel="stylesheet" type="text/css" href="../css/spectrum.css?v=1" />
    <script src="../js/spectrum.js?v=1" type="text/javascript"></script>
    <script src="../Maintenance/js/inputdatactr.js"></script>
    <script>
        contactquery = function (method, param, callback, error, nolog) {
            _network.request("Contact/ManageContact.aspx", -1, method, param, callback, error || function (e) {
                console.log(e);
                showAlert('Failed to load data: ' + e.statusText, 'Schedule Assets');
            });
        }

        function pmquery(method, param, callback, error) {
            _network.request("Maintenance/ScheduleMachines.aspx", -1, method, param, callback, error || function (e) {
                console.log(e);
                showAlert('Failed to load data: ' + e.statusText, 'Schedule Assets');
            });
        }

        function getText(s, flag) {
            return (s == null)
                ? (flag ? '<i>null</i>' : '')
                : htmlencode(s, $('#span_text_holder')).replace(/ /g, '&nbsp;');
        }

        function trim_str(s) {
            if (s == null)
                return "";
            else
                return s.replace(/(^\s*)|(\s*$)/g, "");
        }


        var _allContacts;

        /***************************Contacts***************************/
        function OnDelete(contact) {
            if (!contact) {
                return;
            }
            showConfirm('Deleting contacts removes them from all records.  Do you want to continue?', 'Delete contact', function () {
                contactquery("DeleteContact", contact.ContactID, function (data) {
                    OnRefresh();
                }, function (err) {
                    showAlert('Failed to delete this contact.', 'Delete contact');
                });
            });
        }

        function OnAdd() {
            contactid = undefined;
            $('#dialog_name').val('');
            $('#dialog_sel_user').val('');
            $('#dialog_notes').val('');
            $('#dialog_sel_type').val('');
            $('#dialog_emailaddress').val('');
            $('#dialog_textaddress').val('');

            $('#dialog_contact .dialog-title span.title').text('Add Contact');
            $('#mask_bg').show();
            $('#dialog_contact')
                .attr('act', 'add')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_contact').height()) / 3,
                    'left': (document.documentElement.clientWidth - $('#dialog_contact').width()) / 2
                })
                .showDialog();
            $('#dialog_urlkey').focus();
        }

        var contactid;
        function OnEdit() {
            var contact = grid_dt.source[grid_dt.selectedIndex].Values;
            if (!contact) {
                contactid = undefined;
                return;
            }

            contactid = contact.ContactID;

            $('#dialog_name').val(contact.ContactName);
            $('#dialog_sel_user').val(contact.UserIID);
            $('#dialog_notes').val(contact.Notes);
            $('#dialog_sel_type').val(contact.ContactType);
            $('#dialog_emailaddress').val(contact.EmailAddress);
            $('#dialog_textaddress').val(contact.TextAddress);

            $('#dialog_contact .dialog-title span.title').text('Edit Contact');
            $('#mask_bg').show();
            $('#dialog_contact')
                .attr('act', 'edit')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_contact').height()) / 3,
                    'left': (document.documentElement.clientWidth - $('#dialog_contact').width()) / 2
                })
                .showDialog();
            $('#dialog_urlkey').focus();

        }

        function OnDblClick(e) {
            OnEdit();
        }

        function OnRefresh() {
            showloading(true);
            contactquery("GetContacts", "", function (data) {
                showloading(false);
                _allContacts = data;

                showContractList(data);
            }, function (err) {
                showloading(false);
            });
        }

        function showContractList(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dt.setData(rows);
        }
        var grid_dt;
        function InitGridData() {
            grid_dt = new GridView('#contactlist');
            grid_dt.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'ContactName', caption: "Contact Name", valueIndex: 'ContactName', css: { 'width': 300, 'text-align': 'left' } },
                { name: 'ContactType', caption: "Contact Type", valueIndex: 'ContactType', css: { 'width': 150, 'text-align': 'left' } },
                { name: 'UserName', caption: "Manager", valueIndex: 'UserName', css: { 'width': 200, 'text-align': 'left' } },
                { name: 'EmailAddress', caption: "Email Address", valueIndex: 'EmailAddress', css: { 'width': 200, 'text-align': 'left' } },
                { name: 'TextAddress', caption: "Text Address", valueIndex: 'TextAddress', css: { 'width': 200, 'text-align': 'left' } },
                { name: 'Notes', caption: "Notes", valueIndex: 'Notes', css: { 'width': 300, 'text-align': 'left' } },
                { name: 'Edit', caption: "", css: { 'width': 30, 'text-align': 'center' } },
                { name: 'Delete', caption: "", css: { 'width': 30, 'text-align': 'center' } },
                { name: 'AssetAssignment', caption: "", css: { 'width': 30, 'text-align': 'center' } },
                { name: 'JobsiteAssignment', caption: "", css: { 'width': 130, '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 (col.name === "Edit") {
                    col.isurl = true;
                    col.text = "\uf044";
                    col.events = {
                        onclick: function () {
                            OnEdit();
                        }
                    };
                    col.classFilter = function (e) {
                        return "icon-col";
                    }
                    col.attrs = { 'title': 'Edit' };
                }
                else if (col.name === "Delete") {
                    col.isurl = true;
                    col.text = "\uf00d";
                    col.events = {
                        onclick: function () {
                            OnDelete(this);
                        }
                    };
                    col.classFilter = function (e) {
                        return "icon-col";
                    };
                    col.attrs = { 'title': 'Delete' };
                }
                else if (col.name === "AssetAssignment") {
                    col.isurl = true;
                    col.text = "\uf63c";
                    col.events = {
                        onclick: function () {
                            OnManageMachine(this);
                        }
                    };
                    col.classFilter = function (e) {
                        return "icon-col";
                    };
                    col.attrs = { 'title': 'Asset Assignment' };
                }
                else if (col.name === "JobsiteAssignment") {
                    col.isurl = true;
                    col.text = "Jobsite Assignment";
                    col.events = {
                        onclick: function () {
                            OnManageJobsite(this);
                        }
                    };
                    col.classFilter = function (e) {
                        return "icon-col";
                    };
                    col.attrs = { 'title': 'JobsiteAssignment' };
                }
                columns.push(col);
            }
            grid_dt.canMultiSelect = false;
            grid_dt.columns = columns;
            grid_dt.init();
            grid_dt.rowdblclick = OnEdit;

            grid_dt.selectedrowchanged = function (rowindex) {
                var rowdata = grid_dt.source[rowindex];
                if (rowdata) {
                    contactid = rowdata.Values.ID;
                }
            }
        }

        function OnDialogOK() {
            var item = {
                'ContactName': trim_str($('#dialog_name').val()),
                'UserIID': trim_str($('#dialog_sel_user').val()),
                'Notes': trim_str($('#dialog_notes').val()),
                'ContactType': trim_str($('#dialog_sel_type').val()),
                'EmailAddress': trim_str($('#dialog_emailaddress').val()),
                'TextAddress': trim_str($('#dialog_textaddress').val())
            };
            var alerttitle;
            if (contactid) {
                item.ContactID = contactid;
                alerttitle = "Edit Contact";
            } else {
                item.ContactID = "";
                alerttitle = "Add Contact";
            }
            if (!item.ContactName || item.ContactName.length == 0) {
                showAlert('Contact name cannot be empty.', alerttitle);
                return;
            }
            if (item.EmailAddress && item.EmailAddress.length > 0 && !isEmail(item.EmailAddress)) {
                showAlert('Email address is not a valid email address.', alerttitle);
                return;
            }
            if (item.TextAddress && item.TextAddress.length > 0 && !isEmail(item.TextAddress)) {
                showAlert('Text address is not a valid.', alerttitle);
                return;
            }

            for (var i = 0; i < _allContacts.length; i++) {
                var js = _allContacts[i]
                if (js.Name === item.Name && js.ID !== item.ID) {
                    showAlert('Contact already exists. ', alerttitle);
                    return;
                }
            }

            showloading(true);
            var param = JSON.stringify(item);
            param = htmlencode(param);
            contactquery("SaveContact", param, function (data) {
                showloading(false);
                if (data !== 'OK') {
                    showAlert(data, 'Save Contact');
                } else {
                    $('#dialog_contact').hideDialog();
                    OnRefresh();
                }
            }, function (err) {
                console.log(err);
                showloading(false);
                showAlert('Failed to save contact.', 'Save contact');
            });
        }

        /************************** Machine********************************/
        /*************************************************************************/
        var contact;
        var allMachines;
        var _availableMachines = [];
        var _selectedMachines = [];
        var _showSelectedMachines = [];

        function OnManageMachine(con) {
            $('#txt_machine_key').val('');

            contact = con;
            if (!contact) {
                contact = undefined;
                return;
            }
            contactid = contact.ContactID;

            var title = "Asset Assignment";// + "&nbsp;&nbsp;&nbsp;&nbsp;" + jobsite.Name + "&nbsp;&nbsp;&nbsp;&nbsp;" + "Radius_UOM: " + jobsite.Radius_UOM
            $('#dialog_managemahchine .dialog-title span.title').html(title);
            $('#mask_bg').show();
            $('#dialog_managemahchine')
                .css({
                    'height': 500,
                    'top': (document.documentElement.clientHeight - $('#dialog_managemahchine').height()) / 5,
                    'left': (document.documentElement.clientWidth - $('#dialog_managemahchine').width()) / 2
                }).showDialog();

            getMachineTypes();
        }

        function getMachineTypes() {
            pmquery('GetMachineTypes', '', function (data) {
                var types = [];
                types.push($('<option value="-1">All</option>'));
                if (data && data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        types.push($('<option></option>').val(data[i].ID).text(data[i].Name));
                    }
                }
                types[0].prop('selected', true);
                $('#sel_machine_type').empty().append(types);
                GetSelectedMachines();
            });
        }

        // 获取已选中的machines
        function GetSelectedMachines() {
            _selectedMachines = [];
            $("#dialogmask").show();
            contactquery('GetSelectedMachines', contactid, function (data) {
                if (typeof data === "string") {
                    showAlert(data, 'Asset Assignment');
                    return;
                }
                _selectedMachines = data;
                queryMachines();
            }, function (e) {
                $("#dialogmask").hide();
            });
        }

        function queryMachines() {
            var param = {
                'MachineID': -1,
                'Name': '',
                'VIN': contactid
            };
            $('#button_machine_filter').prop('disabled', true);
            setTimeout(function () {
                $('#button_machine_filter').prop('disabled', false);
            }, 1000);

            $("#dialogmask").show();
            _availableMachines = [];
            pmquery('GetMachineList', JSON.stringify(param), function (data) {
                allMachines = data;
                getMatchAvailableMachines();

                $("#dialogmask").hide();
            }, function (e) {
                $("#dialogmask").hide();
            });
        }

        function getMatchAvailableMachines() {
            getMatchSelectedMachines();

            var selected = [];
            for (var i = 0; i < _showSelectedMachines.length; i++) {
                var m = _showSelectedMachines[i];
                selected.push(m.MachineID);
            }
            var typeid = $('#sel_machine_type').val();
            var machinefilter = $('#txt_machine_key').val().toLowerCase();

            _availableMachines = [];
            for (var i = 0; i < allMachines.length; i++) {
                var m = allMachines[i];
                if ((typeid == -1 || typeid == m.TypeID)
                    && (machinefilter == "" || m.VIN.toLowerCase().indexOf(machinefilter) >= 0
                        || m.DisplayName.toLowerCase().indexOf(machinefilter) >= 0)
                    && $.inArray(m.MachineID, selected) < 0) {
                    _availableMachines.push(m);
                }
            }
            showAvailableMachine(_availableMachines);
        }

        function getMatchSelectedMachines() {
            var typeid = $('#sel_machine_type').val();
            var machinefilter = $('#txt_machine_key').val().toLowerCase();

            _showSelectedMachines = [];
            for (var i = 0; i < _selectedMachines.length; i++) {
                var m = _selectedMachines[i];
                if ((typeid == -1 || typeid == m.TypeID)
                    && (machinefilter == "" || m.VIN.toLowerCase().indexOf(machinefilter) >= 0
                        || m.DisplayName.toLowerCase().indexOf(machinefilter) >= 0)) {
                    _showSelectedMachines.push(m);
                }
            }
            showSelectedMachine(_showSelectedMachines);
        }

        function showMachines() {
            showAvailableMachine(_availableMachines);
            showSelectedMachine(_showSelectedMachines);
        }

        function showAvailableMachine(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dtam.setData(rows);
        }

        var grid_dtam;
        function InitGridAvailableMachines() {
            grid_dtam = new GridView('#availablemachinelist');
            grid_dtam.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'VIN', caption: "SN", valueIndex: 'VIN', css: { 'width': 170, 'text-align': 'left' } },
                { name: 'DisplayName', caption: "Name", valueIndex: 'DisplayName', css: { 'width': 170, 'text-align': 'left' } },
                { name: 'Make', caption: "Make", valueIndex: 'Make', css: { 'width': 90, 'text-align': 'left' } },
                { name: 'Model', caption: "Model", valueIndex: 'Model', css: { 'width': 90, '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;
                columns.push(col);
            }
            grid_dtam.canMultiSelect = true;
            grid_dtam.columns = columns;
            grid_dtam.init();
            grid_dtam.rowdblclick = function (rowindex) {
                var rowdata = grid_dtam.source[rowindex];
                if (rowdata) {
                    var machine = rowdata.Values;
                    _availableMachines.splice(_availableMachines.indexOf(machine), 1);
                    _selectedMachines.push(machine);
                    _showSelectedMachines.push(machine);

                    showMachines();
                }
            };

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


        function showSelectedMachine(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dtsm.setData(rows);
        }

        var grid_dtsm;
        function InitGridSelectedMachines() {
            grid_dtsm = new GridView('#selectedmachinelist');
            grid_dtsm.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'VIN', caption: "SN", valueIndex: 'VIN', css: { 'width': 170, 'text-align': 'left' } },
                { name: 'DisplayName', caption: "Name", valueIndex: 'DisplayName', css: { 'width': 170, 'text-align': 'left' } },
                { name: 'Make', caption: "Make", valueIndex: 'Make', css: { 'width': 90, 'text-align': 'left' } },
                { name: 'Model', caption: "Model", valueIndex: 'Model', css: { 'width': 90, '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;
                columns.push(col);
            }
            grid_dtsm.canMultiSelect = true;
            grid_dtsm.columns = columns;
            grid_dtsm.init();
            grid_dtsm.rowdblclick = function (rowindex) {
                var rowdata = grid_dtsm.source[rowindex];
                if (rowdata) {
                    var machine = rowdata.Values;
                    _selectedMachines.splice(_selectedMachines.indexOf(machine), 1);
                    _showSelectedMachines.splice(_showSelectedMachines.indexOf(machine), 1);
                    _availableMachines.push(machine);

                    showMachines();
                }
            };

            grid_dtsm.selectedrowchanged = function (rowindex) {
                var rowdata = grid_dtsm.source[rowindex];
                if (rowdata) {
                }
            }
        }
        function OnEditorAdd() {
            var indexs = grid_dtam.selectedIndexes;
            if (indexs.length <= 0)
                return;
            for (var i = 0; i < indexs.length; i++) {
                var index = indexs[i];
                var m = grid_dtam.source[index].Values;
                _availableMachines.splice(_availableMachines.indexOf(m), 1);
                _selectedMachines.push(m);
                _showSelectedMachines.push(m);
            }
            showMachines();
        }
        function OnEditorAddAll() {
            for (var i = 0; i < _availableMachines.length; i++) {
                var m = _availableMachines[i];
                _selectedMachines.push(m);
                _showSelectedMachines.push(m);
            }
            _availableMachines = [];
            showMachines();
        }
        function OnEditorRemove() {
            var indexs = grid_dtsm.selectedIndexes;
            if (indexs.length <= 0)
                return;
            for (var i = 0; i < indexs.length; i++) {
                var index = indexs[i];
                var m = grid_dtsm.source[index].Values;
                _selectedMachines.splice(_selectedMachines.indexOf(m), 1);
                _showSelectedMachines.splice(_showSelectedMachines.indexOf(m), 1);
                _availableMachines.push(m);
            }
            showMachines();
        }
        function OnEditorRemoveAll() {
            for (var i = 0; i < _showSelectedMachines.length; i++) {
                var m = _showSelectedMachines[i];
                _selectedMachines.splice(_selectedMachines.indexOf(m), 1);
                _availableMachines.push(m);
            }
            _showSelectedMachines = [];
            showMachines();
        }

        function OnSaveMachines() {
            var machineids = [];
            for (var i = 0; i < _selectedMachines.length; i++) {
                var m = _selectedMachines[i];
                machineids.push(m.MachineID);
            }

            contactquery("SaveContactMachines", contactid + String.fromCharCode(170) + JSON.stringify(machineids), function (data) {
                if (data !== 'OK') {
                    showAlert(data, 'Save asset');
                } else {
                    $('#dialog_managemahchine').hideDialog();
                    OnRefresh();
                }
            }, function (err) {
                console.log(err);
                showAlert('Failed to save asset.', 'Save asset');
            });
        }


        /**************************End Machine********************************/
        /*****************************************************************************/




        /************************** Jobsite Assignment********************************/
        /*************************************************************************/

        var allJobsites;
        var _availableJobsites = [];
        var _selectedJobsites = [];
        var _showSelectedJobsites = [];
        function OnManageJobsite(con) {
            $('#txt_jobsite_key').val('');

            contact = con;
            if (!contact) {
                contact = undefined;
                return;
            }
            contactid = contact.ContactID;

            var title = "Jobsite Assignment";
            $('#dialog_managejobsite .dialog-title span.title').html(title);
            $('#mask_bg').show();
            $('#dialog_managejobsite')
                .css({
                    'height': 500,
                    'top': (document.documentElement.clientHeight - $('#dialog_managejobsite').height()) / 5,
                    'left': (document.documentElement.clientWidth - $('#dialog_managejobsite').width()) / 2
                }).showDialog();

            GetSelectedJobsites();
        }

        // 获取已选中的Jobsites
        function GetSelectedJobsites() {
            _selectedJobsites = [];
            $("#jobsitedialogmask").show();
            contactquery('GetSelectedJobsites', contactid, function (data) {
                if (typeof data === "string") {
                    showAlert(data, 'Jobsite Assignment');
                    return;
                }
                _selectedJobsites = data;
                queryJobsites();
            }, function (e) {
                $("#jobsitedialogmask").hide();
            });
        }

        function queryJobsites() {
            $('#button_jobsite_filter').prop('disabled', true);
            setTimeout(function () {
                $('#button_jobsite_filter').prop('disabled', false);
            }, 1000);

            _availableJobsites = [];
            $("#jobsitedialogmask").show();
            contactquery('GetJobsiteList', '', function (data) {
                if (typeof data === "string") {
                    showAlert(data, 'Jobsite Assignment');
                    return;
                }
                allJobsites = data;
                getMatchAvailableJobsites();
                $("#jobsitedialogmask").hide();
            }, function (e) {
                $("#jobsitedialogmask").hide();
            });
        }


        function getMatchAvailableJobsites() {
            getMatchSelectedJobsites();

            var selected = [];
            for (var i = 0; i < _showSelectedJobsites.length; i++) {
                var m = _showSelectedJobsites[i];
                selected.push(m.ID);
            }
            var jobsitefilter = $('#txt_jobsite_key').val().toLowerCase();

            _availableJobsites = [];
            for (var i = 0; i < allJobsites.length; i++) {
                var m = allJobsites[i];
                if ((jobsitefilter == "" || m.Name.toLowerCase().indexOf(jobsitefilter) >= 0)
                    && $.inArray(m.ID, selected) < 0) {
                    _availableJobsites.push(m);
                }
            }
            showAvailableJobsite(_availableJobsites);
        }

        function getMatchSelectedJobsites() {
            var jobsitefilter = $('#txt_jobsite_key').val().toLowerCase();

            _showSelectedJobsites = [];
            for (var i = 0; i < _selectedJobsites.length; i++) {
                var m = _selectedJobsites[i];
                if (jobsitefilter == "" || m.Name.toLowerCase().indexOf(jobsitefilter) >= 0) {
                    _showSelectedJobsites.push(m);
                }
            }
            showSelectedJobsite(_showSelectedJobsites);
        }

        function showJobsites() {
            showAvailableJobsite(_availableJobsites);
            showSelectedJobsite(_showSelectedJobsites);
        }



        function showAvailableJobsite(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dtaj.setData(rows);
        }

        function showSelectedJobsite(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dtsj.setData(rows);
        }


        var grid_dtaj;
        function InitGridAvailableJobsites() {
            grid_dtaj = new GridView('#availablejobsitelist');
            grid_dtaj.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'Name', caption: "Name", valueIndex: 'Name', css: { 'width': 380, '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;
                columns.push(col);
            }
            grid_dtaj.canMultiSelect = true;
            grid_dtaj.columns = columns;
            grid_dtaj.init();
            grid_dtaj.rowdblclick = function (rowindex) {
                var rowdata = grid_dtaj.source[rowindex];
                if (rowdata) {
                    var Jobsite = rowdata.Values;
                    _availableJobsites.splice(_availableJobsites.indexOf(Jobsite), 1);
                    _selectedJobsites.push(Jobsite);
                    _showSelectedJobsites.push(Jobsite);

                    showJobsites();
                }
            };

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


        var grid_dtsj;
        function InitGridSelectedJobsites() {
            grid_dtsj = new GridView('#selectedjobsitelist');
            grid_dtsj.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'Name', caption: "Name", valueIndex: 'Name', css: { 'width': 380, '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;
                columns.push(col);
            }
            grid_dtsj.canMultiSelect = true;
            grid_dtsj.columns = columns;
            grid_dtsj.init();
            grid_dtsj.rowdblclick = function (rowindex) {
                var rowdata = grid_dtsj.source[rowindex];
                if (rowdata) {
                    var Jobsite = rowdata.Values;
                    _selectedJobsites.splice(_selectedJobsites.indexOf(Jobsite), 1);
                    _showSelectedJobsites.splice(_showSelectedJobsites.indexOf(Jobsite), 1);
                    _availableJobsites.push(Jobsite);

                    showJobsites();
                }
            };

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

        function OnJobsiteEditorAdd() {
            var indexs = grid_dtaj.selectedIndexes;
            if (indexs.length <= 0)
                return;
            for (var i = 0; i < indexs.length; i++) {
                var index = indexs[i];
                var m = grid_dtaj.source[index].Values;
                _availableJobsites.splice(_availableJobsites.indexOf(m), 1);
                _selectedJobsites.push(m);
                _showSelectedJobsites.push(m);
            }
            showJobsites();
        }
        function OnJobsiteEditorAddAll() {
            for (var i = 0; i < _availableJobsites.length; i++) {
                var m = _availableJobsites[i];
                _selectedJobsites.push(m);
                _showSelectedJobsites.push(m);
            }
            _availableJobsites = [];
            showJobsites();
        }
        function OnJobsiteEditorRemove() {
            var indexs = grid_dtsj.selectedIndexes;
            if (indexs.length <= 0)
                return;
            for (var i = 0; i < indexs.length; i++) {
                var index = indexs[i];
                var m = grid_dtsj.source[index].Values;
                _selectedJobsites.splice(_selectedJobsites.indexOf(m), 1);
                _showSelectedJobsites.splice(_showSelectedJobsites.indexOf(m), 1);
                _availableJobsites.push(m);
            }
            showJobsites();
        }
        function OnJobsiteEditorRemoveAll() {
            for (var i = 0; i < _showSelectedJobsites.length; i++) {
                var m = _showSelectedJobsites[i];
                _selectedJobsites.splice(_selectedJobsites.indexOf(m), 1);
                _availableJobsites.push(m);
            }
            _showSelectedJobsites = [];
            showJobsites();
        }



        function OnSaveJobsites() {
            var jobsiteids = [];
            for (var i = 0; i < _selectedJobsites.length; i++) {
                var j = _selectedJobsites[i];
                jobsiteids.push(j.ID);
            }

            showloading(true);
            contactquery("SaveContactJobsites", contactid + String.fromCharCode(170) + JSON.stringify(jobsiteids), function (data) {
                showloading(false);
                if (data !== 'OK') {
                    showAlert(data, 'Jobsite Assignment');
                } else {
                    $('#dialog_managejobsite').hideDialog();
                    OnRefresh();
                }
            }, function (err) {
                console.log(err);
                showloading(false);
                showAlert('Failed to save jobsite assignment.', 'Jobsite Assignment');
            });
        }

        /**************************End JobSite Assignment********************************/
        /*****************************************************************************/


        function getUsers() {
            contactquery("GetUsers", "", function (data) {
                var users = [];
                users.push($('<option value=""></option>'));
                if (data && data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        var user = data[i];
                        users.push($('<option></option>').prop('selected', i == 0).val(user.IID).text(user.DisplayName));
                    }
                } else {
                    users[0].prop('selected', true);
                }

                $('#dialog_sel_user').empty().append(users);

            })
        }

        $(function () {
            InitGridData();
            InitGridAvailableMachines();
            InitGridSelectedMachines();
            InitGridAvailableJobsites();
            InitGridSelectedJobsites();

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


            $('#dialog_contact').dialog(function () {
                $('#mask_bg').hide();
            });

            $('#dialog_managemahchine').dialog(function () {
                $('#mask_bg').hide();
            });

            $('#dialog_managejobsite').dialog(function () {
                $('#mask_bg').hide();
            });

            $('#sel_machine_type').change(getMatchAvailableMachines);
            $('#button_machine_filter').click(getMatchAvailableMachines);

            $('#button_jobsite_filter').click(getMatchAvailableJobsites);

            $('#dialog_textaddress').focus(function () {
                $('#span_tooltip').css('display', '');
            });
            $('#dialog_textaddress').blur(function () {
                $('#span_tooltip').css('display', 'none');
            });

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

            OnRefresh();
        });

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

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="holder_content" runat="Server">
    <div>
        <div id="contentctrl">
            <div class="page_title">Manage Contact</div>
            <div class="function_title">
                <span class="sbutton iconadd" onclick="OnAdd();">Add</span>
                <span class="sbutton iconrefresh" onclick="OnRefresh();">Refresh</span>
            </div>
            <div id="contactlist"></div>
        </div>
    </div>

    <div id="mask_bg">
        <div class="loading c-spin"></div>
    </div>
    <div class="dialog" id="dialog_contact" style="display: none;">
        <div class="dialog-title"><span class="title">Add Contact</span><em class="dialog-close"></em></div>
        <div class="dialog-content" style="padding-right: 42px;">
            <table>
                <tr>
                    <td class="label">Contact Name:</td>
                    <td style="width: 300px;">
                        <input type="text" id="dialog_name" maxlength="100" tabindex="1" /></td>
                    <td rowspan="5" style="line-height: normal; color: #adb0b4; width: 240px;">
                        <span id="span_tooltip" style="display: none;">AT&T: number@txt.att.net<br />
                            T-Mobile: number@tmomail.net<br />
                            Verizon: number@vtext.com<br />
                            Sprint: number@messaging.sprintpcs.com<br />
                            <br />
                            For example, for cellphone number:  480-123-4567 on Verizon, the text address would be:  4801234567@vtext.com
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="label">Contact Type:</td>
                    <td>
                        <select id="dialog_sel_type" tabindex="2">
                            <option>Foreman</option>
                            <option>Driver</option>
                            <option>Inventory Manager</option>
                            <option>Rental Manager</option>
                            <option>Service Manager</option>
                            <option>Fleet Manager</option>
                            <option>Other</option>
                        </select></td>
                </tr>
                <tr>
                    <td class="label">Manager:</td>
                    <td>
                        <select id="dialog_sel_user" tabindex="3"></select></td>
                </tr>
                <tr>
                    <td class="label">Email Address:</td>
                    <td>
                        <input type="text" id="dialog_emailaddress" maxlength="200" tabindex="4" /></td>
                </tr>
                <tr>
                    <td class="label">Text Address:</td>
                    <td>
                        <input type="text" id="dialog_textaddress" maxlength="200" tabindex="5" /></td>
                </tr>
                <tr style="padding-top: 5px;">
                    <td class="label">Notes:</td>
                    <td colspan="2">
                        <textarea id="dialog_notes" maxlength="1000" tabindex="6"></textarea></td>
                </tr>
            </table>
        </div>
        <div class="dialog-func">
            <input type="button" class="dialog-close" style="height: 26px;" value="Cancel" tabindex="8" />
            <input type="button" onclick="OnDialogOK();" style="height: 26px;" value="OK" tabindex="7" />
            <div class="clear"></div>
        </div>
    </div>


    <div class="dialog" id="dialog_managemahchine" style="display: none;">
        <div id="dialogmask" class="maskbg" style="display: none; z-index: 1;">
            <div class="loading_icon icon c-spin"></div>
        </div>
        <div class="dialog-title"><span class="title">Asset Assignment</span><em class="dialog-close"></em></div>

        <div class="machine_filter">
            <span>Type: </span>
            <select id="sel_machine_type" tabindex="20"></select>
            <input type="text" id="txt_machine_key" tabindex="21" />
            <input type="button" class="ybutton" id="button_machine_filter" value="Filter" tabindex="22" />
            <span id="span_text_holder" style="display: none;"></span>
        </div>
        <div class="div_machines">
            <table class="table_holder">
                <tr>
                    <td>
                        <div id="availablemachinelist" style="height: 400px; width: 560px;"></div>
                    </td>
                    <td class="td_controller">
                        <input class="ctl_button" type="button" value="&#xe62b;" onclick="OnEditorAdd();" tabindex="23" />
                        <input class="ctl_button" type="button" value="&#xe632;" onclick="OnEditorAddAll();" tabindex="24" />
                        <input class="ctl_button" type="button" value="&#xe62a;" onclick="OnEditorRemove();" tabindex="25" />
                        <input class="ctl_button" type="button" value="&#xe631;" onclick="OnEditorRemoveAll();" tabindex="26" />
                    </td>
                    <td>
                        <div id="selectedmachinelist" style="height: 400px; width: 560px;"></div>
                    </td>
                </tr>
            </table>
        </div>

        <div class="dialog-func">
            <input type="button" value="Cancel" class="dialog-close" tabindex="28" />
            <input type="button" onclick="OnSaveMachines();" value="OK" tabindex="27" />
            <div class="clear"></div>
        </div>
    </div>

    <div class="dialog" id="dialog_managejobsite" style="display: none;">
        <div id="jobsitedialogmask" class="maskbg" style="display: none; z-index: 1;">
            <div class="loading_icon icon c-spin"></div>
        </div>
        <div class="dialog-title"><span class="title">Jobsite Assignment</span><em class="dialog-close"></em></div>

        <div class="machine_filter">
            <input type="text" id="txt_jobsite_key" style="margin-left: 8px; width: 280px;" tabindex="40" />
            <input type="button" class="ybutton" id="button_jobsite_filter" value="Filter" tabindex="42" />
        </div>
        <div class="div_machines">
            <table class="table_holder">
                <tr>
                    <td>
                        <div id="availablejobsitelist" style="height: 400px; width: 410px;"></div>
                    </td>
                    <td class="td_controller">
                        <input class="ctl_button" type="button" value="&#xe62b;" onclick="OnJobsiteEditorAdd();" tabindex="42" />
                        <input class="ctl_button" type="button" value="&#xe632;" onclick="OnJobsiteEditorAddAll();" tabindex="43" />
                        <input class="ctl_button" type="button" value="&#xe62a;" onclick="OnJobsiteEditorRemove();" tabindex="44" />
                        <input class="ctl_button" type="button" value="&#xe631;" onclick="OnJobsiteEditorRemoveAll();" tabindex="45" />
                    </td>
                    <td>
                        <div id="selectedjobsitelist" style="height: 400px; width: 410px;"></div>
                    </td>
                </tr>
            </table>
        </div>

        <div class="dialog-func">
            <input type="button" value="Cancel" class="dialog-close" tabindex="47" />
            <input type="button" onclick="OnSaveJobsites();" value="OK" tabindex="46" />
            <div class="clear"></div>
        </div>
    </div>

</asp:Content>