// Will return true if handled.
function handleNavClick(target){
  var retVal = true;
  if (target == null) target = document.historyDefault;
  // Hide all menus
  Ext.select('.mainBody').enableDisplayMode('block').hide();
  // Show the one requested
  var detail = Ext.get(target.replace(/sec/,"secDetail"));
  if (detail) detail.show();
  else retVal = false;
  
  return retVal;
}

Ext.onReady(function(){
  // Set up click handler
  Ext.History.init();
  var secNav = Ext.fly("secNav");
  if (secNav) {
    document.historyDefault = Ext.query('div[class=mainBody]{display!=none}')[0].id.replace(/Detail/,"");
	  secNav.on("click", function(e){
	    var target = e.getTarget();
	    if (target.id == "" || this.lastClick == target.id) {
	      retVal = true;
	    } else {
        retVal = !handleNavClick(target.id)
	    }
	    this.lastClick = target.id;
	    if (!retVal) {
        // Don't let click event continue
        e.stopEvent();
        // Update the History
        Ext.History.add('sections:' + target.id);
      }
	    return retVal;
	  })
  }
});

// Handle this change event in order to restore the UI to the appropriate history state
Ext.History.on('change', function(token){
  if (token) {
    var parts = token.split(':');
    switch (parts[0]){
      case 'sections':
        handleNavClick(parts[1]);
        break;
      default:
    }
  } else {
    handleNavClick(null);
  }
});