/**
 * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com
 * 
 * http://extjs.com/license
 * 
 * @author r.versluis@millipede.nl
 */

// reference local blank image
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

Ext.onReady( function() {

	// var w = Ext.getBody().getWidth();
		// Ext.getBody().setStyle('backgroundImage',
		// 'url(index/background/w/'+w+')');
		Ext.QuickTips.init();

		if (Ext.form.TimeField) {
			Ext
					.apply(
							Ext.form.TimeField.prototype,
							{
								disabledDaysText :"Uitgeschakeld",
								disabledDatesText :"Uitgeschakeld",
								minText :"De tijd in dit veld moet na {0} liggen",
								maxText :"De tijd in dit veld moet voor {0} liggen",
								invalidText :"{0} is geen geldige tijd - formaat voor tijd is {1}",
								format :"H:i"
							});
		}

		// for grid

		var sm1 = new Ext.grid.CheckboxSelectionModel();
		var sm2 = new Ext.grid.CheckboxSelectionModel();

		var fs = new Ext.FormPanel(
				{
					frame :true,
					title :'Formulier EP:Voorjaarsbeurs 2009',
					labelWidth :100,
					width :600,
					items : [
							{
								html :'Aanmelden EP:Voorjaarsbeurs 2009?<br/><br/>'
							},
							{
								xtype :'textfield',
								fieldLabel :'Winkel naam',
								name :'winkel',
								allowBlank :false,
								width :300
							},
							{
								xtype :'textfield',
								fieldLabel :'Contact persoon',
								name :'contact',
								allowBlank :false,
								width :300
							},
							{
								xtype :'numberfield',
								fieldLabel :'Lidnummer',
								name :'lidnummer',
								allowBlank :false,
								width :300
							},
							{
								xtype :'radio',
								labelSeparator :'',
								boxLabel :'Ja ik wil me <b>aanmelden</b> voor de beurs.',
								inputValue :'1',
								name :'aanmelding',
								listeners : {
									check : function() {
										// looks like a bug, change event should
								// have set it to false
								fs.items.get(5).checked = false;
								var cf = fs.items.get('aanmelding-fs');
								if (!cf.isVisible())
									cf.show();
								var cf = fs.items.get('afmelding-fs');
								if (cf.isVisible())
									cf.hide();
								fs.buttons[0].enable();
							}
						}
							},
							{
								xtype :'radio',
								labelSeparator :'',
								boxLabel :'Nee ik wil me <b>afmelden</b> voor de beurs.',
								inputValue :'0',
								name :'aanmelding',
								listeners : {
									check : function() {
										// looks like a bug, change event should
								// have set it to false
								fs.items.get(4).checked = false;
								var cf = fs.items.get('afmelding-fs');
								if (!cf.isVisible())
									cf.show();
								var cf = fs.items.get('aanmelding-fs');
								if (cf.isVisible())
									cf.hide();
								fs.buttons[0].enable();
							}
						}
							},
							{
								xtype :'fieldset',
								id :'aanmelding-fs',
								autoHeight :true,
								title :'Aanmelding',
								labelWidth :180,
								hidden :true,
								hideMode :'display',
								defaultType :'textfield',
								items : [
										{
											xtype :'numberfield',
											fieldLabel :'Aantal personen',
											name :'aantal',
											minValue :1,
											maxValue :100,
											allowBlank :false,
											width :30
										},
										new Ext.form.ListField( {
											fieldLabel :'Dag(en)',
											store :new Ext.data.SimpleStore( {
												id :0,
												fields : [ 'id', 'dag' ],
												data : [ [ 'vr', 'Vrijdag' ],
														[ 'za', 'Zaterdag' ],
														[ 'zo', 'Zondag' ] ]
											}),
											cm :new Ext.grid.ColumnModel( [
													sm1, {
														id :'dag',
														header :"Dag",
														fixed :true,
														menuDisabled :true,
														width :240,
														dataIndex :'dag'
													} ]),
											sm :sm1,
											width :300,
											height :90,
											name :'dag',
											iconCls :'icon-grid'
										}),
										{
											xtype :'timefield',
											fieldLabel :'Verwachte aankomsttijd',
											name :'aankomsttijd',
											minValue :'9:00',
											maxValue :'20:00',
											width :75
										},
										{
											xtype :'numberfield',
											fieldLabel :'Aantal parkeerkaarten',
											name :'parkeerkaarten',
											minValue :0,
											maxValue :100,
											width :30
										},
										new Ext.form.ListField(
												{
													fieldLabel :'Ik wil graag een afspraak met',
													store :new Ext.data.SimpleStore(
															{
																id :0,
																fields : [
																		'id',
																		'persoon' ],
																data :personen
															}),
													cm :new Ext.grid.ColumnModel(
															[
																	sm2,
																	{
																		id :'persoon',
																		fixed :true,
																		menuDisabled :true,
																		header :"Persoon",
																		width :240,
																		dataIndex :'persoon'
																	} ]),
													sm :sm2,
													width :300,
													height :150,
													name :'afspraak',
													iconCls :'icon-grid'
												}),
										{
											xtype :'radio',
											boxLabel :'Ja ik wil overnachten',
											labelSeparator :'',
											inputValue :'1',
											name :'overnachting',
											listeners : {
												check : function(ct, checked) {
													if (checked) {
														Ext
																.getCmp(
																		'overnachting-fs')
																.show();
													}
												}
											}
										},
										{
											xtype :'radio',
											boxLabel :'Nee ik wil niet overnachten',
											labelSeparator :'',
											inputValue :'0',
											checked :true,
											name :'overnachting',
											listeners : {
												check : function(ct, checked) {
													if (checked) {
														Ext
																.getCmp(
																		'overnachting-fs')
																.hide();
													}
												}
											}
										},
										{
											xtype :'fieldset',
											autoHeight :true,
											hidden :true,
											labelWidth :170,
											id :'overnachting-fs',
											title :'Overnachting',
											hideMode :'display',
											items : [
													{
														xtype :'datefield',
														name :'aankomst',
														width :150,
														allowBlank :true,
														fieldLabel :'Aankomst datum',
														minValue :new Date(
																2009, 1, 26),
														maxValue :new Date(
																2009, 2, 2)
													},
													{
														xtype :'datefield',
														name :'vertrek',
														width :150,
														allowBlank :true,
														fieldLabel :'Vertrek datum',
														minValue :new Date(
																2009, 1, 26),
														maxValue :new Date(
																2009, 2, 2)
													},
													{
														xtype :'numberfield',
														fieldLabel :'Aantal personen',
														name :'overnachtingpersonen',
														minValue :1,
														maxValue :100,
														allowBlank :true,
														width :30
													},
													{
														xtype :'radio',
														boxLabel :'Ja EP regelt een kamer',
														labelSeparator :'',
														inputValue :'1',
														name :'kamer',
														listeners : {
															check : function(
																	ct, checked) {
																if (checked) {
																	Ext
																			.getCmp(
																					'kamer-fs')
																			.show();
																}
															}
														}
													},
													{
														xtype :'radio',
														boxLabel :'Nee ik regel zelf mijn kamer',
														labelSeparator :'',
														inputValue :'0',
														name :'kamer',
														checked :true,
														listeners : {
															check : function(
																	ct, checked) {
																if (checked) {
																	Ext
																			.getCmp(
																					'kamer-fs')
																			.hide();
																}
															}
														}
													},
													{
														xtype :'fieldset',
														autoHeight :true,
														labelWidth :160,
														id :'kamer-fs',
														title :'Kamer',
														hidden :true,
														hideMode :'display',
														items : [
																{
																	xtype :'radio',
																	labelSeparator :'',
																	boxLabel :'1 persoonskamer (toeslag van &euro; 41 euro)',
																	inputValue :'1',
																	name :'kamertype'
																},
																{
																	xtype :'textfield',
																	name :'naam',
																	width :300,
																	fieldLabel :'Naam'
																},
																{
																	xtype :'radio',
																	labelSeparator :'',
																	boxLabel :'2 persoonskamer',
																	inputValue :'2',
																	name :'kamertype'
																},
																{
																	xtype :'textfield',
																	name :'namen',
																	width :300,
																	fieldLabel :'Namen'
																},
																{
																	xtype :'radio',
																	labelSeparator :'',
																	boxLabel :'27-02-2009 t/m 01-03-2009 voor &euro; 215,-',
																	inputValue :'1',
																	name :'kameroptie'
																},
																{
																	xtype :'radio',
																	labelSeparator :'',
																	boxLabel :'28-02-2009 t/m 01-03-2009 voor &euro; 155,-',
																	inputValue :'2',
																	name :'kameroptie'
																} ]
													} ]
										},
										{
											xtype :'checkbox',
											labelSeparator :'',
											name :'feest',
											inputValue :'1',
											boxLabel :'Ja, ik ben aanwezig op het <b>feest</b> op zaterdag 28-02-2009 van 20:00 t/m 2:00. De kosten van &euro; 65 euro p.p. zijn voor eigen rekening.'
										}, {
											xtype :'textarea',
											fieldLabel :'Opmerking',
											name :'opmerking',
											width :300,
											height :100
										} ]
							}, {
								xtype :'fieldset',
								autoHeight :true,
								id :'afmelding-fs',
								title :'Afmelding',
								hidden :true,
								autoHeight :true,
								labelAlign :'top',
								hideMode :'display',
								items : [ {
									xtype :'textarea',
									labelSeparator :'',
									fieldLabel :'Reden van afmelden?',
									name :'reden',
									width :570,
									height :150
								} ]
							} ]
				});

		// explicit add
		var submit = fs
				.addButton( {
					text :'Verzenden',
					disabled :true,
					handler : function() {
						var fo = fs.getForm();

						var data = fo.getValues();
						if (data.aanmelding == '0') {
							fo.findField('aantal').allowBlank = true;
							fo.findField('aankomst').allowBlank = true;
							fo.findField('vertrek').allowBlank = true;
							fo.findField('overnachtingpersonen').allowBlank = true;
						}

						if (!fo.isValid()) {
							return;
						}
						fo
								.submit( {
									url :'index/aanmelding',
									success : function() {
										document.location = 'index/bedankt/';
									},
									failure : function(form, action) {
										alert('Er is iets mis gegaan met het versturen!\nProbeer het later opnieuw.');
									},
									waitMsg :'Bezig met verzenden...'
								});
					}
				});

		fs.render('formulier-ct');
	});

