source: extensions/net.sf.basedb.reggie/trunk/resources/libprep/create_manual_pool.jsp @ 2150

<%@ page
  pageEncoding="UTF-8"
  session="false"
  import="net.sf.basedb.core.User"
  import="net.sf.basedb.core.DbControl"
  import="net.sf.basedb.core.SessionControl"
  import="net.sf.basedb.core.Application"
  import="net.sf.basedb.util.formatter.WellCoordinateFormatter"
  import="net.sf.basedb.clients.web.Base" 
  import="net.sf.basedb.clients.web.extensions.ExtensionsControl"
%>
<%@ 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" styles="path.css,toolbar.css">
  <link rel="stylesheet" type="text/css" href="../css/reggie.css">
  <script language="JavaScript" src="../reggie.js" type="text/javascript" charset="UTF-8"></script>
  <script language="JavaScript" src="pools.js" type="text/javascript" charset="UTF-8"></script>

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

var selectedLibraries = [];
var targetVolumePerLibIsValid = false;
var poolInfo;

// Loaded from servlet when getting Library information
var TARGET_MOLARITY_IN_POOL;
var LIMIT_FOR_AUTO_EXCLUDE = 0.25;
var LIMIT_FOR_EXTRA_LARGE_MIX;
var EXTRA_LARGE_MIX_FACTOR;

function init()
{
  var frm = document.forms['reggie'];

  // Load some default pooling options and the auto-generated name for the next pool
  var response = loadPoolInfo();
  var poolInfo = response.poolInfo;
  TARGET_MOLARITY_IN_POOL = poolInfo.targetMolarity;
  EXTRA_LARGE_MIX_FACTOR = poolInfo.extraLargeMixFactor;
  LIMIT_FOR_EXTRA_LARGE_MIX = poolInfo.limitForExtraLargeMix;
  setInnerHTML('pool-name', response.names[0]);
  setInnerHTML('target_molarity', Numbers.formatNumber(TARGET_MOLARITY_IN_POOL, 1, ' nM'));
  
  frm.target_volume.value = poolInfo.targetVolumePerLib;
  frm.poolName.value = response.names[0];
  targetVolumeOnChange();
}


function loadPoolInfo()
{
  var frm = document.forms['reggie'];

  // Load Libraries and related info from the selected bioplate
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading pooling information...');
    var url = '../Pool.servlet?ID=<%=ID%>&cmd=GetNextAutoGeneratedPoolNames&numNames=1';    
    request.open("GET", url, false);
    request.send(null);
  }
  finally
  {
    hideLoadingAnimation();
  }
  
  if (debug) Main.debug(request.responseText);
  var response = JSON.parse(request.responseText);
  if (response.status != 'ok')
  {
    setFatalError(response.message);
    return false;
  }
  
  return response;
}

function checkAll()
{
  var frm = document.forms['reggie'];

  var check = null;
  for (var i = 0; i < frm.elements.length; i++)
  {
    var e = frm.elements[i];
    if (e.type == 'checkbox')
    {
      if (check == null) check = !e.checked;
      e.checked = check;
    }
  }
}

function removeSelected()
{
  var frm = document.forms['reggie'];
  var tbody = document.getElementById('lib-table-rows');
  var numRemoved = 0;
  for (var libNo = selectedLibraries.length-1; libNo >= 0; libNo--)
  {
    var lib = selectedLibraries[libNo];
    if (frm['check.'+lib.id].checked)
    {
      var tr = document.getElementById('lib.'+lib.id);
      tbody.removeChild(tr);
      selectedLibraries.splice(libNo, 1);
      numRemoved++;
    }
  }
  
  if (numRemoved > 0)
  {
    updatePoolData();
  }
  
  if (selectedLibraries.length == 0)
  { 
    Main.show('not-selected');
    Main.hide('lib-table');
  }
}

var subtypeLibrary = null;

