SnapNaviVisible = false;
SnapNaviInterval = false;
SnapNaviButtonIndex = 0;

function toggleSideNavigation() {
  SnapNaviVisible = !SnapNaviVisible;
  var navItems = document.getElementById('hiddenSideNaviItems');
  if(!navItems) return;

  if(SnapNaviVisible) {
    // SHOW NAVI
    navItems.className = 'hiddenNaviOn';
    showNextButton();
  } else {
    // HIDE NAVI
    SnapNaviButtonIndex = 0;
    if(SnapNaviInterval) window.clearInterval(SnapNaviInterval);
    SnapNaviInterval = false;
    navItems.className = 'hiddenNaviOff';

    for(var i=0; i < navItems.childNodes.length; i++) {
      if(navItems.childNodes[i].style)
        navItems.childNodes[i].style.visibility = 'hidden';
    }
  }
}

function showNextButton() {
  var node = document.getElementById('hiddenSideNaviItems');
  var n = node.childNodes[SnapNaviButtonIndex];
  n.style.visibility = 'visible';
  if(SnapNaviButtonIndex == 0) {
    SnapNaviInterval = window.setInterval("showNextButton()", 80);
  }
  SnapNaviButtonIndex++;
  if(SnapNaviButtonIndex >= node.childNodes.length) {
    window.clearInterval(SnapNaviInterval);
    SnapNaviInterval = false;
  }
}