var menu_definition = 
[['HOME',            'Home',               'AboutCBCCP.jpg',
   [['progress',       'Progress',         []]]],
 ['faq',             'FAQ',                'FAQ.jpg',
   []],
 ['CBCCP',           'Our Church',         'AboutCBCCP.jpg',
   [['aboutourchurch', 'About Our Church', []],
    ['cbccphistory',   'CBCCP History',    []],
    ['ourmission',     'Our Mission',      []],
    ['ourcorevalue',   'Our Core Value',   []],
    ['pastortosbio',   'Pastor To\'s Bio', []]]],
 ['OURVISION',       'Our Vision',         'OurVision.jpg',
   [['vision',         'Vision', []],
    ['needs',          'Needs', []]]],
 ['COMMITTEE',       'Committee',          'AboutCBCCP.jpg',
   []],
 ['qna',             'Q&A',                'FAQ.jpg',
   [['questions',      'Questions.', []],
    ['feedback',       'Feedback', []]]],
 ['BUILDPLAN',       'Building Plan',      'BuildingPlan.jpg',
   [['timeline',       'Timeline',    []],
    ['budgetest',      'Budget Est.', []],
    ['spacelist',      'Space List',  []]]],
 ['FUNDRAISING',     'Fund Raising',       'FundRaising.jpg',
   [['foodprogram',    'Food Program',     []]]]
];

var current_menu = false;
var current_submenu = false;

function BuildMenu() {
  var s = '<h3 class="menu-header">Navigation</h3><ul class="menu">';
  var i, menu, submenu;
  for (i = 0; i < menu_definition.length; i++) {
    menu = menu_definition[i];
    submenu = menu[3];
    s += '<li id="' + menu[0] + '-title" class="menu-main">';
    s += '<a href="javascript:SelectSubMenu(' + i + ');">';
    s += menu[1] + '</a>';
    s += '<div id="' + menu[0] + '-submenu" style="display:none"><ul class="menu-sub">';
    for (j = 0; j < submenu.length; j++) {
      smitem = submenu[j];
      s += '<li id="' + smitem[0] + '-title" class="menu-sub">';
      s += '<a href="javascript:SelectSubMenuItem(' + i + ',' + j + ');">';
      s += smitem[1] + '</a></li>';
    }
    s += '</ul></div>';
    s += '</li>';
  }
  s += '</ul>';
  document.getElementById('menu').innerHTML = s;
}

function ToggleMenuStyle(selected) {
  if(current_menu) document.getElementById(current_menu+'-title').className = (selected? 'menu-main-current':'menu-main');
}

function ToggleSubMenu(show) {
  if(current_menu) document.getElementById(current_menu+'-submenu').style.display = (show? 'block':'none');
}

function ToggleSubMenuStyle(selected) {
  if(current_submenu)document.getElementById(current_submenu+'-title').className = (selected? 'menu-sub-current':'menu-sub');
}

function SelectSubMenuItem(smidx, miidx) {
  var submenu = menu_definition[smidx];
  var menuitem = submenu[3][miidx];
  if ( menuitem ) {
    ToggleSubMenuStyle(false);
    current_submenu = menuitem[0];
    ToggleSubMenuStyle(true);
    ShowContent(menuitem[0]);
  } else {
    ToggleSubMenuStyle(false);
    current_submenu = false;
    ShowContent(submenu[0]);
  }
}

function SelectSubMenu(idx) {
  var menu = menu_definition[idx];
  var name = menu[0];
  ToggleMenuStyle(false);
  ToggleSubMenu(false);
  
  current_menu = name;

  ToggleMenuStyle(true);
  ToggleSubMenu(true);
  SetContextImage(menu_definition[idx][2]);
  
  SelectSubMenuItem(idx, 0);
}

function FindMenu(s) {
  var id = s.substr(1);
  var menu;
  
  for (i = 0; i < menu_definition.length; i++) {
    if ( menu_definition[i][0] == id ) {
      SelectSubMenu(i);
      return;
    }
    menu = menu_definition[i][3];
    for (j = 0; j < menu.length; j++) {
      if ( menu[j][0] == id ) {
        SelectSubMenu(i);
        SelectSubMenuItem(i, j);
        return;
      }
    }
  }
}