Ext.namespace('Zarafa.settings.ui');

/**
 * @class Zarafa.settings.ui.SettingsCategoryTab
 * @extends Ext.Container
 * @xtype zarafa.settingscategorytab
 *
 * Special category option to be rendered into the
 * {@link Zarafa.settings.ui.SettingsCategoryPanel SettingsCategoryPanel}
 */
Zarafa.settings.ui.SettingsCategoryTab = Ext.extend(Ext.Container, {
	/**
	 * @cfg {Zarafa.settings.SettingsContext} context The settings context
	 * for which these tabs are shown.
	 */
	context : undefined,

	/**
	 * @cfg {String} title The title of the category, this string
	 * will be displayed in the left panel of the
	 * {@link Zarafa.settings.ui.SettingsMainPanel}.
	 */
	title : '',

	/**
	 * @cfg {Number} categoryIndex The index of the category
	 * in the {@link Zarafa.settings.ui.SettingsCategoryPanel category list}
	 */
	categoryIndex : 100,

	/**
	 * @cfg {Zarafa.settings.ui.SettingsCategory} category The category
	 * to which this tab has been connected to. When this tab is clicked
	 * that category will be activated through
	 * {@link Zarafa.settings.SettingsContext#setView}
	 */
	category : undefined,

	/**
	 * @cfg {String} iconCls The CSS classname which should be
	 * applied to the tab to display an icon next to the {@link #title}.
	 */
	iconCls : 'zarafa-settings-category-tab-icon',

	/**
	 * @cfg {String} activeCls The CSS classname which should be
	 * applied to the tab when it has been marked {@link #setActive active}.
	 */
	activeCls : 'zarafa-settings-category-tab-active',

	/**
	 * @constructor
	 * @param {Object} config Configuration object
	 */
	constructor : function(config)
	{
		config = config || {};

		Ext.applyIf(config, {
			cls : 'zarafa-settings-category-tab',
			html : config.title || this.title
		});

		Zarafa.settings.ui.SettingsCategoryTab.superclass.constructor.call(this, config);
	},

	/**
	 * Check if the given {@link Ext.Component#id} matches the id of the
	 * {@link #category} which is linked to this tab.
	 * @param {String} id The ID to check
	 * @return {Boolean} True if the given ID is handled by this tab
	 */
	isTabForId : function(id)
	{
		return (this.category && this.category.getId() === id);
	},

	/**
	 * Activate the tab by applying the {@link #activeCls} to the {@link #getEl element}
	 * @param {Boolean} active False to deactivate the tab
	 */
	setActive : function(active)
	{
		if (active !== false) {
			this.getEl().addClass(this.activeCls);
		} else {
			this.getEl().removeClass(this.activeCls);
		}
	},

	/**
	 * Called when the Tab is being rendered, this will apply the {@link Ext.Element#addClassOnClick},
	 * {@link Ext.Element#addClassOnFocus} and {@link Ext.Element#addClassOnOver} for the {@link #el mail element}.
	 * @private
	 */
	onRender : function()
	{
		Zarafa.settings.ui.SettingsCategoryTab.superclass.onRender.apply(this, arguments);

		var el = this.getEl();

		if (!Ext.isEmpty(this.iconCls)) {
			el.addClass(this.iconCls);
		}
		if (!Ext.isEmpty(this.cls)) {
			el.addClassOnClick(this.cls + '-click');
			el.addClassOnFocus(this.cls + '-focus');
			el.addClassOnOver(this.cls + '-over');
		}

		this.mon(el, 'click', this.onClick, this);
	},

	/**
	 * Event handler which is fired when the tab is being clicked,
	 * this will call the {@link #handler} function.
	 * @private
	 */
	onClick : function()
	{
		if (this.context && this.category) {
			this.context.setView(this.category.id);
		}
	}
});

Ext.reg('zarafa.settingscategorytab', Zarafa.settings.ui.SettingsCategoryTab);