Ox.load('UI', function() {

    var files,

        $menu = Ox.MainMenu({
                menus: [
                    {
                        id: 'file', title: 'File', items: [
                            {id: 'mount', title: 'Mount Volume...', icon: Ox.UI.getImageURL('symbolMount'), checked: true, disabled: true, keyboard: 'control m'},
                            {id: 'select', title: 'Select Files...', icon: Ox.UI.getImageURL('symbolVolume'), file: {maxFiles: -1, maxSize: -1, width: 96}, keyboard: 'control f'},
                            {id: 'unmount', title: 'Unmount Volume', icon: Ox.UI.getImageURL('symbolUnmount'), keyboard: 'control u'}
                        ]
                    }
                ]
            })
            .bindEvent({
                click: function(data) {
                    if (data.id == 'select') {
                        files = data.files;
                        openDialog();
                    }
                }
            }),

        $main = Ox.Element()
            .append(
                Ox.Label({
                    textAlign: 'center',
                    title: 'File Button',
                    width: 128
                })
                .css({
                    position: 'absolute',
                    left: '16px',
                    top: '16px'
                })
            )
            .append(
                Ox.FileButton({
                    maxFiles: 1,
                    title: 'Select File...',
                    width: 128
                })
                .css({
                    position: 'absolute',
                    left: '160px',
                    top: '16px'
                })
            )
            .append(
                Ox.Label({
                    textAlign: 'center',
                    title: 'File Input',
                    width: 128
                })
                .css({
                    position: 'absolute',
                    left: '16px',
                    top: '48px'
                })
            )
            .append(
                Ox.FileInput({
                    maxFiles: 1,
                    width: 256
                })
                .css({
                    position: 'absolute',
                    left: '160px',
                    top: '48px'
                })
            )
            .append(
                Ox.FileInput({
                    width: 256
                })
                .css({
                    position: 'absolute',
                    left: '160px',
                    top: '80px'
                })
            ),

        $panel = Ox.SplitPanel({
                elements: [
                    {
                        element: $menu,
                        size: 20
                    },
                    {
                        element: $main
                    }
                ],
                orientation: 'vertical'
            })
            .appendTo(Ox.$body);

    function openDialog() {

        var $content,

            $dialog = Ox.Dialog({
                buttons: [
                    Ox.Button({
                            id: 'cancel',
                            title: 'Cancel'
                        })
                        .bindEvent({
                            click: function() {
                                $dialog.close();
                            }
                        }),
                    Ox.Button({
                            id: 'upload',
                            title: 'Upload'
                        })
                        .bindEvent({
                            click: function() {
                                $dialog.close();
                            }
                        })
                ],
                content: $content = Ox.Element()
                    .css(getContentCSS())
                    .append(
                        Ox.FileInput({
                                value: files,
                                width: 256
                            })
                            .css({
                                position: 'absolute',
                                left: '16px',
                                top: '16px',
                                marginBottom: '16px'
                            })
                            .bindEvent({
                                change: function(data) {
                                    files = data.value;
                                    $content.css(getContentCSS())
                                }
                            })
                    ),
                keys: {enter: 'upload', escape: 'cancel'},
                title: 'Files',
                width: 288 + Ox.UI.SCROLLBAR_SIZE,
                height: 129
            })
            .open();

    }

    function getContentCSS() {
        return {height: 49 + files.length * 16 + 'px'}
    }

});