function selectLibraries()
{
  var frm = document.forms['reggie'];
  
  if (subtypeLibrary == null)
  {
    var request = Ajax.getXmlHttpRequest();
    var url = '../Subtype.servlet?ID=<%=ID%>&cmd=GetSubtypeInfo&name=LIBRARY';
    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;
    }
    subtypeLibrary = response.subtype;
  }
  
  var url = getRoot() + 'biomaterials/extracts/index.jsp?ID=<%=ID%>&cmd=UpdateContext&mode=selectmultiple&callback=setLibraryCallback';
  url += '&resetTemporary=1';
  url += '&tmpfilter:INT:itemSubtype='+subtypeLibrary.id;
  url += '&tmpfilter:DATE:creationEvent.eventDate='+encodeURIComponent('<>');
  url += '&tmpfilter:STRING:bioWell.bioPlate.name='+encodeURIComponent('<>');;
  
  var exclude = [];
  for (var libNo = 0; libNo < selectedLibraries.length; libNo++)
  {
    exclude[exclude.length] = selectedLibraries[libNo].id;
  }
  if (exclude.length > 0) url += '&exclude='+exclude.join(',');
  
  Main.openPopup(url, 'SelectLibrary', 1000, 700);
}

function setLibraryCallback(id, name)
{
  var frm = document.forms['reggie'];

  // Check if this library has already been selected
  for (var i = 0; i < selectedLibraries.length; i++)
  {
    if (selectedLibraries[i].id == id)
    {
      return;
    }
  }
  
  // Disable timer while we are working -- will be re-enabled later
  if (updateTimerId) clearTimeout(updateTimerId);
  
  // Get more information about the selected library
  var request = Ajax.getXmlHttpRequest();
  var url = '../Pool.servlet?ID=<%=ID%>&cmd=GetLibraryInfo&libraryId=' + id;    
  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;
  }
  
  var lib = response.library;
  selectedLibraries[selectedLibraries.length] = lib;

  lib.excludeFromPool = lib.molarity > 0 && lib.remainingQuantity > 0 ? false : true;
  
  Main.hide('not-selected');
  Main.show('lib-table');

  addLibraryToTable(lib);
  updatePoolDataDelayed();
}

function addLibraryToTable(lib)
{
  var tr = document.createElement('tr');
  tr.id = 'lib.'+lib.id;
  var className = '';
  if (lib.excludeFromPool) className += ' excluded';
  addColumn(tr, 'check', '<input type="checkbox" name="check.'+lib.id+'" value="'+lib.id+'">');
  addColumn(tr, 'name', lib.name);
  addColumn(tr, 'barcode', lib.barcode ? lib.barcode.name : '-');
  addColumn(tr, 'location', lib.bioWell ? lib.bioWell.bioPlate.name + ' ' + lib.bioWell.location : '-');
  addColumn(tr, 'remain', lib.remainingVolume ? Numbers.formatNumber(lib.remainingVolume, 1) : '-');
  addColumn(tr, 'molarity', lib.molarity ? Numbers.formatNumber(lib.molarity, 2) : '-');
  addColumn(tr, 'volume', '');
  addColumn(tr, 'eb', '');
  addColumn(tr, 'remarks', '');
  tr.className = className;

  // Rows should be sorted by barcode
  // Locate existing row 
  tr.sortBy = lib.barcode ? lib.barcode.name : lib.name;
  var tbody = document.getElementById('lib-table-rows');
  
  var target = null;
  for (var i = 0; i < tbody.childNodes.length; i++)
  {
    var row = tbody.childNodes[i];
    if (row.sortBy && (row.sortBy > tr.sortBy))
    {
      // Found it!
      target = row;
      break;
    };
  }
  
  tbody.insertBefore(tr, target);
}

function addColumn(tr, idSuffix, text)
{
  var td = document.createElement('td');
  td.id = tr.id+'.'+idSuffix;
  td.className = idSuffix;
  td.innerHTML = text;
  tr.appendChild(td);
}


