/**
 * @private
 */
Ext.define('Ext.ux.colorpick.ButtonController', {
    extend: 'Ext.app.ViewController',
 
    alias: 'controller.colorpick-buttoncontroller',
 
    requires: [
        'Ext.window.Window',
        'Ext.layout.container.Fit',
        'Ext.ux.colorpick.Selector',
        'Ext.ux.colorpick.ColorUtils'
    ],
 
    afterRender: function (view) {
        view.updateColor(view.getColor());
    },
 
    destroy: function () {
        var view = this.getView(),
            colorPickerWindow = view.colorPickerWindow;
 
        if (colorPickerWindow) {
            colorPickerWindow.destroy();
            view.colorPickerWindow = view.colorPicker = null;
        }
 
        this.callParent();
    },
 
    getPopup: function () {
        var view = this.getView(),
            popup = view.colorPickerWindow,
            selector;
 
        if (!popup) {
            popup = Ext.create(view.getPopup());
 
            view.colorPickerWindow = popup;
            popup.colorPicker = view.colorPicker = selector = popup.lookupReference('selector');
            selector.setFormat(view.getFormat());
            selector.on({
                ok: 'onColorPickerOK',
                cancel: 'onColorPickerCancel',
                scope: this
            });
 
            popup.on({
                close: 'onColorPickerCancel',
                scope: this
            });
        }
 
        return popup;
    },
 
    // When button is clicked show the color picker window
    onClick: function() {
        var me = this,
            view = me.getView(),
            color = view.getColor(),
            popup = me.getPopup(),
            colorPicker = popup.colorPicker;
 
        colorPicker.setColor(color);
        colorPicker.setPreviousColor(color);
 
        popup.showBy(view, 'tl-br?');
    },
 
    onColorPickerOK: function (picker) {
        var view  = this.getView(),
            color = picker.getColor(),
            cpWin = view.colorPickerWindow;
 
        cpWin.hide();
 
        view.setColor(color);
    },
 
    onColorPickerCancel: function () {
        var view  = this.getView(),
            cpWin = view.colorPickerWindow;
 
        cpWin.hide();
    },
 
    syncColor: function (color) {
        var view = this.getView();
 
        Ext.ux.colorpick.ColorUtils.setBackground(view.filterEl, color);
    }
});