source: extensions/net.sf.basedb.reggie/branches/ticket-422/resources/libprep/select_rna.jsp @ 1742

<%@ page
  pageEncoding="UTF-8"
  session="false"
  import="net.sf.basedb.core.Application"
  import="net.sf.basedb.core.User"
  import="net.sf.basedb.core.DbControl"
  import="net.sf.basedb.core.SessionControl"
  import="net.sf.basedb.clients.web.Base"
  import="net.sf.basedb.clients.web.util.HTML"
  import="net.sf.basedb.clients.web.extensions.ExtensionsControl"
  import="net.sf.basedb.util.Values"
  import="net.sf.basedb.util.formatter.WellCoordinateFormatter"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%@ taglib prefix="p" uri="/WEB-INF/path.tld" %>
<%@ taglib prefix="tbl" uri="/WEB-INF/table.tld" %>
<%
final SessionControl sc = Base.getExistingSessionControl(request, true);
final String ID = sc.getId();
final float scale = Base.getScale(sc);
final String home = ExtensionsControl.getHomeUrl("net.sf.basedb.reggie");
DbControl dc = null;
try
{
  dc = sc.newDbControl();
  final User user = User.getById(dc, sc.getLoggedInUserId());
%>
<base:page type="default" >
<base:head scripts="ajax.js,js-draw.js" styles="path.css,toolbar.css">
  <link rel="stylesheet" type="text/css" href="../css/reggie.css">
  <link rel="stylesheet" type="text/css" href="../css/plate.css">
  <script language="JavaScript" src="../reggie.js" type="text/javascript" charset="UTF-8"></script>

<script language="JavaScript">
var debug = 1;

var QUANTITY_REGULAR = 1.1;
var QUANTITY_QC = 1.22;

var Plate = function()
{
  var plate = {};
  plate.rows = 8;
  plate.columns = 12;
  plate.wells = [];
  
  plate.init = function()
  {
    for (var c = 0; c < plate.columns; c++)
    {
      for (var r = 0; r < plate.rows; r++)
      {
        plate.wells[plate.wells.length] = new Well(r, c);
      }
    }
  }
  
  /**
    Get all wells on the plate.
  */
  plate.getWells = function()
  {
    return plate.wells;
  }
  
  /**
    Get all wells in the given row. First row is 0.
  */
  plate.getRow = function(row)
  {
    var result = [];
    for (var i = row; result.length < plate.columns; i += plate.rows)
    {
      result[result.length] = plate.wells[i];
    }
    return result;
  }
  
  /**
    Get all wells in the given column. First column is 0.
  */
  plate.getColumn = function(column)
  {
    var result = [];
    for (var i = column*plate.rows; result.length < plate.rows; i++)
    {
      result[result.length] = plate.wells[i];
    }
    return result;
  }

  /**
    Get all wells in the given pool number. First pool is 0.
  */
  plate.getPool = function(pool)
  {
    var result = [];
    for (var i = pool*2*plate.rows; result.length < plate.rows*2; i++)
    {
      result[result.length] = plate.wells[i];
    }
    return result;
  }

  /**
    Get the well at the given coordinate.
  */
  plate.getWell = function(row, column)
  {
    return plate.wells[row + column * plate.rows];
  }
  
  /**
    Get all wells that contains RNA with a given name.
  */
  plate.getWellsByName = function(name)
  {
    var result = [];
    for (var i = 0; i < plate.wells.length; i++)
    {
      var well = plate.wells[i];
      if (well.rna && well.rna.name == name)
      {
        result[result.length] = plate.wells[i];
      }
    }
    return result;
  }
  
  /**
    Get all wells that are selected.
  */
  plate.getSelected = function()
  {
    var selected = [];
    for (var i = 0; i < plate.wells.length; i++)
    {
      var well = plate.wells[i];
      if (well.selected)
      {
        selected[selected.length] = well;
      }
    }
    return selected;
  }

  /**
    Set the selected status for all wells in the array.
    The wells are automatically repainted.
  */
  plate.setSelected = function(wells, select)
  {
    for (var i = 0; i < wells.length; i++)
    {
      var well = wells[i];
      well.selected = select;
      well.paint();
    }
  }
  
  /**
    Toggle the selected status for all wells in the array.
    The next status is determined by the current status of 
    the first well in the array.
  */
  plate.toggleSelected = function(wells)
  {
    if (wells.length == 0) return;
    plate.setSelected(wells, !wells[0].selected);
  }
  
  /**
    Enable or disable highlight of the given wells.
  */
  plate.setHighlight = function(wells, highlightClass, on)
  {
    var tmpClass = on ? highlightClass : null;
    for (var i = 0; i < wells.length; i++)
    {
      var well = wells[i];
      well.highlightClass = tmpClass;
      Main.addOrRemoveClass(well.tag, highlightClass, on);
    }
  }
  
  /**
    Paint the given wells.
  */
  plate.paint = function(wells)
  {
    for (var i = 0; i < wells.length; i++)
    {
      wells[i].paint();
    }
  }
  
  /**
    Check if the plate have any replicated RNA. Eg. RNA that is found
    in more than one well. If a name is given, only RNA for that name
    is checked, otherwise the complete plate is checked.
  */
  plate.checkReplicates = function(name, noRepaint)
  {
    if (name)
    {
      // If a name has been given, it is relatively easy
      var wells = plate.getWellsByName(name);
      var isReplicate = wells.length > 1;
      for (var i = 0; i < wells.length; i++)
      {
        var well = wells[i];
        if (well.rna.replicate != isReplicate)
        {
          well.rna.replicate = isReplicate;
          if (!noRepaint) well.paint();
        }
      }
    }
    else
    {
      // No name, we begin by counting the number of times we find any given name
      var nameCount = [];
      for (var i = 0; i < plate.wells.length; i++)
      {
        var well = plate.wells[i];
        // Ignore empty wells and wells with 'Stratagene'
        if (well.rna && !well.rna.stratagene)
        {
          nameCount[well.rna.name] = 1 + (nameCount[well.rna.name] || 0);
        }
      }
      // Then, we update the status for all wells 
      for (var i = 0; i < plate.wells.length; i++)
      {
        var well = plate.wells[i];
        if (well.rna)
        {
          var isReplicate = nameCount[well.rna.name] > 1;
          if (well.rna.replicate != isReplicate)
          {
            well.rna.replicate = isReplicate;
            if (!noRepaint) well.paint();
          }
        }
      }
    }
  }
  
  plate.findNextMRnaPlateName = function()
  {
    var request = Ajax.getXmlHttpRequest();
    var url = '../MRna.servlet?ID=<%=ID%>&cmd=GetNextAutoGeneratedPlateName&bioPlateType=MRNA'; 
    if (debug) Main.debug(url);
    request.open("GET", url, false);  
    request.send(null);

    if (debug) Main.debug(request.responseText);
    var response = JSON.parse(request.responseText);  
    if (response.status != 'ok')
    {
      setFatalError(response.message);
      return false;
    }
    plate.name = response.name;
    return plate.name;
  }
  
  return plate;
}();


var Rna = function()
{
  var rna = {};
  var info = [];
  
  /**
    Create a new RNA object by name. More information
    about the RNA is automatically loaded from the database.
  */
  rna.createByName = function(name)
  {
    var tmp = {};
    tmp.name = name;
    tmp.stratagene = name == 'Stratagene';
    tmp.replicate = false;
    tmp.info = rna.infoByName(name);
    tmp.id = tmp.info.id;
    return tmp;
  }
  
  /**
    Create a new RNA object by info object.
  */
  rna.createByInfo = function(info)
  {
    var tmp = {};
    tmp.name = info.name;
    tmp.stratagene = tmp.name == 'Stratagene';
    tmp.replicate = false;
    tmp.id = info.id;
    tmp.info = info;
    return tmp;
  }
  
  /**
    Get information about a RNA item with a given name.
  */
  rna.infoByName = function(name)
  {
    var key = 'N'+name;
    if (!info[key])
    {
      rna.loadInfoByNames([name]);
      if (!info[key]) info[key] = {};
    }
    return info[key];
  }

  /**
    Load and cache RNA information for all RNA items with a name in the
    given list.
  */
  rna.loadInfoByNames = function(names)
  {
    var submitInfo = {};
    submitInfo.names = names;
    if (debug) Main.debug(JSON.stringify(submitInfo));

    var request = Ajax.getXmlHttpRequest();
    var url = '../MRna.servlet?ID=<%=ID%>&cmd=GetRnaInfoFromNames'; 
    request.open("POST", url, false);
    request.setRequestHeader("Content-Type", "application/json");
    request.send(JSON.stringify(submitInfo));

    if (debug) Main.debug(request.responseText);
    var response = JSON.parse(request.responseText);  
    if (response.status != 'ok')
    {
      setFatalError(response.message);
      return false;
    }
    
    for (var i = 0; i < response.rna.length; i++)
    {
      var rna = response.rna[i];
      info['N'+rna.name] = rna;
      info['I'+rna.id] = rna;
    }
  }

  return rna;
}();

// Represents a well on the plate
// Each well is created when the page is loaded
function Well(row, column)
{
  this.row = row;
  this.column = column;
  this.selected = false;
  this.highlighClass = null;
  this.rna = null;
  this.duplicates = null;
  this.tag = document.getElementById('well.'+row+'.'+column);
}

/**
  Set the RNA item that is put into this well. Use
  'null' to clear the well.
*/
Well.prototype.setRna = function(rna)
{
  this.rna = rna;
  this.duplicates = null;
  if (rna && this.clipboard) this.doneWithCopy();
}

/**
  Set a duplicate RNA item in this well. This can
  happen when using a file import if the same location
  is specified twice and is an error condition which
  must be resolved.
*/
Well.prototype.addDuplicate = function(rna)
{
  if (!this.duplicates)
  {
    this.duplicates = [];
    this.duplicates[0] = this.rna.name;
  }
  this.duplicates[this.duplicates.length] = rna.name;
}

Well.prototype.makeCopy = function()
{
  var cp = {};
  cp.well = this;
  cp.name = this.rna ? this.rna.name : null;
  this.clipboard = true;
  this.copyText = cp.name;
  return cp;
}

Well.prototype.doneWithCopy = function()
{
  this.clipboard = false;
  this.copyText = null;
}

Well.prototype.hasError = function()
{
  return this.duplicates || (this.rna && !this.rna.id);
}

Well.prototype.getClassName = function()
{
  var c = this.column;
  var cls = 'well col-'+c;
  cls += (c >= 2 && c <= 9) ? ' primary' : ' secondary';
  cls += c % 2 == 0 ? ' pool-left' : ' pool-right';
  if (this.selected) cls += ' selected';
  if (this.clipboard) cls += ' clipboard';
  if (this.rna)
  {
    if (this.rna.replicate) cls += ' replicate';
    if (this.rna.qc) cls += ' qc';
  }
  if (this.hasError()) cls += ' err';
  if (this.warning) cls += ' warning';
  if (this.highlightClass) cls += ' ' + this.highlightClass;
  return cls;
}

Well.prototype.getText = function()
{
  var text = '';
  if (this.duplicates)
  {
    text = '<div class="name">'+this.duplicates.join(', ')+'</div>';
    text += '<div class="err-msg">Duplicate RNA in this location</div>';
  }
  else if (this.rna)
  {
    text = '<div class="name">'+this.rna.name+'</div>';
    var info = this.rna.info;
    var warningMsg = null;
    if (info && info.id && !this.rna.stratagene)
    {
      var quantity = 10000 * (this.rna.qc ? QUANTITY_QC : QUANTITY_REGULAR);
      var use = Math.ceil(quantity/info.NDConc);
      var water = Math.round(500-use);
      if (info.bioWell)
      {
        var well = info.bioWell;
        text += '<div class="location">'+well.bioPlate.name+'['+WELL_ALPHA[well.row]+(well.column+1)+']</div>';
      }
      else
      {
        if (!warningMsg) warningMsg = 'No location';
      }
      if (info.remainingQuantity)
      {
        text += '<div class="quantity">'+Numbers.formatNumber(info.remainingQuantity, 2, 'µg')+'</div>';
        if (info.remainingQuantity < (this.rna.qc ? QUANTITY_QC : QUANTITY_REGULAR))
        {
          if (!warningMsg) warningMsg = 'Low quantity';
        }
      }
      else
      {
        if (!warningMsg) warningMsg = 'No quantity';
      }
      if (info.NDConc)
      {
        text += '<div class="ndconc">'+Numbers.formatNumber(info.NDConc, 2, 'ng/µl') + '</div>';
        text += '<div class="volume">'+Numbers.formatNumber(use/10, 1)+' + '+Numbers.formatNumber(water/10, 1)+'µl</div>';
      }
      else
      {
        if (!warningMsg) warningMsg = 'No NDConc value';
      }
      if (warningMsg)
      {
        this.warning = true;
        text += '<div class="warn-msg">'+ warningMsg + '</div>';
      }
    }
    else if (!this.rna.id)
    {
      text += '<div class="err-msg">RNA not found</div>'
    }
  }
  else if (this.copyText)
  {
    text = '<div class="copy-text">'+this.copyText+'</div>';
  }
  return text;
}

Well.prototype.getTooltip = function()
{
  var tooltip = 'Select/deselect this well';
  return tooltip;
}

Well.prototype.paint = function()
{
  this.warning = false;
  this.tag.innerHTML = this.getText();
  this.tag.className = this.getClassName();
  this.tag.title = this.getTooltip();
}

var graphics;
var pen;

function init()
{
  Plate.init();
  Plate.paint(Plate.getWells());
  
  graphics = new jsGraphics(document.getElementById('canvas'));
  pen = new jsPen(new jsColor('#2288AA'), 2);
  
  var plateName = Plate.findNextMRnaPlateName();
  setInnerHTML('plateName', plateName);
}


/**
  Parse a tab-separated data file. The columns must be in the following order:
  0: RNA name
  1: Row letter (A-H)
  2: Column number (1-12)
  3: QC flag (can be empty)
*/
function parseRnaFile(data)
{
  var lines = data.split(/[\n\r]+/);

  // Load information about all RNA items in a batch (will improve performance)
  var names = [];
  for (var i = 0; i < lines.length; i++)
  {
    var line = lines[i];
    if (line)
    {
      var cols = lines[i].split(/\t/);
      if (cols.length < 3) throw 'On line '+(i+1)+': Too few columns (' + cols.length + ')';
      names[names.length] = cols[0];
    }
  }
  Rna.loadInfoByNames(names);
  
  // Place RNA on the plate
  var duplicates = [];
  for (var i = 0; i < lines.length; i++)
  {
    var line = lines[i];
    if (line)
    {
      var cols = lines[i].split(/\t/);

      var rna = Rna.createByName(cols[0]);
      var row =  WELL_ALPHA.indexOf(cols[1].toUpperCase());
      var col =  parseInt(cols[2], 10)-1;
      
      var well = Plate.getWell(row, col);
      if (!well) throw 'On line '+(i+1)+': Invalid plate coordinate ['+cols[1]+','+cols[2]+']';

      rna.qc = cols.length >= 4 && cols[3];
      
      // Check for duplicate RNA on same position (which is an error)
      var pos = 'c'+col+'r'+row;
      if (duplicates[pos])
      {
        well.addDuplicate(rna);
      }
      else
      {
        duplicates[pos] = rna.name;
        well.setRna(rna);
      }
    }
  }
  
  // Check for replicates on the whole plate and repaint it
  Plate.checkReplicates(null, true);
  Plate.paint(Plate.getWells());
}

/**
  Add 'Stratagene' to the selected wells.
*/
function setToStratagene()
{
  var wells = Plate.getSelected();
  
  if (wells.length == 0)
  {
    alert('No wells have been selected');
    return;
  }
  
  // Count non-empty wells
  var count = 0;
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    if (well.rna && !well.hasError()) count++;
  }
  
  if (count > 0)
  {
    if (!confirm('Replace RNA in ' + count + ' wells with Stratagene?'))
    {
      return;
    }
  }
  
  var info = Rna.infoByName('Stratagene');
  if (!info.id)
  {
    alert('Could not find any RNA with name=Stratagene. Please check that it exists on the server.');
    return;
  }
  
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    var rna = Rna.createByInfo(info);
    rna.qc = true;
    well.setRna(rna);
    well.selected = false;
    well.paint();
  }
  
  // Check for replicated RNA if some have been replaced with Stratagene
  if (count > 0) Plate.checkReplicates();
}

