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



    var $buttons = Ox.Bar({size: 24});

    var $img, $previewDialog, preview = false;
    var $list = Ox.IconList({
        item: function(data, sort, size) {
            var ratio = data.width / data.height;
            size = size || 128;
            return {
                height: ratio <= 1 ? size : size / ratio,
                id: data.id,
                info: data.width + ' x ' + data.height + ' px',
                title: Ox.toTitleCase(data.id),
                url: 'png/' + data.id + '.png',
                width: ratio >= 1 ? size : size * ratio
            };
        },
        items: [
            {
                id: 'earth',
                width: 1024,
                height: 1024
            },
            {
                id: 'north',
                width: 1024,
                height: 512
            },
            {
                id: 'west',
                width: 512,
                height: 1024
            }
        ],
        orientation: 'horizontal',
        size: 128,
        sort: [{key: 'id', operator: '+'}],
        unique: 'id'
    }).bindEvent({
        closepreview: function() {
            $previewDialog.close();
            preview = false;
        },
        openpreview: function(event) {
            var data = Ox.getObjectById($list.options('items'), event.ids[0]),
                ratio = data.width / data.height,
                windowWidth = window.innerWidth * 0.8,
                windowHeight = window.innerHeight * 0.8,
                windowRatio = windowWidth / windowHeight,
                width = Math.round(ratio > windowRatio ? windowWidth : windowHeight * ratio),
                height = Math.round(ratio < windowRatio ? windowHeight : windowWidth / ratio);
            Ox.print('d/w/h', data, width, height)
            if (!preview) {
                if (!$previewDialog) {
                    $previewDialog = Ox.Dialog({
                            closeButton: true,
                            content: $img = $('<img>')
                                .attr({src: 'png/' + data.id + '.png'})
                                .css({width: width + 'px', height: height + 'px'}),
                            fixedRatio: true,
                            focus: false,
                            height: height,
                            maximizeButton: true,
                            title: Ox.toTitleCase(data.id),
                            width: width
                        })
                        .bindEvent({
                            close: function() {
                                $list.closePreview();
                                preview = false;
                            },
                            resize: function(event) {
                                $img.css({
                                    width: event.width + 'px',
                                    height: event.height + 'px'
                                });
                            }
                        }).open();
                } else {
                    $previewDialog.options({
                        content: $img = $('<img>')
                            .attr({src: 'png/' + data.id + '.png'})
                            .css({width: width + 'px', height: height + 'px'}),
                        height: height,
                        title: Ox.toTitleCase(data.id),
                        width: width
                    }).open();
                }
                preview = true;
            } else {
                $previewDialog.options({
                    content: $img = $('<img>')
                        .attr({src: 'png/' + data.id + '.png'})
                        .css({width: width + 'px', height: height + 'px'}),
                    title: Ox.toTitleCase(data.id),
                }).setSize(width, height);
            }
        }
    });

    Ox.SplitPanel({
        elements: [
            {
                element: $buttons,
                size: 24
            },
            {
                element: $('<div>').css({background: 'rgb(128, 128, 128)'})
            },
            {
                element: $list,
                size: 208
            }
        ],
        orientation: 'vertical'
    }).appendTo(Ox.UI.$body);

    Ox.UI.$body
        .css({
            padding: '4px',
            background: 'rgb(240, 240, 240)'
        });

    var $dialog = Ox.Dialog({
        buttons: [
            Ox.Button({
                title: 'Cancel'
            }).bindEvent({
                click: function() {
                    $dialog.close();
                }
            }),
            Ox.Button({
                title: 'Close'
            }).bindEvent({
                click: function() {
                    $dialog.close();
                }
            })
        ],
        content: Ox.SplitPanel({
            elements: [
                {
                    collapsible: true,
                    element: Ox.Element({id: 'foo'}).css({background: 'rgb(240, 240, 240)'}),
                    resizable: true,
                    resize: [128, 256, 384],
                    size: 256
                },
                {
                    element: Ox.Element({id: 'bar'}).css({background: 'rgb(240, 240, 240)'}),
                }
            ],
            orientation: 'horizontal'
        }),
        title: Ox.repeat('Foo bar. ', 10)
    });

    var $dialogA = Ox.Dialog({
        buttons: [
            Ox.Button({title: 'Foo'}),
            Ox.Button({title: 'Bar'}),
            {},
            Ox.Button({title: 'Baz'}),
            Ox.Button({title: 'Close'}).bindEvent({
                click: function() {
                    $dialogA.close();
                }
            })
        ],
        content: $('<div>')
            .css({padding: '16px'})
            .html(Ox.repeat('Foo bar. ', 100)),
        title: Ox.repeat('Foo bar. ', 10)
    }).bindEvent({
        key_escape: function() {
            $dialogA.close();
        }
    });

    var $img = $('<img>')
        .attr({src: 'png/earth.png'})
        .css({width: '256px', height: '256px'});
    var $dialogB = Ox.Dialog({
        closeButton: true,
        content: $img,
        fixedRatio: true,
        focus: false,
        height: 256,
        maximizeButton: true,
        width: 256,
        title: Ox.repeat('Foo bar. ', 10)
    }).bindEvent({
        resize: function(event) {
            $img.css({
                width: event.width + 'px',
                height: event.height + 'px'
            });
        }
    });

    var $dialogC = Ox.Dialog({
        closeButton: true,
        content: Ox.SplitPanel({
            elements: [
                {
                    element: Ox.SplitPanel({
                        elements: [
                            {
                                collapsible: true,
                                element: Ox.Element({id: 'foo'}).css({background: 'rgb(240, 240, 240)'}),
                                resizable: true,
                                resize: [128, 256, 384],
                                size: 256
                            },
                            {
                                element: Ox.Element({id: 'bar'}).css({background: 'rgb(240, 240, 240)'}),
                            }
                        ],
                        orientation: 'horizontal'
                    })
                },
                {
                    element: Ox.Bar({
                        size: 16}
                    ).css({
                        borderBottomLeftRadius: '8px',
                        borderBottomRightRadius: '8px'
                    }),
                    size: 16
                }
            ],
            orientation: 'vertical'
        }),
        height: Math.round((window.innerHeight - 24) * 0.9),
        maximizeButton: true,
        title: Ox.repeat('Foo bar. ', 10),
        width: Math.round(window.innerWidth * 0.9)
    });

    Ox.Button({
        title: 'Dialog'
    }).css({
        margin: '4px'
    }).bindEvent({
        click: $dialog.open
    }).appendTo($buttons);

    Ox.Button({
        title: 'Dialog A'
    }).css({
        margin: '4px'
    }).bindEvent({
        click: $dialogA.open
    }).appendTo($buttons);

    Ox.Button({
        title: 'Dialog B'
    }).css({
        margin: '4px'
    }).bindEvent({
        click: $dialogB.open
    }).appendTo($buttons);

    Ox.Button({
        title: 'Dialog C'
    }).css({
        margin: '4px'
    }).bindEvent({
        click: $dialogC.open
    }).appendTo($buttons);

});