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

<head>
<style type="text/css">

	.materialColumn {
	    width: 90%;
	    text-align: left;
	    font-size: small;
	}
	.removeColumn {
	    width: 30px;
		text-align: center;
		font-size: small;
	}	
	
	.propertyDataTableFirstColumn {
	    width: 100px;
	    text-align: left;
	    font-size: x-small;
	    font-weight: bold;
	}
	.propertyDataTableSecondColumn {
	    width: 50px;
		text-align: center;
		font-size: small;
	}
		
	 .tooltip-panel {
         width:160px;
         height:20px;
         background-color: transparent;
         text-align:center;
		 vertical-align: middle;
		 border: none; 
	 }
     .tooltip-text {
         width:350px;
         height:80px;
         text-align:justify;
         vertical-align: middle; 
         font-size: 12px;
	}
        	
	.panel_group {
		vertical-align: top;
		text-align: center;
	}
	
	.dataTable_column {
		vertical-align: center;
		text-align: left;
	}
    
    .form_image {
    	vertical-align: middle;
    	width: 300px;
    	
    }
    
    .form_input {
    	text-align: left;
    	vertical-align: text-top;
    }
    
    .form_message {
    	text-align: left;
    }
    
    .form_norm_row {
    	vertical-align: middle;
    	font-size: small;
    }
    
    .form_up_row {
    	vertical-align: middle;
    }
    
    .weblab_name {
    	font-weight: bold;
    	font-size: large;

    }
    
    .weblab_text {
    	font-size: small;
    	
    }
    
    .weblab_label {
    	font-weight: bold;
    	color: #555555;
    }
    
    .short {
		clear:both;
		border:1px solid #FFFFFF;
		margin:0.4em 1em;
		width: 120px;
	}
	
	.short2 {
		clear:both;
		border:1px solid #FFFFFF;
		margin:0.8em 1em;
	}
	
    
    hr.hr2 {
		height:1px;
	}
	
	tr.dataTableHighlight 
	{
		background-color: #ECF3FE;
	}
	
	.descriptionColumn {
	    width: 100%;
	    text-align: left;
	    font-size: small;
	}
	.quantityColumn {
	    width: 30px;
	    text-align: left;
	    font-size: small;
	}	
	.nameColumn {
	    width: 100%;
	    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: bottom;
	
	}
	
	.pagerColumn {
		width: 150px;
	}
	
	.subtitleColumn {
		width: 150px;
		vertical-align: bottom;
	}
	
	.subtitleStyle 
	{
		color:#555555;
		font-family:Arial,Helvetica,sans-serif;
		margin:1em 0pt 0pt;
		font-weight:bold;
		padding:0pt;
		background-color:transparent !important;
		font-size:100%;
	}
	
	.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("rex_dtEquipments");
    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("rex_dtStepMaterial");
    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>



<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>

<%/* 
<body id="mainBody" style="height:2000px">
*/ %>

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


<f:view>
	<sakai:view title="WebLab Tool">

		<style>			
			.navIntraTool a, .navIntraTool a:link
			{
				margin-right:0px;
			}	
		</style>
		
		<h:form id="rex_barActions">
			<sakai:tool_bar>
				<sakai:tool_bar_item action="#{StepBean.processActionBack}" value="#{msgs.new_weblab_list_link}" />
			</sakai:tool_bar>
		
			<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.processActionBack}" value="#{ExperimentBean.experimentName}" />
			<h:graphicImage value="/images/arrow.gif" styleClass="toolBarLink" />
			<h:outputText value="Executar experimento"></h:outputText>
		</h:form>				
		<sakai:view_title value="Execução do experimento: #{ExperimentBean.experimentName}"/>
		
		<hr width="100%" class="hr2" >
		







