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: '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);

});