Ext.define('amdaUI.ColorMap', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.colormap',
   

    data : [],
    onValueChange: null,

    constructor:function(config){
        this.getData();
        this.init(config);
		this.callParent();
    },

    getData:function(){
        var me = this;
        amdaDefaultConfigs.availableColorMaps.forEach(function(color){
			me.data.push({key:color.key,name:color.value, iconUrl:'generic_data/colormaps/'+ color.svgFile})
		});
    },
    init: function(config){
        var me = this;
        var size = (typeof config !== "undefined" && config.size) ? config.size : '12';
        var hideFieldLabel = true;
        if (typeof config !== "undefined") {
            hideFieldLabel = (config.hideFieldLabel !== false);
        }
        Ext.apply(this,{
            xtype:'combobox',
            name: (typeof config !== "undefined" && config.name) ? config.name:null,
            fieldLabel: hideFieldLabel ? '' : 'Color Map&nbsp;<img amda_clicktip="colourMaps" style="vertical-align:bottom" src="js/resources/images/16x16/info_mini.png"',
            store: new Ext.data.Store({
            fields: ['key','name', 'iconUrl'],
            data: me.data
        }),
        displayField: 'name',
        valueField: 'key',
        tpl: '<tpl for="."><div class="x-boundlist-item"><span data-qtip="{name}"> \
                <img src="{iconUrl}" class="svg-icon" style="height:'+size+'px;"> \
                </span>\
            </div></tpl>',
        editable: false,
        queryMode: 'local',
        onValueChange: (typeof config !== "undefined" && config.onValueChange) ? config.onValueChange : null,
        listeners: {
            change: function (combo, newValue, oldValue, eOpts) {
                var iconUrl="";
                var colorName = "";
                me.data.forEach(function(colorData){
                    if(colorData.key == newValue ){
                        iconUrl= colorData.iconUrl;
                        colorName = colorData.name;
                    }
                });
                combo.inputEl.setStyle('background-image', 'url(' + iconUrl + ')');
                combo.inputEl.setStyle('background-size', '100%');
                combo.inputEl.setStyle('background-repeat', 'no-repeat');
                combo.inputEl.setStyle('background-position', 'center');
                combo.inputEl.setStyle('font-size', '0');

                combo.inputEl.set({ "data-qtip": Ext.String.htmlDecode(colorName) });

                if (me.onValueChange)
                    me.onValueChange(me.name, newValue, oldValue);
            },
            click: {
                element: 'el',
                fn: function(e,t) { 
                    var me = t,
                    text = me.getAttribute('amda_clicktip');
                    if (text) {
                        e.preventDefault();
                        AmdaAction.getInfo({name : text}, function(res,e) {
                            if (res.success) myDesktopApp.infoMsg(res.result);
                        });
                    }
                }
            },
            scope:this
        },
        })
    }
});