/**
 * Parent view for the 4 sliders seen on the color picker window.
 * @private
 */
Ext.define('Ext.ux.colorpick.Slider', {
    extend: 'Ext.container.Container',
    xtype: 'colorpickerslider',
    controller: 'colorpick-slidercontroller',

    afterRender: function() {
        var width, dragCt, dragWidth;

        this.callParent(arguments);

        width = this.width;
        dragCt = this.lookupReference('dragHandleContainer');
        dragWidth = dragCt.getWidth();

        dragCt.el.setStyle('left', ((width - dragWidth) / 2) + 'px');
    },

    baseCls: Ext.baseCSSPrefix + 'colorpicker-slider',

    requires: [
        'Ext.ux.colorpick.SliderController'
    ],

    referenceHolder: true,

    listeners: {
        element: 'el',
        mousedown: 'onMouseDown',
        mouseup: 'onMouseUp',
        dragstart: 'onDragStart'
    },

    // Container for the drag handle; needed since the slider
    // is of static size, while the parent container positions
    // it in the center; this is what receives the beautiful
    // color gradients for the visual
    items: {
        xtype: 'container',
        cls: Ext.baseCSSPrefix + 'colorpicker-draghandle-container',
        reference: 'dragHandleContainer',
        height: '100%',

        // This is the drag handle; note it's 100%x1 in size to allow full
        // vertical drag travel; the inner div has the bigger image
        items: {
            xtype: 'component',
            cls: Ext.baseCSSPrefix + 'colorpicker-draghandle-outer',
            reference: 'dragHandle',
            width: '100%',
            height: 1,
            draggable: true,
            html: '<div class="' + Ext.baseCSSPrefix + 'colorpicker-draghandle"></div>'
        }
    },

    //<debug>
    // Called via data binding whenever selectedColor.h changes;
    setHue: function() {
        Ext.raise('Must implement setHue() in a child class!');
    },
    //</debug>

    getDragHandle: function() {
        return this.lookupReference('dragHandle');
    },

    getDragContainer: function() {
        return this.lookupReference('dragHandleContainer');
    }
});