<script type="text/javascript">
            first=true;
            flip=false;
            function loopIt()
            {
                if( first )
                {
                    Appear1();
                    Fade0();
                    first = false;
                }
                else if( flip )
                {
                    Fade2();
                    Appear1();
    
                    flip = false;
                    setTimeout( 'Box2afterTwoSeconds()', 2000 );
                }
                else
                {
                    Fade1();
                    Appear2();

                    flip = true;
                    setTimeout( 'Box1afterTwoSeconds()', 2000 );
                }
            }

            function Box1afterTwoSeconds()
            {
                reRender1();
            }

            function Box2afterTwoSeconds()
            {
                reRender2();
            }
        </script>

        <a4j:region>
            <h:form>
                <a4j:poll id="poll1" interval="5000" enabled="true" reRender="serverDate" oncomplete="loopIt();"></a4j:poll>
                <a4j:jsFunction reRender="fadebox1" name="reRender1" ></a4j:jsFunction>
                <a4j:jsFunction reRender="fadebox2" name="reRender2" ></a4j:jsFunction>
            </h:form>
        </a4j:region>

        <h:form>
            <h:outputText id="serverDate" style="font-size:16px" value="This Server Date changes: #{Scroller.date}"></h:outputText>
        </h:form>

        <rich:panel id="fadebox0" style="position: absolute; width: 400px" >
            <f:facet name="header">Welcome to this website</f:facet>
            <h:outputText value="Welcome to this website" ></h:outputText> 
        </rich:panel>

        <rich:panel id="fadebox1" style="position: absolute; width: 400px; z-index:1;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;">
            <f:facet name="header">Fade Effect 1</f:facet>
            <h:outputText value="This does change: #{Scroller.date}" ></h:outputText>
        </rich:panel>

        <rich:panel id="fadebox2" style="position: absolute; width: 400px; z-index:2;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;">
            <f:facet name="header">Fade Effect 2</f:facet>
            <h:outputText value="This does change: #{Scroller.date}" ></h:outputText>
        </rich:panel>

        <rich:effect for="fadebox0" type="Fade" name="Fade0" ></rich:effect>

        <rich:effect for="fadebox1" type="Fade" name="Fade1" ></rich:effect>
        <rich:effect for="fadebox1" type="Appear" name="Appear1"  ></rich:effect>

        <rich:effect for="fadebox2" type="Fade" name="Fade2"  ></rich:effect>
        <rich:effect for="fadebox2" type="Appear" name="Appear2" ></rich:effect>