Ext.define("Portfolio.entity.view.Panel", {

	xtype: "portfolio-entity-panel",

	extend: "Ext.panel.Panel",

	alias: [
		"widget.entity.panel",
		"widget.ip2pagingGrid"
	],

	alternateClassName: [
		"Ext.ux.entity.Grid"
	],

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

	config: {
		previewPanel: null,
		grid: null,
		previewConfig: {},
		uiName: "portfolio",
		dmdInfo: null,
		extraParams: {}
	},

	requires: [
		"Portfolio.entity.view.Grid",
		"Portfolio.entity.view.Preview"
	],

	initComponent: function () {

		Ext.tip.QuickTipManager.init();

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

		var o_initial = Ext.apply({}, i_self.initialConfig);

		var o_dmdInfo = Portfolio.util.Handler.dmd.getInfo({
			dmd: o_initial.dmd.path,
			entity: o_initial.dmd.entityName,
			view: o_initial.dmd.uiName || i_self.uiName,
			context: "grid"
		});

		i_self.setDmdInfo(Ext.apply({}, o_dmdInfo));

		if (i_self.getExtraParams()) {
			o_dmdInfo.extraParams = i_self.getExtraParams();
		}

		i_self.createlayout();
	},

	createlayout: function () {

		var i_self = this;
		var o_dmdInfo = i_self.getDmdInfo();
		var o_view = o_dmdInfo.view;
		var o_features = o_view.features;
		var o_entity = o_dmdInfo.entity;
		var i_grid = i_self.createGrid();

		var a_items = [
			i_grid
		];

		if (o_features) {

			var o_preview = o_features.preview;

			if (o_preview) {

				var o_toolbarConfig = o_preview.toolbar;
				var i_toolbar = i_grid.getToolbar();
				var s_dmd = i_grid.dmdName;
				var i_preivewButton;

				if (Portfolio.util.Handler.isAccessible("app." + s_dmd + ".functions.preview") ||
					Portfolio.util.Handler.isAccessible("app." + s_dmd + ".functions." + o_entity.name + ".preview")) {

					var a_requires = Ext.Array.from(o_preview.requires);

					if (a_requires.length > 0) {
						Ext.syncRequire(a_requires);
					}

					var s_xtype = o_preview.xtype || "panel";

					var i_previewPanel = Ext.widget(s_xtype, {
						layout: "fit",
						split: true,
						flex: 1,
						hidden: !o_preview.active
					});

					i_self.setPreviewPanel(i_previewPanel);

					if (o_toolbarConfig) {
						var i_previewBar = i_self.createActionBar(o_toolbarConfig.sizes);
						i_previewPanel.addDocked(i_previewBar);
					}

					i_grid.on({
						select: {
							fn: function(i_store, i_record) {

								var i_previewPanel = i_self.getPreviewPanel();

								var a_events = Ext.Array.from(o_preview.events);

								if (a_events.length > 0) {

									Ext.Array.each(a_events, function(s_event) {
										i_previewPanel.fireEvent(s_event, i_previewPanel, i_record);
									});
								}
								else {

									Ext.Ajax.request({
										url: "/ip2-services/ip2transaction.aspx",
										method: "POST",
										jsonData:{
											action: "cmsCms.cmsGetCurrentSite"
										},
										success: function(i_response) {

											var o_settings = Ext.decode(i_response.responseText, true);

											if (o_settings) {

												var o_system = o_settings.system || o_settings;

												var o_config = Ext.Object.mergeIf({}, o_preview, {
													record: i_record,
													http_host: o_system.host,
													layout: "fit",
													multilanguage: false,
													url: o_preview.src || o_preview.url
												});

												i_self.setPreviewConfig(o_config);

												var i_created = Portfolio.util.Handler.callWidget(o_config);

												i_previewPanel.removeAll(true);

												i_previewPanel.add(i_created);
											}
										},
										failure: function() {
											
											Ext.Ajax.request({
												url: "/ip2-services/wshproxy.aspx?action=getsite",
												success: function(i_response) {
		
													var o_settings = Ext.decode(i_response.responseText, true);
		
													if (o_settings) {
		
														var o_config = Ext.Object.mergeIf({}, o_preview, {
															record: i_record,
															http_host: o_settings.http_host,
															layout: "fit",
															multilanguage: o_settings.language_usingmulti,
															url: o_preview.src || o_preview.url
														});
		
														i_self.setPreviewConfig(o_config);
		
														var i_created = Portfolio.util.Handler.callWidget(o_config);
		
														i_previewPanel.removeAll(true);
		
														i_previewPanel.add(i_created);
													}
												},
												failure: function() {
													
												}
											});
										}
									});
								}
							},
							buffer: 250
						}
					});


					if (i_toolbar) {

						i_toolbar.on({
							afterfunctions: {
								fn: function(i_toolbar, i_buttonFunctions) {
									var i_menu = i_buttonFunctions.menu;

									i_preivewButton = i_self.createPreviewButton(o_preview.active, i_menu);

									if (i_menu) {
										i_menu.add(i_preivewButton);
									}
									else {
										i_toolbar.add(i_preivewButton);
									}

								}
							}
						});
					}

					a_items.push(i_previewPanel);
				}
			}
		}

		i_self.setGrid(i_grid);
		i_self.add(a_items);
	},

	createActionBar: function (o_sizes) {

		var i_self = this;

		var i_toolbar = Ext.widget("toolbar", {
			docked: "top",
			items: i_self.createActions(o_sizes)
		});

		return i_toolbar;
	},

	createActions: function(o_config) {

		var i_self = this;
		var a_buttons = [];
		var o_sizes = o_config || {};

		if (o_sizes.desktop) {
			a_buttons.push(i_self.createSizeButton("desktop"));
		}
		if (o_sizes.tablet) {
			a_buttons.push(i_self.createSizeButton("tablet"));
		}
		if (o_sizes.mobile) {
			a_buttons.push(i_self.createSizeButton("mobile"));
		}
		return a_buttons;
	},

	createSizeButton: function (type) {

		var i_self = this;
		var o_config;

		switch (type) {
			case "desktop":
				o_config = Ext.apply({}, {
					iconCls: "floating_window",
					text: Portfolio.util.Handler.i18n({
						en: "Desktop",
						da: "Desktop"
					}),
					tooltip: Portfolio.util.Handler.i18n({
						en: "Open in floating window",
						da: "Åben i flydende vindue"
					}),
					handler: function (i_button) {

						var o_config = i_self.getPreviewConfig();

						if (o_config) {

							i_self.createWindow(0, i_button.text, o_config);
						}
					}
				});
				break;
			case "tablet":
				o_config = Ext.apply({}, {
					iconCls: "floating_window",
					text: Portfolio.util.Handler.i18n({
						en: "Tablet",
						da: "Tablet"
					}),
					tooltip: Portfolio.util.Handler.i18n({
						en: "Open in floating window",
						da: "Åben i flydende vindue"
					}),
					handler: function (i_button) {

						var o_config = i_self.getPreviewConfig();

						if (o_config) {

							i_self.createWindow(1, i_button.text, o_config);
						}
					}
				});
				break;
			case "mobile":
				o_config = Ext.apply({}, {
					iconCls: "floating_window",
					text: Portfolio.util.Handler.i18n({
						en: "Mobile",
						da: "Mobil"
					}),
					tooltip: Portfolio.util.Handler.i18n({
						en: "Open in floating window",
						da: "Åben i flydende vindue"
					}),
					handler: function (i_button) {

						var o_config = i_self.getPreviewConfig();

						if (o_config) {

							i_self.createWindow(2, i_button.text, o_config);
						}
					}
				});
				break;
		}
		return Ext.widget("themedbutton", o_config);
	},

	createGrid: function () {

		var i_self = this;

		var o_config = Ext.clone(i_self.initialConfig);

		delete o_config.listeners;

		var o_dmdInfo = i_self.getDmdInfo();

		var o_result = Ext.Object.merge({}, o_config, o_dmdInfo, {
			split: true,
			closable: false,
			flex: 1,
			title: ""
		});

		delete o_result.id;

		var i_grid = Ext.widget("portfolio-entity-grid", o_result);

		i_self.setGrid(i_grid);

		return i_grid;
	},

	createWindow: function (s_type, s_title, o_config) {

		var i_window = Ext.widget("portfolio-entity-preview", {
			title: Portfolio.util.Handler.i18n({
				en: "Preview",
				da: "Preview"
			}) + " - " + s_title,
			previewState: s_type
		});

		var o_copyCfg = Ext.clone(o_config);

		var i_created = Portfolio.util.Handler.callWidget(o_copyCfg);

		i_window.add(i_created);

		i_window.show();

		return i_window;
	},

	createPreviewButton: function (b_active) {

		var i_self = this;

		var i_button = Ext.widget("menuitem", {
			iconCls: "pf-eye",
			pressed: b_active || false,
			enableToggle: true,
			text: Portfolio.util.Handler.i18n({
				da: "Preview",
				en: "Preview"
			}),
			ui: "function",
			handler: function(i_button) {

				var i_previewPanel = i_self.getPreviewPanel();

				var b_visible = i_previewPanel.isVisible();

				i_previewPanel[b_visible ? "hide" : "show"]();
			}
		});

		return i_button;
	}
});
