Ext.define("Portfolio.top.view.Main", {

	xtype: "portfolio-top",

	extend: "Ext.panel.Panel",

	height: 60,

	bodyCls: "x-ux-admin-top-background",

	layout: {
		type: "hbox",
		align: "center"
	},

	cls: "x-ux-admin-top-container",

	requires: [
		"Portfolio.top.view.Settings"
	],

	config: {
		logo: null,
		profileTitle: null,
		profileInfo: null,
		profileImage: null,
		currentUser: null,
		settingsMenu: null,
		systemMenu: null,
		systemArea: null
	},

	defaults: {
		margin: "0 0 0 10"
	},

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

				i_panel.body.addCls("x-portfolio-top");

				var o_settings = Portfolio.login.util.Handler.getSettings();
				var o_header = o_settings.header || {};

				var s_backgroundColor = o_header.backgroundColor;

				var i_element = i_panel.getTargetEl();

				if (i_element && s_backgroundColor) {
					i_element.setStyle("backgroundColor", s_backgroundColor);
				}

				i_panel.updateProfile();
			}
		},
		click: {
			element: "el",
			fn: function(i_event, i_element) {

				var i_self = this.component;

				var i_profileimage = i_self.getProfileImage();
				var i_settingsMenu = i_self.getSettingsMenu();

				if (!i_event.within(i_profileimage.getEl(), true)) {
					i_settingsMenu.hide();
				}
			}
		},
		systemAdded: {
			fn: function(a_systems) {

				var i_self = this;

				var i_systemArea = i_self.getSystemArea();

				Ext.Array.each(a_systems, function (o_config) {
					i_self.createSystemButton(o_config.title, o_config.itemId, o_config.first, o_config.binding);
				});

				var a_range = i_systemArea.items.getRange();

				if (a_range.length > 0) {
					i_systemArea.setActiveTab(i_systemArea.items.getAt(0));
				}

			}
		},
		systemShortcut: {
			fn: function (s_itemId) {

				var i_self = this;

				var i_systemArea = i_self.getSystemArea();

				var i_tab = i_systemArea.getComponent(s_itemId);

				if (i_tab) {
					i_systemArea.setActiveTab(i_tab);
					i_self.fireEvent("aftershortcut", s_itemId);
				}
			}
		},
		minimizeWindow: {
			fn: function(i_window) {

				var i_self = this;

				var s_title = i_window.getTitle();
				var i_systemArea = i_self.getSystemArea();

				i_systemArea.add(0, {
					text: s_title,
					closable: false,
					style: {
						"text-transform": "initial !important"
					},
					listeners: {
						click: {
							element: "el",
							fn: function(i_event) {

								var i_element = Ext.get(i_event.currentTarget);
								var i_tab = i_element.component;

								i_event.stopEvent();

								i_tab.hide();
								i_systemArea.remove(i_tab, true);
								i_window.show();

							}
						}
					}
				});

				i_window.hide();
			}
		},
		desktopAdded: {
			fn: function(i_desktop) {

				var i_self = this;
				var i_systemMenu = i_self.getComponent("system-menu");

				if (i_systemMenu) {
					var n_index = i_self.items.indexOf(i_systemMenu);

					i_self.add(n_index, i_desktop.getButton());
				}
			}
		}
	},

	initComponent: function() {

		var i_self = this;
		i_self.callParent(arguments);
		i_self.add(i_self.createItems());
		i_self.createMenu();

		i_self.mon(Portfolio.app, "updateinfotemplate", function(s_template) {

			var i_infoComponent = i_self.getProfileInfo();
			i_infoComponent.update(s_template);
		});

		i_self.mon(Portfolio.app, "minimizeWindow", function (i_window) {
			i_self.fireEvent("minimizeWindow", i_window);
		});

		i_self.mon(Portfolio.app, "desktopadded", function (i_desktop) {
			i_self.fireEvent("desktopadded", i_desktop);
		});

		i_self.enableBubble([
			"systemActivate",
			"aftershortcut"
		]);
	},

	createItems: function() {

		var i_self = this;

		var o_settings = Portfolio.login.util.Handler.getSettings();

		var o_header = o_settings.header || {};

		if (!o_header.hasOwnProperty("profile")) {
			Ext.apply(o_header, {
				profile: {
					showIcon: true,
					showTip: true
				}
			});
		}

		var s_adminLogo = o_header.logo;

		var a_items = [];

		var o_iconStyle = {};

		if (s_adminLogo) {

			Ext.apply(o_iconStyle, {
				"background-image": "url(\"" + s_adminLogo + "\")",
				"background-position": "center center",
				"background-repeat": "no-repeat"
			});
		}

		var o_icon = {
			autoEl: {
				tag: "span"
			}
		};

		if (o_header.iconStyle) {
			Ext.Object.merge(o_iconStyle, o_header.iconStyle);
		}

		if (s_adminLogo) {

			Ext.apply(o_icon, {
				width: o_header.logoWidth || 30,
				height: o_header.logoHeight || 50,
				margin: "0 0 0 20",
				style: o_iconStyle
			});
		}
		else {
			Ext.apply(o_icon, {
				cls: "x-site-icon pf-sitemule",
				margin: "0 35 0 30"
			});
		}

		var i_logo = Ext.widget("component", o_icon);

		if (!o_header.profile.hasOwnProperty("showTip")) {
			Ext.apply(o_header.profile, {
				showTip: true
			});
		}

		var i_profileTitle = Ext.widget("component", {
			html: "",
			itemId: "profile-title",
			style: {
				"color": "white",
				"font-weight": "bold",
				"cursor": "default"
			},
			listeners: {
				afterrender: {
					fn: function(i_component) {

						var o_settings = Portfolio.login.util.Handler.getSettings();
						var o_header = o_settings.header || {};

						if (o_header.hideTitle) {
							return false;
						}

						if (ip2.preset.text) {
							ip2.navigator.system.server.description = ip2.preset.text;
						}

						var a_items = [];

						var o_banner = ip2.navigator.banner;

						if (o_banner) {
							a_items.push(o_banner.text || ip2.baseconfig.session.preset.text);
						}
						else {
							a_items.push(ip2.baseconfig.session.preset.text);
						}

						var s_title = a_items.join("");
						i_component.setHtml(s_title);
					}
				}
			}
		});

		var i_infoComponent = Ext.widget("component", {
			html: ""
		});

		var i_profileImage = Ext.widget("component", {
			autoEl: {
				tag: "span"
			},
			itemId: "profile-image",
			cls: o_header.profile.showIcon ? "x-site-user-icon" : "x-site-user-icon-none",
			margin: o_header.profile.showIcon ? "0 35 0 30" : "0 20 0 30",
			showIcon: o_header.profile.showIcon,
			listeners: {
				afterrender: {
					fn: function(i_component) {

						if(o_header.profile.showTip) {

							var i_element = i_component.getEl();

							Ext.create("Ext.tip.ToolTip", {
								target: i_element,
								html: "",
								anchor: true,
								anchorSize: 27,
								defaultAlign: "t50-b40",
								style: {
									margin: "0 10 0 0"
								},
								mouseOffset: [0, 0],
								listeners: {
									beforeshow: {
										fn: function (i_tip) {

											var i_user = ip2.getUser();

											var a_list = [];

											if (i_user.get("USRPRF")) {
												a_list.push(i_user.get("USRPRF"));
											}

											if (i_user.get("USRNAM")) {
												a_list.push(i_user.get("USRNAM"));
											}

											var s_value = a_list.join(" - ");

											if (s_value) {
												i_tip.update(s_value);
											}
											else {
												return false;
											}
										}
									}
								}
							});
						}
					}
				},
				click: {
					element: "el",
					fn: function(i_event, i_element) {

						var i_settingsMenu = i_self.getSettingsMenu();
						var i_container = this;

						i_event.stopEvent();

						if (i_settingsMenu.isVisible()) {
							i_settingsMenu.hide();
						}
						else {
							i_settingsMenu.showBy(i_container.el, "tr-br", [10, 0]);
						}
					}
				}
			}
		});

		var i_systemArea = Ext.widget("tabbar", {
			overflowHandler: "menu",
			plain: false,
			ui: "system-list",
			height: 60,
			layout: {
				type: "hbox",
				align: "stretch"
			},
			tabConfig: {
				ui:"default"
			},
			defaults: {
				xtype: "tab",
				ui:"system-item"
			},
			listeners: {
				change: {
					fn: function(i_tabbar, i_tab, i_card) {
						i_self.fireEvent("systemActivate", i_tab.itemId);
					}
				}
			}
		});

		var i_systemMenu = Ext.widget("component", {
			autoEl: {
				tag: "span"
			},
			itemId: "system-menu",
			cls: "x-site-user-icon pf-windows_arrange",
			listeners: {
				click: {
					element: "el",
					fn: function(i_event, i_element) {

						var i_menu = Ext.widget("menu", {
							listeners: {
								beforeshow: {
									fn: function(i_menu) {

										var b_hasTabs = Portfolio.app.fireEvent("hasTabs");

										var a_windows = Ext.WindowManager.zIndexStack.getRange();

										var i_organize = i_menu.child("#pf-organize");
										var i_fit = i_menu.child("#pf-fit");
										var i_windows = i_menu.child("#pf-windows");
										var i_tabs = i_menu.child("#pf-tabs");
										var i_desktop = i_menu.child("#pf-desktop");

										if (i_organize) {
											i_organize[a_windows.length ? "enable": "disable"]();
										}

										if (i_fit) {
											i_fit[a_windows.length ? "enable" : "disable"]();
										}

										if (i_windows) {
											i_windows[b_hasTabs ? "enable" : "disable"]();
										}

										if (i_tabs) {
											i_tabs[a_windows.length ? "enable" : "disable"]();
										}

										if (i_desktop) {
											i_desktop[a_windows.length ? "enable" : "disable"]();
										}

									}
								}
							},
							items: [
								{
									xtype: "menuitem",
									itemId: "pf-organize",
									text: ip2.i18n({
										da: "Organiser",
										en: "Organize"
									}),
									iconCls: "pf-elements3",
									handler: function () {

										Portfolio.app.fireEvent("organizewindows");
									}
								},
								{
									xtype: "menuitem",
									itemId: "pf-fit",
									text: ip2.i18n({
										da: "Tilpas",
										en: "Fit"
									}),
									iconCls: "pf-elements4",
									handler: function () {

										Portfolio.app.fireEvent("resizewindows");
									}
								},
								{
									xtype: "menuitem",
									itemId: "pf-windows",
									text: ip2.i18n({
										da: "Vinduer",
										en: "Windows"
									}),
									iconCls: "pf-elements",
									handler: function () {

										Portfolio.app.fireEvent("tabstowindow");
									}
								},
								{
									xtype: "menuitem",
									itemId: "pf-tabs",
									text: ip2.i18n({
										da: "Faner",
										en: "Tabs"
									}),
									iconCls: "pf-minus",
									handler: function () {

										Portfolio.app.fireEvent("windowstotab");
									}
								},
								{
									xtype: "menuitem",
									itemId: "pf-desktop",
									text: ip2.i18n({
										da: "Desktop",
										en: "Desktop"
									}),
									iconCls: "pf-element",
									handler: function () {

										Portfolio.app.fireEvent("createdesktop");
									}
								}
							]
						});

						var i_container = this;

						i_event.stopEvent();

						if (i_menu.isVisible()) {
							i_menu.hide();
						}
						else {
							i_menu.showBy(i_container.el, "tr-br", [10, 0]);
						}
					}
				}
			}
		});

		a_items.push(i_logo);
		a_items.push(i_profileTitle);
		a_items.push({
			xtype: "tbfill"
		});
		a_items.push(i_infoComponent);
		a_items.push({
			xtype: "tbfill"
		});
		a_items.push(i_systemArea);
		a_items.push(i_systemMenu);
		a_items.push(i_profileImage);

		i_self.setLogo(i_logo);
		i_self.setProfileTitle(i_profileTitle);
		i_self.setProfileInfo(i_infoComponent);
		i_self.setSystemArea(i_systemArea);
		i_self.setProfileImage(i_profileImage);

		return a_items;
	},

	updateProfile: function(s_username, s_profileImage) {

		var i_self = this;

		var i_user = Portfolio.util.Handler.getUser();

		var i_profileImage = i_self.getProfileImage();

		if (i_profileImage.showIcon) {
			var fn_updateImage = function(s_profileImage) {

				var o_style = {};
				var s_html = "";

				s_profileImage = s_profileImage || i_user.get("USRIMG") || i_user.get("URL");

				if (s_profileImage) {

					s_profileImage = Ext.apply(o_style, {
						"background-image": "url(\"" + s_profileImage + "\")",
					});

					i_profileImage.addCls("header-user-image");
				}
				else{
					i_profileImage.addCls("pf-profile2");
				}

				i_profileImage.setStyle(o_style);
				i_profileImage.setHtml(s_html);
			};

			if (i_profileImage.rendered) {
				fn_updateImage(s_profileImage);
			}
			else {
				i_profileImage.on({
					afterrender: {
						fn: function() {
							fn_updateImage(s_profileImage);
						},
						single: true
					}
				});
			}
		}
		else {
			i_profileImage.setHtml(i_user.get("USRPRF") || i_user.get("USRID"));
		}

	},

	createMenu: function() {

		var i_self = this;

		var i_settingsMenu = Ext.widget("menu", {
			showSeparator: false,
			over: false,
			bodyPadding: 10,
			items: [
				{
					xtype: "menuitem",
					text: ip2.i18n({
						da: "Indstillinger",
						en: "Settings"
					}),
					iconCls: "pf-gearwheel",
					handler: function() {

						var i_settingsWindow = Ext.widget("portfolio-settings", {
							title: ip2.i18n({
								da: "Redigere bruger",
								en: "Edit user"
							}),
							width: 400
						});

						i_settingsWindow.show();
					}
				},
				{
					xtype: "menuitem",
					iconCls: "pf-lock",
					text: ip2.i18n({
						da: "Log ud",
						en: "Logout"
					}),
					handler: function() {
						Ext.GlobalEvents.fireEvent("logout");
					}
				}
			],
			listeners: {
				mouseout: {
					element: "el",
					fn: function(i_event, i_element) {

						var i_settingsMenu = i_self.getSettingsMenu();

						if (!i_event.within(this, true)) {
							if (i_settingsMenu) {
								i_settingsMenu.hide();
							}
						}
					},
					buffer: 500
				}
			}
		});

		i_self.setSettingsMenu(i_settingsMenu);
	},

	createSystemButton: function(s_title, s_itemId, b_first, o_binding) {

		var i_self = this;

		o_binding = o_binding || {};

		var i_systemArea = i_self.getSystemArea();

		var i_tab = i_systemArea.add({
			text: s_title,
			closable: false,
			pressed: b_first,
			itemId: s_itemId
		});

		if (o_binding.keyCode) {

			var o_shortcut = {
				ctrl: o_binding.ctrl,
				alt: o_binding.alt,
				keyCode: o_binding.keyCode,
				shift: o_binding.shift
			};

			Ext.create("Ext.tip.ToolTip", {
				target: i_tab.getEl(),
				html: "",
				anchor: true,
				defaultAlign: "t50-b50",
				listeners: {
					beforeshow: {
						fn: function (i_tip) {

							var a_list = [];

							if (o_shortcut.ctrl) {
								a_list.push("Ctrl");
							}

							if (o_shortcut.alt) {
								a_list.push("Alt");
							}

							if (o_shortcut.shift) {
								a_list.push("shift");
							}

							if (o_shortcut.keyCode) {
								a_list.push(Ext.event.Event.getKeyId(o_shortcut.keyCode));
							}

							var s_value = a_list.join(" + ");

							if (s_value) {
								i_tip.update(s_value);
							}
							else {
								return false;
							}
						}
					},
					show: {
						fn: function(i_tip) {

							i_tip.realignToTarget();
						},
						buffer: 10
					}
				}
			});
		}

	}

});
