Untitled

        <html>
<head>

<script src="./jquery.js"></script>
<script src="./squirrel.js"></script>

<style>
*{padding: 0px; margin: 0px;}
html,body{width: 100%; height: 100%:}
#menu{
top: 200px;
left: -130px;
position: absolute;
z-index: 100;
}
#menu:hover{
left: 0px;
}
#menu a{
display: block;
background-color: #0088cc;
color: white;
line-height: 1.5;
width: 150px;
font-size: 20px;
text-align: center;
text-decoration: none;
}
#alphamenu{
position: absolute;
right: 20px;
top: 0px;
background-color: black;
width: 20px;
}
#alphamenu a{
display: block;
color: white;
width: 20px;
text-decoration: none;
font-size: 18px;
line-height: 1.5;
}
#content{
padding-left: 35px;
padding-right: 40px;
background-color: black;
overflow: auto;
height: 100%;
width: 100%:
}
#content .letter{
color: white;
width: 100%;
float: left;
font-size: 18px;
line-height: 1.5;
}
#content .item .imagebox{
width: 150px;
height: 150px;
}
#content .item img{
max-width: 150px;
max-height: 150px;
}
#content .item{
position: relative;
text-align: center;
height: 250px;
width: 150px;
float: left;
margin: 20px 0px;
overflow: hidden;
}
#content .item .textbox{
position: absolute;
left: 150px;
top: 0px;
width: 450px;
height: 250px;
background-color: black;
overflow: hidden;
font-size: 14px;
color: white;
text-align: left;
}
#content .item ul{
padding-left: 25px;
list-style: none;
}
#content .item .textbox > li{
font-size: 18px;
}
#content .item-big{
width: 600px;
}
#content h3{
height: 100px;
font-size: 20px;
width: 150px;
overflow: hidden;
}
#content h3 a{
color: white;
text-decoration: none;
}
#content .sizer{clear: both;height: 100px;}
</style>
</head>
<body>
<?php

// Returns array with which contains files in given folder, each files contains ['file'] and ['name']
function explodedir($dir){
        if (is_dir($dir)) { // Is it really dir?
            if ($dh = opendir($dir))    { // Opened?
                while (($file = readdir($dh)) !== false) { // Succes on reading next file from folder
                        if($file != "." and $file != ".."){ // We do not want .. and . files
                                $item['file'] = $dir."/".$file;
                                $item['name'] = $file;
                                $items[$item['name']] = $item;
                                unset($item);
                        }
                }
                closedir($dh);
                return $items;
            }
        }
}

/* Sets Default values
 *
 *      basedir - dir from where script looks for files
 *              - first level dir contains the group of movies/tvshows, second level are movies itself
 *      default_dir - dir which is printed as default
 *      default_img - this image script use to make a cover when he do not find any cover in movies folder
 *      types_img - files with this ending (*.jpg etc...) are used as covers if founded... script pickes first it finds
 *      types_video - same as types_img but for videos
 *      types_subtitles - same as types_img but for subtitles
 */

$basedir = "/srv/http/Videos";
$default_dir = 'Movies';
$default_img = "http://4.bp.blogspot.com/-BhrtpyFk3-M/TYBK7JrZWhI/AAAAAAAAAPM/eCAR2DJET10/s400/unavailable.gif";
$types_img = array('jpg','png','jpeg','gif','PNG');
$types_video = array('avi','mkv','mp4');
$types_subtitles = array('srt','txt');

//find folders which represents group
$dirs = explodedir($basedir);

//generate menu, each item in menu is one group of movies
echo '<div id="menu">';
foreach($dirs as $dir){
        echo '<a href="./index.php?folder='.$dir['name'].'">'.$dir['name'].'</a>';
}
echo '</div>';

//sets default group to Movies, otherwise it uses group given in $_GET['folder']
if(isset($_GET['folder'])){

        $dir = $_GET['folder'];

}else{

        $dir = $default_dir;

}

//explorers dir for Movies etc...
$items = explodedir($basedir."/".$dir);

sort($items);

//generate base html strucutre
?>
<div id="content">
<div class="sizer"></div>
<?php

$letter = null;

//generate Movies
foreach($items as $item){

        //set default image
        $img = $default_img;

        //explore dir of movie
        $files = explodedir($item['file']);

        unset($videos);
        unset($subtitles);

        //cycle to find files
        foreach($files as $file){

                //gets file last word, exploded by '.', which should be file type
                $file_type = end(
                                explode('.',$file['name'])
                                );

                //generate url to acces file from web
                $url = "http://".$_SERVER['HTTP_HOST']."/Videos/".$dir."/".$item['name']."/".$file['name'];

                //generate array for future processisng
                $file_info = array('url' => $url,'name' => $file['name']);

                //check if files is image, uses types_img to recognize, only one time per item
                if (in_array($file_type,$types_img) and $img == $default_img) {
                        $img = $url;
                }

                //check if file is video
                if(in_array($file_type,$types_video) or $file['name'] == 'VIDEO_TS'){
                        $videos[] = $file_info;
                }

                //check for all subtitle files
                if(in_array($file_type,$types_subtitles)){
                        $subtitles[] = $file_info;
                }
        }

        //check if momental file is selected by user, set's classes based on that
        if($_GET['item']==$item['name']){

                $class = 'item item-big';

        }else{

                $class = 'item';

        }
        $movie_letter = substr($item['name'],0,1);
        if($letter != $movie_letter){
                echo '<div class="letter">'.$movie_letter.'<a name="'.$movie_letter.'"></a></div>';
                $letter = $movie_letter;
                $letters[] = $letter;
        }

        //Generation of HTML
        ?>
                <div class="<?php echo $class; ?>">
                        <div class="imagebox">
                                <img src="<?php echo $img;?>">
                        </div>
                        <h3>
                                <a href="index.php?folder=<?php echo $dir; ?>&item=<?php echo $item['name']; ?>#<?php echo $item['name'];?>"><?php echo $item['name']; ?></a>
                                <a name="<?php echo $item['name']; ?>"></a>
                        </h3>
                        <ul class="textbox">
                                <li>Video files:</li>
                                <ul>
                                <?php  foreach($videos as $video){?>

                                        <li><?php echo $video['name']; ?></li>

                                <?php }?>
                                </ul>
                                <li>Subtitle files:</li>
                                <ul>
                                <?php  foreach($subtitles as $subtitle){?>

                                        <li><?php echo $subtitle['name']; ?></li>

                                <?php }?>
                                </ul>
                        </ul>
                </div>
        <?php
}
?>
<div class="sizer"></div>
</div>
<div id="alphamenu">
<?php foreach($letters as $letter){?>
        <a href="#<?php echo $letter;?>"><?php echo $letter;?></a>
<?php } ?>
</div>
</body>
</html>