<!-- Load the Really Simple 
???? History framework -->
<script type="text/javascript"
????????src="../../framework/dhtmlHistory.js">
</script>

window.onload = initialize;
????
function initialize() {
??// initialize the DHTML History
??// framework
??dhtmlHistory.initialize();

indow.onload = initialize;
????
function initialize() {
??// initialize the DHTML History
??// framework
??dhtmlHistory.initialize();
??
??// subscribe to DHTML history change
??// events
??dhtmlHistory.addListener(historyChange);

/** Our callback to receive history change
???? events. */
function historyChange(newLocation, 
?????????????????????? historyData) {
??debug("A history change has occurred: "
????????+ "newLocation="+newLocation
????????+ ", historyData="+historyData, 
????????true);
}

window.onload = initialize;
????
function initialize() {
??// initialize the DHTML History
??// framework
??dhtmlHistory.initialize();
??
??// subscribe to DHTML history change
??// events
??dhtmlHistory.addListener(historyChange);
??????
??// if this is the first time we have
??// loaded the page...
??if (dhtmlHistory.isFirstLoad()) {
????debug("Adding values to browser "
??????????+ "history", false);
????// start adding history
????dhtmlHistory.add("helloworld", 
???????????????????? "Hello World Data");
????dhtmlHistory.add("foobar", 33);
????dhtmlHistory.add("boobah", true);
??????
????var complexObject = new Object();
????complexObject.value1 = 
??????????????????"This is the first value";
????complexObject.value2 = 
??????????????????"This is the second data";
????complexObject.value3 = new Array();
????complexObject.value3[0] = "array 1";
????complexObject.value3[1] = "array 2";
??????
????dhtmlHistory.add("complexObject", 
???????????????????? complexObject);

window.onload = initialize;
????
function initialize() {
??// initialize the DHTML History
??// framework
??dhtmlHistory.initialize();
??
??// subscribe to DHTML history change
??// events
??dhtmlHistory.addListener(historyChange);
??????
??// if this is the first time we have
??// loaded the page...
??if (dhtmlHistory.isFirstLoad()) {
????debug("Adding values to browser "
??????????+ "history", false);
????// start adding history
????dhtmlHistory.add("helloworld", 
???????????????????? "Hello World Data");
????dhtmlHistory.add("foobar", 33);
????dhtmlHistory.add("boobah", true);
??????
????var complexObject = new Object();
????complexObject.value1 = 
??????????????????"This is the first value";
????complexObject.value2 = 
??????????????????"This is the second data";
????complexObject.value3 = new Array();
????complexObject.value3[0] = "array 1";
????complexObject.value3[1] = "array 2";
??????
????dhtmlHistory.add("complexObject", 
???????????????????? complexObject);

window.onload = initialize;
????
function initialize() {
??// initialize the DHTML History
??// framework
??dhtmlHistory.initialize();
??
??// subscribe to DHTML history change
??// events
??dhtmlHistory.addListener(historyChange);
??????
??// if this is the first time we have
??// loaded the page...
??if (dhtmlHistory.isFirstLoad()) {
????debug("Adding values to browser "
??????????+ "history", false);
????// start adding history
????dhtmlHistory.add("helloworld", 
???????????????????? "Hello World Data");
????dhtmlHistory.add("foobar", 33);
????dhtmlHistory.add("boobah", true);
??????
????var complexObject = new Object();
????complexObject.value1 = 
??????????????????"This is the first value";
????complexObject.value2 = 
??????????????????"This is the second data";
????complexObject.value3 = new Array();
????complexObject.value3[0] = "array 1";
????complexObject.value3[1] = "array 2";
??????
????dhtmlHistory.add("complexObject", 
???????????????????? complexObject);
???????????????????? 
????// cache some values in the history
????// storage
????debug("Storing key 'fakeXML' into " 
??????????+ "history storage", false);
????var fakeXML = 
??????'<?xml version="1.0" '
??????+??????'encoding="ISO-8859-1"?>'
??????+??????'<foobar>'
??????+???????? '<foo-entry/>'
??????+??????'</foobar>';
????historyStorage.put("fakeXML", fakeXML);
??} 

window.onload = initialize;
????
function initialize() {
??// initialize the DHTML History
??// framework
??dhtmlHistory.initialize();
??
??// subscribe to DHTML history change
??// events
??dhtmlHistory.addListener(historyChange);
??????
??// if this is the first time we have
??// loaded the page...
??if (dhtmlHistory.isFirstLoad()) {
????debug("Adding values to browser "
??????????+ "history", false);
????// start adding history
????dhtmlHistory.add("helloworld", 
???????????????????? "Hello World Data");
????dhtmlHistory.add("foobar", 33);
????dhtmlHistory.add("boobah", true);
??????
????var complexObject = new Object();
????complexObject.value1 = 
??????????????????"This is the first value";
????complexObject.value2 = 
??????????????????"This is the second data";
????complexObject.value3 = new Array();
????complexObject.value3[0] = "array 1";
????complexObject.value3[1] = "array 2";
??????
????dhtmlHistory.add("complexObject", 
???????????????????? complexObject);
???????????????????? 
????// cache some values in the history
????// storage
????debug("Storing key 'fakeXML' into " 
??????????+ "history storage", false);
????var fakeXML = 
??????'<?xml version="1.0" '
??????+??????'encoding="ISO-8859-1"?>'
??????+??????'<foobar>'
??????+???????? '<foo-entry/>'
??????+??????'</foobar>';
????historyStorage.put("fakeXML", fakeXML);
??} 
??
??// retrieve our values from the history
??// storage
??var savedXML = 
??????????????historyStorage.get("fakeXML");
??savedXML = prettyPrintXml(savedXML);
??var hasKey = 
?????????? historyStorage.hasKey("fakeXML");
??var message =
????"historyStorage.hasKey('fakeXML')="
????+ hasKey + "<br>"
????+ "historyStorage.get('fakeXML')=<br>"
????+ savedXML;
??debug(message, false);
}

/** Our function that initializes when the page
????is finished loading. */
function initialize() {
?? // initialize the DHTML History framework
?? dhtmlHistory.initialize();
?? 
?? // add ourselves as a DHTML History listener
?? dhtmlHistory.addListener(handleHistoryChange);

?? // if we haven't retrieved the address book
?? // yet, grab it and then cache it into our
?? // history storage
?? if (window.addressBook == undefined) {
??????// Store the address book as a global
??????// object.
??????// In a real application we would remotely
??????// fetch this from a server in the
??????// background.
??????window.addressBook =
???????? ["Brad Neuberg 'bkn3@columbia.edu'",
??????????"John Doe 'johndoe@example.com'",
??????????"Deanna Neuberg 'mom@mom.com'"];
??????????
??????// cache the address book so it exists
??????// even if the user leaves the page and
??????// then returns with the back button
??????historyStorage.put("addressBook",
???????????????????????? addressBook);
?? }
?? else {
??????// fetch the cached address book from
??????// the history storage
??????window.addressBook = 
?????????????? historyStorage.get("addressBook");
?? }

/** Handles history change events. */
function handleHistoryChange(newLocation, 
???????????????????????????? historyData) {
?? // if there is no location then display
?? // the default, which is the inbox
?? if (newLocation == "") {
??????newLocation = "section:inbox";
?? }
?? 
?? // extract the section to display from
?? // the location change; newLocation will
?? // begin with the word "section:" 
?? newLocation = 
???????? newLocation.replace(/section\:/, "");
?? 
?? // update the browser to respond to this
?? // DHTML history change
?? displayLocation(newLocation, historyData);
}

/** Displays the given location in the 
????right-hand side content area. */
function displayLocation(newLocation,
???????????????????????? sectionData) {
?? // get the menu element that was selected
?? var selectedElement = 
????????????document.getElementById(newLocation);
????????????
?? // clear out the old selected menu item
?? var menu = document.getElementById("menu");
?? for (var i = 0; i < menu.childNodes.length;
??????????????????????????????????????????i++) {
??????var currentElement = menu.childNodes[i];
??????// see if this is a DOM Element node
??????if (currentElement.nodeType == 1) {
???????? // clear any class name
???????? currentElement.className = "";
??????}?????????????????????????????????????? 
?? } 
?? 
?? // cause the new selected menu item to
?? // appear differently in the UI
?? selectedElement.className = "selected";
?? 
?? // display the new section in the right-hand
?? // side of the screen; determine what 
?? // our sectionData is
?? 
?? // display the address book differently by
?? // using our local address data we cached
?? // earlier
?? if (newLocation == "addressbook") {
??????// format and display the address book
??????sectionData = "<p>Your addressbook:</p>";
??????sectionData += "<ul>";
??????
??????// fetch the address book from the cache
??????// if we don't have it yet
??????if (window.addressBook == undefined) {
???????? window.addressBook = 
?????????????? historyStorage.get("addressBook");
??????}
??????
??????// format the address book for display
??????for (var i = 0; 
?????????????? i < window.addressBook.length;
???????????????????? i++) {
???????? sectionData += "<li>"
????????????????????????+ window.addressBook[i]
????????????????????????+ "</li>";??????????????????
??????}
??????
??????sectionData += "</ul>";
?? }
?? 
?? // If there is no sectionData, then 
?? // remotely retrieve it; in this example
?? // we use fake data for everything but the
?? // address book
?? if (sectionData == null) {
??????// in a real application we would remotely
??????// fetch this section's content
??????sectionData = "<p>This is section: " 
???????? + selectedElement.innerHTML + "</p>";??
?? }
?? 
?? // update the content's title and main text
?? var contentTitle = 
???????? document.getElementById("content-title");
?? var contentValue =
???????? document.getElementById("content-value");
?? contentTitle.innerHTML = 
????????????????????????selectedElement.innerHTML;
?? contentValue.innerHTML = sectionData;
}