source: extensions/net.sf.basedb.reggie/trunk/resources/libprep/create_flowcells.jsp @ 2509

<%@ 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.clients.web.Base" 
  import="net.sf.basedb.clients.web.util.HTML"  
  import="net.sf.basedb.clients.web.extensions.ExtensionsControl"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%@ taglib prefix="p" uri="/WEB-INF/path.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">
  <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 = 0;
var currentStep = 1;

var PRESET_HISEQ = 'HiSeq';
var PRESET_NEXTSEQ = 'NextSeq';

var DEFAULT_READ_HISEQ = [55, 7, 54];
var DEFAULT_READ_NEXTSEQ = [76, 6, 76];
var VOLUME_TO_USE_FROM_POOL = 10.0; // µl

var poolsAreValid = false;
var flowCellsAreValid = false;
var readIsValid = [];

var flowCells = [];
var selectedPools = [];

function init()
{
  var frm = document.forms['reggie'];
  var pools = getUnusedPools();
  
  var poolsList = frm.pools;
  if (pools != null && pools.length > 0)
  {
    for (var poolNo=0; poolNo < pools.length; poolNo++)
    {
      var pool = pools[poolNo];
      var name = pool.name + ' - ';
      
      var numPlates = pool.libPlates.length;
      var title = '';

      if (numPlates <= 2)
      {
        for (var plateNo=0; plateNo < numPlates; plateNo++)
        {
          var libPlate = pool.libPlates[plateNo];
          if (plateNo > 0) name += ', ';
          name += libPlate.name;
        }
      }
      else
      {
        name += pool.libPlates[0].name + ' + ' + (numPlates-1) + ' more...';
        for (var plateNo=0; plateNo < numPlates; plateNo++)
        {
          var libPlate = pool.libPlates[plateNo];
          if (plateNo > 0) title += ', ';
          title += libPlate.name;
        }
      }
      
      var option = new Option(name, pool.id, poolNo < 4);
      option.title = title;
      option.pool = pool;
      
      poolsList[poolsList.length] = option;
    }
  }
  
  Main.show('step.1.section');
  Main.show('gocreate');
  Main.show('navigation');
  poolsOnChange();
  presetOnChange()
}

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

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

  // Load Libraries and related info from the selected bioplate
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading flow cell information...');
    var url = '../FlowCell.servlet?ID=<%=ID%>&cmd=GetNextAutoGeneratedFlowCellNames&numNames='+numNames;    
    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 names = response.names;
  for (var i = 0; i < names.length; i++)
  {
    var fc = {};
    fc.name = names[i];
    flowCells[i] = fc;
    setInnerHTML('fc.'+i, fc.name);
    setInnerHTML('comments.'+i+'.name', fc.name);
  }
}

function poolsOnChange()
{
  poolsAreValid = false;
  
  var frm = document.forms['reggie'];
  var preset = frm.preset.value;
  var poolsList = frm.pools;
  
  var numSelected = 0;
  for (var i = 0; i < poolsList.length; i++)
  {
    if (poolsList[i].selected) numSelected++;
  }

  setInnerHTML('numSelected', numSelected + ' selected');
  
  if (numSelected == 0)
  {
    setInputStatus('pools', 'Must select at least 1 pool.', 'invalid');
    return;
  }
  if (preset == PRESET_NEXTSEQ && numSelected > 1)
  {
    setInputStatus('pools', 'Can only use 1 pool with the NextSeq.', 'invalid');
    return;
  }
  
  poolsAreValid = true;
  setInputStatus('pools', '', 'valid');
}


var subtypePooledLibrary = null;
function selectPools()
{
  var frm = document.forms['reggie'];
  if (frm.pools.disabled) return;
  
  if (subtypePooledLibrary == null)
  {
    var request = Ajax.getXmlHttpRequest();
    var url = '../Subtype.servlet?ID=<%=ID%>&cmd=GetSubtypeInfo&name=POOLED_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;
    }
    subtypePooledLibrary = response.subtype;
  }
  
  var url = getRoot() + 'biomaterials/extracts/index.jsp?ID=<%=ID%>&cmd=UpdateContext&mode=selectmultiple&callback=setPoolCallback';
  url += '&tmpfilter:INT:itemSubtype='+subtypePooledLibrary.id;
  url += '&tmpfilter:DATE:creationEvent.eventDate='+encodeURIComponent('<>');
  url += '&resetTemporary=1';
  Main.openPopup(url, 'SelectPooledLibraries', 1050, 700);
}

