/*Copyright (c) 2008, Yahoo! Inc. All rights reserved.Code licensed under the BSD License:http://developer.yahoo.net/yui/license.txtversion: 2.6.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;             // 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.log("Component creation", WidgetName);        this._navBtns = {};        this._pages = {};        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 widget name.     * @private     * @static     */    WidgetName = "Carousel";    /**     * The internal table of Carousel instances.     * @private     * @static     */    var instances = {};    /*     * 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     */    var afterScrollEvent = "afterScroll";    /**     * @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     */    var 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     */    var 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     */    var 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     */    var 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     */    var 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     */    var 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     */    var 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     */    var 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     */    var itemRemovedEvent = "itemRemoved";    /**     * @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     */    var 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     */    var 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     */    var 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     */    var pageChangeEvent = "pageChange";    /**     * @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     */    var 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     */    var 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     */    var 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     */    var stopAutoPlayEvent = "stopAutoPlay";    /*     * Private helper functions used by the Carousel component     */    /**     * Automatically scroll the contents of the Carousel.     * @method autoScroll     * @private     */    function autoScroll() {        var currIndex = this._firstItem,            index;        if (currIndex >= this.get("numItems") - 1) {            if (this.get("isCircular")) {                index = 0;            } else {                this.stopAutoPlay();            }        } else {            index = currIndex + this.get("numVisible");        }        this.scrollTo.call(this, index);    }    /**     * 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.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;        function getStyleIntVal(el, style) {            var val;            val = parseInt(Dom.getStyle(el, style), 10);            return JS.isNumber(val) ? val : 0;        }        function getStyleFloatVal(el, style) {            var val;            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);                // 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) {                    value = getStyleIntVal(el, "marginLeft");                }            } 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 child,