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

	xtype: "portfolio-entity-preview",

	extend: "Ext.window.Window",

	alias: [
		"widget.previewwindow",
		"widget.entity.preview"
	],

	layout: "fit",

	width: 800,

	height: 600,

	constrain: true,

	modal: true,

	resizable: false,

	maximizable: false,

	minimizable: false,

	config: {
		previewState: 0,
		rotation: 0,
		toolbar: null
	},

	initComponent: function() {

		var i_self = this;
		var o_size = i_self.getWindowSize(i_self.getPreviewState());

		i_self.width = o_size.width;
		i_self.height = o_size.height;

		i_self.callParent();
		i_self.addDocked(i_self.createToolbar());
	},

	createToolbar: function() {

		var i_self = this;

		var i_toolbar = Ext.widget("toolbar", {
			itemId: "bar_action",
			docked: "top",
			items: i_self.createButtonsActions()
		});

		i_self.setToolbar(i_toolbar);

		return i_toolbar;
	},

	createButtonsActions: function() {

		var i_self = this;

		var a_buttons = [
			i_self.createButton("reload"),
			"-",
			i_self.createButton("desktop"),
			i_self.createButton("tablet"),
			i_self.createButton("mobile"),
			"-",
			i_self.createRotationButton()
		];

		return a_buttons;
	},

	createButton: function(s_type) {

		var i_self = this;
		var n_state = i_self.getPreviewState();
		var n_rotation = i_self.getRotation();
		var o_config;

		switch (s_type) {
			case "reload":
				o_config = Ext.apply({}, {
					iconCls: "pf-refresh",
					tooltip: ip2.i18n({
						en: "Refresh content",
						da: "Opfrisk indhold"
					}),
					ui: "function-action",
					handler: function () {
						i_self.reload();
					}
				});
				break;
			case "desktop":
				o_config = Ext.apply({}, {
					text: ip2.i18n({
						en: "Desktop",
						da: "Desktop"
					}),
					iconCls: "pf-windows",
					enableToggle: true,
					pressed: n_state === 0 ? true : false,
					ui: "function",
					handler: function (i_button) {

						var o_size = i_self.getWindowSize(0);

						i_self.setTitle(ip2.i18n({
							en: "Preview",
							da: "Preview"
						}) + " - " + i_button.text);

						i_self.doReload(i_button, o_size, false);

						i_self.setPreviewState(0);
					}
				});
				break;
			case "tablet":
				o_config = Ext.apply({}, {
					text: ip2.i18n({
						en: "Tablet",
						da: "Tablet"
					}),
					enableToggle: true,
					pressed: n_state == 1 ? true : false,
					iconCls:"pf-graphics_tablet",
					ui: "function",
					handler: function (i_button) {

						var o_size;
						var n_rotation = i_self.getRotation();

						if (n_rotation === 0) {
							o_size = i_self.getWindowSize(1);
						}
						else {
							o_size = i_self.getWindowSize(3);
						}

						i_self.setTitle(ip2.i18n({
							en: "Preview",
							da: "Preview"
						}) + " - " + i_button.text);

						i_self.doReload(i_button, o_size, true);

						i_self.setPreviewState(1);
					}
				});
				break;
			case "mobile":
				o_config = {
					text: ip2.i18n({
						en: "Mobile",
						da: "Mobil"
					}),
					enableToggle: true,
					pressed: n_state == 2 ? true : false,
					iconCls: "pf-mobilephone3",
					ui: "function",
					handler: function (i_button) {

						var o_size;
						var n_rotation = i_self.getRotation();

						if (n_rotation === 0) {
							o_size = i_self.getWindowSize(2);
						}
						else {
							o_size = i_self.getWindowSize(4);
						}

						i_self.setTitle(ip2.i18n({
							en: "Preview",
							da: "Preview"
						}) + " - " + i_button.text);

						i_self.doReload(i_button, o_size, true);

						i_self.setPreviewState(2);
					}
				};
				break;
		}
		return Ext.widget("button", o_config);
	},

	createRotationButton: function () {

		var i_self = this;
		var n_state = i_self.getPreviewState();

		var o_config = {
			text: ip2.i18n({
				en: "Rotate",
				da: "Roter"
			}),
			itemId: "button_rotation",
			isRotate: true,
			enableToggle: true,
			iconCls: "pf-document_orientation_portrait",
			ui: "function",
			pressed: false,
			hidden: n_state === 0 ? true : false,
			tooltip: ip2.i18n({
				en: "Toggle between Portrait & Landscape",
				da: "Skift mellem visning som Portræt og Landskab"
			}),
			listeners: {
				toggle: function (i_button, b_pressed) {

					var o_size;
					var n_state = i_self.getPreviewState();
					var i_iconEl = i_button.btnIconEl;

					switch (n_state) {
						case 1:
							if (!b_pressed) {
								o_size = i_self.getWindowSize(1);
							}
							else {
								o_size = i_self.getWindowSize(3);
							}
							break;
						case 2:
							if (!b_pressed) {
								o_size = i_self.getWindowSize(2);
							}
							else {
								o_size = i_self.getWindowSize(4);
							}
							break;
					}
					if (!b_pressed) {
						i_self.rotation = 0;
						i_button.setIconCls("pf-document_orientation_landscape");
					}
					else {
						i_self.rotation = 1;
						i_button.setIconCls("pf-document_orientation_portrait");
					}

					i_self.setWidth(o_size.width);
					i_self.setHeight(o_size.height);
					i_self.center();
				}
			}
		};
		return Ext.widget("button", o_config);
	},

	getWindowSize: function(type) {

		var o_wndsize = Portfolio.util.Handler.getWindowSize();
		var hi = o_wndsize.height;
		var wid = o_wndsize.width;

		var o_size = {
			width: 0,
			height: 0
		};
		switch (type) {
			case 0:  // Desktop
				o_size.width = Math.max((wid * 0.9), 992);
				o_size.height = (hi * 0.9);
				break;
			case 1:  // Tablet standing
				o_size.width = Math.min(800, (wid * 0.9));
				o_size.height = Math.min(1280, (hi * 0.9));
				break;
			case 3: // Table
				o_size.width = Math.min(1280, (wid * 0.9));
				o_size.height = Math.min(800, (hi * 0.9));
				break;
			case 2: // Mobile standig
				o_size.width = 375;
				o_size.height = 667;
				break;
			case 4: // Mobile
				o_size.width = 667;
				o_size.height = 375;
				break;
		}

		o_size.width += 10;
		return o_size;
	},

	handleButtons: function(i_button, size) {

		var i_self = this;

		i_self.setWidth(size.width);
		i_self.setHeight(size.height);
		i_self.center();

		var i_toolbar = i_self.getToolbar();
		var a_buttons = i_toolbar.query("button");

		Ext.Array.each(a_buttons, function(i_action) {
			if (i_action.id != i_button.id && !i_action.isRotate) {
				if (i_action.pressed) {
					i_action.toggle();
				}
			}
		});

		i_self.reload();
	},

	reload: function() {

		var i_self = this;
		var i_webcontainer = i_self.down("webcontainer");

		if (i_webcontainer) {

			var i_iframe = i_webcontainer.getIframe();
			var i_element = i_iframe.getEl();
			i_element.dom.src = i_element.dom.src;
		}
	},

	doReload: function(o_button, o_size, b_showrotation) {

		var i_self = this;
		var i_rotation = i_self.down("#button_rotation");

		i_rotation.setVisible(b_showrotation);

		i_self.handleButtons(o_button, o_size);
	}

});
