[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/xampp182/htdocs/simpeg/zapatec/zpgrid/zpgrid/jsdocs/ [ Home ]
File: overview-summary-zpgrid-output.js.html
<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
Zapatec Grid Overview
</title>
<link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style">
<script>
function asd() {
	
		parent.document.title="zpgrid-output.js Overview";
	
}
</script>
</head>
<body bgcolor="white" onload="asd();">

<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> 	<font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top">
<em>
<b>Zapatec Grid</b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<center>
	
	   <h2>zpgrid-output.js</h2>
	
</center>

	


<h4>Summary</h4>
<p>
	
		Plugin for Zapatec Grid to display grid.

 <pre>
 Copyright (c) 2004-2007 by Zapatec, Inc.
 http://www.zapatec.com
 1700 MLK Way, Berkeley, California,
 94709, U.S.A.
 All rights reserved.
 </pre><BR/><BR/>
	
</p>

<hr>



<!-- ========== METHOD SUMMARY =========== -->

<!-- ========== END METHOD SUMMARY =========== -->


        <pre class="sourceview"><span class="comment">/**
 * <span class="attrib">@fileoverview</span> Plugin for Zapatec Grid to display grid.
 *
 * &lt;pre&gt;
 * Copyright (c) 2004-2007 by Zapatec, Inc.
 * http://www.zapatec.com
 * 1700 MLK Way, Berkeley, California,
 * 94709, U.S.A.
 * All rights reserved.
 * &lt;/pre&gt;
 */</span>

<span class="comment">/* $Id: zpgrid-output.js 7653 2007-08-03 18:30:37Z alex $ */</span>

<span class="comment">/**
 * If there are several containers, synchronizes their width.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.syncContainers = <span class="reserved">function</span>() {
	<span class="comment">// At least 2 containers must be defined</span>
	<span class="reserved">if</span> (!<span class="reserved">this</span>.container || (!<span class="reserved">this</span>.headerContainer &amp;&amp; !<span class="reserved">this</span>.totalsContainer &amp;&amp;
	 !<span class="reserved">this</span>.paginationContainers.length)) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get container dimensions</span>
	var iW = <span class="reserved">this</span>.container.clientWidth;
	var iH = <span class="reserved">this</span>.container.clientHeight;
	var oD = <span class="reserved">this</span>.getGridDimensions();
	<span class="reserved">if</span> (oD.height &amp;&amp; (!iH || !<span class="reserved">this</span>.container.style.height || oD.height &lt; iH)) {
		iH = oD.height;
	}
	<span class="reserved">if</span> (iW) {
		<span class="comment">// If there is separate container for header</span>
		<span class="reserved">if</span> (<span class="reserved">this</span>.headerContainer) {
			<span class="reserved">this</span>.headerContainer.style.width = iW + <span class="literal">'px'</span>;
		}
		<span class="comment">// If there is separate container for totals</span>
		<span class="reserved">if</span> (<span class="reserved">this</span>.totalsContainer &amp;&amp; !<span class="reserved">this</span>.config.horizontal) {
			<span class="reserved">this</span>.totalsContainer.style.width = iW + <span class="literal">'px'</span>;
		}
		<span class="comment">// If there are separate containers for pagination</span>
		<span class="reserved">if</span> (oD.width &amp;&amp; oD.width &lt; iW) {
			iW = oD.width;
		}
		<span class="reserved">for</span> (var iEl = 0; iEl &lt; <span class="reserved">this</span>.paginationContainers.length; iEl++) {
			<span class="reserved">this</span>.paginationContainers[iEl].style.width = iW + <span class="literal">'px'</span>;
		}
	}
	<span class="reserved">if</span> (iH) {
		<span class="comment">// If there is separate container for totals</span>
		<span class="reserved">if</span> (<span class="reserved">this</span>.totalsContainer &amp;&amp; <span class="reserved">this</span>.config.horizontal) {
			<span class="reserved">if</span> (<span class="reserved">this</span>.headerContainer) {
				iH += <span class="reserved">this</span>.headerContainer.offsetHeight;
			}
			<span class="reserved">this</span>.totalsContainer.style.height = iH + <span class="literal">'px'</span>;
		}
	}
};

<span class="comment">/**
 * Returns real width and height of the grid after it has been drawn.
 *
 * &lt;pre&gt;
 * Format of returned object:
 * {
 *   width: [number] width of the grid in pixels,
 *   height: [number] height of the grid in pixels
 * }
 * &lt;/pre&gt;
 *
 * <span class="attrib">@return</span> Object containing width and height of the grid
 * <span class="attrib">@type</span> object
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.getGridDimensions = <span class="reserved">function</span>() {
	var oDims = {
		width: 0,
		height: 0
	};
	var oTable = document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'DataTableTable'</span>);
	<span class="reserved">if</span> (oTable) {
		oDims.width = oTable.offsetWidth;
		oDims.height = oTable.offsetHeight;
	}
	<span class="reserved">return</span> oDims;
};

<span class="comment">/**
 * Synchronizes scrolling.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.syncScroll = <span class="reserved">function</span>() {
	<span class="comment">// Align columns</span>
	<span class="reserved">if</span> (!<span class="reserved">this</span>.config.horizontal &amp;&amp; typeof <span class="reserved">this</span>.outAlignCols == <span class="literal">'function'</span>) {
		<span class="reserved">this</span>.outAlignCols();
	}
	<span class="comment">// Synchronize fixed and scrollable row heights</span>
	<span class="reserved">this</span>.syncRowHeights();
	<span class="comment">// Synchronize scrolling</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.headerContainer) {
		<span class="reserved">this</span>.createProperty(<span class="reserved">this</span>.container, <span class="literal">'zpGridHeader'</span>, <span class="reserved">this</span>.headerContainer);
	}
	<span class="reserved">if</span> (<span class="reserved">this</span>.totalsContainer) {
		<span class="reserved">this</span>.createProperty(<span class="reserved">this</span>.container, <span class="literal">'zpGridTotals'</span>, <span class="reserved">this</span>.totalsContainer);
	}
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.fixedLeft &gt; 0 || <span class="reserved">this</span>.config.horizontal) {
		<span class="reserved">this</span>.createProperty(<span class="reserved">this</span>.container, <span class="literal">'zpGridFixedLeft'</span>,
		 document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'FixedLeft'</span>));
		<span class="reserved">if</span> (<span class="reserved">this</span>.headerContainer) {
			<span class="reserved">this</span>.createProperty(<span class="reserved">this</span>.container, <span class="literal">'zpGridDataFixedLeft'</span>,
			 document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'DataFixedLeft'</span>));
		}
		<span class="reserved">if</span> (<span class="reserved">this</span>.totalsContainer) {
			<span class="reserved">this</span>.createProperty(<span class="reserved">this</span>.container, <span class="literal">'zpGridTotalsFixedLeft'</span>,
			 document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'TotalsFixedLeft'</span>));
		}
	}
	<span class="reserved">if</span> (<span class="reserved">this</span>.container.zpGridHeader || <span class="reserved">this</span>.container.zpGridTotals ||
	 <span class="reserved">this</span>.container.zpGridFixedLeft) {
		<span class="comment">// Synchronize header</span>
		<span class="reserved">if</span> (<span class="reserved">this</span>.container.zpGridHeader) {
			<span class="reserved">this</span>.container.zpGridHeader.scrollLeft = <span class="reserved">this</span>.container.scrollLeft;
		}
		<span class="comment">// Synchronize totals</span>
		<span class="reserved">if</span> (<span class="reserved">this</span>.container.zpGridTotals) {
			<span class="reserved">this</span>.container.zpGridTotals.scrollLeft = <span class="reserved">this</span>.container.scrollLeft;
		}
		<span class="comment">// Set up syncronizing on scroll</span>
		<span class="reserved">if</span> (<span class="reserved">this</span>.config.horizontal) {
			<span class="reserved">this</span>.createProperty(<span class="reserved">this</span>.container, <span class="literal">'onscroll'</span>, <span class="reserved">function</span>() {
				<span class="comment">// Synchronize fixed columns</span>
				<span class="reserved">if</span> (<span class="reserved">this</span>.zpGridFixedLeft) {
					<span class="reserved">this</span>.zpGridFixedLeft.style.left = <span class="reserved">this</span>.scrollLeft + <span class="literal">'px'</span>;
				}
				<span class="reserved">if</span> (<span class="reserved">this</span>.zpGridDataFixedLeft) {
					<span class="reserved">this</span>.zpGridDataFixedLeft.style.left = <span class="reserved">this</span>.scrollLeft + <span class="literal">'px'</span>;
				}
				<span class="reserved">if</span> (<span class="reserved">this</span>.zpGridTotalsFixedLeft) {
					<span class="reserved">this</span>.zpGridTotalsFixedLeft.style.top = <span class="reserved">this</span>.scrollTop + <span class="literal">'px'</span>;
				}
				<span class="comment">// Synchronize header</span>
				<span class="reserved">if</span> (<span class="reserved">this</span>.zpGridHeader) {
					<span class="reserved">this</span>.zpGridHeader.scrollLeft = <span class="reserved">this</span>.scrollLeft;
				}
				<span class="comment">// Synchronize totals</span>
				<span class="reserved">if</span> (<span class="reserved">this</span>.zpGridTotals) {
					<span class="reserved">this</span>.zpGridTotals.scrollTop = <span class="reserved">this</span>.scrollTop;
				}
			});
		} <span class="reserved">else</span> {
			<span class="reserved">this</span>.createProperty(<span class="reserved">this</span>.container, <span class="literal">'onscroll'</span>, <span class="reserved">function</span>() {
				<span class="comment">// Synchronize fixed columns</span>
				<span class="reserved">if</span> (<span class="reserved">this</span>.zpGridFixedLeft) {
					<span class="reserved">this</span>.zpGridFixedLeft.style.left = <span class="reserved">this</span>.scrollLeft + <span class="literal">'px'</span>;
				}
				<span class="reserved">if</span> (<span class="reserved">this</span>.zpGridDataFixedLeft) {
					<span class="reserved">this</span>.zpGridDataFixedLeft.style.left = <span class="reserved">this</span>.scrollLeft + <span class="literal">'px'</span>;
				}
				<span class="reserved">if</span> (<span class="reserved">this</span>.zpGridTotalsFixedLeft) {
					<span class="reserved">this</span>.zpGridTotalsFixedLeft.style.left = <span class="reserved">this</span>.scrollLeft + <span class="literal">'px'</span>;
				}
				<span class="comment">// Synchronize header</span>
				<span class="reserved">if</span> (<span class="reserved">this</span>.zpGridHeader) {
					<span class="reserved">this</span>.zpGridHeader.scrollLeft = <span class="reserved">this</span>.scrollLeft;
				}
				<span class="comment">// Synchronize totals</span>
				<span class="reserved">if</span> (<span class="reserved">this</span>.zpGridTotals) {
					<span class="reserved">this</span>.zpGridTotals.scrollLeft = <span class="reserved">this</span>.scrollLeft;
				}
			});
		}
	}
};

<span class="comment">/**
 * Aligns columns to the width of respective fields and fields to the maximum
 * height. Destroyed once the style sheet is applied.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.outAlignCols = <span class="reserved">function</span>() {
	<span class="comment">// Get stylesheet</span>
	<span class="reserved">if</span> (!Zapatec.StyleSheet) {
		<span class="reserved">return</span>;
	}
	var oStyle = new Zapatec.StyleSheet();
	var iGridId = <span class="reserved">this</span>.id;
	<span class="comment">// Get max height</span>
	var iMaxH = 0;
	var iMaxSpannedH = 0;
	var iSpan = 0;
	var iSpanH = 0;
	var aFields = <span class="reserved">this</span>.fields;
	var iFields = aFields.length;
	var bAutoWidth = (<span class="reserved">this</span>.config.columnWidth == <span class="literal">'auto'</span>);
	var iField, iCol, oField, iFieldId, oSpan, oDiv;
	<span class="reserved">for</span> (iField = 0, iCol = 0; iField &lt; iFields; iField++) {
		oField = aFields[iField];
		<span class="reserved">if</span> (!oField || oField.hidden) {
			continue;
		}
		iFieldId = oField.i;
		oSpan = document.getElementById(<span class="literal">'zpGrid'</span> + iGridId + <span class="literal">'Span'</span> + iFieldId);
		<span class="reserved">if</span> (oSpan) {
			iSpan = oSpan.getAttribute(<span class="literal">'colspan'</span>) * 1;
			iSpanH = oSpan.offsetHeight;
		}
		oDiv = document.getElementById(<span class="literal">'zpGrid'</span> + iGridId + <span class="literal">'Col'</span> + iFieldId + <span class="literal">'Title'</span>);
		<span class="reserved">if</span> (oDiv) {
			<span class="comment">// Set column width if fixed width is not defined for this column</span>
			<span class="reserved">if</span> (bAutoWidth &amp;&amp; !oField.columnWidth) {
				<span class="reserved">this</span>.outSetColWidth(iFieldId, oDiv.offsetWidth);
			}
			<span class="comment">// Get cell height</span>
			var iH = oDiv.offsetHeight;
			<span class="reserved">if</span> (iSpan) {
				<span class="comment">// Add span height</span>
				iH += iSpanH;
				<span class="reserved">if</span> (iMaxSpannedH &lt; iH) {
					iMaxSpannedH = iH;
				}
			} <span class="reserved">else</span> {
				<span class="reserved">if</span> (iMaxH &lt; iH) {
					iMaxH = iH;
				}
			}
		}
		<span class="reserved">if</span> (iSpan) {
			iSpan--;
		}
		iCol++;
	}
	<span class="comment">// Set heights to max</span>
	<span class="reserved">if</span> (iMaxH) {
		oStyle.addRule(<span class="literal">'#zpGrid'</span> + iGridId +
		 <span class="literal">'Container .zpGridTable .zpGridField .zpGridDiv'</span>,
		 <span class="literal">'height:'</span> + iMaxH + <span class="literal">'px'</span>);
	}
	<span class="reserved">if</span> (iMaxSpannedH) {
		oStyle.addRule(<span class="literal">'#zpGrid'</span> + iGridId +
		 <span class="literal">'Container .zpGridTable .zpGridField .zpGridSpannedDiv'</span>,
		 <span class="literal">'height:'</span> + iMaxSpannedH + <span class="literal">'px'</span>);
	}
	<span class="comment">// We don't need to do this again</span>
	<span class="reserved">this</span>.outAlignCols = null;
};

<span class="comment">/**
 * Synchronizes fixed and scrollable row heights.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.syncRowHeights = <span class="reserved">function</span>() {
	var oConfig = <span class="reserved">this</span>.config;
	var iGridId = <span class="reserved">this</span>.id;
	var sGridId = <span class="literal">'zpGrid'</span> + iGridId;
	<span class="comment">// Synchronize fixed and scrollable row heights</span>
	<span class="reserved">if</span> (oConfig.horizontal) {
		var aFields = <span class="reserved">this</span>.fields;
		var iFields = aFields.length;
		<span class="comment">// Rows</span>
		var sFieldId = sGridId + <span class="literal">'Field'</span>;
		var sTotal0CellId = sGridId + <span class="literal">'Total0Cell'</span>;
		var sSpanId = sGridId + <span class="literal">'Span'</span>;
		var iField, oField, iFieldId, oCellHidden, oCell;
		<span class="reserved">for</span> (iField = 0; iField &lt; iFields; iField++) {
			oField = aFields[iField];
			<span class="reserved">if</span> (!oField) {
				continue;
			}
			iFieldId = oField.i;
			<span class="comment">// Field</span>
			oCellHidden = document.getElementById(sFieldId + iFieldId + <span class="literal">'Hidden'</span>);
			<span class="reserved">if</span> (oCellHidden) {
				oCell = document.getElementById(sFieldId + iFieldId);
				<span class="reserved">if</span> (oCell) {
					<span class="reserved">this</span>.syncRowHeight(oCellHidden, oCell);
					<span class="reserved">this</span>.syncColumnWidth(oCellHidden, oCell);
				}
				<span class="comment">// Total</span>
				oCell = document.getElementById(sTotal0CellId + iFieldId + <span class="literal">'Hidden'</span>);
				<span class="reserved">if</span> (oCell) {
					<span class="reserved">this</span>.syncRowHeight(oCellHidden, oCell);
				}
				oCell = document.getElementById(sTotal0CellId + iFieldId);
				<span class="reserved">if</span> (oCell) {
					<span class="reserved">this</span>.syncRowHeight(oCellHidden, oCell);
				}
			}
			<span class="comment">// Span</span>
			oCellHidden = document.getElementById(sSpanId + iFieldId + <span class="literal">'Hidden'</span>);
			<span class="reserved">if</span> (oCellHidden) {
				oCell = document.getElementById(sSpanId + iFieldId);
				<span class="reserved">if</span> (oCell) {
					<span class="reserved">this</span>.syncColumnWidth(oCellHidden, oCell);
				}
			}
		}
		<span class="comment">// Totals</span>
		var sTotalId = sGridId + <span class="literal">'Total'</span>;
		var iRow;
		<span class="reserved">for</span> (iField = 0; iField &lt; iFields; iField++) {
			var oField = aFields[iField];
			<span class="reserved">if</span> (!oField) {
				continue;
			}
			iFieldId = oField.i;
			<span class="reserved">for</span> (iRow = 0; true; iRow++) {
				oCellHidden = document.getElementById(sTotalId + iRow + <span class="literal">'Cell'</span> +
				 iFieldId + <span class="literal">'Hidden'</span>);
				<span class="reserved">if</span> (!oCellHidden) {
					break;
				}
				oCell = document.getElementById(sTotalId + iRow + <span class="literal">'Cell'</span> + iFieldId);
				<span class="reserved">if</span> (!oCell) {
					break;
				}
				<span class="reserved">this</span>.syncColumnWidth(oCellHidden, oCell);
			}
		}
	} <span class="reserved">else</span> <span class="reserved">if</span> (oConfig.fixedLeft &gt; 0) {
		<span class="comment">// Rows</span>
		var aRows = <span class="reserved">this</span>.applyPaging();
		var iRows = aRows.length;
		var sRowId = sGridId + <span class="literal">'Row'</span>;
		var iRow, oRow, iRowId, oCellHidden, oCell;
		<span class="reserved">for</span> (iRow = 0; iRow &lt; iRows; iRow++) {
			oRow = aRows[iRow];
			<span class="reserved">if</span> (oRow) {
				iRowId = oRow.i;
				oCellHidden = document.getElementById(sRowId + iRowId + <span class="literal">'Cell0Hidden'</span>);
				<span class="reserved">if</span> (oCellHidden) {
					oCell = document.getElementById(sRowId + iRowId + <span class="literal">'Cell0'</span>);
					<span class="reserved">if</span> (oCell) {
						<span class="reserved">this</span>.syncRowHeight(oCellHidden, oCell);
					}
				}
			}
		}
		<span class="comment">// Totals</span>
		var sTotalId = sGridId + <span class="literal">'Total'</span>;
		<span class="reserved">for</span> (iRow = 0; true; iRow++) {
			oCellHidden = document.getElementById(sTotalId + iRow + <span class="literal">'Cell0Hidden'</span>);
			<span class="reserved">if</span> (!oCellHidden) {
				break;
			}
			oCell = document.getElementById(sTotalId + iRow + <span class="literal">'Cell0'</span>);
			<span class="reserved">if</span> (!oCell) {
				break;
			}
			<span class="reserved">this</span>.syncRowHeight(oCellHidden, oCell);
		}
	}
};

<span class="comment">/**
 * Synchronizes fixed and scrollable row heights.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oCellHidden First cell object of scrollable row
 * <span class="attrib">@param</span> {object} oCell First cell object of fixed row
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.syncRowHeight = <span class="reserved">function</span>(oCellHidden, oCell) {
	<span class="comment">// Get difference of heights</span>
	var oRow = oCellHidden.parentNode;
	<span class="reserved">if</span> (!oRow) {
		<span class="reserved">return</span>;
	}
	var iHeight = 0;
	var aCells = oRow.getElementsByTagName(<span class="literal">'td'</span>);
	var iCells = aCells.length;
	var iCell, iCellH;
	<span class="reserved">for</span> (iCell = 0; iCell &lt; iCells; iCell++) {
		<span class="reserved">if</span> (aCells[iCell].getAttribute(<span class="literal">'rowspan'</span>) &gt; 1) {
			continue;
		}
		iCellH = aCells[iCell].offsetHeight;
		<span class="reserved">if</span> (iHeight &lt; iCellH) {
			iHeight = iCellH;
		}
	}
	var oRowFixed = oCell.parentNode;
	<span class="reserved">if</span> (!oRowFixed) {
		<span class="reserved">return</span>;
	}
	var iHeightFixed = 0;
	var aCellsFixed = oRowFixed.getElementsByTagName(<span class="literal">'td'</span>);
	var iCellsFixed = aCellsFixed.length;
	<span class="reserved">for</span> (iCell = 0; iCell &lt; iCellsFixed; iCell++) {
		<span class="reserved">if</span> (aCellsFixed[iCell].getAttribute(<span class="literal">'rowspan'</span>) &gt; 1) {
			continue;
		}
		iCellH = aCellsFixed[iCell].offsetHeight;
		<span class="reserved">if</span> (iHeightFixed &lt; iCellH) {
			iHeightFixed = iCellH;
		}
	}
	var iDiff = iHeight - iHeightFixed;
	<span class="comment">// If there is difference</span>
	<span class="reserved">if</span> (iDiff) {
		<span class="comment">// Height will be applied to div because it doesn't work correctly for td</span>
		var oDiv = oCell.getElementsByTagName(<span class="literal">'div'</span>);
		<span class="reserved">if</span> (!oDiv) {
			<span class="reserved">return</span>;
		}
		oDiv = oDiv[0];
		<span class="reserved">if</span> (!oDiv) {
			<span class="reserved">return</span>;
		}
		<span class="comment">// Set row height</span>
		oDiv.style.height = iHeight + <span class="literal">'px'</span>;
		<span class="comment">// Adjust height in IE where border and padding are part of height</span>
		iHeight = 0;
		<span class="reserved">for</span> (iCell = 0; iCell &lt; iCells; iCell++) {
			<span class="reserved">if</span> (aCells[iCell].getAttribute(<span class="literal">'rowspan'</span>) &gt; 1) {
				continue;
			}
			iCellH = aCells[iCell].offsetHeight;
			<span class="reserved">if</span> (iHeight &lt; iCellH) {
				iHeight = iCellH;
			}
		}
		iHeightFixed = 0;
		<span class="reserved">for</span> (iCell = 0; iCell &lt; iCellsFixed; iCell++) {
			<span class="reserved">if</span> (aCellsFixed[iCell].getAttribute(<span class="literal">'rowspan'</span>) &gt; 1) {
				continue;
			}
			iCellH = aCellsFixed[iCell].offsetHeight;
			<span class="reserved">if</span> (iHeightFixed &lt; iCellH) {
				iHeightFixed = iCellH;
			}
		}
		iDiff = iHeight - iHeightFixed;
		<span class="comment">// If there is still difference</span>
		<span class="reserved">if</span> (iDiff) {
			<span class="comment">// Set row height</span>
			oDiv.style.height = (iHeight + iDiff) + <span class="literal">'px'</span>;
		}
	}
};

<span class="comment">/**
 * Synchronizes fixed and scrollable column width.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oCellHidden First cell object of scrollable row
 * <span class="attrib">@param</span> {object} oCell First cell object of fixed row
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.syncColumnWidth = <span class="reserved">function</span>(oCellHidden, oCell) {
	<span class="comment">// Width will be applied to div because it doesn't work correctly for td</span>
	var oDiv = oCell.getElementsByTagName(<span class="literal">'div'</span>);
	<span class="reserved">if</span> (!oDiv) {
		<span class="reserved">return</span>;
	}
	oDiv = oDiv[0];
	<span class="reserved">if</span> (!oDiv) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get difference of widths</span>
	var iDiff = oCellHidden.offsetWidth - oCell.offsetWidth;
	<span class="comment">// If there is difference</span>
	<span class="reserved">if</span> (iDiff) {
		<span class="comment">// Calculate new cell width</span>
		var iWidth = oDiv.offsetWidth + iDiff;
		<span class="comment">// Set width of td element</span>
		oDiv.style.width = iWidth + <span class="literal">'px'</span>;
	}
};

<span class="comment">/**
 * Synchronizes containers when theme is loaded. Attached to loadThemeEnd event.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.visualizeThemeLoad = <span class="reserved">function</span>() {
	<span class="reserved">if</span> (!<span class="reserved">this</span>.visualize) {
		<span class="reserved">return</span>;
	}
	<span class="reserved">this</span>.syncContainers();
};

<span class="comment">/**
 * Synchronizes containers when grid is refreshed.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.visualizeRefresh = <span class="reserved">function</span>() {
	<span class="reserved">this</span>.syncContainers();
};

<span class="comment">/**
 * Sets column widths and row heights after data loading. Attached to
 * loadDataEnd event.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.visualizeDataLoad = <span class="reserved">function</span>() {
	<span class="reserved">if</span> (!<span class="reserved">this</span>.container || !<span class="reserved">this</span>.visualize) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// We don't need this listener any more</span>
	<span class="comment">// Because when dataOnDemand is used, loadDataEnd event may occur several</span>
	<span class="comment">// times and it will overwrite column sizes set manually</span>
	<span class="reserved">this</span>.removeEventListener(<span class="literal">'loadDataEnd'</span>, <span class="reserved">this</span>.visualizeDataLoad);
	<span class="comment">// If there is separate container for header</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.headerContainer) {
		<span class="comment">// Set header overflow</span>
		<span class="reserved">this</span>.headerContainer.style.overflow = <span class="literal">'hidden'</span>;
	}
	<span class="comment">// If there is separate container for totals</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.totalsContainer) {
		<span class="comment">// Set totals overflow</span>
		<span class="reserved">this</span>.totalsContainer.style.overflow = <span class="literal">'hidden'</span>;
	}
	<span class="comment">// Sets column widths and row heights</span>
	<span class="reserved">this</span>.outSetCellDims();
};

<span class="comment">/**
 * Sets column widths and row heights.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.outSetCellDims = <span class="reserved">function</span>() {
	<span class="comment">// Get stylesheet</span>
	<span class="reserved">if</span> (!Zapatec.StyleSheet) {
		<span class="reserved">return</span>;
	}
	var oStyle = new Zapatec.StyleSheet(true);
	var aTpl = [
		<span class="literal">'#zpGrid'</span>,
		<span class="reserved">this</span>.id.toString(),
		<span class="literal">''</span>,
		<span class="literal">'Container .zpGridTable .zpGridDiv'</span>
	];
	var oConfig = <span class="reserved">this</span>.config;
	var bHoriz = oConfig.horizontal;
	var sWidth = <span class="literal">'width:'</span> + oConfig.columnWidth;
	var sHeight = <span class="literal">'height:'</span> + oConfig.rowHeight;
	<span class="comment">// Set default column width and row height</span>
	var sRule = aTpl.join(<span class="literal">''</span>);
	oStyle.addRule(sRule, sWidth);
	oStyle.addRule(sRule, sHeight);
	<span class="comment">// Header</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.headerContainer) {
		aTpl[2] = <span class="literal">'Data'</span>;
		sRule = aTpl.join(<span class="literal">''</span>);
		oStyle.addRule(sRule, sWidth);
		oStyle.addRule(sRule, sHeight);
	}
	<span class="comment">// Totals</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.totalsContainer) {
		aTpl[2] = <span class="literal">'Totals'</span>;
		sRule = aTpl.join(<span class="literal">''</span>);
		<span class="reserved">if</span> (!bHoriz) {
			oStyle.addRule(sRule, sWidth);
		}
		oStyle.addRule(sRule, sHeight);
	}
	<span class="reserved">if</span> (!bHoriz) {
		<span class="comment">// Set fixed column widths</span>
		var aFields = <span class="reserved">this</span>.fields;
		var iFields = aFields.length;
		var iField, iCol, oField, iColWidth;
		<span class="reserved">for</span> (iField = 0, iCol = 0; iField &lt; iFields; iField++) {
			<span class="comment">// Get field</span>
			oField = aFields[iField];
			<span class="comment">// Skip hidden columns</span>
			<span class="reserved">if</span> (!oField || oField.hidden) {
				continue;
			}
			iColWidth = oField.columnWidth;
			<span class="reserved">if</span> (iColWidth) {
				<span class="reserved">this</span>.outSetColWidth(oField.i, iColWidth);
			}
			iCol++;
		}
	}
};

<span class="comment">/**
 * Sets column width.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {number} iColId Column id
 * <span class="attrib">@param</span> {string} iWidth Column width in px
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.outSetColWidth = <span class="reserved">function</span>(iColId, iWidth) {
	<span class="comment">// Check arguments</span>
	<span class="reserved">if</span> (!iWidth) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get stylesheet</span>
	<span class="reserved">if</span> (!Zapatec.StyleSheet) {
		<span class="reserved">return</span>;
	}
	var oStyle = new Zapatec.StyleSheet(true);
	<span class="comment">// Correct CSS length</span>
	var sWidth = <span class="literal">'width:'</span> + Zapatec.Utils.correctCssLength(iWidth);
	<span class="comment">// Set column width</span>
	var aTpl = [
		<span class="literal">'#zpGrid'</span>,
		<span class="reserved">this</span>.id.toString(),
		<span class="literal">''</span>,
		<span class="literal">'Container .zpGridTable .zpGridColId'</span>,
		iColId.toString(),
		<span class="literal">' .zpGridDiv'</span>
	];
	<span class="comment">// Set width for div and td to make sure they both are resized in FF</span>
	<span class="comment">// To replicate open editable.html in FF and try to minimize all columns</span>
	oStyle.addRule(aTpl.join(<span class="literal">''</span>), sWidth);
	<span class="comment">// Prevent setting width of span</span>
	<span class="reserved">if</span> (!<span class="reserved">this</span>.fields[iColId].span) {
		aTpl[5] = <span class="literal">''</span>;
		oStyle.addRule(aTpl.join(<span class="literal">''</span>), sWidth);
	}
	<span class="comment">// Data</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.headerContainer) {
		aTpl[2] = <span class="literal">'Data'</span>;
		aTpl[5] = <span class="literal">' .zpGridDiv'</span>;
		oStyle.addRule(aTpl.join(<span class="literal">''</span>), sWidth);
		aTpl[5] = <span class="literal">''</span>;
		oStyle.addRule(aTpl.join(<span class="literal">''</span>), sWidth);
	}
	<span class="comment">// Totals</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.totalsContainer) {
		aTpl[2] = <span class="literal">'Totals'</span>;
		aTpl[5] = <span class="literal">' .zpGridDiv'</span>;
		oStyle.addRule(aTpl.join(<span class="literal">''</span>), sWidth);
		aTpl[5] = <span class="literal">''</span>;
		oStyle.addRule(aTpl.join(<span class="literal">''</span>), sWidth);
	}
};

<span class="comment">/**
 * Changes width of all columns. Useful for dynamic grid resizing.
 *
 * <span class="attrib">@param</span> {string} iWidth New column width in px
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.changeColumnWidth = <span class="reserved">function</span>(iWidth) {
	<span class="comment">// Check arguments</span>
	<span class="reserved">if</span> (!iWidth) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get stylesheet</span>
	<span class="reserved">if</span> (!Zapatec.StyleSheet) {
		<span class="reserved">return</span>;
	}
	var oStyle = new Zapatec.StyleSheet(true);
	<span class="comment">// Correct CSS length</span>
	var aTpl = [
		<span class="literal">'#zpGrid'</span>,
		<span class="reserved">this</span>.id.toString(),
		<span class="literal">''</span>,
		<span class="literal">'Container .zpGridTable .zpGridCell'</span>,
		<span class="literal">' .zpGridDiv'</span>
	];
	var sWidth = <span class="literal">'width:'</span> + Zapatec.Utils.correctCssLength(iWidth);
	<span class="comment">// Set width for div and td to make sure they both are resized in FF</span>
	oStyle.addRule(aTpl.join(<span class="literal">''</span>), sWidth);
	aTpl[4] = <span class="literal">''</span>;
	oStyle.addRule(aTpl.join(<span class="literal">''</span>), sWidth);
	<span class="comment">// Data</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.headerContainer) {
		aTpl[2] = <span class="literal">'Data'</span>;
		aTpl[4] = <span class="literal">' .zpGridDiv'</span>;
		oStyle.addRule(aTpl.join(<span class="literal">''</span>), sWidth);
		aTpl[4] = <span class="literal">''</span>;
		oStyle.addRule(aTpl.join(<span class="literal">''</span>), sWidth);
	}
	<span class="comment">// Totals</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.totalsContainer) {
		aTpl[2] = <span class="literal">'Totals'</span>;
		aTpl[4] = <span class="literal">' .zpGridDiv'</span>;
		oStyle.addRule(aTpl.join(<span class="literal">''</span>), sWidth);
		aTpl[4] = <span class="literal">''</span>;
		oStyle.addRule(aTpl.join(<span class="literal">''</span>), sWidth);
	}
};

<span class="comment">/**
 * Forms grid output.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} aHtml Output array
 * <span class="attrib">@param</span> {boolean} bFixed (Optional) Indicates that this is fixed part of data
 * <span class="attrib">@param</span> {string} aHtml (Otional) Table id
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.outputTableOpen = <span class="reserved">function</span>(aHtml, bFixed, sId) {
	aHtml.push(<span class="literal">'&lt;table class="'</span>);
	aHtml.push(<span class="reserved">this</span>.getClassName({prefix: <span class="literal">'zpGrid'</span>}));
	<span class="comment">// Prevent text selection</span>
	aHtml.push(<span class="literal">'" cellpadding="0" cellspacing="0" ondrag="return false" style="-khtml-user-select:none"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="zpGridTable'</span>);
	<span class="reserved">if</span> (bFixed) {
		aHtml.push(<span class="literal">' zpGridTableFixed'</span>);
	}
	<span class="reserved">if</span> (sId) {
		aHtml.push(<span class="literal">'" id="'</span>);
		aHtml.push(sId);
	}
	aHtml.push(<span class="literal">'"&gt;&lt;table class="zpGridTableTable'</span>);
	<span class="reserved">if</span> (sId) {
		aHtml.push(<span class="literal">'" id="'</span>);
		aHtml.push(sId);
		aHtml.push(<span class="literal">'Table'</span>);
	}
	aHtml.push(<span class="literal">'" style="'</span>);
	<span class="reserved">if</span> (<span class="reserved">this</span>.data.style) {
		aHtml.push(<span class="reserved">this</span>.data.style);
	}
	aHtml.push(<span class="literal">'"&gt;&lt;tbody&gt;'</span>);
};

<span class="comment">/**
 * Forms grid output.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} aHtml Output array
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.outputTableClose = <span class="reserved">function</span>(aHtml) {
	aHtml.push(<span class="literal">'&lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;'</span>);
};

<span class="comment">/**
 * Forms grid output.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} aHtml Output array
 * <span class="attrib">@param</span> {object} aCols Array with field objects to output
 * <span class="attrib">@param</span> {object} aFixedCols Array with fixed field objects to output
 * <span class="attrib">@param</span> {object} aSpans Array with spans
 * <span class="attrib">@param</span> {object} aRows Array with row objects to output
 * <span class="attrib">@param</span> {object} aTotals Array with total row objects to output
 * <span class="attrib">@param</span> {boolean} bFixed Optional. Indicates that this is fixed part of header
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.outputFields = <span class="reserved">function</span>(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals, bFixed) {
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.horizontal) {
		<span class="comment">// Horizontal layout</span>
		<span class="reserved">this</span>.outputFieldsHoriz(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals,
		 bFixed);
	} <span class="reserved">else</span> {
		<span class="comment">// Vertical layout</span>
		<span class="reserved">this</span>.outputFieldsVert(aHtml, aCols, aSpans, aRows, bFixed);
	}
};

<span class="comment">/**
 * Forms grid output.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} aHtml Output array
 * <span class="attrib">@param</span> {object} aCols Array with field objects to output
 * <span class="attrib">@param</span> {object} aFixedCols Array with fixed field objects to output
 * <span class="attrib">@param</span> {object} aSpans Array with spans
 * <span class="attrib">@param</span> {object} aRows Array with row objects to output
 * <span class="attrib">@param</span> {object} aTotals Array with total row objects to output
 * <span class="attrib">@param</span> {boolean} bFixed Optional. Indicates that this is fixed part of header
 * <span class="attrib">@param</span> {boolean} bSecondRow (Optional) Indicates that this is second row
 * of header
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.outputFieldsHoriz = <span class="reserved">function</span>(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals, bFixed, bSecondRow) {
	var iSpanned = 0;
	<span class="comment">// Fixed columns become header</span>
	var iCols = aCols.length;
	var iFixedCols = aFixedCols.length;
	var iSpans = aSpans.length;
	var iRows = aRows.length;
	var iTotals = 0;
	<span class="reserved">if</span> (aTotals &amp;&amp; !<span class="reserved">this</span>.totalsContainer &amp;&amp; <span class="reserved">this</span>.outputTotalsCell) {
		iTotals = aTotals.length;
	}
	var iCol, oField, aCl, sClass, aTr, oSpan, iRow;
	<span class="reserved">for</span> (iCol = 0; iCol &lt; iFixedCols; iCol++) {
		<span class="comment">// Get field object</span>
		oField = aFixedCols[iCol];
		<span class="comment">// Form tr</span>
		aCl = [];
		aCl.push(<span class="literal">'zpGridCol zpGridCol'</span>);
		aCl.push(iCol);
		aCl.push(<span class="literal">' zpGridColFixed zpGridColFixed'</span>);
		aCl.push(iCol);
		<span class="reserved">if</span> (iCol % 2 == 1) {
			aCl.push(<span class="literal">' zpGridColOdd zpGridColFixedOdd'</span>);
		} <span class="reserved">else</span> {
			aCl.push(<span class="literal">' zpGridColEven zpGridColFixedEven'</span>);
		}
		<span class="reserved">if</span> (iCol == iFixedCols - 1) {
			aCl.push(<span class="literal">' zpGridColFixedLast'</span>);
		}
		sClass = aCl.join(<span class="literal">''</span>);
		aTr = [];
		aTr.push(<span class="literal">'&lt;tr id="zpGrid'</span>);
		aTr.push(<span class="reserved">this</span>.id);
		aTr.push(<span class="literal">'Col'</span>);
		aTr.push(oField.i);
		<span class="reserved">if</span> (bFixed) {
			aTr.push(<span class="literal">'Fixed'</span>);
		}
		aTr.push(<span class="literal">'" class="'</span>);
		aTr.push(sClass);
		<span class="reserved">if</span> (<span class="reserved">this</span>.data.headerStyle) {
			aTr.push(<span class="literal">'" style="'</span>);
			aTr.push(<span class="reserved">this</span>.data.headerStyle);
		}
		aTr.push(<span class="literal">'"&gt;'</span>);
		<span class="reserved">if</span> (iSpans) {
			<span class="comment">// Output span</span>
			oSpan = aSpans[oField.i];
			<span class="reserved">if</span> (oSpan) {
				<span class="reserved">this</span>.outputSpan(aTr, oField, iCol, oSpan, iCols, !bFixed);
				iSpanned = oSpan.spanned - 1;
				<span class="comment">// Output field</span>
				<span class="reserved">this</span>.outputField(aTr, oField, iCol, iCols, !bFixed);
			} <span class="reserved">else</span> {
				<span class="comment">// Output field</span>
				<span class="reserved">if</span> (iSpanned) {
					<span class="reserved">this</span>.outputField(aTr, oField, iCol, iCols, !bFixed);
					iSpanned--;
				} <span class="reserved">else</span> {
					<span class="reserved">this</span>.outputField(aTr, oField, iCol, iCols, !bFixed, true);
				}
			}
		} <span class="reserved">else</span> {
			<span class="comment">// Output field</span>
			<span class="reserved">this</span>.outputField(aTr, oField, iCol, iCols, !bFixed);
		}
		<span class="reserved">if</span> (!bFixed) {
			<span class="comment">// Output rows</span>
			<span class="reserved">for</span> (iRow = 0; iRow &lt; iRows; iRow++) {
				<span class="reserved">this</span>.outputCell(aTr, oField, aRows[iRow], iCol, iRow, iRows);
			}
			<span class="comment">// Output totals</span>
			<span class="reserved">for</span> (iRow = 0; iRow &lt; iTotals; iRow++) {
				<span class="reserved">this</span>.outputTotalsCell(aTr, oField, aTotals[iRow], iCol, iRow, iTotals);
			}
		}
		aTr.push(<span class="literal">'&lt;/tr&gt;'</span>);
		aHtml.push(aTr.join(<span class="literal">''</span>));
	}
};

<span class="comment">/**
 * Forms grid output.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} aHtml Output array
 * <span class="attrib">@param</span> {object} aCols Array with field objects to output
 * <span class="attrib">@param</span> {object} aSpans Array with spans
 * <span class="attrib">@param</span> {object} aRows Array with row objects to output
 * <span class="attrib">@param</span> {boolean} bFixed Optional. Indicates that this is fixed part of header
 * <span class="attrib">@param</span> {boolean} bSecondRow Optional. Indicates that this is second row of
 * header
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.outputFieldsVert = <span class="reserved">function</span>(aHtml, aCols, aSpans, aRows, bFixed, bSecondRow) {
	var aTr = [];
	aTr.push(<span class="literal">'&lt;tr id="zpGrid'</span>);
	aTr.push(<span class="reserved">this</span>.id);
	aTr.push(<span class="literal">'Head'</span>);
	<span class="reserved">if</span> (bFixed) {
		aTr.push(<span class="literal">'Fixed'</span>);
	}
	<span class="reserved">if</span> (bSecondRow) {
		aTr.push(<span class="literal">'2'</span>);
	}
	aTr.push(<span class="literal">'" class="zpGridRow zpGridHeadRow zpGridRow0 zpGridRowEven"'</span>);
	<span class="reserved">if</span> (<span class="reserved">this</span>.data.headerStyle) {
		aTr.push(<span class="literal">' style="'</span>);
		aTr.push(<span class="reserved">this</span>.data.headerStyle);
		aTr.push(<span class="literal">'"'</span>);
	}
	aTr.push(<span class="literal">'&gt;'</span>);
	<span class="comment">// Get field number</span>
	var iFixedLeft = <span class="reserved">this</span>.config.fixedLeft;
	var aFields = <span class="reserved">this</span>.fields;
	var iFields = aFields.length;
	var iShow = bFixed ? iFixedLeft : iFields;
	<span class="comment">// Check if there are spans</span>
	var bTwoRows = false;
	<span class="reserved">if</span> (!bSecondRow &amp;&amp; aSpans.length) {
		bTwoRows = true;
	}
	<span class="comment">// Display fields</span>
	var iCols = aCols.length;
	var bHiddenCols = (!bFixed &amp;&amp; iFixedLeft);
	var oField, oSpan, bHidden;
	<span class="reserved">for</span> (var iField = 0, iSpan = 0, iCol = 0; iField &lt; iFields &amp;&amp; iField &lt; iShow;
	 iField++) {
		<span class="comment">// Get field</span>
		oField = aFields[iField];
		<span class="comment">// Skip hidden columns</span>
		<span class="reserved">if</span> (!oField || oField.hidden) {
			continue;
		}
		<span class="comment">// Get span</span>
		oSpan = aSpans[iField];
		<span class="reserved">if</span> (oSpan) {
			iSpan += oSpan.spanned;
		}
		<span class="comment">// Display field</span>
		bHidden = (bHiddenCols &amp;&amp; iCol &lt; iFixedLeft);
		<span class="reserved">if</span> (!bSecondRow) {
			<span class="comment">// Show all columns and spans instead of spanned columns</span>
			<span class="reserved">if</span> (oSpan) {
				<span class="comment">// Display span</span>
				<span class="reserved">this</span>.outputSpan(aTr, oField, iCol, oSpan, iCols, bHidden);
				iCol += iSpan;
				iField = oSpan.fields[oSpan.fields.length - 1].i;
				iSpan = 0;
			} <span class="reserved">else</span> {
				<span class="reserved">this</span>.outputField(aTr, oField, iCol, iCols, bHidden, bTwoRows);
				iCol++;
			}
		} <span class="reserved">else</span> {
			<span class="comment">// Show only spanned columns</span>
			<span class="reserved">if</span> (iSpan) {
				<span class="reserved">this</span>.outputField(aTr, oField, iCol, iCols, bHidden);
				<span class="comment">// Decrement span</span>
				iSpan--;
			}
			iCol++;
		}
	}
	aTr.push(<span class="literal">'&lt;/tr&gt;'</span>);
	aHtml.push(aTr.join(<span class="literal">''</span>));
	<span class="comment">// Display second row if needed</span>
	<span class="reserved">if</span> (bTwoRows) {
		<span class="reserved">this</span>.outputFieldsVert(aHtml, aCols, aSpans, aRows, bFixed, true);
	}
};

<span class="comment">/**
 * Forms grid output.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} aHtml Output array
 * <span class="attrib">@param</span> {number} oField Field object
 * <span class="attrib">@param</span> {number} iCol Visible column number
 * <span class="attrib">@param</span> {number} oSpan Number of spanned columns, span title and style
 * <span class="attrib">@param</span> {number} iCols Visible column count
 * <span class="attrib">@param</span> {boolean} bHidden (Optional) Indicates that this is hidden part of
 * fixed part of header
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.outputSpan = <span class="reserved">function</span>(aHtml, oField, iCol, oSpan, iCols, bHidden) {
	var aCl = [];
	aCl.push(<span class="literal">'zpGridCell zpGridCell'</span>);
	aCl.push(iCol);
	aCl.push(<span class="literal">' zpGridField zpGridField'</span>);
	aCl.push(iCol);
	aCl.push(<span class="literal">' zpGridFieldSpan zpGridFieldSpan'</span>);
	aCl.push(iCol);
	aCl.push(<span class="literal">' zpGridColId'</span>);
	aCl.push(oSpan.fields[0].i);
	<span class="reserved">if</span> (iCol % 2 == 1) {
		aCl.push(<span class="literal">' zpGridCellOdd zpGridFieldOdd zpGridFieldSpanOdd'</span>);
	} <span class="reserved">else</span> {
		aCl.push(<span class="literal">' zpGridCellEven zpGridFieldEven zpGridFieldSpanEven'</span>);
	}
	<span class="reserved">if</span> (iCol + oSpan.spanned == iCols) {
		aCl.push(<span class="literal">' zpGridCellLast zpGridFieldLast zpGridFieldSpanLast'</span>);
	}
	var sClass = aCl.join(<span class="literal">''</span>);
	aCl.push(<span class="literal">' zpGridCellActive zpGridCellActive'</span>);
	aCl.push(iCol);
	aCl.push(<span class="literal">' zpGridFieldActive zpGridFieldActive'</span>);
	aCl.push(iCol);
	aCl.push(<span class="literal">' zpGridFieldSpanActive zpGridFieldSpanActive'</span>);
	aCl.push(iCol);
	<span class="reserved">if</span> (iCol % 2 == 1) {
		aCl.push(
		 <span class="literal">' zpGridCellActiveOdd zpGridFieldActiveOdd zpGridFieldSpanActiveOdd'</span>);
	} <span class="reserved">else</span> {
		aCl.push(
		 <span class="literal">' zpGridCellActiveEven zpGridFieldActiveEven zpGridFieldSpanActiveEven'</span>);
	}
	<span class="reserved">if</span> (iCol + oSpan.spanned == iCols) {
		aCl.push(
		 <span class="literal">' zpGridCellActiveLast zpGridFieldActiveLast zpGridFieldSpanActiveLast'</span>);
	}
	var sClassActive = aCl.join(<span class="literal">''</span>);
	var aTd = [];
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.horizontal) {
		aTd.push(<span class="literal">'&lt;td rowspan="'</span>);
	} <span class="reserved">else</span> {
		aTd.push(<span class="literal">'&lt;td colspan="'</span>);
	}
	aTd.push(oSpan.spanned);
	aTd.push(<span class="literal">'" class="'</span>);
	aTd.push(sClass);
	aTd.push(<span class="literal">'" id="zpGrid'</span>);
	aTd.push(<span class="reserved">this</span>.id);
	aTd.push(<span class="literal">'Span'</span>);
	aTd.push(oSpan.fields[0].i);
	<span class="reserved">if</span> (bHidden) {
		aTd.push(<span class="literal">'Hidden'</span>);
	} <span class="reserved">else</span> {
		aTd.push(<span class="literal">'" onmouseover="this.className=\'</span><span class="literal">');
		aTd.push(sClassActive);
		aTd.push('</span>\<span class="literal">'" onmouseout="this.className=\'</span><span class="literal">');
		aTd.push(sClass);
		aTd.push("'</span><span class="literal">");
	}
	if (oSpan.fields[0].spanStyle) {
		aTd.push('"</span> style=<span class="literal">"');
		aTd.push(oSpan.fields[0].spanStyle);
	}
	// Resizing
	aTd.push('"</span>&gt;&lt;div style=<span class="literal">"position:relative;overflow:visible"</span>&gt;<span class="literal">');
	// No need to resize hidden part of the grid
	if (!bHidden) {
		// Resizing is implemented only for vertical layout
		if (!this.config.horizontal) {
			aTd.push('</span>&lt;div id=<span class="literal">"zpGrid');
			aTd.push(this.id);
			aTd.push('Span');
			aTd.push(oField.i);
			aTd.push('Margin"</span> class=<span class="literal">"zpGridColMargin"</span>&gt;&lt;/div&gt;&lt;div id=<span class="literal">"zpGrid');
			aTd.push(this.id);
			aTd.push('Span');
			aTd.push(oField.i);
			// "</span><span class="reserved">return</span> false<span class="literal">" stops selection in Opera
			aTd.push('Resize"</span> onmousedown=<span class="literal">"Zapatec.Drag.start(window.event,this.id,{horizontal:true,limitLeft:10});return false"</span> class=<span class="literal">"zpGridColResizeHidden"</span>&gt;&lt;/div&gt;<span class="literal">');
		}
	}
	aTd.push('</span>&lt;span class=<span class="literal">"zpGridSpan"</span>&gt;<span class="literal">');
	aTd.push(oSpan.fields[0].spanTitle);
	aTd.push('</span>&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;<span class="literal">');
	aHtml.push(aTd.join('</span><span class="literal">'));
};

/**
 * Forms grid output.
 *
 * @private
 * @param {object} aHtml Output array
 * @param {number} oField Field object
 * @param {number} iCol Visible column number
 * @param {number} iCols Visible column count
 * @param {boolean} bHidden (Optional) Indicates that this is hidden part of
 * fixed part of header
 * @param {boolean} bTwoRows (Optional) Indicates that this cell spans two
 * rows
 */
Zapatec.Grid.prototype.outputField = function(aHtml, oField, iCol, iCols, bHidden, bTwoRows) {
	if (oField.i &gt;= this.config.fixedLeft &amp;&amp;
	 oField.i &lt; this.currentHorizontalOffset + this.config.fixedLeft) {
		// Hidden column
		return;
	}
	if (this.config.visibleColumns) {
		bHidden = false;
	}
	var sId = this.id.toString();
	var sFieldId = oField.i.toString();
	var aCl = [];
	aCl.push('</span>zpGridCell zpGridCell<span class="literal">');
	aCl.push(iCol);
	aCl.push('</span> zpGridField zpGridField<span class="literal">');
	aCl.push(iCol);
	aCl.push('</span> zpGridColId<span class="literal">');
	aCl.push(sFieldId);
	if (iCol % 2 == 1) {
		aCl.push('</span> zpGridCellOdd zpGridFieldOdd<span class="literal">');
	} else {
		aCl.push('</span> zpGridCellEven zpGridFieldEven<span class="literal">');
	}
	if (iCol == iCols - 1) {
		aCl.push('</span> zpGridCellLast zpGridFieldLast<span class="literal">');
	}
	if (!oField.nosort) {
		if (oField.sorted) {
			aCl.push('</span> zpGridSortedAsc<span class="literal">');
		} else if (oField.sortedDesc) {
			aCl.push('</span> zpGridSortedDesc<span class="literal">');
		}
	}
	var sClass = aCl.join('</span><span class="literal">');
	aCl.push('</span> zpGridCellActive zpGridCellActive<span class="literal">');
	aCl.push(iCol);
	aCl.push('</span> zpGridFieldActive zpGridFieldActive<span class="literal">');
	aCl.push(iCol);
	if (iCol % 2 == 1) {
		aCl.push('</span> zpGridCellActiveOdd zpGridFieldActiveOdd<span class="literal">');
	} else {
		aCl.push('</span> zpGridCellActiveEven zpGridFieldActiveEven<span class="literal">');
	}
	if (iCol == iCols - 1) {
		aCl.push('</span> zpGridCellActiveLast zpGridFieldActiveLast<span class="literal">');
	}
	if (!oField.nosort) {
		if (oField.sorted) {
			aCl.push('</span> zpGridSortedAscActive<span class="literal">');
		} else if (oField.sortedDesc) {
			aCl.push('</span> zpGridSortedDescActive<span class="literal">');
		}
	}
	var sClassActive = aCl.join('</span><span class="literal">');
	var aTd = [];
	aTd.push('</span>&lt;td<span class="literal">');
	if (bTwoRows) {
		if (this.config.horizontal) {
			aTd.push('</span> colspan=<span class="literal">"2"</span><span class="literal">');
		} else {
			aTd.push('</span> rowspan=<span class="literal">"2"</span><span class="literal">');
		}
	}
	aTd.push('</span> class=<span class="literal">"');
	aTd.push(sClass);
	aTd.push('"</span> id=<span class="literal">"zpGrid');
	aTd.push(sId);
	aTd.push('Field');
	aTd.push(sFieldId);
	if (bHidden) {
		aTd.push('Hidden');
	} else {
		aTd.push('"</span> onmouseover=<span class="literal">"this.className=\'');
		aTd.push(sClassActive);
		aTd.push('\'"</span> onmouseout=<span class="literal">"this.className=\'');
		aTd.push(sClass);
		aTd.push("</span><span class="literal">'");
		if (!oField.nosort) {
			aTd.push('</span><span class="literal">" onclick="</span>Zapatec.Grid.sort(\<span class="literal">''</span>);
			aTd.push(sId);
			aTd.push(<span class="literal">"','"</span>);
			aTd.push(sFieldId);
			aTd.push(<span class="literal">"')"</span>);
		}
		aTd.push(<span class="literal">'" onmousedown="Zapatec.Widget.callMethod('</span>);
		aTd.push(sId);
		aTd.push(<span class="literal">",'fireEvent','gridFieldMousedown',"</span>);
		aTd.push(sFieldId);
		aTd.push(<span class="literal">')'</span>);
		aTd.push(<span class="literal">'" onmouseup="Zapatec.Widget.callMethod('</span>);
		aTd.push(sId);
		aTd.push(<span class="literal">",'fireEvent','gridFieldMouseup',"</span>);
		aTd.push(sFieldId);
		aTd.push(<span class="literal">')'</span>);
	}
	<span class="reserved">if</span> (oField.style) {
		aTd.push(<span class="literal">'" style="'</span>);
		aTd.push(oField.style);
	}
	<span class="comment">// div is needed to be able to set column width</span>
	<span class="comment">// span is needed to be able to set right margin for arrow</span>
	<span class="comment">// Resizing</span>
	aTd.push(<span class="literal">'"&gt;&lt;div style="position:relative;overflow:visible"&gt;'</span>);
	<span class="comment">// No need to resize hidden part of the grid</span>
	<span class="reserved">if</span> (!bHidden) {
		<span class="comment">// Resizing is implemented only for vertical layout</span>
		<span class="reserved">if</span> (!<span class="reserved">this</span>.config.horizontal) {
			aTd.push(<span class="literal">'&lt;div id="zpGrid'</span>);
			aTd.push(sId);
			aTd.push(<span class="literal">'Col'</span>);
			aTd.push(sFieldId);
			aTd.push(<span class="literal">'Margin" class="zpGridColMargin"&gt;&lt;/div&gt;&lt;div id="zpGrid'</span>);
			aTd.push(sId);
			aTd.push(<span class="literal">'Col'</span>);
			aTd.push(sFieldId);
			<span class="comment">// "return false" stops selection in Opera</span>
			aTd.push(<span class="literal">'Resize" onmousedown="Zapatec.Drag.start(window.event,this.id,{horizontal:true,limitLeft:10});return false" class="zpGridColResizeHidden"&gt;&lt;/div&gt;'</span>);
		}
	}
	aTd.push(<span class="literal">'&lt;div class="zpGridDiv'</span>);
	<span class="reserved">if</span> (bTwoRows) {
		aTd.push(<span class="literal">' zpGridSpannedDiv'</span>);
	}
	<span class="comment">// Set cell type</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.getClassByType) {
		aTd.push(<span class="literal">' '</span>);
		aTd.push(<span class="reserved">this</span>.getClassByType(<span class="reserved">this</span>.getFieldType(oField)));
	}
	aTd.push(<span class="literal">'" id="zpGrid'</span>);
	aTd.push(sId);
	aTd.push(<span class="literal">'Col'</span>);
	aTd.push(sFieldId);
	aTd.push(<span class="literal">'Title'</span>);
	<span class="reserved">if</span> (bHidden) {
		aTd.push(<span class="literal">'Hidden'</span>);
	}
	aTd.push(<span class="literal">'"&gt;&lt;span class="zpGridSpan" onselectstart="return false" style="-moz-user-select:none" id="zpGrid'</span>);
	aTd.push(sId);
	aTd.push(<span class="literal">'Col'</span>);
	aTd.push(sFieldId);
	aTd.push(<span class="literal">'Title'</span>);
	<span class="reserved">if</span> (bHidden) {
		aTd.push(<span class="literal">'Hidden'</span>);
	}
	aTd.push(<span class="literal">'Span"&gt;'</span>);
	aTd.push(oField.title);
	aTd.push(<span class="literal">'&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;'</span>);
	aHtml.push(aTd.join(<span class="literal">''</span>));
};

<span class="comment">/**
 * Forms grid output.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} aHtml Output array
 * <span class="attrib">@param</span> {object} aCols Array with field objects to output
 * <span class="attrib">@param</span> {object} aFixedCols Array with fixed field objects to output
 * <span class="attrib">@param</span> {object} aSpans Array with spans
 * <span class="attrib">@param</span> {object} aRows Array with row objects to output
 * <span class="attrib">@param</span> {object} aTotals Array with total row objects to output
 * <span class="attrib">@param</span> {boolean} bFixed Optional. Indicates that this is fixed part of table
 * <span class="attrib">@param</span> {object} oContr Optional. Data container
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.outputRows = <span class="reserved">function</span>(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals, bFixed, oContr) {
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.horizontal) {
		<span class="comment">// Horizontal layout</span>
		<span class="reserved">this</span>.outputRowsHoriz(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals, bFixed);
	} <span class="reserved">else</span> {
		<span class="comment">// Vertical layout</span>
		<span class="reserved">this</span>.outputRowsVert(aHtml, aCols, aFixedCols, aRows, bFixed, oContr);
		<span class="comment">// Totals</span>
		<span class="reserved">if</span> (aTotals &amp;&amp; !<span class="reserved">this</span>.totalsContainer &amp;&amp; <span class="reserved">this</span>.outputTotals) {
			<span class="reserved">this</span>.outputTotals(aHtml, aCols, aFixedCols, aTotals, bFixed);
		}
	}
};

<span class="comment">/**
 * Forms grid output.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} aHtml Output array
 * <span class="attrib">@param</span> {object} aCols Array with field objects to output
 * <span class="attrib">@param</span> {object} aFixedCols Array with fixed field objects to output
 * <span class="attrib">@param</span> {object} aSpans Array with spans
 * <span class="attrib">@param</span> {object} aRows Array with row objects to output
 * <span class="attrib">@param</span> {object} aTotals Array with total row objects to output
 * <span class="attrib">@param</span> {boolean} bFixed Optional. Indicates that this is fixed part of row
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.outputRowsHoriz = <span class="reserved">function</span>(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals, bFixed) {
	var iSpanned = 0;
	var iCols = aCols.length;
	var iSpans = aSpans.length;
	var iRows = aRows.length;
	var iTotals = 0;
	<span class="reserved">if</span> (aTotals &amp;&amp; !<span class="reserved">this</span>.totalsContainer &amp;&amp; <span class="reserved">this</span>.outputTotalsCell) {
		iTotals = aTotals.length;
	}
	<span class="comment">// Skip fixed columns because they are already displayed in header</span>
	var iCol, oField, aCl, sClass, aTr, oSpan, iRow;
	<span class="reserved">for</span> (iCol = aFixedCols.length; iCol &lt; iCols; iCol++) {
		<span class="comment">// Get field object</span>
		oField = aCols[iCol];
		aCl = [];
		aCl.push(<span class="literal">'zpGridCol zpGridCol'</span>);
		aCl.push(iCol);
		<span class="reserved">if</span> (iCol % 2 == 1) {
			aCl.push(<span class="literal">' zpGridColOdd'</span>);
		} <span class="reserved">else</span> {
			aCl.push(<span class="literal">' zpGridColEven'</span>);
		}
		<span class="reserved">if</span> (iCol == iCols - 1) {
			aCl.push(<span class="literal">' zpGridColLast'</span>);
		}
		sClass = aCl.join(<span class="literal">''</span>);
		aTr = [];
		aTr.push(<span class="literal">'&lt;tr id="zpGrid'</span>);
		aTr.push(<span class="reserved">this</span>.id);
		aTr.push(<span class="literal">'Col'</span>);
		aTr.push(oField.i);
		<span class="reserved">if</span> (bFixed) {
			aTr.push(<span class="literal">'Fixed'</span>);
		}
		aTr.push(<span class="literal">'" class="'</span>);
		aTr.push(sClass);
		aTr.push(<span class="literal">'"&gt;'</span>);
		<span class="reserved">if</span> (iSpans) {
			<span class="comment">// Output span</span>
			oSpan = aSpans[oField.i];
			<span class="reserved">if</span> (oSpan) {
				<span class="reserved">this</span>.outputSpan(aTr, oField, iCol, oSpan, iCols, !bFixed);
				iSpanned = oSpan.spanned - 1;
				<span class="comment">// Output field</span>
				<span class="reserved">this</span>.outputField(aTr, oField, iCol, iCols, !bFixed);
			} <span class="reserved">else</span> {
				<span class="comment">// Output field</span>
				<span class="reserved">if</span> (iSpanned) {
					<span class="reserved">this</span>.outputField(aTr, oField, iCol, iCols, !bFixed);
					iSpanned--;
				} <span class="reserved">else</span> {
					<span class="reserved">this</span>.outputField(aTr, oField, iCol, iCols, !bFixed, true);
				}
			}
		} <span class="reserved">else</span> {
			<span class="comment">// Output field</span>
			<span class="reserved">this</span>.outputField(aTr, oField, iCol, iCols, !bFixed);
		}
		<span class="reserved">if</span> (!bFixed) {
			<span class="comment">// Output rows</span>
			<span class="reserved">for</span> (iRow = 0; iRow &lt; iRows; iRow++) {
				<span class="reserved">this</span>.outputCell(aTr, oField, aRows[iRow], iCol, iRow, iRows);
			}
			<span class="comment">// Output totals</span>
			<span class="reserved">for</span> (iRow = 0; iRow &lt; iTotals; iRow++) {
				<span class="reserved">this</span>.outputTotalsCell(aTr, oField, aTotals[iRow], iCol, iRow, iTotals);
			}
		}
		aTr.push(<span class="literal">'&lt;/tr&gt;'</span>);
		aHtml.push(aTr.join(<span class="literal">''</span>));
	}
};

<span class="comment">/**
 * Forms grid output.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} aHtml Output array
 * <span class="attrib">@param</span> {object} aCols Array with field objects to output
 * <span class="attrib">@param</span> {object} aFixedCols Array with fixed field objects to output
 * <span class="attrib">@param</span> {object} aRows Array with row objects to output
 * <span class="attrib">@param</span> {boolean} bFixed Optional. Indicates that this is fixed part of row
 * <span class="attrib">@param</span> {object} oContr Optional. Data container
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.outputRowsVert = <span class="reserved">function</span>(aHtml, aCols, aFixedCols, aRows, bFixed, oContr) {
	var iRows = aRows.length;
	var iRow, oRow;
	<span class="reserved">for</span> (iRow = 0; iRow &lt;= iRows; iRow++) {
		oRow = aRows[iRow];
		<span class="reserved">if</span> (!oRow) {
			continue;
		}
		<span class="reserved">this</span>.outputRowVert(aHtml, aCols, aFixedCols, aRows, iRow, bFixed, oContr);
	}
};

<span class="comment">/**
 * Forms grid output.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} aHtml Output array
 * <span class="attrib">@param</span> {object} aCols Array with field objects to output
 * <span class="attrib">@param</span> {object} aFixedCols Array with fixed field objects to output
 * <span class="attrib">@param</span> {object} aRows Array with row objects to output
 * <span class="attrib">@param</span> {object} iRow Number of row on the page
 * <span class="attrib">@param</span> {boolean} bFixed Optional. Indicates that this is fixed part of row
 * <span class="attrib">@param</span> {object} oContr Optional. Data container
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.outputRowVert = <span class="reserved">function</span>(aHtml, aCols, aFixedCols, aRows, iRow, bFixed, oContr) {
	<span class="comment">// Get row</span>
	var oRow = aRows[iRow];
	<span class="reserved">if</span> (!oRow) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Form tr</span>
	var iRows = aRows.length;
	var iCols = aCols.length;
	var iFixedCols = aFixedCols.length;
	var aCl = [];
	var iRowN = iRow + 1;
	var sOdd = iRowN % 2 == 1 ? <span class="literal">'Odd'</span> : <span class="literal">'Even'</span>;
	aCl.push(<span class="literal">'zpGridRow zpGridRow'</span>);
	aCl.push(iRowN);
	aCl.push(<span class="literal">' zpGridDataRow zpGridDataRow'</span>);
	aCl.push(iRowN);
	aCl.push(<span class="literal">' zpGridRow'</span>);
	aCl.push(sOdd);
	aCl.push(<span class="literal">' zpGridDataRow'</span>);
	aCl.push(sOdd);
	<span class="reserved">if</span> (iRowN == iRows) {
		aCl.push(<span class="literal">' zpGridRowLast zpGridDataRowLast'</span>);
	}
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.selectRows &amp;&amp; oRow.selected) {
		aCl.push(<span class="literal">' zpGridRowSelected zpGridRowSelected'</span>);
		aCl.push(iRowN);
		aCl.push(<span class="literal">' zpGridRowSelected'</span>);
		aCl.push(sOdd);
		<span class="reserved">if</span> (iRowN == iRows) {
			aCl.push(<span class="literal">' zpGridRowSelectedLast'</span>);
		}
	}
	<span class="reserved">if</span> (oRow.invalid) {
		aCl.push(<span class="literal">' zpGridRowInvalid zpGridRowInvalid'</span>);
		aCl.push(iRowN);
		aCl.push(<span class="literal">' zpGridRowInvalid'</span>);
		aCl.push(iRowN % 2 == 1 ? <span class="literal">'Odd'</span> : <span class="literal">'Even'</span>);
		<span class="reserved">if</span> (iRowN == iRows) {
			aCl.push(<span class="literal">' zpGridRowInvalidLast'</span>);
		}
	}
	var sClass = aCl.join(<span class="literal">''</span>);
	var aClA = [];
	aClA.push(<span class="literal">' zpGridRowActive zpGridRowActive'</span>);
	aClA.push(iRowN);
	aClA.push(<span class="literal">' zpGridRowActive'</span>);
	aClA.push(iRowN % 2 == 1 ? <span class="literal">'Odd'</span> : <span class="literal">'Even'</span>);
	<span class="reserved">if</span> (iRowN == iRows) {
		aClA.push(<span class="literal">' zpGridRowActiveLast'</span>);
	}
	var sClassActive = aClA.join(<span class="literal">''</span>);
	var aTr = [];
	aTr.push(<span class="literal">'&lt;tr id="zpGrid'</span>);
	aTr.push(<span class="reserved">this</span>.id);
	aTr.push(<span class="literal">'Row'</span>);
	aTr.push(oRow.i);
	<span class="reserved">if</span> (bFixed) {
		aTr.push(<span class="literal">'Fixed'</span>);
	}
	aTr.push(<span class="literal">'" class="'</span>);
	aTr.push(sClass);
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.activeRows) {
		aTr.push(<span class="literal">'" onmouseover="if(!Zapatec.Grid.mouseSelection)if(this.className.indexOf(\'</span>zpGridRowActive\<span class="literal">')==-1){this.className+=\'</span><span class="literal">');
		aTr.push(sClassActive);
		aTr.push("'</span><span class="literal">");
		if (bFixed) {
			aTr.push("</span>;document.getElementById(<span class="literal">'zpGrid");
			aTr.push(this.id);
			aTr.push('</span>Row<span class="literal">');
			aTr.push(oRow.i);
			aTr.push("'</span>).className+=<span class="literal">'");
			aTr.push(sClassActive);
			aTr.push("'</span><span class="literal">");
		} else if (this.config.fixedLeft &gt; 0 &amp;&amp; !this.config.visibleColumns) {
			aTr.push("</span>;document.getElementById(<span class="literal">'zpGrid");
			aTr.push(this.id);
			aTr.push('</span>Row<span class="literal">');
			aTr.push(oRow.i);
			aTr.push("Fixed'</span>).className+=<span class="literal">'");
			aTr.push(sClassActive);
			aTr.push("'</span><span class="literal">");
		}
		aTr.push("</span>}\<span class="literal">" onmouseout=\"</span><span class="reserved">if</span>(!Zapatec.Grid.mouseSelection)<span class="reserved">this</span>.className=<span class="reserved">this</span>.className.replace(/ zpGridRowActive[^ ]*/g,<span class="literal">''</span>)<span class="literal">");
		if (bFixed) {
			aTr.push("</span>;var oRow=document.getElementById(<span class="literal">'zpGrid");
			aTr.push(this.id);
			aTr.push('</span>Row<span class="literal">');
			aTr.push(oRow.i);
			aTr.push("'</span>);oRow.className=oRow.className.replace(/ zpGridRowActive[^ ]*/g,<span class="literal">''</span>)<span class="literal">");
		} else if (this.config.fixedLeft &gt; 0 &amp;&amp; !this.config.visibleColumns) {
			aTr.push("</span>;var oRow=document.getElementById(<span class="literal">'zpGrid");
			aTr.push(this.id);
			aTr.push('</span>Row<span class="literal">');
			aTr.push(oRow.i);
			aTr.push("Fixed'</span>);oRow.className=oRow.className.replace(/ zpGridRowActive[^ ]*/g,<span class="literal">''</span>)<span class="literal">");
		}
	}
	aTr.push('"</span> ondblclick=<span class="literal">"this.onmouseout()"</span> style=<span class="literal">"');
	if (oRow.style) {
		aTr.push(oRow.style);
	}
	aTr.push('"</span>&gt;<span class="literal">');
	// Display cells
	if (bFixed) {
		for (var iCol = 0; iCol &lt; iFixedCols; iCol++) {
			this.outputCell(aTr, aFixedCols[iCol], oRow, iRow, iCol, iCols);
		}
	} else {
		for (var iCol = 0; iCol &lt; iCols; iCol++) {
			var bHidden = (iCol &lt; iFixedCols);
			this.outputCell(aTr, aCols[iCol], oRow, iRow, iCol, iCols, bHidden);
		}
	}
	aTr.push('</span>&lt;/tr&gt;<span class="literal">');
	aHtml.push(aTr.join('</span><span class="literal">'));
};

