Ext.BLANK_IMAGE_URL = baseUrl + "/ext/resources/images/default/s.gif";
RegisterWindow = Ext.extend(Ext.Window, {
	width : 450,
	resizable : false,
	height : 550,
	closeAction : "hide",
	closeable : false,
	plain : true,
	layout : "fit",
	title : (this.edit)	? 'Platomania :: Account bewerken' : 'Platomania :: Account aamaken',
	
	id_user : null,

	initComponent : function() {

		RegisterWindow.superclass.initComponent.call(this);
		Ext.QuickTips.init();

		this.formpanel = new Ext.FormPanel({
			buttonAlign : "right",
			border : false,
			bodyStyle : 'padding:5px;',
			defaults : {
				labelWidth : 100
			},
			defaultType : 'textfield',
			items : [{
				fieldLabel : 'Voornaam',
				name : 'firstname',
				anchor : '100%',
				allowBlank : false
			}, {
				fieldLabel : 'Tussenvoegsel',
				name : 'intercalation',
				anchor : '100%'
			}, {
				fieldLabel : 'Achternaam',
				name : 'lastname',
				allowBlank : false,
				anchor : '100%'
			}, {
				fieldLabel : 'Geslacht',
				boxLabel : 'Man',
				name : 'gender',
				inputValue : 'm',
				xtype : 'radio',
				anchor : '100%',
				checked : true
			}, {
				fieldLabel : '',
				labelSeparator : '',
				boxLabel : 'Vrouw',
				name : 'gender',
				inputValue : 'v',
				xtype : 'radio',
				anchor : '100%'
			}, {
				fieldLabel : 'Straat',
				allowBlank : false,
				name : 'address',
				anchor : '100%'
			}, {
				fieldLabel : 'Huisnummer',
				name : 'number',
				allowBlank : false,
				anchor : '100%'
			}, {
				fieldLabel : 'Toevoeging',
				name : 'addon',
				anchor : '100%'
			}, {
				fieldLabel : 'Postcode',
				allowBlank : false,
				name : 'postcode',
				anchor : '100%'
			}, {
				fieldLabel : 'Plaats',
				name : 'place',
				allowBlank : false,
				anchor : '100%'
			}, {
				xtype : 'combo',
				fieldLabel : 'Land',
				name : 'country',
				anchor : '100%',
				store : new Ext.data.JsonStore({
					fields : ['number', 'name'],
					url : this.baseUrl + '/country/all',
					autoLoad : true
				}),
				hiddenName : 'country',
				allowBlank : false,
				editable : true,
				forceSelection : true,
				selectOnFocus : true,
				displayField : 'name',
				valueField : 'number',
				typeAhead : true,
				mode : 'local',
				triggerAction : 'all'
			}, {
				fieldLabel : 'Telefoonnummer',
				name : 'telephone',
				allowBlank : false,
				anchor : '100%'
			}, {
				xtype : 'combo',
				fieldLabel : 'Voorkeurswinkel',
				name : 'id_store',
				anchor : '100%',
				store : new Ext.data.JsonStore({
					fields : ['id_store', 'name'],
					url : this.baseUrl + '/store/get',
					autoLoad : true
				}),
				hiddenName : 'id_store',
				allowBlank : false,
				editable : false,
				forceSelection : true,
				selectOnFocus : true,
				displayField : 'name',
				valueField : 'id_store',
				typeAhead : true,
				mode : 'local',
				triggerAction : 'all',
				selectOnFocus : true
			}, {
				xtype : 'checkbox',
				fieldLabel : 'Mailinglist',
				name : 'mailinglist',
				anchor : '100%',
				boxLabel : 'Ja, ik wil mailingen van platomania ontvangen',
				inputValue : 'y'
			}, {
				fieldLabel : 'Email',
				allowBlank : false,
				readOnly : (this.edit) ? true : false,
				name : 'email',
				anchor : '100%',
				vtype : 'email'
			}, {
				fieldLabel : 'Wachtwoord',
				allowBlank : (this.edit) ? true : false,
				name : 'password',
				anchor : '100%',
				inputType : 'password'
			}, {
				fieldLabel : 'Wachtwoord nogmaals',
				name : 'password_nogmaals',
				allowBlank : (this.edit) ? true : false,
				anchor : '100%',
				inputType : 'password'
			}]
		});

		this.add(this.formpanel);
		this.formpanel.addButton({
			text : (this.edit) ? 'Bijwerken' : 'Registreren',
			handler : this.onBtnRegistrerenClicked,
			scope : this
		});
	},

	onBtnRegistrerenClicked : function() {

		if (this.edit) {
			var msg = 'Uw account is bijgewerkt.';
		} else {
			var msg = 'Uw account is aangemaaktt.';
		}

		var form = this.formpanel.form;
		form.submit({
			url : this.baseUrl + '/account/registreren',
			method : 'post',
			success : function(response, options) {
				Ext.Msg.show({
					title : 'Account',
					msg : msg,
					buttons : Ext.Msg.OK,
					animEl : Ext.EventObject.target,
					icon : Ext.MessageBox.INFO
				});
				this.hide();
			},
			failure : function(form, action) {

				Ext.Msg.show({
					title : 'Account',
					msg : action.result.error,
					buttons : Ext.Msg.OK,
					animEl : Ext.EventObject.target,
					icon : Ext.MessageBox.ERROR
				});

//				var email = form.findField('email');
//				email.invalidText = action.result.error;
//				email.markInvalid();

			},
			scope : this
		});
	},

	show : function(anitarget) {
		RegisterWindow.superclass.show.call(this, anitarget);

		if (this.edit) {
			this.formpanel.form.load({
				url : this.baseUrl + '/account/edit/'
			});
		}
	}
});

