source: extensions/net.sf.basedb.reggie/trunk/resources/libprep/create_pools.jsp @ 2454

<%@ 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">
  <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" src="pools.js" type="text/javascript" charset="UTF-8"></script>
  <script language="JavaScript" src="plate.js" type="text/javascript" charset="UTF-8"></script>

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

var targetVolumePerLibIsValid = [];
var POOL_DATA = [];

// 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 MAX_TARGET_VOLUME = 10;
var MIN_TARGET_VOLUME = 2;

var LIBRARY_FRAC_ADPT_LIMIT = 10; // percent

function init()
{
  var frm = document.forms['reggie'];
  var bioplates = getLibraryBioPlates();
  
  var plates = frm.bioplate;
  if (bioplates != null && bioplates.length > 0)
  {
    for (var i=0; i < bioplates.length; i++)
    {
      var bioplate = bioplates[i];
      var option = new Option(bioplate.name, bioplate.id);
      option.bioplate = bioplate;
      plates.options[plates.length] = option;
    }
    bioplateIsValid = true;
    setInputStatus('bioplate', '', 'valid');
  }
  else
  {
    var msg = 'No Library bioplates available for processing.';
    setFatalError(msg);
    return;
  }
}


function getLibraryBioPlates()
{
  var frm = document.forms['reggie']; 
  
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading Library bioplates...');
    var url = '../Pool.servlet?ID=<%=ID%>&cmd=GetLibraryPlatesForPooling';
    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.bioplates;
}

function createManualPool()
{
  location.replace('create_manual_pool.jsp?ID=<%=ID%>');
}

function goNext(manual)
{
  setInnerHTML('gonext.message', '');
  if (currentStep == 1)
  {   
    gotoStep2();
  }
  setCurrentStep(currentStep);
}

function gotoStep2()
{
  var frm = document.forms['reggie'];
  frm.bioplate.disabled = true;
  Main.addClass(document.getElementById('step.1.section'), 'disabled');
  
  loadPoolNames();
  loadLibraryInformation();

  currentStep = 2;
  Main.hide('step.1.section');
  Main.show('step.2.section');
  Main.hide('gonext');
  Main.show('gocancel');
  Main.show('gocreate');
}

function goCreate()
{
  
  var submitInfo = {};
  submitInfo.pools = [];
  submitInfo.flagged = [];
  var frm = document.forms['reggie'];
  var libPlate = frm.bioplate[frm.bioplate.selectedIndex].bioplate;

  var numPools = Plate.getPools();
  for (var poolNo = 0; poolNo < numPools; poolNo++)
  {
    if (!targetVolumePerLibIsValid[poolNo]) return;

    var wells = Plate.getPool(poolNo);
    
    var poolInfo = {};
    poolInfo.name = POOL_NAMES[poolNo];
    poolInfo.targetPoolMolarity = TARGET_MOLARITY_IN_POOL;
    poolInfo.targetVolumeInPoolPerLib = parseFloat(frm['target_volume.'+poolNo].value);
    var mixingStrategy = Forms.getCheckedRadio(frm['mixing_strategy.'+poolNo]).value;
    poolInfo.mixingStrategy = mixingStrategy;
    poolInfo.comment = frm['comment.'+poolNo].value;
    poolInfo.ebVolumeExtra = POOL_DATA[poolNo].ebVolumeExtra;
    poolInfo.libPlate = libPlate.id;
    poolInfo.libs = [];
    poolInfo.excluded = [];
    
    for (var wellNo = 0; wellNo < wells.length; wellNo++)
    {
      var lib = wells[wellNo].extract;
      if (lib)
      {
        // We send library id, name and mixin volumes
        var tmp = {};
        tmp.id = lib.id;
        tmp.name = lib.name;
        tmp.volume = lib.actualVolume; 
        tmp.eb = lib.actualEb;
        tmp.mixFactor = lib.mixFactor;
        if (lib.mixFactor > 1 && lib.targetVolume && mixingStrategy == 'dynamic') 
        {
          tmp.targetVolume = lib.targetVolume;
        }
        tmp.comment = lib.comment;
        
        if (lib.excludeFromPool)
        {
          poolInfo.excluded[poolInfo.excluded.length] = tmp;
        }
        else
        {
          poolInfo.libs[poolInfo.libs.length] = tmp;
        }
        
        if (lib.flag)
        {
          tmp.flag = lib.flag;
          submitInfo.flagged[submitInfo.flagged.length] = tmp;
        }
      }
    }
    
    submitInfo.pools[submitInfo.pools.length] = poolInfo;
  }
  
  Main.addClass(document.getElementById('step.2.section'), 'disabled');
  Main.hide('gocancel');
  Main.hide('gocreate');

  if (debug) Main.debug(JSON.stringify(submitInfo));
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Creating pools...');
    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'));

}