<h:panelGroup>
	<h:form id="rex_checkBoxesForm">		
	   		
	   		<h:panelGroup id="rex_stepNumber">
	   			<sakai:view_title value="Passo #{StepBean.stepNumber}"/> 
	   			<h:commandButton value="Terminar Experimento" action="#{StepBean.runningExperimentFinishExperiment}" rendered="#{StepBean.stepNumber > 2}"/>
	   			
	   			<h:form> 
	   				<a4j:commandButton value="Consultar protocolo" onclick="javascript:Richfaces.showModalPanel('rex_showProtocol');" />
	   			</h:form>
	   			

    			
	   		</h:panelGroup>
	   		<sakai:messages/>
			<f:verbatim> <br> </f:verbatim>
	
	   		<h:panelGrid columns="3" cellpadding="5" columnClasses="panel_group" rowClasses="panel_group" width="100%">
	  				
				
				<%/* Equipments CheckBoxes - First Column */%>
				<h:panelGrid style="panel_group">
					<h:dataTable id="rex_dtEquipments" value="#{StepBean.dtRunningExperimentEquipments}" 
							var="equipment"	binding="#{StepBean.bindingDTRunnigExperimentEquipments}"
							styleClass="listHier" style="margin-top: 0px;" rowClasses="row"
							onmouseover="highlight()" onmouseout="highlight()">
						<h:column>
							<f:facet name="header">
								<h:outputText value="Equipamentos" />
							</f:facet>
							<a4j:commandLink action="#{StepBean.runningExperimentAddSelectedMaterial}" reRender="rex_added_items_form">
								<h:graphicImage value="/getImage?file=#{equipment.image}" width="40"/>
								<f:param value="#{equipment.material.materialId}" name="SELECTED_MATERIAL_PARAM"/>
								<h:outputText value="#{equipment.material.description}"/>
							</a4j:commandLink>
						</h:column>
					</h:dataTable>
				</h:panelGrid>
				
				
				<%/* Drugs CheckBoxes - Second Column */ %>
				<h:panelGroup style="panel_group">
					<h:dataTable id="rex_dtDrugs" value="#{StepBean.dtRunningExperimentDrugs}" 
							var="drug" binding="#{StepBean.bindingDTRunnigExperimentDrugs}"
							styleClass="listHier" style="margin-top: 0px;" rowClasses="row">
						<h:column>
							<f:facet name="header">
								<h:outputText value="Materiais" />
							</f:facet>
							<a4j:commandLink action="#{StepBean.runningExperimentAddSelectedMaterial}" reRender="rex_added_items_form">
								<f:param value="#{drug.material.materialId}" name="SELECTED_MATERIAL_PARAM"/>
								<h:outputText value="#{drug.material.description}"/>
							</a4j:commandLink>
						</h:column>
					</h:dataTable>
				</h:panelGroup>
				
				
				<%/* Solutions CheckBoxes - Third Column */ %>
				<h:panelGroup style="vertical-align: top" styleClass="vertical-align: top">
					<h:dataTable id="rex_dtSolutions" value="#{StepBean.dtRunningExperimentSolutions}" 
							var="solution" binding="#{StepBean.bindingDTRunnigExperimentSolutions}"
							styleClass="listHier" style="margin-top: 0px;" rowClasses="row">
						
						<h:column>
							<f:facet name="header">
								<h:outputText value="Soluções" />
							</f:facet>		
							<a4j:commandLink action="#{StepBean.runningExperimentAddSelectedMaterial}" reRender="rex_added_items_form">
								<f:param value="#{solution.material.materialId}" name="SELECTED_MATERIAL_PARAM"/>
								<h:outputText value="#{solution.material.description}"/>
							</a4j:commandLink>
						</h:column>
					</h:dataTable>
				</h:panelGroup>
				

	  		</h:panelGrid>

	</h:form>

	<h:form>			
		<h:panelGroup id="rex_added_items_form">
			<h:panelGroup rendered="#{StepBean.stepMaterialList ne null}">
			
				<sakai:view_title value="Materiais selecionados para este passo"/>
	
				<h:dataTable id="rex_dtStepMaterial" binding="#{StepBean.dataTableInsert}" var="material" value="#{StepBean.stepMaterialList}" 
							 styleClass="listHier" style="margin-top: 0px;" columnClasses="materialColumn, removeColumn" rowClasses="row"
							 onmouseover="highlight2()"
				             onmouseout="highlight2()">
				               
					<h:column>
						<f:facet name="header">
							<h:outputText value="Material" />
						</f:facet>	
						<h:outputLabel value="#{material.name}"/>
						
						<h:dataTable  var="property" value="#{material.properties}" rendered="#{material.properties ne null}"
								columnClasses="propertyDataTableFirstColumn, propertyDataTableSecondColumn">
								
               				<h:column>
               					<h:outputText value="          "/>
								<h:outputText value="#{property.name}"/>
							</h:column>
							
							<h:column>
								<h:inputText id="rex_inputTextProperty" value="#{property.value}" required="true"/>
								<rich:message for="rex_inputTextProperty">
									<f:facet name="errorMarker">
										<h:graphicImage value="/images/error.gif" />
									</f:facet>
								</rich:message>
							</h:column>
						</h:dataTable>							
					</h:column>
					
					<h:column>
						<f:facet name="header">
							<h:outputText value="#{msgs.weblabs_list_header_remove}" />
						</f:facet>
							<a4j:commandLink action="#{StepBean.processActionDeleteMaterial}" reRender="rex_added_items_form">
								<h:graphicImage alt="#{msgs.weblabs_list_header_remove}" value="/images/drop.png" />
							</a4j:commandLink>
					</h:column>					
					
				</h:dataTable>
				
				<a4j:commandButton action="#{StepBean.runningExperimentAddStep}" value="Finalizar este passo" reRender="rex_added_items_form, rex_stepNumber"/>
				
			</h:panelGroup>
		</h:panelGroup>
	</h:form>




<rich:modalPanel id="rex_showProtocol" autosized="true"	keepVisualState="false" width="600" height="400" >
	<f:facet name="header">
		<h:outputText value="Protocolo do experimento" />
	</f:facet>
	<f:facet name="controls">
		<h:panelGroup>
			<h:graphicImage value="/images/close.png" styleClass="hidelink"	id="rex_protocolPanelCloseCtrl" />
			<rich:componentControl for="rex_showProtocol" attachTo="rex_protocolPanelCloseCtrl" operation="hide" event="onclick" />
		</h:panelGroup>
	</f:facet>
	<h:form>
		<h:panelGrid columns="1" style="width: 100%">
			<f:verbatim><div style="text-align:justify"></f:verbatim>
  				<h:inputTextarea value="#{ExperimentBean.protocol}" style="height : 282px; width : 700px;"/>
   			<f:verbatim></div></f:verbatim>
		</h:panelGrid>
	</h:form>	
</rich:modalPanel>




	</h:panelGroup>
	</sakai:view>
</f:view> 
<%/*</body>  */%>