function setPoolCallback(id, name)
{
  var frm = document.forms['reggie'];
  var poolsList = frm.pools;
  for (var i = 0; i < poolsList.length; i++)
  {
    if (poolsList[i].value == id)
    {
      poolsList[i].selected = true;
      poolsOnChange();
      return;
    }
  }

  var option = new Option(name, id, true, true);
  option.pool = {'id': parseInt(id), 'name': name };
  poolsList[poolsList.length] = option;
  poolsOnChange();
}


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

function gotoStep2()
{
  if (!poolsAreValid) return;
  
  var frm = document.forms['reggie'];
  frm.preset.disabled = true;
  frm.pools.disabled = true;
  frm.num_flowcells[0].disabled = true;
  frm.num_flowcells[1].disabled = true;
  frm.num_lanes[0].disabled = true;
  frm.num_lanes[1].disabled = true;
  frm.num_lanes[2].disabled = true;
  
  var numFlowCells = Forms.getCheckedRadio(frm.num_flowcells).value;
  loadFlowCellNames(numFlowCells);
  var plate = document.getElementById('plate');
  if (numFlowCells == 1)
  {
    Main.addClass(plate, 'hide-fc-1');
    Main.hide('comments.1');
  }
  
  var numLanes = Forms.getCheckedRadio(frm.num_lanes).value;
  for (var i = numLanes; i < 8; i++)
  {
    Main.hide('lane.'+i);
  }

  var selectPoolHtml = '';  
  for (var i = 0; i < frm.pools.length; i++)
  {
    if (frm.pools[i].selected)
    {
      var pool = frm.pools[i].pool;
      var index = selectedPools.length;
      selectedPools[index] = pool;

      selectPoolHtml += '<div class="menuitem enabled" id="pool-'+pool.id+'" data-index="'+index+'">';
      selectPoolHtml += pool.name+'</div>';
    }
  }
  // Add separator
  selectPoolHtml += '<div class="menuseparator"></div>';
  // Add option for empty lane
  selectPoolHtml += '<div class="menuitem enabled" id="pool-none">';
  selectPoolHtml += '<i>empty</i>'+'</div>';
  
  setInnerHTML('select-pool-all', selectPoolHtml);

  // Initialize flowCell->lane->pool array
  for (var fcNo = 0; fcNo < numFlowCells; fcNo++)
  {
    var flowCell = flowCells[fcNo];
    flowCell.lanes = [];
    for (var laneNo = 0; laneNo < numLanes; laneNo++)
    {
      flowCell.lanes[laneNo] = {};
    }
  }
  
  // Case 1: 4 pools on 2+2 lanes
  if (numFlowCells == 2 && numLanes == 8 && selectedPools.length == 4)
  {
    // Assign all pools to 2 lanes on each flow cell
    for (var poolNo = 0; poolNo < 4; poolNo++)
    {
      var pool = selectedPools[poolNo];
      flowCells[0].lanes[poolNo] = {'pool': pool, 'defaultPool': pool};
      flowCells[0].lanes[poolNo+4] = {'pool': pool, 'defaultPool': pool};
      flowCells[1].lanes[3-poolNo] = {'pool': pool, 'defaultPool': pool};
      flowCells[1].lanes[7-poolNo] = {'pool': pool, 'defaultPool': pool};
    }
  }
  
  // Case 2: A single pool on all lanes
  if (selectedPools.length == 1)
  {
    var pool = selectedPools[0];
    for (var fcNo = 0; fcNo < numFlowCells; fcNo++)
    {
      for (var laneNo = 0; laneNo < numLanes; laneNo++)
      {
        flowCells[fcNo].lanes[laneNo] = {'pool': pool, 'defaultPool': pool};
      }
    }
  }
  
  checkFlowCells();
  
  currentStep = 2;
  Main.show('step.2.section');
  Main.addClass(document.getElementById('step.1.section'), 'disabled');
  Main.hide('gonext');
  Main.show('gocancel');
  Main.show('goregister');
  
  readOnBlur('read1');
  readOnBlur('indexRead');
  readOnBlur('read2');
  frm.read1.focus();

}