function loadLibraryInformation()
{
  var frm = document.forms['reggie'];
  var libPlate = frm.bioplate[frm.bioplate.selectedIndex].bioplate;

  // Load Libraries and related info from the selected bioplate
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading information about libraries...');
    var url = '../Pool.servlet?ID=<%=ID%>&cmd=GetLibraryInfoForPlate&bioplate='+libPlate.id;    
    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;
  }

  
  var schema = PoolSchema.getById(libPlate.poolSchema);
  var barcodeVariant = PoolSchema.getBarcodeVariantByName(schema, libPlate.barcodeVariant);
  Plate.setPoolSchema(schema);
  WellPainter.barcodeVariant = barcodeVariant;
  Plate.init(8, 12, schema, WellPainter);

  var poolInfo = response.poolInfo;
  TARGET_MOLARITY_IN_POOL = poolInfo.targetMolarity;
  LIMIT_FOR_EXTRA_LARGE_MIX = poolInfo.limitForExtraLargeMix;
  
  setInnerHTML('target_molarity', Numbers.formatNumber(TARGET_MOLARITY_IN_POOL, 1, ' nM'));

  var libs = response.libraries;
  var molarityLimit = TARGET_MOLARITY_IN_POOL * LIMIT_FOR_AUTO_EXCLUDE;
  for (var i = 0; i < libs.length; i++)
  {
    var lib = libs[i];
    var well = lib.bioWell;
    lib.excludeFromPool = false;
    
    if (lib.molarity != null && lib.molarity < molarityLimit)
    {
      lib.excludeFromPool = true;
      lib.flag = 'ExcludedFromPool';
      lib.comment = 'Not enough DNA';
    }

    Plate.getWell(well.row, well.column).setExtract(lib);
  }

  PoolSchema.buildPoolTableRow(schema, 12);
  initPoolData(poolInfo.targetVolumePerLib);
  updatePoolData();
}

function loadPoolNames()
{
  var frm = document.forms['reggie'];
  var libPlate = frm.bioplate[frm.bioplate.selectedIndex].bioplate;

  var schema = PoolSchema.getById(libPlate.poolSchema);

  // Load Libraries and related info from the selected bioplate
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading Library bioplate information...');
    var url = '../Pool.servlet?ID=<%=ID%>&cmd=GetNextAutoGeneratedPoolNames&numNames='+schema.numPools;   
    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;
  }
  
  var list = response.names;
  for (var i = 0; i < list.length; i++)
  {
    POOL_NAMES[i] = list[i];
  }

}

