Well, I'm a little embarrassed by posting this before its ready but I think it may give you some help.
A year or so ago I was working on a way for developers to have a cross - OS way of showing an open/save dialog box. (Which as you may now changes greatly across windows systems). I think this may help since it shows you how to display and travel through folders and such. It isn't really working yet, but it works enough I think for this.
FYI: in javascript
<html>
<head>
<title>Save As</title>
<HTA:APPLICATION ID="Save As"
APPLICATIONNAME="Dialog"
BORDER="thin"
CAPTION="yes"
INNERBORDER = "no"
MAXIMIZEBUTTON="no"
MINIMIZEBUTTON="no"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes">
<style>
body{ background-color:menu;
color:black;
overflow:hidden;
font-family:Microsoft Sans Serif;
font-size:8pt;
}
.SaveIn{
position:absolute;
top:11px;
left:53px;
}
.type{
position:absolute;
font-family:Microsoft Sans Serif;
font-size:8pt;
top:355px;
left:100px;
width:245px;
}
.types{
position:relative;
font-family:Microsoft Sans Serif;
font-size:8pt;
width:100%;
left:5px;
}
.FileView{
position:absolute;
top:37px;
left:98px;
width:450px;
height:280px;
border-width:0px;
}
.LeftBar{
position:absolute;
top:37px;
left:6px;
width:87px;
height:337px;
background-color:#888888;
border-style:inset;
border-width:2px;
}
.LButton{
position:relative;
width:100%;
height:65px;
color:white;
background-color:#888888;
border-width:0px;
font-family:Microsoft Sans Serif;
font-size:8pt;
}
.LButtonH{
position:relative;
width:100%;
height:65px;
color:white;
background-color:#888888;
border-width:1px;
font-family:Microsoft Sans Serif;
font-size:8pt;
}
.LButtonT{
position:relative;
width:100%;
height:65px;
color:white;
background-color:#888888;
font-family:Microsoft Sans Serif;
font-size:8pt;
border-style:inset;
border-width:2px;
}
.SC{
position:absolute;
background-color:menu;
top:328px;
left:468px;
}
.SCB1{
font-family:Microsoft Sans Serif;
font-size:8pt;
width:80px;
height:23px;
}
.SCB2{
position:relative;
top:3px;
font-family:Microsoft Sans Serif;
font-size:8pt;
width:80px;
height:23px;
}
#dropHold {
position:absolute;
width:245px;
height:20px;
top:330px;
left:195px;
border: thin inset menu;
overflow:hidden;
}
#dropText {
position:relative;
top:0px;
left:0px;
height:17px;
background-color:#ffffff;
border:0px 0px 0px 0px;
padding:0px 0px 0px 2px;
}
#dropButton {
position:relative;
font:8pt webdings;
height:17px;
width:15px;
top:-1px;
border-top-style:inset;
border-top-width:2px
padding:0px 0px 0px 0px;
}
#FName {
position:absolute;
top:330px;
left:100px;
font-family:Microsoft Sans Serif;
font-size:8pt;
}
</style>
<script type="text/javascript">
function winStyle(){
window.resizeTo(563,411);
window.moveTo((screen.width/2)-205,(screen.height/2)-281);
}
function $(o){return document.getElementById(o)}
function LBtoggle(x){
LBRestore();
x.onmouseover=null;
x.onmouseout=null;
x.className="LButtonT";
}
function LBHov(obj){
obj.className='LButtonH';
}
function LBLeave(obj){
obj.className='LButton';
}
function LBRestore(){
$("L1").innerHTML="<button class='LButton' id='L1c' onclick='LBtoggle(this.id)' onmouseover='LBHov(this)' onmouseout='LBLeave(this)'>My Recent<br />Documents</button>";
$("L2").innerHTML="<button class='LButton' id='L2c' onclick='LBtoggle(this.id)' onmouseover='LBHov(this)' onmouseout='LBLeave(this)'>Desktop</button>";
$("L3").innerHTML="<button class='LButton' id='L3c' onclick='LBtoggle(this.id)' onmouseover='LBHov(this)' onmouseout='LBLeave(this)'>My Documents</button>";
$("L4").innerHTML="<button class='LButton' id='L4c' onclick='LBtoggle(this.id)' onmouseover='LBHov(this)' onmouseout='LBLeave(this)'>My Computer</button>";
$("L5").innerHTML="<button class='LButton' id='L5c' onclick='LBtoggle(this.id)' onmouseover='LBHov(this)' onmouseout='LBLeave(this)'>My Network<br />Places</button>";
}
</script>
</head>
<body onload="winStyle();$('dropText').focus();" onscroll="window.scrollTo(0,0)" onselectstart="return false">
<!--Top Bar//-->
<span class="SaveIn">Save in: </span>
<!--Left Bar//-->
<div class="LeftBar">
<span id="L1"><button class="LButton" id="L1c" onclick="LBtoggle(this.id)" onmouseover="LBHov(this)" onmouseout="LBLeave(this)">My Recent<br />Documents</button></span>
<span id="L2"><button class="LButton" id="L2c" onclick="LBtoggle(this.id)" onmouseover="LBHov(this)" onmouseout="LBLeave(this)">Desktop</button></span>
<span id="L3"><button class="LButton" id="L3c" onclick="LBtoggle(this.id)" onmouseover="LBHov(this)" onmouseout="LBLeave(this)">My Documents</button></span>
<span id="L4"><button class="LButton" id="L4c" onclick="LBtoggle(this.id)" onmouseover="LBHov(this)" onmouseout="LBLeave(this)">My Computer</button></span>
<span id="L5"><button class="LButton" id="L5c" onclick="LBtoggle(this.id)" onmouseover="LBHov(this)" onmouseout="LBLeave(this)">My Network<br />Places</button></span>
</div>
<!--File Area//-->
<div class="FileView">
<object id=FileList width="100%" height="100%" type="EAB22AC0-30C1-11CF-A7EB-0000C05BAE0B" classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2">
<param name="Location" value="c:\" id=FileListLocation>
</object>
</div>
<!--Save as type//-->
<div class="type">
Save As Type:
<select class="types" id="Type" size="1">
</select>
</div>
<!--Bottom Right Buttons//-->
<div class="SC">
<button class="SCB1" tabindex="1">Save</button><br />
<button class="SCB2" onclick="window.close()">Cancel</button>
</div>
<!-- File Name //-->
<span id="FName">File name:</span>
<div id="dropHold">
<input type="text" size="34" id="dropText" value=""><button tabindex="-1" id="dropButton" onclick="dropList()"><sup>6</sup></button>
<script type="text/javascript">
var dPop = window.createPopup();
var dPopBody=dPop.document.body;
dPopBody.style.border="1px solid black";
dPopBody.style.overflowY="auto";
dPopBody.style.overflowX="hidden";
dPopBody.innerHTML="";
function dropList(){
var dw = parseInt(document.getElementById("dropHold").currentStyle.width);
dPop.show(195,350,dw, 175, document.body);
}
</script>
</div>
</body>
</html>
Save as an hta to see the basic functionality
The key thing that makes this work is this:
<object id=FileList width="100%" height="100%" type="EAB22AC0-30C1-11CF-A7EB-0000C05BAE0B" classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2">
<param name="Location" value="c:\" id=FileListLocation>
</object>
Microsoft has done a great job of hiding any and all documentation of this object, so I've had to play with it to figure out functionality. If this helps and you com up with anything else, I'd be gad to see it.