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

/**

 Provides keyboard navigation of DataTable cells and support for adding other

 keyboard actions.

 @module datatable

 @submodule datatable-keynav

*/

var arrEach = Y.Array.each,

/**

 A DataTable class extension that provides navigation via keyboard, based on

 WAI-ARIA recommendation for the [Grid widget](http://www.w3.org/WAI/PF/aria-practices/#grid)

 and extensible to support other actions.

 @class DataTable.KeyNav

 @for DataTable

*/

    DtKeyNav = function (){};

/**

Mapping of key codes to friendly key names that can be used in the

[keyActions](#property_keyActions) property and [ARIA_ACTIONS](#property_ARIA_ACTIONS)

property.

It contains aliases for the following keys:

    <ul>

    <li>backspace</li>

    <li>tab</li>

    <li>enter</li>

    <li>esc</li>

    <li>space</li>

    <li>pgup</li>

    <li>pgdown</li>

    <li>end</li>

    <li>home</li>

    <li>left</li>

    <li>up</li>

    <li>right</li>

    <li>down</li>

    <li>f1 .. f12</li>

    </ul>

@property KEY_NAMES

@type {Object}

@static

**/

DtKeyNav.KEY_NAMES = {

     8: 'backspace',

     9: 'tab',

    13: 'enter',

    27: 'esc',

    32: 'space',

    33: 'pgup',

    34: 'pgdown',

    35: 'end',

    36: 'home',

    37: 'left',

    38: 'up',

    39: 'right',

    40: 'down',

    112:'f1',

    113:'f2',

    114:'f3',

    115:'f4',

    116:'f5',

    117:'f6',

    118:'f7',

    119:'f8',

    120:'f9',

    121:'f10',

    122:'f11',

    123:'f12'

};

/**

Mapping of key codes to actions according to the WAI-ARIA suggestion for the

[Grid Widget](http://www.w3.org/WAI/PF/aria-practices/#grid).

The key for each entry is a key-code or [keyName](#property_KEY_NAMES) while the

value can be a function that performs the action or a string.  If a string,

it can either correspond to the name of a method in this module (or  any

method in a DataTable instance) or the name of an event to fire.

@property ARIA_ACTIONS

@type Object

@static

 */

DtKeyNav.ARIA_ACTIONS = {

    left:   '_keyMoveLeft',

    right:  '_keyMoveRight',

    up:     '_keyMoveUp',

    down:   '_keyMoveDown',

    home:   '_keyMoveRowStart',

    end:    '_keyMoveRowEnd',

    pgup:   '_keyMoveColTop',

    pgdown: '_keyMoveColBottom'

};

DtKeyNav.ATTRS = {

    /**

    Cell that's currently either focused or

    focusable when the DataTable gets the focus.

    @attribute focusedCell

    @type Node

    @default first cell in the table.

    **/

    focusedCell: {

        setter: '_focusedCellSetter'

    },

    /**

    Determines whether it is possible to navigate into the header area.

    The examples referenced in the document show both behaviors so it seems

    it is optional.

    @attribute keyIntoHeaders

    @type Boolean

    @default true

     */

    keyIntoHeaders: {

        value: true

    }

};