function calculateRemarks(lib, mixingStrategy, duplicateBarcodes)
{
  var remarks = [];

  // Check if default barcode has been modified
  if (lib.molarity != null)
  {
    if (duplicateBarcodes[lib.barcode.name])
    {
      remarks[remarks.length] = 'Duplicate barcode: ' + lib.barcode.name;
    }
    
    if (lib.volume != lib.actualVolume)
    {
      if (lib.volume > lib.remainingVolume)
      {
        remarks[remarks.length] = 'Low quantity';
      }
      else 
      {
        remarks[remarks.length] = 'Low molarity';
      }
      if (mixingStrategy == 'fixed')
      {
        remarks[remarks.length] = 'Mix <span class="volume">'+Numbers.formatNumber(lib.actualVolume, 1) + '</span>+<span class="eb">' + Numbers.formatNumber(lib.actualEb, 1)+'µl</span>';
      }
      else
      {
        remarks[remarks.length] = 'Use <span class="volume">'+Numbers.formatNumber(lib.actualVolume, 1) + 'µl</span>';
      }
    }
    
    if (lib.speedVacConc != null)
    {
      remarks[remarks.length] = 'SpeedVac';
    }
    
    if (lib.mixFactor > 1)
    {
      // Larger mix than default
      remarks[remarks.length] = 'Mix <span class="volume">'+Numbers.formatNumber(lib.volume*lib.mixFactor, 1) + '</span>+<span class="eb">' + Numbers.formatNumber(lib.eb*lib.mixFactor, 1)+'µl</span>';
      remarks[remarks.length] = 'Use <b>' + Numbers.formatNumber(lib.volume+lib.eb, 1) + 'µl</b> in pool';
    }
  }
  if (lib.excludeFromPool)
  {
    remarks[remarks.length] = 'Excluded';
  }
  if (lib.comment)
  {
    remarks[remarks.length] = lib.comment;
  }
  lib.stratagene = lib.name.indexOf(GENERIC_STRATAGENE_NAME) == 0;
  lib.external = lib.name.indexOf(EXTERNAL_RNA_NAME) == 0;
  lib.remarks = remarks;
}


var updateTimerId = null;
function updatePoolDataDelayed()
{
  // Cancel previous time
  if (updateTimerId) clearTimeout(updateTimerId);
  updateTimerId = setTimeout(updatePoolData, 200);
}

function updatePoolData()
{
  updateTimerId = null;
  
  if (!targetVolumePerLibIsValid || selectedLibraries.length == 0) return;
  
  var frm = document.forms['reggie'];
  var targetVolumePerLib = parseFloat(frm.target_volume.value);
  var mixingStrategy = Forms.getCheckedRadio(frm.mixing_strategy).value;

  // Get all libs into an array
  var libs = [];
  var usedBarcodes = [];
  var duplicateBarcodes = [];
  for (var selectedNo = 0; selectedNo < selectedLibraries.length; selectedNo++)
  {
    var lib = selectedLibraries[selectedNo];
    if (!lib.excludeFromPool)
    {
      libs[libs.length] = lib;
      if (usedBarcodes[lib.barcode.name])
      {
        duplicateBarcodes[lib.barcode.name] = 1;
      }
      else
      {
        usedBarcodes[lib.barcode.name] = 1;
      }
      PoolMix.calculateLibVolume(lib, TARGET_MOLARITY_IN_POOL, targetVolumePerLib, mixingStrategy);
      PoolMix.calculateEbVolume(lib, TARGET_MOLARITY_IN_POOL, targetVolumePerLib, mixingStrategy);
    }
  }
    
  // Calculate final pool volumes, molarity, etc.
  poolInfo = PoolMix.calculateFinalPoolInfo(libs, TARGET_MOLARITY_IN_POOL, targetVolumePerLib, mixingStrategy);
  
  // Make remarks for each lib
  for (var libNo = 0; libNo < selectedLibraries.length; libNo++)
  {
    var lib = selectedLibraries[libNo];
    if (!lib.excludeFromPool)
    {
      var mark = '';
      var tr = document.getElementById('lib.'+lib.id);
      if (duplicateBarcodes[lib.barcode.name])
      {
        Main.addClass(tr, 'lib-error');
        lib.hasError = true;
      }
      else
      {
        Main.removeClass(tr, 'lib-error');
        lib.hasError = false;
      }
      if (lib.volume != lib.actualVolume)
      {
        mark = '*';
        Main.addClass(tr, 'warning');
      }
      else
      {
        Main.removeClass(tr, 'warning');
      }
      setInnerHTML('lib.'+lib.id+'.volume', lib.mixFactor > 1 ? '-' : Numbers.formatNumber(lib.volume, 1)+mark);
      if (mixingStrategy == 'fixed' && lib.mixFactor < 1.001)
      {
        setInnerHTML('lib.'+lib.id+'.eb', Numbers.formatNumber(lib.eb, 1));
      }
      else
      {
        setInnerHTML('lib.'+lib.id+'.eb', '-');
      }
    }
    
    calculateRemarks(lib, mixingStrategy, duplicateBarcodes);
    setInnerHTML('lib.'+lib.id+'.remarks', lib.remarks.join('; '));
  }
  
  var warnMsg = null;
  if (poolInfo.ebVolumeExtra < 0) 
  {
    warnMsg = 'Too many libs with low molarity';
  }
  
  setInnerHTML('pool.eb', Numbers.formatNumber(poolInfo.ebVolumeExtra, 1));

  var poolDiv = document.getElementById('pool-summary');
  var poolRow = document.getElementById('lib-table-pool-summary');
  var poolData = '<div class="pool-data">';
  poolData += libs.length + ' libs • ';
  poolData += Numbers.formatNumber(poolInfo.molarity, 2, 'nM')+' • ';
  poolData += Numbers.formatNumber(poolInfo.totalVolume, 1, 'µl');
  if (mixingStrategy == 'dynamic')
  {
    poolData += ' • <span class="eb">'+Numbers.formatNumber(Math.max(0, poolInfo.ebVolumeExtra), 1, 'µl')+'</span>';
  }
  if (warnMsg)
  {
    Main.addClass(poolRow, 'warning');
    setInnerHTML('pool.remarks', warnMsg);
  }
  else
  {
    Main.removeClass(poolRow, 'warning');
    setInnerHTML('pool.remarks', '');
  }
  
  poolData += '</div>';
  poolDiv.innerHTML = poolData;
}

