var availCheck = new Class({
	Implements: [Options],

	options: {
		trigger: 'keyup',
		offset: { x:0, y:0 },
		element: '',
		minLength: 3,
		availableClass: 'available',
		takenClass: 'taken',
		availableImage: '',
		takenImage: '',
		url: 'includes/username_check.php',
		containerDivForImage: 'usernamechecker'
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.validate();
	},
	
	//a method that does whatever you want
	validate: function() {
		this.options.element.addEvent(this.options.trigger,function() {
			if(this.options.element.value.length >= this.options.minLength) {
				var othis = this;
				var request = new Request({
					url: othis.options.url,
					method: 'get',
					data: {
						username: othis.options.element.value,
						ajax: 1
					},
					onRequest: function() {
						//remove existing classes
						othis.options.element.removeClass(othis.options.availableClass).removeClass(othis.options.takenClass);
					},
					onComplete: function(response) {
						//add class
						othis.options.element.addClass(response == 1 ? othis.options.availableClass : othis.options.takenClass);
						othis.injectImage(response == 1 ? othis.options.availableImage : othis.options.takenImage, othis.options.containerDivForImage);
					}
				}).send();
			}
		}.bind(this));
	},
	
	//adds the image
	injectImage: function(image, containerDiv) {
		
		//figure out its position
		var pos = this.options.element.getCoordinates();
		
		$(containerDiv).empty();
		var img = new Element('img',{
			src: image,
			styles: {
				'position': 'absolute'
			}
		}).inject(containerDiv);
		
		
	}
	
});