source: trunk/www/biomaterials/wizards/create_child_bioplate_step2.jsp @ 5905

<%-- $Id: create_child_bioplate_step2.jsp 5905 2011-12-12 08:42:09Z nicklas $
  ------------------------------------------------------------------
  Copyright (C) 2011 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.BioPlateEventType"
  import="net.sf.basedb.core.BioPlateType"
  import="net.sf.basedb.core.PlateGeometry"
  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.SystemItems"
  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 int numChildPlates = Values.getInt(request.getParameter("number_of_plates"), 1);
final int childPlateTypeId = Values.getInt(request.getParameter("bioplatetype_id"));
final int childPlateGeometryId = Values.getInt(request.getParameter("plategeometry_id"));
final String childPlateNamePrefix = Values.getString(request.getParameter("plate_name_prefix"), "New plate.");

final ItemContext cc = sc.getCurrentContext(Item.BIOPLATEEVENT, BioPlateEventType.CREATE_BIOMATERIAL);
final DbControl dc = sc.newDbControl();
try
{
  final BioPlate sourcePlate = BioPlate.getById(dc, sourcePlateId);
  final Item childBioMaterialType = Item.valueOf(request.getParameter("child_biomaterial_type"));
  final boolean isBioAssayEvent = childBioMaterialType == Item.PHYSICALBIOASSAY;

  final PlateGeometry geometry = isBioAssayEvent ? null : PlateGeometry.getById(dc, childPlateGeometryId);
  final int size = Values.getInt(request.getParameter("size"));
  final BioPlateType sourceType = sourcePlate.getBioPlateType();
  final Item sourceBioMaterialType = sourceType.getBioMaterialType();
  String childNameSuffix = "";
  if (childBioMaterialType == Item.SAMPLE)
  {
    childNameSuffix = "s";
  }
  else if (childBioMaterialType == Item.EXTRACT)
  {
    childNameSuffix = "e";
  }
  
  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("create-child-plate.show-source-coordinates"), true);
  %>
  <base:page type="popup" title="Create child bioplate - step 2/2">
  <base:head scripts="ajax.js,plate.js,js-draw.js,json2.js" styles="plate.css,toolbar.css">
    <script language="javascript">
  
    var isBioAssayEvent = <%=isBioAssayEvent ? "true" : "false"%>;
    
    // For drawing
    var graphics;
    var pen;
    var selectedPen;
    
    // Source and destination plates
    var sourcePlate;
    var destPlates;
    
    // We can select one well on each plate
    var selectedSourceWell;
    var selectedDestWell;

    // Plate and source well currently being edited
    var editingPlate;
    var editingWell;
    
    function init()
    {
      // Initialize graphics
      graphics = new jsGraphics(document.getElementById('canvas'));
      pen = new jsPen();
      selectedPen = new jsPen(new jsColor('445577'), 2);
      setSourceBioPlate(<%=sourcePlateId%>, '<%=HTML.javaScriptEncode(sourcePlate.getName())%>');
      createDestinationPlates(<%=numChildPlates%>, <%=isBioAssayEvent ? 1 : geometry.getRows()%>, <%=isBioAssayEvent ? size : geometry.getColumns()%>, '<%=HTML.javaScriptEncode(childPlateNamePrefix)%>');
    }

    /**
      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;
      storeAndHideChildInfo();

      // 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();
      }
      showChildInfo();
    }
    
    /**
      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(plateNo, row, column)
    {
      var well = destPlates[plateNo].getWell(row, column);
      storeAndHideChildInfo();

      // 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();
      }
      showChildInfo();
    }
    
    function destWellOnMouseOver(plateNo, row, column)
    {
      var well = destPlates[plateNo].getWell(row, column);
      if (!well) return;
      well.drawLink(graphics, pen, false);
    }
    
    function destWellOnMouseOut(plateNo, row, column)
    {
      var well = destPlates[plateNo].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 (!destPlates) 
      {
        alert('No destination plates have been created');
        return;
      }
      if (!confirm('This will remove all placed biomaterial. Continue?')) return;
      sourcePlate.unmapAll(graphics);
    }
    
    /**
      Automatically move remaining biomaterial to the destination plate filling rows first.
      Biomaterial and wells that have already been mapped are skipped.
    */
    function placeByRow()
    {
      if (!destPlates) 
      {
        alert('No destination plates have been created');
        return;
      }
      var srcRow = 0;
      var srcCol = 0;
      for (var plateNo = 0; plateNo < destPlates.length; plateNo++)
      {
        var destPlate = destPlates[plateNo];
        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 (!destPlates) 
      {
        alert('No destination plates have been created');
        return;
      }
      var srcRow = 0;
      var srcCol = 0;
      for (var plateNo = 0; plateNo < destPlates.length; plateNo++)
      {
        var destPlate = destPlates[plateNo];
        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 setSourceBioPlate(bioPlateId, name)
    {
      var request = Ajax.getXmlHttpRequest();
      var url = '../bioplates/ajax.jsp?ID=<%=ID%>&cmd=GetFullPlateInfo&item_id=' + bioPlateId;
      if (!isBioAssayEvent)
      {
        url += '&countChildren=<%=sourceBioMaterialType == childBioMaterialType ? "pooled" : "1"%>';
      }
      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';

      // Create plate and wells
      var prefix = 'source';
      var plate = new Plate(prefix, plateInfo.id, plateInfo.name, rows, columns, true);
      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;
          if (!isBioAssayEvent)
          {
            well.childCount = bmInfo.childCount;
            well.childName = well.name + '.<%=childNameSuffix%>' + (well.childCount + 1);
          }
        }
      }
      
      // 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) : '';

          // We can only create a child biomaterial if the well is not empty
          if (well.id)
          {
            cls += ' filled editable';
            onclick = ' onclick="sourceWellOnClick('+r+','+c+')"';
            onmouseover = ' onmouseover=sourceWellOnMouseOver('+r+','+c+')';
            onmouseout = ' onmouseout=sourceWellOnMouseOut('+r+','+c+')';
          }
          else
          {
            cls += ' empty';
          }
          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>';
      document.getElementById('plate.src').innerHTML = html;
      document.getElementById('plate.src.name').innerHTML = Main.encodeTags(name);
      sourcePlate = plate;
    }
    
    
    function createDestinationPlates(numPlates, rows, columns, namePrefix)
    {
      var bigPlate = rows > 12 || columns > 18;
      var plateClass = bigPlate ? 'plate bigplate' : 'plate';

      document.getElementById('plate.dest.info').innerHTML = numPlates + ' - ' + rows + '×' + columns;
      
      // Create plate and wells
      destPlates = new Array();
      var html = '';
      for (var plateNo = 0; plateNo < numPlates; plateNo++)
      {
        var prefix = 'dest.' + plateNo;
        var plate = new Plate(prefix, plateNo, namePrefix + plateNo, rows, columns, false);
        plate.barcode = '';
        destPlates[plateNo] = plate;

        // Create html table representing the bioplate
        html += '<table class="'+plateClass+'" cellspacing="0" cellpadding="0" onmouseout="event.cancelBubble=true">';
        if (plateNo == 0)
        {
          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 cls = 'well empty editable';
            var onclick = ' onclick="destWellOnClick('+plateNo+','+r+','+c+')"';
            var onmouseover = ' onmouseover=destWellOnMouseOver('+plateNo+','+r+','+c+')';
            var onmouseout = ' onmouseout=destWellOnMouseOut('+plateNo+','+r+','+c+')';
            html += '<td id="'+prefix+'.'+r+'.'+c+'" class="' + cls + '"' + onclick + onmouseover + onmouseout+'>';
            html += '<div class="info" id="'+prefix+'.'+r+'.'+c+'.info"></div></td>';
          }
          html += '</tr>';
        }
        html += '</table>';
      }
      
      document.getElementById('plate.dest').innerHTML = html;

      Main.hide('destplatecreateoptions');
      Main.show('toolbar.mappings');
      Main.showHide('plate.dest.options', !bigPlate);
      showSourceCoordinatesOnClick();
    }
    
    /**
      Save the event.
    */
    function doCreateChildPlate()
    {
      var frm = document.forms['main'];
      var numMapped = 0;
      for (var plateNo = 0; plateNo < destPlates.length; plateNo++)
      {
        var destPlate = destPlates[plateNo];
        Forms.createHidden(frm, 'plate.' + plateNo + '.name', destPlate.name);
        if (!isBioAssayEvent)
        {
          Forms.createHidden(frm, 'plate.' + plateNo + '.barcode', destPlate.barcode);
        }
        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)
            {
              var prefix = 'well.' +plateNo + '.' + row + '.' + column;
              Forms.createHidden(frm, prefix, well.mappedWell.id);
              if (!isBioAssayEvent)
              {
                Forms.createHidden(frm, prefix + '.name', well.mappedWell.childName);
              }
              numMapped++;
            }
          }
        }
      }
      
      if (numMapped == 0)
      {
        alert('No wells have been mapped.');
        return;
      }
      
      frm.submit();
    }
    

    function selectPlateMappingOnClick()
    {
      if (!destPlates) 
      {
        alert('No destination plates have been created');
        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='+destPlates[0].rows;
      url += '&tmpfilter:INT:destinationGeometry.columns='+destPlates[0].columns;
      url += '&tmpfilter:INT:destinationCount=' + destPlates.length;
      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 != destPlates.length || mappingInfo.destinationRows != destPlates[0].rows || mappingInfo.destinationColumns != destPlates[0].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 plateNo = parseInt(mapping[3]);
        if (plateNo >= 0 && plateNo < destPlates.length)
        {
          var destPlate = destPlates[plateNo];
          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);
    }
    
    function showChildInfo()
    {
      if (selectedDestWell) 
      {
        editingPlate = selectedDestWell.plate;
        editingWell = selectedDestWell.mappedWell;
      }
      else if (selectedSourceWell)
      {
        if (selectedSourceWell.mappedWell)
        {
          editingPlate = selectedSourceWell.mappedWell.plate; 
        }
        editingWell = selectedSourceWell;
      }
      var frm = document.forms['main'];
      if (editingPlate)
      {
        frm.plate_name.value = editingPlate.name;
        if (!isBioAssayEvent)
        {
          frm.plate_barcode.value = editingPlate.barcode;
        }
        Main.show('childplate.info');
      }
      if (editingWell && !isBioAssayEvent)
      {
        frm.biomaterial_name.value = editingWell.childName;
        Main.show('childbiomaterial.info');
      }
    }
    
    function storeAndHideChildInfo()
    {
      var frm = document.forms['main'];
      if (editingWell && !isBioAssayEvent)
      {
        Main.hide('childbiomaterial.info');
        editingWell.childName = frm.biomaterial_name.value;
        editingWell = null;
      }
      if (editingPlate)
      {
        Main.hide('childplate.info');
        editingPlate.name = frm.plate_name.value;
        if (!isBioAssayEvent)
        {
          editingPlate.barcode = frm.plate_barcode.value;
        }
        editingPlate = null;
      }
      
    }
    </script>
  </base:head>
  <base:body onload="init()">
    <div id="canvas"></div>
    <h3>Create child bioplate - step 2/2 <base:help helpid="bioplateevent.create-child-2" /></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="CreateChildPlate">
      <input type="hidden" name="sourceplate_id" value="<%=sourcePlateId%>">
      <!-- event properties -->
      <input type="hidden" name="event_name" value="<%=HTML.encodeTags(request.getParameter("event_name"))%>">
      <input type="hidden" name="event_description" value="<%=HTML.encodeTags(request.getParameter("event_description"))%>">
      <input type="hidden" name="event_date" value="<%=HTML.encodeTags(request.getParameter("event_date"))%>">
      <input type="hidden" name="protocol_id" value="<%=Values.getInt(request.getParameter("protocol_id"))%>">
      <input type="hidden" name="hardware_id" value="<%=Values.getInt(request.getParameter("hardware_id"))%>">
      <!-- child plate properties -->
      <input type="hidden" name="number_of_plates" value="<%=numChildPlates%>">
      <input type="hidden" name="size" value="<%=size%>">
      <input type="hidden" name="plategeometry_id" value="<%=childPlateGeometryId%>">
      <input type="hidden" name="bioplatetype_id" value="<%=childPlateTypeId%>">
      <input type="hidden" name="freezer_id" value="<%=Values.getInt(request.getParameter("freezer_id"))%>">
      <input type="hidden" name="plate_description" value="<%=HTML.encodeTags(request.getParameter("plate_description"))%>">
      <!-- child biomaterial properties -->
      <input type="hidden" name="child_biomaterial_type" value="<%=childBioMaterialType.name()%>"> 
      <input type="hidden" name="subtype_id" value="<%=request.getParameter(childBioMaterialType.name() + "_subtype_id")%>">
      <input type="hidden" name="original_quantity" value="<%=HTML.encodeTags(request.getParameter("original_quantity"))%>">
      <input type="hidden" name="used_quantity" value="<%=HTML.encodeTags(request.getParameter("used_quantity"))%>">
      <input type="hidden" name="child_description" value="<%=HTML.encodeTags(request.getParameter("child_description"))%>">
      <input type="hidden" name="tag_id" value="<%=HTML.encodeTags(request.getParameter("tag_id"))%>">
  
    <tbl:toolbar id="toolbar.mappings" style="border-left: 0px; border-right: 0px; border-top: 0px;">
        <tbl:button title="Clear" 
          onclick="clearMapping()" 
          image="cancel.png" 
          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 >
        <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><%=isBioAssayEvent ? 
                "Physical bioassay(s)" : "Destination plate(s):"%></b> 
                <span id="plate.dest.info"><i>not created</i></span>
            
            <div id="plate.dest"></div>
            <div id="plate.dest.options" style="display: none;">
              <input type="checkbox" name="showSourceCoordinates" id="showSourceCoordinates"
                <%=showSourceCoordinates ? "checked" : ""%> value="1"
                onclick="showSourceCoordinatesOnClick()"><label for="showSourceCoordinates">Show source coordinates</label>
            </div>
          </div>
        </td>
      </tr>
      </table>

      <div style="height: 150px; xbackground: #e0e0e0; padding-bottom: 6px;">
      <table cellspacing="0" border="0" width="100%" style="xdisplay: none;">
      <tr >
      <td width="50%">
        <h3><%=isBioAssayEvent ? "Physical bioassay" : "Child plate:"%></h3>
        <table class="form" cellspacing="0" id="childplate.info" style="display: none;">
        <tr>
          <td class="prompt" style="width: 90px;">Name</td>
          <td><input <%=requiredClazz%> type="text" name="plate_name" value="" 
            size="40" maxlength="<%=BioPlate.MAX_NAME_LENGTH%>"></td>
        </tr>
        <%
        if (!isBioAssayEvent)
        {
          %>
          <tr>
            <td class="prompt">Barcode</td>
            <td><input <%=clazz%> type="text" name="plate_barcode" value="" 
              size="40" maxlength="<%=BioPlate.MAX_BARCODE_LENGTH%>"></td>
          </tr>
          <%
        }
        %>
        </table>
      </td>
      <td width="50%">
        <%
        if (!isBioAssayEvent)
        {
          %>
          <h3>Child biomaterial</h3>
          <table class="form" cellspacing="0" id="childbiomaterial.info" style="display: none;">
          <tr>
            <td class="prompt" style="width: 90px;">Name</td>
            <td><input <%=requiredClazz%> type="text" name="biomaterial_name" value="" 
              size="40" maxlength="<%=MeasuredBioMaterial.MAX_NAME_LENGTH%>"></td>
          </tr>
          </table>
          <%
        }
        %>
      </td>
    </tr>
    </table>
    </div>


    </div>
    </form>

    <table align="center">
    <tr>
      <td width="50%"><base:button onclick="doCreateChildPlate()" 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();
}
%>