/**
 * Forms grid output.
 *
 * @private
 * @param {object} aTr Output array
 * @param {object} oField Field object
 * @param {object} oRow Row object
 * @param {object} iRow Number of row on the page
 * @param {number} iCol Visible column number
 * @param {number} iCols Visible column count
 * @param {boolean} bHidden Optional. Indicates that this is hidden part of
 * fixed part of row
 */
Zapatec.Grid.prototype.outputCell = function(aTr, oField, oRow, iRow, iCol, iCols, bHidden) {
	if (oField.i &gt;= this.config.fixedLeft &amp;&amp;
	 oField.i &lt; this.currentHorizontalOffset + this.config.fixedLeft) {
		// Hidden column
		return;
	}
	if (this.config.visibleColumns) {
		bHidden = false;
	}
	// Get cell
	var iField = oField.i;
	var oCell = this.getCellByRow(oRow, iField);
	if (!oCell) {
		return;
	}
	var oConfig = this.config;
	var iGrid = this.id;
	var iRow = oRow.i;
	var iCell = oCell.i;
	var sId = ['</span>zpGrid<span class="literal">', iGrid, '</span>Row<span class="literal">', iRow, '</span>Cell<span class="literal">', iCell].join('</span><span class="literal">');
	var aCl = [];
	aCl.push('</span>zpGridCell zpGridCell<span class="literal">');
	aCl.push(iCol);
	aCl.push('</span> zpGridColId<span class="literal">');
	aCl.push(iField);
	aCl.push('</span> zpGridCellData zpGridCellData<span class="literal">');
	aCl.push(iCol);
	if (iCol % 2 == 1) {
		aCl.push('</span> zpGridCellOdd zpGridCellDataOdd<span class="literal">');
	} else {
		aCl.push('</span> zpGridCellEven zpGridCellDataEven<span class="literal">');
	}
	if (iCol + 1 == iCols) {
		aCl.push('</span> zpGridCellLast zpGridCellDataLast<span class="literal">');
	}
	if (oConfig.selectCells &amp;&amp; oCell.selected) {
		aCl.push('</span> zpGridCellSelected zpGridCellSelected<span class="literal">');
		aCl.push(iCol);
		if (iCol % 2 == 1) {
			aCl.push('</span> zpGridCellSelectedOdd<span class="literal">');
		} else {
			aCl.push('</span> zpGridCellSelectedEven<span class="literal">');
		}
		if (iCol == iCols - 1) {
			aCl.push('</span> zpGridCellSelectedLast<span class="literal">');
		}
	}
	if (oCell.invalid) {
		aCl.push('</span> zpGridCellInvalid zpGridCellInvalid<span class="literal">');
		aCl.push(iCol);
		if (iCol % 2 == 1) {
			aCl.push('</span> zpGridCellInvalidOdd<span class="literal">');
		} else {
			aCl.push('</span> zpGridCellInvalidEven<span class="literal">');
		}
		if (iCol == iCols - 1) {
			aCl.push('</span> zpGridCellInvalidLast<span class="literal">');
		}
	}
	var sClass = aCl.join('</span><span class="literal">');
	var aClA = [];
	aClA.push('</span> zpGridCellActive zpGridCellActive<span class="literal">');
	aClA.push(iCol);
	aClA.push('</span> zpGridCellDataActive zpGridCellDataActive<span class="literal">');
	aClA.push(iCol);
	if (iCol % 2 == 1) {
		aClA.push('</span> zpGridCellActiveOdd zpGridCellDataActiveOdd<span class="literal">');
	} else {
		aClA.push('</span> zpGridCellActiveEven zpGridCellDataActiveEven<span class="literal">');
	}
	if (iCol == iCols - 1) {
		aClA.push('</span> zpGridCellActiveLast zpGridCellDataActiveLast<span class="literal">');
	}
	var sClassActive = aClA.join('</span><span class="literal">');
	var aTd = [];
	aTd.push('</span>&lt;td class=<span class="literal">"');
	aTd.push(sClass);
	aTd.push('"</span> id=<span class="literal">"');
	aTd.push(sId);
	if (bHidden) {
		aTd.push('Hidden');
	} else {
		if (oConfig.activeCells) {
			aTd.push('"</span> onmouseover=<span class="literal">"if(Zapatec.Grid.mouseSelection)Zapatec.Grid.mouseOverCell=this.id;else if(this.className.indexOf(\'zpGridCellActive\')==-1)this.className+=\'');
			aTd.push(sClassActive);
			aTd.push('\'"</span> onmouseout=<span class="literal">"if(!Zapatec.Grid.mouseSelection)this.className=this.className.replace(/ zpGrid[^ ]+Active[^ ]*/g,\'\')');
		}
		aTd.push('"</span> onclick=<span class="literal">"Zapatec.Grid.rowOnClick(\'');
		aTd.push(iGrid);
		aTd.push("</span><span class="literal">','</span><span class="literal">");
		aTd.push(iRow);
		aTd.push("</span><span class="literal">','</span><span class="literal">");
		aTd.push(iCell);
		aTd.push('\')"</span> ondblclick=<span class="literal">"this.onmouseout();Zapatec.Grid.rowOnDblClick(\'');
		aTd.push(iGrid);
		aTd.push("</span><span class="literal">','</span><span class="literal">");
		aTd.push(iRow);
		aTd.push("</span><span class="literal">','</span><span class="literal">");
		aTd.push(iCell);
		aTd.push("</span><span class="literal">')");
		aTd.push('</span><span class="literal">" onmousedown="</span>Zapatec.Widget.callMethod(<span class="literal">');
		aTd.push(iGrid);
		aTd.push(",'</span>fireEvent<span class="literal">','</span>gridCellMousedown<span class="literal">',");
		aTd.push(iRow);
		aTd.push('</span>,<span class="literal">');
		aTd.push(iCell);
		aTd.push('</span>)<span class="literal">');
		aTd.push('</span><span class="literal">" onmouseup="</span>Zapatec.Widget.callMethod(<span class="literal">');
		aTd.push(iGrid);
		aTd.push(",'</span>fireEvent<span class="literal">','</span>gridCellMouseup<span class="literal">',");
		aTd.push(iRow);
		aTd.push('</span>,<span class="literal">');
		aTd.push(iCell);
		aTd.push('</span>)<span class="literal">');
	}
	var sStyle = this.getCellStyle(oCell, iRow);
	if (sStyle) {
		aTd.push('</span><span class="literal">" style="</span><span class="literal">');
		aTd.push(sStyle);
	}
	var iColspan = oCell.colspan;
	if (iColspan &gt; 1) {
		aTd.push('</span><span class="literal">" colspan="</span><span class="literal">');
		aTd.push(iColspan);
	}
	var iRowspan = oCell.rowspan;
	if (iRowspan &gt; 1) {
		aTd.push('</span><span class="literal">" rowspan="</span><span class="literal">');
		aTd.push(iRowspan);
	}
	aTd.push('</span><span class="literal">"&gt;');
	this.outputCellValue(aTd, oField, oCell);
	aTd.push('&lt;/td&gt;');
	aTr.push(aTd.join(''));
};