function initPoolData(targetVolumePerLib)
{
  for (var poolNo = 0; poolNo < Plate.getPools(); poolNo++)
  {
    var poolDiv = document.getElementById('pool.'+poolNo);
    var html = '<div class="pool-name">'+POOL_NAMES[poolNo]+'</div>';
    html += '<div class="pool-data">';
    html += '<table>';
    html += '<tr><td class="prompt">Volume/lib</td>';
    html += '<td><input type="text" style="width: 4em;" name="target_volume.'+poolNo+'" value="'+targetVolumePerLib+'"';
    html += ' onblur="targetVolumeOnBlur(event)" onkeypress="doOnEnter(event, targetVolumeOnBlur); return Numbers.numberOnly(event)">';
    html += 'µl ('+MIN_TARGET_VOLUME+'--'+MAX_TARGET_VOLUME+')</td>';
    html += '<td id="target_volume.'+poolNo+'.status"></td></tr>';
    html += '<tr><td class="prompt">Mixing strategy</td>';
    html += '<td colspan="2">';
    html += '<label><input type="radio" name="mixing_strategy.'+poolNo+'" value="dynamic" checked';
    html += ' onclick="mixingStrategyOnChange(event)">Dynamic</label> ';
    html += '<label><input type="radio" name="mixing_strategy.'+poolNo+'" value="fixed"';
    html += ' onclick="mixingStrategyOnChange(event)">Fixed</label>';
    html += '</td></tr>';
    html += '</table>';
    
    html += '<textarea name="comment.'+poolNo+'"></textarea>';
    html += '</div>';
    html += '<div class="pool-summary" id="pool-summary.'+poolNo+'"></div>';
    poolDiv.innerHTML = html;
    setTargetVolumePerLib(poolNo, targetVolumePerLib);
  }
  
}


function setTargetVolumePerLib(poolNo, targetVolumePerLib)
{
  var frm = document.forms['reggie'];
  if (targetVolumePerLib)
  {
    frm['target_volume.'+poolNo].value = targetVolumePerLib;
  }
  else
  {
    targetVolumePerLib = parseInt(frm['target_volume.'+poolNo].value);
  }
  
  targetVolumePerLibIsValid[poolNo] = false;
  if (targetVolumePerLib < MIN_TARGET_VOLUME || targetVolumePerLib > MAX_TARGET_VOLUME)
  {
    setInputStatus('target_volume.'+poolNo, 'Must be between '+MIN_TARGET_VOLUME+' and '+MAX_TARGET_VOLUME+'µl', 'invalid');
    return;
  }
  setInputStatus('target_volume.'+poolNo, '', 'valid');
  targetVolumePerLibIsValid[poolNo] = true;

  // Pre-process the Library items
  var mixingStrategy = Forms.getCheckedRadio(frm['mixing_strategy.'+poolNo]).value;
  var wells = Plate.getPool(poolNo);
  for (var i = 0; i < wells.length; i++)
  {
    var lib = wells[i].extract;
    if (lib)
    {
      if (lib.remainingQuantity == null)
      {
        lib.excludeFromPool = true;
      }
      else
      {
        PoolMix.calculateLibVolume(lib, TARGET_MOLARITY_IN_POOL, targetVolumePerLib, mixingStrategy);
        PoolMix.calculateEbVolume(lib, TARGET_MOLARITY_IN_POOL, targetVolumePerLib, mixingStrategy);
      }
    }
  }
  
}

