Ext.namespace("Ext.ux");

/**
 * @class Ext.ux.TabPanel
 * @extends Ext.TabPanel
 *
 * Enable tabs to be positioned on the left side of a TabPanel. In order to make as few changes as possible, we reuse
 * the header element and place it on the left side
 */

/**
 * @constructor
 * @param {Object} cfg A config object
 *  @cfg {String} tabPosition 'top', 'button', 'left' or right
 *  @cfg {Number} tabWidth (only applies if verticalTabs is set to true)
 *  @cfg {String} textAlign 'left' or 'right', deafults to 'left' (only applies if verticalTabs is set to true)
 */
Ext.ux.TabPanel = function(cfg) {
  if (cfg.tabPosition == 'left' || cfg.tabPosition == 'right') {
    cfg.cls = cfg.cls || '';
    cfg.cls = 'verticalTabs ' + cfg.cls;
    if (cfg.textAlign && cfg.textAlign == 'right') {
      cfg.cls = 'alignRight ' + cfg.cls;
    }
    cfg.cls = (cfg.tabPosition == 'left' ? 'leftTabs ' : 'rightTabs ') + cfg.cls;
    this.intendedTabPosition = cfg.tabPosition;
    this.verticalTabs = true;
    cfg.tabPosition = 'top';
  }
  Ext.ux.TabPanel.superclass.constructor.call(this, cfg);
};

Ext.extend(Ext.ux.TabPanel, Ext.TabPanel, {
  tabWidth : 150,

  afterRender : function() {
    Ext.ux.TabPanel.superclass.afterRender.call(this);
    if (this.verticalTabs) {
      this.header.setWidth(this.tabWidth);
      this.header.setHeight(this.height || this.container.getHeight());
    }
  },

/**
 * Adjust header and footer size.
 * @param {Number} w width of the container
 * @return {Number} the body will be resized to this width
 */
  adjustBodyWidth : function(w) {
    if (this.verticalTabs) {
      if (Ext.isIE6) {
        //I got the value "3" through trial and error; it seems to be related with the x-panel-header border; if the border
        //is set to "none", then this substraction is not necessary - but it does not seem related to the border width, margin or padding of any
        //of the panels so I dont know how to calculate it; please let me know if you have any idea what's going on here
        this.bwrap.setWidth(w - 3);
      }
      return w;
    }
    else {
      return Ext.ux.TabPanel.superclass.adjustBodyWidth.call(this, w);
    }
  },

/**
 * Get the new body height and adjust the height of the tab strip if it is vertical.
 * @param h {Number}
 */
  adjustBodyHeight : function(h) {
    if (this.verticalTabs) {
      this.header.setHeight(h + (this.tbar ? this.tbar.getHeight() : 0));
    }
    return Ext.ux.TabPanel.superclass.adjustBodyHeight.call(this, h);
  },

/**
 * If the tab strip is vertical, we need to substract the "header" width.
 * @return {Number} The frame width
 */
  getFrameWidth : function() {
    return Ext.ux.TabPanel.superclass.getFrameWidth.call(this) + this.verticalTabs ? this.tabWidth : 0;
  },

/**
 * If the tab strip is vertical, we don't need to substract it's height
 * @return {Number} The frame height
 */
  getFrameHeight : function() {
    return Ext.ux.TabPanel.superclass.getFrameHeight.call(this) - (this.verticalTabs ? this.header.getHeight() : 0);
  }
});