var PersonAutoComplete = Behavior.create({
  initialize: function() {
    this.text_field = this.element;
    this.spinner = Application.addSpinnerTo(this.text_field);
    this.spinner.hide();
    
    var people_path = "/people.js";
    if(this.text_field.getAttribute("data-path")){
      people_path = this.text_field.getAttribute("data-path");
    }

    var autofill_choices = this.text_field.next('.person_autofill_choices');
    if (typeof(autofill_choices) == "undefined") console.log("autofill_choices field must be a sibling to the text field");

    new Ajax.Autocompleter(this.text_field, autofill_choices, people_path, {
      method: "GET",
      paramName: "q",
      
      indicator: this.spinner,

      afterUpdateElement: function(person_name_field, list_item) {
        var field = person_name_field.getAttribute('data-id-autofill');
        var target_field = person_name_field.next("input[type=hidden][id*=" + field + "]");
        if(target_field) {
          target_field.setValue(list_item.getAttribute('data-id'));
          target_field.fire("value:changed");
        }
      }.bind(this)
    });
  }
});


PersonAutoComplete.Admin = {};
PersonAutoComplete.Admin.NewFeature = Behavior.create({
  initialize:function(){
    this.form = this.element;
    this.person_id = this.form.down("#person_id");
    this.content_type_dropdown =  this.form.down("#feature_content_type");
    this.content_dropdown = this.form.down("#feature_content_id");
    this.person_id.observe("value:changed", this.enableContentType.bind(this));
    this.content_type_dropdown.observe("change", this.loadContent.bind(this));
  },
  
  disableContent: function(){
    this.content_dropdown.selectedIndex = 0;
    this.content_dropdown.disable();
    this.content_type_dropdown.selectedIndex = 0;
    this.content_type_dropdown.disable();
  },
  
  enableContentType: function(){
    if(this.person_id.value > 0){
      this.content_type_dropdown.enable();
    } else {
      this.disableContent();
    }
  },
  
  
  loadContent: function() {
    new Ajax.Request("/admin/people/"+ this.person_id.value + "/list_content", {
      parameters: this.form.serialize(true),
      method: 'get',

      onCreate: function() {
        this.content_dropdown.up().insert({bottom: "<img class=\"spinner\">"});
        this.spinner = this.content_dropdown.up().down(".spinner");
      }.bind(this),

      onSuccess: function(response) {
        this.content_dropdown.update(response.responseText);
        this.content_dropdown.selectedIndex = 0;
        this.content_dropdown.enable();
        this.spinner.remove();
      }.bind(this),

      onFailure: function(response) {
        this.spinner.remove();
        console.log("***FAILURE loading content for new admin feature***");
        console.log(response);
      }.bind(this)
    });
  }
});

Event.addBehavior({
  '.autocomplete.person_autofill': PersonAutoComplete,
  
  /* this is here because collaborators are added via JS in an onclick handler and we need
     to tell LowPro we've inserted new elements into the DOM. When the onclick handler gets
     removed this can most likelyh be removed as well. */
  'p#add_new_collaborator a:click': function(){
    Event.addBehavior.reload();
  },

  'body.admin.features.new form.new_feature': PersonAutoComplete.Admin.NewFeature
});