Ox.load('UI', function() {
    var current,
        columns = [
            {
                id: 'state',
                title: '+',
                visible: true,
                width: 16,
                operator: '+',
                format: function(value, data) {
                    return $('<img>')
                        .attr({
                            src: Ox.UI.getImageURL('symbol' + {
                                'available': 'Play',
                                'playing': 'Pause',
                                'downloading': 'Sync',
                                '': 'Down',
                            }[value])
                        })
                        .css({
                            width: '10px',
                            height: '10px',
                            padding: '3px',
                        });
                }
            },
            {
                id: 'id',
                title: 'ID',
                visible: true,
                width: 48,
                operator: '+',

            },
            {
                id: 'title',
                title: 'Title',
                visible: true,
                width: 512,
                operator: '+',
            },
            {
                id: 'size',
                title: 'Size',
                visible: true,
                width: 72,
                operator: '+',
                format: function(value) {
                    return Ox.formatValue(value, 'b');
                }
            },
            {
                id: 'extension',
                title: 'Extension',
                visible: true,
                width: 48,
                operator: '+',
            },
            {
                id: 'info',
                title: 'Info',
                visible: true,
                width: 200,
                operator: '+',
                format: function(value) {
                    return value || '';
                }
            },
    ];

    window.app = Ox.App({
        name: 'lsd',
        url: '/api/'
    }).bindEvent({
        load: function(data) {
            window.app.local = Ox.API({
                url: 'http://127.0.0.1:15550/api/'
            }, function() {
                if (!data.user) {
                    signupDialog();
                    return;
                }
                app._seed = setInterval(function() {
                    app.local.seedRequests({});
                }, 60000);
                app.local.config({});
                app.$player = $('<audio>');
                app.play = function(id) {
                    var url = 'http://127.0.0.1:15550/get/' + id;
                    app.$player.attr('src', url);
                    app.$player[0].play();
                    current = id;
                }
                app.stop = function() {
                    app.$player[0].pause();
                }
                app.api.find({}, function(result) {
                    app.items = result.data.items;
                    app.$list = Ox.TableList({
                        columns: columns,
                        columnsMovable: true,
                        columnsVisible: true,
                        items: result.data.items,
                        max: 1,
                        pageLength: Math.min(100, result.data.items.length),
                        //query: getQuery(),
                        scrollbarVisible: true,
                        //sortable: true,
                        sort: ['+id'],
                        unique: 'id',
                    }).bindEvent({
                        open: function(data) {
                            var id = data.ids[0],
                                item = app.$list.value(id);
                            if (item.state == 'available') {
                                app.play(id);
                            } else {
                                app.local.addRequests({ids: [id]}, function() {
                                    app.$list.value(id, 'state', 'downloading');
                                    var interval = setInterval(function () {
                                        app.local.info({id: id}, function(result) {
                                            if (Ox.isEmpty(result.data)) {
                                                clearInterval(interval);
                                                app.$list.value(id, 'state', 'available');
                                                app.$list.value(id, 'info', '');
                                            } else {
                                                var percent = Math.round(100
                                                        * result.data.total_done
                                                        / result.data.total_wanted) || 0;
                                                app.$list.value(id, 'info', '' + percent + ' % downloaded');
                                            }
                                        });
                                    }, 1000);
                                });
                            }
                        },
                    }).appendTo(Ox.$body);
                });
            });
        }
    });

    function signupDialog() {
        var $form,
            $dialog = Ox.Dialog({
            buttons: [
                Ox.Button({
                    title: Ox._('Sign Up')
                })
                .bindEvent({
                    click: function() {
                        var values = $form.values();
                        app.api.signup({
                            username: values.username,
                            password: values.password,
                            email: values.username
                        }, function(result) {
                            if (result.status.code == 200) {
                                app.local.config({
                                    username: values.username,
                                    password: values.password,
                                    url: document.location.origin + '/api/',
                                    extensions: ['ogg', 'mp3']
                                }, function() {
                                    document.location.reload();
                                });
                            } else {
                                signupDialog();
                            }
                        })
                        $dialog.close();
                    }
                })
            ],
            closeButton: true,
            content: Ox.Element()
            .append(
                $form = Ox.Form({
                    items: [
                        Ox.Input({
                            id: 'username',
                            label: Ox._('Username'),
                            labelWidth: 120,
                            width: 320
                        }),
                        Ox.Input({
                            autovalidate: /.+/,
                            id: 'password',
                            label: Ox._('Password'),
                            labelWidth: 120,
                            type: 'password',
                            width: 320
                        })
                    ]
                })
            ),
            height: 192,
            removeOnClose: true,
            title: 'Sign Up',
            width: 432
        }).open();
    }
});