iReport.views.SummaryPanel = Ext.extend(Ext.Panel, {

  initComponent: function(){
    //this.styleHtmlContent = fa
    this.cls = "summary"
    
    this.sum = new Ext.Panel({
      layout:"fit",
      styleHtmlContent: true,
      html: '<div class="bar"><h2 id="expTitle"></h2></div><h4>Hypothesis/Expectations:</h4><p id="expSummary"></p><h4>Analysis Details:</h4><p id="expDesign"></p><div id="chart" style="float:left;margin-right:50px"></div><div style="float:left"><h4>Top Results based on Experiment Keywords</h4><ul id="top-results"></ul></div>'
    })
    
    this.sum.on('afterrender', this.loadData, this);
    
    this.items = this.sum
    
    iReport.views.SummaryPanel.superclass.initComponent.call(this);
  },
  
  loadData: function(){
    var that = this
    
    that.sum.el.mask('Loading...', 'x-spinner', false);
    
    // Loads the Summary Data.
    getSummaryData(summary);
    
    x$("#expTitle").inner(summary.experimentTitle.toTitleCase() );
    x$("#expSummary").inner(summary.experimentSummary);
    x$("#expDesign").inner(summary.experimentDesign);
    
    //summary.resultList.metaDataTerm
    summary.resultList[0].results.forEach(function(result){
      x$("#top-results").bottom('<li>'+ result.name +'</li>')
    })
    
    //x$("#chart").inner('<img src="/mocks/sum-chart-'+ that.reportId +'.gif"></img>')
    x$("#chart").inner('<img src="/mocks/sum-chart-2501.gif"></img>')
        
    setTimeout(function(){

      that.sum.el.unmask()      
    }, 200)

  }

})

Ext.reg('summarypanel', iReport.views.SummaryPanel);