<%@ 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"%>
	<f:subview id="tooltipID">
	<h:form>
	<h:messages />
	
		<h:outputText value="DEFAULT VALUE:"></h:outputText>
		
		<f:verbatim>
			<br />
		</f:verbatim>
		
		<h:graphicImage value="/pics/ajax_process.gif" width="15px"
			height="15px">
			<rich:toolTip value="ajax progress">
			</rich:toolTip>
		</h:graphicImage>
	
		<h:inputText value="Text" id="inp1" size="50">
			<rich:toolTip value="toolTip for input text">
				<f:facet name="defaultContent">
					<f:verbatim>DEFAULT VALUE</f:verbatim>
				</f:facet>
			</rich:toolTip>
		</h:inputText>

		<h:selectOneListbox value="1" id="ddl">
			<rich:toolTip value="1231231">
				<f:facet name="defaultContent">
					<f:verbatim>DEFAULT VALUE DropDown</f:verbatim>
				</f:facet>
			</rich:toolTip>
		</h:selectOneListbox>

		<f:verbatim>
			<br />
			<br />
		</f:verbatim>

		<h:outputText value=" Test tooltip:"></h:outputText>
		<f:verbatim>
			<br />
		</f:verbatim>
	
		<rich:panel style="width:50px; height:50px; background-color: gray">
			<rich:toolTip id="tooltipID"  value="#{tooltip.value}"
				mode="#{tooltip.mode}" delay="#{tooltip.delay}" layout="#{tooltip.layout}" 
				horizontalOffset="#{tooltip.horizontalOffset}"
				verticalOffset="#{tooltip.verticalOffset}"
				followMouse="#{tooltip.followMouse}"
				direction="#{tooltip.direction}" style="#{tooltip.style}"
				disabled="#{tooltip.disabled}" rendered="#{tooltip.rendered}">
				<h:graphicImage id="pricsID" value="/pics/ajax_process.gif"></h:graphicImage>
			</rich:toolTip>
		</rich:panel>

		<f:verbatim>
			<br />
		</f:verbatim>
		<h:panelGrid columns="2">
			<h:outputText value="Text:"></h:outputText>
			<h:inputText value="#{tooltip.value}">
				<a4j:support event="onchange" reRender="tooltipID" />
			</h:inputText>
			
			<h:outputText value="Delay"></h:outputText>
			<h:inputText value="#{tooltip.delay}">
				<a4j:support event="onchange" reRender="tooltipID" />
			</h:inputText>
			
			<h:outputText value="Layout:"></h:outputText>
			<h:selectOneRadio value="#{tooltip.layout}">
				<f:selectItem itemLabel="inline" itemValue="inline" />
				<f:selectItem itemLabel="block" itemValue="block" />
				<a4j:support event="onclick" reRender="tooltipID" />
			</h:selectOneRadio>
			
			<h:outputText value="Mode:"></h:outputText>
			<h:selectOneRadio value="#{tooltip.mode}">
				<f:selectItem itemLabel="client" itemValue="client" />
				<f:selectItem itemLabel="ajax" itemValue="ajax" />
				<a4j:support event="onclick" reRender="tooltipID" />
			</h:selectOneRadio>

			<h:outputText value="Horizontal offset:"></h:outputText>
			<h:inputText value="#{tooltip.horizontalOffset}">
				<a4j:support event="onchange" reRender="tooltipID" />
			</h:inputText>

			<h:outputText value="Vertical offset:"></h:outputText>
			<h:inputText value="#{tooltip.verticalOffset}">
				<a4j:support event="onchange" reRender="tooltipID" />
			</h:inputText>

			<h:outputText value="Follow mouse:"></h:outputText>
			<h:selectBooleanCheckbox value="#{tooltip.followMouse}">
				<a4j:support event="onclick" reRender="tooltipID" />
			</h:selectBooleanCheckbox>

			<h:outputText value="Direction:" />
			<h:selectOneRadio value="#{tooltip.direction}">
				<f:selectItem itemLabel="top-right" itemValue="top-right" />
				<f:selectItem itemLabel="top-left" itemValue="top-left" />
				<f:selectItem itemLabel="bottom-right" itemValue="bottom-right" />
				<f:selectItem itemLabel="bottom-left" itemValue="bottom-left" />
				<a4j:support event="onclick" reRender="tooltipID" />
			</h:selectOneRadio>

			<h:outputText value="Style:"></h:outputText>
			<h:selectOneRadio value="#{tooltip.style}">
				<f:selectItem itemLabel="none" itemValue="none" />
				<f:selectItem itemLabel="border:3px; font:bold 14px;"
					itemValue="border:3px; font:bold 14px;" />
				<f:selectItem
					itemLabel="border:green 3px solid; background-color:yellow;"
					itemValue="border:green 3px solid; background-color:yellow;" />
				<f:selectItem
					itemLabel="border:green 2px solid; font-family:monospace;"
					itemValue="border:green 2px solid; font-family:monospace;" />
				<a4j:support event="onclick" reRender="tooltipID" />
			</h:selectOneRadio>

			<h:outputText value="Disambled:"></h:outputText>
			<h:selectBooleanCheckbox value="#{tooltip.disabled}">
				<a4j:support event="onclick" reRender="tooltipID" />
			</h:selectBooleanCheckbox>

			<h:outputText value="Rendered:"></h:outputText>
			<h:selectBooleanCheckbox value="#{tooltip.rendered}">
				<a4j:support event="onclick" reRender="tooltipID" />
			</h:selectBooleanCheckbox>
		</h:panelGrid>
		<!-- h:inputText value="ddd"
			onclick="toolTipAttach();alert(document.getElementById('lkjl'))" /-->

	</h:form>
	<h:form>
		<h:commandLink value="Back" action="main"></h:commandLink>
	</h:form>
	</f:subview>

