Using JQUERY FILE TREE

Using JQUERY FILE TREE

Hi there, 

I'm starting to use jquery and some plugins, in this case jQuery File Tree. 


I need to develop a web page where exist a folder explorer. I resolved this requirement with the mentioned plugin. 

But now I have a new problem, I want to be able to select one file and show its content in another div or iframe that will be next to the folder explorer, something like in the next image:



I think there's a php script that can help me to implement this functionality, but i could not be able of understand it. 

Here's the script:

  1. <?php
    $root = isset($root) ? $root : "";

    $_POST['dir'] = urldecode($_POST['dir']);

    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=\"#\" rel=\"" . htmlentities($_POST['dir'] . $file) . "\">" . htmlentities($file) . "</a></li>";
    }
    }
    echo "</ul>";
    }
    }

    ?>

Any idea??