YUI.add('datatable-scroll', function (Y, NAME) {

/**

Adds the ability to make the table rows scrollable while preserving the header

placement.

@module datatable-scroll

@for DataTable

@since 3.5.0

**/

var YLang = Y.Lang,

    isString = YLang.isString,

    isNumber = YLang.isNumber,

    isArray  = YLang.isArray,

    Scrollable;

// Returns the numeric value portion of the computed style, defaulting to 0

function styleDim(node, style) {

    return parseInt(node.getComputedStyle(style), 10) || 0;

}

/**

_API docs for this extension are included in the DataTable class._

Adds the ability to make the table rows scrollable while preserving the header

placement.

There are two types of scrolling, horizontal (x) and vertical (y).  Horizontal

scrolling is achieved by wrapping the entire table in a scrollable container.

Vertical scrolling is achieved by splitting the table headers and data into two

separate tables, the latter of which is wrapped in a vertically scrolling

container.  In this case, column widths of header cells and data cells are kept

in sync programmatically.

Since the split table synchronization can be costly at runtime, the split is only

done if the data in the table stretches beyond the configured `height` value.

To activate or deactivate scrolling, set the `scrollable` attribute to one of

the following values:

 * `false` - (default) Scrolling is disabled.

 * `true` or 'xy' - If `height` is set, vertical scrolling will be activated, if

            `width` is set, horizontal scrolling will be activated.

 * 'x' - Activate horizontal scrolling only. Requires the `width` attribute is

         also set.

 * 'y' - Activate vertical scrolling only. Requires the `height` attribute is

         also set.

@class DataTable.Scrollable

@for DataTable

@since 3.5.0

**/

Y.DataTable.Scrollable = Scrollable = function () {};

Scrollable.ATTRS = {

    /**

    Activates or deactivates scrolling in the table.  Acceptable values are:

     * `false` - (default) Scrolling is disabled.

     * `true` or 'xy' - If `height` is set, vertical scrolling will be

       activated, if `width` is set, horizontal scrolling will be activated.

     * 'x' - Activate horizontal scrolling only. Requires the `width` attribute

       is also set.

     * 'y' - Activate vertical scrolling only. Requires the `height` attribute

       is also set.

    @attribute scrollable

    @type {String|Boolean}

    @value false

    @since 3.5.0

    **/

    scrollable: {

        value: false,

        setter: '_setScrollable'

    }

};

Y.mix(Scrollable.prototype, {

    /**

    Scrolls a given row or cell into view if the table is scrolling.  Pass the

    `clientId` of a Model from the DataTable's `data` ModelList or its row

    index to scroll to a row or a [row index, column index] array to scroll to

    a cell.  Alternately, to scroll to any element contained within the table's

    scrolling areas, pass its ID, or the Node itself (though you could just as

    well call `node.scrollIntoView()` yourself, but hey, whatever).

    @method scrollTo

    @param {String|Number|Number[]|Node} id A row clientId, row index, cell

            coordinate array, id string, or Node

    @return {DataTable}

    @chainable

    @since 3.5.0

    **/

    scrollTo: function (id) {

        var target;

        if (id && this._tbodyNode && (this._yScrollNode || this._xScrollNode)) {

            if (isArray(id)) {

                target = this.getCell(id);

            } else if (isNumber(id)) {

                target = this.getRow(id);

            } else if (isString(id)) {

                target = this._tbodyNode.one('#' + id);

            } else if (id instanceof Y.Node &&

                    // TODO: ancestor(yScrollNode, xScrollNode)

                    id.ancestor('.yui3-datatable') === this.get('boundingBox')) {

                target = id;

            }

            if(target) {

                target.scrollIntoView();

            }

        }

        return this;

    },

    //--------------------------------------------------------------------------

    // Protected properties and methods

    //--------------------------------------------------------------------------

    /**

    Template for the `<table>` that is used to fix the caption in place when

    the table is horizontally scrolling.

    @property _CAPTION_TABLE_TEMPLATE

    @type {String}

    @value '<table class="{className}" role="presentation"></table>'

    @protected

    @since 3.5.0

    **/

    _CAPTION_TABLE_TEMPLATE: '<table class="{className}" role="presentation"></table>',

    /**

    Template used to create sizable element liners around header content to

    synchronize fixed header column widths.

    @property _SCROLL_LINER_TEMPLATE

    @type {String}

    @value '<div class="{className}"></div>'

    @protected

    @since 3.5.0

    **/

    _SCROLL_LINER_TEMPLATE: '<div class="{className}"></div>',

    /**

    Template for the virtual scrollbar needed in "y" and "xy" scrolling setups.

    @property _SCROLLBAR_TEMPLATE

    @type {String}

    @value '<div class="{className}"><div></div></div>'

    @protected

    @since 3.5.0

    **/

    _SCROLLBAR_TEMPLATE: '<div class="{className}"><div></div></div>',

    /**

    Template for the `<div>` that is used to contain the table when the table is

    horizontally scrolling.

    @property _X_SCROLLER_TEMPLATE

    @type {String}

    @value '<div class="{className}"></div>'

    @protected

    @since 3.5.0

    **/

    _X_SCROLLER_TEMPLATE: '<div class="{className}"></div>',

    /**

    Template for the `<table>` used to contain the fixed column headers for

    vertically scrolling tables.

    @property _Y_SCROLL_HEADER_TEMPLATE

    @type {String}

    @value '<table cellspacing="0" role="presentation" aria-hidden="true" class="{className}"></table>'

    @protected

    @since 3.5.0

    **/

    _Y_SCROLL_HEADER_TEMPLATE: '<table cellspacing="0" aria-hidden="true" class="{className}"></table>',

    /**

    Template for the `<div>` that is used to contain the rows when the table is

    vertically scrolling.

    @property _Y_SCROLLER_TEMPLATE

    @type {String}

    @value '<div class="{className}"><div class="{scrollerClassName}"></div></div>'

    @protected

    @since 3.5.0

    **/

    _Y_SCROLLER_TEMPLATE: '<div class="{className}"><div class="{scrollerClassName}"></div></div>',

    /**

    Adds padding to the last cells in the fixed header for vertically scrolling

    tables.  This padding is equal in width to the scrollbar, so can't be

    relegated to a stylesheet.

    @method _addScrollbarPadding

    @protected

    @since 3.5.0

    **/

    _addScrollbarPadding: function () {

        var fixedHeader = this._yScrollHeader,

            headerClass = '.' + this.getClassName('header'),

            scrollbarWidth, rows, header, i, len;

        if (fixedHeader) {

            scrollbarWidth = Y.DOM.getScrollbarWidth() + 'px';

            rows = fixedHeader.all('tr');

            for (i = 0, len = rows.size(); i < len; i += +header.get('rowSpan')) {

                header = rows.item(i).all(headerClass).pop();

                header.setStyle('paddingRight', scrollbarWidth);

            }

        }

    },

    /**

    Reacts to changes in the `scrollable` attribute by updating the `_xScroll`

    and `_yScroll` properties and syncing the scrolling structure accordingly.

    @method _afterScrollableChange

    @param {EventFacade} e The relevant change event (ignored)

    @protected

    @since 3.5.0

    **/

    _afterScrollableChange: function () {

        var scroller = this._xScrollNode;

        if (this._xScroll && scroller) {

            if (this._yScroll && !this._yScrollNode) {

                scroller.setStyle('paddingRight',

                    Y.DOM.getScrollbarWidth() + 'px');

            } else if (!this._yScroll && this._yScrollNode) {

                scroller.setStyle('paddingRight', '');

            }

        }

        this._syncScrollUI();

    },

    /**

    Reacts to changes in the `caption` attribute by adding, removing, or

    syncing the caption table when the table is set to scroll.

    @method _afterScrollCaptionChange

    @param {EventFacade} e The relevant change event (ignored)

    @protected

    @since 3.5.0

    **/

    _afterScrollCaptionChange: function () {

        if (this._xScroll || this._yScroll) {

            this._syncScrollUI();

        }

    },

    /**

    Reacts to changes in the `columns` attribute of vertically scrolling tables

    by refreshing the fixed headers, scroll container, and virtual scrollbar

    position.

    @method _afterScrollColumnsChange

    @param {EventFacade} e The relevant change event (ignored)

    @protected

    @since 3.5.0

    **/

    _afterScrollColumnsChange: function () {

        if (this._xScroll || this._yScroll) {

            if (this._yScroll && this._yScrollHeader) {

                this._syncScrollHeaders();

            }

            this._syncScrollUI();

        }

    },

    /**

    Reacts to changes in vertically scrolling table's `data` ModelList by

    synchronizing the fixed column header widths and virtual scrollbar height.

    @method _afterScrollDataChange

    @param {EventFacade} e The relevant change event (ignored)

    @protected

    @since 3.5.0

    **/

    _afterScrollDataChange: function () {

        if (this._xScroll || this._yScroll) {

            this._syncScrollUI();

        }

    },

    /**

    Reacts to changes in the `height` attribute of vertically scrolling tables

    by updating the height of the `<div>` wrapping the data table and the

    virtual scrollbar.  If `scrollable` was set to "y" or "xy" but lacking a

    declared `height` until the received change, `_syncScrollUI` is called to

    create the fixed headers etc.

    @method _afterScrollHeightChange

    @param {EventFacade} e The relevant change event (ignored)

    @protected

    @since 3.5.0

    **/

    _afterScrollHeightChange: function () {

        if (this._yScroll) {

            this._syncScrollUI();

        }

    },

    /* (not an API doc comment on purpose)

    Reacts to the sort event (if the table is also sortable) by updating the

    fixed header classes to match the data table's headers.

    THIS IS A HACK that will be removed immediately after the 3.5.0 release.

    If you're reading this and the current version is greater than 3.5.0, I

    should be publicly scolded.

    */

    _afterScrollSort: function () {

        var headers, headerClass;

        if (this._yScroll && this._yScrollHeader) {

            headerClass = '.' + this.getClassName('header');

            headers = this._theadNode.all(headerClass);

            this._yScrollHeader.all(headerClass).each(function (header, i) {

                header.set('className', headers.item(i).get('className'));

            });

        }

    },

    /**

    Reacts to changes in the width of scrolling tables by expanding the width of

    the `<div>` wrapping the data table for horizontally scrolling tables or

    upding the position of the virtual scrollbar for vertically scrolling

    tables.

    @method _afterScrollWidthChange

    @param {EventFacade} e The relevant change event (ignored)

    @protected

    @since 3.5.0

    **/

    _afterScrollWidthChange: function () {

        if (this._xScroll || this._yScroll) {

            this._syncScrollUI();

        }

    },

    /**

    Binds virtual scrollbar interaction to the `_yScrollNode`'s `scrollTop` and

    vice versa.

    @method _bindScrollbar

    @protected

    @since 3.5.0

    **/

    _bindScrollbar: function () {

        var scrollbar = this._scrollbarNode,

            scroller  = this._yScrollNode;

        if (scrollbar && scroller && !this._scrollbarEventHandle) {

            this._scrollbarEventHandle = new Y.Event.Handle([

                scrollbar.on('scroll', this._syncScrollPosition, this),

                scroller.on('scroll', this._syncScrollPosition, this)

            ]);

        }

    },

    /**

    Binds to the window resize event to update the vertical scrolling table

    headers and wrapper `<div>` dimensions.

    @method _bindScrollResize

    @protected

    @since 3.5.0

    **/

    _bindScrollResize: function () {

        if (!this._scrollResizeHandle) {

            // TODO: sync header widths and scrollbar position.  If the height

            // of the headers has changed, update the scrollbar dims as well.

            this._scrollResizeHandle = Y.on('resize',

                this._syncScrollUI, null, this);

        }

    },

    /**

    Attaches internal subscriptions to keep the scrolling structure up to date

    with changes in the table's `data`, `columns`, `caption`, or `height`.  The

    `width` is taken care of already.

    This executes after the table's native `bindUI` method.

    @method _bindScrollUI

    @protected

    @since 3.5.0

    **/

    _bindScrollUI: function () {

        this.after({

            columnsChange: Y.bind('_afterScrollColumnsChange', this),

            heightChange : Y.bind('_afterScrollHeightChange', this),

            widthChange  : Y.bind('_afterScrollWidthChange', this),

            captionChange: Y.bind('_afterScrollCaptionChange', this),

            scrollableChange: Y.bind('_afterScrollableChange', this),

            // FIXME: this is a last minute hack to work around the fact that

            // DT doesn't use a tableView to render table content that can be

            // replaced with a scrolling table view.  This must be removed asap!

            sort         : Y.bind('_afterScrollSort', this)

        });

        this.after(['dataChange', '*:add', '*:remove', '*:reset', '*:change'],

            Y.bind('_afterScrollDataChange', this));

    },

    /**

    Clears the lock and timer used to manage synchronizing the scroll position

    between the vertical scroll container and the virtual scrollbar.

    @method _clearScrollLock

    @protected

    @since 3.5.0

    **/

    _clearScrollLock: function () {

        if (this._scrollLock) {

            this._scrollLock.cancel();

            delete this._scrollLock;

        }

    },