var CountriesSelector = Class.create();
CountriesSelector.prototype = {
  initialize: function() {
      this.settings = Object.extend({
        countriesListContainer : "countries_list",
        countriesListClass : "all_countries_list",
        countriesListIdPre : "country_",
        countriesListIdIndex : 1,
        countriesListSelectedClass : "is_selected",
        selectedCountriesContainer : "countries_box",
        selectedClassName : "selected_countries",
        selectedIdPre : "remove_selected_country_",
        selectedIdIndex : 3,
        removeAclass : "remove_country",
        inputName : "request_for_quote[companies_country_ids][]"
      }, arguments[0] || {});

      this._init();
      this._setTemplate();
  },

  _init : function() {
    $$('.'+ this.settings.countriesListClass).each(function(item){
        Event.observe(item, 'click', this._addToSelected.bind(this));
        //Event.observe(item, 'blur', this._setCountryListBlured.bind(this));
        //Event.observe(item, 'focus', this._setCountryListFocused.bind(this));
      }.bind(this));

      $$('.'+ this.settings.removeAclass).each(function(item){
        Event.observe(item, 'click', this._removeFromSelected.bind(this));
      }.bind(this));

      this.firstCountry =  $$('.'+ this.settings.countriesListClass)[0];
      this.selectedCountriesContainer = $(this.settings.selectedCountriesContainer);
      this.countriesListContainer = $(this.settings.countriesListContainer);
      this.selectorVisible = false;

      $$('input').each(function(item){
          Event.observe(item, 'focus', this._hideCountriesListContainer.bind(this));
      }.bind(this));

      $$('textarea').each(function(item){
          Event.observe(item, 'focus', this._hideCountriesListContainer.bind(this));
      }.bind(this));

      Event.observe(this.countriesListContainer, 'focus', this._setCountryListFocused.bind(this));
      //Event.observe(this.countriesListContainer, 'blur', this._hideCountriesListContainer.bind(this));

      Event.observe(this.selectedCountriesContainer, 'focus', this._showCountriesListContainer.bind(this));
      //Event.observe(this.selectedCountriesContainer, 'blur', this._checkHideCountriesListContainer.bind(this));
  },

  _addToSelected : function(e){
      e = (e) ? e : window.event;
      el = e.element();
      if(!el.hasClassName(this.settings.countriesListSelectedClass)) {
        country_id = el.id.split('_')[this.settings.countriesListIdIndex];  
        country_name = el.innerHTML;
        to_insert = this.template.evaluate({country_id : country_id, country_name : country_name});
        this.selectedCountriesContainer.insert({bottom : to_insert})
        new_selected_country = $(this.settings.selectedIdPre+country_id);
        new_a_remove = new_selected_country.down('.'+this.settings.removeAclass);
        Event.observe(new_a_remove, 'click', this._removeFromSelected.bind(this));
        el.addClassName(this.settings.countriesListSelectedClass);
        new Effect.Appear(new_selected_country, { duration: 0.2 });
      }
      e.stop();
  },

  _setCountryListBlured : function(e) {
      this.countriesListFocused = true;
  },
  _setCountryListFocused : function(e) {
      this.countriesListFocused = false;
  },

  _showCountriesListContainer : function(e) {
      this.selectedCountriesContainer.blur();
      this.selectorVisible = true;
      //this.countriesListContainer.focus();
      this.countriesListContainer.show();
      this.firstCountry.focus();
  },

  _toggleCountriesListContainer : function(e) {
      this.countriesListContainer.toggle();
  },

  _hideCountriesListContainer : function(e) {
      if (this.selectorVisible == true) {
          this.selectorVisible = false;
          this.countriesListContainer.hide();
      }
  },

  _removeFromSelected : function(e) {
      e = (e) ? e : window.event;
      el = e.element();
      container = el.up('.'+this.settings.selectedClassName);
      country_id = container.id.split('_')[this.settings.selectedIdIndex];
      $(this.settings.countriesListIdPre+country_id).removeClassName(this.settings.countriesListSelectedClass)
      container.remove();
      /*new Effect.Fade(container, { duration: 0.2 }, {afterFinisch : function(){
        container.remove();
      }})*/

      e.stop();
  },

  _setTemplate : function() {
      template =  '<div class="'+this.settings.selectedClassName+'" id="'+this.settings.selectedIdPre+'#{country_id}" style="display: none;">';
      template += '<a href="#" class="'+this.settings.removeAclass+'">#{country_name}</a>';
      template += '<input type="hidden" name="'+this.settings.inputName+'" value="#{country_id}"';
      template += '</div>';
      this.template = new Template(template);
  }

}