Ext.namespace('dynamitec');

dynamitec.App = function() {
	var Singleton = Ext.extend(Object, {
		_pages : {},
		_currentPage : '',

		init : function(pages, page) {
			if (window.location.pathname != '/') {
				window.location.href = window.location.protocol + '//'
						+ window.location.hostname + '/#'
						+ window.location.pathname.substr(1);
				return;
			}
			if (window.location.hash != '') {
				for (var i = 0; i < pages.length; i++) {
					if (pages[i].url == window.location.hash.substr(1)) {
						page = window.location.hash.substr(1);
					}
				}
			}

			Ext.get('page-content').setStyle('display', 'none');

			Ext.QuickTips.init();
			Ext.QuickTips.enable();

			Ext.form.Field.prototype.msgTarget = 'side';

			Ext.History.init();

			Ext.History.addListener('change', function(token) {
						var tabPanel = Ext.getCmp('pageTabs');

						if (token) {
							token = 'page-' + token;
						} else {
							token = 'page-index';
						}
						tabPanel.setActiveTab(token);
					});

			new Ext.Viewport({
				layout : 'ux.center',
				border : false,
				items : {
					layout : 'fit',
					// bodyStyle: 'padding:20px 0;',
					width : 780,
					border : false,
					items : {
						layout : 'border',
						border : false,
						items : [{
							id : 'header-region',
							region : 'north',
							border : false,
							height : 105,
							html : '<img src="/client/images/titelleiste.jpg" />',
							listeners : {
								render : function(component) {
									var headerRegionParent = Ext
											.get('header-region').parent()
											.createChild({
												id : 'donate-toolbar',
												tag : 'div',
												style : 'z-index:1000;position:absolute;top:10px;left:705px;width:65px'
											});

									new Ext.Toolbar({
										renderTo : 'donate-toolbar',
										items : [new Ext.Action({
											handler : function() {
												var inputFields = {
													amount : new Ext.form.NumberField(
															{
																fieldLabel : 'Betrag (in €)',
																allowBlank : false,
																minLength : 1,
																maxLength : 5,
																minValue : 0,
																maxValue : 99999,
																width : 100,
																selectOnFocus : true,
																value : '10'
															}),
													firstName : new Ext.form.TextField(
															{
																fieldLabel : 'Vorname',
																allowBlank : true,
																minLength : 1,
																maxLength : 255,
																selectOnFocus : true,
																value : ''
															}),
													lastName : new Ext.form.TextField(
															{
																fieldLabel : 'Nachname',
																allowBlank : true,
																minLength : 1,
																maxLength : 255,
																selectOnFocus : true,
																value : ''
															}),
													street : new Ext.form.TextField(
															{
																fieldLabel : 'Strasse',
																allowBlank : true,
																minLength : 1,
																maxLength : 255,
																selectOnFocus : true,
																value : ''
															}),
													plz : new Ext.form.NumberField(
															{
																fieldLabel : 'PLZ',
																allowBlank : true,
																minLength : 5,
																maxLength : 5,
																minValue : 0,
																maxValue : 99999,
																width : 100,
																selectOnFocus : true,
																value : ''
															}),
													city : new Ext.form.TextField(
															{
																fieldLabel : 'Ort',
																allowBlank : true,
																minLength : 1,
																maxLength : 255,
																selectOnFocus : true,
																value : ''
															}),
													email : new Ext.form.TextField(
															{
																fieldLabel : 'E-Mail',
																allowBlank : false,
																minLength : 1,
																maxLength : 255,
																selectOnFocus : true,
																value : '',
																vtype : 'email'
															})
												};

												var donateWindow = new Ext.Window(
														{
															title : '<div style="text-align:left">Spenden</div>',
															bodyStyle : 'text-align:left',
															defaultButton : 'donateContinueButton',
															width : 364,
															modal : true,
															resizable : false,
															bbar : [
																	new Ext.Action(
																			{
																				text : 'Abbrechen',
																				handler : function() {
																					donateWindow
																							.close();
																				}
																			}),
																	new Ext.Action(
																			{
																				id : 'donateContinueButton',
																				text : 'Weiter',
																				handler : function() {
																					var valid = true;
																					for (var index in inputFields) {
																						var inputField = inputFields[index];
																						if (!inputField
																								.isValid()) {
																							valid = false;
																						}
																					}
																					if (valid) {
																						donateWindow
																								.hide();

																						var donateAmount = inputFields.amount
																								.getValue();
																						var donatorAddress = 'Da keine vollständige Adresse angegeben wurde, kann leider keine Spendenbestätigung verschickt werden.';
																						if (inputFields.firstName
																								.getValue()
																								.trim() != ''
																								&& inputFields.lastName
																										.getValue()
																										.trim() != ''
																								&& inputFields.street
																										.getValue()
																										.trim() != ''
																								&& (inputFields.plz
																										.getValue() + '')
																										.trim() != ''
																								&& inputFields.city
																										.getValue()
																										.trim() != '') {
																							donatorAddress = inputFields.firstName
																									.getValue()
																									+ ' '
																									+ inputFields.lastName
																											.getValue()
																									+ '<br />'
																									+ inputFields.street
																											.getValue()
																									+ '<br />'
																									+ inputFields.plz
																											.getValue()
																									+ ' '
																									+ inputFields.city
																											.getValue();
																						}
																						var donatorEmail = inputFields.email
																								.getValue();

																						var donateConfirmationWindow = new Ext.Window(
																								{
																									title : '<div style="text-align:left">Spenden</div>',
																									bodyStyle : 'text-align:left',
																									defaultButton : 'donateConfirmationButton',
																									width : 364,
																									modal : true,
																									resizable : false,
																									bbar : [
																											new Ext.Action(
																													{
																														text : 'Zurück',
																														handler : function() {
																															donateConfirmationWindow
																																	.close();
																															donateWindow
																																	.show();
																														}
																													}),
																											new Ext.Action(
																													{
																														id : 'donateConfirmationButton',
																														text : 'Spende bestätigen',
																														handler : function() {
																															donateWindow
																																	.close();
																															donateConfirmationWindow
																																	.close();
																															Ext.MessageBox
																																	.wait('Bitte warten...');
																															Ext.Ajax
																																	.request(
																																			{
																																				url : '/api/donate',
																																				success : function(
																																						response,
																																						options) {
																																					var responseDecoded = Ext.util.JSON
																																							.decode(response.responseText);
																																					if (responseDecoded.success) {
																																						var donateBankSubject = 'Spende '
																																								+ responseDecoded.donationId;

																																						var donateTransferredWindow = new Ext.Window(
																																								{
																																									title : '<div style="text-align:left">Spendenbestätigung</div>',
																																									bodyStyle : 'text-align:left',
																																									defaultButton : 'donateCloseButton',
																																									width : 364,
																																									modal : true,
																																									resizable : false,
																																									bbar : [
																																											new Ext.Action(
																																													{
																																														id : 'donateCloseButton',
																																														text : 'Schließen',
																																														handler : function() {
																																															donateTransferredWindow
																																																	.close();
																																														}
																																													}),
																																											new Ext.Action(
																																													{
																																														text : 'Mit Sofortüberweisung spenden',
																																														handler : function() {
																																															var sofortueberweisung = window
																																																	.open(
																																																			encodeURI('/sofortueberweisungspende/'
																																																					+ donateAmount
																																																					+ '/'
																																																					+ donateBankSubject),
																																																			'Sofortüberweisung',
																																																			'width=800,height=820,scrollbars=yes');
																																															sofortueberweisung
																																																	.focus();
																																														}
																																													})],
																																									items : [new Ext.Panel(
																																											{
																																												bodyStyle : 'padding:5px;text-align:left',
																																												html : 'Vielen Dank für Ihre Spende!<br /><br />Bitte überweisen Sie die Spende auf folgendes Konto:<br /><br />Empfänger: Kinder von der Straße e.V.<br />Kontonumer: 626350018<br />BLZ: 61490150<br />VR Bank Aalen<br />Betrag: '
																																														+ donateAmount
																																														+ ' €<br />Verwendungszweck: '
																																														+ donateBankSubject
																																														+ '<br /><br />Noch bequemer können Sie direkt per Sofortüberweisung spenden.'
																																											})]
																																								});
																																						donateTransferredWindow
																																								.show();
																																					}
																																					Ext.MessageBox
																																							.hide();
																																				},
																																				scope : this,
																																				params : {
																																					json : Ext.util.JSON
																																							.encode(
																																									{
																																										amount : inputFields.amount
																																												.getValue(),
																																										firstName : inputFields.firstName
																																												.getValue(),
																																										lastName : inputFields.lastName
																																												.getValue(),
																																										street : inputFields.street
																																												.getValue(),
																																										plz : inputFields.plz
																																												.getValue(),
																																										city : inputFields.city
																																												.getValue(),
																																										email : inputFields.email
																																												.getValue()
																																									})
																																				},
																																				disableCaching : true,
																																				timeout : 600000
																																			});
																														}
																													})],
																									items : [new Ext.Panel(
																											{
																												bodyStyle : 'padding:5px;text-align:left',
																												html : '<b>Ihre Spende: </b>'
																														+ donateAmount
																														+ '€<br /><br /><b>Die Spendenquittung wird ausgestellt auf:</b><br />'
																														+ donatorAddress
																														+ '<br /><br />Die Bestätigung mit den Zahlungsinformationen wird versendet an:</b><br />'
																														+ donatorEmail
																											})]
																								});
																						donateConfirmationWindow
																								.show();
																					} else {
																						Ext.MessageBox
																								.alert(
																										'Unvollständige Eingabe',
																										'Bitte füllen Sie die rot markierten Felder vollständig aus.');
																					}
																				}
																			})],
															items : [
																	new Ext.Panel(
																			{
																				bodyStyle : 'padding:5px;text-align:left',
																				html : 'Hiermit möchte ich an den Verein Kinder von der Straße e.V. spenden.<br /><br />Sofern eine Spendenbescheinigung ausgestellt werden soll, gebe ich meine vollständige Adresse an.'
																			}),
																	new Ext.form.FormPanel(
																			{
																				url : '',
																				labelWidth : 95,
																				width : 350,
																				defaults : {
																					width : 210
																				},
																				items : [
																						inputFields.amount,
																						inputFields.firstName,
																						inputFields.lastName,
																						inputFields.street,
																						inputFields.plz,
																						inputFields.city,
																						inputFields.email],
																				monitorValid : true,
																				bodyStyle : 'padding:5px 5px 0;text-align:left;'
																			})]
														});
												donateWindow.show();
										(function() {
													inputFields.amount
															.focus(true);
												}).defer(this, 100);

											},
											text : 'Spenden'
										})]
									});
								}
							}
						}, {
							region : 'center',
							layout : 'fit',
							border : false,
							items : this._initPages(pages, page)
						}]
					}
				}
			});
		},

		_initPages : function(pages, page) {
			var activeItem = 0;
			var items = [];
			for (var i = 0; i < pages.length; i++) {
				if (pages[i].url == page) {
					activeItem = i;
				}

				this._pages[pages[i].url] = {
					actions : {
						firstPage : new Ext.Action({
							text : 'Erste Seite',
							iconCls : 'icon-control-first',
							disabled : true,
							handler : function() {
								var pageObject = this._pages[this._currentPage];
								pageObject.getParams.start = 0;
								this._loadContent(this._currentPage);
							},
							scope : this
						}),
						previousPage : new Ext.Action({
							text : 'Vorherige Seite',
							iconCls : 'icon-control-previous',
							disabled : true,
							handler : function() {
								var pageObject = this._pages[this._currentPage];
								pageObject.getParams.start -= pageObject.getParams.limit;
								this._loadContent(this._currentPage);
							},
							scope : this
						}),
						nextPage : new Ext.Action({
							text : 'Nächste Seite',
							iconCls : 'icon-control-next',
							disabled : true,
							handler : function() {
								var pageObject = this._pages[this._currentPage];
								pageObject.getParams.start += pageObject.getParams.limit;
								this._loadContent(this._currentPage);
							},
							scope : this
						}),
						lastPage : new Ext.Action({
							text : 'Letzte Seite',
							iconCls : 'icon-control-last',
							disabled : true,
							handler : function() {
								var pageObject = this._pages[this._currentPage];
								var pageCount = Math.ceil(pageObject.total
										/ pageObject.getParams.limit);
								pageObject.getParams.start = (pageCount - 1)
										* pageObject.getParams.limit;
								this._loadContent(this._currentPage);
							},
							scope : this
						})
					},
					getParams : {
						start : 0,
						limit : 25
					},
					type : pages[i].type
				}
				var pageObject = this._pages[pages[i].url];

				items.push({
					id : 'page-' + pages[i].url,
					layout : 'fit',
					title : pages[i].title,
					bodyStyle : 'text-align:left;',
					autoScroll : true,
					tbar : new Ext.Panel({
								bodyStyle : 'text-align:left;',
								border : false,
								items : new Ext.Toolbar({
											items : [
													pageObject.actions.firstPage,
													'-',
													pageObject.actions.previousPage,
													'-',
													pageObject.actions.nextPage,
													'-',
													pageObject.actions.lastPage]
										})
							}),
					bbar : new Ext.Panel({
								bodyStyle : 'text-align:left;',
								border : false,
								items : new Ext.Toolbar({
											items : [
													pageObject.actions.firstPage,
													'-',
													pageObject.actions.previousPage,
													'-',
													pageObject.actions.nextPage,
													'-',
													pageObject.actions.lastPage]
										})
							})
				});
			}

			return new Ext.TabPanel({
						id : 'pageTabs',
						activeTab : activeItem,
						items : items,
						listeners : {
							tabchange : function(tabPanel, tab) {
								this._currentPage = tab.id.substr(5);

								if (!this._pages[this._currentPage].tab) {
									this._pages[this._currentPage].tab = tab;

									this._loadContent(this._currentPage);
								}

								Ext.History.add(this._currentPage);
							},
							scope : this
						}

					});
		},

		_loadContent : function(page) {
			var pageObject = this._pages[page];

			Ext.MessageBox.wait('Bitte warten...');
			Ext.Ajax.request({
						url : '/api/page',
						success : this._loadContentSuccess,
						scope : this,
						params : {
							json : Ext.util.JSON.encode({
										page : page,
										start : pageObject.getParams.start,
										limit : pageObject.getParams.limit
									})
						},
						disableCaching : true
					});
		},

		_loadContentSuccess : function(response, options) {
			var responseDecoded = Ext.util.JSON.decode(response.responseText);

			var pageObject = this._pages[responseDecoded.page];
			pageObject.total = responseDecoded.total;
			pageObject.getParams.start = responseDecoded.start;
			pageObject.getParams.limit = responseDecoded.limit;
			pageObject.mainData = responseDecoded.mainData;
			if (responseDecoded.sidebarData) {
				pageObject.sidebarData = responseDecoded.sidebarData;
			}
			if (responseDecoded.galleryData) {
				pageObject.galleryData = responseDecoded.galleryData;
			}

			pageObject.actions.firstPage.disable();
			pageObject.actions.previousPage.disable();
			pageObject.actions.nextPage.disable();
			pageObject.actions.lastPage.disable();
			if (pageObject.getParams.start > 0) {
				pageObject.actions.firstPage.enable();
				pageObject.actions.previousPage.enable();
			}
			if (pageObject.total > pageObject.getParams.start
					+ pageObject.getParams.limit) {
				pageObject.actions.nextPage.enable();
				pageObject.actions.lastPage.enable();
			}

			Ext.MessageBox.hide();
			this._showContent(responseDecoded.page);
		},

		_loadContentFailure : function(response, options) {
			Ext.MessageBox.hide();
		},

		_showContent : function(page) {
			var pageObject = this._pages[page];

			if (!pageObject.mainDataStore) {
				pageObject.mainDataRecord = Ext.data.Record.create([{
							name : 'id'
						}, {
							name : 'title'
						}, {
							name : 'content'
						}]);
				if (pageObject.type == 'ticket') {
					pageObject.mainDataRecord = Ext.data.Record.create([{
								name : 'id'
							}, {
								name : 'ticketId'
							}, {
								name : 'title'
							}, {
								name : 'titleTicketOrder'
							}, {
								name : 'content'
							}, {
								name : 'price'
							}]);
				}
				if (pageObject.type == 'lottery') {
					pageObject.mainDataRecord = Ext.data.Record.create([{
								name : 'id'
							}, {
								name : 'lotteryId'
							}, {
								name : 'title'
							}, {
								name : 'titleLottery'
							}, {
								name : 'content'
							}]);
				}

				pageObject.mainDataReader = new Ext.data.ArrayReader({
							id : 0
						}, pageObject.mainDataRecord);

				pageObject.mainDataStore = new Ext.data.GroupingStore({
							reader : pageObject.mainDataReader,
							data : [],
							groupField : 'title',
							remoteGroup : true,
							sortInfo : {
								field : 'id',
								direction : 'ASC'
							}
						});

				var trackMouseOver = false;
				if (pageObject.type == 'gallery') {
					trackMouseOver = true;
				}

				var columnModelItems = [{
					header : 'title',
					dataIndex : 'title',
					width : 0,
					renderer : function(value, metadata, record, rowIndex,
							colIndex, store) {
						return '<span style="display:none;">'
								+ record.get('groupId') + ': </span>' + value;
					}
				}, {
					header : 'content',
					dataIndex : 'content',
					width : 520,
					renderer : function(value, metadata, record, rowIndex,
							colIndex, store) {
						return '<div style="padding-right:3px;padding-bottom:3px;">'
								+ value + '</div>';
					}
				}];
				if (pageObject.type == 'ticket') {
					columnModelItems.push({
								header : 'price',
								dataIndex : 'price',
								width : 100,
								renderer : function(value) {
									value = (Math.round((value - 0) * 100))
											/ 100;
									value = (value == Math.floor(value))
											? value + ".00"
											: ((value * 10 == Math.floor(value
													* 10))
													? value + "0"
													: value);
									return (value + ' € pro Karte').replace(
											/\./, ',');
								}
							}, {
								header : 'order',
								width : 97,
								renderer : function(value, metadata, record,
										rowIndex, colIndex, store) {
									return '<div class="ticket-order-button"></div>';
								}
							});
				}
				if (pageObject.type == 'lottery') {
					columnModelItems.push({
						header : 'participate',
						width : 81,
						renderer : function(value, metadata, record, rowIndex,
								colIndex, store) {
							return '<div class="lottery-participate-button"></div>';
						}
					});
				}

				pageObject.mainDataGrid = new Ext.grid.GridPanel({
					bodyStyle : 'text-align: left;',
					border : false,
					disableSelection : true,
					trackMouseOver : trackMouseOver,
					hideHeaders : true,
					store : pageObject.mainDataStore,
					colModel : new Ext.grid.ColumnModel(columnModelItems),
					view : new Ext.grid.GroupingView({
								autoFill : true,
								forceFit : true,
								hideGroupedColumn : true,
								showGroupName : false,
								scrollOffset : 30
							}),
					listeners : {
						render : {
							fn : function(grid) {
								if (pageObject.type == 'ticket') {
									var view = grid.getView();
									for (var i = 0; i < pageObject.mainDataStore
											.getCount(); i++) {
										var cell = Ext.fly(view.getCell(i, 3));
										new Ext.Toolbar({
											renderTo : cell
													.child(".ticket-order-button"),
											items : [new Ext.Action({
												handler : function() {
													var data = [[1, '1 Karte']];
													for (var i = 2; i <= 20; i++) {
														data
																.push([
																		i,
																		''
																				+ i
																				+ ' Karten']);
													}

													var inputFields = {
														orderNumber : new Ext.form.ComboBox(
																{
																	fieldLabel : 'Anzahl',
																	allowBlank : false,
																	editable : false,
																	forceSelection : true,
																	triggerAction : 'all',
																	displayField : 'text',
																	valueField : 'value',
																	selectOnFocus : true,
																	value : 1,
																	tpl : '<div style="text-align:left"><tpl for="."><div class="x-combo-list-item">{text}</div></tpl></div>',
																	store : new Ext.data.SimpleStore(
																			{
																				id : 0,
																				fields : [
																						'value',
																						'text'],
																				data : data
																			}),
																	mode : 'local'
																}),
														firstName : new Ext.form.TextField(
																{
																	fieldLabel : 'Vorname',
																	allowBlank : false,
																	minLength : 1,
																	maxLength : 255,
																	selectOnFocus : true,
																	value : ''
																}),
														lastName : new Ext.form.TextField(
																{
																	fieldLabel : 'Nachname',
																	allowBlank : false,
																	minLength : 1,
																	maxLength : 255,
																	selectOnFocus : true,
																	value : ''
																}),
														street : new Ext.form.TextField(
																{
																	fieldLabel : 'Strasse',
																	allowBlank : false,
																	minLength : 1,
																	maxLength : 255,
																	selectOnFocus : true,
																	value : ''
																}),
														plz : new Ext.form.NumberField(
																{
																	fieldLabel : 'PLZ',
																	allowBlank : false,
																	minLength : 5,
																	maxLength : 5,
																	minValue : 0,
																	maxValue : 99999,
																	width : 100,
																	selectOnFocus : true,
																	value : ''
																}),
														city : new Ext.form.TextField(
																{
																	fieldLabel : 'Ort',
																	allowBlank : false,
																	minLength : 1,
																	maxLength : 255,
																	selectOnFocus : true,
																	value : ''
																}),
														email : new Ext.form.TextField(
																{
																	fieldLabel : 'E-Mail',
																	allowBlank : false,
																	minLength : 1,
																	maxLength : 255,
																	selectOnFocus : true,
																	value : '',
																	vtype : 'email'
																})
													};

													var price = this.record
															.get('price');
													price = (Math
															.round((price - 0)
																	* 100))
															/ 100;
													price = (price == Math
															.floor(price))
															? price + ".00"
															: ((price * 10 == Math
																	.floor(price
																			* 10))
																	? price
																			+ "0"
																	: price);
													var eventTitle = this.record
															.get('title');
													var eventTitleOrder = this.record
															.get('titleTicketOrder');
													var eventId = this.record
															.get('ticketId');

													var orderWindow = new Ext.Window(
															{
																title : '<div style="text-align:left">Karten bestellen</div>',
																bodyStyle : 'text-align:left',
																defaultButton : 'orderContinueButton',
																width : 364,
																modal : true,
																resizable : false,
																bbar : [
																		new Ext.Action(
																				{
																					text : 'Abbrechen',
																					handler : function() {
																						orderWindow
																								.close();
																					}
																				}),
																		new Ext.Action(
																				{
																					id : 'orderContinueButton',
																					text : 'Weiter',
																					handler : function() {
																						var valid = true;
																						for (var index in inputFields) {
																							var inputField = inputFields[index];
																							if (!inputField
																									.isValid()) {
																								valid = false;
																							}
																						}
																						if (valid) {
																							orderWindow
																									.hide();

																							var priceSum = price
																									* inputFields.orderNumber
																											.getValue();
																							priceSum = (Math
																									.round((priceSum - 0)
																											* 100))
																									/ 100;
																							priceSum = (priceSum == Math
																									.floor(priceSum))
																									? priceSum
																											+ ".00"
																									: ((priceSum
																											* 10 == Math
																											.floor(priceSum
																													* 10))
																											? priceSum
																													+ "0"
																											: priceSum);

																							var priceShippingSum = price
																									* inputFields.orderNumber
																											.getValue()
																									+ 1;
																							priceShippingSum = (Math
																									.round((priceShippingSum - 0)
																											* 100))
																									/ 100;
																							priceShippingSum = (priceShippingSum == Math
																									.floor(priceShippingSum))
																									? priceShippingSum
																											+ ".00"
																									: ((priceShippingSum
																											* 10 == Math
																											.floor(priceShippingSum
																													* 10))
																											? priceShippingSum
																													+ "0"
																											: priceShippingSum);

																							var orderAddress = inputFields.firstName
																									.getValue()
																									+ ' '
																									+ inputFields.lastName
																											.getValue()
																									+ '<br />'
																									+ inputFields.street
																											.getValue()
																									+ '<br />'
																									+ inputFields.plz
																											.getValue()
																									+ ' '
																									+ inputFields.city
																											.getValue();
																							var orderEmail = inputFields.email
																									.getValue();

																							var orderConfirmationWindow = new Ext.Window(
																									{
																										title : '<div style="text-align:left">Karten bestellen</div>',
																										bodyStyle : 'text-align:left',
																										defaultButton : 'orderConfirmationButton',
																										width : 364,
																										modal : true,
																										resizable : false,
																										bbar : [
																												new Ext.Action(
																														{
																															text : 'Zurück',
																															handler : function() {
																																orderConfirmationWindow
																																		.close();
																																orderWindow
																																		.show();
																															}
																														}),
																												new Ext.Action(
																														{
																															id : 'orderConfirmationButton',
																															text : 'Bestellung abschicken',
																															handler : function() {
																																orderWindow
																																		.close();
																																orderConfirmationWindow
																																		.close();
																																Ext.MessageBox
																																		.wait('Bitte warten...');
																																Ext.Ajax
																																		.request(
																																				{
																																					url : '/api/order',
																																					success : function(
																																							response,
																																							options) {
																																						var responseDecoded = Ext.util.JSON
																																								.decode(response.responseText);
																																						if (responseDecoded.success) {
																																							eventTitleOrder = eventTitleOrder
																																									.replace(
																																											/ä/g,
																																											'ae')
																																									.replace(
																																											/Ä/g,
																																											'Ae')
																																									.replace(
																																											/ö/g,
																																											'oe')
																																									.replace(
																																											/Ö/g,
																																											'Oe')
																																									.replace(
																																											/ü/g,
																																											'ue')
																																									.replace(
																																											/Ü/g,
																																											'Ue')
																																									.replace(
																																											/ß/g,
																																											'ss');
																																							var orderBankSubject = 'Kartenvorkauf '
																																									+ eventTitleOrder
																																									+ ' '
																																									+ responseDecoded.orderId;

																																							var orderTransferredWindow = new Ext.Window(
																																									{
																																										title : '<div style="text-align:left">Bestellbestätigung</div>',
																																										bodyStyle : 'text-align:left',
																																										defaultButton : 'orderCloseButton',
																																										width : 364,
																																										modal : true,
																																										resizable : false,
																																										bbar : [
																																												new Ext.Action(
																																														{
																																															id : 'orderCloseButton',
																																															text : 'Schließen',
																																															handler : function() {
																																																orderTransferredWindow
																																																		.close();
																																															}
																																														}),
																																												new Ext.Action(
																																														{
																																															text : 'Mit Sofortüberweisung bezahlen',
																																															handler : function() {
																																																var sofortueberweisung = window
																																																		.open(
																																																				encodeURI('/sofortueberweisung/'
																																																						+ priceShippingSum
																																																						+ '/'
																																																						+ orderBankSubject),
																																																				'Sofortüberweisung',
																																																				'width=800,height=820,scrollbars=yes');
																																																sofortueberweisung
																																																		.focus();
																																															}
																																														})],
																																										items : [new Ext.Panel(
																																												{
																																													bodyStyle : 'padding:5px;text-align:left',
																																													html : 'Vielen Dank! Ihre Bestellung wurde an die Firma dynamitec GbR (www.dynamitec.de) übermittelt, die für den Verein Ihre Bestellung abgewickelt.<br /><br />Bitte überweisen Sie den Gesamtbetrag auf folgendes Konto:<br /><br />Empfänger: dynamitec GbR<br />Kontonumer: 800155818<br />BLZ: 61450050<br />Kreissparkasse Ostalb<br />Betrag: '
																																															+ (priceShippingSum + ' €')
																																																	.replace(
																																																			/\./,
																																																			',')
																																															+ '<br />Verwendungszweck: '
																																															+ orderBankSubject
																																															+ '<br /><br />Um Ihre Karten schneller zu erhalten, können Sie jetzt direkt per Sofortüberweisung bezahlen.'
																																												})]
																																									});
																																							orderTransferredWindow
																																									.show();
																																						}
																																						Ext.MessageBox
																																								.hide();
																																					},
																																					scope : this,
																																					params : {
																																						json : Ext.util.JSON
																																								.encode(
																																										{
																																											eventId : eventId,
																																											price : price,
																																											priceSum : priceSum,
																																											priceShippingSum : priceShippingSum,
																																											orderNumber : inputFields.orderNumber
																																													.getValue(),
																																											firstName : inputFields.firstName
																																													.getValue(),
																																											lastName : inputFields.lastName
																																													.getValue(),
																																											street : inputFields.street
																																													.getValue(),
																																											plz : inputFields.plz
																																													.getValue(),
																																											city : inputFields.city
																																													.getValue(),
																																											email : inputFields.email
																																													.getValue()
																																										})
																																					},
																																					disableCaching : true,
																																					timeout : 600000
																																				});
																															}
																														})],
																										items : [new Ext.Panel(
																												{
																													bodyStyle : 'padding:5px;text-align:left',
																													html : '<table class="ticket-order"><tr><td colspan="3"><b>Ihre Bestellung:</b><br /></td><tr><td>'
																															+ inputFields.orderNumber
																																	.getValue()
																															+ 'x </td><td width="100%">Karte für die Veranstaltung<br />'
																															+ eventTitle
																															+ '<br />Preis pro Karte: '
																															+ (price + ' €')
																																	.replace(
																																			/\./,
																																			',')
																															+ ' inkl. Vorverkaufsgebühr</td><td style="text-align:right" nowrap="nowrap">'
																															+ (priceSum + ' €')
																																	.replace(
																																			/\./,
																																			',')
																															+ '</td></tr><tr><td>1x </td><td>Versand</td><td align="right" style="text-align:right;border-bottom:2px solid" nowrap="nowrap">1,00 €</td></tr><tr><td>&nbsp;</td><td><b>Gesamtpreis</b> (inkl. MwSt.)</td><td style="text-align:right"><b>'
																															+ (priceShippingSum + ' €')
																																	.replace(
																																			/\./,
																																			',')
																															+ '</b></td></tr><tr><td colspan="3"><br /><b>Der Versand erfolgt nach Bezahlung des Gesamtpreises an:</b><br />'
																															+ orderAddress
																															+ '<br /><br /><b>Die Bestellbestätigung mit den Zahlungsinformationen wird versendet an:</b><br />'
																															+ orderEmail
																															+ '</td></tr></table>'
																												})]
																									});
																							orderConfirmationWindow
																									.show();
																						} else {
																							Ext.MessageBox
																									.alert(
																											'Unvollständige Eingabe',
																											'Bitte füllen Sie die rot markierten Felder vollständig aus.');
																						}
																					}
																				})],
																items : [
																		new Ext.Panel(
																				{
																					bodyStyle : 'padding:5px;text-align:left',
																					html : 'Hiermit bestelle ich Karten für die Veranstaltung:<br /><b>'
																							+ eventTitle
																							+ '</b><br /><b>'
																							+ (price + ' €')
																									.replace(
																											/\./,
																											',')
																							+ ' pro Karte inkl. Vorverkaufsgebühr + 1,00 € Versand</b><br /><br />Den Gesamtpreis werde ich umgehend per Vorkasse (Überweisung / Sofortüberweisung) bezahlen. Der Versand der Karten erfolgt per Post innerhalb von 2 Werktagen nach Zahlungseingang.<br /><br />Eine Rückerstattung für bereits bezahlte Karten ist nur bei einer Absage der Veranstaltung durch den Veranstalter möglich.'
																				}),
																		new Ext.form.FormPanel(
																				{
																					url : '',
																					labelWidth : 95,
																					width : 350,
																					defaults : {
																						width : 210
																					},
																					items : [
																							inputFields.orderNumber,
																							inputFields.firstName,
																							inputFields.lastName,
																							inputFields.street,
																							inputFields.plz,
																							inputFields.city,
																							inputFields.email],
																					monitorValid : true,
																					bodyStyle : 'padding:5px 5px 0;text-align:left;'
																				})]
															});
													orderWindow.show();
											(function() {
														inputFields.orderNumber
																.focus(true);
													}).defer(this, 100);
												},
												text : 'Bestellen',
												record : pageObject.mainDataStore
														.getAt(i)
											})]
										});
									}
								}

								if (pageObject.type == 'lottery') {
									var view = grid.getView();
									for (var i = 0; i < pageObject.mainDataStore
											.getCount(); i++) {
										var cell = Ext.fly(view.getCell(i, 2));
										new Ext.Toolbar({
											renderTo : cell
													.child(".lottery-participate-button"),
											items : [new Ext.Action({
												handler : function() {
													var inputFields = {
														firstName : new Ext.form.TextField(
																{
																	fieldLabel : 'Vorname',
																	allowBlank : false,
																	minLength : 1,
																	maxLength : 255,
																	selectOnFocus : true,
																	value : ''
																}),
														lastName : new Ext.form.TextField(
																{
																	fieldLabel : 'Nachname',
																	allowBlank : false,
																	minLength : 1,
																	maxLength : 255,
																	selectOnFocus : true,
																	value : ''
																}),
														street : new Ext.form.TextField(
																{
																	fieldLabel : 'Strasse',
																	allowBlank : false,
																	minLength : 1,
																	maxLength : 255,
																	selectOnFocus : true,
																	value : ''
																}),
														plz : new Ext.form.NumberField(
																{
																	fieldLabel : 'PLZ',
																	allowBlank : false,
																	minLength : 5,
																	maxLength : 5,
																	minValue : 0,
																	maxValue : 99999,
																	width : 100,
																	selectOnFocus : true,
																	value : ''
																}),
														city : new Ext.form.TextField(
																{
																	fieldLabel : 'Ort',
																	allowBlank : false,
																	minLength : 1,
																	maxLength : 255,
																	selectOnFocus : true,
																	value : ''
																}),
														email : new Ext.form.TextField(
																{
																	fieldLabel : 'E-Mail',
																	allowBlank : false,
																	minLength : 1,
																	maxLength : 255,
																	selectOnFocus : true,
																	value : '',
																	vtype : 'email'
																})
													};

													var lotteryTitle = this.record
															.get('titleLottery');
													var lotteryId = this.record
															.get('lotteryId');

													var participateWindow = new Ext.Window(
															{
																title : '<div style="text-align:left">Gewinnen</div>',
																bodyStyle : 'text-align:left',
																defaultButton : 'participateButton',
																width : 364,
																modal : true,
																resizable : false,
																bbar : [
																		new Ext.Action(
																				{
																					text : 'Abbrechen',
																					handler : function() {
																						participateWindow
																								.close();
																					}
																				}),
																		new Ext.Action(
																				{
																					id : 'participateButton',
																					text : 'Gewinnen',
																					handler : function() {
																						var valid = true;
																						for (var index in inputFields) {
																							var inputField = inputFields[index];
																							if (!inputField
																									.isValid()) {
																								valid = false;
																							}
																						}
																						if (valid) {
																							participateWindow
																									.hide();

																							Ext.MessageBox
																									.wait('Bitte warten...');
																							Ext.Ajax
																									.request(
																											{
																												url : '/api/lotteryparticipate',
																												success : function(
																														response,
																														options) {
																													var responseDecoded = Ext.util.JSON
																															.decode(response.responseText);
																													if (responseDecoded.success) {
																														var participateTransferredWindow = new Ext.Window(
																																{
																																	title : '<div style="text-align:left">Teilnahmebestätigung</div>',
																																	bodyStyle : 'text-align:left',
																																	defaultButton : 'closeButton',
																																	width : 364,
																																	modal : true,
																																	resizable : false,
																																	bbar : [new Ext.Action(
																																			{
																																				id : 'closeButton',
																																				text : 'Schließen',
																																				handler : function() {
																																					participateTransferredWindow
																																							.close();
																																				}
																																			})],
																																	items : [new Ext.Panel(
																																			{
																																				bodyStyle : 'padding:5px;text-align:left',
																																				html : 'Vielen Dank!<br />Ihre Teilnahme am Gewinnspiel wurde erfasst.'
																																			})]
																																});
																														participateTransferredWindow
																																.show();
																													}
																													Ext.MessageBox
																															.hide();
																												},
																												scope : this,
																												params : {
																													json : Ext.util.JSON
																															.encode(
																																	{
																																		lotteryId : lotteryId,
																																		firstName : inputFields.firstName
																																				.getValue(),
																																		lastName : inputFields.lastName
																																				.getValue(),
																																		street : inputFields.street
																																				.getValue(),
																																		plz : inputFields.plz
																																				.getValue(),
																																		city : inputFields.city
																																				.getValue(),
																																		email : inputFields.email
																																				.getValue()
																																	})
																												},
																												disableCaching : true,
																												timeout : 600000
																											});
																						} else {
																							Ext.MessageBox
																									.alert(
																											'Unvollständige Eingabe',
																											'Bitte füllen Sie die rot markierten Felder vollständig aus.');
																						}
																					}
																				})],
																items : [
																		new Ext.Panel(
																				{
																					bodyStyle : 'padding:5px;text-align:left',
																					html : 'Ich möchte gewinnen:<br /><b>'
																							+ lotteryTitle
																							+ '</b>'
																				}),
																		new Ext.form.FormPanel(
																				{
																					url : '',
																					labelWidth : 95,
																					width : 350,
																					defaults : {
																						width : 210
																					},
																					items : [
																							inputFields.firstName,
																							inputFields.lastName,
																							inputFields.street,
																							inputFields.plz,
																							inputFields.city,
																							inputFields.email],
																					monitorValid : true,
																					bodyStyle : 'padding:5px 5px 0;text-align:left;'
																				})]
															});
													participateWindow.show();
											(function() {
														inputFields.firstName
																.focus(true);
													}).defer(this, 100);
												},
												text : 'Gewinnen',
												record : pageObject.mainDataStore
														.getAt(i)
											})]
										});
									}
								}

							},
							delay : 100
						},
						rowclick : function(grid, rowIndex, e) {
							var pageObject = this._pages[this._currentPage];
							if (pageObject.type == 'gallery') {
								var maxRatio = 0;
								for (var i = 0; i < pageObject.galleryData[rowIndex].length; i++) {
									var imageWidth = pageObject.galleryData[rowIndex][i].width;
									var imageHeight = pageObject.galleryData[rowIndex][i].height;
									var ratio = imageWidth / imageHeight;
									if (ratio > maxRatio) {
										maxRatio = ratio;
									}
								}
								var thumbnailWidth = Math.ceil(maxRatio * 66);

								var galleryTemplate = new Ext.XTemplate(
										'<tpl for=".">',
										'<div class="thumb-wrap">',
										'<div class="thumb loading-indicator" style="width:'
												+ thumbnailWidth
												+ 'px"><img src="/api/gallerythumbnail/?id={id}"></div>',
										'<span class="x-editable">{views} Views</span></div>',
										'</tpl>', '<div class="x-clear"></div>');
								var galleryWindow = new Ext.Window({
									title : '<div style="text-align:left">'
											+ pageObject.mainData[rowIndex].title
											+ '</div>',
									bodyStyle : 'text-align: left;',
									width : 700,
									height : 480,
									layout : 'fit',
									modal : true,
									items : new Ext.Panel({
										id : 'images-view',
										autoScroll : true,
										bodyStyle : 'text-align: left;',
										layout : 'fit',
										items : new Ext.DataView({
											autoWidth : true,
											store : pageObject.galleryDataStore[rowIndex],
											tpl : galleryTemplate,
											overClass : 'x-view-over',
											itemSelector : 'div.thumb-wrap',
											emptyText : 'Es existieren keine Bilder in diesem Album',
											listeners : {
												click : function(dataView,
														index, node, e) {
													var actionPreviousImage = new Ext.Action(
															{
																text : 'Vorheriges Bild',
																handler : function() {
																	index--;
																	actionShowImage
																			.execute();
																},
																disabled : true,
																scope : this
															});

													var actionNextImage = new Ext.Action(
															{
																text : 'Nächstes Bild',
																handler : function() {
																	index++;
																	actionShowImage
																			.execute();
																},
																disabled : true,
																scope : this
															});

													var actionShowImage = new Ext.Action(
															{
																handler : function(
																		firstDisplay,
																		fxAnchors) {
																	actionPreviousImage
																			.disable();
																	actionNextImage
																			.disable();

																	var imageWidth = pageObject.galleryData[rowIndex][index].width;
																	var imageHeight = pageObject.galleryData[rowIndex][index].height;
																	if (imageWidth > imageWindow
																			.getInnerWidth()) {
																		imageHeight = imageHeight
																				/ (imageWidth / imageWindow
																						.getInnerWidth());
																		imageWidth = imageWindow
																				.getInnerWidth();
																	}
																	if (imageHeight > imageWindow
																			.getInnerHeight()) {
																		imageWidth = imageWidth
																				/ (imageHeight / imageWindow
																						.getInnerHeight());
																		imageHeight = imageWindow
																				.getInnerHeight();
																	}
																	Ext
																			.get('images-view-fullsize')
																			.update(
																					'<img src="/api/galleryimage/?id='
																							+ pageObject.galleryData[rowIndex][index].id
																							+ '" id="image-view-fullsize-'
																							+ index
																							+ '" width="'
																							+ imageWidth
																							+ '" height="'
																							+ imageHeight
																							+ '">',
																					false,
																					function(
																							e) {
																						var fullsizeImage = Ext
																								.get('images-view-fullsize');
																						fullsizeImage
																								.setY(imageWindow.body
																										.getY()
																										+ (imageWindow
																												.getInnerHeight() - imageHeight)
																										/ 2);
																						fullsizeImage
																								.setX(imageWindow.body
																										.getX()
																										+ (imageWindow
																												.getInnerWidth() - imageWidth)
																										/ 2);
																						fullsizeImage
																								.fadeIn(
																										{
																											concurrent : false,
																											duration : 0.7,
																											callback : function() {
																												imageWindow
																														.setTitle('<div style="text-align:left">Bild '
																																+ (index + 1)
																																+ ' von '
																																+ pageObject.galleryData[rowIndex].length
																																+ '</div>');

																												if (index > 0) {
																													actionPreviousImage
																															.enable();
																												}
																												if (index < pageObject.galleryData[rowIndex].length
																														- 1) {
																													actionNextImage
																															.enable();
																												}
																											},
																											scope : this
																										});
																					});
																},
																scope : this
															});

													var imageWindow = new Ext.Window(
															{
																modal : true,
																width : '766px',
																height : '0px',
																layout : 'fit',
																items : new Ext.Panel(
																		{
																			html : '<div id="images-view-fullsize" style="text-align:left;"></div>'
																		}),
																bbar : new Ext.Panel(
																		{
																			bodyStyle : 'text-align: left;',
																			border : false,
																			items : new Ext.Toolbar(
																					{
																						items : [
																								actionPreviousImage,
																								actionNextImage]
																					})
																		}),
																listeners : {
																	show : function(
																			window) {
																		(function() {
																			actionShowImage
																					.execute();
																		})
																				.defer(
																						this,
																						1000);
																	},
																	scope : this
																}
															});
													imageWindow.show();
													imageWindow.setHeight(Ext
															.getBody()
															.getHeight()
															- 100);
													imageWindow
															.setPosition(
																	(Ext
																			.getBody()
																			.getWidth() - 766)
																			/ 2,
																	50);
												},
												scope : this
											}
										})

									})
								});
								galleryWindow.show();
							}
						},
						scope : this
					}
				});

				if (pageObject.galleryData) {
					pageObject.galleryDataStore = [];
					for (var i = 0; i < pageObject.galleryData.length; i++) {
						pageObject.galleryDataStore[i] = new Ext.data.Store({
									reader : new Ext.data.ArrayReader({
												id : 0
											}, Ext.data.Record.create([{
														name : 'id'
													}, {
														name : 'views'
													}])),
									data : []
								});
					}
				}

				if (pageObject.sidebarData && pageObject.sidebarData.length > 0) {
					pageObject.sidebarDataRecord = Ext.data.Record.create([{
								name : 'id'
							}, {
								name : 'title'
							}, {
								name : 'content'
							}]);

					pageObject.sidebarDataReader = new Ext.data.ArrayReader({
								id : 0
							}, pageObject.sidebarDataRecord);

					pageObject.sidebarDataStore = new Ext.data.GroupingStore({
								reader : pageObject.sidebarDataReader,
								data : [],
								groupField : 'title',
								remoteGroup : true,
								sortInfo : {
									field : 'id',
									direction : 'ASC'
								}
							});

					pageObject.sidebarDataGrid = new Ext.grid.GridPanel({
						bodyStyle : 'text-align: left;',
						border : false,
						disableSelection : true,
						trackMouseOver : false,
						hideHeaders : true,
						store : pageObject.sidebarDataStore,
						colModel : new Ext.grid.ColumnModel([{
							header : 'title',
							dataIndex : 'title',
							renderer : function(value, metadata, record,
									rowIndex, colIndex, store) {
								return '<span style="display:none;">'
										+ record.get('groupId') + ': </span>'
										+ value;
							}
						}, {
							header : 'content',
							dataIndex : 'content',
							renderer : function(value) {
								return '<div style="padding-right:3px;padding-bottom:3px;">'
										+ value + '</div>';
							}
						}]),
						view : new Ext.grid.GroupingView({
									autoFill : true,
									forceFit : true,
									hideGroupedColumn : true,
									showGroupName : false,
									scrollOffset : 30
								})
					});

					pageObject.tab.add({
								layout : 'border',
								border : false,
								items : [{
											region : 'center',
											layout : 'fit',
											border : false,
											items : pageObject.mainDataGrid
										}, {
											region : 'east',
											layout : 'fit',
											border : false,
											width : 220,
											minWidth : 220,
											maxWidth : 220,
											items : pageObject.sidebarDataGrid
										}]
							});
					pageObject.tab.doLayout();

					var sidebarData = [];
					for (var i = 0; i < pageObject.sidebarData.length; i++) {
						var sidebarDataset = pageObject.sidebarData[i];
						sidebarData.push([i + 1, sidebarDataset.title,
								sidebarDataset.content]);
					}
					pageObject.sidebarDataStore.loadData(sidebarData);
				} else {
					pageObject.tab.add(pageObject.mainDataGrid);
					pageObject.tab.doLayout();
				}
			}

			var mainData = [];
			for (var i = 0; i < pageObject.mainData.length; i++) {
				var mainDataset = pageObject.mainData[i];
				if (pageObject.type == 'ticket') {
					mainData.push([i + 1, mainDataset.id, mainDataset.title,
							mainDataset.title_ticket_order,
							mainDataset.content, mainDataset.price]);
				} else if (pageObject.type == 'lottery') {
					mainData.push([i + 1, mainDataset.id, mainDataset.title,
							mainDataset.title_lottery, mainDataset.content]);
				} else {
					mainData.push([i + 1, mainDataset.title,
							mainDataset.content]);
				}
			}
			pageObject.mainDataStore.loadData(mainData);

			if (pageObject.galleryData) {
				var galleryData = [];
				for (var i = 0; i < pageObject.galleryData.length; i++) {
					galleryData[i] = [];
					for (var j = 0; j < pageObject.galleryData[i].length; j++) {
						var galleryDataset = pageObject.galleryData[i][j];
						galleryData[i].push([galleryDataset.id,
								galleryDataset.view_count]);
					}
					pageObject.galleryDataStore[i].loadData(galleryData[i]);
				}
			}
		}
	});

	return new Singleton();
}();