[Dynamically generate list items from test data structure. Key handler accesses global data by tabindex attribute of selected list element (TODO: use closure instead)
Betty Diegel <bdiegel@usa.net>**20121124225217
 Ignore-this: 3ec2a4a2b76fa0cb748825f928838868
] hunk ./client/dist/index.html 8
+    <script src="underscore-min.js"></script>
hunk ./client/dist/index.html 10
+    <script src="../dev/data.js"></script>
hunk ./client/dist/index.html 27
-<div id="nav-container">
- 
-<ul id="nav-shows">
-    <li class="nav-list-item" tabindex="0">Item 1</li>
-    <li class="nav-list-item" tabindex="1">Item 1</li>
-    <li class="nav-list-item" tabindex="2">Item 1</li>
-    <li class="nav-list-item" tabindex="3">Item 1</li>
-</ul>
-
-<ul id="nav-episodes">
-    <li class="ui-widget-content" tabindex="0">Item 1</li>
-    <li class="ui-widget-content" tabindex="1">Item 2</li>
-    <li class="ui-widget-content" tabindex="2">Item 3</li>
-    <li class="ui-widget-content" tabindex="3">Item 4</li>
-    <li class="ui-widget-content" tabindex="4">Item 5</li>
-    <li class="ui-widget-content" tabindex="5">Item 6</li>
-    <li class="ui-widget-content" tabindex="6">Item 7</li>
-    <li class="ui-widget-content" tabindex="7">Item 8</li>
-    <li class="ui-widget-content" tabindex="8">Item 9</li>
-    <li class="ui-widget-content" tabindex="9">Item 10</li>
-    <li class="ui-widget-content" tabindex="10">Item 11</li>
-    <li class="ui-widget-content" tabindex="11">Item 12</li>
-</ul>
-
-</div>
+   <div id="nav-container">
+      <ul id="nav-shows"></ul>
+      <ul id="nav-episodes"></ul>
+   </div>
hunk ./client/src/keys.coffee 2
-
+   createNavShows data
+###
hunk ./client/src/keys.coffee 57
+###
hunk ./client/src/keys.coffee 59
+
+createNavShows = (alldata) ->
+   ul = $ '#nav-shows'
+   ul.append createShowLi showdata for showdata in alldata
+   $( "#nav-shows li" ).attr 'tabindex', (index, attr) -> index
+   $( "#nav-shows li").bind showHandler
+
+
+createShowLi = (showdata) ->
+   "<li>#{showdata.title}</li>"
+
+
+createNavEpisodes = (episodes) ->
+   #$( '#nav-episodes li' ).remove()
+   ul = $ '#nav-episodes'
+   ul.empty()
+   ul.append createEpisodeLi epdata for epdata in episodes
+
+ 
+createEpisodeLi = (epdata) ->
+   "<li>#{epdata.title}</li>"
+
+
+showHandler =  {
+   keydown: (e) ->
+      key = e.keyCode
+      target = $ e.currentTarget
+    
+      switch key
+         when 38 # arrow up
+            target.prev().focus()
+            break
+         when 39 # arrow right 
+            # TODO: update episodes
+            break
+         when 40 # arrow down
+            target.next().focus()
+            break
+    
+   focusin: (e) ->
+      ($ e.currentTarget).addClass "ui-selected"
+      showdata =  getShowData ($ e.currentTarget).attr( 'tabindex' )
+      console.log "showdata=" + JSON.stringify showdata
+      createNavEpisodes showdata.episodes
+
+    
+   focusout: (e) ->
+      ($ e.currentTarget).removeClass "ui-selected"
+
+}
+
+
+getShowData = (index) ->
+   data[index]