$(function () {
  initializePeoplePicker('peoplePickerDiv');

  // Render and initialize the client-side People Picker.
  function initializePeoplePicker(peoplePickerElementId) {

    // Create a schema to store picker properties, and set the properties.
    var schema = {};
    schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = false;
    schema['MaximumEntitySuggestions'] = 50;
    schema['Width'] = '280px';

    // Render and initialize the picker.
    // Pass the ID of the DOM element that contains the picker, an array of initial
    // PickerEntity objects to set the picker value, and a schema that defines
    // picker properties.
    SPSODAction(["sp.js", "clienttemplates.js", "clientforms.js",
      "clientpeoplepicker.js", "autofill.js"
    ], function () {
      SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
    });
  }

  function SPSODAction(sodScripts, onLoadAction) {
    var x;
    if (SP.SOD.loadMultiple) {
      for (x = 0; x < sodScripts.length; x = x + 1) {
        if (!_v_dictSod[sodScripts[x]]) {
          SP.SOD.registerSod(sodScripts[x], '/_layouts/15/' + sodScripts[x]);
        }
      }
      SP.SOD.loadMultiple(sodScripts, onLoadAction);
    } else {
      ExecuteOrDelayUntilScriptLoaded(onLoadAction, sodScripts[0]);
    }
  }

  // Query the picker for user information.
  function getUserInfo() {

    showBrowserDialog()

    // Get the people picker object from the page.
    var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

    // Get information about all users.
    var users = peoplePicker.GetAllUserInfo();
    var userInfo = '';
    for (var i = 0; i < users.length; i++) {
      var user = users[i];
      for (var userProperty in user) {
        userInfo += userProperty + ':  ' + user[userProperty] + '<br>';
      }
    }
    $('#resolvedUsers').html(userInfo);

    // Get user keys.
    var keys = peoplePicker.GetAllUserKeys();
    $('#userKeys').html(keys);
  }

  function showBrowserDialog() {
    var defaultSearch = '';
    var sDialogUrl = '\u002fsites\u002fpriceToWinDealDB\u002f_layouts\u002f15\u002fPicker.aspx?MultiSelect=False\u0026CustomProperty=User\u00252CSecGroup\u00252CSPGroup\u00252CDL\u00253B\u00253B1\u00253B\u00253B\u00253BFalse\u0026DialogTitle=Select\u002520People\u002520and\u002520Groups\u0026DialogImage=\u00252F\u00255Flayouts\u00252F15\u00252Fimages\u00252Fppeople\u00252Egif\u0026PickerDialogType=Microsoft\u00252ESharePoint\u00252EWebControls\u00252EPeoplePickerDialog\u00252C\u002520Microsoft\u00252ESharePoint\u00252C\u002520Version\u00253D16\u00252E0\u00252E0\u00252E0\u00252C\u002520Culture\u00253Dneutral\u00252C\u002520PublicKeyToken\u00253D71e9bce111e9429c\u0026ForceClaims=False\u0026DisableClaims=False\u0026EnabledClaimProviders=\u0026EntitySeparator=\u00253B\u0025EF\u0025BC\u00259B\u0025EF\u0025B9\u002594\u0025EF\u0025B8\u002594\u0025E2\u00258D\u0025AE\u0025E2\u002581\u00258F\u0025E1\u00258D\u0025A4\u0025D8\u00259B';
    // var sDialogUrl = escape("/sites/priceToWinDealDB/_layouts/15/Picker.aspx?MultiSelect=False&CustomProperty=User,SecGroup,SPGroup,DL;;1;;;False&DialogTitle=Select People and Groups")
    sDialogUrl = sDialogUrl + '&DefaultSearch=' + escapeProperly(defaultSearch);
    var dialogWidth = 575;
    var dialogHeight = 500;
    var options = {
      title: "Select People and Groups",
      width: dialogWidth,
      height: dialogHeight,
      resizeable: true,
      url: sDialogUrl,
      dialogReturnValueCallback: function (status, data, cc) {
        console.log(data, status, cc)
      }
    };
    var rv = EnsureScriptParams("SP.UI.Dialog.js", "SP.UI.ModalDialog.showModalDialog", options);
  }

  $('#btn_getUserInfo').on('click', getUserInfo)
})