/gist:1993051

## gistfile1.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="../templates/template2.xhtml">
    <ui:define name="content">
        <script type="text/javascript">
            var cnt = 0;

            //we now store the history of this page
            if (!window.jsf)
                window.jsf = {};
            window.jsf.history = {};
            window.jsf.history.snapshotPage = function () {
                //no onpopstate and no sessionstorage then we do nothing,
                // ie I am talking about you
                if('undefined' == typeof window.onpopstate || !sessionStorage) return;
                setTimeout(function() {
                if (!window.onpopstate) {
                    window.jsf.history.setPopstateHandler();
                }


                var stateObj = {state:document.body.innerHTML};
                cnt++;
                var statusIdx = window.location.href + "_" + cnt;
                sessionStorage.setItem(statusIdx, document.body.innerHTML);
                history.pushState({position:statusIdx}, "page " + cnt, window.location.href);
                }, 10);
            }

            /**
             * extension point for non html5 snapshots
             */
            window.jsf.history.setPopstateHandler = function (handler) {
                window.onpopstate = handler || function (evt) {
                    if (evt.state) {
                        var data = sessionStorage.getItem(evt.state.position);
                        if (data) {
                            document.body.innerHTML = data;
                        }
                    }
                };
            }

            //initial init
            window.jsf.history.snapshotPage();
            //we set the default handler
            function theHandler(evt) {
                if (evt.status == "success") {
                    window.jsf.history.snapshotPage();
                }
            }
            jsf.ajax.addOnEvent(theHandler);
        </script>


        <h:form id="centerForm">

            <h:panelGroup id="state0" rendered="#{stateBean.state == 0}">
                bla bla bla 0
            </h:panelGroup>
            <h:panelGroup id="state1" rendered="#{stateBean.state == 1}">
                bla bla bla 1
            </h:panelGroup>
            <h:panelGroup id="state2" rendered="#{stateBean.state == 2}">
                bla bla bla 2
            </h:panelGroup>
            <h:inputHidden id="holder" value="#{stateBean.state}"/>
            <h:commandLink id="booga3" value="back" action="#{stateBean.doStateBack}">
                <f:ajax render="centerForm" execute="@all"/>
            </h:commandLink>

            <h:commandLink id="booga4" value="forward" action="#{stateBean.doState}">
                <f:ajax render="centerForm" execute="@all"/>
            </h:commandLink>
        </h:form>
    </ui:define>
</ui:composition>
</html>
	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core">
	<ui:composition template="../templates/template2.xhtml">
	<ui:define name="content">
	<script type="text/javascript">
	var cnt = 0;

	//we now store the history of this page
	if (!window.jsf)
	window.jsf = {};
	window.jsf.history = {};
	window.jsf.history.snapshotPage = function () {
	//no onpopstate and no sessionstorage then we do nothing,
	// ie I am talking about you
	if('undefined' == typeof window.onpopstate \|\| !sessionStorage) return;
	setTimeout(function() {
	if (!window.onpopstate) {
	window.jsf.history.setPopstateHandler();
	}


	var stateObj = {state:document.body.innerHTML};
	cnt++;
	var statusIdx = window.location.href + "_" + cnt;
	sessionStorage.setItem(statusIdx, document.body.innerHTML);
	history.pushState({position:statusIdx}, "page " + cnt, window.location.href);
	}, 10);
	}

	/**
	* extension point for non html5 snapshots
	*/
	window.jsf.history.setPopstateHandler = function (handler) {
	window.onpopstate = handler \|\| function (evt) {
	if (evt.state) {
	var data = sessionStorage.getItem(evt.state.position);
	if (data) {
	document.body.innerHTML = data;
	}
	}
	};
	}

	//initial init
	window.jsf.history.snapshotPage();
	//we set the default handler
	function theHandler(evt) {
	if (evt.status == "success") {
	window.jsf.history.snapshotPage();
	}
	}
	jsf.ajax.addOnEvent(theHandler);
	</script>


	<h:form id="centerForm">

	<h:panelGroup id="state0" rendered="#{stateBean.state == 0}">
	bla bla bla 0
	</h:panelGroup>
	<h:panelGroup id="state1" rendered="#{stateBean.state == 1}">
	bla bla bla 1
	</h:panelGroup>
	<h:panelGroup id="state2" rendered="#{stateBean.state == 2}">
	bla bla bla 2
	</h:panelGroup>
	<h:inputHidden id="holder" value="#{stateBean.state}"/>
	<h:commandLink id="booga3" value="back" action="#{stateBean.doStateBack}">
	<f:ajax render="centerForm" execute="@all"/>
	</h:commandLink>

	<h:commandLink id="booga4" value="forward" action="#{stateBean.doState}">
	<f:ajax render="centerForm" execute="@all"/>
	</h:commandLink>
	</h:form>
	</ui:define>
	</ui:composition>
	</html>