         lang        : rtypes.string.isRequired
     langSelect: (key) ->
         #console.log 'language selected', key
-        @props.actions.set(lang:key)
+        @props.actions.select_lang(key)
     search: () ->
         console.log 'search:', @refs.search.getValue()
     render_nav : ->
-        if @props.nav_entries?
-            navs = []
-            for entry in @props.nav_entries
-                [key, name] = entry
-                navs.push(<NavItem key={key} eventKey={key} title={name}>{name}</NavItem>)
-            return navs
+        entries = @props.nav_entries
+        if entries?
+            <Nav bsStyle="pills" activeKey={@props.lang} ref='lang' onSelect={@langSelect}>
+                {entries.map (entry, idx) =>
+                        [key, name] = entry
+                        <NavItem key={key} eventKey={key} title={name}>{name}</NavItem>
+                }
+            </Nav>
         else
             return <Loading />
     render : ->
         <Row>
             <Col sm={3}><h2><Icon name='magic' /> Wizard</h2></Col>
             <Col sm={5}>
-                <Nav bsStyle="pills" activeKey={@props.lang} ref='lang' onSelect={@langSelect}>
-                    {@render_nav()}
-                </Nav>
+                {@render_nav()}
             </Col>
             <Col sm={3}>
                 <Input ref='search'

               <WizardHeader actions={@props.actions} lang={@props.lang} nav_entries={@props.nav_entries} />
            </Modal.Header>

            <WizardBody actions={@props.actions}
                        lang={@props.lang}
                        cat0={@props.cat0}
                        cat1={@props.cat1}
                        data={@props.data} />

            <Modal.Footer>
                <Button onClick={@props.actions.hide}>Cancel</Button>
                <Button onClick={=> @props.actions.insert(@props.cb)}>Insert Code</Button>
            </Modal.Footer>
        </Modal>

render = (name, lang, cb) ->
    if not redux.getActions(name)?
        actions = redux.createActions(name, WizardActions)
        store   = redux.createStore(name)
    W = RWizard(name)
    actions.show(lang=lang)
    <Redux redux={redux}>
        <W cb={cb} actions={actions}/>
    </Redux>

exports.render_wizard = (target, project_id, path, lang = 'sage', cb = null) ->
    # console.log 'render_wizard: ', project_id, path, lang, cb
    name = redux_name(project_id, path)
    ReactDOM.render(render(name, lang, cb), target)
    actions = redux.getActions(name)
    actions.load_data()
    return actions

# old wizard code

class WizardStore extends Store

class WizardActions extends Actions
    get: (key) =>
        @redux.getStore(@name).get(key)
    set: (update) =>
        @setState(update)
    show: (lang='sage') =>
        @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?
            require.ensure [], =>
                # DATA is a global variable!
                DATA = require('wizard/wizard.json')
                @init_data(DATA)
        else
            @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'
