Proyectos de Subversion Moodle

YUI.add('yui2-carousel', function(Y) {

    var YAHOO    = Y.YUI2;

    /*

Copyright (c) 2011, Yahoo! Inc. All rights reserved.

Code licensed under the BSD License:

http://developer.yahoo.com/yui/license.html

version: 2.9.0

*/

/**

 * The Carousel module provides a widget for browsing among a set of like

 * objects represented pictorially.

 *

 * @module carousel

 * @requires yahoo, dom, event, element

 * @optional animation

 * @namespace YAHOO.widget

 * @title Carousel Widget

 */

(function () {

    var WidgetName = "Carousel"; // forward declaration

    /**

     * The Carousel widget.

     *

     * @class Carousel

     * @extends YAHOO.util.Element

     * @constructor

     * @param el {HTMLElement | String} The HTML element that represents the

     * the container that houses the Carousel.

     * @param cfg {Object} (optional) The configuration values

     */

    YAHOO.widget.Carousel = function (el, cfg) {

        YAHOO.widget.Carousel.superclass.constructor.call(this, el, cfg);

    };

    /*

     * Private variables of the Carousel component

     */

    /* Some abbreviations to avoid lengthy typing and lookups. */

    var

    Carousel    = YAHOO.widget.Carousel,

    Dom         = YAHOO.util.Dom,

    Event       = YAHOO.util.Event,

    JS          = YAHOO.lang,

    /**

     * The internal table of Carousel instances.

     * @private

     * @static

     */

    instances = {},

    syncUiOnItemInsert = true,

    /*

     * Custom events of the Carousel component

     */

    /**

     * @event afterScroll

     * @description Fires when the Carousel has scrolled to the previous or

     * next page.  Passes back the index of the first and last visible items in

     * the Carousel.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    afterScrollEvent = "afterScroll",

    /**

     * @event allItemsRemovedEvent

     * @description Fires when all items have been removed from the Carousel.

     * See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    allItemsRemovedEvent = "allItemsRemoved",

    /**

     * @event beforeHide

     * @description Fires before the Carousel is hidden.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    beforeHideEvent = "beforeHide",

    /**

     * @event beforePageChange

     * @description Fires when the Carousel is about to scroll to the previous

     * or next page.  Passes back the page number of the current page.  Note

     * that the first page number is zero.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    beforePageChangeEvent = "beforePageChange",

    /**

     * @event beforeScroll

     * @description Fires when the Carousel is about to scroll to the previous

     * or next page.  Passes back the index of the first and last visible items

     * in the Carousel and the direction (backward/forward) of the scroll.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    beforeScrollEvent = "beforeScroll",

    /**

     * @event beforeShow

     * @description Fires when the Carousel is about to be shown.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    beforeShowEvent = "beforeShow",

    /**

     * @event blur

     * @description Fires when the Carousel loses focus.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    blurEvent = "blur",

    /**

     * @event focus

     * @description Fires when the Carousel gains focus.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    focusEvent = "focus",

    /**

     * @event hide

     * @description Fires when the Carousel is hidden.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    hideEvent = "hide",

    /**

     * @event itemAdded

     * @description Fires when an item has been added to the Carousel.  Passes

     * back the content of the item that would be added, the index at which the

     * item would be added, and the event itself.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    itemAddedEvent = "itemAdded",

    /**

     * @event itemRemoved

     * @description Fires when an item has been removed from the Carousel.

     * Passes back the content of the item that would be removed, the index

     * from which the item would be removed, and the event itself.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    itemRemovedEvent = "itemRemoved",

    /**

     * @event itemReplaced

     * @description Fires when an item has been replaced in the Carousel.

     * Passes back the content of the item that was replaced, the content

     * of the new item, the index where the replacement occurred, and the event

     * itself.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    itemReplacedEvent = "itemReplaced",

    /**

     * @event itemSelected

     * @description Fires when an item has been selected in the Carousel.

     * Passes back the index of the selected item in the Carousel.  Note, that

     * the index begins from zero.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    itemSelectedEvent = "itemSelected",

    /**

     * @event loadItems

     * @description Fires when the Carousel needs more items to be loaded for

     * displaying them.  Passes back the first and last visible items in the

     * Carousel, and the number of items needed to be loaded.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    loadItemsEvent = "loadItems",

    /**

     * @event navigationStateChange

     * @description Fires when the state of either one of the navigation

     * buttons are changed from enabled to disabled or vice versa.  Passes back

     * the state (true/false) of the previous and next buttons.  The value true

     * signifies the button is enabled, false signifies disabled.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    navigationStateChangeEvent = "navigationStateChange",

    /**

     * @event pageChange

     * @description Fires after the Carousel has scrolled to the previous or

     * next page.  Passes back the page number of the current page.  Note

     * that the first page number is zero.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    pageChangeEvent = "pageChange",

    /*

     * Internal event.

     * @event render

     * @description Fires when the Carousel is rendered.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    renderEvent = "render",

    /**

     * @event show

     * @description Fires when the Carousel is shown.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    showEvent = "show",

    /**

     * @event startAutoPlay

     * @description Fires when the auto play has started in the Carousel.  See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    startAutoPlayEvent = "startAutoPlay",

    /**

     * @event stopAutoPlay

     * @description Fires when the auto play has been stopped in the Carousel.

     * See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    stopAutoPlayEvent = "stopAutoPlay",

    /*

     * Internal event.

     * @event uiUpdateEvent

     * @description Fires when the UI has been updated.

     * See

     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>

     * for more information on listening for this event.

     * @type YAHOO.util.CustomEvent

     */

    uiUpdateEvent = "uiUpdate";

    /*

     * Private helper functions used by the Carousel component

     */

   /**

     * Set multiple styles on one element.

     * @method setStyles

     * @param el {HTMLElement} The element to set styles on

     * @param style {Object} top:"10px", left:"0px", etc.

     * @private

     */

     function setStyles(el, styles) {

         var which;

         for (which in styles) {

             if (styles.hasOwnProperty(which)) {

                 Dom.setStyle(el, which, styles[which]);

             }

         }

     }

    /**

     * Create an element, set its class name and optionally install the element

     * to its parent.

     * @method createElement

     * @param el {String} The element to be created

     * @param attrs {Object} Configuration of parent, class and id attributes.

     * If the content is specified, it is inserted after creation of the

     * element. The content can also be an HTML element in which case it would

     * be appended as a child node of the created element.

     * @private

     */

    function createElement(el, attrs) {

        var newEl = document.createElement(el);

        attrs = attrs || {};

        if (attrs.className) {

            Dom.addClass(newEl, attrs.className);

        }

        if (attrs.styles) {

            setStyles(newEl, attrs.styles);

        }

        if (attrs.parent) {

            attrs.parent.appendChild(newEl);

        }

        if (attrs.id) {

            newEl.setAttribute("id", attrs.id);

        }

        if (attrs.content) {

            if (attrs.content.nodeName) {

                newEl.appendChild(attrs.content);

            } else {

                newEl.innerHTML = attrs.content;

            }

        }

        return newEl;

    }

    /**

     * Get the computed style of an element.

     *

     * @method getStyle

     * @param el {HTMLElement} The element for which the style needs to be

     * returned.

     * @param style {String} The style attribute

     * @param type {String} "int", "float", etc. (defaults to int)

     * @private

     */

    function getStyle(el, style, type) {

        var value;

        if (!el) {

            return 0;

        }

        function getStyleIntVal(el, style) {

            var val;

            /*

             * XXX: Safari calculates incorrect marginRight for an element

             * which has its parent element style set to overflow: hidden

             * https://bugs.webkit.org/show_bug.cgi?id=13343

             * Let us assume marginLeft == marginRight

             *

             * Seems like IE9 also has this issue!

             */

            if (style == "marginRight" && (YAHOO.env.ua.webkit ||

                    (YAHOO.env.ua.ie && YAHOO.env.ua.ie >= 9))) {

                val = parseInt(Dom.getStyle(el, "marginLeft"), 10);

            } else {

                val = parseInt(Dom.getStyle(el, style), 10);

            }

            return JS.isNumber(val) ? val : 0;

        }

        function getStyleFloatVal(el, style) {

            var val;

            /*

             * XXX: Safari calculates incorrect marginRight for an element

             * which has its parent element style set to overflow: hidden

             * https://bugs.webkit.org/show_bug.cgi?id=13343

             * Let us assume marginLeft == marginRight

             */

            if (style == "marginRight" && YAHOO.env.ua.webkit) {

                val = parseFloat(Dom.getStyle(el, "marginLeft"));

            } else {

                val = parseFloat(Dom.getStyle(el, style));

            }

            return JS.isNumber(val) ? val : 0;

        }

        if (typeof type == "undefined") {

            type = "int";

        }

        switch (style) {

        case "height":

            value = el.offsetHeight;

            if (value > 0) {

                value += getStyleIntVal(el, "marginTop")        +

                        getStyleIntVal(el, "marginBottom");

            } else {

                value = getStyleFloatVal(el, "height")          +

                        getStyleIntVal(el, "marginTop")         +

                        getStyleIntVal(el, "marginBottom")      +

                        getStyleIntVal(el, "borderTopWidth")    +

                        getStyleIntVal(el, "borderBottomWidth") +

                        getStyleIntVal(el, "paddingTop")        +

                        getStyleIntVal(el, "paddingBottom");

            }

            break;

        case "width":

            value = el.offsetWidth;

            if (value > 0) {

                value += getStyleIntVal(el, "marginLeft")       +

                        getStyleIntVal(el, "marginRight");

            } else {

                value = getStyleFloatVal(el, "width")           +

                        getStyleIntVal(el, "marginLeft")        +

                        getStyleIntVal(el, "marginRight")       +

                        getStyleIntVal(el, "borderLeftWidth")   +

                        getStyleIntVal(el, "borderRightWidth")  +

                        getStyleIntVal(el, "paddingLeft")       +

                        getStyleIntVal(el, "paddingRight");

            }

            break;

        default:

            if (type == "int") {

                value = getStyleIntVal(el, style);

            } else if (type == "float") {

                value = getStyleFloatVal(el, style);

            } else {

                value = Dom.getStyle(el, style);

            }

            break;

        }

        return value;

    }

    /**

     * Compute and return the height or width of a single Carousel item

     * depending upon the orientation.

     *

     * @method getCarouselItemSize

     * @param which {String} "height" or "width" to be returned.  If this is

     * passed explicitly, the calculated size is not cached.

     * @private

     */

    function getCarouselItemSize(which) {

        var carousel = this,

            child,

            item,

            size     = 0,

            vertical = false;

        if (carousel._itemAttrCache[which]) {

            return carousel._itemAttrCache[which];

        }

        if (carousel._itemsTable.numItems === 0) {

            return 0;

        }

        // get first loaded item

        item = carousel._findClosestSibling(-1);

        if (JS.isUndefined(item)) {

            return 0;

        }

        child = Dom.get(item.id);

        if (typeof which == "undefined") {

            vertical = carousel.get("isVertical");

        } else {

            vertical = which == "height";

        }

        if (vertical) {

            size = getStyle(child, "height");

        } else {

            size = getStyle(child, "width");

        }

        if (size) {

            carousel._itemAttrCache[which] = size;

        }

        return size;

    }

    /**

     * Return the size of a part of the item (reveal).

     *

     * @method getRevealSize

     * @private

     */

    function getRevealSize() {

        var carousel = this, isVertical, sz;

        isVertical = carousel.get("isVertical");

        sz  = getCarouselItemSize.call(carousel,

                isVertical ? "height" : "width");

        return (sz * carousel.get("revealAmount") / 100);

    }

    /**

     * Compute and return the position of a Carousel item based on its

     * position.

     *

     * @method getCarouselItemPosition

     * @param position {Number} The position of the Carousel item.

     * @private

     */

    function getCarouselItemPosition(pos) {

        var carousel    = this,

            itemsPerRow = carousel._cols,

            itemsPerCol = carousel._rows,

            page,

            sz,

            isVertical,

            itemsCol,

            itemsRow,

            sentinel,

            top,

            left,

            rsz,

            delta,

            styles = {},

            itemsTable = carousel._itemsTable;

        isVertical = carousel.get("isVertical");

        sz  = getCarouselItemSize.call(carousel,

                isVertical ? "height" : "width");

        rsz = getRevealSize.call(carousel);

        if (itemsPerCol) {

            page = this.getPageForItem(pos);

            if (isVertical) {

                itemsRow = Math.floor(pos/itemsPerRow);

                delta = itemsRow;

                top = delta * sz;

                styles.top  = (top + rsz) + "px";

                sz  = getCarouselItemSize.call(carousel, "width");

                itemsCol = pos % itemsPerRow;

                delta = itemsCol;

                left = delta * sz;

                styles.left = left + "px";

            } else {

                itemsCol = pos % itemsPerRow;

                sentinel = (page - 1) * itemsPerRow;

                delta = itemsCol + sentinel;

                left = delta * sz;

                styles.left = (left + rsz) + "px";

                sz  = getCarouselItemSize.call(carousel, "height");

                itemsRow = Math.floor(pos/itemsPerRow);

                sentinel = (page - 1) * itemsPerCol;

                delta = itemsRow - sentinel;

                top = delta * sz;

                styles.top  = top + "px";

            }

        } else {

            if (isVertical) {

                styles.left = 0;

                styles.top  = ((pos * sz) + rsz) + "px";

            } else {

                styles.top  = 0;

                styles.left = ((pos * sz) + rsz) + "px";

            }

        }

        return styles;

    }

    /**

     * Return the index of the first item in the view port for displaying item

     * in "pos".

     *

     * @method getFirstVisibleForPosition

     * @param pos {Number} The position of the item to be displayed

     * @private

     */

    function getFirstVisibleForPosition(pos) {

        var num = this.get("numVisible");

        return Math.floor(pos / num) * num;

    }

    /**

     * Return the scrolling offset size given the number of elements to

     * scroll.

     *

     * @method getScrollOffset

     * @param delta {Number} The delta number of elements to scroll by.

     * @private

     */

    function getScrollOffset(delta) {

        var carousel = this,

            itemSize = 0,

            size     = 0,

            attr     = carousel.get("isVertical") ? "height" : "width";

        itemSize = getCarouselItemSize.call(carousel, attr);

        size = itemSize * delta;

        return size;

    }

    /**

     * Scroll the Carousel by a page backward.

     *

     * @method scrollPageBackward

     * @param {Event} ev The event object

     * @param {Object} obj The context object

     * @private

     */

    function scrollPageBackward(ev, obj) {

        obj.scrollPageBackward();

        Event.preventDefault(ev);

    }

    /**

     * Scroll the Carousel by a page forward.

     *

     * @method scrollPageForward

     * @param {Event} ev The event object

     * @param {Object} obj The context object

     * @private

     */

    function scrollPageForward(ev, obj) {

        obj.scrollPageForward();

        Event.preventDefault(ev);

    }

    /**

     * Set the selected item.

     *

     * @method setItemSelection

     * @param {Number} newpos The index of the new position

     * @param {Number} oldpos The index of the previous position

     * @private

     */

     function setItemSelection(newpos, oldpos) {

        var carousel = this,

            cssClass   = carousel.CLASSES,

            el,

            firstItem  = carousel._firstItem,

            numItems   = carousel.get("numItems"),

            numVisible = carousel.get("numVisible"),

            position   = oldpos,

            sentinel   = firstItem + numVisible - 1;

        if (position >= 0 && position < numItems) {

            if (!JS.isUndefined(carousel._itemsTable.items[position])) {

                el = Dom.get(carousel._itemsTable.items[position].id);

                if (el) {

                    Dom.removeClass(el, cssClass.SELECTED_ITEM);

                }

            }

        }

        if (JS.isNumber(newpos)) {

            newpos = parseInt(newpos, 10);

            newpos = JS.isNumber(newpos) ? newpos : 0;

        } else {

            newpos = firstItem;

        }

        if (JS.isUndefined(carousel._itemsTable.items[newpos])) {

            newpos = getFirstVisibleForPosition.call(carousel, newpos);

            carousel.scrollTo(newpos); // still loading the item

        }

        if (!JS.isUndefined(carousel._itemsTable.items[newpos])) {

            el = Dom.get(carousel._itemsTable.items[newpos].id);

            if (el) {

                Dom.addClass(el, cssClass.SELECTED_ITEM);

            }

        }

        if (newpos < firstItem || newpos > sentinel) { // out of focus

            newpos = getFirstVisibleForPosition.call(carousel, newpos);

            carousel.scrollTo(newpos);

        }

    }

    /**

     * Show or hide navigation.

     *

     * @method showNavigation

     * @private

     */

    function showNavigation(hide) {

        var carousel = this,

            cfg = carousel.get("navigation");

        if (JS.isUndefined(cfg)) {

            return; // can't do anything

        }

        if (JS.isUndefined(hide)) {

            // show the navigation

            if (!JS.isUndefined(cfg.prev) && JS.isArray(cfg.prev) &&

                !JS.isUndefined(cfg.prev[0])) {

                Dom.setStyle(cfg.prev[0], "visibility", "visible");

            }

            if (!JS.isUndefined(cfg.next) && JS.isArray(cfg.next) &&

                !JS.isUndefined(cfg.next[0])) {

                Dom.setStyle(cfg.next[0], "visibility", "visible");

            }

            if (!JS.isUndefined(carousel._pages) &&

                !JS.isUndefined(carousel._pages.el)) {

                Dom.setStyle(carousel._pages.el, "visibility", "visible");

            }

        } else {

            // hide the navigation

            if (!JS.isUndefined(cfg.prev) && JS.isArray(cfg.prev) &&

                !JS.isUndefined(cfg.prev[0])) {

                Dom.setStyle(cfg.prev[0], "visibility", "hidden");

            }

            if (!JS.isUndefined(cfg.next) && JS.isArray(cfg.next) &&

                !JS.isUndefined(cfg.next[0])) {

                Dom.setStyle(cfg.next[0], "visibility", "hidden");

            }

            if (!JS.isUndefined(carousel._pages) &&

                !JS.isUndefined(carousel._pages.el)) {

                Dom.setStyle(carousel._pages.el, "visibility", "hidden");

            }

        }

    }

    /**

     * Fire custom events for enabling/disabling navigation elements.

     *

     * @method syncNavigation

     * @private

     */

    function syncNavigation() {

        var attach   = false,

            carousel = this,

            cssClass = carousel.CLASSES,

            i,

            navigation,

            sentinel;

        // Don't do anything if the Carousel is not rendered

        if (!carousel._hasRendered) {

            return;

        }

        navigation = carousel.get("navigation");

        sentinel   = carousel._firstItem + carousel.get("numVisible");

        if (navigation.prev) {

            if (carousel.get("numItems") === 0 || carousel._firstItem === 0) {

                if (carousel.get("numItems") === 0 ||

                   !carousel.get("isCircular")) {

                    Event.removeListener(navigation.prev, "click",

                            scrollPageBackward);

                    Dom.addClass(navigation.prev, cssClass.FIRST_NAV_DISABLED);

                    for (i = 0; i < carousel._navBtns.prev.length; i++) {

                        carousel._navBtns.prev[i].setAttribute("disabled",

                                "true");

                    }

                    carousel._prevEnabled = false;

                } else {

                    attach = !carousel._prevEnabled;

                }

            } else {

                attach = !carousel._prevEnabled;

            }

            if (attach) {

                Event.on(navigation.prev, "click", scrollPageBackward,

                         carousel);

                Dom.removeClass(navigation.prev, cssClass.FIRST_NAV_DISABLED);

                for (i = 0; i < carousel._navBtns.prev.length; i++) {

                    carousel._navBtns.prev[i].removeAttribute("disabled");

                }

                carousel._prevEnabled = true;

            }

        }

        attach = false;

        if (navigation.next) {

            if (sentinel >= carousel.get("numItems")) {

                if (!carousel.get("isCircular")) {

                    Event.removeListener(navigation.next, "click",

                            scrollPageForward);

                    Dom.addClass(navigation.next, cssClass.DISABLED);

                    for (i = 0; i < carousel._navBtns.next.length; i++) {

                        carousel._navBtns.next[i].setAttribute("disabled",

                                "true");

                    }

                    carousel._nextEnabled = false;

                } else {

                    attach = !carousel._nextEnabled;

                }

            } else {

                attach = !carousel._nextEnabled;

            }

            if (attach) {

                Event.on(navigation.next, "click", scrollPageForward,

                         carousel);

                Dom.removeClass(navigation.next, cssClass.DISABLED);

                for (i = 0; i < carousel._navBtns.next.length; i++) {

                    carousel._navBtns.next[i].removeAttribute("disabled");

                }

                carousel._nextEnabled = true;

            }

        }

        carousel.fireEvent(navigationStateChangeEvent,

                { next: carousel._nextEnabled, prev: carousel._prevEnabled });

    }

    /**

     * Synchronize and redraw the Pager UI if necessary.

     *

     * @method syncPagerUi

     * @private

     */

    function syncPagerUi(page) {

        var carousel = this, numPages, numVisible;

        // Don't do anything if the Carousel is not rendered

        if (!carousel._hasRendered) {

            return;

        }

        numVisible = carousel.get("numVisible");

        if (!JS.isNumber(page)) {

            page = Math.floor(carousel.get("selectedItem") / numVisible);

        }

        numPages = Math.ceil(carousel.get("numItems") / numVisible);

        carousel._pages.num = numPages;

        carousel._pages.cur = page;

        if (numPages > carousel.CONFIG.MAX_PAGER_BUTTONS) {

            carousel._updatePagerMenu();

        } else {

            carousel._updatePagerButtons();

        }

    }

    /**

     * Get full dimensions of an element.

     *

     * @method getDimensions

     * @param {Object} el The element to get the dimensions of

     * @param {String} which Get the height or width of an element

     * @private

     */

    function getDimensions(el, which) {

        switch (which) {

        case 'height':

            return  getStyle(el, "marginTop")        +

                    getStyle(el, "marginBottom")     +

                    getStyle(el, "paddingTop")       +

                    getStyle(el, "paddingBottom")    +

                    getStyle(el, "borderTopWidth")   +

                    getStyle(el, "borderBottomWidth");

        case 'width':

            return   getStyle(el, "marginLeft")      +

                     getStyle(el, "marginRight")     +

                     getStyle(el, "paddingLeft")     +

                     getStyle(el, "paddingRight")    +

                     getStyle(el, "borderLeftWidth") +

                     getStyle(el, "borderRightWidth");

        default:

            break;

        }

        return getStyle(el, which);

    }

    /**

     * Handle UI update.

     * Call the appropriate methods on events fired when an item is added, or

     * removed for synchronizing the DOM.

     *

     * @method syncUi

     * @param {Object} o The item that needs to be added or removed

     * @private

     */

    function syncUi(o) {

        var carousel = this;

        if (!JS.isObject(o)) {

            return;

        }

        switch (o.ev) {

        case itemAddedEvent:

            carousel._syncUiForItemAdd(o);

            break;

        case itemRemovedEvent:

            carousel._syncUiForItemRemove(o);

            break;

        case itemReplacedEvent:

            carousel._syncUiForItemReplace(o);

            break;

        case loadItemsEvent:

            carousel._syncUiForLazyLoading(o);

            break;

        }

        carousel.fireEvent(uiUpdateEvent);

    }

    /**

     * Update the state variables after scrolling the Carousel view port.

     *

     * @method updateStateAfterScroll

     * @param {Integer} item The index to which the Carousel has scrolled to.

     * @param {Integer} sentinel The last element in the view port.

     * @private

     */

    function updateStateAfterScroll(item, sentinel) {

        var carousel   = this,

            page       = carousel.get("currentPage"),

            newPage,

            numPerPage = carousel.get("numVisible");

        newPage = parseInt(carousel._firstItem / numPerPage, 10);

        if (newPage != page) {

            carousel.setAttributeConfig("currentPage", { value: newPage });

            carousel.fireEvent(pageChangeEvent, newPage);

        }

        if (carousel.get("selectOnScroll")) {

            if (carousel.get("selectedItem") != carousel._selectedItem) {

                carousel.set("selectedItem", carousel._selectedItem);

            }

        }

        clearTimeout(carousel._autoPlayTimer);

        delete carousel._autoPlayTimer;

        if (carousel.isAutoPlayOn()) {

            carousel.startAutoPlay();

        }

        carousel.fireEvent(afterScrollEvent,

                           { first: carousel._firstItem,

                             last: sentinel },

                           carousel);

    }

    /*

     * Static members and methods of the Carousel component

     */

    /**

     * Return the appropriate Carousel object based on the id associated with

     * the Carousel element or false if none match.

     * @method getById

     * @public

     * @static

     */

    Carousel.getById = function (id) {

        return instances[id] ? instances[id].object : false;

    };

    YAHOO.extend(Carousel, YAHOO.util.Element, {

        /*

         * Internal variables used within the Carousel component

         */

         /**

         * Number of rows for a multirow carousel.

         *

         * @property _rows

         * @private

         */

        _rows: null,

        /**

         * Number of cols for a multirow carousel.

         *

         * @property _cols

         * @private

         */

        _cols: null,

        /**

         * The Animation object.

         *