source: trunk/www/biomaterials/wizards/move_biomaterial.jsp @ 5557

<%-- $Id$
  ------------------------------------------------------------------
  Copyright (C) 2010 Nicklas Nordborg

  This file is part of BASE - BioArray Software Environment.
  Available at http://base.thep.lu.se/

  BASE is free software; you can redistribute it and/or
  modify it under the terms of the GNU General Public License
  as published by the Free Software Foundation; either version 3
  of the License, or (at your option) any later version.

  BASE is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with BASE. If not, see <http://www.gnu.org/licenses/>.
  ------------------------------------------------------------------

  @author Nicklas
--%>
<%@ page pageEncoding="UTF-8" session="false"
  import="net.sf.basedb.core.BioPlate"
  import="net.sf.basedb.core.BioPlateEvent"
  import="net.sf.basedb.core.PermissionDeniedException"
  import="net.sf.basedb.core.BioPlateEventType"
  import="net.sf.basedb.core.MeasuredBioMaterial"
  import="net.sf.basedb.core.Hardware"
  import="net.sf.basedb.core.Protocol"
  import="net.sf.basedb.core.DbControl"
  import="net.sf.basedb.core.Item"
  import="net.sf.basedb.core.ItemContext"
  import="net.sf.basedb.core.ItemQuery"
  import="net.sf.basedb.core.SessionControl"
  import="net.sf.basedb.core.query.Restrictions"
  import="net.sf.basedb.core.query.Hql"
  import="net.sf.basedb.util.Values"
  import="net.sf.basedb.util.formatter.Formatter"
  import="net.sf.basedb.clients.web.formatter.FormatterFactory"
  import="net.sf.basedb.clients.web.formatter.FormatterSettings"
  import="net.sf.basedb.clients.web.Base"
  import="net.sf.basedb.clients.web.util.HTML"
  import="java.util.List"
  import="java.util.Date"
  import="java.util.Collections"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%@ taglib prefix="tbl" uri="/WEB-INF/table.tld" %>
