/**
 * @author Peter
 */
var gForm = {
	
	// Text/Numberfield configs can be applied via CSS class names in HTML.
	// First class name will be passed to this script, others will be ignored.
				 
 	configs:{

		vNumber:{
			//COMMENT:'integer'
			xtype:'numberfield',
			allowDecimals:false,
			allowBlank:false
		},

		vNumberBlank:{
			//COMMENT:'integer'
			xtype:'numberfield',
			allowDecimals:false,
			allowBlank:true
		},

		vName:{
			//COMMENT:'alpha'
			xtype:'textfield',
			allowBlank:false,
			validator:function(val){
				var r=/^([a-z\. ])+$/i;
				return r.test(val);
			}
		},

		vNameBlank:{
			//COMMENT:'alpha'
			xtype:'textfield',
			allowBlank:true,
			validator:function(val){
				var r=/^([a-z\. ])+$/i;
				return r.test(val);
			}
		},

		vEmail:{
			//COMMENT:'email'
			allowBlank:false,
			xtype:'textfield',
			vtype:'email'
		},

		vText:{
			//COMMENT:'no validation'
			allowBlank:false,
			xtype:'textfield',
			vtype:''
		},
		
		vTextArea:{
			//COMMENT:'no validation'
			allowBlank:false,
			xtype:'textarea',
			vtype:''
		}


	},
	/**
	 * init : change forms into Ext forms
	 */
	init:function(){
		Ext.QuickTips.init();
	
		!this.query ? this.query='form.convertable' : true;
		!this.markInvalid ? this.markInvalid=false : this.markInvalid=true;
		var forms=Ext.query(this.query);
		

		// arrays holding textfields (is also an array in itself), and submit buttons
		var inputs=[];
		var submit=[];
		
		// validator function for submit button (invalid disables submit button)
		function checkForm(formNr,markInvalid){
			var disabled = false;
			Ext.each(inputs[formNr], function(el){
				if (!el.isValid(!markInvalid)) {
					disabled = true;
				}
			});
			submit[formNr].setDisabled(disabled);
			return !disabled;
		};
						
		for (var i = 0, len = forms.length; i < len; i++) {
			var j=i;

			// grab old submit (the first submit button in form) and make Ext button out of it
			var el = Ext.query('input[type="submit"]', forms[i])[0];
			var firstClassName=el.className.split(' ')[0];
			var config = firstClassName ?  gForm.configs[firstClassName] : {};
			if(!config) config={};
			
			config.applyTo = el;
			config.text = el.value;

			config.handler=function(){
				if (checkForm(j, true)) {
					forms[j].submit();
				}
			}
			submit[i] = new Ext.Button(config);
			Ext.get(el).remove(); // remove old button
				
			// convert input type text into extTextfields
			inputs[i] = [];
			
			Ext.each(Ext.query('input[type="text"]',forms[i]), function(el){
				var firstClassName=el.className.split(' ')[0];
				var config = firstClassName ?  gForm.configs[firstClassName] : {};
				if(!config) config={};
				config.applyTo = el;
				config.enableKeyEvents = true;
				
				// create new ext.form.field:
				if (config.xtype && config.xtype == 'numberfield') {
					var input = new Ext.form.NumberField(config);
				} else { // so xtype == 'textfield'
					var input = new Ext.form.TextField(config);
				}
				input.on('change', function(){
					checkForm(j);
				});
				input.on('keyup', function(){
					checkForm(j);
				});
				inputs[i].push(input);
			});
			
			Ext.each(Ext.query('textarea',forms[i]), function(el){
				var firstClassName=el.className.split(' ')[0];
				var config = firstClassName ?  gForm.configs[firstClassName] : {};
				if(!config) config={};
				config.applyTo = el;
				config.enableKeyEvents = true;
				
				// create new ext.form.field:
				
				var input = new Ext.form.TextArea(config);
				input.on('change', function(){
					checkForm(j);
				});
				input.on('keypress', function(){
					checkForm(j);
				});
				inputs[i].push(input);
			});
			// init submitbutton 'validator' if markInvalid was set, also mark the fields
			checkForm(j,this.markInvalid);	
		}
	},
	
	/**
	 * setOnChangeHandlers
	 * @param {String} query DOM selector query 
	 * @param {Function} fn onChange function 
	 */
	setOnChangeHandlers:function(query,fn){
		Ext.each(Ext.query(query), function(el){
			Ext.get(el).on('change',fn);
		});		
	}
}