var   HiddenSelectSingleOption = Class.create();
HiddenSelectSingleOption .prototype = {
        initialize: function(option, container, result_container, form_field)
        {

                this.name = option.name;
                this.value = option.value;
                this.container = container;
                this.instance = null;
                this.result_container = result_container
                this.form_field = form_field;
                this.index = null;
                this._draw();

        },
        _draw: function()
        {
            var _link = new Element('a',{name:this.value});
            $(_link).writeAttribute({'class' : 'single_option'});
            _link.update(this.name);
            
            this.container.appendChild( _link );            
            
            Event.observe(_link, 'click', this._onSelected.bindAsEventListener(this));
           
        },
        _onSelected: function(event)
        {
          
            var _cancel = new Element('a');
            $(_cancel).writeAttribute({'class' : 'cancel_single_option'});
            _cancel.update('[x]');
            // setto il valore vero e proprio dell'hidden
            this.form_field.value = this.value;
            Event.observe(_cancel, 'click', this._onCanceled.bindAsEventListener(this));
            this.result_container.innerHTML = this.name;
            this.result_container.appendChild(_cancel);


        },
        _onCanceled: function(e)
        {
            this.result_container.innerHTML = ' ';
            // clear del valore:
            this.form_field.value = '';
        }


    }
 
 var   HiddenSelectMultipleOption = Class.create();
HiddenSelectMultipleOption .prototype = {
        initialize: function(option, container, result_container, form_field)
        {

                this.name = option.name;
                this.value = option.value;
                this.container = container;
                this.instance = null;
                this.result_container = result_container
                this.form_field = form_field;
                this._draw();

        },
        _draw: function()
        {
            this._addMe();
            
            // Se il valore è nullo non scrivo il div
            // Mi serve per le option di default...
            if (this.value == '') { return false; }
 
            // inserisco ogni checkbox con il relativo testo in un div al quale do la classe
            var _check_div = new Element('div');
            _check_div.writeAttribute({'class' : 'multiple_option'})
            var _checkbox = new Element('input',{type: 'checkbox', name:this.name, id:this.name, value:this.value});
            var _text = new Element('span');
            _text.update(this.name);
            
            _check_div.appendChild(_checkbox);
            _check_div.appendChild(_text);
            
            this.container.appendChild( _check_div );            
            
            Event.observe(_checkbox, 'click', this._onSelected.bindAsEventListener(this, _checkbox));
            Event.observe(_checkbox, 'click', this._clear.bindAsEventListener(this, _checkbox));
            
           
        },
        _onSelected: function(event, _checkbox)
        {
            // bastardi, l'event sulla checkbox è solo il click...
            if(!_checkbox.checked)  return;
          
          
          // ho bisogno di un contenitore...
            var _div = new Element('div', {id:this.value + '_value'});
          
            var _cancel = new Element('a', {href:'#'});
            $(_cancel).writeAttribute({'class' : 'cancel_single_option'});
            _cancel.update('[x]');
            // setto il valore vero e proprio dell'hidden
            //this.form_field.value = this.value;
            Event.observe(_cancel, 'click', this._onCanceled.bindAsEventListener(this));
            
            var _text = new Element('span');
            _text.update(this.name);
            _div.appendChild(_text)
            _div.appendChild(_cancel)
            
            this.result_container.appendChild(_div);
            
            // seleziono il mio indice nella select:
            this.form_field.options[this.index].selected = true;

        },
        _onCanceled: function(e)
        {
            // rimuovo la check nella checkbox equivalente
            $(this.name).checked = false;
            this._clearOnCancel(this.value);
        },
        _clear: function(e, _checkbox)
        {
            if(_checkbox.checked)  return;
            this._clearOnCancel(this.value);
        },
        _clearOnCancel: function(_value)
        {
            // rimuovo la scritta dell'elemento dal result div'
            this.result_container.removeChild($(_value + '_value'));
            // rimuovo la selezione nella select multipla
            this.form_field.options[this.index].selected = false;
            
        },
        _addMe: function()
        {
            // mi conservo la mia position nella select
            this.index = this.form_field.length;
            
            var _option = new Element('option', {value:this.value});            
            $(this.form_field).options.add(_option)
        }
        

    }