function calculateRemarks(lib, schema, barcodeVariant)
{
  var well = lib.bioWell;
  var remarks = [];

  // Check if default barcode has been modified
  var indexSet = barcodeVariant.indexSets[well.column];
  if (indexSet)
  {
    var defaultBarcode = indexSet.barcodes[well.row];
    if (defaultBarcode && lib.barcode.name != defaultBarcode)
    {
      remarks[remarks.length] = 'Modified barcode';
      lib.barcode.modified = true;
    }
  }
  
  if (lib.molarity != null)
  {
    if (lib.volume != lib.actualVolume)
    {
      if (lib.volume > lib.remainingVolume)
      {
        remarks[remarks.length] = 'Low quantity';
      }
      else 
      {
        remarks[remarks.length] = 'Low molarity';
      }
    }

    if (lib.speedVacConc != null)
    {
      remarks[remarks.length] = 'SpeedVac';
    }
    
    if (lib.mixFactor > 1)
    {
      // Larger mix than default
      remarks[remarks.length] = 'Use ' + Numbers.formatNumber(lib.actualVolume+lib.actualEb, 1, 'µl') + ' in pool';
    }
    
  }
  
  if (!lib.libraryFracAdpt)
  {
    remarks[remarks.length] = 'Unknown adapter fraction';
  }
  else if (lib.libraryFracAdpt > LIBRARY_FRAC_ADPT_LIMIT)
  {
    remarks[remarks.length] = 'High adapter fraction';
  }
  
  lib.stratagene = lib.name.indexOf(GENERIC_STRATAGENE_NAME) == 0;
  lib.external = lib.name.indexOf(EXTERNAL_RNA_NAME) == 0;
  lib.remarks = remarks;
}


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

  var libPlate = frm.bioplate[frm.bioplate.selectedIndex].bioplate;
  var schema = PoolSchema.getById(libPlate.poolSchema);
  var barcodeVariant = PoolSchema.getBarcodeVariantByName(schema, libPlate.barcodeVariant);

  for (var poolNo = 0; poolNo < Plate.getPools(); poolNo++)
  {
    var numSeparateMix = 0;
    var numLowQuantity = 0;
    var numExcluded = 0;
    
    // Get all libs into an array
    var libs = [];
    var wells = Plate.getPool(poolNo);
    for (var wellNo = 0; wellNo < wells.length; wellNo++)
    {
      var well = wells[wellNo];
      var lib = well.extract;
      if (lib)
      {
        if (lib.excludeFromPool)
        {
          numExcluded++;
        }
        else
        {
          libs[libs.length] = lib;
        }
      }
    }
    
    // Calculate final pool volumes, molarity, etc.
    var targetVolumePerLib = parseFloat(frm['target_volume.'+poolNo].value);
    var mixingStrategy = Forms.getCheckedRadio(frm['mixing_strategy.'+poolNo]).value;
    var poolInfo = PoolMix.calculateFinalPoolInfo(libs, TARGET_MOLARITY_IN_POOL, targetVolumePerLib, mixingStrategy);
    POOL_DATA[poolNo] = poolInfo;
    
    // Make remarks for each lib
    for (var libNo = 0; libNo < libs.length; libNo++)
    {
      var lib = libs[libNo];
      calculateRemarks(lib, schema, barcodeVariant);
      if (lib.eb != 0 || mixingStrategy == 'fixed') numSeparateMix++;
      if (lib.volume > lib.actualVolume) numLowQuantity++;
    }
    
    Plate.paint(wells);

    var warnMsg = null;
    if (poolInfo.ebVolumeExtra < 0) 
    {
      warnMsg = 'Too many libs with low molarity';
    }
    
    var poolDiv = document.getElementById('pool.'+poolNo);
    var summaryDiv = document.getElementById('pool-summary.'+poolNo);
    var poolData = '';
    poolData += libs.length + ' libs • ';
    poolData += Numbers.formatNumber(poolInfo.molarity, 2, 'nM')+' • ';
    poolData += Numbers.formatNumber(poolInfo.totalVolume, 1, 'µl');
    if (mixingStrategy == 'dynamic')
    {
      poolData += ' • <span class="pool-eb">'+Numbers.formatNumber(poolInfo.ebVolumeExtra, 1, 'µl')+'</span>';
    }
    if (numSeparateMix > 0 || numLowQuantity)
    {
      poolData += '<br>Separate mix: ' + numSeparateMix;
      poolData += ' • Low quantity: ' + numLowQuantity;
      poolData += '';
    }
    
    if (warnMsg)
    {
      Main.addClass(poolDiv, 'warning');
      poolData += '<div class="warning-message">'+warnMsg+'</div>';
    }
    else
    {
      Main.removeClass(poolDiv, 'warning');
    }
    summaryDiv.innerHTML = poolData;
  }
  
}

