$(document).ready(function() {
    var direction = 0;  // -1 for left, +1 for right
    var position = 0;   //stores the previous position - determines direction of drag
    var wrapperWidth = $("div.panel-wrapper").width();

    //create a copy of the DIV .panel-wrapper for overlap
    $("#viewport").append($(".panel-wrapper").clone());

    $("#viewport").draggable(
            {
                axis: 'x',

                drag: function(event, ui) {
                    //bounce the viewport back to the middle of the 2 wrappers if it moves too far LEFT
                    if (ui.position.left > 0) {
                        ui.position.left = (ui.position.left - wrapperWidth);
                    }

                    //...or RIGHT
                    if ((-ui.position.left + wrapperWidth) > (wrapperWidth * 2)) {
                        ui.position.left = (ui.position.left + wrapperWidth);
                    }

                    if (ui.position.left > position) {
                        direction = 1;
                    } else {
                        direction = -1;
                    }
                    position = ui.position.left;
                },

                stop: function(event, ui) {
                    var pixelsToSlide = 75;
                    var animate = true;

                    var currentPosition = (-ui.position.left);

                    if (ui.position.left > -pixelsToSlide) {
                        ui.position.left = (ui.position.left - wrapperWidth);
                        animate = false;
                    }

                    if ((-ui.position.left + wrapperWidth) > ((wrapperWidth * 2) - pixelsToSlide)) {
                        ui.position.left = (ui.position.left + wrapperWidth);
                        animate = false;
                    }

                    if (animate) {
                        //only animate if not at either edge of wrapper
                        if (direction == 1) {
                            //animate right
                            ui.helper.animate({ left: (ui.position.left + pixelsToSlide) });

                        } else if (direction == -1) {
                            //animate left
                            ui.helper.animate({ left: (ui.position.left - pixelsToSlide) });
                        }
                    }
                }
            }
        );
});