var msNormalSelectButton = Class.create(msButton, {
  xtype: 'normal-select-button',
   
  //list of options from the select
  options: [],
  
  //a reference to the custom content will be drawn
  viewer: false,

  // redefine the constructor
  initialize: function ($super,config) {
    $super(config);
    
    if(this.config.viewer) {
      Object.extend(this, { viewer: eval(this.config.viewer) });
    }
  },
  
  clickListner: function(event, ci) {    
    var data = $A(arguments).shift();    
    if(this.viewer) {
      this.viewer.getEl(ci.container_name, ci.select_name);
    }
  },
  
  // redefine the build method
  build: function ($super) {      
    
    this.el = new Element('div', {'class': 'msr-button-2 msr-' + this.xtype });
    
    var inner = new Element('div', { });
      
    
    if (
        this.config.verify_localized &&
        (window[this.config.verify_localized] == undefined || window[this.config.verify_localized].length == 0)
      ) 
    { 
      return;
    }
            
    var id = this.config.name.replace(/\x20/g,'');
    var select_name = id + '_select';
    var container_name = id + 'container';    

    p = new Element('p', {'class': 'msr-button-label', 'style' : 'display:block;float:left;width:80px' });
    p.innerHTML = this.config.name;
    inner.appendChild(p);     
    
    var new_select = new Element ('select', { 'id': id + '_select', 'style': 'padding:1px;'});
    
    if (this.config.options) {
      if(this.config.selected) this.config.selected = eval(this.config.selected);
      
      //for arrays (just values)
      if(Object.isArray(this.config.options)) {
        for(var i=0;i<this.config.options.length;i++) {
          var option = this.config.options[i];
          var new_option = this.addOption(option, option, option == this.config.selected );
          new_option.id = id + '-option-' + i;
          if(new_option) new_select.appendChild(new_option);
        }
      }
      //for jsons (keys & values)
      else {
        
        var xx = 0;
        for(var option in this.config.options) {
          xx++
        
          var new_option = this.addOption(this.config.options[option], option, option == this.config.selected );
          new_option.id = id + '-option-' + xx;
          if(new_option) new_select.appendChild(new_option);
        }
      }
    }
    else if ( this.config.selected ) {
      var new_option = new Element ('option');
      var default_value = eval(this.config.default_value);
      if ( default_value ) {
        new_option.value = default_value;
        new_option.innerHTML = default_value;
        new_option.id = id + '-option-' + i;
      }
      new_select.appendChild(new_option);
    }
    
    w = this.config.width;

    if (typeof(w) == 'undefined') { 
      w = '100px';
    }
    
    new_select.setStyle( { width: w } );
    inner.appendChild(new_select);   
    
    this.el.appendChild(inner);   
   
    Event.observe(new_select, 'click', this.clickListner.bindAsEventListener(
      this,
      { 'container_name': container_name, 'select_name': select_name }
    ));
    
    if (this.config.onchange) {
      Event.observe(new_select, 'change', this.handleOnchange.bindAsEventListener(
        this,
        { onchange: this.config.onchange, select_element: new_select }
      ));
    }
  },
  
  handleOnchange: function(e, config)
  {
    eval(config.onchange + "('" + config.select_element.value + "')");
  },
  
  setOptions: function (v) {
    this.options = v;
  },
  
  addOption: function (text, value, selected) {
    var new_option = new Element ('option');
    if(selected) {
      new_option.selected = true;  
      //this is the option selected by default
    }
    new_option.value = value;
    new_option.innerHTML = text;

    return new_option;
  },
  
  setValue: function(v)
  {
    var id = this.config.name.replace(/\x20/g,'');
    
    //$(id + '_select').setValue(v);
  }
});