/**
  Toggle the QC flag for the selected wells. The first non-empty
  well is toggled and the rest of the wells will use the same new QC
  value.
*/
function toggleQc()
{
  var wells = Plate.getSelected();

  if (wells.length == 0) 
  {
    alert('No wells have been selected');
    return;
  }
  
  var gotQc = false;
  var newQc;
  var count = 0;
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    if (well.rna)
    {
      // Toggle QC flag for the first well with RNA, then use the same flag for the rest
      if (!gotQc)
      {
        gotQc = true;
        newQc = !well.rna.qc;
      }
      well.rna.qc = newQc;
      well.paint();
      count++;
    }
  }

  if (count == 0)
  {
    alert('None of the selected wells contain any RNA');
  }
}

/**
  Empty the selected wells from RNA. They can later be pasted again.
*/
function cutSelected()
{
  var wells = Plate.getSelected();
  
  if (wells.length == 0)
  {
    alert('No wells have been selected');
    return;
  }
  
  var count = 0;
  var valid = 0;
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    if (well.rna) 
    {
      count++;
      if (!well.hasError()) valid++;
    }
  }
  
  if (count == 0)
  {
    alert('None of the selected wells contain any RNA');
    return;
  }
  
  // Ask for confirmation before deleting from valid wells
  if (valid > 0)
  {
    if (!confirm('Clear RNA from ' + count + ' of ' + wells.length + ' selected wells?'))
    {
      return;
    }
  }

  copySelected();
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    well.setRna(null);
    well.selected = false;
    well.paint();
  }
  Plate.checkReplicates();
}