function targetVolumeOnBlur(event)
{
  var frm = document.forms['reggie'];
  var poolNo = parseInt(event.target.name.substr(-1));
  setTargetVolumePerLib(poolNo);
  updatePoolData();
}

function mixingStrategyOnChange(event)
{
  targetVolumeOnBlur(event);
}

var WellPainter = function()
{
  var painter = {};
  
  painter.getClassNameForWell = function(well, schema)
  {
    var indexSet = painter.barcodeVariant.indexSets[well.column];
    var cls = '';
    var lib = well.extract;
    
    if (lib)
    {
      if (lib.excludeFromPool)
      {
        cls += ' exclude-from-pool';
      }
      else if (indexSet)
      {
        cls += ' ' + (lib && lib.barcode.modified ? 'bg-modified' : indexSet.color);
      }
      if (lib.flag)
      {
        cls += ' flagged';
      }
      if (!lib.flag && lib.actualVolume < lib.volume)
      {
        cls += ' low-volume';
      }
      if (!lib.libraryFracAdpt || lib.libraryFracAdpt > LIBRARY_FRAC_ADPT_LIMIT)
      {
        cls += ' high-adapter';
      }

    }
    else if (indexSet)
    {
      cls += indexSet.color;
    }
    return cls;
  }
  
  painter.getWellText = function(well, schema)
  {
    var text = '';
    var lib = well.extract;
    if (lib)
    {
      var name = lib.name;
      var i = name.indexOf('.m');
      var mixFactor = lib.mixFactor;
      var displayName = name.substring(0, i)+'.<br>&nbsp;'+name.substring(i);
      text += '<div class="lib">'+displayName+'</div>';
//      text += '<div class="barcode">'+lib.barcode.name+'</div>';
      text += '<div>';
//      text += '<span class="barcode">'+lib.barcode.name+'</span>';
      text += '<span class="adapter">'+(lib.libraryFracAdpt ? lib.libraryFracAdpt + '%' : '—') + '</span>';
      if (lib.molarity != null)
      {
        text += '<span class="molarity">'+Numbers.formatNumber(lib.molarity, 2, 'nM')+'</span>';
      }
      text += '</div>';
      if (!lib.excludeFromPool)
      {
        mark = (lib.volume > lib.actualVolume) ? '*' : '';
        text += '<div>';
        text += '<span class="volume">'+(isFinite(lib.volume) ? Numbers.formatNumber(lib.volume*mixFactor, 1, 'µl'+mark) : '∞')+'</span>';
        if (lib.mixingStrategy == 'fixed' || lib.mixFactor > 1)
        {
          text += '<span class="eb">'+(isFinite(lib.eb) ? Numbers.formatNumber(lib.eb*mixFactor, 1, 'µl') : '-∞')+'</span>';
        }
        else
        {
          text += '<span class="eb">—</span>';
        }
        text += '</div>';
      }
      if (lib.remarks) text += '<div class="remarks">'+ lib.remarks.join('; ') + '</div>';
      if (lib.comment)
      {
        text += '<div class="remarks">'+ lib.comment + '</div>';
      }
    }
    return text;
  }

  return painter;
}();

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

var lastComment = '';
function excludeSelected()
{
  var wells = Plate.getSelected();
  
  if (wells.length == 0)
  {
    alert('No wells have been selected');
    return;
  }

  // See if there is an existing comment
  var comment;
  for (var i = 0; i < wells.length; i++)
  {
    var lib = wells[i].extract;
    if (lib && lib.comment) 
    {
      comment = lib.comment;
    }
  }

  comment = prompt('Comment on reason for exclusion', comment || lastComment);
  if (comment == null) return;
  lastComment = comment;
  
  if (comment == '') comment = null;
  
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    var lib = well.extract;
    if (lib)
    {
      lib.excludeFromPool = true;
      if (!lib.stratagene && !lib.external)
      {
        lib.flag = 'ExcludedFromPool';
        lib.comment = comment;
      }
    }
    well.selected = false;
  }
  
  updatePoolData();
}