function checkFlowCells()
{
  setInputStatus('flowCells', '', '');
  flowCellsAreValid = false;
  
  var frm = document.forms['reggie'];
  var numFlowCells = Forms.getCheckedRadio(frm.num_flowcells).value;
  var numLanes = Forms.getCheckedRadio(frm.num_lanes).value;
  var numEmptyLanes = 0;
  var missingValues = false;
  for (var fcNo = 0; fcNo < flowCells.length; fcNo++)
  {
    for (var laneNo = 0; laneNo < flowCells[fcNo].lanes.length; laneNo++)
    {
      var lane = flowCells[fcNo].lanes[laneNo];
      var pool = lane.pool;
      
      var name = pool ? pool.name : '';
      if (lane.defaultPool && pool != lane.defaultPool)
      {
        name += ' *';
      }
      
      setInnerHTML('lane.'+laneNo+'.'+fcNo, name);
      
      if (!pool)
      {
        missingValues = true;
        numEmptyLanes++;
      }
    }
  }

  if (numEmptyLanes >= numFlowCells*numLanes)
  {
    setInputStatus('flowCells', 'All lanes empty', 'invalid');
  }
  else if (missingValues)
  {
    setInputStatus('flowCells', 'Missing', 'warning');
    flowCellsAreValid = true;
  }
  else
  {
    setInputStatus('flowCells', '', 'valid');
    flowCellsAreValid = true;
  }
}

function readOnBlur(name, defaultIndex)
{
  var frm = document.forms['reggie'];
  setInputStatus(name, '', '');

  var defaultArray = frm.preset.value == PRESET_NEXTSEQ ? DEFAULT_READ_NEXTSEQ : DEFAULT_READ_HISEQ;
  var defaultValue = frm.preset.value ? defaultArray[defaultIndex] : 0;
  
  var value = frm[name].value;
  if (value == '')
  {
    readIsValid[name] = false;
    setInputStatus(name, 'Missing', 'invalid');
    return;
  }
  
  if (!Numbers.isInteger(value))
  {
    readIsValid[name] = false;
    setInputStatus(name, 'Not a number', 'invalid');
    return;
  }
  
  readIsValid[name] = true;
  if (defaultValue && parseInt(value) != defaultValue)
  {
    setInputStatus(name, 'Default: ' + defaultValue, 'warning');
  }
  else
  {
    setInputStatus(name, '', 'valid');
  }
}

function step2IsValid()
{
  if (!flowCellsAreValid) return false;
    
  if (readIsValid['read1'] != true) return false;
  if (readIsValid['indexRead'] != true) return false;
  if (readIsValid['read2'] != true) return false;
  
  return true;
}

function goRegister()
{
  if (!step2IsValid()) return;
  
  var frm = document.forms['reggie'];
  frm.read1.disabled = true;
  frm.indexRead.disabled = true;
  frm.read2.disabled = true;
  
  Main.hide('goregister');
  Main.hide('gocancel');
  Main.addClass(document.getElementById('step.2.section'), 'disabled');

  var submitInfo = {};
  submitInfo.flowCellType = frm.preset.value;
  submitInfo.read1 = parseInt(frm.read1.value);
  submitInfo.indexRead = parseInt(frm.indexRead.value);
  submitInfo.read2 = parseInt(frm.read2.value);
  submitInfo.flowCells = flowCells;
  
  // Calculate volume to use for each pool
  for (var fcNo = 0; fcNo < flowCells.length; fcNo++)
  {
    var flowCell = flowCells[fcNo];
    flowCell.comment = frm['comments.'+fcNo].value;
    for (var laneNo = 0; laneNo < flowCell.lanes.length; laneNo++)
    {
      var lane = flowCell.lanes[laneNo];
      lane.defaultPool = null; // Do not need to submit this information
      var pool = lane.pool;
      if (pool != null)
      {
        pool.count = pool.count ? pool.count+1 : 1;
      }
    }
  }
  
  for (var poolNo = 0; poolNo < selectedPools.length; poolNo++)
  {
    var pool = selectedPools[poolNo];
    if (pool != null)
    {
      pool.usedVolume = VOLUME_TO_USE_FROM_POOL / pool.count;
    }
  }
  
  if (debug) Main.debug(JSON.stringify(submitInfo));
  
  var url = '../FlowCell.servlet?ID=<%=ID%>&cmd=CreateFlowCells';
  
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Performing registration...');
    request.open("POST", url, false);
    request.send(JSON.stringify(submitInfo));
  }
  finally
  {
    hideLoadingAnimation();
  }
  
  if (debug) Main.debug(request.responseText);
  var response = JSON.parse(request.responseText);
  
  if (response.messages && response.messages.length > 0)
  {
    var msg = '<ul>';
    for (var i = 0; i < response.messages.length; i++)
    {
      var msgLine = response.messages[i];
      if (msgLine.indexOf('[Warning]') >= 0)
      {
        msg += '<li class="warning">' + msgLine.replace('[Warning]', '');
      }
      else
      {
        msg += '<li>' + msgLine;
      }
    }
    msg += '</ul>';
    setInnerHTML('messages', msg);
    Main.show('messages');
  }
  
  if (response.status != 'ok')
  {
    Main.addClass(document.getElementById('messages'), 'failure');
    setFatalError(response.message);
    return false;
  }

  Main.show('gorestart'); 

  
}

