var GridSelectSelector = '.gridselect';
var GridselectControl = Class.create(XControl, {
    drop:null,
    model:null,
    view:null,

    loadview: function(element)
    {
        this.model = $(element);
        var control = this.model.control = this;
        this.view = Builder.node('div', {className:'dropdown'},
            Builder.node('div', {className:'valuebox'})
        );
        this.model.value = this.model.getAttribute('value');
        var display = this.model.getAttribute('display');
        if (!display) display = this.model.value;
        this.setDisplayValue(display);

        if (this.model.hasClassName('filtered')) this.view.addClassName('filtered');

        this.model.insert({after:this.view}).hide();

        this.drop = new DropdownControl(this.view, this.model.getAttribute('drop'));

        this.drop.observe('show', function(){
            var grid = control.getGrid();
            grid.resetObserve();
            grid.observe('rowselect', function(memo){
                control.setValue(memo.id);
                control.setDisplayValue(memo.display);
                control.drop.hide();
                control.fire('rowselect', memo);
            });
            grid.find('.clear_selection').invoke('observe', 'click', function(){
                control.setValue('');
                control.setDisplayValue('');
                control.drop.hide();
                control.fire('rowselect', {id:'', display:''});
            });
        })
    },

    setValue: function(value)
    {
        if (Object.isUndefined(this.model.originValue)) this.model.originValue = this.model.value;

        this.model.value = value;
        if (value != this.model.originValue)
            this.view.addClassName('changed');
        else
            this.view.removeClassName('changed');
    },

    setDisplayValue: function(value)
    {
        this.view.down('.valuebox').update(value);
    },

    getGrid: function()
    {
        return this.drop.content.control;
    }
})