var copy;
/**
  Copy information about the selected wells. 
*/
function copySelected()
{
  // Clear existing wells in the copy
  if (copy && copy.length > 0)
  {
    for (var i = 0; i < copy.length; i++)
    {
      var cp = copy[i];
      cp.well.doneWithCopy();
      cp.well.paint();
    }
  }
  
  // Place selected wells in the copy
  var wells = Plate.getSelected();
  copy = [];
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    copy[copy.length] = well.makeCopy();
    well.selected = false;
    well.paint();
  }
}

/**
  Paste information into the selected wells.
*/
function pasteToSelected()
{
  if (!copy || copy.length == 0) 
  {
    alert('Nothing to paste. Please cut or copy wells first.');
    return;
  }
  
  var wells = Plate.getSelected();
  // Count non-empty and valid wells
  var count = 0;
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    if (well.rna && !well.hasError()) count++;
  }
  
  if (count > 0)
  {
    if (!confirm('Replace RNA in ' + count + ' wells with copy?'))
    {
      return;
    }
  }
  
  var wi = 0;
  var ci = 0;
  var copyEmpty;
  var askIfEmpty = true;
  
  while (wi < wells.length && ci < copy.length)
  {
    var well = wells[wi];
    var cp = copy[ci];
    var rna = null;
    cp.well.doneWithCopy();
    cp.well.paint();
    if (cp.name)
    {
      rna = Rna.createByName(cp.name);
    }
    else
    {
      // The copy is from an empty well
      if (askIfEmpty)
      {
        askIfEmpty = false;
        copyEmpty = confirm('Do you want to copy empty wells? If not, only non-empty well are copied.');
      }
    }
    if (rna != null || copyEmpty)
    {
      well.setRna(rna);
      well.selected = false;
      well.paint();
      wi++;
    }
    ci++;
  }
  copy.splice(0, ci);
  Plate.checkReplicates();
}