var currentFcNo;
var currentLaneNo;
function selectPool(event, fcNo, laneNo)
{
  var frm = document.forms['reggie'];
  if (frm.preset.value == PRESET_NEXTSEQ) return;
  
  currentFcNo = fcNo;
  currentLaneNo = laneNo;
  
  // Reset 'current' selection
  var menu = document.getElementById('select-pool');
  var selectAll = document.getElementById('select-pool-all');
  for (var i = 0; i <  selectAll.childNodes.length; i++)
  {
    Main.removeClass(selectAll.childNodes[i], 'current');
    Main.removeClass(selectAll.childNodes[i], 'default');
  }
  menu.style.display = 'block';
  
  var currentPool = flowCells[fcNo].lanes[laneNo].pool;
  var defaultPool = flowCells[fcNo].lanes[laneNo].defaultPool;
  if (currentPool) 
  {
    Main.addClass(document.getElementById('pool-'+currentPool.id), 'current');
  }
  if (defaultPool && defaultPool != currentPool)
  {
    Main.addClass(document.getElementById('pool-'+defaultPool.id), 'default');
  }
  

  var x = event.clientX;
  var halfHeight = Math.floor(selectAll.offsetHeight/2)
  var y = event.clientY+2; //-halfHeight;

  var scroll = 0;
  
  // Position the selection div
  selectAll.scrollTop = scroll;
  menu.style.left = (x)+'px';
  menu.style.top = (y)+'px';
  event.stopPropagation();
}

function poolSelected(event)
{
  var optionId = event.target.id;
  var pool = null;
  if (optionId != 'pool-none')
  {
    var index = event.target.getAttribute('data-index');
    pool = selectedPools[index];
  }
  flowCells[currentFcNo].lanes[currentLaneNo].pool = pool;
  setInnerHTML('lane.'+currentLaneNo+'.'+currentFcNo, pool ? pool.name : '');
  checkFlowCells();
}

function presetOnChange()
{
  var frm = document.forms['reggie'];
  var preset = frm.preset.value;
  
  if (preset == PRESET_HISEQ)
  {
    frm.num_lanes[0].disabled = true;
    frm.num_lanes[1].disabled = true;
    frm.num_lanes[2].disabled = false;
    frm.num_lanes[2].checked = true;
    for (var i = 0; i<frm.pools.length; i++)
    {
      frm.pools[i].selected = i < 4;
    }
    frm.read1.value = DEFAULT_READ_HISEQ[0];
    frm.indexRead.value = DEFAULT_READ_HISEQ[1];
    frm.read2.value = DEFAULT_READ_HISEQ[2];
  }
  else if (preset == PRESET_NEXTSEQ)
  {
    document.getElementById('num_lanes_4').checked = true;
    frm.num_lanes[0].disabled = true;
    frm.num_lanes[1].disabled = false;
    frm.num_lanes[2].disabled = true;
    frm.num_lanes[1].selected = true;
    for (var i = 0; i<frm.pools.length; i++)
    {
      frm.pools[i].selected = i < 1;
    }
    frm.read1.value = DEFAULT_READ_NEXTSEQ[0];
    frm.indexRead.value = DEFAULT_READ_NEXTSEQ[1];
    frm.read2.value = DEFAULT_READ_NEXTSEQ[2];
  }
  else
  {
    frm.num_lanes[0].disabled = false;
    frm.num_lanes[1].disabled = false;
    frm.num_lanes[2].disabled = false;
  }
  
  poolsOnChange();
}

