gistfile1.js

var checkerUsername = new Class({
        
       /* implements */
       Implements:[Options,Events],

       /* options */
       options: {
           trigger: 'keyup',
           offset: {x: 0,y: 0},
           minLength : 5,
           availableClass: 'available',
           takenClass: 'taken',
           availableImage: '',
           loading:'', 
           takenImage: '',
           url: '/mootools/mootools1.2.x/username-checker-availability/'   
       },

       /* constructor of class - initialize */
       initialize: function(element,options) {

          //set options
          this.setOptions(options);

          //grab element
          this.element = document.id(element);

          //get value of the element
          this.lastValue = this.element.value;

          //set up cache data object
          this.cache = {};

          //get coordinates
          var pos = this.element.getCoordinates();

          //set up an image with attribute 'src' and some styles and inject it to the document.body
          this.image = new Element('img',{
                src: '', 
                styles: {
                    'z-index': 10000,
                    position: 'absolute',
                    top: pos.top + this.options.offset.y,
                    left: pos.left + pos.width + this.options.offset.x 
                } 
          }).inject(document.body);


          this.remover = function() {
               if(window.console){console.log(this.cache);}
               this.image.set('src',this.options.loading);
               this.element.removeClass(this.options.availableClass).removeClass(this.options.takenClass);
            return this;
          };

          this.comparer = function(resp) {

              this.cache[this.element.value] = resp;
              var state = (resp == '1') ? 'available' : 'taken';
              this.element.addClass(this.options[state+'Class']);
              this.image.set('src',this.options[state+'Image']);

            return state;  
          }  


          //set up a request AJAX
          this.request = new Request({
                url: this.options.url,
                method: 'get',
                link: 'cancel',
                onRequest: this.remover.bind(this),  
                onComplete: this.comparer.bind(this)
          }); 


          //attach listener for this element
          this.element.addEvent(this.options.trigger,function(){

               var value = this.element.value;
               if(value.length >= this.options.minLength && value != this.lastValue) {
                     this.validate(this.lastValue = value);
               } 
                
          }.bind(this));  

       },

       validate: function(value){
         this.fireEvent('check');
         if(this.cache[value] != undefined) {
           return this.comparer(this.cache[value]);
         } else {
           this.request.send('username='+value+'&ajax=1');
         } 
         return this;   
       }   

   });//end class checkerUsername