/*
	Class: Focus
		Highlights active field in a form and allows to add a class to every fields, except radio and checkbox


	Parameters:
		form_id - The id of the formular. By default it is 'mainform'.
		setBorder - If you want to add a class to each fields, except radio and checkbox.
		elementClass - The class to apply to each fields. By default it is 'input_f'.
		txtcolor - Text color when it is highlighted.
		bgcolor - Background-color when it is highlighted.
		duration - Duration of the fade effect.
		
		
	Exemple:
		You can initialize a focus by adding this in your html head this code :
		
		(code)
		<script type="text/javascript">
			window.addEvent('domready', function() {
				var myFocus = new Focus({
					form_id : 'mainform',
					setBorder : true,
					txtcolor : '#000000',
					bgcolor : '#ffffff',
					elementClass : 'input_f',
					duration : 742
				});
			});
		</script>
		(end code)
	
	About:
		focus.js v.1.0 for mootools v1.1 05 / 2007
		
		by Floor SA (http://www.floor.ch) MIT-style license
		
		last modified by Luca Pillonel 30.05.12
	
	
*/
var Focus = new Class({
	/*
	focus.js v.1.0 for mootools v1.1
	by Floor SA (http://www.floor.ch) - MIT-style license
	05 / 2007
	*/

	options : {
		form_id :		'mainform',	// Formular ID
		setBorder : 	true,		// 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 = [];
		$ES('input, textarea, select', this.options.form_id).each(function(el){
			switch(true) {
				case el.getTag() == 'input' && el.type == 'text' : 
					this.elementArray.push(el);
					break;
				case el.getTag() == 'input' && !el.type : 
					this.elementArray.push(el);
					break;
				case el.getTag() == 'textarea' :
					this.elementArray.push(el);
					break;
				case el.getTag() == '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.Styles(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]
		});
	}
});

Focus.implement(new Options);

// window.addEvent('domready', function() {
//	var focus = new Focus({form_id : 'mainform', setBorder : true, txtcolor : '#000000', bgcolor : '#ffffff', elementClass : 'input_f', duration : 742});
// });