iReport.views.GeneMatrixPanel = Ext.extend(Ext.Panel, {
  
    initComponent: function(){

      this.cls = "genematrix " + this.matrix
      
        
      this.sidebar = new iReport.views.SidebarPanel({
        matrix: this.matrix,
        reportId: this.reportId
      })

      this.dockedItems = [this.sidebar]

      var matrix = this.matrix
      
      this.chart = new Ext.Panel({
        html: '<div id="'+ matrix +'-stage"></div>'
      })
      this.chart.on('afterrender', this.loadData, this);

      this.items = [this.chart];

      iReport.views.GeneMatrixPanel.superclass.initComponent.call(this);
    },
    
    loadData: function(){
      var that = this;
      //that.chart.el.mask('Loading...', 'x-spinner', false);
      
      // set global
      var matrix = that.matrix
      gSelType = matrix
      
      if(this.matrix == "pathways"){
        x$("#" + matrix + "-stage").inner('<img src="mocks/pathways.png" width="550"></img>')
      }else{
        if(!Charts[matrix]){
          Charts[matrix] = new GeneMatrix(matrix + "-stage")
          Charts[matrix].calcRowCols((1024 - 300),600);
          Charts[matrix].render(matrix);
        }        
      }

      //that.chart.el.unmask()
    }
});

Ext.reg('genematrixpanel', iReport.views.GeneMatrixPanel);