anchor.diff:    ~ http://gxa.github.com/gxa
     --%>
   
  -<c:set var="timeStart" value="${u:currentTime()}" />
  -
  -<u:htmlTemplate file="look/genePage.head.html" />
  +<c:set var="timeStart" value="${u:currentTime()}"/>
  +
  +<u:htmlTemplate file="look/genePage.head.html"/>
   
   <meta name="Description" content="${atlasGene.geneName} (${atlasGene.geneSpecies}) - Gene Expression Atlas Summary"/>
  -<meta name="Keywords" content="ArrayExpress, Atlas, Microarray, Condition, Tissue Specific, Expression, Transcriptomics, Genomics, cDNA Arrays" />
  +<meta name="Keywords"
  +      content="ArrayExpress, Atlas, Microarray, Condition, Tissue Specific, Expression, Transcriptomics, Genomics, cDNA Arrays"/>
   
   <jsp:include page="../includes/query-includes.jsp"/>
   <!--[if IE]><script language="javascript" type="text/javascript" src="${pageContext.request.contextPath}/scripts/excanvas.min.js"></script><![endif]-->
  
positive.code: <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/feedback.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.tablesorter.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/common-query.js"></script>
  <script language="javascript" type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.flot.atlas.js"></script>
  
  <link rel="stylesheet" href="${pageContext.request.contextPath}/atlas.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/geneView.css" type="text/css" />
  
  
  <script type="text/javascript">
  
      function showThumbTooltip(x, y, contents) {
          if(contents != 'Mean'){
              $('<div id="tooltip" />').text(contents).css( {
                  position: 'absolute',
                  display: 'none',
                  top: (y+5)+'px',
                  left: (x+5)+'px',
                  border: '1px solid #005555',
                  margin: '0px',
                  backgroundColor: '#EEF5F5'
              }).appendTo("body").fadeIn('fast');
          }
      }
  
      function drawPlot(jsonObj, plot_id){
          if(jsonObj.series){
              var legend_id = plot_id.replace("_plot", "_legend");
              jsonObj.options.legend.container = '#' + legend_id;
              var plot = $.plot($('#'+plot_id), jsonObj.series, jsonObj.options);
  
              var previousPoint = null;
              $('#'+plot_id).bind("plothover", function (event, pos, item) {
                  if (item) {
                      if (previousPoint != item.datapoint) {
                          previousPoint = item.datapoint;
                          $("#tooltip").remove();
                          showThumbTooltip(item.pageX, item.pageY, item.series.label);
                      }
                  }else {
                      $("#tooltip").remove();
                      previousPoint = null;
                  }
              });
              return plot;
          }
          return null;
      }
  
      function drawPlots(){
          $(".plot").each(function(){
              var plot_id = this.id;
              var tokens = plot_id.split('_');
              var eid = tokens[0];
              var gid = tokens[1];
              atlas.ajaxCall("plot", { gid: gid, eid: eid, plot: 'bar' }, function(o){
                  drawPlot(o,plot_id);
              });
          });
      }
  
      function redrawPlotForFactor(eid,gid,ef,mark,efv){
          var plot_id = eid+"_"+gid+"_plot";
          atlas.ajaxCall("plot", { gid: gid, eid: eid, ef: ef, plot: 'bar' }, function(o){
                  var plot = drawPlot(o,plot_id);
                  if(mark){
                      markClicked(eid, gid, ef, efv, plot, o);
                  }
          });
          drawEFpagination(eid,gid,ef);
      }
  
      function drawEFpagination(eid,gid,currentEF,plotType) {
          var panelContent = [];
  
          $("#"+eid+"_EFpagination *").each(function(){
              var ef = $(this).attr("id");
              var ef_txt = $(this).html();
              if(ef == currentEF){
                  panelContent.push("<span id='"+ef+"' class='current'>"+ef_txt+"</span>")
              }
              else{
                  panelContent.push('<a id="'+ef+'" onclick="redrawPlotForFactor( \''+eid+'\',\''+gid+'\',\''+ef+'\',\''+plotType+'\',false)">'+ef_txt+'</a>');
              }
          });
  
          $("#"+eid+"_EFpagination").empty();
          $("#"+eid+"_EFpagination").html(panelContent.join(""));
      }
  
  
      function markClicked(eid,gid,ef,efv,plot,jsonObj) {
  
          var plot_id = eid+'_'+gid+'_plot';
          var allSeries = plot.getData();
          var series;
          var markColor;
  
          for (var i = 0; i < allSeries.length; ++i){
              if(allSeries[i].label){
                  if(allSeries[i].label.toLowerCase()==efv.toLowerCase()){
                      series = allSeries[i];
                      markColor = series.color;
                      break;
                  }
              }
          }
  
          if(series==null){
              return ;
          }
  
          var data = series.data;
          var xMin= data[0][0]
          var xMax= data[data.length-1][0]
  
          var overviewDiv = $('#'+plot_id+'_thm');
          if(allSeries.length>10 && data.length<5){
              if(overviewDiv.height()!=0){
                  var overview = $.plot($('#'+plot_id+'_thm'), jsonObj.series, jsonObj.options);
  
                  overview.setSelection({ xaxis: { from: xMin-10, to: xMax+10 }});
              }
              plot = $.plot($('#'+plot_id), jsonObj.series,$.extend(true, {}, jsonObj.options, {
                  grid:{ backgroundColor: '#fafafa',	autoHighlight: true, hoverable: true, borderWidth: 1, markings: [{ xaxis: { from: xMin-1, to: xMax+1 }, color: '#FFFFCC' }]},
                  xaxis: { min: xMin-10, max: xMax+10  }, yaxis: {labelWidth:40}
              }));
          }
          else{
  
              plot = $.plot($('#'+plot_id), jsonObj.series, $.extend(true, {}, jsonObj.options, {
                  grid:{ backgroundColor: '#fafafa',	autoHighlight: true, hoverable: true, borderWidth: 1, markings: [{ xaxis: { from: xMin-1, to: xMax+1 }, color: '#FFFFCC' }]},
                  yaxis: {labelWidth:40}
              }));
              if(overviewDiv.height() != 0) {
                  var overview = $.plot($('#'+plot_id+'_thm'), jsonObj.series,$.extend(true,{},jsonObj.options,{color:['#999999','#D3D3D3']}));
  
                  overview.setSelection({ xaxis: { from: xMin-10, to: xMax+10 }});
              }
          }
      }
  
  
      function reloadExps(){
  
          $('#ExperimentResult').load("${pageContext.request.contextPath}/geneExpList",{gid:${atlasGene.geneId},from:"1", to:"5"},drawPlots);
          $('#pagingSummary').empty();
          $(".heatmap_over").removeClass("heatmap_over");
          paginateExperiments();
          countExperiments();
  	}
  
      function countExperiments(){
         $("#pagingSummary").text("${noAtlasExps} experiment${noAtlasExps>1?'s':''} showing differential expression");  
      }
  
      function paginateExperiments(){
           // Create pagination element
           <c:if test="${noAtlasExps > 5}">
          	$("#Pagination").pagination(${noAtlasExps}, {
  				num_edge_entries: 2,
  				num_display_entries: 5,
  				items_per_page:5,
                  callback: pageselectCallback
           	});
           </c:if>
      }
  
  	function pageselectCallback(page_id){
  		var fromPage = (page_id*5) +1;
  		var toPage = (page_id*5) + 5;
  		$('#ExperimentResult').load("${pageContext.request.contextPath}/geneExpList",{gid:${atlasGene.geneId},from:fromPage, to: toPage},drawPlots);
  	}
  
  
  	function FilterExps(el,fv,ef){
  
          $('#ExperimentResult').empty();                            
  
  		$('#ExperimentResult').load("${pageContext.request.contextPath}/geneExpList",{gid:${atlasGene.geneId}, efv: fv, factor:ef},
  							function(){
  								for (var i = 0; i < exps.length; ++i){
  									var eid = jQuery.trim(exps[i].id);
  									redrawPlotForFactor(eid,'${atlasGene.geneId}',ef,true,fv);
  								}
  								$('#pagingSummary').text(exps.length+" experiment"+(exps.length>1?"s":'')+" showing differential expression in \""+ fv + "\"");
  								var lnk = $("<a>Show all studies</a>").bind("click", reloadExps);
  								$("#Pagination").empty().append(lnk);
  							});
  
  
          old = $(".heatmap_over");
  		old.removeClass("heatmap_over");
          old.addClass ("heatmap_row");
  		el.className = "heatmap_over";
  		//window.scrollTo(0,0);
  	}
  
  
      function FilterExpsEfo(el,efo){
          $('#ExperimentResult').empty();
          $('#ExperimentResult').load("${pageContext.request.contextPath}/geneExpList",{gid:${atlasGene.geneId}, efo: efo},
                              function(){
                                  for (var i = 0; i < exps.length; ++i){
                                      var eid = jQuery.trim(exps[i].id);
                                      redrawPlotForFactor(eid,'${atlasGene.geneId}','organismpart',true,'');
                                  }
                                  $('#pagingSummary').text(exps.length+" experiment"+(exps.length>1?"s":'')+" showing differential expression in \""+ efo + "\"");
                                  var lnk = $("<a>Show all studies</a>").bind("click", reloadExps);
                                  $("#Pagination").empty().append(lnk);
                              });
          old = $(".heatmap_over");
          old.removeClass("heatmap_over");
          old.addClass ("heatmap_row");
          el.className = "heatmap_over";
          //window.scrollTo(0,0);
      }
  
      jQuery(document).ready(function()
      {
          countExperiments();
          paginateExperiments();
          $("#heatmap_tbl").tablesorter({
              headers: {2: {sorter: false}}});
          drawPlots();
      });
  </script>
  
  
  <link rel="stylesheet" href="${pageContext.request.contextPath}/blue/style.css" type="text/css" media="print, projection, screen" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/structured-query.css" type="text/css" />
  ${atlasProperties.htmlBodyStart}
  
  <div class="contents" id="contents">
  