/**
 * Forms grid output.
 *
 * @private
 * @param {object} aTd Output array
 * @param {object} oField Field object
 * @param {object} oCell Cell object
 * @param {boolean} bHid Optional. If true, visibility is hidden
 */
Zapatec.Grid.prototype.outputCellValue = function(aTd, oField, oCell, bHid) {
	var sId = ['zpGrid', this.id, 'Row', oCell.r, 'Cell', oCell.i].join('');
	// div is needed to be able to set column width
	aTd.push('&lt;div id="</span><span class="literal">');
	aTd.push(sId);
	aTd.push('</span>Div<span class="literal">" class="</span>zpGridDiv<span class="literal">');
	// Set cell type
	if (this.getClassByType) {
		aTd.push('</span> <span class="literal">');
		aTd.push(this.getClassByType(this.getFieldType(oField)));
	}
	aTd.push('</span><span class="literal">" onselectstart="</span><span class="reserved">return</span> false<span class="literal">" style="</span>-moz-user-select:none;<span class="literal">');
	var iRowspan = oCell.rowspan;
	if (iRowspan &gt; 1) {
		var aMatch = this.config.rowHeight.match(/^(\d+)(\D+)$/);
		if (aMatch &amp;&amp; aMatch.length == 3) {
			aTd.push('</span>height:<span class="literal">');
			aTd.push(aMatch[1] * iRowspan + iRowspan - 1);
			aTd.push(aMatch[2]);
			aTd.push('</span>;<span class="literal">');
		}
	}
	var iCellspan = oCell.colspan;
	if (bHid || iCellspan &gt; 1) {
		if (bHid) {
			aTd.push('</span>visibility:hidden;<span class="literal">');
		}
		if (iCellspan &gt; 1) {
			// Calculate cell width
			var iW = 0;
			// Cell id
			var iCell = oCell.i;
			// Fields array
			var aF = this.fields;
			// Default column width
			var sCW = this.config.columnWidth;
			var iCW = sCW * 1;
			// Variables used in the loop
			var iC, oF, sW;
			for (iC = 0; iC &lt; iCellspan; iC++) {
				oF = aF[iCell + iC];
				if (oF &amp;&amp; !oF.hidden) {
					sW = oF.columnWidth;
					if (sW) {
						iW += sW * 1;
					} else if (sCW) {
						iW += iCW;
					} else {
						iW = 0;
						break;
					}
				}
			}
			if (iW) {
				aTd.push('</span>width:<span class="literal">');
				aTd.push(iW);
				aTd.push('</span>px;<span class="literal">');
			} else {
				aTd.push('</span>width:auto;<span class="literal">');
			}
		}
	}
	aTd.push('</span><span class="literal">"&gt;');
	var sData = this.getCellData(oCell);
	if (sData &amp;&amp; typeof sData != 'string') {
		sData = sData.toString();
	}
	// Empty cell may cause visual problems in editable grid extension
	if (!sData || !sData.length) {
		sData = '&amp;nbsp;';
	}
	aTd.push(sData);
	aTd.push('&lt;/div&gt;');
};

