// ######################################
// #  inputFocus.js for mootools v1.2+  #
// #      Highlights input fields       #
// ######################################

var inputFocus = new Class({
	
	//implements  
	Implements: [Options], 
	
	options : {
		form_id :		'mainform',	// Formular ID
		setBorder : 	false,		// Add a class to form fields (except radio and checkbox)
		txtcolor : 		'#000000',	// Txt color when active
		bgcolor : 		'#ffffff',	// Bg color when active
		elementClass : 	'input_f',	// Class to apply to all form element (except radio, checkbox)
		duration : 		742			// Fade duration
	},
	initialize: function(options){
		this.setOptions(options);	
		//to highlight
		this.elementArray = [];
		$$('input, textarea, select', this.options.form_id).each(function(el){
			switch(true) {
				case el.getElements('input') && el.type == 'text' : 
					this.elementArray.push(el);
					break;
				case el.getElements('input') && !el.type : 
					this.elementArray.push(el);
					break;
				case el.getElements('textarea') :
					this.elementArray.push(el);
					break;
				case el.getElements('select') :
					this.elementArray.push(el);
					break;
			}
		}.bind(this));
		this.addEvent();
	},
	addEvent: function(){
		this.elementArray.each(function(el){
			if(this.options.setBorder) el.addClass(this.options.elementClass);
			el.effectC = new Fx.Morph(el, {duration: this.options.duration, wait: false, transition: Fx.Transitions.quartOut});
			el.bgColor = el.getStyle('background-color');
			el.origColor = el.getStyle('color');
			el.addEvents({
				'focus': function(){this.changeBack(el);}.bind(this),
				'blur': function(){this.revertBack(el);}.bind(this)
			});
		}.bind(this));
	},
	changeBack: function(el){
		el.effectC.start({
			'background-color': [el.bgColor,this.options.bgcolor],
			'color': [el.origColor,this.options.txtcolor]
		});
	},
	revertBack: function(el){
		el.effectC.start({
			'background-color': [this.options.bgcolor,el.bgColor],
			'color': [this.options.txtcolor,el.origColor]
		});
	}
});