function createHtmlNavigation(hierarchy, page_location) {
  var html = '<div id="header_nav">';
  var page_path = page_location.split("|");
  var page_path_idx = 0;
  html += '<table id="header_nav_table"><tr>';  
  
  var itemHeight = 16;
  var next_nav_obj = hierarchy;
  var scrollTrackPixels = [];
  while (next_nav_obj != null) {
    html += '<td class="header_nav_column"><div class="nav_scrollpane" id="nav_div_' + page_path_idx + '"';
    if (page_path_idx == 0) {
      html += ' style="width:76px;"';	
    }
    else if (page_path_idx == 1) {
      html += ' style="width:146px; border-left-style:solid; border-left-width:1px; border-left-color:#e1e1e1"';
    }
    else {
      html += ' style="border-left-style:solid; border-left-width:1px; border-left-color:#e1e1e1"';	
    }
    html += '>';
    html += '<div class="scrollbar">';
    html += '<div class="track">';
    html += '<div class="thumb">';
    html += '<div class="end">';
    html += '</div></div></div></div>';
    html += '<div class="viewport"';
    if (page_path_idx == 0) {
        html += ' style="width:70px"';      
    }
    else if (page_path_idx == 1) {
      html += ' style="width:140px"';      
    }
    html += '>';
	html += '<div class="overview">';    
    html += '<ul>';
    var nav_obj = next_nav_obj;
    next_nav_obj = null;
    var navScrollTracks = -1;
    $(nav_obj).each(function(idx, sub_nav) {
      html += '<li>';
	  if (page_path.length > page_path_idx && sub_nav.title == page_path[page_path_idx]) {
		navScrollTracks = idx * itemHeight;
	    html += '<a class="selected_nav_link" href="' + sub_nav.url + '">' + sub_nav.title + '</a>';
	    if (sub_nav.action != null && sub_nav.action.length > 0) {
	      next_nav_obj = sub_nav.action;
	      page_path_idx++;
	    }
	  }
	  else {
		html += '<a class="nav_link" href="' + sub_nav.url + '">' + sub_nav.title + '</a>';
	  }
	  html += '</li>'
    });
    html += '</ul></div></div></div></td>';
	scrollTrackPixels.push(navScrollTracks);
  }


  html += '</tr></table>';
  html += '</div>';  
  
  return { html: html, scrollTrackPixels: scrollTrackPixels};
}