/**
 * Forms grid output.
 *
 * @private
 * @param {object} aHtml Output array
 * @param {number} iContainer Optional. Number of container if there are two and
 * more pagination containers
 */
Zapatec.Grid.prototype.outputPagination = function(aHtml, iContainer) {
	if (typeof this.config.callbackPaginationDisplay == 'function' ||
	 this.config.rowsPerPage &lt;= 0) {
		// No pagination
		return;
	}
	// We need this only for second and further containers
	if (!iContainer || iContainer &lt; 2) {
		iContainer = '';
	} else {
		iContainer = '_' + iContainer;
	}
	if (this.paginationContainers.length) {
		aHtml.push('&lt;div id="</span>zpGrid<span class="literal">');
		aHtml.push(this.id);
		aHtml.push('</span>PaginationContainer<span class="literal">');
		aHtml.push(iContainer);
		aHtml.push('</span><span class="literal">"&gt;&lt;div&gt;&lt;table class="</span><span class="literal">');
		aHtml.push(this.getClassName({prefix: '</span>zpGrid<span class="literal">'}));
		aHtml.push('</span><span class="literal">" cellpadding="</span>0<span class="literal">" cellspacing="</span>0<span class="literal">" \
		 style="</span>width:100%<span class="literal">"&gt;&lt;tbody&gt;');
	}
	aHtml.push('&lt;tr&gt;&lt;td class="</span>zpGridPagination<span class="literal">" id="</span>zpGrid<span class="literal">');
	aHtml.push(this.id);
	aHtml.push('</span>Pagination<span class="literal">');
	aHtml.push(iContainer);
	aHtml.push('</span><span class="literal">"&gt;');
	aHtml.push(this.getMessage('labelPage'));
	if (this.currentPage &gt; 0) {
		// Don't display previous on the first page
		aHtml.push(' &lt;span id="</span>zpGrid<span class="literal">');
		aHtml.push(this.id);
		aHtml.push('</span>FirstPage<span class="literal">');
		aHtml.push(iContainer);
		aHtml.push('</span><span class="literal">" class="</span>zpGridFirstPage<span class="literal">" \
		 onclick="</span>Zapatec.Grid.firstPage(\<span class="literal">''</span>);
		aHtml.push(<span class="reserved">this</span>.id);
		aHtml.push(<span class="literal">'\'</span>)<span class="literal">"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span id="</span>zpGrid<span class="literal">');
		aHtml.push(this.id);
		aHtml.push('</span>PrevPage<span class="literal">');
		aHtml.push(iContainer);
		aHtml.push('</span><span class="literal">" class="</span>zpGridPrevPage<span class="literal">" \
		 onclick="</span>Zapatec.Grid.previousPage(\<span class="literal">''</span>);
		aHtml.push(<span class="reserved">this</span>.id);
		aHtml.push(<span class="literal">'\'</span>)<span class="literal">"&gt;&amp;lt;&lt;/span&gt;');
	}
	// Get number of pages
	var iPages = this.totalPages();
	// Display up to 10 pages
	var iCurrentPage = this.getCurrentPageNumber();
	var iFirstPage = iCurrentPage - 4;
	var iLastPage = iCurrentPage + 5;
	for (var iPage = iFirstPage; iPage &lt; iLastPage &amp;&amp; iPage &lt;= iPages; iPage++) {
		if (iPage &lt; 1) {
			// Current page &lt; 10
			continue;
		}
		aHtml.push(' &lt;span id="</span>zpGrid<span class="literal">');
		aHtml.push(this.id);
		aHtml.push('</span>Page<span class="literal">');
		aHtml.push(iPage);
		aHtml.push(iContainer);
		aHtml.push('</span><span class="literal">" class="</span>zpGrid<span class="literal">');
		if (iPage == iCurrentPage) {
			aHtml.push('</span>CurrentPage<span class="literal">"&gt;');
		} else {
			aHtml.push('Page"</span> onclick=<span class="literal">"Zapatec.Grid.gotoPage(\'');
			aHtml.push(this.id);
			aHtml.push("</span><span class="literal">','</span><span class="literal">");
			aHtml.push(iPage);
			aHtml.push('\')"</span>&gt;<span class="literal">');
		}
		aHtml.push(iPage);
		aHtml.push('</span>&lt;/span&gt;<span class="literal">');
	}
	if (this.currentPage &lt; iPages - 1) {
		// Don'</span>t display next on the last page
		aHtml.push(<span class="literal">' &lt;span id="zpGrid'</span>);
		aHtml.push(<span class="reserved">this</span>.id);
		aHtml.push(<span class="literal">'NextPage'</span>);
		aHtml.push(iContainer);
		aHtml.push(<span class="literal">'" class="zpGridNextPage" \
		 onclick="Zapatec.Grid.nextPage(\'</span><span class="literal">');
		aHtml.push(this.id);
		aHtml.push('</span>\<span class="literal">')"&gt;&amp;gt;&lt;/span&gt; &lt;span id="zpGrid'</span>);
		aHtml.push(<span class="reserved">this</span>.id);
		aHtml.push(<span class="literal">'LastPage'</span>);
		aHtml.push(iContainer);
		aHtml.push(<span class="literal">'" class="zpGridLastPage" \
		 onclick="Zapatec.Grid.lastPage(\'</span><span class="literal">');
		aHtml.push(this.id);
		aHtml.push('</span>\<span class="literal">')"&gt;&amp;gt;&amp;gt;&lt;/span&gt;'</span>);
	}
	aHtml.push(<span class="literal">' '</span>);
	aHtml.push(<span class="reserved">this</span>.getMessage(<span class="literal">'labelOf'</span>));
	aHtml.push(<span class="literal">' '</span>);
	aHtml.push(iPages);
	aHtml.push(<span class="literal">' ('</span>);
	aHtml.push(<span class="reserved">this</span>.recordsDisplayed());
	aHtml.push(<span class="literal">' '</span>);
	aHtml.push(<span class="reserved">this</span>.getMessage(<span class="literal">'labelRows'</span>));
	aHtml.push(<span class="literal">')&lt;/td&gt;&lt;/tr&gt;'</span>);
	<span class="reserved">if</span> (<span class="reserved">this</span>.paginationContainers.length) {
		aHtml.push(<span class="literal">'&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;'</span>);
	}
};

<span class="comment">/**
 * Displays grid. Forms new grid as plain HTML. Pushes strings into array, then
 * joins array to achieve maximum speed. Replaces previous contents of container
 * element with formed grid. Adds classes that can be used to create different
 * themes. Adds user defined styles.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.refreshContainer = <span class="reserved">function</span>() {
	var oConfig = <span class="reserved">this</span>.config;
	<span class="comment">// Check container</span>
	var oContainer = <span class="reserved">this</span>.container;
	<span class="reserved">if</span> (!oContainer) {
		alert(<span class="reserved">this</span>.getMessage(<span class="literal">'errorContainer'</span>));
		<span class="reserved">return</span>;
	}
	var oContainerStyle = oContainer.style;
	oContainerStyle.position = <span class="literal">'relative'</span>;
	<span class="comment">// IE6 requires width for relative element containing other relative elements</span>
	<span class="reserved">if</span> (oContainer.currentStyle &amp;&amp; 
	 oContainer.currentStyle[<span class="literal">'width'</span>] == <span class="literal">'auto'</span>) {
		oContainerStyle.width = <span class="literal">'100%'</span>;
	}
	<span class="comment">// Get columns to display, fixed columns and spans</span>
	var aCols = [];
	var aFixedCols = [];
	var aSpans = [];
	var aFields = <span class="reserved">this</span>.fields;
	var iFields = aFields.length;
	var iFixedFields = Math.min(iFields, oConfig.fixedLeft);
	var iField, oField, oSpan;
	<span class="reserved">for</span> (iField = 0; iField &lt; iFields; iField++) {
		oField = aFields[iField];
		<span class="comment">// Skip hidden columns</span>
		<span class="reserved">if</span> (!oField || oField.hidden) {
			continue;
		}
		<span class="comment">// Add visible column</span>
		aCols.push(oField);
		<span class="comment">// Add fixed column</span>
		<span class="reserved">if</span> (iField &lt; iFixedFields) {
			aFixedCols.push(oField);
		}
		<span class="comment">// Get span</span>
		oSpan = <span class="reserved">this</span>.getFieldSpanned(oField);
		<span class="reserved">if</span> (oSpan) {
			aSpans[iField] = oSpan;
		}
	}
	<span class="comment">// Get rows to display</span>
	var aRows = <span class="reserved">this</span>.prepareSpans(Zapatec.Utils.clone(<span class="reserved">this</span>.applyPaging()), true);
	<span class="comment">// Get totals</span>
	var aTotals;
	<span class="reserved">if</span> (<span class="reserved">this</span>.getTotals) {
		aTotals = <span class="reserved">this</span>.getTotals();
	}
	<span class="comment">// Display grid</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.headerContainer) {
		<span class="reserved">this</span>.headerContainer.style.position = <span class="literal">'relative'</span>;
		<span class="comment">// IE6 requires width for relative element containing other relative</span>
		<span class="comment">// elements</span>
		<span class="reserved">if</span> (<span class="reserved">this</span>.headerContainer.currentStyle &amp;&amp;
		 <span class="reserved">this</span>.headerContainer.currentStyle[<span class="literal">'width'</span>] == <span class="literal">'auto'</span>) {
			<span class="reserved">this</span>.headerContainer.style.width = <span class="literal">'100%'</span>;
		}
		var aHtml = [];
		aHtml.push(<span class="literal">'&lt;div id="zpGrid'</span>);
		aHtml.push(<span class="reserved">this</span>.id);
		aHtml.push(<span class="literal">'Container"&gt;&lt;div&gt;'</span>);
		<span class="comment">// Header</span>
		<span class="reserved">this</span>.outputTableOpen(aHtml);
		<span class="reserved">this</span>.outputFields(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals);
		<span class="reserved">this</span>.outputTableClose(aHtml);
		aHtml.push(<span class="literal">'&lt;/div&gt;'</span>);
		<span class="comment">// Fixed header</span>
		<span class="reserved">if</span> (oConfig.fixedLeft &gt; 0 || oConfig.horizontal) {
			aHtml.push(<span class="literal">'&lt;div id="zpGrid'</span>);
			aHtml.push(<span class="reserved">this</span>.id);
			<span class="reserved">if</span> (<span class="reserved">this</span>.headerContainer.style.setAttribute) {
				<span class="comment">// IE</span>
				aHtml.push(<span class="literal">'FixedLeft" style="position:absolute;top:0px;\
				 left:expression(this.offsetParent.scrollLeft+\'</span>px\<span class="literal">')"&gt;&lt;div&gt;'</span>);
			} <span class="reserved">else</span> {
				<span class="comment">// Other browsers don't support expressions yet</span>
				aHtml.push(<span class="literal">'FixedLeft" style="position:absolute;top:0px;left:'</span>);
				aHtml.push(oContainer.scrollLeft);
				aHtml.push(<span class="literal">'px"&gt;&lt;div&gt;'</span>);
			}
			<span class="reserved">this</span>.outputTableOpen(aHtml, true);
			<span class="reserved">this</span>.outputFields(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals, true);
			<span class="reserved">this</span>.outputTableClose(aHtml);
			aHtml.push(<span class="literal">'&lt;/div&gt;&lt;/div&gt;'</span>);
		}
		aHtml.push(<span class="literal">'&lt;/div&gt;'</span>);
		<span class="comment">// Draw header</span>
		<span class="reserved">this</span>.headerContainer.innerHTML = aHtml.join(<span class="literal">''</span>);
		<span class="comment">// Clean container</span>
		oContainer.innerHTML = <span class="literal">''</span>;
		<span class="comment">// Data</span>
		var oContr = Zapatec.Utils.createElement(<span class="literal">'div'</span>, oContainer, true);
		oContr.id = <span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'BusyContainer'</span>;
		oContr.style.position = <span class="literal">'absolute'</span>;
		oContr.style.top = <span class="literal">'0px'</span>;
		oContr.style.left = <span class="literal">'0px'</span>;
		oContr = Zapatec.Utils.createElement(<span class="literal">'div'</span>, oContainer, true);
		oContr.id = <span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'DataContainer'</span>;
		<span class="comment">// Rows</span>
		aHtml = [];
		<span class="reserved">this</span>.outputTableOpen(aHtml, false, <span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'DataTable'</span>);
		<span class="reserved">this</span>.outputRows(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals, false,
		 oContr);
		<span class="comment">// Pagination</span>
		<span class="reserved">if</span> (<span class="reserved">this</span>.paginationContainers.length) {
			<span class="comment">// Draw the rest of rows</span>
			<span class="reserved">this</span>.outputTableClose(aHtml);
			var oDiv = Zapatec.Utils.createElement(<span class="literal">'div'</span>, oContr, true);
			oDiv.innerHTML = aHtml.join(<span class="literal">''</span>);
			<span class="comment">// Pagination</span>
			aHtml = [];
			<span class="reserved">this</span>.outputPagination(aHtml);
			<span class="reserved">for</span> (var iEl = 0; iEl &lt; <span class="reserved">this</span>.paginationContainers.length; iEl++) {
				<span class="reserved">this</span>.paginationContainers[iEl].innerHTML = aHtml.join(<span class="literal">''</span>);
			}
		} <span class="reserved">else</span> {
			<span class="comment">// Pagination</span>
			aHtml.push(<span class="literal">'&lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;'</span>);
			<span class="reserved">this</span>.outputPagination(aHtml);
			aHtml.push(<span class="literal">'&lt;/tbody&gt;&lt;/table&gt;'</span>);
			<span class="comment">// Draw the rest of rows</span>
			var oDiv = Zapatec.Utils.createElement(<span class="literal">'div'</span>, oContr, true);
			oDiv.innerHTML = aHtml.join(<span class="literal">''</span>);
		}
		<span class="comment">// Fixed columns</span>
		<span class="reserved">if</span> (oConfig.fixedLeft &gt; 0 || oConfig.horizontal) {
			var oFixed = Zapatec.Utils.createElement(<span class="literal">'div'</span>, oContr, true);
			oFixed.id = <span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'DataFixedLeft'</span>;
			<span class="reserved">if</span> (oFixed.style.setAttribute) {
				<span class="comment">// IE</span>
				oFixed.style.setAttribute(<span class="literal">'cssText'</span>, <span class="literal">'position:absolute;top:0px;\
				 left:expression(this.offsetParent.scrollLeft+"px")'</span>, 0);
			} <span class="reserved">else</span> {
				<span class="comment">// Other browsers don't support expressions yet</span>
				oFixed.style.position = <span class="literal">'absolute'</span>;
				oFixed.style.top = <span class="literal">'0px'</span>;
				oFixed.style.left = oContainer.scrollLeft + <span class="literal">'px'</span>;
			}
			var aHtml = [];
			<span class="reserved">this</span>.outputTableOpen(aHtml, true);
			<span class="comment">// Rows</span>
			<span class="reserved">this</span>.outputRows(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals, true,
			 oFixed);
			<span class="reserved">this</span>.outputTableClose(aHtml);
			var oDiv = Zapatec.Utils.createElement(<span class="literal">'div'</span>, oFixed, true);
			oDiv.innerHTML = aHtml.join(<span class="literal">''</span>);
		}
		<span class="comment">// Right column margin when resizing</span>
		<span class="reserved">if</span> (!oConfig.horizontal) {
			var oRs = Zapatec.Utils.createElement(<span class="literal">'div'</span>, oContr, true);
			oRs.id = <span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'DataColResize'</span>;
			oRs.style.position = <span class="literal">'absolute'</span>;
			oRs.style.top = <span class="literal">'0px'</span>;
			oRs.style.left = <span class="literal">'0px'</span>;
			oRs.style.display = <span class="literal">'none'</span>;
			oRs.className = <span class="reserved">this</span>.getClassName({
				prefix: <span class="literal">'zpGrid'</span>,
				suffix: <span class="literal">'ColResize'</span>
			});
		}
	} <span class="reserved">else</span> {
		<span class="comment">// Table</span>
		var aHtml = [];
		aHtml.push(<span class="literal">'&lt;div style="position:absolute;top:0px;left:0px" id="zpGrid'</span>);
		aHtml.push(<span class="reserved">this</span>.id);
		aHtml.push(<span class="literal">'BusyContainer"&gt;&lt;/div&gt;&lt;div id="zpGrid'</span>);
		aHtml.push(<span class="reserved">this</span>.id);
		aHtml.push(<span class="literal">'Container"&gt;&lt;div&gt;'</span>);
		<span class="reserved">this</span>.outputTableOpen(aHtml, false, <span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'DataTable'</span>);
		<span class="comment">// Header</span>
		<span class="reserved">this</span>.outputFields(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals);
		<span class="comment">// Rows</span>
		<span class="reserved">this</span>.outputRows(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals);
		<span class="comment">// Pagination</span>
		<span class="reserved">if</span> (<span class="reserved">this</span>.paginationContainers.length) {
			<span class="comment">// Draw table</span>
			<span class="reserved">this</span>.outputTableClose(aHtml);
			aHtml.push(<span class="literal">'&lt;/div&gt;&lt;/div&gt;'</span>);
			oContainer.innerHTML = aHtml.join(<span class="literal">''</span>);
			<span class="comment">// Pagination</span>
			aHtml = [];
			<span class="reserved">this</span>.outputPagination(aHtml);
			<span class="reserved">for</span> (var iEl = 0; iEl &lt; <span class="reserved">this</span>.paginationContainers.length; iEl++) {
				<span class="reserved">this</span>.paginationContainers[iEl].innerHTML = aHtml.join(<span class="literal">''</span>);
			}
		} <span class="reserved">else</span> {
			<span class="comment">// Pagination</span>
			aHtml.push(<span class="literal">'&lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;'</span>);
			<span class="reserved">this</span>.outputPagination(aHtml);
			aHtml.push(<span class="literal">'&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;'</span>);
			<span class="comment">// Draw table</span>
			oContainer.innerHTML = aHtml.join(<span class="literal">''</span>);
		}
		<span class="comment">// Fixed columns</span>
		<span class="reserved">if</span> ((oConfig.fixedLeft &gt; 0 || oConfig.horizontal) &amp;&amp; !oConfig.visibleColumns) {
			var oFixed = Zapatec.Utils.createElement(<span class="literal">'div'</span>,
			 document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'Container'</span>), true);
			oFixed.id = <span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'FixedLeft'</span>;
			<span class="reserved">if</span> (oFixed.style.setAttribute) {
				<span class="comment">// IE</span>
				oFixed.style.setAttribute(<span class="literal">'cssText'</span>, <span class="literal">'position:absolute;top:0px;\
				 left:expression(this.offsetParent.scrollLeft+"px")'</span>, 0);
			} <span class="reserved">else</span> {
				<span class="comment">// Other browsers don't support expressions yet</span>
				oFixed.style.position = <span class="literal">'absolute'</span>;
				oFixed.style.top = <span class="literal">'0px'</span>;
				oFixed.style.left = oContainer.scrollLeft + <span class="literal">'px'</span>;
			}
			var aHtml = [];
			<span class="reserved">this</span>.outputTableOpen(aHtml, true);
			<span class="comment">// Header</span>
			<span class="reserved">this</span>.outputFields(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals, true);
			<span class="comment">// Rows</span>
			<span class="reserved">this</span>.outputRows(aHtml, aCols, aFixedCols, aSpans, aRows, aTotals, true);
			<span class="reserved">this</span>.outputTableClose(aHtml);
			var oDiv = Zapatec.Utils.createElement(<span class="literal">'div'</span>, oFixed, true);
			oDiv.innerHTML = aHtml.join(<span class="literal">''</span>);
		}
	}
	<span class="reserved">if</span> (<span class="reserved">this</span>.headerContainer || !oConfig.visibleColumns) {
		<span class="comment">// If there is separate container for totals</span>
		<span class="reserved">if</span> (aTotals &amp;&amp; <span class="reserved">this</span>.totalsContainer &amp;&amp; <span class="reserved">this</span>.outputTotals) {
			<span class="reserved">this</span>.totalsContainer.style.position = <span class="literal">'relative'</span>;
			<span class="comment">// IE6 requires width for relative element containing other relative</span>
			<span class="comment">// elements</span>
			<span class="reserved">if</span> (<span class="reserved">this</span>.totalsContainer.currentStyle &amp;&amp;
			 <span class="reserved">this</span>.totalsContainer.currentStyle[<span class="literal">'width'</span>] == <span class="literal">'auto'</span>) {
				<span class="reserved">this</span>.totalsContainer.style.width = <span class="literal">'100%'</span>;
			}
			var aHtml = [];
			aHtml.push(<span class="literal">'&lt;div id="zpGrid'</span>);
			aHtml.push(<span class="reserved">this</span>.id);
			aHtml.push(<span class="literal">'TotalsContainer"&gt;&lt;div&gt;'</span>);
			<span class="comment">// Totals</span>
			<span class="reserved">this</span>.outputTableOpen(aHtml);
			<span class="reserved">this</span>.outputTotals(aHtml, aCols, aFixedCols, aTotals);
			<span class="reserved">this</span>.outputTableClose(aHtml);
			aHtml.push(<span class="literal">'&lt;/div&gt;'</span>);
			<span class="comment">// Fixed totals</span>
			<span class="reserved">if</span> (oConfig.fixedLeft &gt; 0) {
				aHtml.push(<span class="literal">'&lt;div id="zpGrid'</span>);
				aHtml.push(<span class="reserved">this</span>.id);
				<span class="reserved">if</span> (<span class="reserved">this</span>.totalsContainer.style.setAttribute) {
					<span class="comment">// IE</span>
					aHtml.push(<span class="literal">'TotalsFixedLeft" style="position:absolute;top:0px;\
					 left:expression(this.offsetParent.scrollLeft+\'</span>px\<span class="literal">')"&gt;&lt;div&gt;'</span>);
				} <span class="reserved">else</span> {
					<span class="comment">// Other browsers don't support expressions yet</span>
					aHtml.push(<span class="literal">'TotalsFixedLeft" style="position:absolute;top:0px;left:'</span>);
					aHtml.push(oContainer.scrollLeft);
					aHtml.push(<span class="literal">'px"&gt;&lt;div&gt;'</span>);
				}
				<span class="reserved">this</span>.outputTableOpen(aHtml, true);
				<span class="reserved">this</span>.outputTotals(aHtml, aCols, aFixedCols, aTotals, true);
				<span class="reserved">this</span>.outputTableClose(aHtml);
				aHtml.push(<span class="literal">'&lt;/div&gt;&lt;/div&gt;'</span>);
			}
			aHtml.push(<span class="literal">'&lt;/div&gt;'</span>);
			<span class="comment">// Draw totals</span>
			<span class="reserved">this</span>.totalsContainer.innerHTML = aHtml.join(<span class="literal">''</span>);
			<span class="comment">// Right column margin when resizing</span>
			<span class="reserved">if</span> (!oConfig.horizontal) {
				var oRs = Zapatec.Utils.createElement(<span class="literal">'div'</span>, <span class="reserved">this</span>.totalsContainer, true);
				oRs.id = <span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'TotalsColResize'</span>;
				oRs.style.position = <span class="literal">'absolute'</span>;
				oRs.style.top = <span class="literal">'0px'</span>;
				oRs.style.left = <span class="literal">'0px'</span>;
				oRs.style.display = <span class="literal">'none'</span>;
				oRs.className = <span class="reserved">this</span>.getClassName({
					prefix: <span class="literal">'zpGrid'</span>,
					suffix: <span class="literal">'ColResize'</span>
				});
			}
		}
		<span class="comment">// Synchronize scrolling</span>
		<span class="reserved">this</span>.syncScroll();
	}
	<span class="comment">// Custom totals</span>
	<span class="reserved">if</span> (typeof oConfig.callbackTotalsDisplay == <span class="literal">'function'</span>) {
		oConfig.callbackTotalsDisplay(<span class="reserved">this</span>, aTotals);
	} <span class="reserved">else</span> <span class="reserved">if</span> (aTotals &amp;&amp; typeof oConfig.callbackTotalDisplay == <span class="literal">'function'</span>) {
		var iTotals = aTotals.length;
		var iRow;
		<span class="reserved">for</span> (iRow = 0; iRow &lt; iTotals; iRow++) {
			oConfig.callbackTotalDisplay(<span class="reserved">this</span>, aTotals[iRow]);
		}
	}
	<span class="comment">// Custom pagination</span>
	<span class="reserved">if</span> (typeof oConfig.callbackPaginationDisplay == <span class="literal">'function'</span> &amp;&amp;
	 oConfig.rowsPerPage &gt; 0) {
		oConfig.callbackPaginationDisplay(<span class="reserved">this</span>);
	}
	<span class="comment">// Finish refresh</span>
	<span class="reserved">this</span>.onRefresh();
};

<span class="comment">/**
 * Visualizes row selection.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oRow Row object
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.visualizeSelectRow = <span class="reserved">function</span>(oRow) {
	<span class="comment">// Check arguments</span>
	<span class="reserved">if</span> (!oRow) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get table row element</span>
	var oTr = document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'Row'</span> + oRow.i);
	<span class="reserved">if</span> (oTr) { <span class="comment">// Can be on different page</span>
		<span class="comment">// Get row number because rows can be sorted and filtered</span>
		/zpGridRow(\d+)/.exec(oTr.className);
		var sRow = RegExp.$1;
		<span class="comment">// Select row</span>
		var aClSelected = [];
		aClSelected.push(<span class="literal">' zpGridRowSelected zpGridRowSelected'</span>);
		aClSelected.push(sRow);
		aClSelected.push(<span class="literal">' zpGridRowSelected'</span>);
		aClSelected.push(sRow % 2 == 1 ? <span class="literal">'Odd'</span> : <span class="literal">'Even'</span>);
		<span class="reserved">if</span> (oTr.className.indexOf(<span class="literal">'zpGridRowLast'</span>) &gt;= 0) { <span class="comment">// Last row</span>
			aClSelected.push(<span class="literal">' zpGridRowSelectedLast'</span>);
		}
		var sClassSelected = aClSelected.join(<span class="literal">''</span>);
		oTr.className += sClassSelected;
		<span class="comment">// Get fixed part of row</span>
		oTr = document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'Row'</span> + oRow.i +
		 <span class="literal">'Fixed'</span>);
		<span class="reserved">if</span> (oTr) {
			oTr.className += sClassSelected;
		}
	}
};

<span class="comment">/**
 * Visualizes row unselection.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oRow Row object
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.visualizeUnselectRow = <span class="reserved">function</span>(oRow) {
	<span class="comment">// Check arguments</span>
	<span class="reserved">if</span> (!oRow) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get table row element</span>
	var oTr = document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'Row'</span> + oRow.i);
	<span class="reserved">if</span> (oTr) { <span class="comment">// Can be on different page</span>
		oTr.className = oTr.className.replace(/ zpGridRowSelected[^ ]*/g, <span class="literal">''</span>);
		<span class="comment">// Get fixed part of row</span>
		oTr = document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'Row'</span> + oRow.i +
		 <span class="literal">'Fixed'</span>);
		<span class="reserved">if</span> (oTr) {
			oTr.className = oTr.className.replace(/ zpGridRowSelected[^ ]*/g, <span class="literal">''</span>);
		}
	}
};

