<?xml version="1.0" encoding="UTF-8"?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:p="http://primefaces.org/ui" xmlns:e="http://www.ivu.de/elect/tags">


    <!--@elvariable id="msgs" type="de.ivu.elect.business.lokalisierung.control.LokalisierungResourceBundle"-->


    <h:form id="frmTree">
		<f:attribute name="role" value="presentation" />
        <ui:param name="treeEnabled" value="#{pageMenuDisabled ne true}"/>

        <p:outputPanel styleClass="ui-autocomplete-mit-button">
            <!--@elvariable id="gebietsbaumView" type="de.ivu.elect.presentation.gebietsbaum.tree.AbstractNoStoreGebietsbaumView"-->
            <!--@elvariable id="node" type="de.ivu.elect.presentation.gebietsbaum.tree.GebietsbaumTreeNodeData"-->
            <p:autoComplete id="inTreeAutoComplete" disabled="#{not treeEnabled}" forceSelection="true"
                    emptyMessage="#{msgs['gebietsbaum.autocomplete.keinErgebnis']}"
                    title="#{msgs['gebietsbaum.autocomplete.title']}"
                    value="#{gebietsbaumAutoComplete.gebiet}"
                    converter="entityConverter"
                    maxlength="256" var="gebiet" itemValue="#{gebiet}"
                    itemLabel="#{gebietNummerFormatter.getDarstellung(gebiet)}"
                    completeMethod="#{gebietsbaumAutoComplete.onComplete}"
                    queryDelay="50" minQueryLength="1"
                    onkeyup="sucheGebietAutoCompleteHandleKeyUp.call(this, event);"
                    widgetVar="sucheGebietAutocomplete"
                    styleClass="ui-autocomplete--kompakt"/>
            <p:watermark for="inTreeAutoComplete"
                    value="#{msgs['gebietsbaum.autocomplete.watermark']}"/>

            <p:commandButton id="btnTreeAutoComplete" rendered="#{treeEnabled}" action="#{gebietsbaumAutoComplete.select}"
                icon="#{icons.iconSearch}" widgetVar="sucheGebiet" styleClass="ui-autocomplete-button ui-autocomplete-button--kompakt" onstart="PF('ctnContentBlockUI').show()"/>

            <p:hotkey bind="ctrl+shift+f" handler="document.getElementById('frmTree:inTreeAutoComplete_input').focus();" />
        </p:outputPanel>

        <p:scrollPanel id="scroll" mode="native" widgetVar="scrollWidget" styleClass="scrollTreeFinder">
            <p:graphicImage value="#{resource[blockUiImageRotater.getBlockUiImage()]}" rendered="#{not gebietsbaumView.treeReady}"/>
            <!-- dynamically exapandable content -->
            <p:tree id="tree" value="#{gebietsbaumView.root}" var="node" dynamic="#{gebietsbaumView.treeDynamic}" selectionMode="single" selection="#{gebietsbaumView.selectedNode}" disabled="#{not treeEnabled}">
                <c:choose>
                    <c:when test="#{treeEnabled}">
                       <p:ajax event="select" listener="#{gebietsbaumView.onNodeSelect}" partialSubmit="true" async="false" immediate="true" onstart="PF('ctnContentBlockUI').show()" /> <!-- async false, damit es zu keinen Überschneidungen kommt -->
                    </c:when>
                    <c:otherwise>
                        <f:attribute name="styleClass" value="ui-tree-disabled"/>
                    </c:otherwise>
                </c:choose>

                <c:if test="#{gebietsbaumView.treeDynamic}">
                  <p:ajax disabled="#{not gebietsbaumView.treeDynamic}" event="expand" listener="#{gebietsbaumView.onNodeExpand}"/>
                </c:if>

                <p:treeNode id="treeNodeGenericIcon" type="genericIcon" icon="#{node.icon}">
                    <h:outputLabel id="lblTreeNodeGenericIcon" value="#{node.nameNummerFormatiert}"
                            title="#{node.title}" styleClass="#{node.styleClass}"/>
                </p:treeNode>
            </p:tree>

        </p:scrollPanel>

        <e:cdata><h:outputScript>/* <![CDATA[ */
            function sucheGebietAutoCompleteHandleKeyUp(event) {
              var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
              if (keyCode == 13 && this.value !== '') {
                PF('sucheGebiet').jq.click();
                return false;
              }
            }
	        jQuery(document).ready(function($) {

	                var scrollPanel = $('#frmTree .scrollTreeFinder');
	                var selectedNode = $(".ui-treenode-label.ui-state-highlight");

	                if(scrollPanel && selectedNode && selectedNode.offset()) {
	                    scrollPanel.scrollTop(0);

	                    var topScroll = selectedNode.offset().top;
	                    var topScrollOffset = 170;

	                    if(topScroll > topScrollOffset) {
                            scrollPanel.scrollTop(topScroll - topScrollOffset);
	                    }
	                }
	        });
        /* ]]> */</h:outputScript></e:cdata>

    </h:form>
    <h:form id="frmInitTree">
        <p:remoteCommand autoRun="true" action="#{gebietsbaumView.setTreeReady()}"
                update=":frmTree" name="initTree" process="@this" id="treeRemoteCmd"/>

    </h:form>
</ui:composition>
