Ext.define("Ext.ux.file.view.Preview", {
	extend: "Ext.window.Window",
	alias: "widget.filepreview",
	layout: "fit",
	modal: true,
	record: undefined,
	width: 800,
	height: 600,
	constrain: true,

	initComponent: function () {
		var i_self = this;
		i_self.callParent(arguments);
		i_self.add(i_self.createForm());
		var i_record = i_self.record;
		var s_title = ip2.i18n({
			da: "Preview",
			en: "Preview"
		});
		s_title = s_title + ": " + i_record.get("FILNAME");
		i_self.setTitle(s_title);
		return i_self;
	},

	createForm: function() {
		var i_self = this;
		var i_form = Ext.widget("form", {
			layout: "border",
			items: [
				i_self.createPreivew(),
				i_self.createPanelInfo()
			],
			buttons: i_self.createButtons()
		});
		i_form.loadRecord(i_self.record);
		return i_form;
	},

	createPreivew: function() {
		var i_self = this;
		var i_preview = {
			xtype: "panel",
			region: "center",
			layout: "fit",
			title: ip2.i18n({
				da: "Fil",
				en: "File"
			}),
			flex: 3,
			bodyPadding: 20,
			items: [
				{
					xtype: "container",
					setImage: function() {
						var url = i_self.record.get("FILPATH") + i_self.record.get("FILNAME");
						var size = this.getSize();
						var el = this.getEl();
						el.setStyle({
							"background": 'url("' + url + '") no-repeat 50% 50%',
							"background-size": "contain"
						});
					},
					listeners: {
						afterrender: {
							single: true,
							fn: function(item) {

								var f_layout = item.doLayout || item.updateLayout;

								f_layout.call(item);

								setTimeout(function() {
									item.setImage();
								}, 5);
							}
						}
					}
				}
			]
		};
		return i_preview;
	},

	createPanelInfo: function() {
		var i_self = this;
		var i_panel = {
			xtype: "panel",
			region: "south",
			flex: 2,
			layout: "border",
			items: [
				i_self.createFieldSetInfo(),
				i_self.createFieldSetMeta()
			]
		};
		return i_panel;
	},

	createFieldSetInfo: function() {
		var i_self = this;
		var fieldset = {
			xtype: "panel",
			flex: 2,
			region: "west",
			autoScroll: true,
			bodyPadding: 5,
			title: ip2.i18n({
				da: "Generel information",
				en: "General information"
			}),
			layout: "anchor",
			items: [
				{
					xtype: "textfield",
					name: "FILMEDIA",
					anchor: "99%",
					fieldLabel: ip2.i18n({
						da: "Media",
						en: "Media"
					}),
					readOnly: true,
					hidden: true
				},
				{
					xtype: "textfield",
					name: "FILNAME",
					anchor: "99%",
					fieldLabel: ip2.i18n({
						da: "Navn",
						en: "Name"
					}),
					readOnly: true,
					hidden: false,
					getValue: function() {
						var value = this.getRawValue();
						return value + "." + this.extension;
					},
					setValue: function(value) {
						value = value || "";
						var extension = value.split(".").pop();
						this.extension = extension;
						i_self.extension = extension;
						var name = value.replace("." + extension, "");
						this.mixins.field.setValue.call(this, name);
						this.setRawValue(name);
						return this;
					}
				},
				{
					xtype: "isotimestampfield",
					name: "FILCREATE",
					fieldLabel: ip2.i18n({
						da: "Oprettet",
						en: "Created"
					}),
					readOnly: true
				},
				{
					xtype: "isotimestampfield",
					name: "FILMODIFY",
					fieldLabel: ip2.i18n({
						da: "Modificeret",
						en: "Modification"
					}),
					readOnly: true
				},
				{
					xtype: "textfield",
					name: "FILPATH",
					anchor: "99%",
					fieldLabel: ip2.i18n({
						da: "Sti",
						en: "Path"
					}),
					readOnly: true,
					hidden: false
				},
				{
					xtype: "textfield",
					name: "FILORIPATH",
					anchor: "99%",
					fieldLabel: ip2.i18n({
						da: "Original sti",
						en: "Original path"
					}),
					readOnly: true,
					hidden: false
				}
			]
		};
		return fieldset;
	},

	createFieldSetMeta: function() {
		var i_self = this;
		var fieldset = {
			xtype: "panel",
			flex: 1,
			region: "center",
			bodyPadding: 5,
			autoScroll: true,
			title: ip2.i18n({
				da: "Meta information",
				en: "Meta Information"
			}),
			layout: "anchor",
			items: [
				{
					xtype: "textfield",
					name: "FILWIDTH",
					anchor: "99%",
					fieldLabel: ip2.i18n({
						da: "Brede",
						en: "Width"
					}),
					readOnly: true
				},
				{
					xtype: "textfield",
					name: "FILHEIGHT",
					anchor: "99%",
					fieldLabel: ip2.i18n({
						da: "Højde",
						en: "Heigth"
					}),
					readOnly: true
				},
				{
					xtype: "textfield",
					name: "FILSIZE",
					anchor: "99%",
					fieldLabel: ip2.i18n({
						da: "Størrelse",
						en: "Size"
					}),
					readOnly: true,
					getValue: function() {
						return this.trueValue;
					},
					setValue: function(value) {
						value = value || 0;
						var rawValue = ip2.humanFileSize(value);
						this.trueValue = value;
						this.mixins.field.setValue.call(this, value);
						this.setRawValue(rawValue);
						return this;
					}
				},
				{
					xtype: "textfield",
					name: "FILEXT",
					anchor: "99%",
					fieldLabel: ip2.i18n({
						da: "Fil type",
						en: "File type"
					}),
					readOnly: true
				}
			]
		};
		return fieldset;
	},

	createButtons: function() {
		var i_self = this;
		var a_buttons = [{
			xtype: "button",
			text: ip2.i18n({
				da: "Luk",
				en: "Close"
			}),
			handler: function(i_button) {
				i_self.close();
			}
		}];
		return a_buttons;
	}
});
