var Comment = new Class ({
  total: 3,
  initialize: function(element) {
    var extras = {
      duration:600,
      onComplete: function(){
        if(this.to[0].value < 0.1) this.element.dispose()
      }
    }
    this.element = $(element).set({tween: extras}).fade('hide').dispose()
    this.trans = new Element("div",{
      styles:{
        background:"#000",
        position:"absolute",
        left:0,
        top:0,
        width:"100%",
        cursor:"pointer"
      },
      events:{
        click: this.stop.bind(this)
      },
      tween: extras
    }).fade('hide');
    this.resizer = this._resize.bind(this)
    this.scroller = new Fx.Scroll(window, {offset:{y:-10,x:0}})
  },
  go: function(e) {
    e.stop()
    if(e.target.get('html').test(/cancel/i)) {
      this.stop()
      return
    }
    var el = e.target.set('html', 'Cancel')
    var tid = el.getParent('.topic').get('id')
    this.element.getElement('input[id=topic_id]').set('value', tid.replace(/^./,''))
    this.element.getElement('textarea').set({value:''})
    this.former = this._form.bindWithEvent(this, tid)
    this.element.getElements('form').addEvent('submit', this.former)
    this.element.inject(el, 'after');
    this.trans.inject(document.body)
    window.addEvent('resize', this.resizer);
    this._resize();
    this.scroller.toElement(el.getParent('.container'))
    this.clone = el.getParent('.container').setStyles({position:'relative', zIndex:1})
    this.trans.fade(.64);
    this.element.fade();
  },
  stop: function() {
    window.removeEvent('resize', this.resizer);
    this.element.getElements('form').removeEvent('submit', this.former)
    var test = this.element.getPrevious()
    test.set('html', 'Comment')
    this.clone.setStyles({zIndex:0})
    this.trans.fade(0);
    this.element.fade(0);
  },
  _form: function(e, id) {
    e.stop()
    var form = e.target.set('send', {onSuccess: 
      function(comment){
        var c = new Element('div', {html: comment})
        var container = $(id).getElement('div.comments')
        var comments = container.getElements('.comment')
        container.grab(c, 'top')
        //Deal with new login
        if(this.element.getElement('.user input')) {
          var name = this.element.getElement('input[id=user_name]').get('value')
          this.element.getElement('.user').empty().grab(new Element('h3', {html: 'Logged in as '+name}))
        }
        //Check for the left overs
        if(comments.length == this.total) {
          comments.getLast().destroy()
          var a = container.getElement('a')
          if(a)
            a.set('html', a.get('html').replace(/(\d+)/, function(d) { return d.toInt() + 1}))
          else
            new Element('a', {href:'/topics/'+id, html:'and 1 more...'}).inject(container)
        }
      }.bind(this)
    });
    form.send()
    this.stop()
  },
  _resize: function() {
    this.trans.setStyles({
      height: window.getScrollHeight()
    });
  }
});