var BigBoxToggler = Behavior.create({
  onclick: function(e) {
    this.toggleBox();
    if ($('comment_content').hasClassName('big')) {
      this.swapText('bigger', 'smaller');
    } else {
      this.swapText('smaller', 'bigger');
    }
    e.stop();
  },
  toggleBox: function() {
    $('comment_content').toggleClassName('big');
  },
  swapText: function(from, to) {
    this.element.innerHTML = this.element.innerHTML.replace(from, to);
  }
});

var SyntaxGuideToggler = Behavior.create({
  onclick: function(e) {
    $('syntax_guide').toggleClassName('hidden');
    e.stop();
  }
});

var CountdownUpdater = {
  update: function() {
    $$('span.countdown').each(function(e) {
      e = $(e);
      var end_time = new Date(e.down('.end_time').innerHTML);
      var start_time = new Date();
      if (start_time >= end_time) {
        e.previous().remove();
        e.remove();
      } else {
        e.down('.display').update(CountdownUpdater.distance_of_time_in_words(new Date(), end_time));
      }
    });
    setTimeout(CountdownUpdater.update, 500);
  },
  distance_of_time_in_words: function(s, e) {
    var start = Math.round(new Date(s) / 1000);
    var end = Math.round(new Date(e) / 1000);

    var minutes = Math.floor((end - start) / 60);
    var seconds = (end - start) % 60;
    return "edit available for another " + 
        CountdownUpdater.pluralize(minutes, "minute") + 
        ", " + CountdownUpdater.pluralize(seconds, "second");
  },
  pluralize: function(count, word) {
    if (count == 1) {
      return count + " " + word;
    } else {
      return count + " " + word + "s";
    }
  }
};

var NewComment = {
  onComplete: function(request) {
    var data = request.responseJSON
    if (data.errors.length > 0) {
      alert(data.errors);
    } else {
      var element = DOM.Builder.fromHTML(data.comment_html);
      $('comment_list').insert(element, {position: 'bottom'});
      element.scrollTo();
      element.highlight();
      $('comment_content').setValue('');
    }
    $('comment_submit').enable();
  },
  onCreate: function() {
    $('comment_submit').disable();
  },
  requestHeaders: {'Accept': 'application/json'}
};

var EditComment = {
  Link: {
    onComplete: function(request) {
      var comment = this.element.up('.comment');
      comment.select('form.edit_comment').each(Element.remove);

      var element = DOM.Builder.fromHTML(request.responseText);
      comment.insert(element, {position: 'bottom'});

      comment.down('.content').hide();
    }
  },
  Form: {
    Cancel: Behavior.create({
      onclick: function(e) {
        e.stop();
        var comment = this.element.up('.comment');
        comment.select('form.edit_comment').each(Element.remove);
        comment.down('.content').show();
      }
    }),
    Submit: Remote.Form({
      onComplete: function(request) {
        var data = request.responseJSON;
        if (data.errors.length > 0) {
          alert(data.errors);
          this.element.up('.comment').down('input.save').enable();
        } else {
          var comment = this.element.up('.comment');
          var newComment = DOM.Builder.fromHTML(data.comment_html);
          comment.replace(newComment);
          newComment.highlight();
        }
      },
      onCreate: function() {
        this.element.up('.comment').down('input.save').disable();
      },
      requestHeaders: {'Accept': 'application/json'}
    })
  }
};


Event.addBehavior.reassignAfterAjax = true;
Event.addBehavior({
  '#big_box_toggle': BigBoxToggler,
  '#syntax_guide_toggle': SyntaxGuideToggler,
  '#new_comment': Remote.Form(NewComment),
  'a.edit_comment': Remote.Link(EditComment.Link),
  'form.edit_comment a.cancel': EditComment.Form.Cancel,
  'form.edit_comment': EditComment.Form.Submit
});

Event.onReady(function(){
  setTimeout(CountdownUpdater.update, 500);
});