/**
  Open a popup dialog for selecting a data files.
*/
function selectFile()
{
  Main.openPopup('select_file.jsp?ID=<%=ID%>', 'SelectFile', 600, 400); 
}


var currentSelected;
var currentIndex = 0;
var subtypeRna = null;

/**
  Open a popup dialog for manual selection of RNA.
 */
function manualSelect()
{
  currentSelected = Plate.getSelected();
  currentIndex = 0;
  
  if (currentSelected.length == 0)
  {
    alert('Please select one or more wells were RNA should be placed.');
    return;
  }
  
  if (subtypeRna == null)
  {
    var request = Ajax.getXmlHttpRequest();
    var url = '../Subtype.servlet?ID=<%=ID%>&cmd=GetSubtypeInfo&name=RNA';
    request.open("GET", url, false);  
    request.send(null);

    if (debug) Main.debug(request.responseText);
    var response = JSON.parse(request.responseText);  
    if (response.status != 'ok')
    {
      setFatalError(response.message);
      return false;
    }
    subtypeRna = response.subtype;
  }

  var url = getRoot() + 'biomaterials/extracts/index.jsp?ID=<%=ID%>';
  url += '&cmd=UpdateContext&mode=selectmultiple&callback=setRnaCallback&resetTemporary=1';
  url += '&tmpfilter:INT:itemSubtype='+subtypeRna.id;
  url += '&tmpfilter:DATE:creationEvent.eventDate='+encodeURIComponent('<>');
  url += '&tmpfilter:FLOAT:remainingQuantity='+encodeURIComponent('>=1');
  Main.openPopup(url, 'SelectRNA', 1000, 700);
}

