Ext.define('Ext.rtl.slider.Multi', {
    override: 'Ext.slider.Multi',

    initComponent: function () {
        if (this.getInherited().rtl) {
            this.horizontalProp = 'right';
        }
        this.callParent();
    },

    onDragStart: function () {
        this.callParent(arguments);
        // Cache the width so we don't recalculate it during the drag
        this._rtlInnerWidth = this.innerEl.getWidth();
    },

    onDragEnd: function () {
        this.callParent(arguments);
        delete this._rtlInnerWidth;
    },

    onKeyDown: function (e) {
        var key;

        if (this.getInherited().rtl) {
            key = e.getKey();

            if (key === e.RIGHT) {
                e.keyCode = e.LEFT;
            }
            else if (key === e.LEFT) {
                e.keyCode = e.RIGHT;
            }
        }

        return this.callParent([e]);
    },

    transformTrackPoints: function (pos) {
        var left, innerWidth;

        if (this.isOppositeRootDirection()) {
            left = pos.left;
            delete pos.left;

            innerWidth = typeof this._rtlInnerWidth !== 'undefined' ? this._rtlInnerWidth : this.innerEl.getWidth();
            pos.right = innerWidth - left;

            return pos;
        } else {
            return this.callParent(arguments);
        }
    }
});
