<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://sakaiproject.org/jsf/sakai" prefix="sakai" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>

<style>
  	.rich-noBorder
  	{
    	border: none;
  	} 
	.act input.active {
	}
	.act .active {
		color:#2277DD;
	}
	.tipsBorder {
		border: 1;
	}	
	.nameColumn {
	    width: 60%;
	    text-align: left;
	    font-size: small;
	}
	.quantityColumn {
	    width: 10%;
	    text-align: left;
	    font-size: small;
	}
	
	.materialColumn {
	    width: 90%;
	    text-align: left;
	    font-size: small;
	}
	
	
	.concentrationColumn {
	    width: 10%;
	   	text-align: left;
		font-size: small;	
	}
	
	.physicalStateColumn {
	    width: 30%;
	   	text-align: left;
		font-size: small;	
	}	
	
	.editColumn {
	    width: 30px;
		text-align: center;
		font-size: small;
	}
	.removeColumn {
	    width: 30px;
		text-align: center;
		font-size: small;
	}
	.row {
		height: 30px;
		vertical-align: middle;
	}
	
	.messageColumn {
		vertical-align: baseline;
	
	}
	
	.title {
		vertical-align: text-bottom;
	}
	.pagerColumn {
		width: 400px;
	}
	
	
	hr.hr2 {
	height:1px;
	}
	
	
	tr.dataTableHighlight 
	{
	
		background-color: #ECF3FE;
	}
	
	.short2 {
		clear:both;
		border:1px solid #FFFFFF;
		margin:0.8em 1em;
	}
	
	.toolBarLink
	{
		font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
		font-size:0.9em;
		margin-right:2px;
	}

</style>


<script type="text/javascript">
<!--
function highlight() 
{
    var previousClass = null;
    // simple script for highlighting rows
    var table = document.getElementById("dataTable");
    var tbody = table.getElementsByTagName("tbody")[0];
    var rows = tbody.getElementsByTagName("tr");
    for (i=0; i < rows.length; i++) 
    {
        rows[i].onmouseover = function() { previousClass=this.className;this.className='dataTableHighlight' };
        rows[i].onmouseout = function() { this.className=previousClass };
	}

}


//-->
</script>


<%-- This file generated by Sakai App Builder --%>
<f:loadBundle basename="messages" var="msgs"/>