/**
  Callback method for manual selection.
*/
function setRnaCallback(id, name)
{
  if (currentIndex >= currentSelected.length)
  {
    return;
  }
  var well = currentSelected[currentIndex];
  
  // Keep a reference to the old rna in the well
  var oldRna = well.rna;

  // Create a new RNA object
  var rna = Rna.createByName(name);
  well.setRna(rna);
  well.selected = false;
  well.paint();
  
  // Update replicate information
  Plate.checkReplicates(name);
  if (oldRna) Plate.checkReplicates(oldRna.name);
  
  // Move to the next item
  currentIndex++;
}

// Toggle the selected status of a single well
function toggleWell(row, column)
{
  var well = Plate.getWell(row, column);
  Plate.toggleSelected([well]);
}

// Toggle the selected status of a complete row
function toggleRow(row)
{
  Plate.toggleSelected(Plate.getRow(row));
}

// Toggle the selected status of a complete column
function toggleColumn(column)
{
  Plate.toggleSelected(Plate.getColumn(column));
}

// Toggle the selected status of all wells
function toggleAll()
{
  Plate.toggleSelected(Plate.getWells());
}

// Toggle the selected status of a complete pool (=two columns)
function togglePool(pool)
{
  Plate.toggleSelected(Plate.getPool(pool));
}