function includeSelected()
{
  var wells = Plate.getSelected();
  
  if (wells.length == 0)
  {
    alert('No wells have been selected');
    return;
  }

  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    var lib = well.extract;
    if (lib)
    {
      lib.excludeFromPool = false;
      lib.flag = null;
      lib.oldComment = lib.comment;
      lib.comment = null;
    }
    well.selected = false;
  }
  
  updatePoolData();
}

//Flag the selected RNA
function toggleFlag()
{
  var wells = Plate.getSelected();
  
  if (wells.length == 0)
  {
    alert('No wells have been selected');
    return;
  }

  var flag = null;
  var firstLib = true;
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    var lib = well.extract;
    if (lib)
    {
      if (firstLib && !lib.excludeFromPool)
      {
        flag = lib.flag ? null : 'ManualFlag';
        firstLib = false;
      }
      lib.flag = lib.excludeFromPool ? 'ExcludedFromPool' : flag;
    }
    //well.selected = false;
  }
  
  updatePoolData();
}

//Set a comment on the selected wells
function commentSelected(comment)
{
  var wells = Plate.getSelected();
  
  if (comment == undefined)
  {
    if (wells.length == 0)
    {
      alert('No wells have been selected');
      return;
    }
    
    var count = 0;
    for (var i = 0; i < wells.length; i++)
    {
      var well = wells[i];
      if (well.extract) 
      {
        if (well.extract.comment) comment = well.extract.comment;
        count++;
      }
    }
    
    if (count == 0)
    {
      alert('Only empty wells have been selected');
      return;
    }
    
    comment = prompt('Comment', comment || lastComment);
    if (comment == null) return;
  }
  
  lastComment = comment;
  
  if (comment == '') comment = null;
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    if (well.extract) 
    {
      well.extract.comment = comment;
    }
    well.selected = false;
  }
  
  updatePoolData();
}

//Set target volume on the selected wells
var lastTargetVolume = null;
function setTargetVolume(targetVolume)
{
  var wells = Plate.getSelected();
  
  if (targetVolume == undefined)
  {
    if (wells.length == 0)
    {
      alert('No wells have been selected');
      return;
    }
    
    var count = 0;
    for (var i = 0; i < wells.length; i++)
    {
      var well = wells[i];
      if (well.extract && well.extract.mixFactor > 1) 
      {
        if (well.extract.targetVolume) targetVolume = well.extract.targetVolume;
        count++;
      }
    }
    
    if (count == 0)
    {
      alert('Only empty or dynamic-mixed wells have been selected');
      return;
    }
    
    targetVolume = parseFloat(prompt('Volume to use in pool ('+LIMIT_FOR_EXTRA_LARGE_MIX+'--'+MAX_TARGET_VOLUME+' µl)', targetVolume || lastTargetVolume));
    if (isNaN(targetVolume))
    {
      targetVolume = null;
    }
    else if (targetVolume > MAX_TARGET_VOLUME)
    {
      targetVolume = MAX_TARGET_VOLUME;
    }
    else if (targetVolume < LIMIT_FOR_EXTRA_LARGE_MIX)
    {
      targetVolume = LIMIT_FOR_EXTRA_LARGE_MIX
    }
  }
  
  lastTargetVolume = targetVolume;
  
  if (targetVolume == '') targetVolume = null;
  var frm = document.forms['reggie'];
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    if (well.extract) 
    {
      var lib = well.extract;
      lib.targetVolume = targetVolume;
      var poolNo = Plate.poolSchema.getPoolNumForColumn(lib.bioWell.column);
      
      var targetVolumePerLib = parseFloat(frm['target_volume.'+poolNo].value);
      var mixingStrategy = Forms.getCheckedRadio(frm['mixing_strategy.'+poolNo]).value;
      PoolMix.calculateEbVolume(lib, TARGET_MOLARITY_IN_POOL, targetVolumePerLib, mixingStrategy);
    }
    well.selected = false;
  }
  
  updatePoolData();
}


