Entegris.ProductCatalog.ProductGroupInfoPanel = function(el, config, accordion){
	Entegris.ProductCatalog.ProductGroupInfoPanel.superclass.constructor.call(this, el, config);
	this.Accordion = accordion;
	this.contentBuilt = false;
	this.tabPanel;
	
	var table = this.titleEl.select('table').elements[0];
	var tableTR = this.titleEl.select('table tr').elements[0];
	var titleTD = this.titleEl.select('table tr td').elements[0];
	var toolsTD = this.titleEl.select('table tr td').elements[1];
    tableTR.insertBefore(toolsTD, titleTD);
	var documentHolder = Ext.get(titleTD).select('.DocumentHolder').elements[0];
	var docTD = Ext.DomHelper.append(tableTR, {tag: 'td'});
	docTD.appendChild(documentHolder);
	
	Ext.get(table).setWidth(678);
	Ext.get(toolsTD).setWidth(20);
	Ext.get(titleTD).setWidth(520);
	Ext.get(docTD).setStyle('text-align', 'right');
	
	
    
    this.HowToReadPartNumberCopy = this.el.dom.attributes.HowToReadPartNumberCopy.value;
    this.HowToReadPartNumberImage = this.el.dom.attributes.HowToReadPartNumberImage.value;
    
    try {
        if (this.HowToReadPartNumberCopy != '' || this.HowToReadPartNumberImage != '') {
            this.HowToReadLink = Ext.get(this.el.select('.HowToRead .Text').elements[0]);
            this.HowToReadLink.on('click', this.ShowHowToReadDialog, this);
        } else {
            Ext.get(this.el.select('.HowToRead').elements[0]).setVisibilityMode(Ext.Element.DISPLAY);
            Ext.get(this.el.select('.HowToRead').elements[0]).setVisible(false);
        }
    } catch(e) {}
    
            
    this.on('beforeexpand', this.updateVisualsBeforeAnimation, this);
    this.on('beforecollapse', this.updateVisualsBeforeAnimation, this);
    
    
    
    this.on('beforeexpand', this.onBeforeExpand, this);
    this.on('beforecollapse', this.onBeforeCollapse, this);
    this.on('animationcompleted', this.onAnimationCompleted, this);
    this.on('expand', this.onExpand, this);
};



Ext.extend(Entegris.ProductCatalog.ProductGroupInfoPanel, Ext.ux.InfoPanel, {
    onExpand: function() {
        if (this.tabPanel) {
	        //hack for IE6 and 7 to render tab widths correctly after a delay
	        (new Ext.util.DelayedTask()).delay(1000, this.tabPanel.autoSizeTabs, this.tabPanel);
	        (new Ext.util.DelayedTask()).delay(5000, this.tabPanel.autoSizeTabs, this.tabPanel);
            this.tabPanel.autoSizeTabs();
        }
    },
    
    
    onBeforeExpand: function () {
        if (!this.contentBuilt && this.el.select('.PanelTabs').elements.length > 0) {
            this.tabPanel = new Ext.TabPanel(this.el.select('.PanelTabs').elements[0], {resizeTabs: true, preferredTabWidth: 100});
            var tabs = this.el.select('.PanelTabs > .PanelTab').elements;
            for (var j = 0, t; t = Ext.get(tabs[j]); j++) {
                var t = this.tabPanel.addTab(t.id, t.dom.attributes.Name.value);
                //t.textEl.setVisibilityMode(Ext.Element.DISPLAY);
                //t.textEl.setVisible(true);
            }
            if (tabs.length > 0) {
                this.tabPanel.activate(0);
            }
            
	        this.contentBuilt = true;
	    }
	    this.body.addClass('x-dock-panel-body-animating');
	    
    },
    
    
    onAnimationCompleted: function () {
        this.body.removeClass('x-dock-panel-body-animating');
    },
    
    
    onBeforeCollapse: function () {
        this.body.addClass('x-dock-panel-body-animating');
    },
    
			
    updateVisualsBeforeAnimation: function() {
		if(this.collapsed) {
			this.body.replaceClass('x-dock-panel-body-collapsed', 'x-dock-panel-body-expanded');
			this.titleEl.replaceClass('x-dock-panel-title-collapsed', 'x-dock-panel-title-expanded');
		}
		else {
			this.body.replaceClass('x-dock-panel-body-expanded', 'x-dock-panel-body-collapsed');
			this.titleEl.replaceClass('x-dock-panel-title-expanded', 'x-dock-panel-title-collapsed');
		}
    },
    
    ShowHowToReadDialog: function() {
        this.Accordion.ShowHowToReadPartNumber(this.HowToReadPartNumberCopy, this.HowToReadPartNumberImage, this.HowToReadLink);
    }
 
});