<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">
	<rich:modalPanel id="imageModalPanel">
		<f:facet name="header">Image Properties:</f:facet>
		<f:facet name="controls">
			<h:panelGroup>
				<h:graphicImage value="/img/modal/close.png" style="cursor:pointer"
					id="hidelink2" />
				<rich:componentControl for="imageModalPanel" attachTo="hidelink2"
					operation="hide" event="onclick" />
			</h:panelGroup>
		</f:facet>
		<a4j:form id="imageForm">
		<a4j:region renderRegionOnly="true">
			<h:panelGrid columns="3" id="editContent" rowClasses="prop"
				columnClasses="name,value, error">
				<h:outputText value="Name:" />
				<rich:inplaceInput id="name" layout="block" value="#{image.name}"
					 changedHoverClass="hover" viewHoverClass="hover"
					viewClass="inplace" changedClass="inplace" selectOnEdit="true"
					editEvent="onclick">
					<rich:ajaxValidator event="onchange"/>
					</rich:inplaceInput>
				<rich:message for="name" />
				<h:outputText value="Short Description:" />
				<h:inputTextarea id="description" value="#{image.description}" >
				<rich:ajaxValidator event="onchange"/>
				</h:inputTextarea>
				<rich:message for="description" />
				<h:outputLabel for="calendar">Created Date:</h:outputLabel>
				<a4j:outputPanel id="calendar" layout="block">
					<rich:calendar value="#{image.created}" cellWidth="24px"
						cellHeight="22px" style="width:200px" />
				</a4j:outputPanel>
				<rich:message for="calendar" />
				<h:outputText value="Shared" />
				<h:selectBooleanCheckbox styleClass="selectBooleanCheckbox"
					id="shared" value="#{image.shared}">
				</h:selectBooleanCheckbox>
				<rich:message for="shared" />
				<h:outputText value="Album" />
				<rich:inplaceSelect id="album" value="#{image.albumName}"
					defaultLabel="Double Click to edit" openOnEdit="true"
					showControls="true" editEvent="onclick" layout="block"
					viewClass="inplace" changedClass="inplace" onchange=""
					changedHoverClass="hover" viewHoverClass="hover">
					<f:selectItems value="#{treeRoot.availableAlbums}" />
				</rich:inplaceSelect>
				<rich:message for="album" />
				<h:outputText value="Image Meta-information" />
				<h:panelGroup id="metainf">
					<a4j:repeat value="#{image.tags}" var="tag"
						binding="#{imageHelper.repeater}">
						<h:inputText value="#{tag.tag}" binding="#{imageHelper.metaRef}">
							<a4j:support immediate="true"
								action="#{imageHelper.change(image)}" event="onchange" />
						</h:inputText>

						<a4j:commandButton reRender="metainf" value="-"
							actionListener="#{imageHelper.removeTag(tag, image)}"></a4j:commandButton>
					</a4j:repeat>
					<a4j:commandButton reRender="metainf" value="+"
						actionListener="#{imageHelper.addTag(image)}"></a4j:commandButton>

				</h:panelGroup>
				<rich:message for="metainf" />
				<a4j:commandButton value="Store"
					actionListener="#{treeActionManager.editImage(image)}"
					id="storebutton"
					onclick="if(storeButtonDisabled()){return false;}"
					oncomplete="#{rich:component('imageModalPanel')}.hide()"
					reRender="tree, selectedNode" />
				<button type="button" id="cancelbutton"
					onclick="#{rich:component('imageModalPanel')}.hide()">Cancel</button>
			</h:panelGrid>
			</a4j:region>
		</a4j:form>
	</rich:modalPanel>
</ui:composition>