<span class="comment">/**
 * Visualizes cell selection.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oCell Cell object
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.visualizeSelectCell = <span class="reserved">function</span>(oCell) {
	<span class="comment">// Check arguments</span>
	<span class="reserved">if</span> (!oCell) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get table cell element</span>
	var oTd = document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'Row'</span> + oCell.r +
	 <span class="literal">'Cell'</span> + oCell.i);
	<span class="reserved">if</span> (oTd) { <span class="comment">// Can be on different page</span>
		<span class="comment">// Select cell</span>
		var aClSelected = [];
		aClSelected.push(<span class="literal">' zpGridCellSelected zpGridCellSelected'</span>);
		aClSelected.push(oCell.i);
		aClSelected.push(<span class="literal">' zpGridCellSelected'</span>);
		aClSelected.push(oCell.i % 2 == 1 ? <span class="literal">'Odd'</span> : <span class="literal">'Even'</span>);
		<span class="reserved">if</span> (oCell.i == <span class="reserved">this</span>.fields.length - 1) { <span class="comment">// Last cell</span>
			aClSelected.push(<span class="literal">' zpGridCellSelectedLast'</span>);
		}
		oTd.className += aClSelected.join(<span class="literal">''</span>);
	}
};

<span class="comment">/**
 * Visualizes cell unselection.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oCell Cell object
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.visualizeUnselectCell = <span class="reserved">function</span>(oCell) {
	<span class="comment">// Check arguments</span>
	<span class="reserved">if</span> (!oCell) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get table row element</span>
	var oTd = document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'Row'</span> + oCell.r +
	 <span class="literal">'Cell'</span> + oCell.i);
	<span class="reserved">if</span> (oTd) { <span class="comment">// Can be on different page</span>
		oTd.className = oTd.className.replace(/ zpGridCellSelected[^ ]*/g, <span class="literal">''</span>);
	}
};