// Highlight enable/disable all wells in a column
function highlightColumn(column, on)
{
  Main.addOrRemoveClass(document.getElementById('col.'+column), 'highlight-column', on);
  var wells = Plate.getColumn(column);
  Plate.setHighlight(wells, 'highlight-column', on);
}

// Highlight enable/disable all wells in a row
function highlightRow(row, on)
{
  Main.addOrRemoveClass(document.getElementById('row.'+row), 'highlight-row', on);
  var wells = Plate.getRow(row);
  Plate.setHighlight(wells, 'highlight-row', on);
}

// Highlight enable/disable all wells in a pool
function highlightPool(pool, on)
{
  Main.addOrRemoveClass(document.getElementById('pool.'+pool), 'highlight-pool', on);
  var wells = Plate.getPool(pool);
  Plate.setHighlight(wells, 'highlight-pool', on);
}

/**
  Highlight all replicated wells with the same RNA as the given well.
*/
function highlightReplicated(row, column, on)
{
  var well = Plate.getWell(row, column);
  if (well.rna && well.rna.replicate)
  {
    // Get center coordinates for the current well
    var pos = Main.getElementPosition(well.tag);
    var jsPos = new jsPoint(pos.left+pos.width/2, pos.top+pos.height/2);

    var replicated = Plate.getWellsByName(well.rna.name);
    for (var i = 0; i < replicated.length; i++)
    {
      var rep = replicated[i];
      if (rep != well)
      {
        Main.addOrRemoveClass(rep.tag, 'highlight-replicated', on);
        if (rep.line)
        {
          // Clear any recent lines
          graphics.clearDrawing(rep.line);
          rep.line = null;
        }
        if (on)
        {
          // We draw a line between the current and replicated well
          var rPos = Main.getElementPosition(rep.tag);
          rep.line = graphics.drawLine(pen, jsPos, new jsPoint(rPos.left+rPos.width/2, rPos.top+rPos.height/2));
        }
      }
    }
  }
}


function goCreate()
{
  var submitInfo = {};
  var plateInfo = {};
  submitInfo.bioplate = plateInfo;
  
  plateInfo.name = Plate.name;
  plateInfo.wells = [];

  var wells = Plate.getWells();
  var numErrors = 0;
  var numWarnings = 0;
  var numRna = 0;
  var numStratagene = 0;
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    if (well.warning) numWarnings++;
    if (well.hasError())
    {
      numErrors++;
    }
    else
    {
      if (well.rna && well.rna.id)
      {
        var tmp = {};
        tmp.row = well.row;
        tmp.column = well.column;
        tmp.rna = {};
        tmp.rna.id = well.rna.id;
        tmp.rna.usedQuantity = well.rna.qc ? QUANTITY_QC : QUANTITY_REGULAR;
        plateInfo.wells[plateInfo.wells.length] = tmp;
        numRna++;
        if (well.rna.stratagene) numStratagene++;
      }
    }
  }

  if (numErrors > 0)
  {
    alert('There are ' + numErrors + ' wells with errors. Please fix them before creating the mRNA plate.');
    return;
  }

  if (numRna == 0)
  {
    alert('There is no RNA in any wells');
    return;
  }
  
  if (numWarnings > 0)
  {
    if (!confirm('There are ' + numWarnings + ' wells with a warning. Continue anyway?')) return;
  }
  
  if (numRna < 64)
  {
    if (!confirm('Less than 64 wells have RNA in them. Continue anyway?')) return;
  }
  
  if (numRna == numStratagene)
  {
    if (!confirm('There are only wells with Stratagene on this plate. Continue anyway?')) return;
  }
  
  Main.addClass(document.getElementById('step.1.section'), 'disabled');
  Main.hide('gocancel');
  Main.hide('gocreate');

  if (debug) Main.debug(JSON.stringify(submitInfo));
  
  var request = Ajax.getXmlHttpRequest();
  var url = '../MRna.servlet?ID=<%=ID%>';
  url += '&cmd=CreateMRnaPlate';
  request.open("POST", url, false);
  request.setRequestHeader("Content-Type", "application/json");
  request.send(JSON.stringify(submitInfo));

  if (debug) Main.debug(request.responseText);

  var response = JSON.parse(request.responseText);
  if (response.status != 'ok')
  {
    setFatalError(response.message);
    return false;
  }

  var msg = '<ul>';
  for (var i = 0; i < response.messages.length; i++)
  {
    msg += '<li>' + response.messages[i];
  }
  msg += '</ul>';
  setInnerHTML('done', msg);
  Main.show('done');
  Main.show('gorestart');
}