InlogWindow = Ext.extend(Ext.Window, {

	width : 360,
	height : 160,
	closeAction : "hide",
	closeable : false,
	plain : true,
	layout : "fit",
	title : 'Platomania :: Inloggen',

	initComponent : function() {

		InlogWindow.superclass.initComponent.call(this);

		this.formpanel = new Ext.FormPanel({
			keys : {
				key : Ext.EventObject.ENTER,
				fn : this.onBtnInloggenClicked,
				scope : this
			},
			buttonAlign : "right",
			border : false,
			bodyStyle : 'padding:5px;',
			defaults : {
				labelWidth : 100
			},
			defaultType : 'textfield',
			items : [{
				fieldLabel : 'E-mailadres',
				name : 'username',
				anchor : '100%'
			}, {
				fieldLabel : 'Wachtwoord',
				name : 'password',
				inputType : 'password',
				anchor : '100%'
			}, {
				xtype:'checkbox',
				labelSeparator: '',
				fieldLabel : '',
				boxLabel: "Onthoud mij",
				name : 'rememberme',
				anchor : '100%'
			}]
		});

		this.formpanel.addButton({
			text : 'Account aanmaken...',
			handler : this.onBtnAanmakenClicked,
			scope : this
		});

		this.formpanel.addButton({
			text : 'Wachtwoord vergeten?',
			handler : this.onBtnForgottenClicked,
			scope : this
		});

		this.formpanel.addButton({
			text : 'Inloggen',
			handler : this.onBtnInloggenClicked,
			scope : this

		});

		this.add(this.formpanel);
	},

	onBtnInloggenClicked : function() {

		this.formpanel.form.submit({
			url : this.baseUrl + '/account/inloggen',
			method : 'post',
			success : function(response, options) {
				var doc = Ext.getDoc();
				doc.dom.location = doc.dom.location;
			},
			failure : function(form, action) {
				Ext.Msg.alert('Melding', action.result.error)
			},
			scope : this
		});
	},

	onBtnAanmakenClicked : function(btn) {
		openRegisterForm(this.baseUrl);
	},

	onBtnForgottenClicked : function(btn) {
		openForgottenForm(this.baseUrl);
	},

	onBtnAnnulerenClicked : function() {
		this.hide();
	}
});

