/*
 * GxUI Library 2.0.1
 * Copyright (c) 2009, Artech
 * All rights reserved.
 * 
 * GxUI Library is freely distributable under the terms of the BSD license.
 * 
 */


/// <reference path="..\..\Freezer\Ext\ext-all-dev.js" />

/**
* @class gxui.Panel
* Panel User Control. Wraps Ext.panel.Panel so it can be used from GeneXus.
*
* The control basically is a container of other controls. After dragging the control to the form you can include any control in the cell provided by the control.
* Also, it came with a Toolbar included.
* {@img Panel/panelSample.png}
*
* #More information:#
* For examples please see the [online KB][1].
* [1]: http://xev2.genexusserver.com/gxserver/action.aspx?1,RSSReader2.0:0:c9584656-94b6-4ccd-890f-332d11fc2c25:41
*/
Ext.define('gxui.Panel', {
	extend: 'gxui.UserControl',

	/**
	* @event ButtonPressed
	* @inheritdoc gxui.Toolbar#ButtonPressed
	*/

	//private
	SetToolbarData: function (data) {
		this.ToolbarData = data;
	},

	//private
	GetToolbarData: function (data) {
		return this.ToolbarData;
	},

	onRender: function () {
		var config = this.getConfig();

		if (gxui.CBoolean(this.ShowAsWindow)) {
			config.closeAction = "hide";
			config.renderTo = 'MAINFORM';
			config.modal = gxui.CBoolean(this.Modal);
			config.constrainHeader = true;
			this.m_panel = new Ext.create('Ext.window.Window', config);

			if (gx.lang.gxBoolean(this.Visible)) {
				this.m_panel.show();
			}
		}
		else {
			this.m_panel = Ext.create('Ext.panel.Panel', config);
		}

		// Register as UC Container
		this.registerCt(this.getChildContainer("Body"), this.m_panel.add, this.m_panel.doLayout, this.m_panel);
	},

	onRefresh: function () {
		var panel = this.m_panel;
		if (this.Title != panel.title) {
			panel.setTitle(this.Title);
		}
		if (!panel.ownerCt) {
			var width = parseInt(this.Width),
				height = parseInt(this.Height);

			if ((!gxui.CBoolean(this.AutoWidth) && panel.getWidth() != width) || (!gxui.CBoolean(this.AutoHeight) && panel.getHeight() != height)) {
				panel.animate({
					to: {
						width: width,
						height: height
					}
				});
			}
		}

		if (gx.lang.gxBoolean(this.Visible) && !this.m_panel.isVisible()) {
			panel.show();
		}
		else {
			if (!gx.lang.gxBoolean(this.Visible) && panel.isVisible()) {
				panel.hide();
			}
		}

		if (gxui.CBoolean(this.UseToolbar)) {
			this.m_gxTbar.SetData(this.ToolbarData);
			this.m_gxTbar.onRefresh();
		}
	},

	getUnderlyingControl: function () {
		return this.m_panel;
	},

	addToParent: function () {
		return !gxui.CBoolean(this.ShowAsWindow) && (this.AddToParentGxUIControl == undefined || gxui.CBoolean(this.AddToParentGxUIControl));
	},

	//private
	getConfig: function () {
		var dockedItems = [],
			bodyEl = Ext.get(this.getChildContainer("Body"));

		if (gxui.CBoolean(this.UseToolbar)) {
			var position = this.ToolbarPosition || 'top';

			this.m_gxTbar = Ext.create('gxui.Toolbar', { register: false });
			this.m_toolbar = this.m_gxTbar.createToolbar({
				id: this.getUniqueId() + "_Toolbar",
				data: this.ToolbarData,
				vertical: !(position == 'bottom' || position == 'top'),
				dock: position,
				container: this
			});

			dockedItems.push(this.m_toolbar);
		}

		bodyEl.enableDisplayMode().show();
		if (gxui.CBoolean(this.AutoHeight)) {
			bodyEl.setStyle({
				height: 'auto',
				display: 'inline-block'
			});
		}

		var config = {
			contentEl: bodyEl,
			id: this.getUniqueId(),
			autoWidth: gxui.CBoolean(this.AutoWidth),
			autoHeight: gxui.CBoolean(this.AutoHeight),
			autoScroll: (this.Layout == 'default'),
			frame: gxui.CBoolean(this.Frame),
			border: gxui.CBoolean(this.Border) ? 2 : false,
			collapsible: gxui.CBoolean(this.Collapsible),
			collapsed: gxui.CBoolean(this.Collapsed),
			animCollapse: gxui.CBoolean(this.AnimateCollapse),
			resizable: gxui.CBoolean(this.Resizable),
			dockedItems: dockedItems,
			listeners: this.getListeners(),
			stateful: gxui.CBoolean(this.Stateful),
			stateId: (this.StateId != "") ? this.StateId : undefined,
			layout: this.Layout == 'default' ? undefined : this.Layout,
			bodyCls: "gxui-noreset"
		};

		gxui.tryPropertyMapping(config, this, {
			"title": "Title",
			"headerPosition": "HeaderPosition",
			"minWidth": "MinWidth",
			"minHeight": "MinHeight",
			"maxWidth": "MaxWidth",
			"maxHeight": "MaxHeight",
			"collapseDirection": "CollapseDirection",
			"resizeHandles": "Handles",
			"iconCls": "IconCls",
			"cls": "Cls"
		});

		if (!gxui.CBoolean(this.AutoWidth))
			config.width = parseInt(this.Width);

		if (!gxui.CBoolean(this.AutoHeight))
			config.height = parseInt(this.Height);

		if (!gx.lang.gxBoolean(this.Visible))
			config.hidden = true;

		return config;
	},

	fixAutoDimensions: function (panel) {
		if (!this.fixingAutoDims) {
			this.fixingAutoDims = true;
			if (panel.rendered) {
				if (gxui.CBoolean(this.AutoHeight)) {
					panel.el.setHeight('auto');
					panel.body.setHeight('auto');
					if (panel.header && (panel.headerPosition == "top" || panel.headerPosition == "bottom")) {
						panel.body.setStyle('margin-bottom', Ext.dom.AbstractElement.addUnits(panel.header.getHeight(), "px"));
					}
				}

				if (gxui.CBoolean(this.AutoWidth)) {
					panel.el.setWidth('auto');
					panel.body.setWidth('auto');
					if (panel.header && (panel.headerPosition == "top" || panel.headerPosition == "bottom")) {
						Ext.defer(panel.header.setWidth, 50, panel.header, ['auto']);
					}
				}
			}
			this.fixingAutoDims = false;
		}
	},

	//private
	getListeners: function () {
		return {
			'collapse': function () {
				this.Collapsed = "true";
			},

			'expand': function () {
				this.Collapsed = "false";
			},

			'hide': function () {
				this.Visible = false;
				/**
				* @event OnClose
				* Fires after a panel, configured as a Window ({@link #ShowAsWindow} = True), is closed.
				*/
				if (this.OnClose) {
					this.OnClose();
				}
			},

			'add': this.fixAutoDimensions,

			'afterrender': this.fixAutoDimensions,

			scope: this
		};
	},

	methods: {
		// Methods
		/**
		* @method
		* @inheritdoc gxui.Toolbar#ChangeToolbar
		*/
		ChangeToolbar: function (toolbarData) {
			if (this.m_gxTbar)
				this.m_toolbar = this.m_gxTbar.ChangeToolbar(toolbarData, this.getUniqueId() + "_Toolbar", this);
		},

		/**
		* Collapses the panel body so that the body becomes hidden.
		* @param {Boolean} [animate] True to animate the transition, else false (defaults to the value of the AnimateCollapse property).
		* @method
		*/
		Collapse: function (animate) {
			this.m_panel.collapse(this.CollapseDirection, animate);
		},

		/**
		* Expands the panel body so that it becomes visible.
		* @param {Boolean} [animate] True to animate the transition, else false (defaults to the value of the AnimateCollapse property).
		* @method
		*/
		Expand: function (animate) {
			this.m_panel.expand(animate);
		},

		/**
		* @method
		* @inheritdoc gxui.Toolbar#DisableItem
		*/
		DisableToolbarItem: function (itemId) {
			this.m_gxTbar.DisableItem(itemId);
		},

		/**
		* @method
		* @inheritdoc gxui.Toolbar#EnableItem
		*/
		EnableToolbarItem: function (itemId) {
			this.m_gxTbar.EnableItem(itemId);
		},

		/**
		* @method
		* @inheritdoc gxui.Toolbar#HideItem
		*/
		HideToolbarItem: function (itemId) {
			this.m_gxTbar.HideItem(itemId);
		},

		/**
		* @method
		* @inheritdoc gxui.Toolbar#ShowItem
		*/
		ShowToolbarItem: function (itemId) {
			this.m_gxTbar.ShowItem(itemId);
		},

		/**
		* Centers the panel (only applies when ShowAsWindow property is set to true).
		* @method
		*/
		CenterWindow: function () {
			if (gxui.CBoolean(this.ShowAsWindow)) {
				this.m_panel.center();
			}
		}
	}
});