/**
 * Key is the name displayed in the select box
 * Value is the
 */
var FakeSelectOption = Class.create({
  initialize: function(key, value, selected) {
    this.key = key;
    this.value = value;
    // false is the default value
    this.selected = selected || false;
  },
  getKey: function() {
    return this.key;
  },
  getValue: function() {
    return this.value;
  },
  isSelected: function() {
    return this.selected;
  }

});
var FakeSelect = Class.create({
  initialize: function(element, selectOptions) {
    this.selectElement = $(element);
    this.selectElement.addClassName('fake_select');
    var ulMinWidth = this.selectElement.getWidth();

    this.selectOptions = selectOptions;

    var list = '<ul>\n' + this.selectOptions.map(function(p) {
                            return '\t<li>' + p.getKey() + '</li>' ;
                          }).join('\n' )
                + '</ul>' ;

    this.current = new Element('div');
    this.current.addClassName('fake_select_current');
    // If element is hidden in some point, selectElement.getWidth() returns 0
    if (ulMinWidth > 0) {
      this.current.setStyle({width: ulMinWidth-27 + 'px'});
    }

    // Default is 0 if no option is selected
    this.selectedIndex = 0;
    for(var i = 0; i < this.selectOptions.length; ++i){
      if(this.selectOptions[i] != null && typeof(this.selectOptions[i]) != 'undefined'){
    	if(this.selectOptions[i].isSelected())
          this.selectedIndex = i;
      }
    }
    this.current.update(this.selectOptions[this.selectedIndex].getKey());


    this.selectElement.update(this.current);
    this.selectElement.insert({bottom: list});

    this.lis = this.selectElement.select('ul li');

    this.selectElement.observe('click', this.openOptions.bind(this));
    document.observe('click', this.closeOptions.bind(this));
    this.selectOpen = false;

    for(var i = 0; i < this.lis.length; ++i) {
      this.lis[i].addClassName('fake_select_option');
      this.lis[i].observe('click', this.selectOption.bind(this, i));
      this.lis[i].observe('mouseover', this.hoverEffect.bind(this));
      this.lis[i].observe('mouseout', this.hoverEffect.bind(this));
    }
    // Set ul width to be at least the width of the select
    if(this.selectElement.select('ul')[0].getWidth() < ulMinWidth) {
      this.selectElement.select('ul')[0].setStyle({width: ulMinWidth + 1 + 'px'});
    }
  },
  openOptions: function(event) {
    event.stop();
    if(this.selectElement.hasClassName('fake_select_active'))
      this.closeOptions(event);
    else
      this.selectElement.addClassName('fake_select_active');

  },
  closeOptions: function(event) {
    if(this.selectElement.hasClassName('fake_select_active')) {
      event.stop();
      this.selectElement.removeClassName('fake_select_active');
    }
  },
  selectOption: function(index, event) {
    event.stop();
    var element = event.element();
    this.current.innerHTML = element.innerHTML;
    this.selectedIndex = index;
    this.closeOptions(event);
    if(this.onChangeFn)
      this.onChangeFn(this.value());
  },
  setSelectedOption: function(index) {
    var selectedOption = null;
    for(var i = 0; i < this.selectOptions.length; ++i){
      if(this.selectOptions[i].getValue() == index) {
      this.selectedIndex = i;
        selectedOption = this.selectOptions[i];
      }
    }
    if (selectedOption) {
      this.current.innerHTML = selectedOption.getKey();
      if(this.onChangeFn) {
        this.onChangeFn(this.value());
      }
    }
  },
  setWidth: function() {
    var ulMinWidth = this.selectElement.getWidth();
    if (ulMinWidth > 0) {
      this.current.setStyle({width: ulMinWidth-27 + 'px'});
      // Set ul width to be at least the width of the select
      if(this.selectElement.select('ul')[0].getWidth() < ulMinWidth) {
        this.selectElement.select('ul')[0].setStyle({width: ulMinWidth + 1 + 'px'});
      }
    }
  },
  hoverEffect: function(event) {
    event.stop();
    var element = event.element();
    if(element.hasClassName('fake_select_option_active'))
      element.removeClassName('fake_select_option_active');
    else
      element.addClassName('fake_select_option_active');
  },
  value: function() {
    return this.selectOptions[this.selectedIndex].getValue();
  },
  setOnChangeFunction: function(fn) {
    this.onChangeFn = fn;
  }
});