Ext.define("Ext.ux.container.Preview", {
	extend: "Ext.window.Window",
	alias: "widget.previewwindow",
	layout: "fit",
	state: 0,
	rotation: 0,
	width: 800,
	height: 600,
	constrain: true,
	modal: true,
	resizable: false,
	maximizable: false,
	minimizable: false,

	initComponent: function() {

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

		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 a_docked = Ext.widget("toolbar", {
			itemId: "bar_action",
			docked: "top",
			items: i_self.createButtonsActions()
		});
		return a_docked;
	},

	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 o_config;
		switch (s_type) {
			case "reload":
				o_config = {
					iconCls: "pf-refresh",
					tooltip: ip2.i18n({
						en: "Refresh content",
						da: "Opfrisk indhold"
					}),
					handler: function () {
						i_self.reload();
					}
				};
				break;
			case "desktop":
				o_config = {
					text: ip2.i18n({
						en: "Desktop",
						da: "Desktop"
					}),
					enableToggle: true,
					pressed: i_self.state === 0 ? true : false,
					handler: function (item) {
						var o_size;
						if (!item.pressed) {
							item.toggle();
						}
						if (i_self.state !== 0) {
							i_self.state = 0;
							o_size = i_self.getWindowSize(0);
							i_self.setTitle(ip2.i18n({
								en: "Preview",
								da: "Preview"
							}) + " - " + item.text);
							i_self.doReload(item, o_size, false);
						}
					}
				};
				break;
			case "tablet":
				o_config = {
					text: ip2.i18n({
						en: "Tablet",
						da: "Tablet"
					}),
					enableToggle: true,
					pressed: i_self.state == 1 ? true : false,
					handler: function (item) {
						var o_size;
						if (!item.pressed) {
							item.toggle();
						}
						if (i_self.state != 1) {
							if (i_self.rotation === 0) {
								o_size = i_self.getWindowSize(1);
							}
							else {
								o_size = i_self.getWindowSize(3);
							}
							i_self.state = 1;
							i_self.setTitle(ip2.i18n({
								en: "Preview",
								da: "Preview"
							}) + " - " + item.text);
							i_self.doReload(item, o_size, true);
						}
					}
				};
				break;
			case "mobile":
				o_config = {
					text: ip2.i18n({
						en: "Mobile",
						da: "Mobil"
					}),
					enableToggle: true,
					pressed: i_self.state == 2 ? true : false,
					handler: function (item) {
						var o_size;
						if (!item.pressed) {
							item.toggle();
						}
						if (i_self.showType != 2) {
							if (i_self.rotation === 0) {
								o_size = i_self.getWindowSize(2);
							}
							else {
								o_size = i_self.getWindowSize(4);
							}
							i_self.state = 2;
							i_self.setTitle(ip2.i18n({
								en: "Preview",
								da: "Preview"
							}) + " - " + item.text);
							i_self.doReload(item, o_size, true);
						}
					}
				};
				break;
		}
		return Ext.widget("button", o_config);
	},

	createRotationButton: function () {
		var i_self = this;

		var o_config = {
			text: ip2.i18n({
				en: "Rotate",
				da: "Roter"
			}),
			itemId: "button_rotation",
			isRotate: true,
			enableToggle: true,
			iconCls: "pf-document_orientation_portrait",
			pressed: false,
			hidden: i_self.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 i_iconEl = i_button.btnIconEl;

					switch (i_self.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("themedbutton", o_config);
	},

	getWindowSize: function(type) {

		var o_wndsize = ip2.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;
		}

		// add extjs border width
		o_size.width += 10;
		return o_size;
	},

	handleButtons: function(o_button, size) {
		var i_self = this;

		i_self.setWidth(size.width);
		i_self.setHeight(size.height);
		i_self.center();
		var i_toolbar = i_self.down("#bar_action");
		var a_buttons = i_toolbar.query("button");
		for (var i = 0; i < a_buttons.length; i++) {
			var i_btn = a_buttons[i];
			if (i_btn.id != o_button.id && !i_btn.isRotate) {
				if (i_btn.pressed) {
					i_btn.toggle();
				}
			}
		}

		i_self.reload();
	},

	reload: function() {
		var i_self = this;
		var ip2Iframe = i_self.down("containeriframe");
		if (ip2Iframe) {
			var iframe = ip2Iframe._iframe;
			var cmp = Ext.getCmp(iframe.id);
			cmp.getEl().dom.src = iframe.autoEl.src;

			if (ip2Iframe) {
				ip2Iframe.setLoading(true);
			}
		}
	},

	doReload: function(o_button, o_size, b_showrotation) {
		var i_self = this;
		var o_rotation = i_self.down("#button_rotation");
		o_rotation.setVisible(b_showrotation);
		i_self.handleButtons(o_button, o_size);
	}

});
