FR = {
	UI: {},
	changesSaved: true,
	editor: false,
	init() {
		this.viewport = new Ext.Viewport({
			items: {
				tbar: {
					cls: 'fr-viewport-top-bar',
					items: [
						{
							text: "Save",
							cls: 'fr-btn-primary',
							hidden: !FR.settings.isEditable,
							handler: () => this.save(false)
						},
						{
							text: "Save and close",
							cls: 'fr-btn-primary',
							hidden: (!FR.settings.isEditable || !FR.settings.isClosable),
							handler: () => this.save(true)
						},
						{
							text: "Close",
							hidden: !FR.settings.isClosable,
							handler: () => FR.closeWindow()
						},
						{
							text: "Insert new row",
							hidden: !FR.settings.isEditable,
							handler: () => FR.editor.insertRow()
						},
						{
							text: "Insert new column",
							hidden: !FR.settings.isEditable,
							handler: () => FR.editor.insertColumn()
						},
						{
							xtype: 'tbtext', id: 'status', text: ''
						}
					]
				}
			},
			listeners: {
				'afterrender': function() {
					var firstItem = this.items.first(),
						bodySize = firstItem.body.getSize();
					FR.editor = jspreadsheet(firstItem.body.dom, {
						csv: FR.settings.fileURL,
						csvHeaders:true,
						tableOverflow: true,
/*
                        tableWidth: bodySize.width+'px',
                        tableHeight: (bodySize.height-22)+'px',
*/
						fullscreen: true,
						lazyLoading: true,
						loadingSpin:true,
						allowExport: false,
						defaultColWidth: 150,
						csvDelimiter: FR.settings.delimiter,
						includeHeadersOnDownload: true,
						onchange: FR.onChange
					});
				}/*,
				'resize': function() {}*/
			}
		});
		window.onbeforeunload = function() {
			if (!FR.changesSaved) return Ext.T('Discard the changes made?');
		};

	},
	onChange() {
		FR.changesSaved = false;
		Ext.c('status').setText('<span class="colorDanger">' + Ext.T('Unsaved changes') + '</span>');
	},
	closeWindow() {
		if (!FR.changesSaved) {
			new Ext.ux.prompt({text: Ext.T('Discard the changes made?'),
				confirmHandler: function() {
					window.parent.FR.UI.popups[FR.settings.windowId].close();
				}});
			return false;
		}
		window.parent.FR.UI.popups[FR.settings.windowId].close();
	},
	save(close) {
		this.closeAfterSave = close;
		this.viewport.el.mask('Saving...');
		Ext.Ajax.request({
			url: FR.settings.actionURL+'&method=saveChanges',
			params: {
				path: FR.settings.path,
				filename: FR.settings.filename,
				csvHeaders: JSON.stringify(FR.editor.getHeaders(true)),
				textContents: JSON.stringify(FR.editor.getJson())
			},
			success: function(req) {
				this.viewport.el.unmask();
				try {
					var rs = JSON.parse(req.responseText);
				} catch (er){return false;}

				if (rs.success) {
					FR.changesSaved = true;
					Ext.c('status').setText('');
				} else {
					FR.changesSaved = false;
				}
				if (rs.msg) {
					if (FR.settings.windowId) {
						window.parent.FR.UI.feedback(rs.msg, rs.success ? 'success' : 'error');
					} else {
						Ext.c('status').setText(rs.msg);
					}
				}
				if (rs.success && this.closeAfterSave) {
					this.closeWindow();
				}
			},
			scope: this
		});
	}
};