            YUI().use("node", "anim", function(Y) { 
                
                // Constants
                var WINDOW_WIDTH,
                    TOTAL_PAGES,

                    // Class names
                    RIGHT_BUTTON = "right-button",
                    LEFT_BUTTON = "left-button",
                    PAGINATION = "pagination",

                    // YNode references
                    _carousel, 

                    // Animator
                    _anim,

                    // Current X position used in animation 
                    _currentXPosition,
                    _startXPosition,

                    _startIndex = 0,
                    _lastIndex,

                    // Current pagination page shown; it contains a integer like 1, 2, etc.
                    _currentIndex = 0;

                // Event handlers
                function init() {
                    // Initialize the DOM references
                    _body = Y.get(document.body);
                    _carousel = _body.query(".carousel"),

                    // Animation stuff
                    _anim = new Y.Anim({ 
                        node: _carousel, 
                        duration: 0.5, 
                        easing: Y.Easing.easeOut 
                    });

                    // Get the offsetWidth of the list containing the photos
                    WINDOW_WIDTH = _carousel.get("children").item(0).get("offsetWidth");
                    TOTAL_PAGES = _carousel.get("children").size(); 

                    _lastIndex = TOTAL_PAGES - 1;
                    _currentXPosition = _carousel.getX();

                    // Add a custom attribute to track the current page that we're on 
                    _anim.addAtt("currentPage", { value : _currentIndex });

                    //_anim.on("end", handleScrollEnd);

                }

                // When the scrolling animation ends, this event handler is called.
                function handleScrollEnd(e) {
                    _body.query(".selected").removeClass("selected");

                    // After we've removed the selected class from the old node,
                    // We get the new selected node and set the selected class 
                    _body.query(".page" + this.get("currentPage").value).addClass("selected"); 
                }

                // Detect the click and then scroll appropriately
                function scrollControl(e) {

                    var target = e.target,
                        hasLeftButton = target.hasClass(LEFT_BUTTON),
                        hasRightButton = target.hasClass(RIGHT_BUTTON),
                        hasPagination = target.get("parentNode").hasClass(PAGINATION),
                        gotoPage;

                    if (hasLeftButton) {
                        scrollLeft();
                    } else if (hasRightButton) {
                        scrollRight();
                    } else if (hasPagination) {

                        // Parse out class name "page" to get the integer
                        gotoPage = parseInt(target.get("className").substring(4), 10);
                        paginate(gotoPage);

                    }

                    if (hasLeftButton || hasRightButton || hasPagination) {

                        _anim.set("to", { xy: [_currentXPosition, _carousel.getY()] });
                        _anim.set("currentPage", { value : _currentIndex });
                        _anim.run(); 

                    }
                }

                // Handles scrolling left
                function scrollLeft() {

                    if (_currentIndex === _startIndex) {

                        _currentXPosition = -1 * WINDOW_WIDTH * (TOTAL_PAGES - 1) + _carousel.getX();
                        _currentIndex = TOTAL_PAGES - 1; 
 
                    } else {

                        _currentXPosition = _carousel.getX() + WINDOW_WIDTH;

                        --_currentIndex;

                    }

                }

                // Handles scrolling right
                function scrollRight() {

                    if (_currentIndex === _lastIndex) {

                        // We go to the first page
                        _currentXPosition = WINDOW_WIDTH * (TOTAL_PAGES - 1) + _carousel.getX();
                        _currentIndex = 0;

                    } else {

                        _currentXPosition = _carousel.getX() - WINDOW_WIDTH;
                        ++_currentIndex;

                    }

                }

                // Handles pagination
                function paginate(gotoPage) {
                    var multiple;

                    if (gotoPage > _currentIndex) {

                        // This is like clicking go right
                        multiple = gotoPage - _currentIndex;

                        for (var i = 0;i < multiple;i++) {
                            _currentXPosition -= WINDOW_WIDTH;
                        }

                    } else if (gotoPage < _currentIndex) {

                        // This is like clicking go left
                        multiple = _currentIndex - gotoPage;

                        for (var i = 0;i < multiple;i++) {
                            _currentXPosition += WINDOW_WIDTH;
                        }

                    }

                    _currentIndex = gotoPage;

                }

                // When the DOM is ready load the photos!
                Y.on("domready", init); 
                Y.on("click", scrollControl, "body .container");

            }); 
