$UserSearchPopup = function (viewModel, selectUserData, isMultipleSelect, onSelectedUsers, datagridId) {

    //isMultipleSelect 추가 hcLee 2016 02 15
    var isMultipleSelect = isMultipleSelect;
    // 멀티선택기능 추가 hcLee2016 02 15
    //var onSelectedUsers = options.onSelectedUsers;
    var onSelectedUsers = onSelectedUsers;
    var datagridId = datagridId;

    var dataViewModel = new BemsWebApplication.CmUserViewModel(),

        gridView,
        popupVisible = ko.observable(false),

        dataSource;

    // _Name 작업을 original로 수정해야 한다.
    dataSource = BWA.DataUtil.createDataSource({
        dataSourceOptions: {
            select: [
                'SiteId',
                'CompanyId',
                'DepartmentId',
                'UserId',
                'Name',
                'EmploymentType',
                'MobilePhoneNo',
                'EmploymentStatus',
                'CmPosition/Name',
                'CmDepartment/Name',
                'CmCompany/Name'],
            expand: ["CmPosition", "CmDepartment", "CmCompany"],
            //2016 09 27 hcLee
            filter: [
                //['SiteId', '=', 0] // 4
                //eq('SiteId', 0), // 초기화를 위해서 0
                ['SiteId', '=', BWA.UserInfo.SiteId()],
                ['EmploymentStatus', '=', 1],

            //    ['FmsWorkRequest/WorkProgressId', '=', $Code.WorkProgress.WORKING] // 4
            //    //, and, ['FmsWorkRequest/WorkProgressId', '<=', 5]
            ],

            extendOptions: {}
        }
    }, 'CmUser');

    var dataGridOptions = utils.datagrid.defaultOptions({
        dxDataSource: dataSource,
        selectedSourceItem: dataViewModel,
        datagridId: 'gridUserContainer',
        dbId: 'CmUser',
        useNumberColumn: true,

        columns: [
            { dataField: 'Number', caption: $G('number'), width: '10%', alignment: 'center', allowFiltering: false },
            { dataField: 'UserId', caption: $G('userId'), width: '15%', alignment: 'center' },
            { dataField: 'Name', caption: $G('userName'), width: '15%', alignment: 'center' },
            {
                dataField: 'EmploymentType',
                caption: $G('employmentType'),
                width: '15%',
                alignment: 'center',
                allowFiltering: false,
                customizeText: function (cellInfo) {
                    return $Name($G.EmploymentTypeNames, cellInfo.value);
                }
            },
            {
                dataField: 'EmploymentStatus',
                caption: $G('employmentStatus'),
                width: '15%',
                alignment: 'center',
                allowFiltering: false,
                customizeText: function (cellInfo) {
                    return $Name($G.EmploymentStatusNames, cellInfo.value);
                }
            },
            { dataField: 'CmDepartment/Name', caption: $G('departmentName'), width: '15%', alignment: 'center' }
        ],
        cellPrepared: function (cellElement, cellInfo) {
            if (cellInfo.rowType == 'data' && cellInfo.columnIndex == (isMultipleSelect ? 6 : 5)) {
                if (cellInfo.data.CmCompany_Name !== undefined && cellInfo.data.CmDepartment_Name !== undefined)
                    $(cellElement).text(cellInfo.data.CmCompany_Name() + ' / ' + cellInfo.data.CmDepartment_Name());
                else if (cellInfo.data.CmCompany_Name !== undefined && cellInfo.data.CmDepartment_Name === undefined)
                    $(cellElement).text(cellInfo.data.CmCompany_Name() + ' / ');
                else if (cellInfo.data.CmCompany_Name === undefined && cellInfo.data.CmDepartment_Name !== undefined)
                    $(cellElement).text(' / ' + cellInfo.data.CmDepartment_Name());
            }
        },
        searchPanelPlaceHolder: '사용자 검색',
        paging: {
            pageSize: 11,
            enabled: true
        },
        pager: { visible: true }
    });


    if (isMultipleSelect) {
        dataGridOptions.selection = { mode: 'multiple', allowSelectAll: true };
        dataGridOptions.handleDataGridRowClick = function (id, dataGrid, clickRow) {
            /*
            var data = clickRow.data;
            if (!_.isUndefined(onSelectedUsers)) {
                onSelectedUsers([BWA.DataUtil.convertViewModelToJS(data)]);
            }*/
        };
    }
    else {

        dataGridOptions.handleDataGridRowClick = function (id, dataGrid, clickRow) {

            var data = clickRow.data;
            selectUserData({
                SiteId: data.SiteId(),
                UserId: data.UserId(),
                CompanyId: data.CompanyId(),
                DepartmentId: data.DepartmentId(),
                CompanyName: data.CmCompany_Name(),
                MobilePhoneNo: data.MobilePhoneNo(),
                Name: data.Name()
            });

            if (data.CmDepartment_Name !== undefined)
                selectUserData.DepartmentName = data.CmDepartment_Name();

            popupVisible(false);
        }
    }

    function handlePopupShowing(e) {
        //console.log( $( "#gridUserContainer" ) );
        //$( "#gridUserContainer" ).text( 'test' );
        //$( "#gridUserContainer" ).dxDataGrid( utils.datagrid.defaultOptions( {
        //    dxDataSource: dataSource,
        //    selectedSourceItem: dataViewModel,
        //    selectedId: selectedId,
        //    datagridId: 'gridUserContainer',
        //    popupVisible: popupVisible,
        //    dbId: 'CmUser',
        //    useNumberColumn: true,
        //    columns: [
        //        { dataField: 'Number', caption: $G( 'number' ), width: '10%', alignment: 'center' },
        //        { dataField: 'UserId', caption: $G( 'userId' ), width: '15%', alignment: 'center' },
        //        { dataField: 'Name', caption: $G( 'userName' ), width: '15%', alignment: 'center' },
        //        { dataField: 'EmploymentType', caption: $G( 'employmentType' ), width: '15%', alignment: 'center' , 
        //            customizeText: function( cellInfo ) {
        //                return $Name( $G.EmploymentTypes, cellInfo.value );
        //            }
        //        },
        //        { dataField: 'EmploymentStatus', caption: $G( 'employmentStatus' ), width: '15%', alignment: 'center' , 
        //            customizeText: function( cellInfo ) {
        //                return $Name( $G.EmploymentStatus, cellInfo.value );
        //            }
        //        },

        //        //{ dataField: 'CmCompany_Name', caption: $G( 'companyName' ), width: '15%', alignment: 'center' },
        //        //{ dataField: 'CmDepartment_Name', caption: $G( 'affiliation' ), width: '15%', alignment: 'center' }
        //        { caption: $G( 'affiliation' ), width: '15%', alignment: 'center' }
        //    ],
        //    cellPrepared: function( cellElement, cellInfo ) {
        //        if( cellInfo.columnIndex == 5 ) {
        //            //cellInfo.value = cellInfo.displayValue = cellInfo.rowIndex + 1;
        //            //cellInfo.text = cellInfo.rowIndex + 1;
        //            $( cellElement ).text( cellInfo.data.CmCompany_Name() + ' / ' + cellInfo.data.CmDepartment_Name() );
        //        }
        //    },
        //    searchPanelPlaceHolder: '사용자 검색',
        //} ) );
        gridView = $('#gridUserContainer').dxDataGrid('instance');
    }
    function handlePopupShown() {
    }


    function handlePopupButtonSelect() {
        var array = utils.datagrid.getSelectedRowsData('gridUserContainer');
        if (!_.isUndefined(onSelectedUsers)) {
            onSelectedUsers(array);
        }
        $('#gridUserContainer').dxDataGrid('instance').clearSelection();
        popupVisible(false);
    }

    function handlePopupButtonClose() {
        $('#gridUserContainer').dxDataGrid('instance').clearSelection();
        popupVisible(false);
    }

    var toolbarItems = [
        { location: 'before', text: '찾기' },
        { location: 'after', widget: 'button', options: { text: $G('select'), icon: 'save', visible: isMultipleSelect, clickAction: handlePopupButtonSelect } },
        { location: 'after', widget: 'button', options: { text: $G('close'), icon: 'close', clickAction: handlePopupButtonClose } }
    ];

    var popupOptions = {
        width: isMultipleSelect ? '800px' : '600px',
        height: 'auto',
        visible: popupVisible,
        closeOnOutsideClick: true,
        shading: false,
        showingAction: handlePopupShowing,
        shownAction: handlePopupShown,
        animation: {
            show: { type: "pop", duration: 200, from: { opacity: 1, scale: 0.4 }, to: { scale: 1 } },
            hide: { type: "fade", duration: 200, from: 1, to: 0 }
        }

    };
    return {
        dataModel: dataViewModel,
        dataSource: dataSource,

        popupOptions: popupOptions,

        toolbarItems: toolbarItems,
        dataGridOptions: dataGridOptions,
        show: function () {
            popupVisible(true);
        }
    };
}