<span class="comment">/**
 * Displays filter out forms.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oFilterOut Object passed through config option
 * <span class="attrib">@param</span> {object} aVals Array of unique column values
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.visualizeFilterOut = <span class="reserved">function</span>(oFilterOut, aVals) {
	<span class="comment">// Get container</span>
	<span class="reserved">if</span> (!oFilterOut) {
		<span class="reserved">return</span>;
	}
	var oContr = Zapatec.Widget.getElementById(oFilterOut.container);
	<span class="reserved">if</span> (!oContr) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get columns</span>
	var aCols = oFilterOut.column;
	<span class="reserved">if</span> (!(aCols instanceof Array)) {
		aCols = [aCols];
	}
	<span class="comment">// Get fields</span>
	var aFields = [];
	<span class="reserved">for</span> (var iCol = 0; iCol &lt; aCols.length; iCol++) {
		var oField = <span class="reserved">this</span>.fields[aCols[iCol]];
		<span class="reserved">if</span> (!oField) {
			continue;
		}
		aFields.push(oField);
	}
	<span class="reserved">if</span> (!aFields.length) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Join column numbers</span>
	var sCols = aCols.join(<span class="literal">','</span>);
	<span class="comment">// "Select all" and "Clear" links</span>
	var aHtml = [];
	aHtml.push(<span class="literal">'&lt;div&gt;&lt;a href="javascript:void(0)" onclick="Zapatec.Grid.checkboxSelectAllOnClick(\'</span><span class="literal">');
	aHtml.push(this.id);
	aHtml.push("'</span>,[<span class="literal">");
	aHtml.push(sCols);
	aHtml.push('])"</span>&gt;<span class="literal">');
	aHtml.push(this.getMessage('</span>labelSelectAll<span class="literal">'));
	aHtml.push('</span>&lt;/a&gt; | &lt;a href=<span class="literal">"javascript:void(0)"</span> onclick=<span class="literal">"Zapatec.Grid.checkboxClearAllOnClick(\'');
	aHtml.push(this.id);
	aHtml.push("</span><span class="literal">',[");
	aHtml.push(sCols);
	aHtml.push('</span>])<span class="literal">"&gt;');
	aHtml.push(this.getMessage('labelClear'));
	aHtml.push('&lt;/a&gt;&lt;/div&gt;');
	// Checkboxes
	for (var iVal = 0; iVal &lt; aVals.length; iVal++) {
		var sVal = aVals[iVal].v + '';
		var sEscaped = escape(sVal);
		aHtml.push('&lt;div&gt;&lt;input type="</span>checkbox<span class="literal">" ');
		// Check if this value is hidden
		for (var iField = 0; iField &lt; aFields.length; iField++) {
			var oField = aFields[iField];
			if (!(oField.hiddenValues instanceof Array) ||
			 Zapatec.Utils.arrIndexOf(oField.hiddenValues, sVal) &lt; 0) {
				aHtml.push('checked ');
				break;
			}
		}
		aHtml.push('onclick="</span><span class="literal">');
		if (oFilterOut.onclick) {
			aHtml.push(oFilterOut.onclick);
			aHtml.push('</span>;<span class="literal">');
		}
		aHtml.push("Zapatec.Grid.checkboxOnClick('</span><span class="literal">");
		aHtml.push(this.id);
		aHtml.push("</span><span class="literal">',[");
		aHtml.push(sCols);
		aHtml.push("],unescape('</span><span class="literal">");
		aHtml.push(sEscaped);
		aHtml.push("</span><span class="literal">'),this.checked)\" /&gt;&lt;a href=\"javascript:void(0)\" onclick=\"Zapatec.Grid.checkboxLinkOnClick('</span><span class="literal">");
		aHtml.push(this.id);
		aHtml.push("</span><span class="literal">',[");
		aHtml.push(sCols);
		aHtml.push("],unescape('</span><span class="literal">");
		aHtml.push(sEscaped);
		aHtml.push("</span><span class="literal">'))\"&gt;");
		aHtml.push(sVal);
		aHtml.push('</span>&lt;/a&gt;&lt;/div&gt;<span class="literal">');
	}
	oContr.innerHTML = aHtml.join('</span><span class="literal">');
};

/**
 * Returns container for "Loading" or "Updating" image.
 *
 * @private
 * @return Container for "Loading" or "Updating" image
 * @type object
 */
Zapatec.Grid.prototype.getBusyContainer = function() {
	if (!this.container) {
		return;
	}
	// Get container
	var oContr = document.getElementById('</span>zpGrid<span class="literal">' + this.id + '</span>BusyContainer<span class="literal">');
	if (oContr) {
		oContr.style.left = this.container.scrollLeft + '</span>px<span class="literal">';
		oContr.style.top = this.container.scrollTop + '</span>px<span class="literal">';
		oContr.style.width = Math.min(this.container.clientWidth,
		 this.getGridDimensions().width) + '</span>px<span class="literal">';
		oContr.style.height = this.container.clientHeight + '</span>px<span class="literal">';
	} else {
		oContr = this.container;
	};
	return oContr;
};

/**
 * Displays "Loading" image. Attached to fetchSourceStart event.
 * @private
 */
Zapatec.Grid.prototype.displayLoading = function() {
	// Remove "Updating"
	this.removeUpdating();
	// Display image
	Zapatec.Transport.showBusy({
		busyContainer: this.getBusyContainer()
	});
};

/**
 * Removes "Loading" image. Attached to fetchSourceEnd event.
 * @private
 */
Zapatec.Grid.prototype.removeLoading = function() {
	// Remove image
	Zapatec.Transport.removeBusy({
		busyContainer: this.getBusyContainer()
	});
};

/**
 * Displays "Updating" image.
 * @private
 */
Zapatec.Grid.prototype.displayUpdating = function() {
	// Blinking message is irritative. Display it only when it'</span>s really needed.
	<span class="comment">// Message can be safely skipped in large grids when there are &lt; 50 of lines</span>
	<span class="comment">// to display because rendering takes most of time.</span>
	var oConfig = <span class="reserved">this</span>.config;
	<span class="reserved">if</span> (!oConfig.dataOnDemand &amp;&amp; !oConfig.totals.length) {
		var iFields = <span class="reserved">this</span>.fields.length;
		<span class="reserved">if</span> (<span class="reserved">this</span>.totalRecords() * iFields &lt; 2500) {
			<span class="reserved">if</span> (<span class="reserved">this</span>.recordsDisplayed() * iFields &lt; 250) {
				<span class="reserved">return</span>;
			}
			var iRowsPerPage = oConfig.rowsPerPage;
			<span class="reserved">if</span> (iRowsPerPage &gt; 0) {
				<span class="reserved">if</span> (iRowsPerPage * iFields &lt; 250) {
					<span class="reserved">return</span>;
				}
			}
			var iVisibleRows = oConfig.visibleRows;
			<span class="reserved">if</span> (iVisibleRows &gt; 0) {
				<span class="reserved">if</span> (iVisibleRows * iFields &lt; 250) {
					<span class="reserved">return</span>;
				}
			}
		}
	}
	<span class="comment">// Remove "Loading"</span>
	<span class="reserved">this</span>.removeLoading();
	<span class="comment">// Display image</span>
	Zapatec.Transport.showBusy({
		busyContainer: <span class="reserved">this</span>.getBusyContainer(),
		busyImage: <span class="literal">'zpupdating.gif'</span>
	});
};

<span class="comment">/**
 * Removes "Updating" image.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.removeUpdating = <span class="reserved">function</span>() {
	<span class="comment">// Remove image</span>
	Zapatec.Transport.removeBusy({
		busyContainer: <span class="reserved">this</span>.getBusyContainer(),
		busyImage: <span class="literal">'zpupdating.gif'</span>
	});
};

<span class="comment">/**
 * Returns table cell element or undefined if field is not found. To get field
 * element by cell, pass cell object instead of field.
 *
 * <span class="attrib">@param</span> {object} oField Field or cell object
 * <span class="attrib">@return</span> Table cell element
 * <span class="attrib">@type</span> object
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.getFieldElement = <span class="reserved">function</span>(oField) {
	<span class="reserved">if</span> (oField) {
		<span class="reserved">return</span> document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'Field'</span> + oField.i);
	}
};

<span class="comment">/**
 * Returns table row element or undefined if row is on different page or not
 * found.
 *
 * <span class="attrib">@param</span> {object} oRow Row object
 * <span class="attrib">@return</span> Table row element
 * <span class="attrib">@type</span> object
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.getRowElement = <span class="reserved">function</span>(oRow) {
	<span class="reserved">if</span> (oRow) {
		<span class="reserved">return</span> document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'Row'</span> + oRow.i);
	}
};

<span class="comment">/**
 * Returns table row element or undefined if row is on different page or not
 * found.
 *
 * <span class="attrib">@param</span> {object} oCell Cell object
 * <span class="attrib">@return</span> Table row element
 * <span class="attrib">@type</span> object
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.getRowElementByCell = <span class="reserved">function</span>(oCell) {
	<span class="reserved">if</span> (oCell) {
		<span class="reserved">return</span> document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'Row'</span> + oCell.r);
	}
};

<span class="comment">/**
 * Returns table cell element or undefined if cell is on different page or not
 * found.
 *
 * <span class="attrib">@param</span> {object} oCell Cell object
 * <span class="attrib">@return</span> Table cell element
 * <span class="attrib">@type</span> object
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.getCellElement = <span class="reserved">function</span>(oCell) {
	<span class="reserved">if</span> (oCell) {
		<span class="reserved">return</span> document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'Row'</span> + oCell.r +
		 <span class="literal">'Cell'</span> + oCell.i);
	}
};

<span class="comment">/**
 * Redraws specified cell without redrawing whole grid. Useful after changing of
 * cell value.
 *
 * <span class="attrib">@param</span> {object} oCell Cell object
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.visualizeCellReadOnly = <span class="reserved">function</span>(oCell) {
	var iGridId = <span class="reserved">this</span>.id;
	var oRow = <span class="reserved">this</span>.getRowByCell(oCell);
	var iRowId = <span class="reserved">this</span>.getRowId(oRow);
	var iCellId = <span class="reserved">this</span>.getCellId(oCell);
	<span class="comment">// Get table row element</span>
	var sRowId = <span class="literal">'zpGrid'</span> + iGridId + <span class="literal">'Row'</span> + iRowId;
	var oTr = document.getElementById(sRowId);
	<span class="comment">// Get table row element for horizontal grid</span>
	var oTc = document.getElementById(<span class="literal">'zpGrid'</span> + iGridId + <span class="literal">'Col'</span> + iCellId);
	<span class="comment">// Get table cell element</span>
	var sCellId = sRowId + <span class="literal">'Cell'</span> + iCellId;
	var oTd = document.getElementById(sCellId);
	<span class="comment">// Can be on different page</span>
	<span class="reserved">if</span> (oTd) {
		<span class="comment">// Redraw cell</span>
		var aHtml = [];
		<span class="reserved">this</span>.outputCellValue(aHtml, <span class="reserved">this</span>.getFieldByCell(oCell), oCell);
		var sHtml = aHtml.join(<span class="literal">''</span>);
		oTd.innerHTML = sHtml;
		<span class="comment">// Redraw hidden cell</span>
		var oTdHidden = document.getElementById(sCellId + <span class="literal">'Hidden'</span>);
		<span class="reserved">if</span> (oTdHidden) {
			oTdHidden.innerHTML = sHtml;
		}
		<span class="comment">// Update row's className</span>
		<span class="comment">// Other cell in the row can still be edited</span>
		var bEditingCell;
		var oEditingCell = <span class="reserved">this</span>.editingCell;
		<span class="reserved">if</span> (oEditingCell &amp;&amp; <span class="reserved">this</span>.getCellRowId(oEditingCell) == iRowId) {
			bEditingCell = true;
		}
		<span class="reserved">if</span> (oTr) {
			<span class="comment">// Vertical grid</span>
			<span class="reserved">if</span> (!bEditingCell) {
				oTr.className = oTr.className.replace(/ zpGridRowEditable[^ ]*/g, <span class="literal">''</span>);
			}
			oTr.className = oTr.className.replace(/ zpGridRowInvalid[^ ]*/g, <span class="literal">''</span>)
			 .split(/\s+/).join(<span class="literal">' '</span>);
			<span class="comment">// Update fixed part of row's className</span>
			var oTrFixed = document.getElementById(sRowId + <span class="literal">'Fixed'</span>);
			<span class="reserved">if</span> (oTrFixed) {
				<span class="reserved">if</span> (!bEditingCell) {
					oTrFixed.className = oTrFixed.className
					 .replace(/zpGridRowEditable[^ ]*/g, <span class="literal">''</span>);
				}
				oTrFixed.className = oTrFixed.className
				 .replace(/zpGridRowInvalid[^ ]*/g, <span class="literal">''</span>).split(/\s+/).join(<span class="literal">' '</span>);
			}
		} <span class="reserved">else</span> <span class="reserved">if</span> (oTc) {
			<span class="comment">// Horizontal grid</span>
			<span class="reserved">if</span> (!bEditingCell) {
				oTc.className = oTc.className.replace(/ zpGridColEditable[^ ]*/g, <span class="literal">''</span>);
			}
			oTc.className = oTc.className.replace(/ zpGridColInvalid[^ ]*/g, <span class="literal">''</span>)
			 .split(/\s+/).join(<span class="literal">' '</span>);
		}
		<span class="comment">// Update cell's className</span>
		oTd.className = oTd.className.replace(/ zpGridCellEditable[^ ]*/g, <span class="literal">''</span>)
		 .replace(/ zpGridCellInvalid[^ ]*/g, <span class="literal">''</span>);
		<span class="comment">// Validate cell</span>
		<span class="reserved">if</span> (!<span class="reserved">this</span>.validateCell(oCell)) {
			var aCl;
			<span class="reserved">if</span> (oTr) {
				<span class="comment">// Vertical grid</span>
				<span class="comment">// Update row's className</span>
				aCl = [];
				aCl.push(<span class="literal">' zpGridRowInvalid zpGridRowInvalid'</span>);
				aCl.push(iRowId);
				aCl.push(<span class="literal">' zpGridRowInvalid'</span>);
				aCl.push(oTr.className.indexOf(<span class="literal">'zpGridRowOdd'</span>) &gt;= 0 ? <span class="literal">'Odd'</span> : <span class="literal">'Even'</span>);
				<span class="reserved">if</span> (oTr.className.indexOf(<span class="literal">'zpGridRowLast'</span>) &gt;= 0) {
					<span class="comment">// Last row</span>
					aCl.push(<span class="literal">' zpGridRowInvalidLast'</span>);
				}
				var sClass = aCl.join(<span class="literal">''</span>);
				oTr.className += sClass;
				<span class="comment">// Update fixed part of row's className</span>
				<span class="reserved">if</span> (oTrFixed) {
					oTrFixed.className += sClass;
				}
			} <span class="reserved">else</span> <span class="reserved">if</span> (oTc) {
				<span class="comment">// Horizontal grid</span>
				<span class="comment">// Update row's className</span>
				aCl = [];
				aCl.push(<span class="literal">' zpGridColInvalid zpGridColInvalid'</span>);
				aCl.push(iCellId);
				aCl.push(<span class="literal">' zpGridColInvalid'</span>);
				aCl.push(oTc.className.indexOf(<span class="literal">'zpGridColOdd'</span>) &gt;= 0 ? <span class="literal">'Odd'</span> : <span class="literal">'Even'</span>);
				<span class="reserved">if</span> (oTc.className.indexOf(<span class="literal">'zpGridColLast'</span>) &gt;= 0) {
					<span class="comment">// Last row</span>
					aCl.push(<span class="literal">' zpGridColInvalidLast'</span>);
				}
				oTc.className += aCl.join(<span class="literal">''</span>);
			}
			<span class="comment">// Update cell's className</span>
			aCl = [];
			aCl.push(<span class="literal">' zpGridCellInvalid zpGridCellInvalid'</span>);
			aCl.push(iCellId);
			aCl.push(<span class="literal">' zpGridCellInvalid'</span>);
			aCl.push(iCellId % 2 == 1 ? <span class="literal">'Odd'</span> : <span class="literal">'Even'</span>);
			<span class="reserved">if</span> (oTd.className.indexOf(<span class="literal">'zpGridCellLast'</span>) &gt;= 0) {
				<span class="comment">// Last cell</span>
				aCl.push(<span class="literal">' zpGridCellInvalidLast'</span>);
			}
			oTd.className += aCl.join(<span class="literal">''</span>);
		}
	}
};

