From 35195b5c0edac0a2b278c319ccbd9bf6b833ef49 Mon Sep 17 00:00:00 2001
From: Erick Thompson <erick.thompson@gmail.com>
Date: Mon, 22 Oct 2012 14:58:51 -0700
Subject: [PATCH] Add displayName property to style object for sections. This
 is used to set the text that is displayed in the footer of the page.

To use, add displayName property to the style options. See the intro section in app.js. If no value is provided, it will use the name.
---
 index.html    | 2 +-
 js/app.js     | 2 +-
 js/section.js | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 263c145..4baf64f 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
         <div id="map">
             <hr/>
             <div data-bind="foreach: sections">
-                <a href="#" data-bind="text: name, click: $root.index.bind(null, $index()), css: { selected: $index() === $root.index() }"></a>
+                <a href="#" data-bind="text: displayName, click: $root.index.bind(null, $index()), css: { selected: $index() === $root.index() }"></a>
             </div>
         </div>
     </div>
diff --git a/js/app.js b/js/app.js
index 9afae89..abe5ce7 100644
--- a/js/app.js
+++ b/js/app.js
@@ -4,7 +4,7 @@
         var self = this;
 
         this.sections = ko.observableArray([
-            new Section("intro"),
+            new Section("intro",null, { forceLoad: true, displayName: 'Introduction' } ),
             new Section("points"),
             new Section("one", "sample"),
             new Section("two", "sample"),
diff --git a/js/section.js b/js/section.js
index c2a82bc..45ec8a0 100644
--- a/js/section.js
+++ b/js/section.js
@@ -3,6 +3,7 @@ define(["knockout"], function(ko) {
         var self = this;
         this.name = name;
         this.template = template || name;
+        this.displayName = typeof style === "undefined" ? name : style.displayName || name
         this.data = ko.observable();
         this.style = style;
         this.loaded = false;