// First off, we want to take advantage of Remote.Form
// We are going to inherit from that existing behavior
// which comes built in with low-pro
CommentForm = $.klass(Remote.Form, {
  
    // When inheriting from an existing behavior
    // we can use the special variable called $super, 
    // which gives us a reference to the behavior's parent. 
    // You can use $super anywhere a parent already defines
    // a function.
    
    // In this case, we are inheriting from Remote.Form
    // which in turn inherits from Remote.Base.
    // We want to make sure the initialize function
    // in Remote.Base gets called, as it automagically binds
    // our ajax callbacks
    initialize : function($super,options) {
      
      // initialize is called when you first attach a behavior 
      // to an element or a group of elements.
      // A common pattern is to define some variables here
      // to be used in other actions/methods of the behavior

      // Our submit button
      this.submitButton = $('.comment_submit', this.element);
      
      // Our submit button's original text
      this.submitText = this.submitButton.val();
      
      // The "loading" spinner
      this.spinner = $('.small_spinner',this.element);
      
      // The box that contains our result message
      this.resultBox = $('.comment_waiting', this.element);
      
      // The text area we want to clear on success
      this.textarea = $('textarea', this.element);
      
      // E.T. phone home
      $super();
    },

    // You may be wondering where the onclick handler is...
    // It is already defined for us in Remote.Form 


    // The next 4 functions are automagically bound
    // to the ajax call that Remote.Form makes
    
    // before sending, show the spinner and disable the form
    beforeSend:function(){
      this.spinner.show();
      this.disable();
    },
    
    // after sending, hide the spinner and enable the form
    complete:function(){
      this.spinner.hide();
      this.enable();
    },
    
    // on success, fill our result box with some 'feel good' text
    success:function(){
      this.resultBox.text('Submitted, thanks!').fadeIn(100);
      this.textarea.val('');
    },
    
    // on error, fill our result box with an error message
    error: function(){
      this.resultBox.text("Didn't work. Try again?").fadeIn(100);
    },
    
    // These two functions disable/enable the form and toggle 
    // the text of the submit button 
    disable:function(){
      this.submitButton.attr('disabled','disabled').
        val('sending comment...');
    },
    enable:function(){
      this.submitButton.removeAttr('disabled').
        val(this.submitText);
    }
});

jQuery(function($) {
  // Find all of my comment forms and give them my behavior
  $('div.comment_form form').attach(CommentForm);
});

Track = $.klass({  
  // ...my track implementation...
  
  // I want to create the CommentForm behavior on the fly.
  // I'm going to call this function somewhere else in the Track Behavior
  openCommentForm : function(){
    // I use .attachAndReturn() because I want this.commentForm 
    // to refer directly to this instance so I can "talk to it" later.
    // Also, notice that attachAndReturn is handing me back an array
    this.commentForm = $('.comment_form form',this).attachAndReturn(CommentForm)[0];
  }
});