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

/**

View class responsible for rendering the `<tbody>` section of a table. Used as

the default `bodyView` for `Y.DataTable.Base` and `Y.DataTable` classes.

@module datatable

@submodule datatable-body

@since 3.5.0

**/

var Lang             = Y.Lang,

    isArray          = Lang.isArray,

    isNumber         = Lang.isNumber,

    isString         = Lang.isString,

    fromTemplate     = Lang.sub,

    htmlEscape       = Y.Escape.html,

    toArray          = Y.Array,

    bind             = Y.bind,

    YObject          = Y.Object,

    valueRegExp      = /\{value\}/g,

    EV_CONTENT_UPDATE = 'contentUpdate';

/**

View class responsible for rendering the `<tbody>` section of a table. Used as

the default `bodyView` for `Y.DataTable.Base` and `Y.DataTable` classes.

Translates the provided `modelList` into a rendered `<tbody>` based on the data

in the constituent Models, altered or amended by any special column

configurations.

The `columns` configuration, passed to the constructor, determines which

columns will be rendered.

The rendering process involves constructing an HTML template for a complete row

of data, built by concatenating a customized copy of the instance's

`CELL_TEMPLATE` into the `ROW_TEMPLATE` once for each column.  This template is

then populated with values from each Model in the `modelList`, aggregating a

complete HTML string of all row and column data.  A `<tbody>` Node is then created from the markup and any column `nodeFormatter`s are applied.

Supported properties of the column objects include:

  * `key` - Used to link a column to an attribute in a Model.

  * `name` - Used for columns that don't relate to an attribute in the Model

    (`formatter` or `nodeFormatter` only) if the implementer wants a

    predictable name to refer to in their CSS.

  * `cellTemplate` - Overrides the instance's `CELL_TEMPLATE` for cells in this

    column only.

  * `formatter` - Used to customize or override the content value from the

    Model.  These do not have access to the cell or row Nodes and should

    return string (HTML) content.

  * `nodeFormatter` - Used to provide content for a cell as well as perform any

    custom modifications on the cell or row Node that could not be performed by

    `formatter`s.  Should be used sparingly for better performance.

  * `emptyCellValue` - String (HTML) value to use if the Model data for a

    column, or the content generated by a `formatter`, is the empty string,

    `null`, or `undefined`.

  * `allowHTML` - Set to `true` if a column value, `formatter`, or

    `emptyCellValue` can contain HTML.  This defaults to `false` to protect

    against XSS.

  * `className` - Space delimited CSS classes to add to all `<td>`s in a column.

A column `formatter` can be:

  * a function, as described below.

  * a string which can be:

      * the name of a pre-defined formatter function

        which can be located in the `Y.DataTable.BodyView.Formatters` hash using the

        value of the `formatter` property as the index.

      * A template that can use the `{value}` placeholder to include the value

        for the current cell or the name of any field in the underlaying model

        also enclosed in curly braces.  Any number and type of these placeholders

        can be used.

Column `formatter`s are passed an object (`o`) with the following properties:

  * `value` - The current value of the column's associated attribute, if any.

  * `data` - An object map of Model keys to their current values.

  * `record` - The Model instance.

  * `column` - The column configuration object for the current column.

  * `className` - Initially empty string to allow `formatter`s to add CSS

    classes to the cell's `<td>`.

  * `rowIndex` - The zero-based row number.

  * `rowClass` - Initially empty string to allow `formatter`s to add CSS

    classes to the cell's containing row `<tr>`.

They may return a value or update `o.value` to assign specific HTML content.  A

returned value has higher precedence.

Column `nodeFormatter`s are passed an object (`o`) with the following

properties:

  * `value` - The current value of the column's associated attribute, if any.

  * `td` - The `<td>` Node instance.

  * `cell` - The `<div>` liner Node instance if present, otherwise, the `<td>`.

    When adding content to the cell, prefer appending into this property.

  * `data` - An object map of Model keys to their current values.

  * `record` - The Model instance.

  * `column` - The column configuration object for the current column.

  * `rowIndex` - The zero-based row number.

They are expected to inject content into the cell's Node directly, including

any "empty" cell content.  Each `nodeFormatter` will have access through the

Node API to all cells and rows in the `<tbody>`, but not to the `<table>`, as

it will not be attached yet.

If a `nodeFormatter` returns `false`, the `o.td` and `o.cell` Nodes will be

`destroy()`ed to remove them from the Node cache and free up memory.  The DOM

elements will remain as will any content added to them.  _It is highly

advisable to always return `false` from your `nodeFormatter`s_.

@class BodyView

@namespace DataTable

@extends View

@since 3.5.0

**/

Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {

    // -- Instance properties -------------------------------------------------

    /**

    HTML template used to create table cells.

    @property CELL_TEMPLATE

    @type {String}

    @default '<td {headers} class="{className}">{content}</td>'

    @since 3.5.0

    **/

    CELL_TEMPLATE: '<td {headers} class="{className}">{content}</td>',

    /**

    CSS class applied to even rows.  This is assigned at instantiation.

    For DataTable, this will be `yui3-datatable-even`.

    @property CLASS_EVEN

    @type {String}

    @default 'yui3-table-even'

    @since 3.5.0

    **/

    //CLASS_EVEN: null

    /**

    CSS class applied to odd rows.  This is assigned at instantiation.

    When used by DataTable instances, this will be `yui3-datatable-odd`.

    @property CLASS_ODD

    @type {String}

    @default 'yui3-table-odd'

    @since 3.5.0

    **/

    //CLASS_ODD: null

    /**

    HTML template used to create table rows.

    @property ROW_TEMPLATE

    @type {String}

    @default '<tr id="{rowId}" data-yui3-record="{clientId}" class="{rowClass}">{content}</tr>'

    @since 3.5.0

    **/

    ROW_TEMPLATE : '<tr id="{rowId}" data-yui3-record="{clientId}" class="{rowClass}">{content}</tr>',

    /**

    The object that serves as the source of truth for column and row data.

    This property is assigned at instantiation from the `host` property of

    the configuration object passed to the constructor.

    @property host

    @type {Object}

    @default (initially unset)

    @since 3.5.0

    **/

    //TODO: should this be protected?

    //host: null,

    /**

    HTML templates used to create the `<tbody>` containing the table rows.

    @property TBODY_TEMPLATE

    @type {String}

    @default '<tbody class="{className}">{content}</tbody>'

    @since 3.6.0

    **/

    TBODY_TEMPLATE: '<tbody class="{className}"></tbody>',

    // -- Public methods ------------------------------------------------------

    /**

    Returns the `<td>` Node from the given row and column index.  Alternately,

    the `seed` can be a Node.  If so, the nearest ancestor cell is returned.

    If the `seed` is a cell, it is returned.  If there is no cell at the given

    coordinates, `null` is returned.

    Optionally, include an offset array or string to return a cell near the

    cell identified by the `seed`.  The offset can be an array containing the

    number of rows to shift followed by the number of columns to shift, or one

    of "above", "below", "next", or "previous".

    <pre><code>// Previous cell in the previous row

    var cell = table.getCell(e.target, [-1, -1]);

    // Next cell

    var cell = table.getCell(e.target, 'next');

    var cell = table.getCell(e.target, [0, 1];</pre></code>

    @method getCell

    @param {Number[]|Node} seed Array of row and column indexes, or a Node that

        is either the cell itself or a descendant of one.

    @param {Number[]|String} [shift] Offset by which to identify the returned

        cell Node

    @return {Node}

    @since 3.5.0

    **/

    getCell: function (seed, shift) {

        var tbody = this.tbodyNode,

            row, cell, index, rowIndexOffset;

        if (seed && tbody) {

            if (isArray(seed)) {

                row = tbody.get('children').item(seed[0]);

                cell = row && row.get('children').item(seed[1]);

            } else if (Y.instanceOf(seed, Y.Node)) {

                cell = seed.ancestor('.' + this.getClassName('cell'), true);

            }

            if (cell && shift) {

                rowIndexOffset = tbody.get('firstChild.rowIndex');

                if (isString(shift)) {

                    // TODO this should be a static object map

                    switch (shift) {

                        case 'above'   : shift = [-1, 0]; break;

                        case 'below'   : shift = [1, 0]; break;

                        case 'next'    : shift = [0, 1]; break;

                        case 'previous': shift = [0, -1]; break;

                    }

                }

                if (isArray(shift)) {

                    index = cell.get('parentNode.rowIndex') +

                                shift[0] - rowIndexOffset;

                    row   = tbody.get('children').item(index);

                    index = cell.get('cellIndex') + shift[1];

                    cell  = row && row.get('children').item(index);

                }

            }

        }

        return cell || null;

    },

    /**

    Returns the generated CSS classname based on the input.  If the `host`

    attribute is configured, it will attempt to relay to its `getClassName`

    or use its static `NAME` property as a string base.

    If `host` is absent or has neither method nor `NAME`, a CSS classname

    will be generated using this class's `NAME`.

    @method getClassName

    @param {String} token* Any number of token strings to assemble the

        classname from.

    @return {String}

    @protected

    @since 3.5.0

    **/

    getClassName: function () {

        var host = this.host,

            args;

        if (host && host.getClassName) {

            return host.getClassName.apply(host, arguments);

        } else {

            args = toArray(arguments);

            args.unshift(this.constructor.NAME);

            return Y.ClassNameManager.getClassName

                .apply(Y.ClassNameManager, args);

        }

    },

    /**

    Returns the Model associated to the row Node or id provided. Passing the

    Node or id for a descendant of the row also works.

    If no Model can be found, `null` is returned.

    @method getRecord

    @param {String|Node} seed Row Node or `id`, or one for a descendant of a row

    @return {Model}

    @since 3.5.0

    **/

    getRecord: function (seed) {

        var modelList = this.get('modelList'),

            tbody     = this.tbodyNode,

            row       = null,

            record;

        if (tbody) {

            if (isString(seed)) {

                seed = tbody.one('#' + seed);

            }

            if (Y.instanceOf(seed, Y.Node)) {

                row = seed.ancestor(function (node) {

                    return node.get('parentNode').compareTo(tbody);

                }, true);

                record = row &&

                    modelList.getByClientId(row.getData('yui3-record'));

            }

        }

        return record || null;

    },

    /**

    Returns the `<tr>` Node from the given row index, Model, or Model's

    `clientId`.  If the rows haven't been rendered yet, or if the row can't be

    found by the input, `null` is returned.

    @method getRow

    @param {Number|String|Model} id Row index, Model instance, or clientId

    @return {Node}

    @since 3.5.0

    **/

    getRow: function (id) {

        var tbody = this.tbodyNode,

            row = null;

        if (tbody) {

            if (id) {

                id = this._idMap[id.get ? id.get('clientId') : id] || id;

            }

            row = isNumber(id) ?

                tbody.get('children').item(id) :

                tbody.one('#' + id);

        }

        return row;

    },

    /**

    Creates the table's `<tbody>` content by assembling markup generated by

    populating the `ROW\_TEMPLATE`, and `CELL\_TEMPLATE` templates with content

    from the `columns` and `modelList` attributes.

    The rendering process happens in three stages:

    1. A row template is assembled from the `columns` attribute (see

       `_createRowTemplate`)

    2. An HTML string is built up by concatenating the application of the data in

       each Model in the `modelList` to the row template. For cells with

       `formatter`s, the function is called to generate cell content. Cells

       with `nodeFormatter`s are ignored. For all other cells, the data value

       from the Model attribute for the given column key is used.  The

       accumulated row markup is then inserted into the container.

    3. If any column is configured with a `nodeFormatter`, the `modelList` is

       iterated again to apply the `nodeFormatter`s.

    Supported properties of the column objects include:

      * `key` - Used to link a column to an attribute in a Model.

      * `name` - Used for columns that don't relate to an attribute in the Model

        (`formatter` or `nodeFormatter` only) if the implementer wants a

        predictable name to refer to in their CSS.

      * `cellTemplate` - Overrides the instance's `CELL_TEMPLATE` for cells in

        this column only.

      * `formatter` - Used to customize or override the content value from the

        Model.  These do not have access to the cell or row Nodes and should

        return string (HTML) content.

      * `nodeFormatter` - Used to provide content for a cell as well as perform

        any custom modifications on the cell or row Node that could not be

        performed by `formatter`s.  Should be used sparingly for better

        performance.

      * `emptyCellValue` - String (HTML) value to use if the Model data for a

        column, or the content generated by a `formatter`, is the empty string,

        `null`, or `undefined`.

      * `allowHTML` - Set to `true` if a column value, `formatter`, or

        `emptyCellValue` can contain HTML.  This defaults to `false` to protect

        against XSS.

      * `className` - Space delimited CSS classes to add to all `<td>`s in a

        column.

    Column `formatter`s are passed an object (`o`) with the following

    properties:

      * `value` - The current value of the column's associated attribute, if

        any.

      * `data` - An object map of Model keys to their current values.

      * `record` - The Model instance.

      * `column` - The column configuration object for the current column.

      * `className` - Initially empty string to allow `formatter`s to add CSS

        classes to the cell's `<td>`.

      * `rowIndex` - The zero-based row number.

      * `rowClass` - Initially empty string to allow `formatter`s to add CSS

        classes to the cell's containing row `<tr>`.

    They may return a value or update `o.value` to assign specific HTML

    content.  A returned value has higher precedence.

    Column `nodeFormatter`s are passed an object (`o`) with the following

    properties:

      * `value` - The current value of the column's associated attribute, if

        any.

      * `td` - The `<td>` Node instance.

      * `cell` - The `<div>` liner Node instance if present, otherwise, the

        `<td>`.  When adding content to the cell, prefer appending into this

        property.

      * `data` - An object map of Model keys to their current values.

      * `record` - The Model instance.

      * `column` - The column configuration object for the current column.

      * `rowIndex` - The zero-based row number.

    They are expected to inject content into the cell's Node directly, including

    any "empty" cell content.  Each `nodeFormatter` will have access through the

    Node API to all cells and rows in the `<tbody>`, but not to the `<table>`,

    as it will not be attached yet.

    If a `nodeFormatter` returns `false`, the `o.td` and `o.cell` Nodes will be

    `destroy()`ed to remove them from the Node cache and free up memory.  The

    DOM elements will remain as will any content added to them.  _It is highly

    advisable to always return `false` from your `nodeFormatter`s_.

    @method render

    @chainable

    @since 3.5.0

    **/

    render: function () {

        var table   = this.get('container'),

            data    = this.get('modelList'),

            displayCols = this.get('columns'),

            tbody   = this.tbodyNode ||

                      (this.tbodyNode = this._createTBodyNode());

        // Needed for mutation

        this._createRowTemplate(displayCols);

        if (data) {

            tbody.setHTML(this._createDataHTML(displayCols));