Y.mix( DtKeyNav.prototype, {

    /**

    Table of actions to be performed for each key.  It is loaded with a clone

    of [ARIA_ACTIONS](#property_ARIA_ACTIONS) by default.

    The key for each entry is either a key-code or an alias from the

    [KEY_NAMES](#property_KEY_NAMES) table. They can be prefixed with any combination

    of the modifier keys `alt`, `ctrl`, `meta` or `shift` each followed by a hyphen,

    such as `"ctrl-shift-up"` (modifiers, if more than one, should appear in alphabetical order).

    The value for each entry should be a function or the name of a method in

    the DataTable instance.  The method will receive the original keyboard

    EventFacade as its only argument.

    If the value is a string and it cannot be resolved into a method,

    it will be assumed to be the name of an event to fire. The listener for that

    event will receive an EventFacade containing references to the cell that has the focus,

    the row, column and, unless it is a header row, the record it corresponds to.

    The second argument will be the original EventFacade for the keyboard event.

     @property keyActions

     @type {Object}

     @default Y.DataTable.keyNav.ARIA_ACTIONS

     */

    keyActions: null,

    /**

    Array containing the event handles to any event that might need to be detached

    on destruction.

    @property _keyNavSubscr

    @type Array

    @default null,

    @private

     */

    _keyNavSubscr: null,

    /**

    Reference to the THead section that holds the headers for the datatable.

    For a Scrolling DataTable, it is the one visible to the user.

    @property _keyNavTHead

    @type Node

    @default: null

    @private

     */

    _keyNavTHead: null,

    /**

    Indicates if the headers of the table are nested or not.

    Nested headers makes navigation in the headers much harder.

    @property _keyNavNestedHeaders

    @default false

    @private

     */

    _keyNavNestedHeaders: false,

    /**

    CSS class name prefix for columns, used to search for a cell by key.

    @property _keyNavColPrefix

    @type String

    @default null (initialized via getClassname() )

    @private

     */

    _keyNavColPrefix:null,

    /**

    Regular expression to extract the column key from a cell via its CSS class name.

    @property _keyNavColRegExp

    @type RegExp

    @default null (initialized based on _keyNavColPrefix)

    @private

     */

    _keyNavColRegExp:null,

    initializer: function () {

        this.onceAfter('render', this._afterKeyNavRender);

        this._keyNavSubscr = [

            this.after('focusedCellChange', this._afterKeyNavFocusedCellChange),

            this.after('focusedChange', this._afterKeyNavFocusedChange)

        ];

        this._keyNavColPrefix = this.getClassName('col', '');

        this._keyNavColRegExp = new RegExp(this._keyNavColPrefix + '(.+?)(\\s|$)');

        this.keyActions = Y.clone(DtKeyNav.ARIA_ACTIONS);

    },

    destructor: function () {

        arrEach(this._keyNavSubscr, function (evHandle) {

            if (evHandle && evHandle.detach) {

                evHandle.detach();

            }

        });

    },

    /**

    Sets the tabIndex on the focused cell and, if the DataTable has the focus,

    sets the focus on it.

    @method _afterFocusedCellChange

    @param e {EventFacade}

    @private

    */

    _afterKeyNavFocusedCellChange: function (e) {

        var newVal  = e.newVal,

            prevVal = e.prevVal;

        if (prevVal) {

            prevVal.set('tabIndex', -1);

        }

        if (newVal) {

            newVal.set('tabIndex', 0);

            if (this.get('focused')) {

                newVal.scrollIntoView();

                newVal.focus();

            }

        } else {

            this.set('focused', null);

        }

    },

    /**

    When the DataTable gets the focus, it ensures the correct cell regains

    the focus.

    @method _afterKeyNavFocusedChange

    @param e {EventFacade}

    @private

    */

    _afterKeyNavFocusedChange: function (e) {

        var cell = this.get('focusedCell');

        if (e.newVal) {

            if (cell) {

                cell.scrollIntoView();

                cell.focus();

            } else {

                this._keyMoveFirst();

            }

        } else {

            if (cell) {

                cell.blur();

            }

        }

    },

    /**

    Subscribes to the events on the DataTable elements once they have been rendered,

    finds out the header section and makes the top-left element focusable.

    @method _afterKeyNavRender

    @private

     */

    _afterKeyNavRender: function () {

        var cbx = this.get('contentBox');

        this._keyNavSubscr.push(

            cbx.on('keydown', this._onKeyNavKeyDown, this),

            cbx.on('click', this._onKeyNavClick, this)

        );

        this._keyNavTHead = (this._yScrollHeader || this._tableNode).one('thead');

        this._keyMoveFirst();

        // determine if we have nested headers

        this._keyNavNestedHeaders = (this.get('columns').length !== this.head.theadNode.all('th').size());

    },

    /**

    In response to a click event, it sets the focus on the clicked cell

    @method _onKeyNavClick

    @param e {EventFacade}

    @private

     */

    _onKeyNavClick: function (e) {

        var cell = e.target.ancestor((this.get('keyIntoHeaders') ? 'td, th': 'td'), true);

        if (cell) {

            this.focus();

            this.set('focusedCell', cell);

        }

    },

    /**

    Responds to a key down event by executing the action set in the

    [keyActions](#property_keyActions) table.

    @method _onKeyNavKeyDown

    @param e {EventFacade}

    @private

    */

    _onKeyNavKeyDown: function (e) {

        var keyCode = e.keyCode,

            keyName = DtKeyNav.KEY_NAMES[keyCode] || keyCode,

            action;

        arrEach(['alt', 'ctrl', 'meta', 'shift'], function (modifier) {

            if (e[modifier + 'Key']) {

                keyCode = modifier + '-' + keyCode;

                keyName = modifier + '-' + keyName;

            }

        });

        action = this.keyActions[keyCode] || this.keyActions[keyName];

        if (typeof action === 'string') {

            if (this[action]) {

                this[action].call(this, e);

            } else {

                this._keyNavFireEvent(action, e);

            }

        } else {

            action.call(this, e);

        }

    },

    /**

    If the action associated to a key combination is a string and no method

    by that name was found in this instance, this method will

    fire an event using that string and provides extra information

    to the listener.

    @method _keyNavFireEvent

    @param action {String} Name of the event to fire

    @param e {EventFacade} Original facade from the keydown event.

    @private

     */

    _keyNavFireEvent: function (action, e) {

        var cell = e.target.ancestor('td, th', true);

        if (cell) {

            this.fire(action, {

                cell: cell,

                row: cell.ancestor('tr'),

                record: this.getRecord(cell),

                column: this.getColumn(cell.get('cellIndex'))

            }, e);

        }

    },

    /**

    Sets the focus on the very first cell in the header of the table.

    @method _keyMoveFirst

    @private

     */

    _keyMoveFirst: function () {

        this.set('focusedCell' , (this.get('keyIntoHeaders') ? this._keyNavTHead.one('th') : this._tbodyNode.one('td')), {src:'keyNav'});

    },

    /**

    Sets the focus on the cell to the left of the currently focused one.

    Does not wrap, following the WAI-ARIA recommendation.

    @method _keyMoveLeft

    @param e {EventFacade} Event Facade for the keydown event

    @private

    */

    _keyMoveLeft: function (e) {

        var cell = this.get('focusedCell'),

            index = cell.get('cellIndex'),

            row = cell.ancestor();

        e.preventDefault();

        if (index === 0) {

            return;

        }

        cell = row.get('cells').item(index - 1);

        this.set('focusedCell', cell , {src:'keyNav'});

    },

    /**

    Sets the focus on the cell to the right of the currently focused one.

    Does not wrap, following the WAI-ARIA recommendation.

    @method _keyMoveRight

    @param e {EventFacade} Event Facade for the keydown event

    @private

    */

    _keyMoveRight: function (e) {

        var cell = this.get('focusedCell'),

            row = cell.ancestor('tr'),

            section = row.ancestor(),

            inHead = section === this._keyNavTHead,

            nextCell,

            parent;

        e.preventDefault();

        // a little special with nested headers

        /*

            +-------------+-------+

            | ABC         | DE    |

            +-------+-----+---+---+

            | AB    |     |   |   |