function targetVolumeOnChange()
{
  var frm = document.forms['reggie'];
  var targetVolumePerLib = parseFloat(frm.target_volume.value);
  
  targetVolumePerLibIsValid = false;
  if (targetVolumePerLib < 2 || targetVolumePerLib > 10)
  {
    setInputStatus('target_volume', 'Must be between 2 and 10µl', 'invalid');
    return;
  }
  setInputStatus('target_volume', '', 'valid');
  targetVolumePerLibIsValid = true;

  updatePoolData();
}

function mixingStrategyOnChange()
{
  updatePoolData();
}

function goCreate()
{
  if (!targetVolumePerLibIsValid) return;
  if (selectedLibraries.length == 0) return;

  
  var submitInfo = {};
  submitInfo.pools = [];
  submitInfo.flagged = []; // Always empty
  var frm = document.forms['reggie'];
  submitInfo.targetVolumeInPoolPerLib = parseFloat(frm.target_volume.value);
  submitInfo.targetPoolMolarity = TARGET_MOLARITY_IN_POOL;
  submitInfo.mixingStrategy = Forms.getCheckedRadio(frm.mixing_strategy).value;
  
  var pool = {};
  pool.name = frm.poolName.value;
  pool.comment = frm.poolComments.value;
  pool.ebVolumeExtra = Math.max(0, poolInfo.ebVolumeExtra);
  pool.libs = [];
  pool.excluded = [];
  
  for (var libNo = 0; libNo < selectedLibraries.length; libNo++)
  {
    var lib = selectedLibraries[libNo];
    if (lib.hasError) return;
    
    // We send library id, name and mixing volumes
    if (!lib.excludeFromPool)
    {
      var tmp = {};
      tmp.id = lib.id;
      tmp.name = lib.name;
      tmp.volume = lib.actualVolume;
      tmp.eb = lib.actualEb;
      tmp.mixFactor = lib.mixFactor;
      tmp.comment = lib.comment;
      pool.libs[pool.libs.length] = tmp;
    }
  }
  submitInfo.pools[submitInfo.pools.length] = pool;
  
  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();
  try
  {
    showLoadingAnimation('Creating pool...');
    var url = '../Pool.servlet?ID=<%=ID%>';
    url += '&cmd=CreatePools';
    request.open("POST", url, false);
    request.setRequestHeader("Content-Type", "application/json");
    request.send(JSON.stringify(submitInfo));
  }
  finally
  {
    hideLoadingAnimation();
  }

  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');
  scrollToBottom(document.getElementById('content'));

}

