extends ./head
block content
  div.panel.panel-default.col-lg-12.col-md-12(style="float: left; height:auto")
    div.row.panel-heading
      h4.text-center Custom detail template
    div#heatmap-table-1(style="width:800px;margin:20px auto 50px auto; height:auto")
    div.panel-body.pull-left(style="width:50%")
      p This is the classic display of a heatmap.
      :marked
        * **tableID**(_String_): The id of the HTML element

        * **options**(_Object_): The option of the heatMap table
          * **columnWidth**(_String_): Set the width of columns, "70px" by default
          * **valuesSetting**(_Array_):
            * **{value: "", color: ""}**: color is a value of css color
            * **{value: "", cssClass: ""}**: cssClass is a css class
            * **{value: "", html: ""}**: 
          * **headerTemplateID**(String): The name of handlebars template
          * **headerTemplateData**(Object): {header: ["..", ".."]}
          * **detailTemplateID**(String): The name of handlebars template

        * **Data structure**:

            ```
            [{
              "rowLabel": String,
              "values": Array,
              "linkLabel": String,
              "linkURL": String,
              "detailData": [Object],
              "children": [Object]
            }];
            ```
    div.pull-right(style="width:50%;overflow:auto;")
      div
        ul.nav.nav-tabs(role="tablist")
          li.active(role="presentation")
            a(href="#javascript", aria-controls="javascript", role="tab", data-toggle="tab") Javascript
          li(role="presentation")
            a(href="#html", aria-controls="html", role="tab", data-toggle="tab") HTML
          li(role="presentation")
            a(href="#css", aria-controls="css", role="tab", data-toggle="tab") CSS
      
      div.tab-content
        div#javascript.tab-pane.active(role="tabpanel")
          textarea#javascriptCode(name="javascriptCode",style="max-height:200px;overflow:auto;font-size:11px").
            var heatmapTableOptions = {
              valuesSetting: [
                { value: 'Positive', html: '<div>\
                  <img style="width:15px" src="./static/img/chili.gif">\
                  <img style="width:15px" src="./static/img/chili.gif">\
                  </div>'
                },
                { value: 'High', cssClass: 'red'},
                { value: 'NotDetected', color: 'lightgray'}
                ],
                columnWidth: "120px",
                headerTemplateID: "headerTemplate",
                headerTemplateData: {header:['MANotDetected',
                                    'MAPositive',
                                    'ESTPositive']},
                detailTemplateID: "detailTemplate"
            }
            var heatMapTable = new HeatMapTable({
                            tableID: "heatmap-table-1",
                            options: heatmapTableOptions
                        });
            var data = [
                {
                  "rowLabel": "Human anatomical entity",
                  "linkLabel": "[TS-2178]",
                  "linkURL": "http://www.nextprot.org/db/term/TS-2178", 
                  "values": ["NotDetected", "High", "Positive"],
                  "detailData": [
                    {
                      "dbSource": "Bgee",
                      "description": "Expression detected at 25-44 year-old adult stage",
                      "ensembl": "ENSG00000254647",
                      "ensemblLink": "http://bgee.unil.ch/bgee/bgee?page=expression\&action=data\&\stage_id=HsapDO:0000090\&organ_id=EV:0100070\&gene_id=ENSG00000254647\&stage_children=on",
                      "evidenceCodeName": "Microarray",
                      "value": "Positive"
                    }
                  ],
                  "children": [
                    {
                      "rowLabel": "Fluid and secretion",
                      "linkLabel": "[TS-2101]",
                      "linkURL": "http://www.nextprot.org/db/term/TS-2101",
                      "values": ["NotDetected", "High", "Positive"],
                      "children": [ 
                        {
                          "linkLabel": "[TS-0079]", 
                          "linkURL": "http://www.nextprot.org/db/term/TS-0079", 
                          "rowLabel": "Blood", 
                          "values": ["", "High", "Positive"],
                          "children": []
                        }
                      ]
                    }
                  ], 
                }
              ];
                    
            heatMapTable.loadJSONData(data);
            heatMapTable.show();
        div#html.tab-pane.active(role="tabpanel")
          textarea#htmlCode(name="htmlCode",style="max-height:300px;height:100%;overflow:auto;font-size:11px;").
            <div id="heatmap-table-1"></div>

            <script type="text/javascript">
              Handlebars.registerHelper('createHeader', function(columnName, block) {
                var result = {};
                result.columnWidth = "120px";
                result.columnName = columnName;
                return block.fn(result);
              });
            </script>

            <script type="text/x-handlebars-template">
              {{#each header}}
                {{#createHeader this}}
                  <div class="heatmap-column {{columnClass}}" style="width: {{columnWidth}}">
                      {{columnName}}
                  </div>
                {{/createHeader}}
              {{/each}}
            </script>

            <script id="detailTemplate" type="text/x-handlebars-template">
              <span class="detection-method">{{evidenceCodeName}}</span>
              <span class="dbSource">{{dbSource}}</span>
              <span class="ensembl-link">
                <a href="{{ensemblLink}}">{{ensembl}}</a>
              </span>
              <div>
                <span class="{{value}} glyphicon glyphicon-stop"></span>
                <span>{{description}}</span>
                {{#if qualityQualifier}}
                  <span class="silver">{{qualityQualifier}}</span>
                {{/if}}
              </div>
          </script>
        div#css.tab-pane.active(role="tabpanel")
          textarea#cssCode(name="cssCode",style="max-height:300px;height:100%;overflow:auto;font-size:11px;").
            .red {
              background-color: red;
            }
            .detection-method {
              background-color: #7cba0f;
            }
            .dbSource {
              background-color: #dedede;
              color: #999;
            }
            .Positive {
              color: #FFA10A;
            }
      //- button.btn.btn-default.center-block(style="margin-bottom:20px;",onclick='executeCode("#heatmap-table-1", simpleHeatMap)') Execute
  script.
    var simpleHeatMap;
    var executeCode = function (outputDiv, mirrorCode) {
        $(outputDiv).empty();
        var code = mirrorCode.getValue();
        eval(code);
        $(outputDiv).animate({opacity: "100"}, 2000);
    };

    window.onload = function () {
        javascriptCode = CodeMirror.fromTextArea($("#javascriptCode")[0], {
            mode: "javascript",
            lineNumbers: true,
            lineWrapping: true,
            styleActiveLine: true,
            matchBrackets: true,
            readOnly: true
        });
        htmlCode = CodeMirror.fromTextArea($("#htmlCode")[0], {
            mode: "xml",
            htmlMode: true,
            lineNumbers: true,
            lineWrapping: true,
            readOnly: true
        });
        cssCode = CodeMirror.fromTextArea($("#cssCode")[0], {
            mode: "css",
            lineNumbers: true,
            lineWrapping: true,
            readOnly: true
        });
        $(function () {
          executeCode("#heatmap-table-1", javascriptCode);

          //can't remove this code, because codeMirror can't render a element which is invisiable
          $('#html').each( function () {
            $(this).removeClass('active')
          });
          $('#css').each( function () {
            $(this).removeClass('active')
          });

        });
    };
  script.
    Handlebars.registerHelper('createHeader', function(columnName, block) {
          var result = {};
          result.columnWidth = "120px";
          result.columnName = columnName;
          return block.fn(result);
      });
  script#headerTemplate(type="text/x-handlebars-template").
    <div style="overflow:hidden"> 
      <div class="pull-right">
        {{#each header}}
          {{#createHeader this}}
                <div class="heatmap-column {{columnClass}}" style="width: {{columnWidth}}">
                    {{columnName}}
                </div>
          {{/createHeader}}
        {{/each}}
      </div>
    </div>
  script#detailTemplate(type="text/x-handlebars-template").
    <span class="detection-method">{{evidenceCodeName}}</span>
    <span class="dbSource">{{dbSource}}</span>
    <span class="ensembl-link">
      <a href="{{ensemblLink}}">{{ensembl}}</a>
    </span>
    <div>
      <span class="{{value}} glyphicon glyphicon-stop"></span>
      <span>{{description}}</span>
      {{#if qualityQualifier}}
      <span class="silver">{{qualityQualifier}}</span>
      {{/if}}
    </div>
  style.
    .red {
      background-color: red;
    }
    .detection-method {
      background-color: #7cba0f;
      color: white;
    }
    .dbSource {
      background-color: #dedede;
      color: #999;
    }
    .Positive {
      color: #FFA10A;
    }