Ext.define("Portfolio.login.view.Main", {
	extend: "Ext.window.Window",

	xtype: "portfolio-login",

	alias: [
		"widget.login.view.main"
	],

	title: "Login",

	layout: "fit",

	controller: "portfolio-login-main",

	requires: [
		"Portfolio.login.util.Handler",
		"Portfolio.login.controller.Main"
	],

	draggable: false,

	closable: false,

	resizable: false,

	config: {
		form: null,
		username: null,
		password: null
	},

	width: 320,

	height: 180,

	style: "opacity: 0;",

	listeners: {
		afterrender: {
			fn: function(i_window) {

				var i_self = this;

				i_self.getEl().fadeIn({
					from: {
						opacity: 0
					},
					duration: 500,
					listeners: {
						afteranimate: {
							fn: function() {
								var i_username = i_self.getUsername();
								i_username.focus(false, 10);
							}
						}
					}
				});
			}
		},
		destroy: {
			fn: function() {

				var d_login = document.getElementById("login");

				d_login.parentNode.removeChild(d_login);
			}
		}
	},

	initComponent: function() {

		var i_self = this;
		i_self.callParent(arguments);
		i_self.add(i_self.createLayout());

		Portfolio.login.util.Handler.getLoginConfig(function(o_config) {

			Ext.apply(o_config.loginTheme, {
				userID: "User ID",
				password: "Password",
				login: "Login",
				forgotPassword: "Forgot password",
				sitemuleLogo: o_config.sitemuleLogo
			});

			var i_component = Ext.create("Ext.Component", {
				loader: {
					url: "/custom-config/login/login.html",
					listeners: {
						load: {
							fn: function(i_context) {

								var i_body = Ext.getBody();

								var i_target = i_context.target;
								var s_html = i_target.html;

								var s_loginHtml = Portfolio.login.util.Handler.getTemplate(s_html, o_config.loginTheme);
								Ext.DomHelper.append(i_body, s_loginHtml);
							}
						}
					}
				}
			});

			i_component.getLoader().load();

		});

		i_self.enableBubble("login");
	},

	createLayout: function() {

		var i_self = this;

		var i_form = Ext.widget("form", {
			bodyPadding: 10,
			items: i_self.createItems(),
			buttons: i_self.createButtons(),
			listeners: {
				validitychange: {
					fn: function(i_form, b_valid) {

						var i_loginbutton = i_self.down("#button-login");

						if (i_loginbutton) {
							i_loginbutton[b_valid ? "enable" : "disable"]();
						}
					}
				}
			}
		});

		i_self.setForm(i_form);

		i_form.isValid();

		return i_form;
	},

	createItems: function() {

		var i_self = this;

		var a_items = [];

		var i_username = Ext.widget("textfield", {
			fieldLabel: "Username",
			name: "username",
			emptyText: "username",
			allowBlank: false,
			required: true,
			listeners: {
				specialkey: "onSpecialKey"
			}
		});

		var i_password = Ext.widget("textfield", {
			fieldLabel: "Password",
			emptyText: "password",
			name: "password",
			allowBlank: false,
			required: true,
			inputType: "password",
			listeners: {
				specialkey: "onSpecialKey"
			}
		});

		a_items.push(i_username);
		a_items.push(i_password);

		i_self.setUsername(i_username);
		i_self.setPassword(i_password);

		return a_items;
	},

	createButtons: function() {

		var a_items = [];

		var i_loginbutton = Ext.widget("button", {
			text: "Login",
			itemId: "button-login",
			handler: "onLoginClick"
		});

		a_items.push(i_loginbutton);

		return a_items;
	}
});
