var myServicePrefix = './servicelayer/index.php';
var myCompetitionId = 1;


Ext.onReady(function() {
Ext.QuickTips.init();

Ext.ns('MSF');

MSF.ErrorBox = function(title, msg) {
	return {
		title: title,
		msg: msg,
		minWidth: 300,
		modal: true,
		icon: Ext.MessageBox.ERROR,
		buttons: Ext.MessageBox.CANCEL
	}
};

MSF.InfoBox = function(title, msg) {
	return {
		title: title,
		msg: msg,
		minWidth: 300,
		modal: true,
		icon: Ext.MessageBox.INFO,
		buttons: Ext.MessageBox.OK
	}
};

var countryStore = new Ext.data.JsonStore({
	url			: myServicePrefix,
	baseParams	: {
		method	: 'getAllCountries'
	},
	autoLoad	: true,
	root		: 'data.Results',
	id			: 'countrystore',
	fields		: [{name : 'CountryId', mapping : 'Id', type : 'int'}, {name : 'Country', mapping : 'Name', type : 'string'}]
});


var radioGender = {
	xtype: 'radiogroup',
	fieldLabel: MSF.locale.EnrollmentPanel.gender,
	name: 'rb_gender', 
	labelWidth: 60,
	items: [{
		boxLabel: MSF.locale.EnrollmentPanel.gender_male,
		name: 'Gender',
		inputValue: 1
	},{
		boxLabel: MSF.locale.EnrollmentPanel.gender_female,
		name: 'Gender',
		inputValue: 0
	}]
}

var myValidMailFn = function(v) {
	var myRegex = /[a-zA-Z0-9]+@.+\..+/;
	return myRegex.test(v);
};
Ext.apply(Ext.form.VTypes, {
	mailOnly: myValidMailFn,
	mailOnlyText: MSF.locale.EnrollmentPanel.mailonly
});

var enrollmentPanel = new Ext.form.FormPanel({
	renderTo: 'mainform',
	width: 600,
	title: MSF.locale.EnrollmentPanel.title,
	frame: true,
	border: false,
	bodyStyle:'padding:5px 5px 0',
	buttonAlign: 'center',
	layoutConfig: {
		align: 'stretch'
	},
	items: [{
		xtype: 'panel',
		title: '',
		border: true,
		layout: 'column',
		anchor: '100%',
		bodyStyle: 'padding:15px',
		html: MSF.locale.EnrollmentPanel.header
	},{
		xtype:'fieldset',
		autoEl: {},
		title: MSF.locale.EnrollmentPanel.fieldset_title,
		border: true,
		autoHeight: true,
		defaultType : 'textfield',
		defaults: {
			width: 400,
			allowBlank: false
		},
		items:[{
			fieldLabel: MSF.locale.EnrollmentPanel.lastname,
			name: 'Lastname',
			id: 'Lastname'
		},{
			fieldLabel: MSF.locale.EnrollmentPanel.firstname,
			name: 'Firstname',
			id: 'Firstname'
		},
		radioGender,
		{	fieldLabel: MSF.locale.EnrollmentPanel.street,
			name: 'Street',
			id: 'Street'
		},{	
			fieldLabel: MSF.locale.EnrollmentPanel.street2,
			allowBlank: true,
			name: 'Street2',
			id: 'Street2'
		},{	
			fieldLabel: MSF.locale.EnrollmentPanel.zipcode,
			width: 100,
			name: 'Zipcode',
			id: 'Zipcode'
		},{
			fieldLabel: MSF.locale.EnrollmentPanel.city,
			name: 'City',
			id: 'City'
		},{
			xtype			: 'combo',
			fieldLabel		: MSF.locale.EnrollmentPanel.country,
			name			: 'Country',
			id				: 'Country',
			store			: countryStore, 
			displayField	: 'Country',
			valueField		: 'CountryId',
		//					typeAhead		: true,
			mode			: 'remote',
			hiddenName		: 'CountryId',
			editable		: false,
			forceSelection	: true,
			triggerAction	: 'all',
			emptyText		: 'select',
			selectOnFocus	: true
		},{
			fieldLabel: MSF.locale.EnrollmentPanel.phone,
			width: 200,
			allowBlank: true,
			name: 'Phone',
			id: 'Phone'
		},{
			fieldLabel: MSF.locale.EnrollmentPanel.fax,
			width: 200,
			allowBlank: true,
			name: 'Fax',
			id: 'Fax'
		},{
			fieldLabel: MSF.locale.EnrollmentPanel.cellphone,
			width: 200,
			allowBlank: true,
			name: 'Cellphone',
			id: 'Cellphone'
		},{
			fieldLabel: MSF.locale.EnrollmentPanel.email,
			name: 'Email',
			id: 'Email',
			vtype: 'mailOnly'
		},{
			fieldLabel: MSF.locale.EnrollmentPanel.nationality,
			name: 'Nationality',
			id: 'Nationality'
		},{
			fieldLabel: MSF.locale.EnrollmentPanel.birthday,
			width: 200,
			name: 'Birthday',
			id: 'Birthday'
		},{
			xtype: 'checkbox',
			name: 'Agree',
			hiddenName: 'Agree',
			id: 'PAgree',
			fieldLabel: '',
			labelSeparator: ' ',
			boxLabel: MSF.locale.EnrollmentPanel.agree,
			inputValue: 'Agree',
			validate: function() {
				return this.el.dom.checked;
			},
			onClick: function(){
				if(this.el.dom.checked) {
		//			Ext.getCmp('btSave').enable();
				} else {
		//			Ext.getCmp('btSave').disable();
				}
			}
		},{
			hidden: true,
			hideParent: true,
			hideLabel: true,
			height: 1,
			name: 'Language',
			id: 'Language',
			value: MSF.locale.Lang.code
		},{
			hidden: true,
			hideParent: true,
			hideLabel: true,
			height: 1,
			name: 'CompetitionId',
			id: 'CompetitionId',
			value: myCompetitionId
		}]
	},{
		xtype: 'panel',
		title: '',
		border: true,
		layout: 'column',
		anchor: '100%',
		bodyStyle: 'padding:15px',
		html: MSF.locale.EnrollmentPanel.footer
	}],
/*	isValid: function() {
		return enrollmentPanel.getForm().isValid()  && Ext.getDom('PAgree').checked;
	},
*/	buttonAlign: 'left',
	buttons: 
	[{
		id: 'btSave',
		text: MSF.locale.EnrollmentPanel.save,
		//disabled: true,
		handler: function() {
			if(! enrollmentPanel.getForm().isValid()) {
				Ext.Msg.show(MSF.ErrorBox(MSF.locale.EnrollmentPanel.error_required_title, MSF.locale.EnrollmentPanel.error_required_body));
				return;
			}
			var candidateData = Ext.util.JSON.encode(enrollmentPanel.getForm().getValues());
			Ext.Ajax.request({
				url: myServicePrefix,
				method: 'POST',
				params: {
					method: 'registerCandidate',
					registration: candidateData
				},
				success: function() {
					Ext.Msg.show(MSF.InfoBox(MSF.locale.EnrollmentPanel.success_title, MSF.locale.EnrollmentPanel.success_body));
				},
				failure: function() {
					Ext.Msg.show(MSF.ErrorBox(MSF.locale.EnrollmentPanel.failure_title, MSF.locale.EnrollmentPanel.failure_body));
				}
			});
		}
	}]
});

});