pandora.ui.manageKeywordsDialog = function() {

    function getOntology(callback) {
        function parseNodes(parents, nodes) {
            parsed = []
            Object.keys(nodes).forEach(function(name) {
                let fullName = parents ? parents + ': ' + name : name
                let children = parseNodes(fullName, nodes[name])
                if (children.length == 0) {
                    strings.push(fullName)
                }
                parsed.push({
                    'name': fullName,
                    'children': children
                })
            })
            return parsed
        }
        let strings = []
        let paths = {}
        Ox.get('/static/ontology/ontology.json', function(data) {
            let ontology = JSON.parse(data)
            parseNodes('', ontology)
            strings.forEach(function(string) {
                let parts = string.split(': ')
                if (parts.length >= 2) {
                    parts.pop()
                    paths[parts.pop()] = parts.join(': ')
                }
            })
            callback(paths)
        })
    }

    function getKeywords(callback) {
        let keywords = {}
        pandora.api.find({
            query: {conditions: [
                {key: 'id', operator: '!=', value: 'BA'} // "Blue"
            ], operator: ''}
        }, function(result) {
            let length = result.data.items
            let count = 0
            pandora.api.find({
                keys: ['id'],
                query: {conditions: [], operator: ''},
                range: [0, 1000000],
                sort: [{key: 'id', operator: '+'}]
            }, function(result) {
                result.data.items.forEach(function(item) {
                    pandora.api.get({
                        id: item.id,
                        keys: ['layers']
                    }, function(result) {
                        result.data.layers.keywords.forEach(function(keyword) {
                            let value = keyword.value
                            if (!keywords[value]) {
                                keywords[value] = {
                                    created: keyword.created,
                                    count: 1
                                }
                            } else {
                                if (keyword.created < keywords[value].created) {
                                    keywords[value].created = keyword.created
                                }
                                keywords[value].count += 1
                            }
                        })
                        if (++count == length) {
                            let items = Object.keys(keywords).map(function(value) {
                                return Object.assign(keywords[value], {
                                    keyword: value
                                })
                            })
                            callback(items)
                        }
                    })
                })
            })
        })
    }

    let $loadingScreen = Ox.LoadingScreen()
    let $dialog = Ox.Dialog({
        buttons: [
            Ox.Button({
                title: Ox._('Close'),
                width: 64
            }).bindEvent({
                click: function() {
                    $dialog.close()
                }
            })
        ],
        closeButton: true,
        content: $loadingScreen,
        height: window.innerHeight * 0.9 - 48,
        title: Ox._('Keywords'),
        width: 968
    }).bindEvent({
        open: function() {
            $loadingScreen.start()
            getOntology(function(paths) {
                getKeywords(function(keywords) {
                    keywords.forEach(function(keyword) {
                        let parent_ = ''
                        if (keyword.keyword.includes(': ')) {
                            parent_ = keyword.keyword.split(': ')[0]
                        }
                        keyword.ontology = (paths[parent_] ? paths[parent_] : 'unknown')
                            + ': ' + keyword.keyword
                    })
                    let $list = Ox.TableList({
                        columns: [
                            {
                                format: function(value) {
                                    return '<a href="/clip/modified/keywords=='
                                        + value.replace(/ /g, '_')
                                        + '" target="_blank">' + value + '</a>'
                                },
                                id: 'keyword',
                                operator: '+',
                                title: Ox._('Keyword'),
                                visible: true,
                                width: 256
                            },
                            {
                                id: 'ontology',
                                operator: '+',
                                title: Ox._('Ontology'),
                                visible: true,
                                width: 512
                            },
                            {
                                format: function(value) {
                                    return value.replace('T', ' ').replace('Z', '')
                                },
                                id: 'created',
                                operator: '-',
                                title: Ox._('Created'),
                                visible: true,
                                width: 144
                            },
                            {
                                align: 'right',
                                format: Ox.formatNumber,
                                id: 'count',
                                operator: '-',
                                title: Ox._('Count'),
                                visible: true,
                                width: 48
                            }
                        ],
                        columnsMovable: true,
                        columnsResizable: true,
                        columnsVisible: true,
                        items: keywords,
                        scrollbarVisible: true,
                        sort: [{key: 'created', operator: '-'}]
                    }).bindEvent({
                        init: function(data) {
                            $status.html(Ox.formatNumber(data.items) + ' ' + Ox._('keywords'))
                        }
                    })
                    $loadingScreen.stop()
                    $dialog.options({
                        content: $list
                    })
                })
            })
        }
    })
    let $status = Ox.Element().css({
        fontSize: '9px',
        height: '10px',
        marginLeft: '96px',
        position: 'absolute',
        textAlign: 'center',
        top: '6px',
        width: '776px'
    }).appendTo($dialog.find('.OxButtonsbar'))

    return $dialog

}