var  UserNameInput=Class.create();



UserNameInput.prototype={
	color:0,
	defcolor:0,
    initialize:function(input){
		    
        this.input=$(input);
        
        
        if(this.color = this.input.getAttribute("data-color"))
        {
        	this.defcolor = this.input.getStyle("color");
        	this.input.style.color = this.color;
        }
        

        Event.observe(this.input, "focus", this.clear.bind(this));

        Event.observe(this.input, "blur", this.checkRestore.bind(this));

    },

    clear:function(){

        this.input.removeClassName("text_input");
        this.input.style.background = "white";
        
        if(this.color)
        {
        	this.input.style.color = this.defcolor;
        }

        if(!this.preset || this.preset==this.input.value){

            this.preset=this.input.value;

            this.input.value="";

        }

    },

    checkRestore:function(){

        this.input.addClassName("text_input");
        this.input.style.background = "transparent";

        if(this.input.value==""){

            this.input.value=this.preset;
            
            if(this.color)
        	{
        		this.input.style.color = this.color;
       		}

        }

    }

}

document.observe('dom:loaded', function () {

    inputs=$$(".text_input");

    inputs.each(function(input){new UserNameInput(input)});

});