ForgottenWindow = Ext.extend(Ext.Window, {

	width : 360,
	height : 140,
	closeAction : "hide",
	closeable : false,
	plain : true,
	layout : "fit",
	title : 'Platomania :: Wachtwoord opnieuw instellen',

	initComponent : function() {

		InlogWindow.superclass.initComponent.call(this);

		this.formpanel = new Ext.FormPanel({
			keys : {
				key : Ext.EventObject.ENTER,
				fn : this.onBtnForgottenInstructionsClicked,
				scope : this
			},
			buttonAlign : "right",
			border : false,
			bodyStyle : 'padding:5px;',
			defaults : {
				labelWidth : 100
			},
			defaultType : 'textfield',
			items : [{
				fieldLabel : 'E-mailadres',
				name : 'username',
				anchor : '100%'
			}]
		});

		this.formpanel.addButton({
			text : 'Instructies versturen',
			handler : this.onBtnForgottenInstructionsClicked,
			scope : this
		});
		this.add(this.formpanel);
	},

	onBtnForgottenInstructionsClicked : function(btn) {
		var form = this.formpanel.form;
		form.submit({
			waitMsg : 'Bezig met versturen...',
			url : this.baseUrl + '/account/herstellen',
			method : 'post',
			success : function(response, options) {
				Ext.Msg.show({
					title : 'Account',
					msg : 'Instructies verzonden naar het opgegeven E-mail adres',
					buttons : Ext.Msg.OK,
					animEl : Ext.EventObject.target,
					icon : Ext.MessageBox.INFO
				});
				this.hide();
			},
			failure : function(form, action) {

				Ext.Msg.show({
					title : 'Account',
					msg : action.result.error,
					buttons : Ext.Msg.OK,
					animEl : Ext.EventObject.target,
					icon : Ext.MessageBox.ERROR
				});

				var email = form.findField('username');
				email.invalidText = action.result.error;
				email.markInvalid();
			},
			scope : this
		});
	}
});

function openRegisterForm(baseUrl, edit) {
	if (typeof(registerwin) == "undefined") {
		registerwin = new RegisterWindow({
			baseUrl : baseUrl,
			edit : edit
		});
	};
	registerwin.show(Ext.EventObject.target);
}
function openLoginForm(baseUrl) {
	if (typeof(inlogwin) == "undefined") {
		inlogwin = new InlogWindow({
			baseUrl : baseUrl
		});
	}
	inlogwin.show(Ext.EventObject.target);
}

function openForgottenForm(baseUrl) {
	if (typeof(forgottenwindow) == "undefined") {
		forgottenwindow = new ForgottenWindow({
			baseUrl : baseUrl
		});
	}
	forgottenwindow.show(Ext.EventObject.target);
}

function togglePanel(panelId) {

	var el = $(panelId);
	if (el.style.display == "none") {
		el.slideDown({
			duration : .4
		});
	} else {
		el.slideUp({
			duration : .4
		});
	}
}

function needLogin() {
	Ext.Msg.show({
		title : 'Melding',
		msg : "Om dit onderdeel te gebruiken moet je ingelogd zijn",
		width : 300,
		buttons : Ext.MessageBox.OK,
		animEl : Ext.EventObject.target,
		icon : Ext.MessageBox.INFO,
		fn : function() {
			openLoginForm(baseUrl);
		}
	});
}

