 class WizardStore extends Store
 
 class WizardActions extends Actions
-    get_store: =>
-        @redux.getStore(@name)
     get: (key) =>
-        @get_store().get(key)
+        @redux.getStore(@name).get(key)
     set: (update) =>
         @setState(update)
     show: (lang='sage') =>
-        @set(show: true, lang: lang)
-    hide: () =>
+        @set
+            show: true
+            lang: lang
+    reset: ->
+        @set
+            cat0: null
+            cat1: null
+            cat2: null
+            catlist0 : []
+            catlist1 : []
+            catlist2 : []
+    hide: () ->
         @set(show: false)
+    init: (lang='sage') =>
+        @reset()
+        @show(lang=lang)
+        @load_data()
+    init_data: (data) =>
+        @set(data: data)
+        nav_entries = []
+        for key in _.keys(data)
+            entry = switch key
+                        when 'gap'
+                            ['gap', 'GAP']
+                        else
+                            [key, key[0].toUpperCase() + key[1..]]
+            if _.keys(data[key]).length > 0
+                nav_entries.push(entry)
+        @set(nav_entries: nav_entries)
+        @select_lang(@get('lang'))
     insert: (cb) =>
+        # this is the essential task of the wizard:
+        # call the callback with the selected code snippet
         cb
             code  : 'code'
             lang  : @get('lang')
+            title : 'title'
             descr : 'description'
     load_data: () =>
-        if not data?
+        if not DATA?
             require.ensure [], =>
-                data = require('wizard/wizard.json')
-                @set(data: data)
-                nav_entries = []
-                for key in _.keys(data)
-                    entry = switch key
-                                when 'gap'
-                                    ['gap', 'GAP']
-                                else
-                                    [key, key[0].toUpperCase() + key[1..]]
-                    nav_entries.push(entry)
-                @set(nav_entries: nav_entries)
+                # DATA is a global variable!
+                DATA = require('wizard/wizard.json')
+                @init_data(DATA)
         else
-            @set(data: data)
+            @init_data(DATA)
+    select_lang: (lang) =>
+        @reset()
+        @set
+            lang     : lang
+            catlist0 : @get('data').get(lang).keySeq().toArray()
+    set_selected_category: (level, selected, idx) =>
+        console.log 'category_selection', level, selected, idx
+        lang = @get('data').get(@get('lang'))
+        switch level
+            when 0, 1
+                @set(code: '', descr: '', cat2 : null)
+        switch level
+            when 0
+                catlist1 = lang.get(selected).keySeq().toArray()
+                @set
+                    cat0     : selected
+                    cat1     : null
+                    cat2     : null
+                    catlist1 : catlist1
+                    catlist2 : []
+                if catlist1.length == 1
+                    @set_selected_category(1, catlist1[0], 0)
+            when 1
+                cat0     = @get('cat0')
+                catlist2 = lang.getIn([cat0, selected]).map((el) -> el.get(0)).toArray()
+                @set
+                    cat1     : selected
+                    cat2     : null
+                    catlist2 : catlist2
+                if catlist2.length == 1
+                    @set_selected_category(2, catlist2[0], 0)
+            when 2
+                cat0 = @get('cat0')
+                cat1 = @get('cat1')
+                doc  = lang.getIn([cat0, cat1, idx])
+                @set
+                    cat2  : idx
+                    code  : doc.getIn([1, 0])
+                    descr : doc.getIn([1, 1])
 
 WizardHeader = rclass
     displayName : 'WizardHeader'

    propTypes:
        actions  : rtypes.object
        data     : rtypes.object
        cat0     : rtypes.number
        cat1     : rtypes.number
        lang     : rtypes.string.isRequired
    category_selection: (level, idx) ->
        console.log 'category_selection', level, idx
    category_list: (level) ->
        items = []
        for i in [1..20]
            active = props["cat#{level}"] == i
            do (i, active) ->
                items.push <ListGroupItem key={i} active={active}>entry {i}</ListGroupItem>

        <ListGroup>
            {items}
        </ListGroup>
    doc_list: ->
        <ListGroup>
            <ListGroupItem href="#" active>A 1</ListGroupItem>
            <ListGroupItem href="#">A 2</ListGroupItem>
            <ListGroupItem href="#" disabled>A 3</ListGroupItem>
        </ListGroup>
    render : ->
        if @props.data?
            <Modal.Body className='modal-body'>
                <Row>
                    <Col sm={3}>{@category_list(0)}</Col>
                    <Col sm={3}>{@category_list(1)}</Col>
                    <Col sm={6}>{@doc_list()}</Col>
                </Row>
                <Row>
                    <Col sm={6}><pre ref='code' className='code'></pre></Col>
                    <Col sm={6}><div ref='descr' className='smc-wizard-descr'></div></Col>
                </Row>
            </Modal.Body>
        else


# the json from the server, where the entries for the documents are
# double-nested objects (two hiearchies of categories) mapping to title/code/description documents
DATA = null

# react wizard
{React, ReactDOM, redux, Redux, Actions, Store, rtypes, rclass} = require('./smc-react')