function toggleInfo(what)
{
  var frm = document.forms['reggie'];
  var show = frm[what].checked;
  Main.addOrRemoveClass(document.getElementById('plate'), 'hide-'+what, !show);
}

</script>
<style>

/* A well assigned for QC include a background icon as indicator */
.well.qc
{
  background-image: url('../images/mrnaqc.png');
  background-position: 95% 5%;
  background-repeat: no-repeat;
}

/* A well which contain replicate RNA is also marked with an icon */
.well.replicate
{
  background-image: url('../images/copy.png');
  background-position: 95% 5%;
  background-repeat: no-repeat;
}

/* A well that is both a replicate and QC need to re-arrange the icons a bit */
.well.qc.replicate
{
  background-image: url('../images/mrnaqc.png'), url('../images/copy.png');
  background-position: 95% 5%, 95% 55%;
  background-repeat: no-repeat;
}

.well .name
{
  font-weight: bold;
}

.well .err-msg, .well .warn-msg
{
  color: #C80000;
  font-style: italic;
}

.well .missing
{
  font-style: italic;
}

.plate.hide-location .location
{
  display: none;
}
.plate.hide-quantity .quantity
{
  display: none;
}
.plate.hide-volume .volume
{
  display: none;
}
.plate.hide-ndconc .ndconc
{
  display: none;
}

