Ext.define("Portfolio.settings.control.view.Main", {

	extend: "Ext.panel.Panel",

	xtype: "portfolio-settings-control-main",

	config: {
		tabPanel: null,
		urlPanel: null,
		appPanel: null
	},

	layout: "fit",

	controller: "portfolio-settings-control-controller-main",

	requires: [
		"Portfolio.settings.control.controller.Main",
		"Portfolio.settings.language.view.Main"
	],

	listeners: {
		afterrender: {
			fn: "loadData"
		}
	},

	initComponent: function() {

		var i_self = this;

		i_self.callParent(arguments);

		i_self.add(i_self.createLayout());
	},

	createLayout: function() {

		var i_self = this;

		var i_panel = Ext.widget("panel", {
			border: false,
			layout: {
				type: "vbox",
				align: "stretch"
			},
			items: [
				i_self.createTop(),
				i_self.createCenter()
			]
		});

		return i_panel;
	},

	createTop: function() {

		var i_self = this;

		var i_panel = Ext.widget("tabpanel", {
			border: false,
			split: true,
			layout: "fit",
			items: [
				i_self.createUrlTab(),
				i_self.createAppTab()
			]
		});

		i_panel.setActiveTab(0);

		i_self.setTabPanel(i_panel);

		return i_panel;
	},

	createUrlTab: function() {

		var i_self = this;

		var i_panel = Ext.widget("form", {
			title: ip2.i18n({
				da: "Applikation",
				en: "Application"
			}),
			layout: "anchor",
			bodyPadding: 10,
			defaults: {
				anchor: "100%",
				labelWidth: 140
			},
			items: [
				{
					xtype: "textfield",
					name: "url",
					fieldLabel: ip2.i18n({
						da: "Sti",
						en: "Path"
					})
				}
			]
		});

		i_self.setUrlPanel(i_panel);

		return i_panel;
	},

	createAppTab: function() {

		var i_self = this;

		var i_panel = Ext.widget("form", {
			title: ip2.i18n({
				da: "Ext applikation",
				en: "Ext application"
			}),
			layout: "anchor",
			bodyPadding: 10,
			autoScroll: true,
			defaults: {
				anchor: "100%",
				labelWidth: 140
			}
		});

		var a_items = [
			{
				xtype: "textfield",
				name: "appName",
				stripCharsRe: new RegExp("(?:^\\s+|\\s+$)"),
				regex: new RegExp("^\\w+(?:\\.\\w+)*$"),
				fieldLabel: ip2.i18n({
					da: "App navn",
					en: "App name"
				})
			},
			{
				xtype: "textfield",
				name: "appFolder",
				stripCharsRe: new RegExp("(?:^\\s+|\\s+$)"),
				fieldLabel: ip2.i18n({
					da: "App folder",
					en: "App folder"
				})
			},
			{
				xtype: "textfield",
				name: "main",
				stripCharsRe: new RegExp("(?:^\\s+|\\s+$)"),
				regex: new RegExp("^\\w+(?:\\.\\w+)*$"),
				fieldLabel: ip2.i18n({
					da: "Main fil",
					en: "Main file"
				})
			},
			{
				xtype: "acetextarea",
				name: "requires",
				fieldLabel: ip2.i18n({
					da: "Requires",
					en: "Requires"
				}),
				mode: "javascript",
				useWorker: false,
				asArray: true,
				height: 80
			},
			{
				xtype: "acetextarea",
				name: "packages",
				fieldLabel: ip2.i18n({
					da: "Pakker",
					en: "Packages"
				}),
				mode: "json",
				useWorker: false,
				asJson: true,
				height: 80
			},
			{
				xtype: "acetextarea",
				name: "appConfig",
				fieldLabel: ip2.i18n({
					da: "App konfig",
					en: "App config"
				}),
				mode: "json",
				useWorker: false,
				asJson: true,
				height: 80
			}
		];

		i_self.setAppPanel(i_panel);

		i_panel.add(a_items);

		return i_panel;
	},

	createCenter: function() {

		var i_self = this;

		var i_languages = Ext.widget("portfolio-settings-language-main", {
			title: ip2.i18n({
				da: "System sprog",
				en: "System languages"
			}),
			flex: 1,
			split: true
		});

		return i_languages;
	}
});
