Ext.ns('Ext.ux.form');
Ext.ux.form.TimeField = function(config) {
	Ext.apply(this, config);
	/*this.fieldLabel = config.fieldLabel || 'none';
	this.labelWidth = config.labelWidth || 100;
	this.fieldWidth = config.fieldWidth || 150;*/
	
	this.initElements();
	
	var c = {
		layout: 'table',
		border: false,
		layoutConfig: {
			// The total column count must be specified here
			columns: 6
		},
		items: [this.label, this.hour, this.hSep, this.minute, this.mSep, this.second, this.horSep],
		width: this.labelWidth + this.fieldWidth + 10
	};
	Ext.ux.form.TimeField.superclass.constructor.call(this, c);
};


Ext.extend(Ext.ux.form.TimeField, Ext.Panel, {
	
	initElements : function() {
		// init values
		if (this.value) {
			var parts = this.value.split(':');
			if (!parts || !parts.length || parts.length !== 3) {
				var parts = [0, 0, 0];
			}
		} else {
			var parts = [0, 0, 0];
		}
		
		this.label = new Ext.Panel({
			html: this.fieldLabel + ': (H:i:s)',
			border: false,
			width: this.labelWidth
		});
		
		this.hour = new Ext.ux.form.Spinner({
			width: this.fieldWidth/3,
			border: false,
			value: parts[0],
			strategy: new Ext.ux.form.Spinner.NumberStrategy({minValue:0, maxValue:23})
		});
		this.hSep = new Ext.Panel({
			html: ':',
			border: false,
			width: 5
		});
		this.minute = new Ext.ux.form.Spinner({
			width: this.fieldWidth/3,
			border: false,
			value: parts[1],
			strategy: new Ext.ux.form.Spinner.NumberStrategy({minValue:0, maxValue:59})
		});
		this.mSep = new Ext.Panel({
			html: ':',
			border: false,
			width: 5
		});
		this.second = new Ext.ux.form.Spinner({
			width: this.fieldWidth/3,
			border: false,
			value: parts[2],
			strategy: new Ext.ux.form.Spinner.NumberStrategy({minValue:0, maxValue:59})
		});
		
		this.horSep = new Ext.Panel({
			height: 5,
			border: false,
			colspan: 6
		});
//this.fieldH = 	
	},
	
	getValue : function() {
		return this.hour.getValue() + ':' + this.minute.getValue() + ':' + this.second.getValue();	
	}
	
});