var NewDebateResponse = Behavior.create({
  initialize:function(){
    var _blankOrUnchanged = function(element) {
      return(element.getValue().blank() || element.getValue().match("^ex:"))
    };

    var _handleFocusAndBlur = function(message, input) {
      if (input.getValue().blank()) { input.value = message; }
      input.observe('focus', function(evt) { if (_blankOrUnchanged(input)) { input.value = ''; } });
      input.observe('blur', function(evt) { if (_blankOrUnchanged(input)) { input.value = message; } });
    };

    var enableUrlInputPrompt = function(input) {
      var message = 'ex: Provide a URL like http://www.youtube.com/watch?v=lk2MyHFOGMU';
      _handleFocusAndBlur(message, input);
    };

    var enableArgumentInputPrompt = function(input) {
      var message = 'ex: Now, enter an argument that supports the proof you provided in the URL above.';
      _handleFocusAndBlur(message, input);
    };

    var _generateUrlInput = function() {
      var input = new Element('input', {name: 'proof[url][]', type: 'text'});
      enableUrlInputPrompt(input);
      return input;
    };

    var _generateArgumentInput = function() {
      var input = new Element('textarea', {name: 'proof[argument][]'});
      enableArgumentInputPrompt(input);
      return input;
    };

    var clickObserver = function(button, container, evt) {
      var proofDiv = new Element('div', {'class': 'proof'});
      proofDiv.insert(new Element('div').update('Link/Source'));
      proofDiv.insert(new Element('div').insert(_generateUrlInput()) );

      proofDiv.insert(new Element('div').update('Argument'));
      proofDiv.insert(new Element('div').insert(_generateArgumentInput()) );

      var removeLink = new Element('a', {'href': '#remove_proof', 'class':'remove_proof_button'}).update(
        new Element('img', { 'src':'/images/widget_icons/delete_proof.png' }));
      removeLink.observe('click', Element.remove.curry(proofDiv));
      proofDiv.insert(new Element('div', {'class':'proof_button'}).insert(removeLink) );

      container.insert( { after: proofDiv } );
      evt.stop();
    };

    $$('a.new_proof_button').each(function(button) {
      button.observe('click', clickObserver.curry( button, button.up().up() ));
    });

    $$('a.remove_proof_button').each(function(button) {
      button.observe('click', Element.remove.curry( button.up().up() ));
    });

    $$(".proof input[type='text']").each(function(el) { enableUrlInputPrompt(el); });
    $$(".proof textarea").each(function(el) { enableArgumentInputPrompt(el); });
  }
});

var DebateProof = Behavior.create({
  initialize: function(proof) {
    this._manager = this.element.up(".proof");
    this.url_html = this._manager.down('.url_html');
    this.argument = this._manager.down('.argument');
    this.editor = this._manager.down('.proof_editor');
    this.editor_button = this._manager.down('.edit_proof_button');
    this.editor_form = this._manager.down('.edit_debate_proof');
    this.error_explanation = this.editor.down('.errorExplanation');
    this.delete_button = this._manager.down('.delete_proof_button');
    this._registerHandlers();
  },

  _registerHandlers: function() {
    this.editor_button.observe('click', this._toggleEditor.bind(this) );
    this.delete_button.observe('click', this._handleDelete.bind(this) );
    this.editor_form.observe('submit', this._handleSubmit.bind(this) );
  },

  _toggleEditor: function(evt) {
    [this.url_html, this.argument, this.editor].each(function(c) { c.toggle(); });
    this.editor_button.update( this.editor.visible() ? 'Cancel' : 'Edit');
    if (evt) { evt.stop(); }
  },

  _handleSubmit: function(evt) {
    $(this.editor_form).request({ evalJSON: 'force', onSuccess: this._handleSubmitSuccess.bind(this),
      onFailure: this._handleSubmitFailure.bind(this) });
    evt.stop();
  },
  
  _handleSubmitSuccess: function(transport) {
    this.url_html.update(transport.responseJSON.url_html);
    this.argument.update(transport.responseJSON.argument);
    this.error_explanation.update('');
    this._toggleEditor();
  },
  
  _handleSubmitFailure: function(transport) {
    this.error_explanation.update(transport.responseJSON.error)
  },

  _handleDelete: function(evt) {
    new Ajax.Request(this.delete_button.readAttribute('data-url'), {
      method: 'delete', evalJSON: 'force',
      parameters: {'authenticity_token': this.delete_button.readAttribute('data-token')},
      onSuccess: this._handleDeleteSuccess.bind(this),
      onFailure: this._handleDeleteFailure.bind(this)
    });
    evt.stop();
  },
  
  _handleDeleteSuccess: function(transport) {
    $('debate_proof_' + transport.responseJSON.id).remove();
    window.location.reload();
  },
  
  _handleDeleteFailure: function(transport) { console.log(transport); }
});


Event.addBehavior({
  'body.debates .proof .admin': DebateProof,
  'body.debates form#new_debate_response': NewDebateResponse
});