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

/**

View class responsible for rendering a `<table>` from provided data.  Used as

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

@module datatable

@submodule datatable-table

@since 3.6.0

**/

var toArray = Y.Array,

    YLang   = Y.Lang,

    fromTemplate = YLang.sub,

    isArray    = YLang.isArray,

    isFunction = YLang.isFunction;

/**

View class responsible for rendering a `<table>` from provided data.  Used as

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

@class TableView

@namespace DataTable

@extends View

@since 3.6.0

**/

Y.namespace('DataTable').TableView = Y.Base.create('table', Y.View, [], {

    /**

    The HTML template used to create the caption Node if the `caption`

    attribute is set.

    @property CAPTION_TEMPLATE

    @type {String}

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

    @since 3.6.0

    **/

    CAPTION_TEMPLATE: '<caption class="{className}"/>',

    /**

    The HTML template used to create the table Node.

    @property TABLE_TEMPLATE

    @type {String}

    @default '<table cellspacing="0" class="{className}"/>'

    @since 3.6.0

    **/

    TABLE_TEMPLATE  : '<table cellspacing="0" class="{className}"/>',

    /**

    The object or instance of the class assigned to `bodyView` that is

    responsible for rendering and managing the table's `<tbody>`(s) and its

    content.

    @property body

    @type {Object}

    @default undefined (initially unset)

    @since 3.5.0

    **/

    //body: null,

    /**

    The object or instance of the class assigned to `footerView` that is

    responsible for rendering and managing the table's `<tfoot>` and its

    content.

    @property foot

    @type {Object}

    @default undefined (initially unset)

    @since 3.5.0

    **/

    //foot: null,

    /**

    The object or instance of the class assigned to `headerView` that is

    responsible for rendering and managing the table's `<thead>` and its

    content.

    @property head

    @type {Object}

    @default undefined (initially unset)

    @since 3.5.0

    **/

    //head: null,

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

    // 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.taregt, [0, 1];</pre></code>

    This is actually just a pass through to the `bodyView` instance's method

    by the same name.

    @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 */) {

        return this.body && this.body.getCell &&

            this.body.getCell.apply(this.body, arguments);

    },

    /**

    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

    **/

    getClassName: function () {

        // TODO: add attr with setter for host?

        var host = this.host,

            NAME = (host && host.constructor.NAME) ||

                    this.constructor.NAME;

        if (host && host.getClassName) {

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

        } else {

            return Y.ClassNameManager.getClassName

                .apply(Y.ClassNameManager,

                       [NAME].concat(toArray(arguments, 0, true)));

        }

    },

    /**

    Relays call to the `bodyView`'s `getRecord` method if it has one.

    @method getRecord

    @param {String|Node} seed Node or identifier for a row or child element

    @return {Model}

    @since 3.6.0

    **/

    getRecord: function () {

        return this.body && this.body.getRecord &&

            this.body.getRecord.apply(this.body, arguments);

    },

    /**

    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.

    This is actually just a pass through to the `bodyView` instance's method

    by the same name.

    @method getRow

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

    @return {Node}

    @since 3.5.0

    **/

    getRow: function (/* id */) {

        return this.body && this.body.getRow &&

            this.body.getRow.apply(this.body, arguments);

    },

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

    // Protected and private methods

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

    /**

    Updates the table's `summary` attribute.

    @method _afterSummaryChange

    @param {EventHandle} e The change event

    @protected

    @since 3.6.0

    **/

    _afterSummaryChange: function (e) {

        this._uiSetSummary(e.newVal);

    },

    /**

    Updates the table's `<caption>`.

    @method _afterCaptionChange

    @param {EventHandle} e The change event

    @protected

    @since 3.6.0

    **/

    _afterCaptionChange: function (e) {

        this._uiSetCaption(e.newVal);

    },

    /**

    Updates the table's width.

    @method _afterWidthChange

    @param {EventHandle} e The change event

    @protected

    @since 3.6.0

    **/

    _afterWidthChange: function (e) {

        this._uiSetWidth(e.newVal);

    },

    /**

    Attaches event subscriptions to relay attribute changes to the child Views.

    @method _bindUI

    @protected

    @since 3.6.0

    **/

    _bindUI: function () {

        var relay;

        if (!this._eventHandles) {

            relay = Y.bind('_relayAttrChange', this);

            this._eventHandles = this.after({

                columnsChange  : relay,

                modelListChange: relay,

                summaryChange  : Y.bind('_afterSummaryChange', this),

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

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

            });

        }

    },

    /**

    Creates the `<table>`.

    @method _createTable

    @return {Node} The `<table>` node

    @protected

    @since 3.5.0

    **/

    _createTable: function () {

        return Y.Node.create(fromTemplate(this.TABLE_TEMPLATE, {

            className: this.getClassName('table')

        })).empty();

    },

    /**

    Calls `render()` on the `bodyView` class instance.

    @method _defRenderBodyFn

    @param {EventFacade} e The renderBody event

    @protected

    @since 3.5.0

    **/

    _defRenderBodyFn: function (e) {

        e.view.render();

    },

    /**

    Calls `render()` on the `footerView` class instance.

    @method _defRenderFooterFn

    @param {EventFacade} e The renderFooter event

    @protected

    @since 3.5.0

    **/

    _defRenderFooterFn: function (e) {

        e.view.render();

    },

    /**

    Calls `render()` on the `headerView` class instance.

    @method _defRenderHeaderFn

    @param {EventFacade} e The renderHeader event

    @protected

    @since 3.5.0

    **/

    _defRenderHeaderFn: function (e) {

        e.view.render();

    },

    /**

    Renders the `<table>` and, if there are associated Views, the `<thead>`,

    `<tfoot>`, and `<tbody>` (empty until `syncUI`).

    Assigns the generated table nodes to the `tableNode`, `_theadNode`,

    `_tfootNode`, and `_tbodyNode` properties.  Assigns the instantiated Views

    to the `head`, `foot`, and `body` properties.

    @method _defRenderTableFn

    @param {EventFacade} e The renderTable event

    @protected

    @since 3.5.0

    **/

    _defRenderTableFn: function (e) {

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

            attrs = this.getAttrs();

        if (!this.tableNode) {

            this.tableNode = this._createTable();

        }

        attrs.host  = this.get('host') || this;

        attrs.table = this;

        attrs.container = this.tableNode;

        this._uiSetCaption(this.get('caption'));

        this._uiSetSummary(this.get('summary'));

        this._uiSetWidth(this.get('width'));

        if (this.head || e.headerView) {

            if (!this.head) {

                this.head = new e.headerView(Y.merge(attrs, e.headerConfig));

            }

            this.fire('renderHeader', { view: this.head });

        }

        if (this.foot || e.footerView) {

            if (!this.foot) {

                this.foot = new e.footerView(Y.merge(attrs, e.footerConfig));

            }

            this.fire('renderFooter', { view: this.foot });

        }

        attrs.columns = this.displayColumns;

        if (this.body || e.bodyView) {

            if (!this.body) {

                this.body = new e.bodyView(Y.merge(attrs, e.bodyConfig));

            }

            this.fire('renderBody', { view: this.body });

        }

        if (!container.contains(this.tableNode)) {

            container.append(this.tableNode);

        }

        this._bindUI();

    },

    /**

    Cleans up state, destroys child views, etc.

    @method destructor

    @protected

    **/

    destructor: function () {

        if (this.head && this.head.destroy) {

            this.head.destroy();

        }

        delete this.head;

        if (this.foot && this.foot.destroy) {

            this.foot.destroy();

        }

        delete this.foot;

        if (this.body && this.body.destroy) {

            this.body.destroy();

        }

        delete this.body;

        if (this._eventHandles) {

            this._eventHandles.detach();

            delete this._eventHandles;

        }

        if (this.tableNode) {

            this.tableNode.remove().destroy(true);

        }

    },

    /**

    Processes the full column array, distilling the columns down to those that

    correspond to cell data columns.

    @method _extractDisplayColumns

    @protected

    **/

    _extractDisplayColumns: function () {

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

            displayColumns = [];

        function process(cols) {

            var i, len, col;

            for (i = 0, len = cols.length; i < len; ++i) {

                col = cols[i];

                if (isArray(col.children)) {

                    process(col.children);

                } else {

                    displayColumns.push(col);

                }

            }

        }

        if (columns) {

            process(columns);

        }

        /**

        Array of the columns that correspond to those with value cells in the

        data rows. Excludes colspan header columns (configured with `children`).