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

    var $box = Ox.Element()
        .css({width: '512px', height: '512px', margin: '8px'})
        .bind({
            click: function(e) {
                if ($(e.target).is('a')) {
                    return false;
                }
            }
        })
        .bindEvent({
            singleclick: function(e) {
                var $target = $(e.target);
                if ($target.is('a')) {
                    Ox.print('href=' + $target.attr('href'));
                }
            }
        })
        .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: 5400,
        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'})
                    .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';
                },
                value: Ox.isArray(data[key]) ? data[key].join(', ') : data[key]
            })
            .css({
                float: 'left'
            })
            .appendTo($div_);
    });

    $div = $('<div>')
        .css({clear: 'both'})
        .appendTo($box.$element);

    Ox.Editable({
            format: function(value) {
                return value ? Ox.parseHTML(value) : 'No description'
            },
            type: 'textarea',
            value: 'foo bar\nfoo bar'
        })
        .appendTo($div);

});