How to create SharePoint list picker control using Javascript (pickertreedialog.js) ?

Reference:

<script type="text/javascript" src="/_layouts/1033/pickertreedialog.js"></script>

HTML Controls:

<div id="tralert" style="display: none">
   <div class="informationBar">
      <span id="lblMessage"></span>
   </div>
</div>

<div>
<input type="text" id="txtListPicker" readonly="readonly" />
<input type="button" id="btnListPicker" onclick="listPickerScript();" value="..." />
</div>

JavaScript:


//Global variables
var strListGuid, strListUrl;

//Launch list picker
function listPickerScript() {
try {
var callback = function (arr) {
if (arr == null || arr == undefined)
return;

strListUrl = arr[3];

strListGuid = getListGUID(arr[0]);

document.getElementById('txtListPicker').value = arr[2];
  try {
if (arr[2] == "") {
document.getElementById('tralert').style.display = "block";
document.getElementById('lblMessage').innerHTML = "Don't select a site. Select a list.";

}
  else {
document.getElementById('tralert').style.display = "none";
}

}
  catch (exp) { }

}
  SP.SOD.executeFunc('pickertreedialog.js', 'LaunchPickerTreeDialog', function () {
LaunchPickerTreeDialog("RouterPickerSelectListTitle", "RouterPickerSelectListText", "websListsFolders", "", appweburl, "", "", "", "/_layouts/images/Copy.gif", 0, callback, '', '');

});

}
  catch (exp) { }

}

 //Get GUID of List
function getListGUID(strGUID) {
try{
var strSplit = strGUID.split("?");
strSplit = strSplit[0].split(":");
return strSplit[1];

}
  catch (exp) { }

}