<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xbl="http://www.mozilla.org/xbl" 
		  xmlns:html="http://www.w3.org/1999/xhtml">
		  	
	<binding id="datatable">
		<content>
			<html:div style="border:1px dotted red; display:table">
				<html:img style="padding-left:2px; padding-right:1px" src="${dataTable.getReadOnlyImage()}" /> 
				<html:br/>
			<html:table 
				anonid="anontable">



				<html:tbody>
					<html:tr>
						<html:td valign="top" style="margin: 0px; padding: 0px">
							<children includes="hcolumn20"/>
						</html:td>
						<html:td valign="top" style="margin: 0px; padding: 0px">
							<children includes="hcolumn21"/>
						</html:td>
						<html:td valign="top" style="margin: 0px; padding: 0px">
							<children includes="hcolumn22"/>
						</html:td>
						<html:td valign="top" style="margin: 0px; padding: 0px">
							<children includes="hcolumn23"/>
						</html:td>
					</html:tr>
				</html:tbody>
			</html:table>
			</html:div>
			<html:span style="display:none"><children/></html:span>
		</content>
	    
	    <!-- 
	    	TODO provide impl that manages style and styleClass attrs for panelgrid element
	    -->
		<implementation>
			<constructor>
				var eventHandler = function(event) {
					if (this.eventPropagationEnabled) {
						this.safeUpdate();
					} else {
						event.preventDefault();
						event.stopPropagation();
					}
				};
				this.addEventListener('DOMAttrModified', eventHandler, true);
				//this.addEventListener('DOMCharacterDataModified', eventHandler, true);
				//this.addEventListener('DOMNodeInserted', eventHandler, true);
				//this.addEventListener('DOMNodeRemoved', eventHandler, true);
				
				this.safeUpdate();
				
				var dragHandler = function (event) {
					event.preventDefault();
					event.stopPropagation();
				}
				//this.addEventListener('draggesture', dragHandler, true);
				this.addEventListener('dragover', dragHandler, true);
				this.addEventListener('dragenter', dragHandler, true);
				this.addEventListener('dragexit', dragHandler, true);
				this.addEventListener('dragdrop', dragHandler, true);
				this.addEventListener('drop', dragHandler, true);
			</constructor>
			
			<field name="eventPropagationEnabled">true</field>
			
			<method name="safeUpdate">
				<body><![CDATA[
					this.eventPropagationEnabled = false;
					this.update();
					this.eventPropagationEnabled = true;
				]]></body>
			</method>
			
			<method name="cloneAttributes">
				<parameter name="src"/>
				<parameter name="dest"/>
				<parameter name="attrlist"/>
				<body><![CDATA[
					if (attrlist != null) {
						for (i in attrlist) {
							var attr = src.getAttribute(attrlist[i]);
							if (attr != null) {
								dest.setAttribute(attrlist[i], src.getAttribute(attrlist[i]));
							}
						}
					}
				]]></body>
			</method>
	    	
			<method name="update">
	    		<body><![CDATA[
	    			var anontable = document.getAnonymousElementByAttribute(this, "anonid", "anontable");
	    			this.cloneAttributes(this, anontable, new Array("border","bgcolor","cellpadding","cellspacing","width","rules","frame","title"));
					this.setAttribute("title", "DataTable is read only in design view.");
	    		]]></body>
	    	</method>
		</implementation>
	    
	</binding>
</bindings>