</style>
</base:head>
<base:body onload="init()">
  <p:path><p:pathelement 
    title="Reggie" href="<%="../index.jsp?ID="+ID%>" 
    /><p:pathelement title="Create new mRNA plate" 
    /></p:path>
  <div id="canvas" class="absolutefull" style="z-index: -1;">
  <div class="content">
  <%
  if (sc.getActiveProjectId() == 0)
  {
    %>
    <div class="messagecontainer note" style="width: 950px; margin-left: 20px; margin-bottom: 20px; margin-right: 0px; font-weight: bold; color: #cc0000;">
      No project has been selected. You may proceed with the wizard but 
      created items will not be shared.
    </div>
    <%
  }
  %>
  <form name="reggie" onsubmit="return false;">
  
  <table class="stepform" id="step.1.section" style="width: auto;">
  <tr>
    <td rowspan="3" class="stepno">1</td>
    <td class="steptitle">Fragmented mRNA plate</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table class="bottomborder" style="width: 100%;">
      <tr>
        <td class="prompt">Name</td>
        <td class="input" id="plateName"></td>
        <td class="help">Select RNA items to use for the new mRNA plate.</td>
      </tr>
      <tr style="vertical-align: top;">
        <td class="prompt">Show</td>
        <td class="input">
          <table>
          <tr>
            <td>
              <input type="checkbox" name="location" id="location" onclick="toggleInfo('location')" checked><label for="location">Bioplate location</label><br>
              <input type="checkbox" name="quantity" id="quantity" onclick="toggleInfo('quantity')" checked><label for="quantity">Remaining quantity</label><br>
            </td>
            <td>
              <input type="checkbox" name="ndconc" id="ndconc" onclick="toggleInfo('ndconc')"><label for="ndconc">NDConc</label><br>
              <input type="checkbox" name="volume" id="volume" onclick="toggleInfo('volume')"><label for="volume">Used volume+water</label><br>
            </td>
          </tr>
          </table>
          <br>
        </td>
        <td class="help"></td>
      </tr>
      </table>
    </td>
  </tr>
  
  <tr>
    <td>
      <tbl:toolbar subclass="bottomborder">
        <tbl:button 
          title="Load from file&hellip;" 
          image="<%=home+"/images/file.png"%>" 
          onclick="selectFile()" 
          tooltip="Load plate design from file"
        />
        
        <tbl:button 
          title="Auto-select&hellip;" 
          image="<%=home+"/images/wizard.png"%>" 
          onclick="autoSelect()" 
          tooltip="Let the wizard auto-select RNA"
        />
        <tbl:button 
          title="Manual select&hellip;" 
          image="<%=home+"/images/manual_rna.png"%>" 
          onclick="manualSelect()" 
          tooltip="Manually select RNA items" 
        />
        <tbl:button 
          title="Stratagene" 
          image="<%=home+"/images/stratagene.png"%>" 
          onclick="setToStratagene()" 
          tooltip="Place stratagene in the selected wells" 
        />
        <tbl:button 
          title="Toggle QC" 
          image="<%=home+"/images/mrnaqc.png"%>" 
          onclick="toggleQc()" 
          tooltip="Select/deselect RNA for QC" 
        />
        <tbl:button 
          title="Cut&hellip;" 
          image="<%=home+"/images/cut.png"%>" 
          onclick="cutSelected()" 
          tooltip="Clear the selected wells" 
        />
        <tbl:button 
          title="Copy" 
          image="<%=home+"/images/copy.png"%>" 
          onclick="copySelected()" 
          tooltip="Make a copy of the selected RNA" 
        />
        <tbl:button 
          title="Paste" 
          image="<%=home+"/images/paste.png"%>" 
          onclick="pasteToSelected()" 
          tooltip="Paste RNA into selected wells" 
        />
      </tbl:toolbar>
        <table class="plate hide-volume hide-ndconc" style="margin: 1em 1em 0 1em;" id="plate">
        <%
        int columns = 12;
        int rows = 8;
        WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
        WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
        %>
        <tr class="header">
          <th>
            <base:icon image="<%=home+"/images/select_all.png"%>" 
              onclick="toggleAll()" 
              tooltip="Select/deselect all wells on the plate" 
            />
          </th>
          <%
          for (int c = 0; c < columns; ++c)
          {
            %>
            <th class="link" id="col.<%=c%>"
              onclick="toggleColumn(<%=c%>)" 
              onmouseover="highlightColumn(<%=c%>, true)"
              onmouseout="highlightColumn(<%=c%>, false)"
              title="Select/deselect all wells in this column"><%=colF.format(c)%></td>
            <%
          }
          %>
        </tr>
        <tbody>
        <%
        for (int r = 0; r < rows; ++r)
        {
          String row = rowF.format(r);
          %>
          <tr class="row-<%=r%>">
            <th class="link" id="row.<%=r%>"
              onclick="toggleRow(<%=r%>)"
              onmouseover="highlightRow(<%=r%>, true)"
              onmouseout="highlightRow(<%=r%>, false)"
              title="Select/deselect all wells in this row"><%=row%></th>
            <%
            for (int c = 0; c < columns; ++c)
            {
              %>
              <td id="well.<%=r%>.<%=c%>" 
                onclick="toggleWell(<%=r%>,<%=c%>)"
                onmouseenter="highlightReplicated(<%=r%>, <%=c%>, true)" 
                onmouseleave="highlightReplicated(<%=r%>, <%=c%>, false)"
                title="Select/deselect this well"></td>
              <%
            }
            %>
          </tr>
          <%
        }
        %>
        </tbody>
        <tr>
          <th></th>
          <%
          for (int i = 0; i < columns / 2; ++i)
          {
            %>
            <th colspan="2" class="link" id="pool.<%=i %>"
              onclick="togglePool(<%=i%>)" 
              onmouseover="highlightPool(<%=i%>, true)"
              onmouseout="highlightPool(<%=i%>, false)"
              title="Select/deselect all wells in this pool"
              ><%=i==0 || i == (columns / 2 - 1) ? "Extra" : "Pool #" + i %></td>
            <%
          }
          %>
        </tr>
        </table>
        <div style="padding-left: 1em; padding-bottom: 0.5em; padding-top: 2px;">
          <base:icon image="<%=home+"/images/mrnaqc.png"%>" />=Selected for QC
          <base:icon image="<%=home+"/images/copy.png"%>" style="padding-left: 1em;" />=Replicated RNA
          <base:icon image="<%=home+"/images/error.png"%>" style="padding-left: 1em;" />=Error that prevent plate creation
          <base:icon image="<%=home+"/images/warning.png"%>" style="padding-left: 1em;" />=Warning but plate can be created
        </div>
    </td>
  </tr>
  </table>
  

  <div class="messagecontainer error" id="errorMessage" style="display: none; width: 950px; margin-left: 20px; margin-bottom: 0px;"></div>

  <div id="done" class="success" style="display: none; width: 950px; margin-left: 20px; margin-top: 20px;"></div>

  <table style="margin-left: 20px; margin-top: 10px;" class="navigation">
  <tr>
    <td><base:button id="gocancel" title="Cancel" onclick="goRestart(false)" /></td>
    <td><base:button id="gocreate" title="Create" image="<%=home+"/images/gonext.png"%>" onclick="goCreate()" /></td>
    <td><base:button id="gorestart" title="Restart" image="<%=home+"/images/goback.png"%>" onclick="goRestart(true)" style="display: none;"/></td>
  </tr>
  </table>
  </form>
  
  <div class="loading" id="loading" style="display: none;"><table><tr><td><img src="images/loading.gif"></td><td id="loading.msg">Please wait...</td></tr></table></div>
  
</div>
  </div>
</base:body>
</base:page>
<%
}
finally
{
  if (dc != null) dc.close();
}
%>