var IComment = Class.create({
  initialize: function(commentLink, optionId, container) {
    this.container = $(container);
    this.optionId = optionId;
    this.commentLink = $(commentLink);
    this.linkClickHandler = this.linkClick_delegate.bindAsEventListener(this);
    this.commentLink.observe('click', this.linkClickHandler);
    $(this.commentLink.parentNode).show();
  },
  linkClick_delegate: function(evt) {
    $(this.commentLink.parentNode).hide();
    if (this.commentDiv == null) {
      this.createCommentDiv();
    } else {
      Effect.SlideDown(this.outerDiv, { duration: 0.5 });
    }
    Event.stop(evt);
    return false;
  },
  hideCommentDiv: function() {
    Effect.SlideUp(this.outerDiv);
    Effect.Appear($(this.commentLink.parentNode), {duration: 0, queue: 'end'});
  },
  createCommentDiv: function() {
    this.outerDiv = new Element('div', {'class': 'tp_comments_wrapper', style: 'display: none'});
    this.commentNubDiv = new Element('div', {style: "", 'class': 'sprite-comment-pointer'});
    this.commentDiv = new Element('div', {style: "margin-bottom: 30px;"});
    this.commentDiv.addClassName('tp_comments rounded_corners');   
    this.loadingDiv = new Element('div', {style: "display: none;"});
    this.loadingDiv.addClassName('comment_loading_div');
    this.loadingImg = new Element('img', {src: "/images/ajax-loader-orange-small-reverse.gif"});

    this.loadingDiv.appendChild(this.loadingImg);
    this.container.appendChild(this.loadingDiv);
    this.outerDiv.appendChild(this.commentNubDiv);
    this.outerDiv.appendChild(this.commentDiv);
    this.container.appendChild(this.outerDiv);
    
    this.loadingDiv.show();
    
    var me = this;
    
    new Ajax.Updater(this.commentDiv, this.commentLink.href, {
      parameters: { id: this.optionId },
      evalScripts: true,
      onLoading: function() {},
      onComplete: function() {
        Effect.SlideDown(me.outerDiv, { duration: 0.5 });
        me.loadingDiv.hide();
      }
    });
  }
});