<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<style type="text/css">
			.dropzoneDecoration {
				width: 70px; height: 70px; border: 2px dotted navy;
			}
			
			.accept {
				border: 3px dotted green;
				padding: 10px;
			}

			.reject {
				border: 3px dashed red;
				padding: 10px;
			}
		</style>

<f:subview id="dndID">
	<h:form id="form">
		<h:panelGroup id="dragValueText">
			<h:outputText value="#{dndBean.dragValue}" />
		</h:panelGroup>

		<h:panelGrid columns="2">
			<h:dataTable var="type" value="#{dndBean.types}">
				<h:column>
					<h:panelGrid styleClass="dropzoneDecoration" id="drag1">
						<h:outputText value="#{type} - drag" />
						<rich:dragSupport dragType="#{type}" dragValue="#{type} - value" action="#{dndBean.dragAction}" dragListener="#{dndBean.processDrag}">
						</rich:dragSupport>
					</h:panelGrid>
				</h:column>
			</h:dataTable>

			<h:dataTable var="type" value="#{dndBean.types}">
				<h:column>
					<h:panelGrid styleClass="dropzoneDecoration" id="drop2">
						<h:outputText value="#{type} - drop" />
						<rich:dropSupport reRender="dragValueText" action="#{dndBean.dropAction}" acceptedTypes="#{type}" dropListener="#{dndBean.processDrop}"
							dropValue="#{type} - value">
						</rich:dropSupport>
					</h:panelGrid>
				</h:column>
			</h:dataTable>
		</h:panelGrid>

		<rich:dragIndicator id="indicator" acceptClass="accept" rejectClass="reject">
			<f:facet name="single">
				<f:verbatim>{marker} <b>{testDrag}</b> {label}</f:verbatim>
			</f:facet>
			<rich:dndParam name="accept" value="ACCEPT:" />
			<rich:dndParam name="reject">
				<f:verbatim>
					<i style="text-decoration: line-through;">REJECT:</i>
				</f:verbatim>
			</rich:dndParam>
		</rich:dragIndicator>

		<rich:dragIndicator id="dIndicator" acceptClass="defaultIndicator" rejectClass="reject">
			<f:facet name="single">
				<f:verbatim>{marker} <b>{testDrag}</b> {label}</f:verbatim>
			</f:facet>
			<rich:dndParam name="accept" value="ACCEPT:" />
			<rich:dndParam name="reject">
				<f:verbatim>
					<i style="text-decoration: line-through;">REJECT:</i>
				</f:verbatim>
			</rich:dndParam>
		</rich:dragIndicator>

		<h:panelGrid columns="1" style="position: relative; left: 140px;">
			<h:panelGrid columns="1" style="position: absolute; top: 30px; left: 300px;">
				<rich:dragIndicator id="defaultIndicator">
				</rich:dragIndicator>
			</h:panelGrid>
		</h:panelGrid>

		<h:panelGrid columns="4" cellspacing="20">
			<h:panelGrid styleClass="dropzoneDecoration" id="grid1">
				<f:verbatim>Accepts file and folder... Customizes</f:verbatim>
				<rich:dropSupport id="zone1"
					ondrop="var zone = $('form:grid1'); zone.style.borderColor= 'red'; setTimeout( function() { this.style.borderColor= 'navy'; }.bind(zone), 300);"
					acceptedTypes="file, folder" typeMapping="{file: testDrop}">
					<rich:dndParam name="testDrop">
						<h:graphicImage height="16" width="16" value="#{icon.iconFileManager}" />
					</rich:dndParam>
				</rich:dropSupport>
			</h:panelGrid>

			<h:panelGrid styleClass="dropzoneDecoration" id="grid2">
				<f:verbatim>Accepts none</f:verbatim>
				<rich:dropSupport>
				</rich:dropSupport>
			</h:panelGrid>

			<h:panelGrid styleClass="dropzoneDecoration" id="grid3">
				<f:verbatim>Accepts none... Customizes</f:verbatim>
				<rich:dropSupport typeMapping="{file: testDrop}">
					<rich:dndParam name="testDrop">
						<h:graphicImage height="16" width="16" value="#{icon.iconFileManagerReject}" />
					</rich:dndParam>
				</rich:dropSupport>
			</h:panelGrid>

			<h:panelGrid styleClass="dropzoneDecoration" id="grid4">
				<f:verbatim>Accepts file and folder</f:verbatim>
				<rich:dropSupport acceptedTypes="file, folder">
					<rich:dndParam name="testDrop" value="testDropValue" />
				</rich:dropSupport>
			</h:panelGrid>

			<h:panelGrid id="grid5">
				<rich:dragSupport dragType="file">
					<rich:dndParam name="label" value="Label" />
					<rich:dndParam name="testDrag" value="testDragValue" />
				</rich:dragSupport>
				<f:verbatim>File Draggable - no indicator</f:verbatim>
			</h:panelGrid>

			<h:panelGrid id="grid6">
				<rich:dragSupport dragType="file" dragIndicator="indicator">
					<rich:dndParam name="label" value="Label" />
					<rich:dndParam name="testDrag" value="testDragValue" />
				</rich:dragSupport>
				<f:verbatim>File Draggable with indicator</f:verbatim>
			</h:panelGrid>

			<h:panelGrid id="grid7">
				<rich:dragSupport dragType="folder" dragIndicator="indicator">
					<rich:dndParam name="label" value="Label" />
					<rich:dndParam name="testDrag" value="testDragValue for Folder" />
				</rich:dragSupport>
				<f:verbatim>Folder Draggable with indicator</f:verbatim>
			</h:panelGrid>

			<h:outputText />

			<h:panelGrid id="grid8">
				<rich:dragSupport dragType="folder">
					<rich:dndParam name="label" value="Label" />
					<rich:dndParam name="testDrag" value="testDragValue for Folder" />
				</rich:dragSupport>
				<f:verbatim>Folder Draggable - no indicator</f:verbatim>
			</h:panelGrid>

			<h:panelGrid id="grid9">
				<rich:dragSupport dragType="file" dragIndicator="defaultIndicator">
					<rich:dndParam name="testDrag" value="testDragValue" />
					<rich:dndParam name="marker" value="testMarkerValue" />
					<rich:dndParam name="label" value="testDragValue" />
				</rich:dragSupport>
				<f:verbatim>File Draggable with defaultIndicator</f:verbatim>
			</h:panelGrid>

			<h:panelGrid id="grid10">
				<rich:dragSupport dragType="folder" dragIndicator="defaultIndicator">
					<rich:dndParam name="label" value="testDragValue for Folder" />
				</rich:dragSupport>
				<f:verbatim>Folder Draggable with defaultIndicator</f:verbatim>
			</h:panelGrid>
			<h:outputText />
		</h:panelGrid>

		<h:panelGrid id="renderedId">
			<rich:dragSupport dragType="file" dragIndicator="defaultIndicator">
				<rich:dndParam name="marker" value="testMarkerValue" />
				<rich:dndParam name="label" value="testDragValue" />
			</rich:dragSupport>

			<h:graphicImage id="dragImage" value="/pics/masshtaby_01.jpg" width="200px" height="200px" />
			<f:verbatim>dragSupport</f:verbatim>
		</h:panelGrid>

		<a4j:status startText="...request..." stopText="stop" />

		<a4j:outputPanel ajaxRendered="true">
			<h:messages />
		</a4j:outputPanel>
	<h:commandLink value="Back" action="main"></h:commandLink>
	</h:form>
</f:subview>

