

var   HiddenSelect = Class.create();

HiddenSelect.prototype = {

        initialize: function(id, link_label, container, options ){
                this.id = id;
                this.link_label = link_label;
                this.container = container;
                this.options = options.toArray();
                this.html_options = null;
                this.winOpener = null;
                this.win = null;

        },
        drawSingleSelection: function()
        {
            this._draw();


            // aggiungo l'input hidden che è il campo della form vero e proprio
           var _hidden = new Element('input', {type:'hidden', id: this.id, name: this.id});


            $(this.container).appendChild(_hidden);

            this.options.each(function(o){
                    new HiddenSelectSingleOption (o,this.html_options, $(this.id + "_result"), _hidden)
            }.bind(this));

            this._drawDone();
        },
        drawMultipleSelection: function()
        {

            this._draw();

            var _hidden = new Element('select', {id: this.id, name: this.id + '[]', style:'display:none;'});
            _hidden.writeAttribute({'multiple' : 'true'})
            $(this.container).appendChild(_hidden);


            this.options.each(function(o){
                    new HiddenSelectMultipleOption (o,this.html_options, $(this.id + "_result"), _hidden)
            }.bind(this));

            this._drawDone();

        },
        _draw: function()
        {
            // add link to container:
            
            var _link = new Element('a', { 'class': this.id + '_link' });
            
            
            $(_link).update(this.link_label)

            Event.observe(_link, 'click', this._openWindow.bindAsEventListener(this));

            var _result_div = new Element('div');
            _result_div.id = this.id + "_result";
            _result_div.writeAttribute({'class' : 'result_container'});
            
            $(_result_div).innerHTML = "&nbsp;";
            // aggiungo il div che conterrà le options:
            this.html_options = new Element('div', {id: this.id + '_options_container', style: 'display:none;'})
            this.html_options.writeAttribute({'class' : 'options_container'});

            $(this.container).appendChild(this.html_options);
            $(this.container).appendChild(_link);
            $(this.container).appendChild(_result_div);

        },
        _openWindow: function(event)
        {
            // definisco la position:
            var _left = Event.pointerX(event);
            var _top = Event.pointerY(event);
            Element.setStyle($(this.id + '_options_container'), {'left' : _left, 'top':_top})

            $(this.id + '_options_container').appear();
        },
        _drawDone: function()
        {
            var _bDone = new Element('input', {type:'button', value:'Done'});
            _bDone.writeAttribute({'class' : 'options_container_button'});
            $(this.html_options).appendChild(_bDone);

            Event.observe(_bDone, 'click', this._onDone.bindAsEventListener(this));
        },
        _onDone: function()
        {
            $(this.id + '_options_container').hide();
        }


    }

