zoo.form.StylizedSelect = function(opts) {
    this.container = opts.container;
    this.name      = opts.name || 'inp-select;'
    this.options   = opts.options;
    if (opts.inputId) {
        this.inputId   = opts.inputId;
    }
}
zoo.form.StylizedSelect.prototype = function() {
    var _createContainer = function() {
        this.select = $(document.createElement('div'));
        this.select.addClassName('stylized-select');
        if (this.inputId) {
            this.container.addClassName('stylized-container-' + this.inputId);
            this.select.setAttribute('id', 'stylized-' + this.inputId);
        }
        return;        
    }
    var _createInput = function() {
        this.valueInput = $(document.createElement('input'));
        this.valueInput.setAttribute('type', 'hidden');
        this.valueInput.setAttribute('name', this.name);
        if (this.inputId) {
            this.valueInput.setAttribute('id', this.inputId)
        }               
        
        this.input = $(document.createElement('input'));
        this.input.setAttribute('type', 'text');        
        this.input.addClassName('text');
        this.input.observe('focus', this.onFocus.bindAsEventListener(this));
        this.input.observe('click', this.cancelBubble);
        this.input.observe('keyup', _setKeyValue.bindAsEventListener(this));
        
        this.input.readOnly = true;
        this.input.setAttribute( "readonly", "readonly" );        
        document.body.observe('click', this.close.bindAsEventListener(this));
        
        this.ico = $(document.createElement('span'));
        this.ico.addClassName('ico');
        
        var $self = this;
        this.ico.observe('click', function(e) {
            if ($self.editState) {
                $self.close();
            } else {
                $self.onFocus(e);
            }
            e.stop(e);
        });
        return;        
    }
    var _createOptions = function() {
        this.optionContainer = $(document.createElement('div'));
        this.optionContainer.addClassName('optionContainer');
        this.optionContainer.tabIndex    = -1000;
                      
        if (this.options && this.options.length > 0 ) {
            _drawOptions.call(this);
        } else {
            var emptyOptionMessage = $(document.createElement('p'));
            emptyOptionMessage.addClassName('empty-options');
            emptyOptionMessage.innerHTML = "There are no options to select at this time.";
            this.optionContainer.appendChild(emptyOptionMessage);
        }
        return this.optionContainer;
    }
    var _drawOptions = function() {
      var optElement;
      var i = 0;
      var $self = this;
      this.options.each( function(aOption) {
        aOption.select = $self;
        aOption.Index = i;
        optElement = $(document.createElement('div'));
        optElement.addClassName('option');
        optElement.innerHTML = aOption.display
        optElement.option    = aOption;
        aOption.optionElement    = optElement;
        
        zoo.dom.makeHoverable(optElement);
        if ($self.value == aOption.value) {
            optElement.addClassName('selected');
            $self.selectedOptionIndex = i;    
        }
        $self.optionContainer.appendChild(optElement);
        optElement.observe('click', $self.onSelectOption);
        i++;
      });
      return true;
    }
    
    var _setKeyValue = function(e) {
      var key = e.keyCode;
      if(key == 9) {
        return false;
      }
      else {
        if(key == 40 || key == 39) {
          _selectNextOption.call(this);
          this.input.focus();
        } else if(key == 38 || key == 37) {
          _selectPreviousOption.call(this);
          this.input.focus();
        }
        else if(key == 27 || key == 13) {
          this.close();
        } else {
          _setMatchingOptions.call(this, key);
        }
      }
      return true;
    }
    
    var _selectOption = function(aIndex) {
        if( aIndex<0 || aIndex == null ) {
            return false;
        }
    
        if( this.options[aIndex] ) {
            this.options[aIndex].optionElement.addClassName("selected");
            var zSelectedOption = this.options[aIndex];
        }
    
        this.selectedOptionIndex = aIndex;
        this.input.value = zSelectedOption.display;
        // this.scrollOptionIntoView.call( this, aIndex );
        return true;
    }
    
    var _deSelectOption = function( aIndex ) {
      if(aIndex<0 || aIndex == null) {
        return false;
      }

      if( this.options[aIndex] ) {
        this.options[aIndex].optionElement.removeClassName("selected");
      }

      if( this.selectedOptionIndex == aIndex ) {
        if( this.input && this.input.value == this.value ) {
          this.input.value = "";
        }

        this.selectedOptionIndex = null;
        this.selectedOptionText = "";
        this.selectedOptionValue = "";
      }

      return true;
    }

    var _selectNextOption = function(aArray) {
        var zArray = (aArray) ? aArray : this.ActiveOptionArray;
        zArray = zArray || this.options;
        var zIndex = 0;
    
        for( var i = 0; i < zArray.length; i++ ) {
          if( zArray[i].Index == this.selectedOptionIndex ) {
            zIndex = i+1;
          }
        }
    
        _deSelectOption.call(this, this.selectedOptionIndex );
        if( !zArray.length ) {
          return false;
        }
    
        if( zIndex == zArray.length ) {
          zIndex = 0;
        }
    
        _selectOption.call(this, zArray[zIndex].Index);
        return true;
    }

    var _selectPreviousOption =function(aArray) {
      var $select = this;
      var zArray = (aArray) ? aArray : this.ActiveOptionArray;
      zArray = zArray || this.options;
      var zIndex = 0;

      for(var i = 0; i < zArray.length; i++) {
        if( zArray[i].Index == this.selectedOptionIndex ) {
          zIndex = i-1;
        }
      }

      _deSelectOption.call(this, this.selectedOptionIndex);
      if(!zArray.length) {
        return false;
      }

      if(zIndex < 0) {
        zIndex = zArray.length-1;
      }

      _selectOption.call(this, zArray[zIndex].Index);
      return true;
    }    
  
    return {
        init: function() {
            _createContainer.call(this);
            _createInput.call(this);
            _createOptions.call(this);
            this.select.appendChild(this.input);
            this.select.appendChild(this.ico);
            this.select.appendChild(this.optionContainer);
            this.select.appendChild(this.valueInput);            
            this.container.appendChild(this.select);
            
            this.optionContainer.style.width =  ( this.input.offsetWidth - 2 ) + "px";
            this.optionContainer.style.left  =  this.input.offsetLeft + "px";
            this.optionContainer.style.top   =  this.input.offsetHeight + "px";            
        },
        close: function() {
            if (this.editState) {
                this.optionContainer.style.display = 'none';
            }
            this.editState = false;
            return;          
        },
        onSelectOption: function() {
            var $select = this.option.select;
            $select.input.value = this.option.display;
            $select.value = this.option.value;
            $select.valueInput.value = this.option.value;
            return true;
            
            /*
            if (this.selectedOptionIndex) {
              $select.deSelectOption.call( this, this.SelectedOptionIndex );
            }
            
            $select.selectOption.call( this, aParams.Index );
            $select.save.call( this, e )
            return true;
            */
        },
        onFocus: function(e) {
            this.optionContainer.style.display = 'block';
            this.editState = true;
            e.stop(e);
        },
        cancelBubble: function(e) {
            e.stop(e);
            return false;
        }
    }
    
}()
zoo.form.StylizedSelect.createFromElement = function() { 
    var _createOptions = function(elm) {
        var opts = [];
        var opt;
        for(var i=0;i<elm.options.length;i++) {
            opt = elm.options[i];
            opts.push({
                display: opt.text,
                value: opt.value
            })
        };
        return opts;
    }
    
    return function(elm) {
        var opts = _createOptions(elm);
        
        var container = $(document.createElement('div'));
        container.addClassName('select-replacement');
        
        elm.insert({before: container});
        
        elm.parentNode.removeChild(elm);
        var selectObj = new zoo.form.StylizedSelect({
            options: opts,
            container: container,
            name: elm.name,
            inputId: elm.getAttribute('id')
        });
        selectObj.init();
    }
}();