Ox.load('UI', {debug: true}, function() {

    var $box = Ox.Element()
        .css({width: '512px', height: '512px', margin: '8px'})
        .appendTo(Ox.UI.$body);

    /*
    $container.append(
        Ox.Input({
            height: 64,
            style: 'square',
            type: 'textarea',
            width: 256
        })
    );
    $container.append($('<br>'))
    */

    var data = {
        country: ['France'],
        director: ['Jean-Luc Godard'],
        language: ['French', 'English'],
        runtime: '90 min',
        title: 'Deux ou trois choses que je sais d\'elle',
        year: '1967'
    };

    Ox.Editable({
            value: data.title
        })
        .css({
            height: '16px',
            fontWeight: 'bold',
            fontSize: '13px'
        })
        .appendTo($box);

    Ox.Editable({
            format: function(value) {
                return value ? value.split(', ').map(function(value) {
                    return '<a href="/?find=' + value + '">' + value + '</a>'
                }).join(', ') : 'Unknown Director'
            },
            value: data.director.join(', ')
        })
        .css({
            height: '16px',
            fontWeight: 'bold',
            fontSize: '13px'
        })
        .appendTo($box);

    var $div = $('<div>').appendTo($box.$element);

    ['country', 'year', 'language', 'runtime'].forEach(function(key, i) {
        var $div_ = $('<div>')
            .css({float: 'left', margin: '1px 0 0 1px'})
            .append(
                $('<div>')
                    .css({float: 'left', fontWeight: 'bold'})
                    .html((i ? '; ' : '') + Ox.toTitleCase(key) + ':&nbsp;')
            )
            .appendTo($div);
        Ox.Editable({
                format: function(value) {
                    return (value ? (
                        Ox.isArray(data[key]) ? value.split(', ').map(function(value) {
                            return '<a href="/?find=' + value + '">' + value + '</a>'
                        }).join(', ') : value
                    ) : 'unknown');// + (i == 3 ? '' : ';');
                },
                value: Ox.isArray(data[key]) ? data[key].join(', ') : data[key]
            })
            .css({
                float: 'left'
            })
            .appendTo($div_);
    });


    $div = $('<div>').css({clear: 'both', marginTop: '16px', textAlign: 'justify'}).appendTo($box.$element);
    Ox.Editable({
            format: function(value) {
                return '<span style="font-weight: bold">Keywords:</span> '
                    + value.split(', ').map(function(value) {
                        return '<a href="/?find=' + value + '">' + value + '</a>'
                    }).join(', ')
            },
            type: 'textarea',
            value: 'Sex, Crime, Car, Spoiler in Keywords, Genre in Keywords, Director Cameo, One Or More Meta Keywords',
            width: 512
        })
        .css({
        })
        .appendTo($div);

    var $bar = Ox.Bar({
            size: 16
        })
        .css({
            width: '256px',
            marginTop: '4px'
        })
        .appendTo($box.$element);
    var $addButton = Ox.Button({
            style: 'symbol',
            title: 'add',
            tooltip: 'Add Keyword',
            type: 'image'
        })
        .css({
            float: 'right'
        })
        .bindEvent({
            click: function() {
                //setTimeout(function() {
                    values = Ox.map(values, function(value) {
                        return value || null;
                    });
                    values.push('');
                    renderEditables();
                    Ox.last($editables).triggerEvent('doubleclick');
                //}, 25);
            }
        })
        .appendTo($bar);
    var $content = Ox.Element({
            tooltip: 'Doubleclick to add keyword'
        })
        .addClass('content')
        .css({
            display: 'table-cell',
            width: '246px',
            padding: '4px',
            border: '1px solid rgb(192, 192, 192)',
            marginTop: '8px'
        })
        .bindEvent({
            doubleclick: function(e) {
                $(e.target).is('.content') && $addButton.trigger('click');
            }
        })
        .appendTo($box.$element);
    var $editables = [],
        values = [
            'Sex', 'Crime', 'Car', 'Spoiler in Keywords',
            'Genre in Keywords', 'Director Cameo',
            'One Or More Meta Keywords'
        ];
    renderEditables();
    function renderEditables() {
        $content.empty();
        Ox.print('VALUES:', values)
        values.forEach(function(value, i) {
            i && $('<div>')
                .css({float: 'left'})
                .html(',&nbsp;')
                .appendTo($content);
            $editables[i] = Ox.Editable({
                    format: function(value) {
                        return value
                            ? value //'<a href="/?find=' + value + '">' + value + '</a>'
                            : '&nbsp;';
                    },
                    tooltip: 'Click to select, doubleclick to edit',
                    value: value
                })
                .css({float: 'left'})
                //.data({position: i})
                .bindEvent({
                    anyclick: function() {
                        $('.selected').removeClass('selected');
                        $editables[i].addClass('selected');
                    },
                    cancel: function(data) {
                        submit(i, data.value);
                    },
                    submit: function(data) {
                        submit(i, data.value);
                    }
                })
                .appendTo($content);
        });
    }
    function submit(i, value) {
        Ox.print('submit:', value)
        if (value === '') {
            values.splice(i, 1);
        } else {
            Array.prototype.splice.apply(values, Ox.merge(
                [i, 1],
                value.split(',').map(function(v) {
                    return v.trim();
                })
            ));
        }
        renderEditables();
    }

});