YUI.add('slider-base', function (Y, NAME) {

/**

 * Create a sliding value range input visualized as a draggable thumb on a

 * background element.

 *

 * @module slider

 * @submodule slider-base

 */

var INVALID_VALUE = Y.Attribute.INVALID_VALUE;

/**

 * Create a slider to represent an input control capable of representing a

 * series of intermediate states based on the position of the slider's thumb.

 * These states are typically aligned to a value algorithm whereby the thumb

 * position corresponds to a given value. Sliders may be oriented vertically or

 * horizontally, based on the <code>axis</code> configuration.

 *

 * @class SliderBase

 * @extends Widget

 * @param config {Object} Configuration object

 * @constructor

 */

function SliderBase() {

    SliderBase.superclass.constructor.apply( this, arguments );

}

Y.SliderBase = Y.extend( SliderBase, Y.Widget, {

    // Y.Slider prototype

    /**

     * Construction logic executed during Slider instantiation.

     *

     * @method initializer

     * @protected

     */

    initializer : function () {

        /**

         * The configured axis, stored for fast lookup since it's a writeOnce

         * attribute.  This is for use by extension classes.  For

         * implementation code, use <code>get( &quot;axis&quot; )</code> for

         * authoritative source.  Never write to this property.

         *

         * @property axis

         * @type {String}

         * @protected

         */

        this.axis = this.get( 'axis' );

        /**

         * Cached fast access map for DOM properties and attributes that

         * pertain to accessing dimensional or positioning information

         * according to the Slider's axis (e.g. "height" vs.

         * "width").  Extension classes should add to this collection

         * for axis related strings if necessary.

         *

         * @property _key

         * @type {Object}

         * @protected

         */

        this._key = {

            dim    : ( this.axis === 'y' ) ? 'height' : 'width',

            minEdge: ( this.axis === 'y' ) ? 'top'    : 'left',

            maxEdge: ( this.axis === 'y' ) ? 'bottom' : 'right',

            xyIndex: ( this.axis === 'y' ) ? 1 : 0

        };

        /**

         * Signals that the thumb has moved.  Payload includes the thumb's

         * pixel offset from the top/left edge of the rail, and if triggered by

         * dragging the thumb, the <code>drag:drag</code> event.

         *

         * @event thumbMove

         * @param event {Event} The event object for the thumbMove with the

         *                      following extra properties:

         *  <dl>

         *      <dt>offset</dt>

         *          <dd>Pixel offset from top/left of the slider to the new

         *          thumb position</dd>

         *      <dt>ddEvent (deprecated)</dt>

         *          <dd><code>drag:drag</code> event from the thumb</dd>

         *      <dt>originEvent</dt>

         *          <dd><code>drag:drag</code> event from the thumb</dd>

         *  </dl>

         */

        this.publish( 'thumbMove', {

            defaultFn: this._defThumbMoveFn,

            queuable : true

        } );

    },

    /**

     * Create the DOM structure for the Slider.

     *

     * @method renderUI

     * @protected

     */

    renderUI : function () {

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

        /**

         * The Node instance of the Slider's rail element.  Do not write to

         * this property.

         *

         * @property rail

         * @type {Node}

         */

        this.rail = this.renderRail();

        this._uiSetRailLength( this.get( 'length' ) );

        /**

         * The Node instance of the Slider's thumb element.  Do not write to

         * this property.

         *

         * @property thumb

         * @type {Node}

         */

        this.thumb = this.renderThumb();

        this.rail.appendChild( this.thumb );

        // @TODO: insert( contentBox, 'replace' ) or setHTML?

        contentBox.appendChild( this.rail );

        // <span class="yui3-slider-x">

        contentBox.addClass( this.getClassName( this.axis ) );

    },

    /**

     * Creates the Slider rail DOM subtree for insertion into the Slider's

     * <code>contentBox</code>.  Override this method if you want to provide

     * the rail element (presumably from existing markup).

     *

     * @method renderRail

     * @return {Node} the rail node subtree

     */

    renderRail: function () {

        var minCapClass = this.getClassName( 'rail', 'cap', this._key.minEdge ),

            maxCapClass = this.getClassName( 'rail', 'cap', this._key.maxEdge );

        return Y.Node.create(

            Y.Lang.sub( this.RAIL_TEMPLATE, {

                railClass      : this.getClassName( 'rail' ),

                railMinCapClass: minCapClass,

                railMaxCapClass: maxCapClass

            } ) );

    },

    /**

     * Sets the rail length according to the <code>length</code> attribute.

     *

     * @method _uiSetRailLength

     * @param length {String} the length to apply to the rail style

     * @protected

     */

    _uiSetRailLength: function ( length ) {

        this.rail.setStyle( this._key.dim, length );

    },

    /**

     * Creates the Slider thumb DOM subtree for insertion into the Slider's

     * rail.  Override this method if you want to provide the thumb element

     * (presumably from existing markup).

     *

     * @method renderThumb

     * @return {Node} the thumb node subtree

     */

    renderThumb: function () {

        this._initThumbUrl();

        var imageUrl = this.get( 'thumbUrl' );

        return Y.Node.create(

            Y.Lang.sub( this.THUMB_TEMPLATE, {

                thumbClass      : this.getClassName( 'thumb' ),

                thumbShadowClass: this.getClassName( 'thumb', 'shadow' ),

                thumbImageClass : this.getClassName( 'thumb', 'image' ),

                thumbShadowUrl  : imageUrl,

                thumbImageUrl   : imageUrl,

                thumbAriaLabelId: this.getClassName( 'label', Y.guid()) // get unique id for specifying a label for ARIA

            } ) );

    },

    /**

     * Gives focus to the thumb enabling keyboard access after clicking thumb

     *

     * @method _onThumbClick

     * @protected

     */

    _onThumbClick : function(e){

        this.thumb.focus();

    },

    /**

     * Creates the Y.DD.Drag instance used to handle the thumb movement and

     * binds Slider interaction to the configured value model.

     *

     * @method bindUI

     * @protected

     */

    bindUI : function () {

        // Begin keyboard listeners ///////////////////////////////

        var boundingBox = this.get("boundingBox"), //Y.one('body'),

        // Looking for a key event which will fire continously across browsers while the key is held down.

        keyEvent = (!Y.UA.opera) ? "down:" : "press:",

        // 38, 40 = arrow up/down, 33, 34 = page up/down,  35 , 36 = end/home

        keyEventSpec = keyEvent + "38,40,33,34,35,36",

        // 37 , 39 = arrow left/right

        keyLeftRightSpec = keyEvent + "37,39",

        // 37 , 39 = arrow left/right + meta (command/apple key) for mac

        keyLeftRightSpecMeta = keyEvent + "37+meta,39+meta";

        boundingBox.on("key", this._onDirectionKey, keyEventSpec, this);

        boundingBox.on("key", this._onLeftRightKey, keyLeftRightSpec, this);

        boundingBox.on("key", this._onLeftRightKeyMeta, keyLeftRightSpecMeta, this);

        // End keyboard listeners //////////////////////////////////

        this.thumb.on('click', this._onThumbClick, this);

        this._bindThumbDD();

        this._bindValueLogic();

        this.after( 'disabledChange', this._afterDisabledChange );

        this.after( 'lengthChange',   this._afterLengthChange );

    },

    /**

     * increments Slider value by a minor increment

     *

     * @method _incrMinor

     * @protected

     */

    _incrMinor : function(){

        this.set('value', (this.get('value') + this.get('minorStep')));

    },

    /**

     * decrements Slider value by a minor increment

     *

     * @method _decrMinor

     * @protected

     */

    _decrMinor : function(){

        this.set('value', (this.get('value') - this.get('minorStep')));

    },

    /**

     * increments Slider value by a major increment

     *

     * @method _incrMajor

     * @protected

     */

    _incrMajor : function(){

        this.set('value', (this.get('value') + this.get('majorStep')));

    },

    /**

     * decrements Slider value by a major increment

     *

     * @method _decrMajor

     * @protected

     */

    _decrMajor : function(){

        this.set('value', (this.get('value') - this.get('majorStep')));

    },

    /**

     * sets the Slider value to the min value.

     *

     * @method _setToMin

     * @protected

     */

    _setToMin : function(e){

        this.set('value', this.get('min'));

    },

    /**

     * sets the Slider value to the max value.

     *

     * @method _setToMax

     * @protected

     */

    _setToMax : function(e){

        this.set('value', this.get('max'));

    },

    /**

     * sets the Slider's value in response to key events.

     * Left and right keys are in a separate method

     * in case an implementation wants to increment values

     * but needs left and right arrow keys for other purposes.

     *

     * @method _onDirectionKey

     * @param e {Event} the key event

     * @protected

     */

    _onDirectionKey : function(e) {

        e.preventDefault();

        if(this.get('disabled') === false){

            switch (e.charCode) {

                case 38: // up

                    this._incrMinor();

                    break;

                case 40: // down

                    this._decrMinor();

                    break;

                case 36: // home

                    this._setToMin();

                    break;

                case 35: // end

                    this._setToMax();

                    break;

                case 33: // page up

                    this._incrMajor();

                    break;

                case 34: // page down

                    this._decrMajor();

                    break;

            }

        }

    },

    /**

     * sets the Slider's value in response to left or right key events

     *

     * @method _onLeftRightKey

     * @param e {Event} the key event

     * @protected

     */

    _onLeftRightKey : function(e) {

        e.preventDefault();

        if(this.get('disabled') === false){

            switch (e.charCode) {

                case 37: // left

                    this._decrMinor();

                    break;

                case 39: // right

                    this._incrMinor();

                    break;

            }

        }

    },

    /**

     * sets the Slider's value in response to left or right key events when a meta (mac command/apple) key is also pressed

     *

     * @method _onLeftRightKeyMeta

     * @param e {Event} the key event

     * @protected

     */

    _onLeftRightKeyMeta : function(e) {

        e.preventDefault();

        if(this.get('disabled') === false){

            switch (e.charCode) {

                case 37: // left + meta

                    this._setToMin();

                    break;

                case 39: // right + meta

                    this._setToMax();

                    break;

            }

        }

    },

    /**

     * Makes the thumb draggable and constrains it to the rail.

     *

     * @method _bindThumbDD

     * @protected

     */

    _bindThumbDD: function () {

        var config = { constrain: this.rail };

        // { constrain: rail, stickX: true }

        config[ 'stick' + this.axis.toUpperCase() ] = true;

        /**

         * The DD.Drag instance linked to the thumb node.

         *

         * @property _dd

         * @type {DD.Drag}

         * @protected

         */

        this._dd = new Y.DD.Drag( {

            node   : this.thumb,

            bubble : false,

            on     : {

                'drag:start': Y.bind( this._onDragStart, this )

            },

            after  : {

                'drag:drag': Y.bind( this._afterDrag,    this ),

                'drag:end' : Y.bind( this._afterDragEnd, this )

            }

        } );

        // Constrain the thumb to the rail

        this._dd.plug( Y.Plugin.DDConstrained, config );

    },

    /**

     * Stub implementation.  Override this (presumably in a class extension) to

     * initialize any value logic that depends on the presence of the Drag

     * instance.

     *

     * @method _bindValueLogic