<pe:slideout id="slideoutFeedback" title="Feedback" icon="pi pi-thumbs-up" location="top" widgetVar="slideout"
        handleStyleClass="feedback-handle" panelStyleClass="feedback-panel" offset="475px" bounceTimes="5"
        bounceDistance="100px" onopen="$('#lblOnOpenClose').text('Open Event!');"
        onclose="$('#lblOnOpenClose').text('Close Event!');">
        
        <p:ajax event="open" listener="#{slideOutController.openListener}" update="growl"/> 
        <p:ajax event="close" listener="#{slideOutController.closeListener}" update="growl"/> 
        
        <p:panelGrid styleClass="ui-noborder" layout="tabular" columns="0">
            <p:row>
                <p:column styleClass="ui-widget-header">
                    <p:outputLabel for="txtMessage" value="Message"></p:outputLabel>
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <p:inputTextarea id="txtMessage" rows="5" cols="43" autoResize="false" placeholder="Send us a message if you have something to say." />
                </p:column>
            </p:row>
            <p:row>
                <p:column styleClass="ui-widget-header">
                    <p:outputLabel for="txtEmail" value="Email address (optional)"></p:outputLabel>
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <p:inputText id="txtEmail" size="40"  placeholder="Email address (optional)"/>
                </p:column>
            </p:row>
            <p:row>
                <p:column style="font-style: italic;">
             If you provide your email address above, then by submitting<br />
             this form you agree that we may contact you by email<br />
             to follow up on your feedback.<br />
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <p:outputPanel style="text-align:right;">
                        <p:commandButton value="Send" type="button" onclick="PF('slideout').close();" />
                    </p:outputPanel>
                </p:column>
            </p:row>
        </p:panelGrid>
    </pe:slideout>

    <p>
        <h:outputText id="lblResult" value="Javascript Callback Result: " />
        <h:outputText id="lblOnOpenClose" value="Event Result" style="font-weight:bold; color: DeepPink;" />
    </p>