<%
final SessionControl sc = Base.getExistingSessionControl(pageContext, true);
final String ID = sc.getId();
final float scale = Base.getScale(sc);
final int sourcePlateId = Values.getInt(request.getParameter("sourceplate_id"));
final ItemContext cc = sc.getCurrentContext(Item.BIOPLATEEVENT, BioPlateEventType.MOVE);
final DbControl dc = sc.newDbControl();
try
{
  BioPlate sourcePlate = BioPlate.getById(dc, sourcePlateId);
  
  // Load recently used items
  List<Hardware> recentHardware = (List<Hardware>)cc.getRecent(dc, Item.HARDWARE);
  List<Protocol> recentProtocols = (List<Protocol>)cc.getRecent(dc, Item.PROTOCOL);
  
  Item itemType = null;
  try
  {
    itemType = sourcePlate.getBioPlateType().getBioMaterialType();
  }
  catch (PermissionDeniedException ex)
  {}
  
  final String clazz = "class=\"text\"";
  final String requiredClazz = "class=\"text required\"";
  final Formatter<Date> dateFormatter = FormatterFactory.getDateFormatter(sc);
  final String dateFormat = FormatterSettings.getDateFormat(sc);
  final String jsDateFormat = HTML.javaScriptEncode(dateFormat);
  final String htmlDateFormat = HTML.encodeTags(dateFormat);
  final boolean showSourceCoordinates = Values.getBoolean(sc.getUserClientSetting("move-biomaterial.show-source-coordinates"), true);
  %>
  <base:page type="popup" title="Move biomaterial">
  <base:head scripts="ajax.js,plate.js,js-draw.js,json2.js" styles="plate.css,toolbar.css">
    <script language="javascript">
  
    // For drawing
    var graphics;
    var pen;
    var selectedPen;
    
    // Source and destination plates
    var sourcePlate;
    var destPlate;
    
    // We can select one well on each plate
    var selectedSourceWell;
    var selectedDestWell;

    function init()
    {
      // Initialize graphics
      graphics = new jsGraphics(document.getElementById('canvas'));
      pen = new jsPen();
      selectedPen = new jsPen(new jsColor('445577'), 2);
      setBioPlateCallback(<%=sourcePlateId%>, '<%=HTML.javaScriptEncode(sourcePlate.getName())%>', true);
    }

    /**
      Select the source well that is clicked on. The currently selected well
      is de-selected. If the clicked well is the same as the currently 
      selected well no new item is selected. If a destination well is already 
      selected a link is made between the source and destination wells.
    */
    function sourceWellOnClick(row, column)
    {
      var well = sourcePlate.getWell(row, column);
      if (!well) return;

      // De-select the currently selected source well
      if (selectedSourceWell) 
      {
        selectedSourceWell.setSelected(false);
        if (well == selectedSourceWell)
        {
          // Re-draw link with regular pen (eg. same as onmouseover)
          selectedSourceWell.drawLink(graphics, pen, true);
          selectedSourceWell = null;
          return;
        }
        else
        {
          selectedSourceWell.hideLink(graphics);
        }
      }
      
      // Select the new source well and draw link to destination well
      selectedSourceWell = well;
      selectedSourceWell.setSelected(true);
      selectedSourceWell.drawLink(graphics, selectedPen, true);

      // Map the source and destination wells
      if (selectedSourceWell && selectedDestWell)
      {
        mapSelectedWells();
      }
    }
    
    /**
      Draw a link between the mapped source and destination wells.
    */
    function sourceWellOnMouseOver(row, column)
    {
      var well = sourcePlate.getWell(row, column);
      if (!well) return;
      well.drawLink(graphics, pen, false);
    }
    
    /**
      Hide the link between the mapped source and destination 
      wells, unless one of them is selected.
    */
    function sourceWellOnMouseOut(row, column)
    {
      var well = sourcePlate.getWell(row, column);
      if (!well) return;
      if (!well.selected && !(well.mappedWell && well.mappedWell.selected)) 
      {
        well.hideLink(graphics);
      }
    }
    
    function destWellOnClick(row, column)
    {
      var well = destPlate.getWell(row, column);

      // De-select the currently selected well
      if (selectedDestWell) 
      {
        selectedDestWell.setSelected(false);
        if (well == selectedDestWell)
        {
          // Re-draw link with regular pen (eg. same as onmouseover)
          selectedDestWell.drawLink(graphics, pen, true);
          selectedDestWell = null;
          return;
        }
        else
        {
          selectedDestWell.hideLink(graphics);
        }
      }
      
      selectedDestWell = well;
      selectedDestWell.setSelected(true);
      selectedDestWell.drawLink(graphics, selectedPen, true);

      if (selectedSourceWell && selectedDestWell)
      {
        mapSelectedWells();
      }
    }
    
    function destWellOnMouseOver(row, column)
    {
      var well = destPlate.getWell(row, column);
      if (!well) return;
      well.drawLink(graphics, pen, false);
    }
    
    function destWellOnMouseOut(row, column)
    {
      var well = destPlate.getWell(row, column);
      if (!well) return;
      if (!well.selected && !(well.mappedWell && well.mappedWell.selected)) 
      {
        well.hideLink(graphics);
      }
    }

    /**
      Map the selected source and destination wells. Hide and
      redraw links as needed.
    */
    function mapSelectedWells()
    {
      // Hide any links that are currently displayed
      selectedSourceWell.hideLink(graphics);
      selectedDestWell.hideLink(graphics);
      
      // Map to the new well and draw link
      if (selectedSourceWell.mappedWell != selectedDestWell)
      {
        selectedSourceWell.mapToWell(selectedDestWell);
        selectedSourceWell.drawLink(graphics, pen, true);
      }
      else
      {
        selectedSourceWell.unmapWell();
      }
      
      // De-select everything
      selectedSourceWell.setSelected(false);
      selectedDestWell.setSelected(false);
      selectedSourceWell = null;
      selectedDestWell = null;
    }

    
    /**
      Remove all mappings that have been made so far.
    */
    function clearMapping()
    {
      if (!destPlate) 
      {
        alert('No destination plate has been selected');
        return;
      }
      if (!confirm('This will remove all placed biomaterial. Continue?')) return;
      sourcePlate.unmapAll(graphics);
      if (selectedSourceWell)
      {
        selectedSourceWell.setSelected(false);
        selectedSourceWell = null;
      }
      if (selectedDestWell)
      {
        selectedDestWell.setSelected(false);
        selectedDestWell = null;
      }
    }
    
    /**
      Automatically move remaining biomaterial to the destination plate filling rows first.
      Biomaterial and wells that have already been mapped are skipped.
    */
    function placeByRow()
    {
      if (!destPlate) 
      {
        alert('No destination plate has been selected');
        return;
      }
      var srcRow = 0;
      var srcCol = 0;
      for (var destRow = 0; destRow < destPlate.rows; destRow++)
      {
        for (var destCol = 0; destCol < destPlate.columns; destCol++)
        {
          var destWell = destPlate.getWell(destRow, destCol);
          if (!destWell.mappedWell && !destWell.locked)
          {
            var mapped = false;
            var srcWell = sourcePlate.getWell(srcRow, srcCol);
            while (srcWell && !mapped)
            {
              if (srcWell.id && !srcWell.locked && !srcWell.mappedWell)
              {
                srcWell.mapToWell(destWell);
                mapped = true;
              }
              else
              {
                srcCol++;
                if (srcCol >= sourcePlate.columns)
                {
                  srcCol = 0;
                  srcRow++;
                }
                srcWell = sourcePlate.getWell(srcRow, srcCol);
              }
            }
          }
        }
      }
    }
  
    /**
      Automatically move remaining biomaterial to the destination plate filling columns first.
      Biomaterial and wells that have already been mapped are skipped.
    */
    function placeByColumn()
    {
      if (!destPlate) 
      {
        alert('No destination plate has been selected');
        return;
      }
      var srcRow = 0;
      var srcCol = 0;
      for (var destCol = 0; destCol < destPlate.columns; destCol++)
      {
        for (var destRow = 0; destRow < destPlate.rows; destRow++)
        {
          var destWell = destPlate.getWell(destRow, destCol);
          if (!destWell.mappedWell && !destWell.locked)
          {
            var mapped = false;
            var srcWell = sourcePlate.getWell(srcRow, srcCol);
            while (srcWell && !mapped)
            {
              if (srcWell.id && !srcWell.locked && !srcWell.mappedWell)
              {
                srcWell.mapToWell(destWell);
                mapped = true;
              }
              else
              {
                srcRow++;
                if (srcRow >= sourcePlate.rows)
                {
                  srcCol++;
                  srcRow = 0;
                }
                srcWell = sourcePlate.getWell(srcRow, srcCol);
              }
            }
          }
        }
      }
    }

    
    function selectBioPlateOnClick()
    {
      if (destPlate && !confirm('This will reset all moved biomaterial. Continue?')) return;
      
      var url = '../bioplates/index.jsp?ID=<%=ID%>&cmd=UpdateContext&mode=selectone&callback=setBioPlateCallback';
      url += '&resetTemporary=1&tmpfilter:INT:bioPlateType.bioMaterialType=<%=itemType == null ? "=" : "|" + itemType.getValue()%>'
      url += '&exclude='+sourcePlate.id;
      Main.openPopup(url, 'SelectBioPlate', 1000, 700);
    }

    function setBioPlateCallback(bioPlateId, name, isSourcePlate)
    {
      if (!isSourcePlate && bioPlateId == sourcePlate.id)
      {
        alert('It is not possible to use the same plate as both source and destination plate.');
        return;
      }
      
      var request = Ajax.getXmlHttpRequest();
      var url = '../bioplates/ajax.jsp?ID=<%=ID%>&cmd=GetFullPlateInfo&item_id=' + bioPlateId;
      request.open("GET", url, false); 
      // NOTE! 'false' causes code to wait for the response. aka. 'Synchronous AJAX' or SJAX.
      request.send(null);
      var plateInfo = Ajax.parseJsonResponse(request.responseText);
      if (plateInfo.status != 'ok')
      {
        alert(plateInfo.message);
        return false;
      }

      // Get plate and well information from the AJAX response
      var rows = plateInfo.rows
      var columns = plateInfo.columns;
      
      var bigPlate = rows > 12 || columns > 18;
      var plateClass = bigPlate ? 'plate bigplate' : 'plate';

      // Remove existing mapping
      if (sourcePlate) sourcePlate.unmapAll(graphics);
      selectedDestWell = null;

      // Create plate and wells
      var prefix = isSourcePlate ? 'source' : 'dest';
      var plate = new Plate(prefix, plateInfo.id, plateInfo.name, rows, columns, isSourcePlate);
      for (var i = 0; i < plateInfo.wells.length; i++)
      {
        var wellInfo = plateInfo.wells[i];
        var bmInfo = wellInfo.bioMaterial;
        var row = wellInfo.row;
        var col = wellInfo.column;
        var well = plate.getWell(row, col);
        if (bmInfo)
        {
          well.id = bmInfo.id;
          well.name = bmInfo.name;
        }
        well.locked = isSourcePlate ? !wellInfo.canClear : !wellInfo.canAdd || well.id;
      }
      
      // Create html table representing the bioplate
      var html = '<table class="'+plateClass+'" cellspacing="0" cellpadding="0" onmouseout="event.cancelBubble=true">';
      html += '<tr><td></td>';
      for (var c = 0; c < plate.columns; c++)
      {
        html += '<td class="columnheader">' + (c+1) + '</td>';
      }
      html += '</tr>';
      for (var r = 0; r < plate.rows; r++)
      {
        html += '<tr><td class="rowheader">' + Plates.toAlphaCoordinate[r] + '</td>';
        for (var c = 0; c < plate.columns; c++)
        {
          var well = plate.getWell(r, c);
          var cls = 'well';
          var onclick = '';
          var onmouseover = '';
          var onmouseout = '';
          var title = well.name ? Main.encodeTags(well.name) : '';
          if (isSourcePlate)
          {
            // We can only move a biomaterial if the well is not empty or locked
            if (well.id)
            {
              if (well.locked)
              {
                cls += ' filled locked';
              }
              else
              {
                cls += ' filled editable';
                onclick = ' onclick="sourceWellOnClick('+r+','+c+')"';
                onmouseover = ' onmouseover=sourceWellOnMouseOver('+r+','+c+')';
                onmouseout = ' onmouseout=sourceWellOnMouseOut('+r+','+c+')';
              }
            }
            else
            {
              cls += ' empty';
            }
          }
          else
          {
            // We only add biomaterial to destination well if it is not locked
            if (well.locked)
            {
              cls += ' unmappable';
            }
            else
            {
              cls += ' empty editable';
              onclick = ' onclick="destWellOnClick('+r+','+c+')"';
              onmouseover = ' onmouseover=destWellOnMouseOver('+r+','+c+')';
              onmouseout = ' onmouseout=destWellOnMouseOut('+r+','+c+')';
            }
          }
          html += '<td id="'+prefix+'.'+r+'.'+c+'" class="' + cls + '"' + onclick + onmouseover + onmouseout+' title="'+title+'">';
          html += '<div class="info" id="'+prefix+'.'+r+'.'+c+'.info"></div></td>';
        }
        html += '</tr>';
      }
      html += '</table>';
      if (isSourcePlate)
      {
        document.getElementById('plate.src').innerHTML = html;
        document.getElementById('plate.src.name').innerHTML = Main.encodeTags(name);
        sourcePlate = plate;
      }
      else
      {
        document.getElementById('plate.dest').innerHTML = html;
        document.getElementById('plate.dest.name').innerHTML = Main.encodeTags(name);
        destPlate = plate;
        Main.showHide('plate.dest.options', !bigPlate);
        showSourceCoordinatesOnClick();
      }
    }
    
    /**
      Save the event.
    */
    function doMoveBioMaterial()
    {
      if (!destPlate)
      {
        alert('No destination plate has been selected');
        return;
      }
      var frm = document.forms['main'];
      if (Main.trimString(frm.name.value) == '')
      {
        alert("You must enter a name for the event.");
        frm.name.focus();
        return;
      }
      
      frm.destplate_id.value = destPlate.id;
      frm.rows.value = destPlate.rows;
      frm.columns.value = destPlate.columns;
      
      var numMapped = 0;
      for (var row = 0; row < destPlate.rows; row++)
      {
        for (var column = 0; column < destPlate.columns; column++)
        {
          var well = destPlate.getWell(row, column);
          
          if (well.mappedWell)
          {
            Forms.createHidden(frm, 'well.' + row + '.' + column, well.mappedWell.id);
            numMapped++;
          }
        }
      }
      
      if (numMapped == 0)
      {
        alert('No wells have been mapped.');
        return;
      }
      
      frm.submit();
    }
    

    function selectHardwareOnClick()
    {
      var frm = document.forms['main'];
      var url = '../../admin/hardware/index.jsp?ID=<%=ID%>&cmd=UpdateContext&mode=selectone&callback=setHardwareCallback';
      if (frm.hardware_id.length > 1) 
      {
        var id = Math.abs(parseInt(frm.hardware_id[1].value));        
        url += '&item_id='+id;
      }
      url += '&resetTemporary=1';
      Main.openPopup(url, 'SelectHardware', 1000, 700); 
    }
    function setHardwareCallback(id, name)
    {
      var frm = document.forms['main'];
      var list = frm.hardware_id;
      if (list.length < 2 || list[1].value == '0') // >
      {
        Forms.addListOption(list, 1, new Option());
      }
      list[1].value = id;
      list[1].text = name;
      list.selectedIndex = 1;
    }
  
    function selectProtocolOnClick()
    {
      var frm = document.forms['main'];
      var url = '../../admin/protocols/index.jsp?ID=<%=ID%>&cmd=UpdateContext&mode=selectone&callback=setProtocolCallback';
      if (frm.protocol_id.length > 1) 
      {
        var id = Math.abs(parseInt(frm.protocol_id[1].value));        
        url += '&item_id='+id;
      }
      url += '&resetTemporary=1';
      Main.openPopup(url, 'SelectProtocol', 1000, 700); 
    }
    function setProtocolCallback(id, name)
    {
      var frm = document.forms['main'];
      var list = frm.protocol_id;
      if (list.length < 2 || list[1].value == '0') // >
      {
        Forms.addListOption(list, 1, new Option());
      }
      list[1].value = id;
      list[1].text = name;
      list.selectedIndex = 1;
    }
    
    function selectPlateMappingOnClick()
    {
      if (!destPlate)
      {
        alert('No destination plate has been selected');
        return;
      }
      var url = '../../lims/platemappings/index.jsp?ID=<%=ID%>&cmd=UpdateContext&mode=selectone&callback=setPlateMappingCallback';
      url += '&resetTemporary=1';
      url += '&tmpfilter:INT:sourceGeometry.rows='+sourcePlate.rows;
      url += '&tmpfilter:INT:sourceGeometry.columns='+sourcePlate.columns;
      url += '&tmpfilter:INT:sourceCount=1';
      url += '&tmpfilter:INT:destinationGeometry.rows='+destPlate.rows;
      url += '&tmpfilter:INT:destinationGeometry.columns='+destPlate.columns;
      url += '&tmpfilter:INT:destinationCount=1';
      Main.openPopup(url, 'SelectPlateMapping', 1000, 700); 
    }
    
    function setPlateMappingCallback(plateMappingId, name)
    {
      var request = Ajax.getXmlHttpRequest();
      var url = '../../lims/platemappings/ajax.jsp?ID=<%=ID%>&cmd=GetMappingDetails&item_id=' + plateMappingId;
      request.open("GET", url, false); 
      request.send(null);
      var mappingInfo = Ajax.parseJsonResponse(request.responseText);
      if (mappingInfo.status != 'ok')
      {
        alert(mappingInfo.message);
        return false;
      }
      
      if (mappingInfo.sourcePlates != 1 || mappingInfo.sourceRows != sourcePlate.rows || mappingInfo.sourceColumns != sourcePlate.columns)
      {
        if (!confirm("The selected mapping doesn't match the geometry of the source plate.\nContinue mapping overlapping positions?")) return;
      }
      else if (mappingInfo.destinationPlates != 1 || mappingInfo.destinationRows != destPlate.rows || mappingInfo.destinationColumns != destPlate.columns)
      {
        if (!confirm("The selected mapping doesn't match the geometry of the destination plate.\nContinue mapping overlapping positions?")) return;
      }
      
      var numMapped = 0;
      for (var i = 0; i < mappingInfo.details.length; i++)
      {
        var mapping = mappingInfo.details[i].split(',');
        var srcWell = sourcePlate.getWell(parseInt(mapping[1]), parseInt(mapping[2]));
        var destWell = destPlate.getWell(parseInt(mapping[4]), parseInt(mapping[5]));
        if (srcWell && destWell)
        {
          if (!destWell.mappedWell && !destWell.locked && srcWell.id && !srcWell.locked && !srcWell.mappedWell)
          {
            srcWell.mapToWell(destWell);
            numMapped++;
          }
        }
      }
    }
    
    function showSourceCoordinatesOnClick()
    {
      var frm = document.forms['main'];
      Main.addOrRemoveClass(document.getElementById('plate.dest'), 'noinfo', !frm.showSourceCoordinates.checked);
    }
    </script>
  </base:head>
  <base:body onload="init()">
    <div id="canvas"></div>
    <h3>Move biomaterial to plate</h3>
    <div class="boxedbottom" style="height: <%=(int)(scale*500)%>px; padding: 0px;">
      <form name="main" action="index.jsp" method="post">
      <input type="hidden" name="ID" value="<%=ID%>">
      <input type="hidden" name="cmd" value="MoveBioMaterial">
      <input type="hidden" name="sourceplate_id" value="<%=sourcePlateId%>">
      <input type="hidden" name="destplate_id" value="">
      <input type="hidden" name="rows" value="">
      <input type="hidden" name="columns" value=""> 
      
      <table cellspacing="0" border="0" width="100%" style="background: #e0e0e0; padding-bottom: 6px;">
      <tr valign="top">
      <td>
        <table class="form" cellspacing="0">
        <tr>
          <td class="prompt" style="width: 90px;">Event name</td>
          <td><input <%=requiredClazz%> type="text" name="name" 
            value="Move biomaterial" 
            size="40" maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
        </tr>
        <tr>
          <td class="prompt">Event date</td>
          <td>
            <table border="0" cellspacing="0" cellpadding="0">
            <tr>
            <td>
              <input <%=clazz%> type="text" name="event_date" 
                value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>" 
                size="20" maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
              &nbsp;
            </td>
            <td>
            <base:button 
              onclick="<%="Dates.selectDate('Event date', 'main', 'event_date', null, '"+jsDateFormat+"')"%>"
              image="calendar.png"
              title="Calendar&hellip;" 
              tooltip="Select a date from a calendar" 
            />
            </td>
            </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="prompt">Protocol</td>
          <td>
            <base:select 
              id="protocol_id"
              clazz="selectionlist"
              required="false"
              current="<%=null%>"
              recent="<%=recentProtocols%>"
              onselect="selectProtocolOnClick()"
            />
          </td>
        </tr>
        <tr>
          <td class="prompt">Hardware</td>
          <td>
            <base:select 
              id="hardware_id"
              clazz="selectionlist"
              required="false"
              current="<%=null%>"
              recent="<%=recentHardware%>"
              onselect="selectHardwareOnClick()"
            />
          </td>
        </tr>
        </table>
      </td>
      <td>
        <b>Description</b><br>
        <textarea <%=clazz%> rows="4" cols="40" name="description" wrap="virtual"
          ></textarea>
        <a href="javascript:Main.zoom('Description', 'main', 'description')"
          title="Edit in larger window"><base:icon image="zoom.gif" /></a>
      </td>
    </tr>
    </table>

    <tbl:toolbar id="toolbar.mappings" style="border-left: 0px; border-right: 0px;">
      <tbl:button title="Select plate&hellip;" 
          onclick="javascript:selectBioPlateOnClick()" 
          image="move_to_plate.png" 
          tooltip="Select the destination plate"
        />
        <tbl:button title="Clear" 
          onclick="clearMapping()" 
          image="cancel.gif" 
          tooltip="Clear all mapped wells"
        />
        <tbl:button title="Place by row" 
          onclick="placeByRow()" 
          image="place_by_row.png" 
          tooltip="Place remaining items; start with rows"
        />
        <tbl:button title="Place by column" 
          onclick="placeByColumn()" 
          image="place_by_column.png" 
          tooltip="Place remaining items; start with columns"
        />
        <tbl:button title="Predefined mapping&hellip;" 
          onclick="selectPlateMappingOnClick()" 
          image="star.png" 
          tooltip="Select a predefined plate mapping"
        />
      </tbl:toolbar>
  
      <table cellspacing="0" cellpadding="0" border="0" width="100%" style="padding: 4px;">
      <tr valign="top">
        <td style="width: 50%;">
          <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
            <b>Source plate:</b> <span id="plate.src.name"></span>
            <div id="plate.src"></div>
          </div>
        </td>
        <td style="width: 50%;">
          <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
            <b>Destination plate:</b> <span id="plate.dest.name"><i>not selected</i></span>
            <div id="plate.dest"></div>
            <div id="plate.dest.options" style="display: none;">
            <input type="checkbox" name="showSourceCoordinates" 
              <%=showSourceCoordinates ? "checked" : ""%> value="1"
              onclick="showSourceCoordinatesOnClick()">Show source coordinates
            </div>
          </div>
        </td>
      </tr>
      </table>
    </div>
    </form>

    <table align="center">
    <tr>
      <td width="50%"><base:button onclick="doMoveBioMaterial()" title="Save" /></td>
      <td width="50%"><base:button onclick="window.close()" title="Cancel" /></td>
    </tr>
    </table>
    
  </base:body>
  </base:page>
  <%
}
finally
{
  if (dc != null) dc.close();
}
%>