//Set a comment on the checked libraries
var lastComment = '';
function commentChecked()
{
  var frm = document.forms['reggie'];
  
  // Get array with checked libs
  var checked = [];
  var comment;
  for (var libNo = 0; libNo < selectedLibraries.length; libNo++)
  {
    var lib = selectedLibraries[libNo];
    if (frm['check.'+lib.id].checked)
    {
      checked[checked.length] = lib;
      if (!comment) comment = lib.comment;
    }
  }
  
  if (checked.length == 0)
  {
    alert('No libraries have been selected');
    return;
  }
        
  comment = prompt('Comment', comment || lastComment);
  if (comment == null) return;

  lastComment = comment;
  
  if (comment == '') comment = null;
  for (var libNo = 0; libNo < checked.length; libNo++)
  {
    var lib = checked[libNo];
    lib.comment = comment;
  }
  
  updatePoolData();
}

</script>
<style>

#pool-table
{
  width: 100%;
}

#pool-name
{
  font-size: 125%;
}

#pool-table th, #pool-table td
{
  text-align: left;
  padding: 2px 0.5em 2px 0.5em;
}

#lib-table table
{
  width: 100%;
  border-collapse: collapse;
}

#lib-table thead, #lib-table tbody
{
  border-bottom: 1px solid #A0A0A0;
}

#lib-table th, #lib-table td
{
  text-align: left;
  padding: 2px 0.5em 2px 0.5em;
  border-left: 1px solid #A0A0A0;
}

#lib-table thead
{
  background-color: #F0F0F0;
}

#lib-table tbody#lib-table-rows tr
{
  border-bottom: 1px dotted #A0A0A0;
}

#lib-table tbody#lib-table-rows tr.excluded
{
    font-style: italic;
    color: #666666;
}

#lib-table .check
{
  width: 25px;
  text-align: center;
  border-left: 0;
}

#lib-table .name
{
  width: 12em;
}

#lib-table .barcode
{
  width: 6em;
}

#lib-table .plate
{
  width: 12em;
}

#lib-table .remain
{
  width: 4em;
  text-align: center;
}


#lib-table .molarity
{
  width: 4em;
  text-align: center;
}

#lib-table .volume
{
  width: 4em;
  text-align: center;
}

#lib-table .eb
{
  width: 4em;
  text-align: center;
}

td.volume, span.volume
{
  color: #C80000;
}

td.eb, span.eb
{
  color: #0000C8;
}

#lib-table td.remarks
{
  font-style: italic;
  background-position: 2px 50%;
  background-repeat: no-repeat;
}

#lib-table .warning .remarks
{
  background-image: url('../images/warning.png');
  padding-left: 25px;
  
}

#lib-table .lib-error .remarks
{
  background-image: url('../images/error.png');
  padding-left: 25px;
  color: #C80000;
  
}