<span class="comment">/**
 * Indicates during 0.5 second result of cell saving. Indicates twice if cell
 * was not saved.
 *
 * &lt;pre&gt;
 * Arguments format:
 * {
 *   cell: [object] cell object,
 *   saved: [boolean] true - saved, false - not saved,
 *   count: [number, private] indications count
 * }
 * &lt;/pre&gt;
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Arguments
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.visualizeCellSavingResult = <span class="reserved">function</span>(oArg) {
	<span class="comment">// Get table cell element</span>
	var oCell = oArg.cell;
	var sCellId = [
		<span class="literal">'zpGrid'</span>,
		<span class="reserved">this</span>.getId(),
		<span class="literal">'Row'</span>,
		<span class="reserved">this</span>.getCellRowId(oCell),
		<span class="literal">'Cell'</span>,
		<span class="reserved">this</span>.getCellId(oCell)
	].join(<span class="literal">''</span>);
	var oTd = document.getElementById(sCellId);
	<span class="reserved">if</span> (!oTd) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Indicate saving</span>
	var bSaved = oArg.saved;
	var sClass = bSaved ? <span class="literal">' zpGridCellSaved'</span> : <span class="literal">' zpGridCellNotSaved'</span>;
	oTd.className = [oTd.className, sClass].join(<span class="literal">''</span>);
	<span class="comment">// Remove indication in 0.5 second</span>
	setTimeout(<span class="reserved">function</span>() {
		var oTd = document.getElementById(sCellId);
		<span class="reserved">if</span> (oTd) {
			oTd.className = oTd.className.replace(new RegExp(sClass, <span class="literal">'g'</span>), <span class="literal">''</span>);
		}
	}, 500);
	<span class="comment">// Indicate twice if not saved</span>
	<span class="reserved">if</span> (!bSaved &amp;&amp; !oArg.count) {
		oArg.count = 1;
		var oGrid = <span class="reserved">this</span>;
		setTimeout(<span class="reserved">function</span>() {
			oGrid.visualizeCellSavingResult(oArg);
		}, 1000);
	}
};

<span class="comment">/**
 * Indicates that cell was saved successfully.
 *
 * &lt;pre&gt;
 * Arguments format:
 * {
 *   cell: [object] cell object
 * }
 * &lt;/pre&gt;
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Arguments
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.visualizeCellSaved = <span class="reserved">function</span>(oArg) {
	oArg.saved = true;
	<span class="reserved">this</span>.visualizeCellSavingResult(oArg);
};

<span class="comment">/**
 * Indicates that error occured during cell saving.
 *
 * &lt;pre&gt;
 * Arguments format:
 * {
 *   cell: [object] cell object
 * }
 * &lt;/pre&gt;
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Arguments
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.visualizeCellNotSaved = <span class="reserved">function</span>(oArg) {
	oArg.saved = false;
	<span class="reserved">this</span>.visualizeCellSavingResult(oArg);
};

<span class="comment">/**
 * Adjusts number of rows per page in the grid when &lt;b&gt;fitInto&lt;/b&gt; config option
 * is used. Calculates approximate number of rows per page and adjusts the grid.
 * Then attaches itself to &lt;b&gt;gridRefreshed&lt;/b&gt; event and redraws grid. When
 * &lt;b&gt;gridRefreshed&lt;/b&gt; event occurs, detaches itself from the event, corrects
 * adjustment after grid has been redrawn and we know precise row heights.
 * Then redraws grid again.
 * &lt;pre&gt;
 * Defines internal property &lt;b&gt;autoresizeState&lt;/b&gt;.
 * &lt;/pre&gt;
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.autoresize = <span class="reserved">function</span>() {
	<span class="comment">// Both border and container must be defined</span>
	var oBorder = <span class="reserved">this</span>.border;
	<span class="reserved">if</span> (!oBorder) {
		<span class="reserved">return</span>;
	}
	var oFitInto = <span class="reserved">this</span>.fitInto;
	<span class="reserved">if</span> (!oFitInto) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Grid must not be in the middle of refresh</span>
	<span class="reserved">if</span> (<span class="reserved">this</span>.refreshState) {
		<span class="reserved">this</span>.autoresizeState = 0;
		<span class="reserved">return</span>;
	}
	<span class="comment">// Flag to make sure autoresize is not in the endless loop</span>
	<span class="reserved">if</span> (!<span class="reserved">this</span>.autoresizeState) {
		<span class="reserved">this</span>.autoresizeState = 0;
	} <span class="reserved">else</span> <span class="reserved">if</span> (<span class="reserved">this</span>.autoresizeState &gt; 2) {
		<span class="reserved">this</span>.autoresizeState = 0;
		<span class="reserved">return</span>;
	}
	<span class="comment">// Turn off scroll bars in the container since grid should fit into it</span>
	oFitInto.style.overflow = <span class="literal">'hidden'</span>;
	<span class="comment">// Get container dimensions</span>
	var fOffset = Zapatec.Utils.getElementOffset;
	var oContainerOffset = fOffset(oFitInto);
	var iHeight = oContainerOffset.height;
	var iWidth = oContainerOffset.width;
	<span class="comment">// Indicates that grid needs to be refreshed</span>
	var bRefresh = false;
	<span class="comment">// Adjust width of the grid to fit into container</span>
	var oContainerStyle = <span class="reserved">this</span>.container.style;
	var sWidth = iWidth + <span class="literal">'px'</span>;
	<span class="reserved">if</span> (oContainerStyle.width != sWidth) {
		oContainerStyle.width = sWidth;
		bRefresh = true;
	}
	<span class="comment">// Get width of the grid</span>
	var iGridWidth = <span class="reserved">this</span>.getGridDimensions().width;
	<span class="comment">// Determine if we need horizontal scroll bar and draw it</span>
	<span class="reserved">if</span> (/Safari/i.test(navigator.userAgent)) {
		<span class="comment">// Safari crashes on refresh if overflow == 'scroll'</span>
		<span class="reserved">if</span> (iGridWidth &amp;&amp; iGridWidth &lt; iWidth) {
			oContainerStyle.overflow = <span class="literal">'hidden'</span>;
		} <span class="reserved">else</span> {
			oContainerStyle.overflow = <span class="literal">'auto'</span>;
		}
	} <span class="reserved">else</span> {
		<span class="reserved">if</span> (iGridWidth &amp;&amp; iGridWidth &lt; iWidth) {
			oContainerStyle.overflowX = <span class="literal">'hidden'</span>;
			oContainerStyle.overflowY = <span class="literal">'hidden'</span>;
			oContainerStyle.overflow = <span class="literal">'hidden'</span>;
		} <span class="reserved">else</span> {
			oContainerStyle.overflow = <span class="literal">'scroll'</span>;
			oContainerStyle.overflowX = <span class="literal">'scroll'</span>;
			oContainerStyle.overflowY = <span class="literal">'hidden'</span>;
		}
	}
	<span class="comment">// Check if grid's height fits into container</span>
	var iGridHeight = fOffset(oBorder).height;
	<span class="reserved">if</span> (iHeight != iGridHeight) {
		<span class="comment">// Calculate average row height</span>
		var iAvgRowHeight = 0;
		var aRows = <span class="reserved">this</span>.applyPaging();
		var iRowsPerPage = aRows.length;
		var sId = <span class="reserved">this</span>.id.toString();
		var fOffset = Zapatec.Utils.getElementOffset;
		<span class="reserved">for</span> (var iRow = 0; iRow &lt; iRowsPerPage; iRow++) {
			<span class="comment">// Safari always returns zero height for TR elements, so we need TD</span>
			iAvgRowHeight += fOffset(document.getElementById([<span class="literal">'zpGrid'</span>, sId, <span class="literal">'Row'</span>,
			 <span class="reserved">this</span>.getRowId(aRows[iRow]), <span class="literal">'Cell0'</span>].join(<span class="literal">''</span>))).height;
		}
		iAvgRowHeight /= iRowsPerPage;
		<span class="comment">// Calculate rows per page</span>
		<span class="reserved">while</span> (iHeight &lt; iGridHeight) {
			iGridHeight -= iAvgRowHeight;
			iRowsPerPage--;
		}
		<span class="reserved">while</span> (iHeight &gt; iGridHeight) {
			iGridHeight += iAvgRowHeight;
			iRowsPerPage++;
		}
		<span class="reserved">if</span> (iHeight &lt; iGridHeight) {
			iRowsPerPage--;
		}
		<span class="reserved">if</span> (iRowsPerPage &lt; 1) {
			iRowsPerPage = 1;
		}
		<span class="comment">// If value didn't change, just refresh the grid because width could be</span>
		<span class="comment">// changed</span>
		var oAutoresizeFrame = <span class="reserved">this</span>.autoresizeFrame;
		<span class="reserved">if</span> (iRowsPerPage != oAutoresizeFrame.visibleRows) {
			<span class="reserved">if</span> (oAutoresizeFrame.direction == -1) {
				<span class="comment">// Previous page</span>
				oAutoresizeFrame.currentRow += oAutoresizeFrame.visibleRows;
				oAutoresizeFrame.currentRow -= iRowsPerPage;
			}
			oAutoresizeFrame.visibleRows = iRowsPerPage;
			<span class="comment">// Fix page number</span>
			<span class="reserved">this</span>.currentPage =
			 Math.ceil(oAutoresizeFrame.currentRow / oAutoresizeFrame.visibleRows);
			<span class="comment">// Flag to make sure autoresize is not in the endless loop</span>
			<span class="reserved">this</span>.autoresizeState++;
			<span class="reserved">this</span>.refresh();
			<span class="reserved">return</span>;
		}
	}
	<span class="comment">// Refresh because width was changed</span>
	<span class="reserved">if</span> (bRefresh) {
		<span class="comment">// Prevent autoresize after refresh</span>
		<span class="reserved">this</span>.autoresizeState = 3;
		<span class="reserved">this</span>.refresh();
		<span class="reserved">return</span>;
	}
	<span class="comment">// Reset flag</span>
	<span class="reserved">this</span>.autoresizeState = 0;
};

<span class="comment">/**
 * Indicates that column resizing was started.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.columnResizing = false;

<span class="comment">/**
 * Shows verical line when column right margin is dragged. Attached to static
 * dragStart event. See {<span class="attrib">@link</span> Zapatec.Drag#start} for details.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Argument object received from the event.
 */</span>
Zapatec.Grid.onColResizStart = <span class="reserved">function</span>(oArg) {
	<span class="comment">// Check arguments</span>
	<span class="reserved">if</span> (!oArg) {
		<span class="reserved">return</span>;
	}
	var oEl = oArg.el;
	<span class="reserved">if</span> (!oEl || !oEl.id) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get grid id and column number</span>
	var aM = oEl.id.match(/^zpGrid(\d+)(Col|Span)(\d+)Resize$/);
	<span class="reserved">if</span> (!(aM instanceof Array) || aM.length &lt; 4) {
		<span class="reserved">return</span>;
	}
	var iGrid = aM[1];
	var oGrid = Zapatec.Widget.getWidgetById(iGrid);
	<span class="reserved">if</span> (!(oGrid instanceof Zapatec.Grid)) {
		<span class="reserved">return</span>;
	}
	var sGrid = [<span class="literal">'zpGrid'</span>, iGrid].join(<span class="literal">''</span>);
	var iColId = aM[3];
	var oSt = oEl.style;
	<span class="comment">// Show vertical line</span>
	<span class="comment">// Get vertical line dimensions</span>
	var oUtils = Zapatec.Utils;
	var oOffsetEl = oUtils.getElementOffset(oEl);
	<span class="comment">// Get container dimensions</span>
	var oOffsetCont =
	 oUtils.getElementOffset(oGrid.headerContainer || oGrid.container);
	var oOffsetContScroll =
	 oUtils.getElementOffsetScrollable(oGrid.headerContainer || oGrid.container);
	<span class="comment">// Get pagination dimensions</span>
	var iPH = 0;
	<span class="reserved">if</span> (!oGrid.paginationContainers.length) {
		var oPC = document.getElementById([sGrid, <span class="literal">'Pagination'</span>].join(<span class="literal">''</span>));
		<span class="reserved">if</span> (oPC) {
			iPH = oPC.offsetHeight;
		}
	}
	<span class="comment">// Shift vertical line to the top margin of the container</span>
	<span class="reserved">if</span> (oOffsetEl.top != oOffsetCont.top) {
		oSt.top = oOffsetCont.top - oOffsetEl.top + <span class="literal">'px'</span>;
	}
	<span class="comment">// Set vertical line height</span>
	var iH = oOffsetCont.height;
	<span class="comment">// Vertical line shouldn't cover pagination</span>
	<span class="reserved">if</span> (!oGrid.headerContainer) {
		iH -= iPH;
	}
	oSt.height = iH + <span class="literal">'px'</span>;
	<span class="comment">// Show vertical line</span>
	oEl.className = <span class="literal">'zpGridColResize'</span>;
	<span class="comment">// If separate header container</span>
	oEl = document.getElementById([sGrid, <span class="literal">'DataColResize'</span>].join(<span class="literal">''</span>));
	<span class="reserved">if</span> (oEl) {
		<span class="comment">// Move vertical line</span>
		oSt = oEl.style;
		oSt.left = oOffsetEl.left - oOffsetContScroll.left + <span class="literal">'px'</span>;
		<span class="comment">// Set vertical line height</span>
		<span class="comment">// Vertical line shouldn't cover pagination</span>
		iH = oEl.parentNode.offsetHeight - iPH;
		oSt.height = iH + <span class="literal">'px'</span>;
		<span class="comment">// Show vertical line</span>
		oSt.display = <span class="literal">''</span>;
	}
	<span class="comment">// If separate totals container</span>
	oEl = document.getElementById([sGrid, <span class="literal">'TotalsColResize'</span>].join(<span class="literal">''</span>));
	<span class="reserved">if</span> (oEl) {
		<span class="comment">// Move vertical line</span>
		oSt = oEl.style;
		oSt.left = oOffsetEl.left - oOffsetContScroll.left + <span class="literal">'px'</span>;
		<span class="comment">// Set vertical line height</span>
		oSt.height = oEl.parentNode.offsetHeight + <span class="literal">'px'</span>;
		<span class="comment">// Show vertical line</span>
		oSt.display = <span class="literal">''</span>;
	}
	<span class="comment">// Remove onclick event temporary to prevent sorting when margin is dropped</span>
	oEl = document.getElementById([sGrid, <span class="literal">'Col'</span>, iColId, <span class="literal">'Title'</span>].join(<span class="literal">''</span>));
	<span class="reserved">if</span> (!oEl) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Remove timeout to prevent pending restoring of onclick event</span>
	<span class="reserved">if</span> (oEl.zpTimeout) {
		clearTimeout(oEl.zpTimeout);
		oEl.zpTimeout = null;
	}
	<span class="comment">// Get td element</span>
	oEl = oEl.parentNode;
	<span class="reserved">if</span> (!oEl) {
		<span class="reserved">return</span>;
	}
	oEl = oEl.parentNode;
	<span class="reserved">if</span> (!oEl) {
		<span class="reserved">return</span>;
	}
	<span class="reserved">if</span> (oEl.onclick) {
		oEl.zpOnclick = oEl.onclick;
		oEl.onclick = null;
	}
	<span class="comment">// Indicate that resizing was started</span>
	Zapatec.Grid.columnResizing = true;
};

<span class="comment">/**
 * Moves verical line when column right margin is dragged. Attached to static
 * dragMove event. See {<span class="attrib">@link</span> Zapatec.Drag#start} for details.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Argument object received from the event.
 */</span>
Zapatec.Grid.onColResizMove = <span class="reserved">function</span>(oArg) {
	<span class="comment">// Check arguments</span>
	<span class="reserved">if</span> (!oArg) {
		<span class="reserved">return</span>;
	}
	var oEl = oArg.el;
	<span class="reserved">if</span> (!oEl || !oEl.id) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get grid id and column number</span>
	var aM = oEl.id.match(/^zpGrid(\d+)(Col|Span)(\d+)Resize$/);
	<span class="reserved">if</span> (!(aM instanceof Array) || aM.length &lt; 4) {
		<span class="reserved">return</span>;
	}
	var iGrid = aM[1];
	var sGrid = [<span class="literal">'zpGrid'</span>, iGrid].join(<span class="literal">''</span>);
	var iOffset = oArg.left - oArg.prevLeft;
	var oSt;
	<span class="comment">// If separate header container</span>
	oEl = document.getElementById([sGrid, <span class="literal">'DataColResize'</span>].join(<span class="literal">''</span>));
	<span class="reserved">if</span> (oEl) {
		<span class="comment">// Move vertical line</span>
		oSt = oEl.style;
		oSt.left = parseInt(oSt.left) + iOffset + <span class="literal">'px'</span>;
	}
	<span class="comment">// If separate totals container</span>
	oEl = document.getElementById([sGrid, <span class="literal">'TotalsColResize'</span>].join(<span class="literal">''</span>));
	<span class="reserved">if</span> (oEl) {
		<span class="comment">// Move vertical line</span>
		oSt = oEl.style;
		oSt.left = parseInt(oSt.left) + iOffset + <span class="literal">'px'</span>;
	}
};

<span class="comment">/**
 * Resizes column and hides verical line when column right margin is dropped.
 * Attached to static dragEnd event. See {<span class="attrib">@link</span> Zapatec.Drag#start} for details.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Argument object received from the event.
 */</span>
Zapatec.Grid.onColResizEnd = <span class="reserved">function</span>(oArg) {
	<span class="comment">// Check arguments</span>
	<span class="reserved">if</span> (!oArg) {
		<span class="reserved">return</span>;
	}
	var oEl = oArg.el;
	<span class="reserved">if</span> (!oEl || !oEl.id) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get grid id and column number</span>
	var aM = oEl.id.match(/^zpGrid(\d+)(Col|Span)(\d+)Resize$/);
	<span class="reserved">if</span> (!(aM instanceof Array) || aM.length &lt; 4) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Indicate that resizing was ended</span>
	Zapatec.Grid.columnResizing = false;
	var iGrid = aM[1];
	var oGrid = Zapatec.Widget.getWidgetById(iGrid);
	<span class="reserved">if</span> (!oGrid) {
		<span class="reserved">return</span>;
	}
	var sGrid = [<span class="literal">'zpGrid'</span>, iGrid].join(<span class="literal">''</span>);
	var iColId = aM[3];
	var sTitle = [sGrid, <span class="literal">'Col'</span>, iColId, <span class="literal">'Title'</span>].join(<span class="literal">''</span>);
	var oSt = oEl.style;
	<span class="comment">// Hide verical line</span>
	oEl.className = <span class="literal">'zpGridColResizeHidden'</span>;
	<span class="comment">// Restore verical line position and height</span>
	oSt.top = <span class="literal">''</span>;
	oSt.height = <span class="literal">''</span>;
	<span class="comment">// If separate header container</span>
	var oDiv = document.getElementById([sGrid, <span class="literal">'DataColResize'</span>].join(<span class="literal">''</span>));
	var oDivSt;
	<span class="reserved">if</span> (oDiv) {
		<span class="comment">// Hide vertical line</span>
		oDivSt = oDiv.style;
		oDivSt.display = <span class="literal">'none'</span>;
		<span class="comment">// Restore verical line position and height</span>
		oDivSt.left = <span class="literal">''</span>;
		oDivSt.height = <span class="literal">''</span>;
	}
	<span class="comment">// If separate totals container</span>
	oDiv = document.getElementById([sGrid, <span class="literal">'TotalsColResize'</span>].join(<span class="literal">''</span>));
	<span class="reserved">if</span> (oDiv) {
		<span class="comment">// Hide vertical line</span>
		oDivSt = oDiv.style;
		oDivSt.display = <span class="literal">'none'</span>;
		<span class="comment">// Restore verical line position and height</span>
		oDivSt.left = <span class="literal">''</span>;
		oDivSt.height = <span class="literal">''</span>;
	}
	<span class="comment">// Set column width</span>
	var oTitle = document.getElementById(sTitle);
	<span class="reserved">if</span> (!oTitle) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get shift</span>
	var iShift = oArg.left - oArg.startLeft;
	<span class="reserved">if</span> (iShift) {
		<span class="comment">// Needed for spanned columns</span>
		oSt.left = <span class="literal">''</span>;
		<span class="comment">// Get new width</span>
		var iWidth = oTitle.offsetWidth + iShift;
		<span class="comment">// May be when spans are present</span>
		<span class="reserved">if</span> (iWidth &lt; 10) {
			iWidth = 10;
		}
		<span class="comment">// Change column width</span>
		oGrid.outSetColWidth(iColId, iWidth);
		<span class="comment">// Because FF sometimes doesn't resize it automatically into lower side</span>
		<span class="comment">// Can be tested on toolbar grid</span>
		oDiv = document.getElementById([sGrid, <span class="literal">'Container'</span>].join(<span class="literal">''</span>));
		<span class="reserved">if</span> (oDiv) {
			oDiv.style.width = oGrid.getGridDimensions().width + <span class="literal">'px'</span>;
		}
	}
	<span class="comment">// Restore sorting</span>
	<span class="comment">// Wait while this event is ended</span>
	<span class="comment">// Save timeout to be able to clean it if needed</span>
	oTitle.zpTimeout = setTimeout(<span class="reserved">function</span>() {
		<span class="comment">// Get div element</span>
		var oEl = document.getElementById(sTitle);
		<span class="reserved">if</span> (!oEl) {
			<span class="reserved">return</span>;
		}
		<span class="comment">// Remove timeout</span>
		oEl.zpTimeout = null;
		<span class="comment">// Get td element</span>
		oEl = oEl.parentNode;
		<span class="reserved">if</span> (!oEl) {
			<span class="reserved">return</span>;
		}
		oEl = oEl.parentNode;
		<span class="reserved">if</span> (!oEl) {
			<span class="reserved">return</span>;
		}
		<span class="comment">// Restore event</span>
		<span class="reserved">if</span> (oEl.zpOnclick) {
			oEl.onclick = oEl.zpOnclick;
			oEl.zpOnclick = null;
		}
		<span class="comment">// Fire event</span>
		Zapatec.Widget.callMethod(iGrid, <span class="literal">'fireEvent'</span>, <span class="literal">'gridResizedColumn'</span>, iColId,
		 iShift);
	}, 0);
};

<span class="comment">// Set event listeners responsible for column resizing</span>
Zapatec.EventDriven.addEventListener(<span class="literal">'dragStart'</span>, Zapatec.Grid.onColResizStart);
Zapatec.EventDriven.addEventListener(<span class="literal">'dragMove'</span>, Zapatec.Grid.onColResizMove);
Zapatec.EventDriven.addEventListener(<span class="literal">'dragEnd'</span>, Zapatec.Grid.onColResizEnd);

<span class="comment">/**
 * Indicates that mouse selection was started.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.mouseSelection = false;

<span class="comment">/**
 * Holds id of last mouseovered cell's td element during mouse selection.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.mouseOverCell = <span class="literal">''</span>;

<span class="comment">/**
 * Prepares grid for selection with mouse and calls {<span class="attrib">@link</span> Zapatec.Drag#start}.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {number} iRow Row id
 * <span class="attrib">@param</span> {number} iCell Cell id
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.mouseSelect = <span class="reserved">function</span>(iRow, iCell) {
	<span class="comment">// Now selection works with left mouse button only</span>
	var oEv = window.event;
	var iButton = oEv.button || oEv.which;
	<span class="reserved">if</span> (iButton != 1) {
		<span class="reserved">return</span>;
	}
	var oUtils = Zapatec.Utils;
	<span class="comment">// Check arguments</span>
	var sTdId = [<span class="literal">'zpGrid'</span>, <span class="reserved">this</span>.id, <span class="literal">'Row'</span>, iRow, <span class="literal">'Cell'</span>, iCell].join(<span class="literal">''</span>);
	var oTd = document.getElementById(sTdId);
	<span class="reserved">if</span> (!oTd) {
		<span class="reserved">return</span>;
	}
	var oBody = document.body;
	<span class="reserved">if</span> (!oBody) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Create selection frame</span>
	var sId = [sTdId, <span class="literal">'Select'</span>].join(<span class="literal">''</span>);
	var oEl = document.createElement(<span class="literal">'div'</span>);
	var oSt = oEl.style;
	oBody.appendChild(oEl);
	oSt.position = <span class="literal">'absolute'</span>;
	oSt.width = <span class="literal">'0px'</span>;
	oSt.height = <span class="literal">'0px'</span>;
	oSt.padding = <span class="literal">'0px'</span>;
	oSt.margin = <span class="literal">'0px'</span>;
	oEl.className = <span class="reserved">this</span>.getClassName({
		prefix: <span class="literal">'zpGrid'</span>,
		suffix: <span class="literal">'MouseSelection'</span>
	});
	var oPos = oUtils.getMousePos(oEv);
	oSt.left = oPos.pageX + <span class="literal">'px'</span>;
	oSt.top = oPos.pageY + <span class="literal">'px'</span>;
	<span class="comment">// Hide to prevent appearing of the frame on click event. Once it is resized,</span>
	<span class="comment">// it becomes visible.</span>
	oSt.visibility = <span class="literal">'hidden'</span>;
	oEl.id = sId;
	<span class="comment">// Start resizing of the frame</span>
	Zapatec.Drag.start(oEv, sId, {resize: true});
};

<span class="comment">/**
 * Does something when selection is started. Attached to static dragStart event.
 * See {<span class="attrib">@link</span> Zapatec.Drag#start} for details.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Argument object received from the event.
 */</span>
