How to create a windows explorer-like functionality?

I am building a web application that needs windows explorer-like feature. I have implemented jQuery File Tree but that one works for left navigation only. Any ideas that I can work on or any ready-made solutions out there?

Following is the PHP code that builds the ul and li tags:

if( file_exists($root . $_POST['dir']) ) {
$files = scandir($root . $_POST['dir']);
natcasesort($files);
if( count($files) > 2 ) { /* The 2 accounts for . and .. */
    echo "<ul class=\"jqueryFileTree\" style=\"display: none;\">";
    // All dirs
    foreach( $files as $file ) {
        if( file_exists($root . $_POST['dir'] . $file) && $file != '.' && $file != '..' && is_dir($root . $_POST['dir'] . $file) ) {
            echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST['dir'] . $file) . "/\">" . htmlentities($file) . "</a></li>";
        }
    }

    // All files
    foreach( $files as $file ) {
        if( file_exists($root . $_POST['dir'] . $file) && $file != '.' && $file != '..' && !is_dir($root . $_POST['dir'] . $file) ) {
            $ext = preg_replace('/^.*\./', '', $file);
            echo "<li class=\"file ext_$ext\"><a href=\"" . htmlentities($_POST['dir'] . $file) . "\" rel=\"" . htmlentities($_POST['dir'] . $file) . "\">" . htmlentities($file) . "</a></li>";
        }
    }
    echo "</ul>";    
}

}

Following is the jquery library

if(jQuery) (function($){

$.extend($.fn, {
    fileTree: function(o, h) {
        // Defaults
        if( !o ) var o = {};
        if( o.root == undefined ) o.root = '/';
        if( o.script == undefined ) o.script = 'jqueryFileTree.php';
        if( o.folderEvent == undefined ) o.folderEvent = 'click';
        if( o.expandSpeed == undefined ) o.expandSpeed= 500;
        if( o.collapseSpeed == undefined ) o.collapseSpeed= 500;
        if( o.expandEasing == undefined ) o.ex开发者_StackOverflow社区pandEasing = null;
        if( o.collapseEasing == undefined ) o.collapseEasing = null;
        if( o.multiFolder == undefined ) o.multiFolder = true;
        if( o.loadMessage == undefined ) o.loadMessage = 'Loading...';

        $(this).each( function() {

            function showTree(c, t) {
                $(c).addClass('wait');
                $(".jqueryFileTree.start").remove();
                $.post(o.script, { dir: t }, function(data) {
                    $(c).find('.start').html('');
                    $(c).removeClass('wait').append(data);
                    if( o.root == t ) $(c).find('UL:hidden').show(); else $(c).find('UL:hidden').slideDown({ duration: o.expandSpeed, easing: o.expandEasing });
                    bindTree(c);
                });
            }

            function bindTree(t) {
                $(t).find('LI A').bind(o.folderEvent, function() {
                    if( $(this).parent().hasClass('directory') ) {
                        if( $(this).parent().hasClass('collapsed') ) {
                            // Expand
                            if( !o.multiFolder ) {
                                $(this).parent().parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
                                $(this).parent().parent().find('LI.directory').removeClass('expanded').addClass('collapsed');
                            }
                            $(this).parent().find('UL').remove(); // cleanup
                            showTree( $(this).parent(), escape($(this).attr('rel').match( /.*\// )) );
                            $(this).parent().removeClass('collapsed').addClass('expanded');
                        } else {
                            // Collapse
                            $(this).parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
                            $(this).parent().removeClass('expanded').addClass('collapsed');
                        }
                    } else {
                        h($(this).attr('rel'));
                    }
                    return false;
                });
                // Prevent A from triggering the # on non-click events
                if( o.folderEvent.toLowerCase != 'click' ) $(t).find('LI A').bind('click', function() { return false; });
            }
            // Loading message
            $(this).html('<ul class="jqueryFileTree start"><li class="wait">' + o.loadMessage + '<li></ul>');
            // Get the initial file list
            showTree( $(this), escape(o.root) );

        });
    }
});

})(jQuery);

Following is the HTML

<script>

$(document).ready( function() { $('.container_id').fileTree({ root: '/', script: 'jqueryFileTree.php', multiFolder: false }, function(file) { //alert(file); openFile(file); });

function openFile(file){

alert(file);
    }

});

If you're using jQuery File Tree, it looks like you could just pass a callback that loads the selected file in the right side.