// Designed to work with Prototype version 1.6
var StatesMenu = Class.create({
  initialize: function (lang, options) {
    this.lang = lang;

    this.options = options || {}
    this.countries_id = this.options.countries_id || 'countries_select';
    this.states_id    = this.options.states_id    || 'states_select';
    this.path         = this.options.path         || "/assets/states";
    this.disable      = this.options.disable      || false;
    
    this.country_hash = new Hash();
    this.countries_select = $(this.countries_id);
    this.country_default  = this.countries_select.readAttribute('data-value');
    
    this.states_container = $(this.states_id);
    this.states_select    = this.states_container.tagName == 'SELECT' ? this.states_container : this.states_container.down('select');
    this.state_default    = this.states_select.readAttribute('data-value');
    
    this.hideStatesContainer();
    this.fetchCountryList();
  },
  hideStatesContainer: function () {
    if (this.disable) {
      this.states_select.disable();
    } else {
      this.states_container.hide();
    }
  },
  showStatesContainer: function () {
    if (this.disable) {
      this.states_select.enable();
    } else {
      this.states_container.show();
    }
  },
  fetchCountryList: function () {
    var path = this.path + '/countries.' + this.lang + '.json';

    new Ajax.Request(path, {
      method: 'get',
      onSuccess: this.countryDataCallback.bind(this)
    });
  },
  countryDataCallback: function (transport) {
    this.country_orig_size = this.countries_select.options.length;
    this.country_data = transport.responseText.evalJSON(true);
    this.country_data.each(this.newCountyOption.bind(this));
    
    if (this.country_default) {
      this.countries_select.value = this.country_default;
      this.countryChange(null);
      this.country_default = null;
    }

    this.countries_select.observe('change', this.countryChange.bind(this));
  },
  newCountyOption: function (e) {
    var hash    = $H(e);
    var country = hash.keys()[0];
    var option = new Element("option", {value: country});
    option.update(country);
    this.country_hash.set(country, hash.values()[0]);
    this.countries_select.insert(option);
  },
  countryChange: function (e) {
    this.hideStatesContainer();
    this.states_select.childElements().each(this.removeStateOption.bind(this));
    this.states_select.value = null;
    
    var first_option = this.states_select.childElements().first();
    var country = this.countries_select.getValue();
    var state   = this.country_hash.get(country);
    
    if (!state && first_option) {
      var no_state_value = first_option.readAttribute('data-no-state');
      first_option.value = no_state_value;
      this.states_select.value = no_state_value;
      return false;
    } else if (!state) {
      return false;
    } else {
      first_option.value = "";
    }
    
    var path = this.path + '/' + state + '.' + this.lang + '.json';
    
    new Ajax.Request(path, {
      method: 'get',
      onSuccess: this.stateDataCallback.bind(this)
    });
  },
  removeStateOption: function (e, i) {
    if (i >= this.country_orig_size) e.remove();
  },
  stateDataCallback: function (transport) {
    var state_data = transport.responseText.evalJSON(true);
    state_data.each(this.newStateOption.bind(this));
    
    if (this.state_default) {
      this.states_select.value = this.state_default;
      this.state_default = null;
    }

    this.showStatesContainer();
  },
  newStateOption: function (e) {
    var option = new Element('option', {value: e});
    option.update(e);
    this.states_select.insert(option);
  }
});