YUI Scrollview w/ DOM management

by Derek Gathright

HTML

<script src="http://derek.io/~/yui/yui3/build/yui/yui.js"></script>
<body class="yui3-skin-sam">
    <div>
        <div id="scrollview-content">
            <ul></ul>
        </div>
    </div>
    <div id="logging"></div>
</body>

CSS

#scrollview-bounding {
    xborder:dotted 2px orange;
    height:500px;
}

#scrollview-content {
    white-space:nowrap;
}

#scrollview-content li{
    display:inline-block;
    width:298px;
    height:298px;
    border:1px solid red;
    color:black;
    font-size:40px;
    opacity: 0.5;
    background-image: -webkit-linear-gradient(top, red, white, blue);
    text-align:center;
}

JavaScript

YUI.add('scrollview-paginator-350pr3', function(Y) {

/**
 * Provides a plugin, which adds pagination support to ScrollView instances
 *
 * @module scrollview-paginator
 */

var UI = (Y.ScrollView) ? Y.ScrollView.UI_SRC : "ui",
    INDEX = "index",
    PREVINDEX = "prevIndex",
    SCROLL_X = "scrollX",
    SCROLL_Y = "scrollY",
    TOTAL = "total",
    BOUNDING_BOX = "boundingBox",
    CONTENT_BOX = "contentBox";

/**
 * Scrollview plugin that adds support for paging
 *
 * @class ScrollViewPaginator
 * @namespace Plugin
 * @extends Plugin.Base 
 * @constructor
 */
function PaginatorPlugin() {
    PaginatorPlugin.superclass.constructor.apply(this, arguments);
}

/**
 * The identity of the plugin
 *
 * @property NAME
 * @type String
 * @default 'paginatorPlugin'
 * @static
 */
PaginatorPlugin.NAME = 'pluginScrollViewPaginator';

/**
 * The namespace on which the plugin will reside
 *
 * @property NS
 * @type String
 * @default 'pages'
 * @static
 */
PaginatorPlugin.NS = 'pages';

/**
 * The default attribute configuration for the plugin
 *
 * @property ATTRS
 * @type Object
 * @static
 */
PaginatorPlugin.ATTRS = {

    /**
     * CSS selector for a page inside the scrollview. The scrollview
     * will snap to the closest page.
     *
     * @attribute selector
     * @type {String}
     */
    selector: {
        value: null
    },
    
    /**
     * The active page number for a paged scrollview
     *
     * @attribute index
     * @type {Number}
     * @default 0
     */
    index: {
        value: 0
    },
    
    /**
     * The active page number for a paged scrollview
     *
     * @attribute index
     * @type {Number}
     * @default 0
     */
    prevIndex: {
        value: 0
    },
    
    /**
     * The active page number for a paged scrollview
     *
     * @attribute index
     * @type {Number}
     * @default 0
     */
    prevIndex: {
        value: 0
    },
    
    /**
     * The total number of pages
     *
     * @attribute total
     * @type...