<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Music Box by 23andWalnut.com</title>

    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="jPlayer/js/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

    <script type="text/javascript">
        var playListItems = [
            {mp3:"music/1.mp3",ogg:"music/1.ogg"}
        ];
    </script>
</head>
<body>

<?php $class = isset($_REQUEST['type']) ? $_REQUEST['type'] : ''; ?>


<script type="text/javascript">
    var musicBoxClass = '<?php echo $class; ?>';
</script>



<div id="menu" class="clearfix">
    <ul>
        <li><a href="index.php?type=thumb-wall">Thumb Wall</a></li>
        <li><a href="index.php?type=list">List</a></li>

       <?php if (!( stristr("MSIE", getenv( "HTTP_USER_AGENT" ) ) || stristr("Internet Explorer", getenv("HTTP_USER_AGENT" ) ) )): ?>
        <li><a href="index.php?type=favorites">My Favorites</a></li>
       <?php endif; ?>

    </ul>
</div>




<div id="main" class="<?php echo $class; ?>">

<?php if ($class != 'thumb-wall'): ?>
    <div class="info-thumb">
        <span class="empty">&#9835; </span>
    </div>
<?php endif; ?>

    <div id="jplayer_playlist" class="jp-playlist playlist <?php echo $class; ?> clearfix">
        <ol>
            <li>Loading playlist....</li>
        </ol>
    </div>
</div>


<div id="jquery_jplayer"></div>

<div class="jp-interface clearfix">
    <div class="wrapper">
        <ul class="jp-controls">
            <li><a href="#" id="jplayer_previous" class="jp-previous" tabindex="1"><span
                    class="button-inner">&#9668I</span></a></li>
            <li><a href="#" id="jplayer_play" class="jp-play" tabindex="1"><span class="button-inner">&#9658</span></a>
            </li>
            <li><a href="#" id="jplayer_pause" class="jp-pause" tabindex="1"><span class="button-inner">II</span></a>
            </li>
            <li><a href="#" id="jplayer_next" class="jp-next" tabindex="1"><span class="button-inner">I&#9658</span></a>
            </li>

        </ul>
        <div class="jp-progress">
            <div id="jplayer_load_bar" class="jp-load-bar">
                <div id="jplayer_play_bar" class="jp-play-bar"></div>
            </div>
        </div>
        <div id="jplayer_volume_bar" class="jp-volume-bar">
            <div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div>
        </div>
    
    </div>
</div>

</body>
</html>
