var areaForm = Class.create({
  initialize: function() {
    this.stateSelect = $('state_cd');
    this.addSelectLink = $('add_select_link');
    Element.hide(this.addSelectLink);
    $$('.local_area_select').each( function(target) {
      var link = Builder.node('a', { href: 'javascript:areaform.removeLocalAreaSelect(\'' + target.id  + '\');' }, '条件を削除');
      Element.insert(target, link);
    }.bind(this));
    $$('.local_area_cd').each( function(target) {
      Event.observe(target, 'change', this.selectLocalArea);
    }.bind(this));
    this.requestItemData();
  },

  requestItemData: function() {
    this.loadingStart();
    new Ajax.Request('/master_data/part/state_local_area,local_area_city,local_area_cd,city_cd.js', {
      method: 'get',
      onSuccess: function(res) {
        var result = $H(res.responseText.evalJSON());
        this.stateLocalArea = $H(result.get('state_local_area'));
        this.localAreaCity = $H(result.get('local_area_city'));
        this.localAreaCd = $H(result.get('local_area_cd'));
        this.cityCd = $H(result.get('city_cd'));
        this.loadingFinish();
        this.setupLocalAreaSelect();
        this.checkAddSelectLink();
      }.bind(this)
    });
  },

  loadingStart: function() {
    Element.insert(this.addSelectLink, { before:Builder.node('input', { type:'hidden', id:'state_cd_hidden', name:'state_cd', value:this.stateSelect.value }) });
    Element.insert(this.addSelectLink, { before:Builder.node('p', { id:'area_form_now_loading' }, 'データ読み込み中...') });
    this.stateSelect.disabled = true;
  },

  loadingFinish: function() {
    this.stateSelect.disabled = false;
    Element.remove($('state_cd_hidden'));
    Element.remove($('area_form_now_loading'));
  },

  setupLocalAreaSelect: function() {
    if (this.stateSelect.value) {
      $$('.local_area_cd').each( function(target) {
        if (target.disabled) {
          this.clearOptions(target);
          if (this.stateLocalArea.get(this.stateSelect.value)) {
            var label = 'こだわらない';
            var selectDisable = false;
          } else {
            var label = '詳細エリアはありません';
            var selectDisable = true;
          }
          this.insertDefaultOption(target, label);
          this.insertLocalAreaOption(target);
          target.disabled = selectDisable;
        }
      }.bind(this));
    }
  },

  addLocalAreaSelect: function() {
    Element.insert(this.addSelectLink, { before: this.createLocalAreaSelect() });
    this.checkAddSelectLink();
  },

  removeLocalAreaSelect: function(id) {
    Element.remove($(id));
    this.checkAddSelectLink();
  },

  createLocalAreaSelect: function() {
    var idNum = this.getNextIdNum();
    var item = Builder.node('p', {
      id: 'local_area_select_' + idNum, className: 'delSearch delSearch02 local_area_select'
    });
    var select = Builder.node('select', {
        id: 'local_area_cd_' + idNum, className: 'local_area_cd', name: 'local_area_cd[]'
    });
    if (this.stateSelect.value) {
      if (this.stateLocalArea.get(this.stateSelect.value)) {
        var label = 'こだわらない';
        var selectDisable = false;
      } else {
        var label = '詳細エリアはありません';
        var selectDisable = true;
      }
    } else {
      var label = '選択してください';
      var selectDisable = true;
    }
    this.insertDefaultOption(select, label);
    this.insertLocalAreaOption(select);
    select.value = '';
    if (selectDisable) {
      select.disabled = true;
    }
    var link = Builder.node('a', { href: 'javascript:areaform.removeLocalAreaSelect(\'local_area_select_' +idNum  + '\');' }, '条件を削除');
    Element.insert(item, select);
    Element.insert(item, '\n');
    Element.insert(item, link);
    Event.observe(select, 'change', this.selectLocalArea);
    return item;
  },

  insertLocalAreaOption: function(select) {
    var state = this.stateSelect.value;
    if (state) {
      $A(this.stateLocalArea.get(state)).each( function(localarea) {
        Element.insert(select, Builder.node('option', { value: localarea, className:'local_area' }, '■ ' + this.localAreaCd.get(localarea)));
        var cities = $A(this.localAreaCity.get(localarea));
        if (cities.size() > 1) {
          cities.each( function(city) {
            Element.insert(select,Builder.node('option', { value:city, className:'city' }, '└ ' + this.cityCd.get(city)));
          }.bind(this));
        }
      }.bind(this));
    }
  },

  clearLocalAreaSelect: function() {
    $$('.local_area_select').each( function(target) {
      this.removeLocalAreaSelect(target.id);
    }.bind(this));
  },

  checkAddSelectLink: function() {
    if ($$('.local_area_select').length < 5 && this.stateSelect.value && this.stateLocalArea.get(this.stateSelect.value)) {
      Element.show(this.addSelectLink);
    } else {
      Element.hide(this.addSelectLink);
    }
  },

  selectState: function() {
    var value = this.stateSelect.value;
    this.clearLocalAreaSelect();
    this.addLocalAreaSelect();
    this.checkAddSelectLink();
  },

  selectLocalArea: function(e) {
    var select = Event.element(e);
    var target = select.options[select.selectedIndex];
    if (Element.hasClassName(target, 'local_area')) {
      select.name = 'local_area_cd[]';
    } else {
      select.name = 'city_cd[]';
    }
  },

  insertDefaultOption: function(select, label) {
    var option = Builder.node('option', { value:'' }, label);
    Element.insert(select, option);
    return option;
  },

  clearOptions: function(select) {
    while(select.childNodes.length > 0) {
      select.removeChild(select.lastChild);
    }
  },

  getNextIdNum: function() {
    return this.getLastIdNum() + 1;
  },

  getLastIdNum: function() {
    var area_set = $$('.local_area_select');
    if (area_set.length == 0) {
      return 0;
    }
    return this.getIdNum(area_set.last());
  },

  getIdNum: function(target) {
    return parseInt(target.id.split('_').last());
  }
});