</script>
<style>
.lib
{
  font-weight: bold;
  margin-bottom: 0.25em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barcode
{}
.adapter
{}
.molarity
{
  float: right;
}

.volume
{
  color: #C80000;
}
.eb
{
  color: #0000C8;
  float: right;
}
.pool-eb
{
  color: #0000C8;
}
.remarks
{
  color: #C80000;
  font-style: italic;
}

#pool-row th
{
  border-top: 0;
  border-bottom: 1px solid #808080;
  vertical-align: top;
  padding: 0;
}

.pool.warning
{
  background-image: url('../images/warning.png');
  background-position: 2% 98%;
  background-repeat: no-repeat;
}

.pool-name
{
  padding: 2px;
}

.pool-data
{
  font-weight: normal;
  padding: 2px;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #808080;
  background-color: #FFFFFF;
}

.pool-data td
{
  text-align: left;
  white-space: nowrap;
}

.pool-data td.prompt
{
  width: 30%;
}

.pool-data textarea
{
  width: 95%;
  height: 3.5em;
}


.pool-summary
{
  font-weight: normal;
  padding: 2px;
  font-style: italic;
}

.pool-summary .warning-message
{
  color: #C80000;
}

.well
{
  height: 60px;
  max-height: 60px;
  min-height: 60px;
  width: 100px;
  max-width: 100px;
  min-width: 100px;
}

.well.exclude-from-pool
{
  background-color: #FFFFFF !important;
}

.well.exclude-from-pool.selected
{
  background-color: #D8D8D8 !important;
}

.well.exclude-from-pool *
{
  color: #999999 !important;
}
.well.flagged
{
  background-image: url('../images/flag.png');
  background-position: 98% 5%;
  background-repeat: no-repeat;
}

.well.low-volume, .well.high-adapter
{
  background-image: url('../images/warning.png') !important;
  background-position: 98% 5%;
  background-repeat: no-repeat;
}
</style>
</base:head>
<base:body onload="init()">

  <p:path><p:pathelement 
    title="Reggie" href="<%="../index.jsp?ID="+ID%>" 
    /><p:pathelement title="Create pooled libraries" 
    /></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>
    <%
  }
  %>

  <div class="allsteps">
    <div class="step current" id="step.1">1</div>
    ›
    <div class="step future" id="step.2">2</div>
  </div>

  <form name="reggie" onsubmit="return false;">
  
  <div id="step.1.section">
  <table class="stepform">
  <tr>
    <td rowspan="3" class="stepno">1</td>
    <td class="steptitle">Select source for pool</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table>
      <tr valign="top">
        <td class="prompt">Library bioplate</td>
        <td class="input"><select style="width:90%" 
            name="bioplate" id="bioplate"></select>
        </td>
        <td class="status" id="bioplate.status"></td>
        <td class="help"><span id="bioplate.message" class="message" style="display: none;"></span>
          Select an existing Library bioplate. The list contain all Library bioplates that
          contain libraries with no child items.
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt"></td>
        <td class="input"> - or -</td>
        <td class="status"></td>
        <td class="help"></td>
      </tr>
      <tr valign="top">
        <td class="prompt"></td>
        <td class="input">
          <table><tr><td>
            <base:button title="Create manual pool" onclick="createManualPool()" image="<%=home+"/images/gonext.png"%>" />
          </td></tr></table>
        
        </td>
        <td class="status"></td>
        <td class="help"></td>
      </tr>
      </table>
    </td>
  </tr>
  </table>
  </div>
  
  <div id="step.2.section" style="display: none;">
  <table class="stepform" style="width: auto;">
  <tr>
    <td rowspan="2" class="stepno">2</td>
    <td class="steptitle">Calculate pool mixing volumes</td>
  </tr>
  <tr>
    <td class="stepfields">

      <table class="bottomborder" style="width: 100%; display: none;">
      <tr valign="top">
        <td class="prompt">Pool layout</td>
        <td class="input">
          <span id="pool_schema"></span>; <span id="barcode_variant"></span>
        </td>
        <td class="status"></td>
        <td class="help" rowspan="2">
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt">Target molarity</td>
        <td class="input">
          <span id="target_molarity2"></span>
        </td>
        <td class="status"></td>
      </tr>
      </table>
      <tbl:toolbar subclass="bottomborder">
        <tbl:button 
          title="Exclude from pool&hellip;" 
          image="<%=home+"/images/delete.png"%>" 
          onclick="excludeSelected()" 
          tooltip="Exclude the selected libraries from the pool"
        />
        <tbl:button 
          title="Include in pool" 
          image="<%=home+"/images/new.png"%>" 
          onclick="includeSelected()" 
          tooltip="Include the selected libraries in the pool"
        />
        <tbl:button 
          title="Separate mix volume&hellip;" 
          image="<%=home+"/images/specimen.png"%>" 
          onclick="setTargetVolume()" 
          tooltip="Set volume to use in the pool for separately mixed libraries (dynamic mixing only)" 
        />
        <tbl:button 
          title="Toggle flag" 
          image="<%=home+"/images/flag.png"%>" 
          onclick="toggleFlag()" 
          tooltip="Flag the parent RNA for the selected libraries"
        />
        <tbl:button 
          title="Comments&hellip;" 
          image="<%=home+"/images/comment.png"%>" 
          onclick="commentSelected()" 
          tooltip="Add a comment to the selected libraries" 
        />
      </tbl:toolbar>
        
        <div class="messagecontainer note" style="margin: 1em auto 1em auto; width: 75%; ">
          Select a target volume when mixing the libraries to a pool with <span id="target_molarity"></span> 
          concentration.
          Use the <b>Dynamic strategy</b> to prioritize final pool molarity by mixing 
          different volumes for each library. Use the <b>Fixed strategy</b> to mix all 
          libraries to the given volume. For each pool a summary is calculated: 
          <i>Number of libraries</i> • <i>Final molarity</i> • <i>Total volume</i> • <i>EB volume (dynamic mixing only)</i>
        </div>
      
      <table class="plate" style="margin: 1em 1em 1em 1em;" id="plate">
      <tr id="pool-row">
        <th colspan="13">&nbsp;</th>
      </tr>
      <%
      int columns = 12;
      int rows = 8;
      WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
      WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
      %>
      <tr class="header">
        <th></th>
        <%
        for (int c = 0; c < columns; ++c)
        {
          %>
          <th id="col.<%=c%>"><%=colF.format(c)%></th>
          <%
        }
        %>
      </tr>
      <tbody>
      <%
      for (int r = 0; r < rows; ++r)
      {
        String row = rowF.format(r);
        %>
        <tr class="row-<%=r%>">
          <th id="row.<%=r%>" class="rowheader"><%=row%></th>
          <%
          for (int c = 0; c < columns; ++c)
          {
            %>
            <td class="well col-<%=c%>" id="well.<%=r%>.<%=c%>"
              onclick="toggleWell(<%=r%>,<%=c%>)"
              title="Select/deselect this well"
              ></td>
            <%
          }
          %>
        </tr>
        <%
      }
      %>
      </tbody>
      </table>
      <div style="margin: 1em;">
      Low molarity = The concentration of this library too low to mix to target molarity for the pool.<br>
      </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)"/></td>
      <td><base:button id="gocreate" title="Create" image="<%=home+"/images/gonext.png"%>" onclick="goCreate()" style="display: none;"/></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();
}
%>