iReport.views.SidebarSecondPanel = Ext.extend(Ext.Panel, {
  scroll: 'vertical',
  cls: "slideout-gene",
  initComponent: function(){
    this.scroll = false;
    this.dockedItems = [{
      xtype: 'toolbar',
      title: "genes",
      items: [{
        ui: 'back',
        text: 'Back',
        scope: this,
        handler: function(){

          if (this.matrix != "pathways") {
            Charts[this.matrix].dehiliteList();
            contextMgr.restore(0);            
          }
          
          this.ownerCt.setActiveItem(this.prevCard, {
            type: 'slide',
            reverse: true,
            scope: this,
            after: function(){
              this.destroy();
            }
          });
        }
      }]
    }];

    // processes
    var contextualGenes = this.record.data.genes.map(function(i){
      return genes.byIndex(i)
    })
		
    var store = new Ext.data.Store({
      fields: ['symbol', 'location', 'proFamily', 'index', {
        name: "color",
        convert: function(v, r){
          return r.data.getExpColor()
        }
      }],
      data: contextualGenes
    })
    
    this.list = new Ext.List({
      itemTpl: '<div class="chip" style="background-color:{color}"></div><span class="symbol">{symbol}</span>',
      store: store,
      scroll: "verticle"
    });
    
    this.list.on('selectionchange', this.onSelect, this)
    
    //this.items = this.listpanel
    
    if(this.matrix == "pathways"){
      this.items = [this.list]
    }else{
      var filterBtn = new Ext.Button({
        ui  : 'confirm',
        text: 'Filter',
        margin: 5,
        handler : function() {
          
    			var selObj, selTopic;
    			var curSelection = selectionMgr.get();
    			if(curSelection.obj) {
    				selObj = curSelection.obj;
    				selTopic = selObj.getTopic();
    			  contextMgr.changeContext("focusOn", selTopic, selObj, selObj.getGeneList());    				
    			}           
        }
      })
      this.items = [filterBtn, this.list]
    }
    
    iReport.views.SidebarSecondPanel.superclass.initComponent.call(this);
  },
  
  onSelect: function(selectionmodel, records){
    if (records[0] !== undefined) {
      
      var detailCard = new iReport.views.SidebarDetailPanel({
        prevCard: this,
        matrix: this.matrix,
        record: records[0]
      });
      
      detailCard.on("afterrender", function(){
        selectionMgr.set(genes.list[records[0].data.index]);
      })
      
      this.ownerCt.setActiveItem(detailCard, 'slide');      
    }
  }
  
})