/*
This examples shows how to do file selection — usually for upload —
in Ox.UI.
*/
'use strict';

/*
Load the UI module.
*/
Ox.load('UI', function() {

    var $elements = [
            /*
            Ox.FileButton creates a simple button. It has the following options:
            <pre>
            disabled
                If true, the button is disabled
            image
                Symbol name (if type is 'image'),
                default is 'file' or 'files'
                (depending on maxFiles)
            maxFiles
                Maximum number of files,
                default is -1 (unlimited)
            maxSize
                Maximum total size in bytes,
                default is -1 (unlimited)
            title
                Button title (if type is 'text')
                and tooltip text
            type
                Type, either 'text' or 'image',
                default is 'text'
            width
                Width in px (if type is 'text')
            </pre>
            Ox.FileButton fires a `click` event (not on click, like Ox.Button,
            but once the user has selected one or more files) that we can bind
            to like this:
            <pre>
            $fileButton.bindEvent({
                click: function(data) {
                    Ox.print(data.files);
                }
            })
            </pre>
            We create two image buttons and two text buttons: one of each to
            select a single file, one for multiple files.
            */
            Ox.FileButton({
                maxFiles: 1,
                title: 'Select File...',
                type: 'image'
            }),
            Ox.FileButton({
                title: 'Select Files...',
                type: 'image'
            }),
            Ox.FileButton({
                maxFiles: 1,
                title: 'Select File...',
                width: 128
            }),
            Ox.FileButton({
                title: 'Select Files...',
                width: 128
            }),
            /*
            ...
            */
            Ox.FileInput({
                disabled: true,
                maxFiles: 1,
                maxSize: 1000000,
                width: 256
            }),
            Ox.FileInput({
                maxSize: 1000000,
                width: 256
            })
        ],
        /*
        A basic menu item looks like `{id: 'id', title: 'Title'}`. By adding a
        `file` property (which takes the same `maxFiles`, `maxSize` and `width`
        options as Ox.FileButton), ...
        */
        $menu = Ox.MainMenu({
                menus: [
                    {id: 'file', title: 'File', items: [
                        {id: 'file', title: 'Select File...', file: {
                            maxFiles: 1, width: 80
                        }},
                        {id: 'files', title: 'Select Files...', file: {
                            width: 80
                        }}
                    ]}
                ]
            })
            .bindEvent({
                click: function(data) {
                    showEvent(data);
                    openDialog(data);
                }
            }),
        $main = Ox.Element(),
        $list = Ox.TreeList({
            data: {},
            expanded: true,
            width: 256
        }),
        $innerPanel = Ox.SplitPanel({
            elements: [
                {element: $main},
                {element: $list, resizable: true, resize: [256], size: 256}
            ],
            orientation: 'horizontal'
        }),
        $outerPanel = Ox.SplitPanel({
            elements: [
                {element: $menu, size: 20},
                {element: $innerPanel}
            ],
            orientation: 'vertical'
        })
        .appendTo(Ox.$body);    

    $elements.forEach(function($element, i) {
        $element
            .css({top: 16 + 32 * i + 'px'})
            .bindEvent(
                $element.is('.OxFileButton') ? 'click' : 'change', showEvent
            )
            .appendTo($main);
    });    

    window.$elements = $elements;
    window.$menu = $menu;

    function openDialog(data) {
        var $button = Ox.Button({
                    id: 'close',
                    title: 'Close'
                })
                .bindEvent({
                    click: function() {
                        $dialog.close();
                    }
                }),
            $content = Ox.Element()
                .css(getContentCSS(data))
                .append(
                    Ox.FileInput({
                        maxFiles: data.id == 'file' ? 1 : -1,
                        value: data.files,
                        width: 256
                    })
                    .css({
                        position: 'absolute',
                        left: '16px',
                        top: '16px',
                        marginBottom: '16px'
                    })
                    .bindEvent({
                        change: function(data) {
                            showEvent(data);
                            $content.css(getContentCSS(data));
                        }
                    })
                ),
            $dialog = Ox.Dialog({
                    buttons: [$button],
                    content: $content,
                    height: 129,
                    keys: {escape: 'close'},
                    title: data.title.replace('...', ''),
                    width: 288 + (data.id == 'file' ? 0 : Ox.UI.SCROLLBAR_SIZE)
                })
                .open();
        function getContentCSS(data) {
            return {height: 49 + (data.files || data.value).length * 16 + 'px'};
        }
    }

    function showEvent(data) {
        var key = data.files ? 'files' : 'value';
        data[key] = data[key].map(function(file) {
            var object = {};
            Object.keys(file).forEach(function(key) {
                object[key] = file[key];
            });
            return object;
        });
        $list.options({data: data});
    }

});