#lib-table-pool-summary td
{
  font-weight: bold;
}
</style>
</base:head>
<base:body onload="init()">

  <p:path><p:pathelement 
    title="Reggie" href="<%="../index.jsp?ID="+ID%>" 
    /><p:pathelement title="Create manual pool" 
    /></p:path>

  <div class="content" id="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 registration but 
      created items will not be shared.
    </div>
    <%
  }
  %>

  <form name="reggie" onsubmit="return false;">
  <input type="hidden" name="poolName" value="">
  
  <div id="step.1.section">
  <table class="stepform">
  <tr>
    <td rowspan="3" class="stepno">1</td>
    <td class="steptitle">Select pool options and libraries</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table class="bottomborder" >
      <tr valign="top">
        <td class="prompt">Target molarity</td>
        <td class="input">
          <span id="target_molarity"></span>
        </td>
        <td class="status"></td>
        <td class="help"></td>
      </tr>
      <tr valign="top">
        <td class="prompt">Average volume / lib</td>
        <td class="input">
          <input type="text" class="text" name="target_volume" 
            value="5" style="width: 4em;"
            onblur="targetVolumeOnChange()"
            onkeypress="doOnEnter(event, targetVolumeOnChange); return Numbers.numberOnly(event)"> µl (2--10)
        </td>
        <td class="status" id="target_volume.status"></td>
        <td class="help" rowspan="2"><span id="target_volume.message" class="message" style="display: none;"></span>
          Select a target volume when mixing each lib to 2nM before pooling. 
          Use the <b>Dynamic</b> strategy to prioritize final pool molarity by mixing 
          different volume for each library. Use the <b>Fixed</b> strategy to mix all 
          libraries to the given volume.
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt">Mixing strategy</td>
        <td class="input">
          <label><input type="radio" name="mixing_strategy" value="dynamic" checked
            onclick="mixingStrategyOnChange()"
            >Dynamic</label>
          <label><input type="radio" name="mixing_strategy" value="fixed"
            onclick="mixingStrategyOnChange()"
            >Fixed</label>
        </td>
        <td class="status" id="mixing_strategy.status"></td>
      </tr>
      </table>
      
      <tbl:toolbar subclass="bottomborder">
        <tbl:button 
          title="Select libraries&hellip;" 
          image="<%=home+"/images/new.png"%>" 
          onclick="selectLibraries()" 
          tooltip="Select libraries to include in the pool"
        />
        <tbl:button 
          title="Remove" 
          image="<%=home+"/images/delete.png"%>" 
          onclick="removeSelected()" 
          tooltip="Remove the selected libraries from the pool"
        />
        <tbl:button 
          title="Comments&hellip;" 
          image="<%=home+"/images/comment.png"%>" 
          onclick="commentChecked()" 
          tooltip="Add a comment to the selected libraries" 
        />
      </tbl:toolbar>
      
      <div id="pool-table" class="bottomborder">
      <table style="width: 100%;">
      <tr>
        <th id="pool-name" style="width: 25%;"></th>
        <td style="border-left: 1px solid #A0A0A0;" rowspan="2"><textarea name="poolComments" style="width: 95%; height: 3.5em;"></textarea></td>
      </tr>
      <tr>
        <td style="width: 25%;" id="pool-summary">0 libs • 0.00nM • 0.0µl</td>
      </tr>
      </table>
      </div>
      
      <div id="lib-table" style="display: none;">
      <table class="bottomborder">
      <thead>
        <tr>
          <th class="check"></th>
          <th class="name"></th>
          <th class="barcode"></th>
          <th class="plate"></th>
          <th class="molarity">Remain</th>
          <th class="molarity">DNA</th>
          <th class="volume">Volume</th>
          <th class="eb">EB</th>
          <th class="remarks"></th>
        </tr>
        <tr>
          <th class="check"><base:icon image="check_uncheck.png" tooltip="Check/uncheck all" onclick="checkAll()" /></th>
          <th class="name">Library</th>
          <th class="barcode">Barcode</th>
          <th class="plate">Work plate</th>
          <th class="molarity">(µl)</th>
          <th class="molarity">(nM)</th>
          <th class="volume">(µl)</th>
          <th class="eb">(µl)</th>
          <th class="remarks">Remarks</th>
        </tr>
      </thead>
      <tbody id="lib-table-rows"></tbody>
      <tbody style="border-bottom: 0;">
        <tr id="lib-table-pool-summary">
          <td colspan="7" style="text-align: right; border-left: 0;">EB volume to add</td>
          <td class="eb" id="pool.eb"></td>
          <td class="remarks" id="pool.remarks"></td>
        </tr>
      </tbody>
      </table>
      <div style="margin: 1em; font-style: italic;">
      * Low quantity = The remaining quantity of this library too low to mix to target molarity for the pool.
      </div>
      </div>
      
      <div id="not-selected" class="messagecontainer note">No libraries have been selected</div>
    </td>
  </tr>
  </table>
  </div>
  
  <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 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; margin-bottom: 3em;" class="navigation">
    <tr>
      <td><base:button id="gocancel" title="Cancel" onclick="goRestart(false)" /></td>
      <td><base:button id="gonext" title="Next" image="<%=home+"/images/gonext.png"%>" onclick="goNext(true)" style="display: none;" /></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>
      <td id="gonext.message" class="message"></td>
    </tr>
  </table>
  
  
  </form>
  </div>
  
</base:body>
</base:page>
<%
}
finally
{
  if (dc != null) dc.close();
}
%>