//This is where the magic happens


//this first bit of code makes sure that the code inside
//fires when the dom is ready
window.addEvent('domready', function() { 

	//first lets add an event to our user_name input
	$('ename').addEvent('keyup',function(){
	
		//$('user_name') will grab any element with the ID of user_name
		//We added the event keyup which will fire our event every time
		//a user releases a key inside our user_name input field
		
		//lets only fire the event after the user has inputed more than 3 characters
		
		//first, grab the value of our user_name input
		var input_value = this.value; 
		
		//check if the length of the user_name input value is > 3
		if(input_value.length > 3){ //alert(input_value)
		
			//build the request
			new Request.JSON({ 
				url: "../inc/php/json.php", 
				onSuccess: function(response){ //alert("json")
					
					//did it return as good, or bad?
					if(response.action == 'success'){ //alert("success")
					
						//username is available
						$('ename').removeClass('error');
						$('ename').addClass('success');
						
						//update the response p
						$('response').set('html','<img src="../ico_check_blu.gif"><font color="green"><em>'+response.ename+'</em> is Available</font>');
						
						//activate the button
						$('submit_button').disabled = false;
						$('submit_button').removeClass('disabled');
						$('submit_button').addClass('blue');
						
					}else{ //alert("fail")
					
						//username is taken
						$('ename').removeClass('success');
						$('ename').addClass('error');
						
						//update the response p
						$('response').set('html','<img src="../ico_cross_org.gif"><font color="green"><em>'+response.ename+'</em> is not available. Please choose another!</font>');

						//disable the button
						$('submit_button').disabled = true;
						$('submit_button').removeClass('blue');
						$('submit_button').addClass('disabled');
						
					
					}
					
				}
			}).get($('signup'));

		}
		
		//lets hide the response p if the user mouses off the input and it's empty
		$('ename').addEvent('blur',function(e){ //alert("hello")
		
			if(this.value == ''){
			
				$('ename').removeClass('success');
				$('ename').removeClass('error');
				$('response').set('html','');

				$('submit_button').disabled = true;
		    	$('submit_button').removeClass('blue');
		    	$('submit_button').addClass('disabled');
				
			}
		
		});
		
	});




});