anchor.diff:  </style>
   
   <script>
  -    var data_type_copy_no;
  -    var data_type_mrna;
       var gene;
       var case_set = [];
       var mutations = [];
  
positive.code: 
  <script>
  
      function fetchData() {
          gene = document.getElementById("genes").value;
          data_type_copy_no = document.getElementById("data_type_copy_no").value;
          data_type_mrna = document.getElementById("data_type_mrna").value;
  
          var url_base = "webservice.do?cmd=getProfileData&case_set_id=<% out.print(case_set_id); %>&gene_list=" + gene + "&genetic_profile_id=";
          var urls = [
              url_base + "<% out.print(cancer_study_id); %>_" + genetic_profile_mutations[0], //mutations
              url_base + "<% out.print(cancer_study_id); %>_" + data_type_copy_no, //copy no
              url_base + "<% out.print(cancer_study_id); %>_" + data_type_mrna, //mrna
              url_base + "<% out.print(cancer_study_id); %>_" + genetic_profile_rppa[0], //rppa
              url_base + "<% out.print(cancer_study_id); %>_" + genetic_profile_dna_methylation[0] //dna methylation
          ];
  
          for (var i = 0; i < urls.length; i++) {
              $.ajax({
                  url: urls[i],
                  type: 'get',
                  dataType: 'text',
                  async: false,
                  success: function(data) {
                      if (data != "") {
                          if ( data.indexOf("No genetic profile available") == -1) {  //Profile Exists
                              tmp_sections = data.split(/\n/);
                              //Get Case Set
                              tmp_case_set = String(tmp_sections[3]).trim().split(/\s+/);
                              for (var j = 0 ; j < tmp_case_set.length; j ++ ) {
                                  case_set[j] = tmp_case_set[j + 2];
                              }
                              //Get profile data (Filter the headers)
                              var profile_data = [];
                              var tmp_profile_data = String(tmp_sections[4]).trim().split(/\s+/);
                              for (var profileDataIndex = 0 ; profileDataIndex < tmp_profile_data.length; profileDataIndex ++ ) {
                                  profile_data[profileDataIndex] = tmp_profile_data[profileDataIndex + 2];
                              }
                              //Fill in Result Data Set
                              copyData(result_set[i], profile_data);
                          }
                      } else {
                          alert("ERROR Fetching Data.");
                      }
                  }
              });
          }
          //Distribute Data
          copyData(mutations, result_set[0]);
          copyData(copy_no, result_set[1]);
          copyData(mrna, result_set[2]);
          copyData(rppa, result_set[3]);
          copyData(dna_methylation, result_set[4]);
      }
  
  
      function drawSideBar() {
          //Plot Type
          for ( var m = 0; m < plot_type_list.length; m++) {
              $('#plot_type').append("<option value='" + plot_type_list[m][0] + "'>" + plot_type_list[m][1] + "</option>");
          }
          //Copy Number Type
          for ( var j = 0; j < genetic_profile_copy_no.length; j++ ) {
              $('#data_type_copy_no').append("<option value='" + genetic_profile_copy_no[j][0] + "'>" + genetic_profile_copy_no[j][1] + "</option>");
          }
          //mRNA Type
          for ( var k = 0; k < genetic_profile_mrna.length; k++ ) {
              $('#data_type_mrna').append("<option value='" + genetic_profile_mrna[k][0] + "'>" + genetic_profile_mrna[k][1] + "</option>");
          }
          fetchData();
          drawScatterPlots(copy_no, mrna, mutations, 1);
      }
  
  
      function generateScatterPlots() {
          fetchData();
          var tmp_plot_type = document.getElementById("plot_type").value;
          if (tmp_plot_type == plot_type_list[0][0]) {    //"mrna_vs_copy_no"
              drawScatterPlots(copy_no, mrna, mutations, 1);
          } else if (tmp_plot_type == plot_type_list[1][0]) {  //"mrna_vs_dna_mythelation"
              drawScatterPlots(dna_methylation, mrna, copy_no, 2);
          } else if (tmp_plot_type == plot_type_list[2][0]) {  //"rppa_protein_level_vs_mrna"
              drawScatterPlots(mrna, rppa, copy_no, 3);
          }
      }
  
      function drawScatterPlots(xData, yData, zData, type) {
          //Create Canvas
          $('#plots_tab').empty();
          var w = 700;
          var h = 600;
          var svg = d3.select("#plots_tab")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
          //Prepare DataSet
          var xLegend;
          var yLegend;
          var dataset = [];
  
          if (type == 1) {    //mrna_vs_copy_no
              var index = 0;
              for( var i = 0; i<xData.length; i++) {
                  //Skip NaN entries
                  if ((xData[i] == "NaN") || (yData[i] == "NaN")) {
                      continue;
                  }
                  //TODO: Mutations Mapping
                  if (zData[i] != "NaN") {
                      zData[i] = "type1";
                  } else {
                      zData[i] = "non";
                  }
                  dataset[index] = [xData[i], yData[i], zData[i]];
                  index += 1;
              }
          } else if (type == 2) {  // mrna_vs_dna_mythelation
              var index = 0;
              for( var i = 0; i<xData.length; i++) {
                  //Skip NaN entries
                  if ((xData[i] == "NaN") || (yData[i] == "NaN")) {
                      continue;
                  }
                  dataset[index] = [xData[i], yData[i], zData[i]];
                  index += 1;
              }
          } else if (type == 3) {  //rppa_protein_level_vs_mrna
              var index = 0;
              for( var i = 0; i<xData.length; i++) {
                  //Skip NaN entries
                  if ((xData[i] == "NaN") || (yData[i] == "NaN")) {
                      continue;
                  }
                  dataset[index] = [xData[i], yData[i], zData[i]];
                  index += 1;
              }
          }
  
          //-----------------tmp------//d3 min and max do NOT function well???
          var tmp_xData = [];
          var tmp_xIndex = 0;
          for (var j=0; j< xData.length; j++){
              if (xData[j] != "NaN") {
                  tmp_xData[tmp_xIndex] = xData[j];
                  tmp_xIndex += 1;
              }
          }
          var min_x = Math.min.apply(Math, tmp_xData);
          var max_x = Math.max.apply(Math, tmp_xData);
          var edge_x = (max_x - min_x) * 0.2;
  
          var tmp_yData = [];
          var tmp_yIndex = 0;
          for (var j=0; j< yData.length; j++){
              if (yData[j] != "NaN") {
                  tmp_yData[tmp_yIndex] = yData[j];
                  tmp_yIndex += 1;
              }
          }
          var min_y = Math.min.apply(Math, tmp_yData);
          var max_y = Math.max.apply(Math, tmp_yData);
          var edge_y = (max_y - min_y) * 0.2;
          //-------------------tmp---------------------------
  
          //Define scale functions
          var padding = 200;
          var xScale = d3.scale.linear()
                  .domain([min_x - edge_x, max_x + edge_x])
                  .range([100, 600]);
          var yScale = d3.scale.linear()
                  .domain([min_y - edge_y, max_y + edge_y])
                  .range([520, 20]);
          //Define Axis
          var xAxis = d3.svg.axis()
                  .scale(xScale)
                  .orient("bottom")
          //.ticks(5)
  
          var yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient("left");
          //.ticks(10);
          //Create SVG Axis
  
          //Axis Annotation for GISTIC
          if ( type == 1 && data_type_copy_no == "gistic") {
              var textSet = ["Homdel", "Hetloss", "Diploid", "Gain", "Amp"];
              var ticksTextSet = [];
              var tmp_ticks_text_index = 0;
              for (var i = min_x + 2; i < max_x + 3; i++) {
                  ticksTextSet[tmp_ticks_text_index] = textSet[i];
                  tmp_ticks_text_index += 1;
              }
              svg.append("g")
                      .attr("class","axis")
                      .attr("transform", "translate(0, 520)")
                      .call(xAxis.ticks(ticksTextSet.length))
                      .selectAll("text")
                      .data(ticksTextSet)
                      .style("text-anchor", "end")
                      .attr("dx", "-.8em")
                      .attr("dy", ".15em")
                      .attr("transform", function(d) {return "rotate(-65)"})
                      .text(function(d){return d})
          } else {
              svg.append("g")
                      .attr("class","axis")
                      .attr("transform", "translate(0, 520)")
                      .call(xAxis);
          }
  
          svg.append("g")
                  .attr("class","axis")
                  .attr("transform", "translate(0, 20)")
                  .call(xAxis.orient("bottom").ticks(0));
  
          svg.append("g")
                  .attr("class","axis")
                  .attr("transform", "translate(100, 0)")
                  .call(yAxis)
  
          svg.append("g")
                  .attr("class","axis")
                  .attr("transform", "translate(600, 0)")
                  .call(yAxis.orient("left").ticks(0));
  
          //Create SVG dots
          var symbol = d3.scale.ordinal().range(["circle", "triangle-up", "cross", "diamond", "square"]);
          var mutationTypes = ["non", "type1"];
          var gisticTypes = ["Homdel", "Hetloss", "Diploid", "Gain", "Amp"];
          var fillTypes = ["none", "#F78181", "#04B4AE", "#585858", "#FFBF00"];
          var strokeTypes = ["#2E9AFE", "#F78181", "#04B4AE", "#585858", "#FFBF00"];
  
          svg.selectAll("path")
                  .data(dataset)
                  .enter()
                  .append("svg:path")
                  .attr("transform", function(d) { return "translate(" + (xScale(d[0]) + (Math.random() * (20))) + ", " + yScale(d[1]) + ")";})
                  .attr("d", d3.svg.symbol()
                          .size(40)
                          .type( function (d) {
                              switch (d[2]) {
                                  case mutationTypes[0]: return symbol(0);
                                  case mutationTypes[1]: return symbol(1);
                                  default: return "circle";
                              }
                          }
                  ))
                  .attr("fill", function(d) {
                      switch (d[2]) {
                          //Mutations
                          case mutationTypes[0]: return fillTypes[0];
                          case mutationTypes[1]: return fillTypes[1];
                          default: return "none";
                      }
                  })
                  .attr("stroke", function(d) {
                      switch (d[2]) {
                          case mutationTypes[0]: return strokeTypes[0];
                          case mutationTypes[1]: return strokeTypes[1];
                          case "-2": return strokeTypes[0];
                          case "-1": return strokeTypes[1];
                          case "0": return strokeTypes[2];
                          case "1": return strokeTypes[3];
                          case "2": return strokeTypes[4];
                          default: return "black";
                      }
                  })
                  .attr("stroke-width", function(d) {
                      if (type == 1) {
                          return "1";
                      } else {
                          return "1.2";
                      }
                  });
  
          //Create the legend
          if (type == 1) {  //Legend for Mutations
              var legend = svg.selectAll(".legend")
                      .data(mutationTypes)
                      .enter().append("g")
                      .attr("class", "legend")
                      .attr("transform", function(d, i) { return "translate(110, " + (30 + i * 15) + ")"; });
              legend.append("path")
                      .attr("width", 18)
                      .attr("height", 18)
                      .attr("d", d3.svg.symbol()
                              .size(40)
                              .type(function(d, i) {
                                  switch(i) {
                                      case 0: return symbol(0);
                                      case 1: return symbol(1);
                                  };
                              })
                      )
                      .attr("fill", function (d, i) {
                          switch (i) {
                              case 0: return fillTypes[0];
                              case 1: return fillTypes[1];
                          }
                      })
                      .attr("stroke", function (d, i) {
                          switch (i) {
                              case 0: return strokeTypes[0];
                              case 1: return strokeTypes[1];
                          }
                      })
              legend.append("text")
                      .attr("dx", ".75em")
                      .attr("dy", ".35em")
                      .style("text-anchor", "front")
                      .text(function(d, i) {
                          switch (i) {
                              case 0: return mutationTypes[0];
                              case 1: return mutationTypes[1];
                          }
                      });
          } else {  //Legend for Gistic Copy Number
              var legend = svg.selectAll(".legend")
                      .data(gisticTypes)
                      .enter().append("g")
                      .attr("class", "legend")
                      .attr("transform", function(d, i) { return "translate(110, " + (30 + i * 15) + ")"; });
              legend.append("path")
                      .attr("width", 18)
                      .attr("height", 18)
                      .attr("d", d3.svg.symbol()
                              .size(40)
                              .type(function(d, i) {
                                  return "circle";
                              })
                      )
                      .attr("fill", function (d, i) {
                          return "none";
                      })
                      .attr("stroke", function (d, i) {
                          switch (i) {
                              case 0: return strokeTypes[0];
                              case 1: return strokeTypes[1];
                              case 2: return strokeTypes[2];
                              case 3: return strokeTypes[3];
                              case 4: return strokeTypes[4];
                          }
                      })
                      .attr("stroke-width", function (d, i) {
                          return 1.2;
                      })
              legend.append("text")
                      .attr("dx", ".75em")
                      .attr("dy", ".35em")
                      .style("text-anchor", "front")
                      .text(function(d, i) {
                          switch (i) {
                              case 0: return gisticTypes[0];
                              case 1: return gisticTypes[1];
                              case 2: return gisticTypes[2];
                              case 3: return gisticTypes[3];
                              case 4: return gisticTypes[4];
                          }
                      });
          }
  
      }
  
      function copyData( desArray, oriArray) {
          var desArrayIndex = 0;
          for ( var tmpIndex = 0; tmpIndex < oriArray.length; tmpIndex ++ ){
              if (oriArray[tmpIndex] != "" && oriArray[tmpIndex] != null ) {
                  desArray[desArrayIndex] = oriArray[tmpIndex];
                  desArrayIndex += 1;
              }
          }
      }
      window.onload=drawSideBar();
  </script>
  
  <%!
  
negative.code:                         <br><select id='data_type_copy_no'></select>
                          <br><br><br>
                          <button onclick="generateScatterPlots()" style='width:80px;height:30px;border-radius:15px;'>
                              <font style='font-size: 14px;color:white;font-weight: 5px;'> GO >> </font>
                          </button>
                      </td>
                      <tr><td style='height:150px;'></td>
  