/**
 * @private
 */
Ext.define('Ext.ux.colorpick.SliderController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.colorpick-slidercontroller',
 
    // After the component is rendered
    boxReady: function (view) {
        var me         = this,
            container  = me.getDragContainer(),
            dragHandle = me.getDragHandle(),
            dd         = dragHandle.dd;
 
        // configure draggable constraints 
        dd.constrain = true;
        dd.constrainTo = container.getEl();
        dd.initialConstrainTo = dd.constrainTo; // needed otheriwse error EXTJS-13187
        
        // event handlers
        dd.on('drag', me.onHandleDrag, me);
    },
 
    getDragHandle: function () {
        return this.view.lookupReference('dragHandle');
    },
 
    getDragContainer: function () {
        return this.view.lookupReference('dragHandleContainer');
    },
 
    // Fires when handle is dragged; fires "handledrag" event on the slider
    // with parameter  "percentY" 0-1, representing the handle position on the slider
    // relative to the height
    onHandleDrag: function(e) {
        var me              = this,
            view            = me.getView(),
            container       = me.getDragContainer(),
            dragHandle      = me.getDragHandle(),
            y               = dragHandle.getY() - container.getY(),
            containerEl     = container.getEl(),
            containerHeight = containerEl.getHeight(),
            yRatio          = y/containerHeight;
 
        // Adjust y ratio for dragger always being 1 pixel from the edge on the bottom
        if (yRatio > 0.99) {
            yRatio = 1;
        }
 
        view.fireEvent('handledrag', yRatio);
    },
 
    // Whenever we mousedown over the slider area
    onMouseDown: function(e) {
        var me         = this,
            dragHandle = me.getDragHandle(),
            y = e.getY();
 
        // position drag handle accordingly
        dragHandle.setY(y);
        me.onHandleDrag();
 
        dragHandle.el.repaint();
        // tie into the default dd mechanism
        dragHandle.dd.onMouseDown(e, dragHandle.dd.el);
    },
 
    // Whenever we start a drag over the colormap area
    onDragStart: function(e) {
        var me         = this,
            dragHandle = me.getDragHandle();
 
        // tie into the default dd mechanism
        dragHandle.dd.onDragStart(e, dragHandle.dd.el);
    },
 
    onMouseUp: function () {
        var dragHandle = this.getDragHandle();
 
        dragHandle.dd.dragEnded = true; // work around DragTracker bug
    }
});