<f:view>
	<sakai:view title="Material Tool">
	<div style="height: 100%;"> 
	
		<style>			
			.navIntraTool a, .navIntraTool a:link
			{
				margin-right:0px;
			}	
		</style>
		
		
		<h:form id="createMaterial" >
			<sakai:tool_bar>
				<sakai:tool_bar_item action="#{StepBean.processActionReturnToExperimentDetail}" value="#{msgs.new_weblab_list_link}" />
			</sakai:tool_bar>
		</h:form>
		
		<sakai:view_content>

			<h:form>
			<h:commandLink  styleClass="toolBarLink" action="#{ExperimentBean.processActionList}" value="#{msgs.breadcrumbs_start_text}" />
			<h:graphicImage value="/images/arrow.gif" styleClass="toolBarLink" />
			<h:commandLink styleClass="toolBarLink" action="#{StepBean.processActionReturnToExperimentDetail}">
				<h:outputFormat value="{0}" styleClass="toolBarLink" >
					<f:param value="#{ExperimentBean.experimentName}"/>
				</h:outputFormat>	
			</h:commandLink>
			<h:graphicImage value="/images/arrow.gif" styleClass="toolBarLink" />
			<h:outputLabel value="Adicionar passos" styleClass="toolBarLink"></h:outputLabel>
			</h:form>
		
			<h:form id="stp_formDescription">
				<h:panelGroup>
					<sakai:messages />
	  				<sakai:view_title value="Criando passo #{StepBean.stepNumber}"/>
	  				<h:commandButton value="Finalizar experimento" action="#{StepBean.processActionFinishExperimentCreation}" rendered="#{StepBean.stepNumber > 2}"/>
	  				<f:verbatim><hr class="hr2"></f:verbatim>  			
	  			</h:panelGroup>
		  			
		  			
		  			
		  		<h:panelGrid columns="2" columnClasses="col, nocol">
		  				
						
					<h:panelGrid columns="2" columnClasses="col, nocol">
						<h:selectOneRadio id="stp_radios" value="#{StepBean.selectedResourceKindRadio}">
							<f:selectItem itemValue="0" itemLabel="Equipamento"/>
   							<f:selectItem itemValue="1" itemLabel="Material"/>   
   							<f:selectItem itemValue="2" itemLabel="Solucao"/>
   							<a4j:support event="onclick" reRender="stp_som_equipamento, stp_som_material, stp_som_solucao, stp_similarMaterials, stp_materialPropertyDataTable" action="#{StepBean.cleanSelectOneMenu}"/>   
						</h:selectOneRadio>
						<f:verbatim> <br> </f:verbatim>
						
						<h:panelGroup id="stp_som_equipamento">
							<h:selectOneMenu  value="#{StepBean.selectedEquipment}" style=" width : 202px;" rendered="#{StepBean.selectedResourceKindRadio eq '0'}">
								<f:selectItems value="#{StepBean.somEquipmentList}"/>
								<a4j:support event="onchange" reRender="stp_similarMaterials, stp_materialPropertyDataTable, stp_insertItemButton"/>
							</h:selectOneMenu>
						</h:panelGroup>
						<h:outputText />
						
						<h:panelGroup id="stp_som_material">
							<h:selectOneMenu value="#{StepBean.selectedDrug}" style=" width : 202px;" rendered="#{StepBean.selectedResourceKindRadio eq '1'}">
								<f:selectItems value="#{StepBean.somDrugList}"/>
								<a4j:support event="onchange" reRender="stp_similarMaterials, stp_materialPropertyDataTable, stp_insertItemButton"/>
							</h:selectOneMenu>
						</h:panelGroup>
						<h:outputText />

						<h:panelGroup id="stp_som_solucao">
							<h:selectOneMenu value="#{StepBean.selectedSolution}" style=" width : 202px;" rendered="#{StepBean.selectedResourceKindRadio eq '2'}">
								<f:selectItems value="#{StepBean.somSolutionList}"/>
								<a4j:support event="onchange" reRender="stp_similarMaterials, stp_materialPropertyDataTable, stp_insertItemButton"/>							
							</h:selectOneMenu>	
						</h:panelGroup>
						<h:outputText />
						
					
		  			</h:panelGrid>
		  			
		  			<h:panelGrid  id="stp_similarMaterials" columns="1" styleClass="tipsBorder"  >
						<h:panelGrid rendered="#{StepBean.similarMaterials ne null}">
						
							<h:dataTable var="similarMaterial" value="#{StepBean.similarMaterials}"> 
								<h:column>
									<f:facet name="header">
										<h:outputText value="Algum desses aparatos é mais apropriado?" />
									</f:facet>
									<h:outputText value="#{similarMaterial.name}" />
								</h:column>
							</h:dataTable>	

						</h:panelGrid>
					</h:panelGrid>
					
		  		</h:panelGrid>
		  		
			</h:form>
					 
			<h:form>					  		
		  		<h:panelGroup id="stp_materialPropertyDataTable">
		  			<h:panelGroup rendered="#{StepBean.selectedMaterialProperties ne null}">
						<h:form >
							<f:verbatim><hr class="hr2"></f:verbatim>				
							<sakai:view_title value="Este aparato possui propriedades que necessitam ser configuradas"/>
						</h:form>
						
						<h:dataTable  binding="#{StepBean.currentMaterialPropertiesDataTableBind}" 
									 var="property" value="#{StepBean.selectedMaterialProperties}"  
									 styleClass="listHier" style="margin-top: 0px;" columnClasses="nameColumn, editColumn, removeColumn" rowClasses="row"> 
							<h:column>
								<f:facet name="header">
									<h:outputText value="Propriedade" />
								</f:facet>
								<h:outputText value="#{property.name}" />
							</h:column>
							
							<h:column>
								<f:facet name="header">
									<h:outputText value="Valor" />
								</f:facet>
								<h:inputText id="stp_property" value="#{property.value}" required="true"/>
								<rich:message for="stp_property">
									<f:facet name="errorMarker">
										<h:graphicImage value="/images/error.gif" />
									</f:facet>
								</rich:message>
							</h:column>						
						</h:dataTable>	
					</h:panelGroup>	  		

		  		</h:panelGroup>

		  		
		  		

	  			<h:panelGrid id="stp_insertItemButton" >
	  				<h:panelGroup rendered="#{StepBean.currentSelectedMaterial ne null}">
		  				<f:verbatim> <p> </f:verbatim>
		  				<h:commandButton action="#{StepBean.processActionInsertItem}" value="Adicionar este aparato ao passo"/>
		  			</h:panelGroup>
	  			</h:panelGrid>
	  		</h:form>


			

			
			

			
			
			
			
			<f:verbatim><hr class="hr2"></f:verbatim>	
			<h:form>			
				<h:panelGroup id="stp_added_items_form">
					<h:panelGroup rendered="#{StepBean.stepMaterialList ne null}">
					
						<sakai:view_title value="Materiais pertencentes ao passo corrente"/>
			
						<h:dataTable id="dataTable" binding="#{StepBean.dataTableInsert}" var="material" value="#{StepBean.stepMaterialList}" 
									 styleClass="listHier" style="margin-top: 0px;" columnClasses="materialColumn, removeColumn" rowClasses="row"
									 onmouseover="highlight()"
						             onmouseout="highlight()" rendered="#{StepBean.stepMaterialList ne null}">
						               
							<h:column>
								<f:facet name="header">
									<h:outputText value="Material" />
								</f:facet>
								<h:form>
			
								<rich:panel styleClass="border: none" bodyClass="rich-noBorder">
							        <h:graphicImage url="/images/dialog-information.png"  width="15" rendered="#{material.properties ne null}"/>
							        <rich:toolTip styleClass="tooltip-text" rendered="#{material.properties ne null}">
							            <span style="white-space:nowrap">
				                			
				                			<h:dataTable  var="property" value="#{material.properties}">
				                				<h:column>
													<f:facet name="header">
														<h:outputText value="Propriedade" />
													</f:facet>
													<h:outputText value="#{property.name}"/>
												</h:column>
												
												<h:column>
													<f:facet name="header">
														<h:outputText value="Valor" />
													</f:facet>
													<h:outputText value="#{property.value}"/>
												</h:column>
											</h:dataTable>
											
							            </span>
							        </rich:toolTip>
							        <h:outputText value="#{material.name}" />
								</rich:panel>
			
								
								</h:form>
							</h:column>			               
							
							<h:column>
								<f:facet name="header">
									<h:outputText value="#{msgs.weblabs_list_header_remove}" />
								</f:facet>
									<a4j:commandLink action="#{StepBean.processActionDeleteMaterial}" reRender="stp_added_items_form">
										<h:graphicImage alt="#{msgs.weblabs_list_header_remove}" value="/images/drop.png" />
									</a4j:commandLink>
							</h:column>
						</h:dataTable>		
						
						
			
						<f:verbatim> <p> </f:verbatim>
						<sakai:view_title value="Selecione a tarefa correspondente a este passo"/>
			 				<h:selectOneMenu value="#{StepBean.selectedApplicationOntology}" style=" width : 500px;">
							<f:selectItems value="#{StepBean.somApplicationOntologyTaskList}"/>
						</h:selectOneMenu>
						
						<h:panelGrid columns="2" columnClasses="col, nocol">
							<h:outputLabel value="Descrição do Passo" for="stp_materialDescriptionInputTextArea"/>
			  				<h:inputTextarea id="stp_materialDescriptionInputTextArea" value="#{StepBean.stepMaterialDescription}" cols="60" rows="4" required="true"/>
							<rich:message for="stp_materialDescriptionInputTextArea">
									<f:facet name="errorMarker">
										<h:graphicImage value="/images/error.gif" />
									</f:facet>
							</rich:message>
						</h:panelGrid>
						
						<f:verbatim> <br> </f:verbatim>
						<f:verbatim> <br> </f:verbatim>
						
						<f:verbatim> <p> </f:verbatim>
						<a4j:commandButton action="#{StepBean.processActionAddStep}" value="Finalizar este passo" reRender="stp_added_items_form, stp_formDescription"/>
						
					</h:panelGroup>
				</h:panelGroup>
			</h:form>
			
		</sakai:view_content>
	</div>
	</sakai:view>
</f:view> 