</script>
<style>
#numSelected
{
  font-style: italic;
  margin-top: 0.25em;
  margin-left: 1em;
}

.plate .header
{
  height: 3em;
}

.plate .header th.col-0, .plate .header th.col-1
{
  border-bottom: 1px solid #A0A0A0;
}

.well
{
  height: 2em;
  max-height: 2em;
  min-height: 2em;
  width: 10em;
  max-width: 10em;
  min-width: 10em;
  font-size: 100%;
  text-align: center;
  vertical-align: middle;
}

.plate tbody .lane
{
  border-right: 1px solid #A0A0A0;
  width: 3em;
}

.well.col-1
{
  border-left-style: solid;
}

.hide-fc-1 .col-1
{
  display: none;
}

#select-pool-all
{
  max-height: 20em;
  overflow: auto;
}

#select-pool .menuitem
{
  padding-left: 16px;
}

#select-pool div.current
{
  font-weight: bold;
  background-image: url('../images/selected.gif');
  background-position: 2px 50%;
  background-repeat: no-repeat;
}

#select-pool div.default:after
{
  content: ' (default)';
}

#select-pool .menuitem:hover
{
  padding-left: 14px;
  background-position: 0px 50%;
}

</style>
</base:head>
<base:body onload="init()">

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

  <div class="content" onclick="Main.hide('select-pool')">
  <%
  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 id="select-pool" class="menu vertical" style="width: 150px; display: none;"
    onclick="poolSelected(event)">
    <div id="select-pool-all"></div>
  </div>

  <form name="reggie" onsubmit="return false;">
  
  <div id="step.1.section" style="display: none;">
  <table class="stepform">
  <tr>
    <td rowspan="3" class="stepno">1</td>
    <td class="steptitle">Select pools</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table>
      <tr valign="top">
        <td class="prompt">Flow cell type</td>
        <td class="input">
          <select name="preset" onchange="presetOnChange()">
            <option value="">Custom
            <option value="HiSeq" selected>HiSeq
            <option value="NextSeq">NextSeq
          </select>
        </td>
        <td class="status" id="preset.status"></td>
        <td class="help"><span id="preset.message" class="message" style="display: none;"></span>
          The selected preset affects number of lanes per flow cell.
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt">Number of flow cells</td>
        <td class="input">
          <label><input type="radio" name="num_flowcells" value="1">1</label>
          <label><input type="radio" name="num_flowcells" value="2" checked>2</label>
        </td>
        <td class="status" id="numFlowCells.status"></td>
        <td class="help"><span id="numFlowCells.message" class="message" style="display: none;"></span>
          Select how many flow cells to create.
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt">Lanes/flow cell</td>
        <td class="input" id="lanes">
          <label><input type="radio" name="num_lanes" id="num_lanes_2" value="2">2</label>
          <label><input type="radio" name="num_lanes" id="num_lanes_4" value="4">4</label>
          <label><input type="radio" name="num_lanes" id="num_lanes_8" value="8" checked>8</label>
        </td>
        <td class="status" id="lanes.status"></td>
        <td class="help"><span id="lanes.message" class="message" style="display: none;"></span>
          Select the number of lanes on each flow cell.
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt">Pools</td>
        <td class="input"><select style="width:90%;" size="6" 
            name="pools" id="pools" multiple onchange="poolsOnChange()"></select>
          <div id="numSelected"></div>
          <base:buttongroup style="margin-top: 0.5em;">
            <base:button title="Select manually&hellip;" onclick="selectPools()" id="btnSelectPools" />
          </base:buttongroup>
        </td>
        <td class="status" id="pools.status"></td>
        <td class="help"><span id="pools.message" class="message" style="display: none;"></span>
          Select the pools that should be used in the flow cells. The list contain pools that has
          not yet been used (determined by comparing remaining and original quantity).
        </td>
      </tr>
      </table>
    </td>
  </tr>
  </table>
  </div>
  
  <div id="step.2.section" style="display: none;">
  <table class="stepform">
  <tr>
    <td rowspan="3" class="stepno">2</td>
    <td class="steptitle">Flow cell information</td>
  </tr>
  <tr>
    <td class="stepfields">

      <table style="border-collapse: collapse;">
      <tr valign="top">
        <td class="prompt">Sequencing cycles</td>
        <td colspan="2">Read 1</td>
        <td colspan="2">Index</td>
        <td colspan="2">Read 2</td>
        <td class="help" rowspan="3">
          Planned number of sequencing cycles. The actual numbers used may be changed in the
          registration wizard.
        </td>
      </tr>
      <tr valign="top">
        <td class="subprompt"></td>
        <td>
          <input type="text" class="required" name="read1" value="" 
            size="8" onkeypress="return Numbers.integerOnly(event)" onblur="readOnBlur(this.name, 0)">
        </td>
        <td class="status" id="read1.status"></td>
        <td>
          <input type="text" class="required" name="indexRead" value="" 
            size="8" onkeypress="return Numbers.integerOnly(event)" onblur="readOnBlur(this.name, 1)">
        </td>
        <td class="status" id="indexRead.status"></td>
        <td>
          <input type="text" class="required" name="read2" value="" 
            size="8" onkeypress="return Numbers.integerOnly(event)" onblur="readOnBlur(this.name, 2)">
            
        </td>
        <td class="status" id="read2.status"></td>
      </tr>
      <tr valign="top">
        <td class="prompt"></td>
        <td colspan="2"><span id="read1.message" class="message" style="display: none;"></span></td>
        <td colspan="2"><span id="indexRead.message" class="message" style="display: none;"></span></td>
        <td colspan="2"><span id="read2.message" class="message" style="display: none;"></span></td>
      </tr>
      <tr valign="top" style="border-top: 1em solid transparent;">
        <td class="prompt">Flow cell layout</td>
        <td class="input" colspan="5">
          <table class="plate" id="plate" style="margin-bottom: 1em;">
          <thead>
          <tr class="header">
            <th class="lane">Lane</th>
            <%
            for (int fcNo = 0; fcNo < 2; fcNo++)
            {
              %>
              <th class="col-<%=fcNo%>" id="fc.<%=fcNo%>">FlowCell<%=fcNo%></th>
              <%
            }
            %>
          </tr>
          </thead>
          <tbody>
          <%
          for (int laneNo = 0; laneNo < 8; laneNo++)
          {
            %>
            <tr class="row-<%=laneNo%>" id="lane.<%=laneNo%>">
              <th class="lane"><%=laneNo+1%></th>
              <%
              for (int fcNo = 0; fcNo < 2; fcNo++)
              {
                %>
                <td class="well col-<%=fcNo%>" id="lane.<%=laneNo%>.<%=fcNo%>" 
                  onclick="selectPool(event, <%=fcNo%>, <%=laneNo%>)"></td>
                <%
              }
              %>
            </tr>
            <%
          }
          %>
          </tbody>
          </table>
        
        </td>
        <td class="status" id="flowCells.status"></td>
        <td class="help"><span id="flowCells.message" class="message" style="display: none;"></span>
          Assign a pool to each flow cell lane. Click on each lane to select a different pool.
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt">Comments</td>
        <td class="input" colspan="5"></td>
        <td class="status" id="comments.status"></td>
        <td class="help"><span id="comments.message" class="message" style="display: none;"></span>Comments about the flow cells.</td>
      </tr>
      <tbody id="flowcell-comments">
        <%
        for (int fcNo = 0; fcNo < 2; fcNo++)
        {
          %>
          <tr valign="top" id="comments.<%=fcNo%>">
          <td class="subprompt" id="comments.<%=fcNo%>.name">FlowCell<%=fcNo%></td>
          <td class="input" colspan="5"><textarea rows="3" cols="50" style="width: 90%;" name="comments.<%=fcNo%>" value=""></textarea></td>
          <td class="status"></td>
          <td class="help"></td>
          </tr>
          <%
        }
        %>
      </tbody>
      </table>
    </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="messages" class="success" style="display: none; width: 950px; margin-left: 20px; margin-top: 20px;"></div>

  <table style="margin-left: 20px; margin-top: 10px; display: none;" class="navigation" id="navigation">
    <tr>
      <td><base:button id="gocancel" title="Cancel" onclick="goRestart(false)" style="display: none;"/></td>
      <td><base:button id="gonext" title="Next" image="<%=home+"/images/gonext.png"%>" onclick="goNext(true)"/></td>
      <td><base:button id="goregister" title="Register" image="<%=home+"/images/import.png"%>" onclick="goRegister()" 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();
}
%>