function removeShoppingcartItem(id, baseUrl, animateFromId) {
	Ext.Msg.confirm('Bevestigen',
			'Onderdeel van het winkelwagentje verwijderen', function(btn) {
				if (btn === "yes") {
					if (animateFromId) {
						var el = Ext.get(animateFromId);
						el.ghost('b', {
							easing : 'easeOut',
							duration : .5,
							remove : true,
							useDisplay : true,
							callback : function() {
								Ext.Ajax.request({
									url : baseUrl
											+ '/winkelwagentje/remove/id/' + id,
									callback : function() {
										var doc = Ext.getDoc();
										doc.dom.location = doc.dom.location;
									},
									scope : this
								});
							}
						});
					} else {
						Ext.Ajax.request({
							url : baseUrl + '/winkelwagentje/remove/id/' + id,
							callback : function() {
								var doc = Ext.getDoc();
								doc.dom.location = doc.dom.location;
							},
							scope : this
						});
					}
				}
			}, this);
}

function addShoppingcartItem(id, baseUrl) {
	Ext.Ajax.request({
		url : baseUrl + '/winkelwagentje/add/id/' + id,
		callback : function() {

			Ext.Msg.show({
				title : 'WINKELWAGENTJE',
				msg : 'Item is toegevoegd aan het winkelwagentje',
				width : 300,
				buttons : Ext.MessageBox.OK,
				animEl : Ext.EventObject.target,
				icon : Ext.MessageBox.INFO,
				fn : function() {

					var doc = Ext.getDoc();
					doc.dom.location = doc.dom.location;
				}
			});
		},
		scope : this
	});
}

function logout(baseUrl) {
	Ext.Ajax.request({
		url : baseUrl + '/account/uitloggen/',
		callback : function(option, success, response) {

			Ext.Msg.show({
				title : 'Account',
				msg : 'Succesvol afgemeld',
				width : 300,
				buttons : Ext.MessageBox.OK,
				animEl : Ext.EventObject.target,
				icon : Ext.MessageBox.INFO,
				fn : function() {
					var doc = Ext.getDoc();
					doc.dom.location = doc.dom.location;
				}
			});
		},
		scope : this
	});
}

function inloggen(baseUrl) {
	Ext.Ajax.request({
		url : baseUrl + '/account/inloggen/',
		callback : function(option, success, response) {

			if (success == true) {
				var doc = Ext.getDoc();
				doc.dom.location = baseUrl + redirect;
			}
		},
		scope : this
	});
}

function postStap1(form) {
	form.submit();
}
function postStap2(form) {
	form.submit();
}
function postStap2adres(form) {
	form.submit();
}
function postStap2plato(form) {
	form.submit();
}
function postStap3(form) {
	form.submit();
}

function addRating(baseUrl, rating, id_article) {
	Ext.Msg.confirm('Waardering', 'Waardering score ' + rating + ' toevoegen?',
			function(btn) {
				if (btn == 'yes') {
					Ext.Ajax.request({
						url : baseUrl + '/album/set-waardering/',
						params : {
							rating : rating,
							id_article : id_article
						},
						callback : function(option, success, response) {

							if (success) {
								var result = Ext.decode(response.responseText);
								if (result.success == true) {
									Ext.Msg.show({
										title : 'Waardering',
										msg : 'Waardering geregistreerd',
										width : 300,
										buttons : Ext.MessageBox.OK,
										animEl : Ext.EventObject.target,
										icon : Ext.MessageBox.INFO,
										fn : function() {
											var doc = Ext.getDoc();
											doc.dom.location = 'http://'
													+ window.location.hostname
													+ baseUrl
													+ '/album/index/id/'
													+ id_article;
										}
									});
								} else {
									Ext.Msg.show({
										title : 'Waardering',
										msg : result.message,
										width : 300,
										buttons : Ext.MessageBox.OK,
										animEl : Ext.EventObject.target,
										icon : Ext.MessageBox.INFO,
										fn : function() {
											if (result.code == 1) {
												openLoginForm(baseUrl);
											}
										}
									});
								}

							}
						},
						scope : this
					});
				}
			}.createDelegate(this))
}