Update inner navigation code.

Closes issues #4 and #58.

en.htm

@@ -176,11 +176,11 @@
 			<header>
 				<h2>Inner Navigation</h2>
 			</header>
-			<ol class="inner">
-				<li class="active">This tool is provided</li>
-				<li>Without warranty, guarantee</li>
-				<li>Or much in the way of explanation
-				<li>Erase your hard drive.</li>
+			<ol>
+				<li>This tool is provided</li>
+				<li class="next">Without warranty, guarantee</li>
+				<li class="next">Or much in the way of explanation
+				<li class="next">Erase your hard drive.</li>
 			</ol>
 		</section>
 	</div></div>

scripts/script.js

@@ -9,7 +9,7 @@
 	for (i = 0; i < l; i++) {
 		slideList.push({
 			id: slides[i].id,
-			hasInnerNavigation: null !== slides[i].querySelector('.inner')
+			hasInnerNavigation: null !== slides[i].querySelector('.next')
 		});
 	}
 
@@ -127,13 +127,13 @@
 		// Shortcut for slides without inner navigation
 		if (true !== slideList[slideNumber].hasInnerNavigation) { return -1; }
 
-		var activeNodes = document.querySelectorAll(getSlideHash(slideNumber) + ' .active'),
-			// NOTE: we assume there is no other elements in inner navigation
-			node = activeNodes[activeNodes.length - 1].nextElementSibling;
+		var nextNodes = document.querySelectorAll(getSlideHash(slideNumber) + ' .next:not(.active)'),
+			node;
 
-		if (null !== node) {
+		if (0 !== nextNodes.length) {
+			node = nextNodes[0];
 			node.classList.add('active');
-			return activeNodes.length + 1;
+			return nextNodes.length - 1;
 		} else {
 			return -1;
 		}

themes/ribbon/styles/style.css

@@ -394,10 +394,10 @@ BODY {
 				}
 
 /* Inner Navigation */
-.full .inner > * {
+.full .next {
 	opacity:0;
 	}
-.full .inner > .active {
+.full .next.active {
 	opacity:1;
 	-webkit-transition:opacity 0.5s linear;
 	-moz-transition:opacity 0.5s linear;