Single Page Scroll Navigation with thumbnails

Single page navigation using active waypoints and smooth scrolling.

HTML

<script src="https://raw.github.com/imakewebthings/jquery-waypoints/master/waypoints.min.js"></script>
<script src="http://slobodan.99k.org/scripts/jquery.coverscroll.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/redmond/jquery-ui.css">
<nav>
    <div id="navigation">
        <a id="next" href="javascript:void(0)">Next</a>
        <a id="prev" href="javascript:void(0)">Prev</a>
        <ul id="thumbnails" class="ui-widget"/>
        <p id="drag">drag</p>
    </div>
</nav>

<div id="container">   
    <div class="empty first"></div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
    <div class="box">11</div>
    <div class="box">12</div>
    <div class="box">13</div>
    <div class="box">14</div>
    <div class="box">15</div>
    <div class="box">16</div>
    <div class="box">17</div>
    <div class="box">18</div>
    <div class="box">19</div>
    <div class="box">20</div>
    <div class="empty last"></div>
</div>    
    

<div id="debug"></div>

CSS

/* main elements */
#container{
    width:400px;
    padding:10px;
    margin-left:auto;
    margin-right:auto;
    background-color:#eee;
}

.box{
    width:380px;
    height:380px;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    margin-bottom:10px;
    background-color:#DDDDDD;
    text-align:center;
}


.empty {   
    width:380px; 
    text-align:center;  
    height:380px; 
}

.first{       
    height:155px; 
}

#next, #prev, #thumbnails {
    position: fixed;
    width:50px;
    height:50px;
    background-color:#DDD;
    z-index:1000;
}

#next{
    top:20px;
    right:20px;
}

#prev{
    top:91px;
    right:20px;
}


#thumbnails
{   
    scroll:auto;
    height:auto;
    list-style-type: none;
padding-bottom:600px;        
}


.thumb
{
    width:50px;
    height:50px;           
    color:'#fff';
    border-bottom:1px solid #ccc;
}

/* Menu */

#drag {
    margin-left:50px;
    background-color:#666;
    width:50px;
    height:50px;
}


/* Just colors and such */


#container .active {
    background: #F39814;
}

#thumbnails .active  { background: #F39814; }

#debug {
    bottom:10px;
    right:50px;
    width:250px;
    position: fixed;

}

JavaScript

$('#container .box').each(function(index, element) {
    $(element).data('index', index);
});

// Register each box as a waypoint.
$('#container .box').waypoint({
    offset: '40%',
    continuous: true
});

// ROMAN: draggable menu
$thumbnails = $("#thumbnails");


$(function() {
    $('#thumbnails').draggable({axis: 'y', cancel: 'div.thumb', handle: 'p#drag'});
});



$(function() {
    //create a thumbnail panel by copying the container div    
    var $container, $thumbnails;
    $container = $("#container");
    $thumbnails = $("#thumbnails");
    $('.box').each(function(index, element) {
        $thumbnails.append($("<li>", {
            text: $(element).text(),
            class: 'thumb'
        }).data("index", index));
    });

    //make the thumbnail panel selectable and have it generate a custom event
    $thumbnails.selectable({
        selected: function(event, ui) {
            $(ui.selected).trigger(jQuery.Event("ThumbSelected", {
                index: $(ui.selected).data('index')
            }));
        }
    });
});



/////////////////////////
//event handlers
////////////////////////
// Find waypoints and add/remove selected class using waypoints js
// http://imakewebthings.com/jquery-waypoints/
$('html').delegate('.box', 'waypoint.reached', function(event, direction) {
    var $element = $(this);
    if (direction === "up") {
        $element = $element.prev('.box');
    }
    if (!$element.length) {
        $element = $element.end('.box');
    }
    $('#container .active').removeClass('active');
    $element.addClass('active');

    //trigger a custom event
    $element.trigger(jQuery.Event("ImageSelected", {
        index: $element.data('index')
    }));

});



$('html').bind('ThumbSelected', function(event) {
    //find the item from the gallery that was selected in the thumbnails
    var $element = $($("#container .box")[event.index]);
    //clear the selected gallery css
    $('#container .active').removeClass('active');
    //scroll...