<%@ 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://myfaces.apache.org/tomahawk" prefix="t" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>

<style>
	.act input.active {
	}
	
	.act .active {
		color:#2277DD;
	}
	
	.nameColumn {
	    width: 100%;
	    text-align: left;
	    font-size: small;
	}
	
	.equipmentDescriptionColumn {
	    width: 100%;
	    text-align: left;
	    font-size: small;
	}
	
	.typeColumn {
	    width: 40%;
	   	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("dataTableDrug");
    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 };
	}

}

function highlight2() 
{
    var previousClass = null;
    // simple script for highlighting rows
    var table = document.getElementById("dataTableEquipment");
    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 };
	}

}

function highlight3() 
{
    var previousClass = null;
    // simple script for highlighting rows
    var table = document.getElementById("dataTableSolution");
    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">
	
		<style>			
			.navIntraTool a, .navIntraTool a:link
			{
				margin-right:0px;
			}	
		</style>
		
		
		<h:form id="createMaterial" >
			<sakai:tool_bar>
				<sakai:tool_bar_item action="#{ExperimentBean.processActionList}" value="#{msgs.new_weblab_list_link}" />
				<sakai:tool_bar_spacer />				
				<sakai:tool_bar_item action="#{MaterialBean.processActionNew}" value="Novo Material" rendered="#{MaterialBean.canCreate}" />
			</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:outputText value="Materiais" styleClass="toolBarLink" />
			</h:form>
			<hr width="100%" class="hr2" >
		

			

			<h:form id="insertForm"  rendered="#{MaterialBean.visibleInsertForm}" enctype="multipart/form-data">
				<h:panelGroup>
					<sakai:messages />
		  			<sakai:view_title value="Inserir novo material"/>
		  			<f:verbatim><hr class="hr2"></f:verbatim>  			
		  		</h:panelGroup>	
					
					<h:panelGrid columns="2" columnClasses="col, nocol">
		
						<f:verbatim>
							<h:outputText value="Tipo de material"></h:outputText>
						</f:verbatim>
						
						<f:verbatim><br></f:verbatim>
						
						
						<h:selectOneRadio value="#{MaterialBean.soRadioInsertForm}" onclick="submit()" layout="lineDirection" >
							<f:selectItem itemLabel="Material" itemValue="drug" />
							<f:selectItem itemLabel="Equipamento" itemValue="equipment" />
							<f:selectItem itemLabel="Solução" itemValue="solution" />
						</h:selectOneRadio>
						<h:outputText value=""></h:outputText>
						
						<h:panelGrid rendered="#{MaterialBean.soRadioInsertForm == 'drug'}" columns="2" columnClasses="col, nocol">
							<h:outputLabel value="Descrição" for="drugDescription"/>
							<h:inputText id="drugDescription" value="#{MaterialBean.drugDescription}"/>
							
							<h:outputLabel value="Referência na ontologia de domínio"/>
							<h:selectOneMenu id="mat_som_material" value="#{MaterialBean.selectedNewMaterialdomainOntologyReference}" style=" width : 202px;">
								<f:selectItems value="#{StepBean.domainOntologyMaterialList}"/>
							</h:selectOneMenu>
							
							<h:outputLabel for="mat_material_image" value="#{msgs.new_weblab_image_label}" styleClass="fontbold"/>
							<t:inputFileUpload id="mat_material_image" value="#{MaterialBean.materialImage}" storage="file" accept="image/*" required="false"/>
						</h:panelGrid>
		
		
						<h:panelGrid rendered="#{MaterialBean.soRadioInsertForm == 'equipment'}" columns="2" columnClasses="col, nocol">
							<h:outputLabel value="Descrição" for="equipmentValue"/>
							<h:inputText id="equipmentValue" value="#{MaterialBean.equipmentDescription}" size="40"/>
							
							<h:outputLabel value="Referência na ontologia de domínio"/>
							<h:selectOneMenu id="mat_som_equipamento" value="#{MaterialBean.selectedNewMaterialdomainOntologyReference}" style=" width : 202px;">
								<f:selectItems value="#{StepBean.domainOntologyMaterialList}"/>
							</h:selectOneMenu>
							
							<h:outputLabel for="mat_equipment_image" value="#{msgs.new_weblab_image_label}" styleClass="fontbold"/>
							<t:inputFileUpload id="mat_equipment_image" value="#{MaterialBean.materialImage}" storage="file" accept="image/*" required="false"/>
						</h:panelGrid>
									

						<h:panelGrid rendered="#{MaterialBean.soRadioInsertForm == 'solution'}" columns="2" columnClasses="col, nocol">
							<h:outputLabel value="Descrição" for="solutionValue"/>
							<h:inputText id="solutionValue" value="#{MaterialBean.solutionDescription}" size="40"/>
							
							<h:outputLabel value="Referência na ontologia de domínio"/>
							<h:selectOneMenu  id="mat_som_solucao" value="#{MaterialBean.selectedNewMaterialdomainOntologyReference}" style=" width : 202px;">
								<f:selectItems value="#{StepBean.domainOntologyMaterialList}"/>
							</h:selectOneMenu>
							
							<h:outputLabel for="mat_solution_image" value="#{msgs.new_weblab_image_label}" styleClass="fontbold"/>
							<t:inputFileUpload id="mat_solution_image" value="#{MaterialBean.materialImage}" storage="file" accept="image/*" required="false"/>								
						</h:panelGrid>
						
						<h:outputText value=""></h:outputText>


						
							

		
					
					</h:panelGrid>
					<f:verbatim> <br> </f:verbatim>
						<h:commandButton id="submit" action="#{MaterialBean.processActionAdd}" value="#{msgs.infraex_new_save_button_text}" styleClass="active" />
						<h:commandButton style="act" type="reset" value="#{msgs.infraex_new_reset_button_text}"/>
					
			</h:form>









			<h:form id="descriptionForm"  rendered="#{MaterialBean.visibleDescriptionForm}">
				<h:panelGroup>
					<sakai:messages />
		  			<sakai:view_title value="Descrição"/>
		  			<f:verbatim><hr class="hr2"></f:verbatim>  			
		  		</h:panelGroup>	
					
					<h:panelGrid columns="2" columnClasses="col, nocol">
		
						<f:verbatim>
							<h:outputText value="Tipo de material"></h:outputText>
						</f:verbatim>
						
						<f:verbatim><br></f:verbatim>
						
						
						<h:selectOneRadio value="#{MaterialBean.soRadioInsertForm}" onclick="submit()" layout="lineDirection" disabled="true" >
							<f:selectItem itemLabel="Material" itemValue="drug"/>
							<f:selectItem itemLabel="Equipamento" itemValue="equipment" />
							<f:selectItem itemLabel="Solução" itemValue="solution" />
						</h:selectOneRadio>
						<h:outputText value=""></h:outputText>
						
		
						
						<h:outputLabel value="Descrição" for="drugDescription" rendered="#{MaterialBean.soRadioInsertForm == 'drug'}"></h:outputLabel>
						<h:inputText id="drugDescription" value="#{MaterialBean.drugDescription}" rendered="#{MaterialBean.soRadioInsertForm == 'drug'}" size="80" disabled="true">  </h:inputText>
						
						<h:outputLabel value="Referência na ontologia de domínio" for="drugOntoRef" rendered="#{MaterialBean.soRadioInsertForm == 'drug'}"></h:outputLabel>
						<h:inputText id="drugOntoRef" value="#{MaterialBean.materialDomainOntologyReference}" rendered="#{MaterialBean.soRadioInsertForm == 'drug'}" size="150" disabled="true">  </h:inputText>
						
		
		
						<h:outputLabel value="Descrição" for="equipmentValue" rendered="#{MaterialBean.soRadioInsertForm == 'equipment'}"></h:outputLabel>
						<h:inputText id="equipmentValue" value="#{MaterialBean.equipmentDescription}" rendered="#{MaterialBean.soRadioInsertForm == 'equipment'}" size="80" disabled="true"></h:inputText>
						
						<h:outputLabel value="Referência na ontologia de domínio" for="equipmentOntoRef" rendered="#{MaterialBean.soRadioInsertForm == 'equipment'}"></h:outputLabel>
						<h:inputText id="equipmentOntoRef" value="#{MaterialBean.materialDomainOntologyReference}" rendered="#{MaterialBean.soRadioInsertForm == 'equipment'}" size="150" disabled="true"></h:inputText>
						
					
					
					
						<h:outputLabel value="Descrição" for="solutionValue" rendered="#{MaterialBean.soRadioInsertForm == 'solution'}"></h:outputLabel>
						<h:inputText id="solutionValue" value="#{MaterialBean.solutionDescription}" rendered="#{MaterialBean.soRadioInsertForm == 'solution'}" size="40" disabled="true"></h:inputText>									

						<h:outputLabel value="Referência na ontologia de domínio" for="solutionOntoRef" rendered="#{MaterialBean.soRadioInsertForm == 'solution'}"></h:outputLabel>
						<h:inputText id="solutionOntoRef" value="#{MaterialBean.materialDomainOntologyReference}" rendered="#{MaterialBean.soRadioInsertForm == 'solution'}" size="150" disabled="true"></h:inputText>
									
					</h:panelGrid>
					
					<f:verbatim> <br> </f:verbatim>
						<h:commandButton id="ok" action="#{MaterialBean.processActionReturn}" value="Voltar" styleClass="active" />
			</h:form>






			
			<h:form id="pagerForm" rendered="#{MaterialBean.visibleListForm}">
				
				<sakai:view_title value="Cadastrar/Listar Materiais" />
				
				<h:outputText value="Não há materiais cadastrados" styleClass="short2" rendered="#{MaterialBean.listDrugsEmpty}"  />
			
			
				<h:panelGrid columns="3" width="100%" columnClasses="title, messageColumn, pagerColumn" >
					<sakai:view_title value="Materiais"/>
					<sakai:messages />
						
					<sakai:pager  totalItems="#{MaterialBean.rowCountDrug}" pageSize="4" 
								  textItem="#{msgs.weblabs_list_pager_textitem}" 
								  textStatus="#{msgs.pager_status_text}" 
								  renderPageSize="false"								  
								  firstItem="#{MaterialBean.firstRowDrug}"
								  valueChangeListener="#{MaterialBean.changePagingStateDrug}" immediate="true">
					<a4j:support event="onclick" reRender="dataTableDrug" ></a4j:support>
					
					</sakai:pager>
				
				</h:panelGrid>
			</h:form>




			
			<h:dataTable id="dataTableDrug" binding="#{MaterialBean.dataTableDrug}" var="drug" value="#{MaterialBean.listDrug}" 
						 styleClass="listHier" style="margin-top: 0px;" columnClasses="nameColumn, editColumn, removeColumn" rowClasses="row"
						 rows="4" first="#{MaterialBean.firstRowDrug}"
						 onmouseover="highlight()"
			             onmouseout="highlight()" rendered="#{MaterialBean.visibleListForm}"> 
			               
				<h:column>
					<f:facet name="header">
						<h:outputText value="Descrição" />
					</f:facet>
					<h:form>
					<h:commandLink action="#{MaterialBean.processActionDescriptionDrug}" >
						<h:outputText value="#{drug.drug.description}" />
					</h:commandLink>
					</h:form>
				</h:column>
				
				<h:column>
					<f:facet name="header">
						<h:outputText value="#{msgs.weblabs_list_header_edit}" />
					</f:facet>
					<h:form>
					<h:commandLink action="#{MaterialBean.processActionUpdateDrug}" rendered="#{drug.canEdit}">
						<h:graphicImage alt="#{msgs.weblabs_list_header_edit}" value="/images/edit3.png" />
					</h:commandLink>
					</h:form>
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="#{msgs.weblabs_list_header_remove}" />
					</f:facet>
					<h:form>
					<h:commandLink action="#{MaterialBean.processActionDeleteDrug}" rendered="#{drug.canDelete}">
						<h:graphicImage alt="#{msgs.weblabs_list_header_remove}" value="/images/drop.png" />
					</h:commandLink>
					</h:form>
				</h:column>
			</h:dataTable>






			<h:form id="pagerFormEquipment" rendered="#{!MaterialBean.listEquipmentsEmpty}" rendered="#{MaterialBean.visibleListForm}">
			
				<hr id="hr2" width="100%" class="hr2" >
				
				<h:panelGrid columns="2" width="100%" columnClasses="title, pagerColumn" >
				
					<sakai:view_title value="Equipamentos"/>
					<sakai:pager  totalItems="#{MaterialBean.rowCountEquipment}" pageSize="4" 
								  textItem="#{msgs.weblabs_list_pager_textitem}" 
								  textStatus="#{msgs.pager_status_text}" 
								  renderPageSize="false"								  
								  firstItem="#{MaterialBean.firstRowEquipment}"
								  valueChangeListener="#{MaterialBean.changePagingStateEquipment}" immediate="true"/>
				</h:panelGrid>
			</h:form>

			<h:dataTable id="dataTableEquipment" binding="#{MaterialBean.dataTableEquipment}" var="equipment" value="#{MaterialBean.listEquipment}" 
						 styleClass="listHier" style="margin-top: 0px;" columnClasses="equipmentDescriptionColumn, editColumn, removeColumn" rowClasses="row"
						 rows="4" first="#{MaterialBean.firstRowEquipment}"
						 onmouseover="highlight2()"
			             onmouseout="highlight2()" rendered="#{MaterialBean.visibleListForm}">
			               
				<h:column>
					<f:facet name="header">
						<h:outputText value="Descrição" />
					</f:facet>
					<h:form>
					<h:commandLink action="#{MaterialBean.processActionDescriptionEquipment}" >
						<h:outputText value="#{equipment.equipment.description}" />
					</h:commandLink>
					</h:form>
				</h:column>
				
				<h:column>
					<f:facet name="header">
						<h:outputText value="#{msgs.weblabs_list_header_edit}" />
					</f:facet>
					<h:form>
					<h:commandLink action="#{MaterialBean.processActionUpdateEquipment}" rendered="#{equipment.canEdit}">
						<h:graphicImage alt="#{msgs.weblabs_list_header_edit}" value="/images/edit3.png" />
					</h:commandLink>
					</h:form>
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="#{msgs.weblabs_list_header_remove}" />
					</f:facet>
					<h:form>
					<h:commandLink action="#{MaterialBean.processActionDeleteEquipment}" rendered="#{equipment.canDelete}">
						<h:graphicImage alt="#{msgs.weblabs_list_header_remove}" value="/images/drop.png" />
					</h:commandLink>
					</h:form>
				</h:column>
			</h:dataTable>









			<h:form id="pagerFormSolution" rendered="#{!MaterialBean.listSolutionsEmpty}" rendered="#{MaterialBean.visibleListForm}">
			
				<hr id="hr2" width="100%" class="hr2" >
				
				<h:panelGrid columns="2" width="100%" columnClasses="title, pagerColumn" >
				
					<sakai:view_title value="Soluções"/>
					<sakai:pager  totalItems="#{MaterialBean.rowCountSolution}" pageSize="4" 
								  textItem="#{msgs.weblabs_list_pager_textitem}" 
								  textStatus="#{msgs.pager_status_text}" 
								  renderPageSize="false"								  
								  firstItem="#{MaterialBean.firstRowSolution}"
								  valueChangeListener="#{MaterialBean.changePagingStateSolution}" immediate="true"/>
				</h:panelGrid>
			</h:form>

			<h:dataTable id="dataTableSolution" binding="#{MaterialBean.dataTableSolution}" var="solution" value="#{MaterialBean.listSolution}" 
						 styleClass="listHier" style="margin-top: 0px;" columnClasses="equipmentDescriptionColumn, editColumn, removeColumn" rowClasses="row"
						 rows="4" first="#{MaterialBean.firstRowSolution}"
						 onmouseover="highlight3()"
			             onmouseout="highlight3()" rendered="#{MaterialBean.visibleListForm}">
			               
				<h:column>
					<f:facet name="header">
						<h:outputText value="Descrição" />
					</f:facet>
					<h:form>
					<h:commandLink action="#{MaterialBean.processActionDescriptionSolution}" >
						<h:outputText value="#{solution.solution.description}" />
					</h:commandLink>
					</h:form>
				</h:column>
				
				<h:column>
					<f:facet name="header">
						<h:outputText value="#{msgs.weblabs_list_header_edit}" />
					</f:facet>
					<h:form>
					<h:commandLink action="#{MaterialBean.processActionUpdateSolution}" rendered="#{solution.canEdit}">
						<h:graphicImage alt="#{msgs.weblabs_list_header_edit}" value="/images/edit3.png" />
					</h:commandLink>
					</h:form>
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="#{msgs.weblabs_list_header_remove}" />
					</f:facet>
					<h:form>
					<h:commandLink action="#{MaterialBean.processActionDeleteSolution}" rendered="#{solution.canDelete}">
						<h:graphicImage alt="#{msgs.weblabs_list_header_remove}" value="/images/drop.png" />
					</h:commandLink>
					</h:form>
				</h:column>
			</h:dataTable>



										
			
		</sakai:view_content>
	
	</sakai:view>
</f:view> 
