// create namespace for plugins
Ext.namespace('Ext.ux.plugins');
 
/**
 * Ext.ux.plugins.MultiLineHeader plugin for Ext.grid.GridView
 *
 * @author  Clayton L. Donahue
 * @date    October 7, 2008
 *
 * @class Ext.ux.plugins.MultiLineHeader
 * @extends Ext.util.Observable
 */
Ext.ux.plugins.MultiLineHeader = function(config) {
    Ext.apply(this, config);
};
 
// plugin code
Ext.extend(Ext.ux.plugins.MultiLineHeader, Ext.util.Observable, {
    
	/**
	 *	init
	 */
	init : function(grid) {
		var view = grid.getView();
		view.beforeMethod('initTemplates', this.initTemplates);
		// When the view UI is refreshed, set the header heights.
		view.on('refresh', 	this.setHeaderHeight, grid );
    },
	
	/**
	 *	initTemplates
	 * 
	 *	Sets up the GridView template for the header cell. Adds a DIV with class "ux-grid3-hd-wrap"
	 *  to handle vertically aligning the header text.
	 */
	initTemplates : function(){
		var ts = this.templates || {};
		
		if(!ts.hcell){
			ts.hcell = new Ext.Template(
					'<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id}" style="{style}"><div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}"><div class="ux-grid3-hd-wrap">', this.grid.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '',
					'{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',
					"</div></div></td>"
					);
		}
		
		this.templates = ts;
	},
	
	/**
	 *	setHeaderHeight
	 * 
	 *	Adjusts the height of the header DIV to match that of the header TD.
	 *	Also adjusts the height of the wrap DIV to that of the header DIV
	 */
	setHeaderHeight : function() {
		var columns  = this.getColumnModel().config.length;
		var height 	 = this.getView().mainHd.getComputedHeight();
		var xView 	 = this.getView()
		for(var c=0; c<columns; c++) {
			var headerCellObj = Ext.get( xView.getHeaderCell([c]).firstChild );
			var headerWrapObj = Ext.get( headerCellObj.child('.ux-grid3-hd-wrap') );
			var headerBtnObj  = Ext.get( headerWrapObj.child('.x-grid3-hd-btn') );
			
			headerCellObj.setHeight(height);
			headerWrapObj.setHeight(height - headerCellObj.getPadding('tb'));	// Account for inner padding.

			// If the height of the header is > 50, we need to replace the button image (Ext provides a 28 x 50 pixel image).
			// The image referenced by "ux-grid3-hd-btn-large" is 28 x 80 pixel image. Larger than that and you are on your own.
			if(height > 50) {
				//headerBtnObj.addClass('ux-grid3-hd-btn-large');
			} else {
				headerBtnObj.removeClass('ux-grid3-hd-btn-large');
			}			
		}
		
	}
		
	
}); // end of extend