Zapatec.Grid.onMouseSelStart = <span class="reserved">function</span>(oArg) {
};

<span class="comment">/**
 * Shows selection frame. Attached to static dragMove event. See
 * {<span class="attrib">@link</span> Zapatec.Drag#move} for details.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Argument object received from the event.
 */</span>
Zapatec.Grid.onMouseSelMove = <span class="reserved">function</span>(oArg) {
	<span class="comment">// Check arguments</span>
	<span class="reserved">if</span> (!oArg) {
		<span class="reserved">return</span>;
	}
	var oEl = oArg.el;
	<span class="reserved">if</span> (!oEl || !oEl.id) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get grid, row and cell id</span>
	var aM = oEl.id.match(/^((zpGrid\d+Row\d+)Cell\d+)Select$/);
	<span class="reserved">if</span> (!(aM instanceof Array) || aM.length &lt; 3) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Show selection frame</span>
	var oSt = oEl.style;
	<span class="reserved">if</span> (oSt.visibility == <span class="literal">'hidden'</span>) {
		<span class="comment">// Deactivate cell</span>
		oEl = document.getElementById(aM[1]);
		<span class="reserved">if</span> (oEl) {
			oEl.onmouseout();
		}
		<span class="comment">// Deactivate row</span>
		oEl = document.getElementById(aM[2]);
		<span class="reserved">if</span> (oEl) {
			oEl.onmouseout();
		}
		<span class="comment">// Show selection frame</span>
		oSt.visibility = <span class="literal">'visible'</span>;
		<span class="comment">// Indicate that selection was started</span>
		var oGridClass = Zapatec.Grid;
		oGridClass.mouseSelection = true;
		<span class="comment">// Clear last mouseovered cell id</span>
		oGridClass.mouseOverCell = <span class="literal">''</span>;
	}
};

<span class="comment">/**
 * Removes selection frame and selects covered cells. Attached to static dragEnd
 * event. See {<span class="attrib">@link</span> Zapatec.Drag#end} for details.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Argument object received from the event.
 */</span>
Zapatec.Grid.onMouseSelEnd = <span class="reserved">function</span>(oArg) {
	<span class="comment">// Check arguments</span>
	<span class="reserved">if</span> (!oArg) {
		<span class="reserved">return</span>;
	}
	var oEl = oArg.el;
	<span class="reserved">if</span> (!oEl || !oEl.id) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get grid, row and cell id</span>
	var aM = oEl.id.match(/^zpGrid(\d+)Row(\d+)Cell(\d+)Select$/);
	<span class="reserved">if</span> (!(aM instanceof Array) || aM.length &lt; 4) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Remove frame</span>
	oEl.parentNode.removeChild(oEl);
	var oGridClass = Zapatec.Grid;
	oGridClass.mouseSelection = false;
	<span class="comment">// Get grid object</span>
	var iGrid = aM[1];
	var oGrid = Zapatec.Widget.getWidgetById(iGrid);
	<span class="reserved">if</span> (!oGrid) {
		<span class="reserved">return</span>;
	}
	var iOrigRow = aM[2];
	var iOrigCell = aM[3];
	<span class="comment">// Get target cell</span>
	aM = oGridClass.mouseOverCell.match(/^zpGrid(\d+)Row(\d+)Cell(\d+)/);
	<span class="reserved">if</span> (!(aM instanceof Array) || aM.length &lt; 4) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Check that this is the same grid</span>
	<span class="reserved">if</span> (aM[1] != iGrid) {
		<span class="reserved">return</span>;
	}
	var iTargRow = aM[2];
	var iTargCell = aM[3];
	<span class="comment">// Select all rows and cells between origin and target cells</span>
	var aRows = oGrid.applyPaging();
	var iRows = aRows.length;
	var aFields = oGrid.fields;
	var iFields = aFields.length;
	<span class="comment">// Find first row</span>
	var iR, oR, iRI;
	<span class="reserved">for</span> (iR = 0; iRows--; iR++) {
		oR = aRows[iR];
		<span class="reserved">if</span> (oR) {
			iRI = oR.i;
			<span class="comment">// First row can be iOrigRow or iTargRow. We don't know which of them and</span>
			<span class="comment">// need to remove one.</span>
			<span class="reserved">if</span> (iRI == iOrigRow) {
				iOrigRow = -1;
				break;
			}
			<span class="reserved">if</span> (iRI == iTargRow) {
				iTargRow = -1;
				break;
			}
		}
	}
	<span class="reserved">if</span> (!++iRows) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Find first cell</span>
	var aCells = oR.cells;
	var iC, oC, iCI;
	<span class="reserved">for</span> (iC = 0; iFields--; iC++) {
		oC = aCells[iC];
		<span class="reserved">if</span> (oC) {
			iCI = oC.i;
			<span class="comment">// First cell can be iOrigCell or iTargCell. We don't know which of them</span>
			<span class="comment">// and need to remove one.</span>
			<span class="reserved">if</span> (iCI == iOrigCell) {
				iOrigCell = -1;
				break;
			}
			<span class="reserved">if</span> (iCI == iTargCell) {
				iTargCell = -1;
				break;
			}
		}
	}
	<span class="reserved">if</span> (!++iFields) {
		<span class="reserved">return</span>;
	}
	var iFirstCell = iC;
	<span class="comment">// Select rows and cells</span>
	var iCells, oF;
	<span class="reserved">for</span> (; iRows--; iR++) {
		oR = aRows[iR];
		<span class="reserved">if</span> (oR) {
			oGrid.selectRow(oR);
			aCells = oR.cells;
			iCells = iFields;
			<span class="reserved">for</span> (iC = iFirstCell; iCells--; iC++) {
				oF = aFields[iC];
				<span class="reserved">if</span> (oF &amp;&amp; !oF.hidden) {
					oC = aCells[iC];
					<span class="reserved">if</span> (oC) {
						oGrid.selectCell(oC);
						iCI = oC.i;
						<span class="reserved">if</span> (iCI == iOrigCell || iCI == iTargCell) {
							break;
						}
					}
				}
			}
			iRI = oR.i;
			<span class="reserved">if</span> (iRI == iOrigRow || iRI == iTargRow) {
				<span class="comment">// Last row</span>
				break;
			}
		}
	}
};

<span class="comment">// Set event listeners responsible for mouse selection</span>
Zapatec.EventDriven.addEventListener(<span class="literal">'dragStart'</span>, Zapatec.Grid.onMouseSelStart);
Zapatec.EventDriven.addEventListener(<span class="literal">'dragMove'</span>, Zapatec.Grid.onMouseSelMove);
Zapatec.EventDriven.addEventListener(<span class="literal">'dragEnd'</span>, Zapatec.Grid.onMouseSelEnd);

<span class="comment">/**
 * Holds id of currently dragged cell's td element.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.draggingCell = <span class="literal">''</span>;

<span class="comment">/**
 * Prepares cell for dragging.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {number} iRow Row id
 * <span class="attrib">@param</span> {number} iCell Cell id
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.dragCell = <span class="reserved">function</span>(iRow, iCell) {
	var sTdId = [<span class="literal">'zpGrid'</span>, <span class="reserved">this</span>.id, <span class="literal">'Row'</span>, iRow, <span class="literal">'Cell'</span>, iCell].join(<span class="literal">''</span>);
	var oUtils = Zapatec.Utils;
	var oGridClass = Zapatec.Grid;
	oGridClass.draggingCell = sTdId;
	oUtils.addEvent(document, <span class="literal">'mousemove'</span>, oGridClass.dragCellStart);
	oUtils.addEvent(document, <span class="literal">'mouseup'</span>, oGridClass.dragCellFalse);
};

<span class="comment">/**
 * Starts dragging the cell after mousedown and mousemove event have occured
 * sequentially. Calls {<span class="attrib">@link</span> Zapatec.Drag#start}.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.dragCellStart = <span class="reserved">function</span>() {
	var oUtils = Zapatec.Utils;
	var oGridClass = Zapatec.Grid;
	oUtils.removeEvent(document, <span class="literal">'mousemove'</span>, oGridClass.dragCellStart);
	oUtils.removeEvent(document, <span class="literal">'mouseup'</span>, oGridClass.dragCellFalse);
	<span class="comment">// Create dragged clone of the cell</span>
	var sTdId = oGridClass.draggingCell;
	var oTd = document.getElementById(sTdId);
	<span class="reserved">if</span> (!oTd) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get cell content</span>
	var oDiv = document.getElementById([sTdId, <span class="literal">'Div'</span>].join(<span class="literal">''</span>));
	<span class="reserved">if</span> (!oDiv) {
		<span class="reserved">return</span>;
	}
	var sId = [sTdId, <span class="literal">'Drag'</span>].join(<span class="literal">''</span>);
	var oEl = document.createElement(<span class="literal">'div'</span>);
	var oSt = oEl.style;
	oTd.appendChild(oEl);
	oSt.position = <span class="literal">'absolute'</span>;
	oEl.className = oDiv.className;
	oEl.innerHTML = oDiv.innerHTML;
	oEl.id = sId;
	<span class="comment">// Check that mouse cursor isn't above the dragged clone. This is important</span>
	<span class="comment">// for IE because otherwise srcElement returns dragged element instead of the</span>
	<span class="comment">// target.</span>
	var oEv = window.event;
	var iElTop = oUtils.getElementOffset(oEl).top;
	var iEvTop = oUtils.getMousePos(oEv).pageY;
	<span class="reserved">if</span> (iElTop &lt; iEvTop) {
		oSt.top = oEl.offsetTop + iEvTop - iElTop + 1 + <span class="literal">'px'</span>;
	}
	<span class="comment">// Start dragging of the clone</span>
	Zapatec.Drag.start(oEv, sId);
};

<span class="comment">/**
 * Cancels dragging if this was just a click.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.dragCellFalse = <span class="reserved">function</span>() {
	var oUtils = Zapatec.Utils;
	var oGridClass = Zapatec.Grid;
	oUtils.removeEvent(document, <span class="literal">'mousemove'</span>, oGridClass.dragCellStart);
	oUtils.removeEvent(document, <span class="literal">'mouseup'</span>, oGridClass.dragCellFalse);
};

<span class="comment">/**
 * Can do something when cell is dragged. Attached to static dragStart event.
 * See {<span class="attrib">@link</span> Zapatec.Drag#start} for details.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Argument object received from the event.
 */</span>
Zapatec.Grid.onCellDragStart = <span class="reserved">function</span>(oArg) {
};

<span class="comment">/**
 * Can do something when cell is dragged. Attached to static dragMove event.
 * See {<span class="attrib">@link</span> Zapatec.Drag#move} for details.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Argument object received from the event.
 */</span>
Zapatec.Grid.onCellDragMove = <span class="reserved">function</span>(oArg) {
};

<span class="comment">/**
 * Removes dragging and copies content of dragged cell into target cell when
 * cell is dropped. Attached to static dragEnd event. See
 * {<span class="attrib">@link</span> Zapatec.Drag#end} for details.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Argument object received from the event.
 */</span>
Zapatec.Grid.onCellDragEnd = <span class="reserved">function</span>(oArg) {
	<span class="comment">// Check arguments</span>
	<span class="reserved">if</span> (!oArg) {
		<span class="reserved">return</span>;
	}
	var oEl = oArg.el;
	<span class="reserved">if</span> (!oEl || !oEl.id) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get grid, row and cell id</span>
	var aM = oEl.id.match(/^zpGrid(\d+)Row(\d+)Cell(\d+)Drag$/);
	<span class="reserved">if</span> (!(aM instanceof Array) || aM.length &lt; 4) {
		<span class="reserved">return</span>;
	}
	var iGrid = aM[1];
	var oGrid = Zapatec.Widget.getWidgetById(iGrid);
	<span class="reserved">if</span> (!oGrid) {
		<span class="reserved">return</span>;
	}
	var oCell = oGrid.getCellById(aM[2], aM[3]);
	<span class="reserved">if</span> (!oCell) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Remove dragged clone</span>
	oEl.style.display = <span class="literal">'none'</span>;
	<span class="comment">// Timeout is needed for Opera to remove element from the screen</span>
	setTimeout(<span class="reserved">function</span>() {
		oEl.parentNode.removeChild(oEl);
	}, 0);
	<span class="comment">// Get target element</span>
	var oEv = oArg.event;
	var oTarget = oEv.target || oEv.srcElement;
	<span class="reserved">if</span> (!oTarget || !oTarget.id) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Check that target element is a grid cell</span>
	aM = oTarget.id.match(/^zpGrid(\d+)Row(\d+)Cell(\d+)/);
	<span class="reserved">if</span> (!(aM instanceof Array) || aM.length &lt; 4) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Check that this is the same grid</span>
	<span class="reserved">if</span> (aM[1] != iGrid) {
		<span class="reserved">return</span>;
	}
	var iTargetCell = aM[3];
	var oTargetCell = oGrid.getCellById(aM[2], iTargetCell);
	<span class="reserved">if</span> (!oTargetCell) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Replace data in the target cell</span>
	oGrid.setCellValue(oTargetCell, oCell.v);
	<span class="comment">// Display updates</span>
	oGrid.visualizeCellReadOnly(oTargetCell);
	<span class="comment">// Redraw totals</span>
	oGrid.redrawTotals({
		column: iTargetCell
	});
	<span class="comment">// Redraw filter out forms</span>
	oGrid.displayFilterOut();
};

<span class="comment">// Set event listeners responsible for cell dragging</span>
Zapatec.EventDriven.addEventListener(<span class="literal">'dragStart'</span>, Zapatec.Grid.onCellDragStart);
Zapatec.EventDriven.addEventListener(<span class="literal">'dragMove'</span>, Zapatec.Grid.onCellDragMove);
Zapatec.EventDriven.addEventListener(<span class="literal">'dragEnd'</span>, Zapatec.Grid.onCellDragEnd);

<span class="comment">/**
 * Holds id of currently dragged field's td element.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.draggingColumn = <span class="literal">''</span>;

<span class="comment">/**
 * Prepares field for dragging.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {number} iField Field id
 */</span>
Zapatec.Grid.<span class="reserved">prototype</span>.dragColumn = <span class="reserved">function</span>(iField) {
	<span class="comment">// Field can't be dragged while resizing column</span>
	<span class="reserved">if</span> (Zapatec.Grid.columnResizing) {
		<span class="reserved">return</span>;
	}
	var sTdId = [<span class="literal">'zpGrid'</span>, <span class="reserved">this</span>.id, <span class="literal">'Field'</span>, iField].join(<span class="literal">''</span>);
	var oUtils = Zapatec.Utils;
	var oGridClass = Zapatec.Grid;
	oGridClass.draggingColumn = sTdId;
	oUtils.addEvent(document, <span class="literal">'mousemove'</span>, oGridClass.dragColumnStart);
	oUtils.addEvent(document, <span class="literal">'mouseup'</span>, oGridClass.dragColumnFalse);
};

<span class="comment">/**
 * Starts dragging the column after mousedown and mousemove event have occured
 * sequentially. Calls {<span class="attrib">@link</span> Zapatec.Drag#start}.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.dragColumnStart = <span class="reserved">function</span>() {
	var oUtils = Zapatec.Utils;
	var oGridClass = Zapatec.Grid;
	oUtils.removeEvent(document, <span class="literal">'mousemove'</span>, oGridClass.dragColumnStart);
	oUtils.removeEvent(document, <span class="literal">'mouseup'</span>, oGridClass.dragColumnFalse);
	<span class="comment">// Create dragged clone of the field</span>
	var sTdId = oGridClass.draggingColumn;
	var oTd = document.getElementById(sTdId);
	<span class="reserved">if</span> (!oTd) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get field content</span>
	var oDiv =
	 document.getElementById([sTdId.replace(/Field/, <span class="literal">'Col'</span>), <span class="literal">'Title'</span>].join(<span class="literal">''</span>));
	<span class="reserved">if</span> (!oDiv) {
		<span class="reserved">return</span>;
	}
	var sId = [sTdId, <span class="literal">'Drag'</span>].join(<span class="literal">''</span>);
	var oEl = document.createElement(<span class="literal">'div'</span>);
	var oSt = oEl.style;
	oTd.appendChild(oEl);
	oSt.position = <span class="literal">'absolute'</span>;
	oEl.className = oDiv.className;
	oEl.innerHTML = oDiv.innerHTML;
	oEl.id = sId;
	<span class="comment">// Check that mouse cursor isn't above the dragged clone. This is important</span>
	<span class="comment">// for IE because otherwise srcElement returns dragged element instead of the</span>
	<span class="comment">// target.</span>
	var oEv = window.event;
	var iElTop = oUtils.getElementOffset(oEl).top;
	var iEvTop = oUtils.getMousePos(oEv).pageY;
	<span class="reserved">if</span> (iElTop &lt; iEvTop) {
		oSt.top = oEl.offsetTop + iEvTop - iElTop + 1 + <span class="literal">'px'</span>;
	}
	<span class="comment">// Start dragging of the clone</span>
	Zapatec.Drag.start(oEv, sId);
};

<span class="comment">/**
 * Cancels dragging if this was just a click.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Grid.dragColumnFalse = <span class="reserved">function</span>() {
	var oUtils = Zapatec.Utils;
	var oGridClass = Zapatec.Grid;
	oUtils.removeEvent(document, <span class="literal">'mousemove'</span>, oGridClass.dragColumnStart);
	oUtils.removeEvent(document, <span class="literal">'mouseup'</span>, oGridClass.dragColumnFalse);
};

<span class="comment">/**
 * Can do something when field is dragged. Attached to static dragStart event.
 * See {<span class="attrib">@link</span> Zapatec.Drag#start} for details.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Argument object received from the event.
 */</span>
Zapatec.Grid.onColumnDragStart = <span class="reserved">function</span>(oArg) {
};

<span class="comment">/**
 * Can do something when field is dragged. Attached to static dragMove event.
 * See {<span class="attrib">@link</span> Zapatec.Drag#move} for details.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Argument object received from the event.
 */</span>
Zapatec.Grid.onColumnDragMove = <span class="reserved">function</span>(oArg) {
};

<span class="comment">/**
 * Removes dragging and moves column when field is dropped. Attached to static
 * dragEnd event. See {<span class="attrib">@link</span> Zapatec.Drag#end} for details.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oArg Argument object received from the event.
 */</span>
Zapatec.Grid.onColumnDragEnd = <span class="reserved">function</span>(oArg) {
	<span class="comment">// Check arguments</span>
	<span class="reserved">if</span> (!oArg) {
		<span class="reserved">return</span>;
	}
	var oEl = oArg.el;
	<span class="reserved">if</span> (!oEl || !oEl.id) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Get grid and field id</span>
	var aM = oEl.id.match(/^zpGrid(\d+)Field(\d+)Drag$/);
	<span class="reserved">if</span> (!(aM instanceof Array) || aM.length &lt; 3) {
		<span class="reserved">return</span>;
	}
	var iGrid = aM[1];
	var oGrid = Zapatec.Widget.getWidgetById(iGrid);
	<span class="reserved">if</span> (!oGrid) {
		<span class="reserved">return</span>;
	}
	var iField = aM[2];
	<span class="comment">// Remove dragged clone</span>
	oEl.style.display = <span class="literal">'none'</span>;
	<span class="comment">// Timeout is needed for Opera to remove element from the screen</span>
	setTimeout(<span class="reserved">function</span>() {
		oEl.parentNode.removeChild(oEl);
	}, 0);
	<span class="comment">// Get target element</span>
	var oEv = oArg.event;
	var oTarget = oEv.target || oEv.srcElement;
	<span class="reserved">if</span> (!oTarget || !oTarget.id) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Check that target element is a grid field</span>
	aM = oTarget.id.match(/^zpGrid(\d+)Field(\d+)/);
	<span class="reserved">if</span> (!(aM instanceof Array) || aM.length &lt; 3) {
		aM = oTarget.id.match(/^zpGrid(\d+)Col(\d+)/);
		<span class="reserved">if</span> (!(aM instanceof Array) || aM.length &lt; 3) {
			<span class="reserved">return</span>;
		}
	}
	<span class="comment">// Check that this is the same grid</span>
	<span class="reserved">if</span> (aM[1] != iGrid) {
		<span class="reserved">return</span>;
	}
	<span class="comment">// Move column</span>
	var bSuccess = oGrid.moveColumn({
		fieldId: iField,
		position: aM[2]
	});
	<span class="reserved">if</span> (bSuccess) {
		<span class="comment">// Redraw filter out forms</span>
		oGrid.displayFilterOut();
	}
};

<span class="comment">// Set event listeners responsible for field dragging</span>
Zapatec.EventDriven.addEventListener(<span class="literal">'dragStart'</span>, Zapatec.Grid.onColumnDragStart);
Zapatec.EventDriven.addEventListener(<span class="literal">'dragMove'</span>, Zapatec.Grid.onColumnDragMove);
Zapatec.EventDriven.addEventListener(<span class="literal">'dragEnd'</span>, Zapatec.Grid.onColumnDragEnd);
</pre>
	<hr>



<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top"><em>
<b>Zapatec Grid</b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<font size="-1">

</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Thu Aug 16 12:18:56 2007</div>
</body>
</html>