define([
    'jquery',
    'base/utils',
    'base/component',
    'smartpicker'
], function($, utils, Component, SmartPicker) {

    var picker;

    var PickerGeo = Component.extend({
        init: function(parent, options) {
            this._super(parent, options);
        },

        postRender: function() {
            var _this = this;
            //instantiate a new geoMult picker
            picker = new SmartPicker('mult', 'geo-picker', {
                contentData: {
                    text: "Select the countries",
                    options: [{
                        value: "swe",
                        name: "Sweden"
                    }, {
                        value: "nor",
                        name: "Norway"
                    }, {
                        value: "fin",
                        name: "Finland"
                    }, ]
                },
                width: 320,
                confirmButton: "OK",
                //what to do after user selects a country
                onSet: function(selected) {
                    //extract the value only
                    var countries = _.map(selected.selected, function(country) {
                        return country.value;
                    });
                    //pass the selected countries to state
                    _this.selectCountries(countries);
                }
            });
        },

        //TODO: this should be separated from the buttonlist (it was hardcoded)
        //pass a list of countries to the state
        selectCountries: function(countriesArr) {
            var state = {
                show: {
                    'geo': countriesArr,
                    'geo.categories': ['country']
                },
            };
            this.setState(state);
        },

        show: function() {
            picker.show();
        },

        update: function() {
           
        }

    });

    return PickerGeo;
});
@@ -56,16 +56,34 @@
 onent',%0A
+    'base/model',%0A
     'sma
@@ -124,16 +124,23 @@
 mponent,
+ Model,
  SmartPi
@@ -162,16 +162,35 @@
 r picker
+,%0A        countries
 ;%0A%0A    v
@@ -382,16 +382,17 @@
 = this;%0A
+%0A
         
@@ -401,101 +401,398 @@
   //
-instantiate a new geoMult picker%0A            picker = new SmartPicker('mult', 'geo-picker', %7B
+load countries and then initialize pickers%0A            this.loadCountries().then(function(country_list) %7B%0A                _this.initializePicker(country_list);%0A            %7D);%0A        %7D,%0A%0A        //load list of countries%0A        loadCountries: function() %7B%0A            var defer = $.Deferred(),%0A                language = this.model.get(%22language%22),%0A                query = this.getQuery(),
 %0A   
@@ -810,99 +810,313 @@
   co
+u
 nt
-entData: %7B%0A                    text: %22Select the countries%22,%0A                    options:
+ries = new Model();%0A%0A            //set the correct source%0A            countries.setSource(this.data);%0A%0A            //load data and resolve the defer when it's done%0A            $.when(%0A                countries.load(query, language, %7B%7D)%0A            ).done(function() %7B%0A                var country_list =
  %5B%7B%0A
@@ -1421,16 +1421,457 @@
     %7D, %5D
+;%0A                defer.resolve(country_list);%0A            %7D);%0A%0A            return defer;%0A%0A        %7D,%0A%0A        //initialize picker with list of countries%0A        initializePicker: function(country_list) %7B%0A            //instantiate a new geoMult picker%0A            picker = new SmartPicker('mult', 'geo-picker', %7B%0A                contentData: %7B%0A                    text: %22Select the countries%22,%0A                    options: country_list %7C%7C %5B%5D
 %0A       
@@ -2408,88 +2408,8 @@
 %7D,%0A%0A
-        //TODO: this should be separated from the buttonlist (it was hardcoded)%0A
     
@@ -2742,32 +2742,77 @@
 w: function() %7B%0A
+            if (picker && picker.show) %7B%0A    
             pick
@@ -2822,16 +2822,30 @@
 show();%0A
+            %7D%0A
         
@@ -2877,24 +2877,25 @@
 ion() %7B%0A
+%0A
         
    %0A    
@@ -2886,19 +2886,71 @@
         
-   
+%7D,%0A%0A        getQuery: function() %7B%0A          return %22%22;
 %0A       

Init query for country names