Ext.form.ListField = Ext.extend(Ext.grid.GridPanel, {
	isFormField :true,
	input :null,
	border :true,
	borderWidth :1,
	validate : function() {
		return true;
	},
	onRender : function(ct, position) {
		Ext.form.ListField.superclass.onRender.apply(this, arguments);

		this.el.addClass('x-form-listfield');

		var na = this.name || this.id;
		this.input = this.el.createChild( {
			tag :"input",
			type :"hidden",
			name :na
		});

		var sm = this.getSelectionModel();
		sm.on("selectionchange", this.onSelectionChange, this);
	},
	onSelectionChange : function(sm) {
		var ary = [];
		sm.each( function(item) {
			ary.push(item.id);
		});
		this.input.set( {
			value :ary.join(',')
		});
	},
	getValue : function() {
		var ary = [];
		sm.each( function(item) {
			ary.push(item.id);
		});
		return ary.join(',');
	},
	getName : function() {
		return this.name;
	},
	onDestroy : function() {
		this.input.remove();
		this.input = null;
		Ext.form.ListField.superclass.onDestroy.call(this);
	}
});

Ext.grid.CheckColumn = function(config) {
	Ext.apply(this, config);
	if (!this.id) {
		this.id = Ext.id();
	}
	this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype = {
	init : function(grid) {
		this.grid = grid;
		this.grid.on('render', function() {
			var view = this.grid.getView();
			view.mainBody.on('mousedown', this.onMouseDown, this);
		}, this);
	},

	onMouseDown : function(e, t) {
		if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
			e.stopEvent();
			var index = this.grid.getView().findRowIndex(t);
			var record = this.grid.store.getAt(index);
			record.set(this.dataIndex, !record.data[this.dataIndex]);
		}
	},

	renderer : function(v, p, record) {
		p.css += ' x-grid3-check-col-td';
		return '<div class="x-grid3-check-col' + (v ? '-on' : '')
				+ ' x-grid3-cc-' + this.id + '">&#160;</div>';
	}
};