negative.code: <table style="border-bottom:1px solid #DEDEDE;margin:0 0 10px 0;width:100%;height:30px;">
      <tr>
          <td align="left" valign="bottom" width="55" style="padding-right:10px;">
              <a href="${pageContext.request.contextPath}/" title="Gene Expression Atlas Homepage"><img border="0"
                                                                                                        width="55"
                                                                                                        src="${pageContext.request.contextPath}/images/atlas-logo.png"
                                                                                                        alt="Gene Expression Atlas"/></a>
          </td>
          <td align="right" valign="bottom">
              <a href="${pageContext.request.contextPath}/">home</a> |
              <a href="${pageContext.request.contextPath}/help/AboutAtlas">about the project</a> |
              <a href="${pageContext.request.contextPath}/help/AtlasFaq">faq</a> |
              <a id="feedback_href" href="javascript:showFeedbackForm()">feedback</a> <span id="feedback_thanks"
                                                                                            style="font-weight:bold;display:none">thanks!</span>
              |
              <a target="_blank" href="http://arrayexpress-atlas.blogspot.com">blog</a> |
              <a href="${pageContext.request.contextPath}/help/AtlasDasSource">das</a> |
              <a href="${pageContext.request.contextPath}/help/AtlasApis">api</a> <b>new</b> |
              <a href="${pageContext.request.contextPath}/help">help</a>
          </td>
  