Carousel w/ DOM management & 3D acceleration

HTML

<script src="http://yui.yahooapis.com/3.5.0pr2/build/yui/yui-min.js"></script>
<!--
Carousel demo (WebKit only, for now)

Interesting because:
a) Uses hardware accelerated transitions
b) Manages slide addition & removal to/from the DOM in order to limit memory consumption.  If you don't manage the DOM properly, it's easy to use up too much memory, causing iOS Safari to crash.
c) Can support infinite** slides

Coming soon to a YUI Scrollview Widget near you.

- @derek

** not really inifinite-infinite, just a really-big-but-reasonable-number-infinite

-->

<div>
    <p>Total slides out of the DOM: <span id='statTotalNodes'>-</span></p>
    <p>Total slides in the DOM: <span id='statTotalNodesPresent'>-</span></p>
    <p>Slide #'s in the DOM: <span id='statNodesPresent'>-</span></p>
</div>

<button class='yui3-button' data-direction='previous'>&lt;&lt; Previous</button>
<button class='yui3-button' data-direction='next'>Next &gt;&gt;</button>

<div id="scrollview-bounding">
    <div id="scrollview-content">
        <ul id="slides"></ul>
    </div>
</div>

CSS

#scrollview-bounding {
    border:dotted 2px orange;
    width:500px;
    height:235px;
    margin-top:190px;
}

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

#scrollview-content li{
    #display:inline-block;
    width:350px;
    height:100px;
    border-radius: 50px;
    padding:50px;
    margin:20px;
    font-size:100px;
    box-shadow: 20px 20px 10px #999;
    opacity: 0.5;
    -webkit-transform: translate(0px, 0px) translateZ(0px); /* The Z axis triggers GPU rendering */
    background-image: -webkit-linear-gradient(top, red, white, blue);
    text-align:center;
}

JavaScript

/*
Uses YUI 3.5.0pr2

Modules: 
- node - JS module for DOM manipulation
- transition - JS module for slide transitions
- cssbutton - CSS module for pretty buttons
- cssreset - CSS module to reset the browser styles
*/

YUI().use('node', 'transition', 'cssbutton', 'cssreset', function(Y) {

    // The number of slides to insert
    var SLIDE_COUNT = 10;

    // Populate the DOM
    var html = '';
    for (i = 1; i <= SLIDE_COUNT; i++) {
        html += "<li>" + i + "</li>";
    }
    Y.one("#scrollview-content ul").append(html);

    // At this point we now have {SLIDE_COUNT} nodes in the DOM, which 
    // can lead to memory issues on mobile devices, especially as you try
    // to use the GPU to animate transitions.  So, Safari (iOS) just crashes.
    
    
    // Now begins the carousel stuff  
    var i, slideWidth, slideNodes, buttons,
        MAX_SLIDE_COUNT = 10, // [configurable] The max number of slides in the DOM
        offsetX = 0,
        currentIndex = 0,
        previousIndex = 0,
        bb = Y.one('#scrollview-bounding'), // bounding box
        cb = Y.one('#scrollview-content'); // content box

    slideWidth = parseInt(Y.one('#slides').getComputedStyle('width'), 10);
    slideNodes = Y.one('#slides').get('children');

    // Empty the container
    cb.empty();

    // Now, fill it with the first set of items
    for (i=0; i < MAX_SLIDE_COUNT; i++) {
        cb.append(slideNodes.item(currentIndex + i));
    }

    // Store a reference to the previous/next buttons for later usage
    buttons = Y.all('.yui3-button');

    // Listen for click events
    buttons.on('click', transition);
    
    updateStats();


    /*
    Transition
    Moves the carousel left or right
    */
    function transition(e) {

        // Save the current index value for later comparison
        previousIndex = currentIndex;

        // Are we going forwards or backwards?
        if (e.target.getAttribute('data-direction') === "next") {
            
            // Last...