<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="rico" uri="/WEB-INF/rico" %>
<%@ taglib prefix="corejsf" uri="/WEB-INF/biblioteka"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<%--
    This file is an entry point for JavaServer Faces application.
--%>
<f:view>
    <html>
        <head>
            <link href="styles.css" rel="stylesheet" type="text/css"/>
            
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title><h:outputText value="#{msgs.title}"/></title>
        </head>
        <body>
            <div class="container">
                <div class="banner">
                    <h:outputText value="#{msgs.banner}"
                                  styleClass="bannerText"/>
                </div>
                <hr/>
                <rico:accordion name="bookAccordionTwo"  binding="#{backingBean.accordion}"
                                contentClass="accordionPanelContent"
                                headerClass="accordionPanelHeader"
                                panelClass="accordionPanel"
                                styleClass="accordion"
                                panelHeight="175"
                                >
                    
                    <rico:accordionPanel heading="Tabbed Pane">
                        <h:form>
                            <corejsf:tabbedpane styleClass="tabbedPane" 
                                                tabClass="tab"
                                                selectedTabClass="selectedTab" >
                                <f:facet name="tesla">
                                    <h:panelGrid columns="2">
                                        <h:graphicImage value="/images/tesla.jpg" height="120" width="81"/>
                                        <h:outputText value="#{msgs.teslaText}" 
                                                      styleClass="tabbedPaneContent"/>
                                    </h:panelGrid>
                                </f:facet>
                                <f:facet name="njutn">
                                    <h:panelGrid columns="2">
                                        <h:graphicImage value="/images/njutn.jpg" height="120" width="81"/>
                                        <h:outputText value="#{msgs.njutnText}" 
                                                      styleClass="tabbedPaneContent"/>
                                    </h:panelGrid>
                                </f:facet>
                                <f:facet name="ajnstajn">
                                    <h:panelGrid columns="2">
                                        <h:graphicImage value="/images/ajnstajn.jpg" height="120" width="81"/>
                                        <h:outputText value="#{msgs.ajnstajnText}" 
                                                      styleClass="tabbedPaneContent"/>
                                    </h:panelGrid>
                                </f:facet>
                                <f:facet name="pitagora">
                                    <h:panelGrid columns="2">
                                        <h:graphicImage value="/images/pitagora.jpg" height="120" width="81"/>
                                        <h:outputText value="#{msgs.pitagoraText}" 
                                                      styleClass="tabbedPaneContent"/>
                                    </h:panelGrid>
                                </f:facet>
                                
                                <f:selectItem itemLabel="#{msgs.teslaLink}"
                                              itemValue="tesla"/>
                                <f:selectItem itemLabel="#{msgs.njutnLink}"  
                                              itemValue="njutn"/>
                                <f:selectItem itemLabel="#{msgs.ajnstajnLink}"    
                                              itemValue="ajnstajn"/>
                                <f:selectItem itemLabel="#{msgs.pitagoraLink}" 
                                              itemValue="pitagora"/>
                            </corejsf:tabbedpane>
                            <h:commandButton value="refresh"/>
                        </h:form>
                    </rico:accordionPanel>
                    
                    
                    <rico:accordionPanel heading="Spiner za podešavanje visine panela">  
                        <h:form>
                            <corejsf:spinner id="spin" value="#{backingBean.panelHeight}"
                                             minimum="100" maximum="300" size="7" step="10"
                                             readonly="true"/>
                            <br/>
                            <h:message for="spin"/>
                            <h:commandButton value="#{msgs.newHeight}" 
                                             actionListener="#{backingBean.changeAccordionHeight}"/>
                        </h:form>
                    </rico:accordionPanel>  
                </rico:accordion>
                <br/>
                <h:form>
                    <h:commandButton action="nazad" value="#{msgs.button1Ex2}"/><br/><br/>
                </h:form>
                <div class="footer">&copy;2008 Šerić Ivan</div>
            </div>
        </body>
    </html>
</f:view>