I am building a prototype that is taking advantage of jQuery, AHAH and Video to simulate a TV message application. The purpose of the AHAH is to load pages asynchronously so that it doesn't disrupt the video playback. I have been able to effectively code the navigation so that pressing the up and down arrows allow the user to navigate and enter allows them to select the navigation item from the list. However, I need to program a back button, which would simulate a back button on the TV remote.

I envision setting the Backspace key as the key that users would hit to reload the previously viewed AHAH page. How would I go about doing it. Below is some code I am using for both AHAH and the key press functionality.

How would I go about remembering the previous page without refreshing the template that contains the playing video?

ahah.js
Code:
function ahah(url, target, delay) {
  var req;
  document.getElementById(target).innerHTML = 'Loading...';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(req, url, target, delay);};
    req.open("GET", url, true);
    req.send("");
  }
}  

function ahahDone(req, url, target, delay) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML="ahah error:\n"+req.statusText;
    }
    if (delay != undefined) {
       setTimeout("ahah(url,target,delay)", delay); // resubmit after delay
        //server should ALSO delay before responding
    }
  }
}
keypress.js
Code:
var currentSelection = 0;
var currentUrl = '';

google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
    // Register keypress events on the whole document
    $(document).keypress(function(e) {
        switch(e.keyCode) { 
            // User pressed "page up" arrow
            case 33:
                navigate('pgup');
            break;
            // User pressed "page down" arrow
            case 34:
                navigate('pgdn');
            break;
            // User pressed "back" arrow
            case 8:
                navigate('back');
            break;
            // User pressed "up" arrow
            case 38:
                navigate('up');
            break;
            // User pressed "down" arrow
            case 40:
                navigate('down');
            break;
            // User pressed "enter"
            case 13:
                if(currentUrl != '') {
                    window.location = currentUrl;
                    //store data using name/value format
                }
            break;
        }
    });
    
    // Add data to let the hover know which index they have
    for(var i = 0; i < $("#menu ul li a").size(); i++) {
        $("#menu ul li a").eq(i).data("number", i);
    }
    
    // Simulate the "hover" effect with the mouse
    $("#menu ul li a").hover(
        function () {
            currentSelection = $(this).data("number");
            setSelected(currentSelection);
        }, function() {
            $("#menu ul li a").removeClass("itemhover");
            currentUrl = '';
        }
    );
});

function navigate(direction) {
    // Check if any of the menu items is selected
    if($("#menu ul li .itemhover").size() == 0) {
        currentSelection = -1;
    }
    
    if(direction == 'up' && currentSelection != -1) {
        if(currentSelection != 0) {
            currentSelection--;
        }
    } else if (direction == 'down') {
        if(currentSelection != $("#menu ul li").size() -1) {
            currentSelection++;
        }
    }
    setSelected(currentSelection);
}

function setSelected(menuitem) {
    $("#menu ul li a").removeClass("itemhover");
    $("#menu ul li a").eq(menuitem).addClass("itemhover");
    currentUrl = $("#menu ul li a").eq(menuitem).attr("href");
}