<html>
    <head>
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript" src="../js/jquery-ui.js"></script>
        <script type="text/javascript" src="../js/handlebars.js"></script>
        <script type="text/javascript" src="../js/ember.js"></script>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
        <title>File Chooser</title>
        <style>

            body { overflow: hidden; margin: 0; }

            .window {
                    background-color: #a8a8a8;
                    background-image: url(../images/ui-bg.png);
                    background-size: 100% 100%;
                    border: 3px solid #fff;
                    margin: 0;
                    position: relative;
                    margin-top: 28px;
                }

            .tiny-text { font-size: 10px; font-family: sans-serif; font-weight: bold; -webkit-user-select: none;
                text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black }

            #handles { background-color: #fff; padding: 5px 10px; font-family: sans-serif; -webkit-user-select: none;
                font-size: 10px; position: absolute; top: -28px; height: 18px; line-height: 18px; }

            h2.tab-title { margin: 0; font-size: 9px; font-weight: bold; letter-spacing: 0.25em; text-transform: uppercase;
                color: #999; float: left; }
            .close_handle { width: 12px; height: 12px; margin: 2px 0 0 6px; float: right;
                background: url(../images/ui-close.png); }
                .close_handle:hover { background-position: 0 -12px; }

            .folder {
                list-style: none;
            }
            .file {
                margin-left: -25px;
            }

            .viewer {
                display: block;
                height: 380px;
                width: 280px;
                -webkit-user-select: none;
                background-color: white;
                margin: 5px;
                overflow: scroll;
            }

            .selected_file {
                width: 280;
                margin: 5px;
            }

        </style>
    </head>
    <body>

        <div id="inventory" class="window">

        <script data-template-name="folder-template" type="text/x-handlebars">
            {{#view App.FileView contentBinding="view.folder"}}
                <span {{bindAttr class="view.content.isCollapsed:ui-icon-folder-collapsed:ui-icon-folder-open :ui-icon"}} style="display:inline-block"></span>
                <span>{{view.content.name}}</span>
            {{/view}}
            {{#if view.folder.showChildren}}
                <ul class="folder">
                    {{#each file in view.folder.files}}
                        <li class="file">
                        {{#if file.isFolder}}
                            {{view App.FolderView folderBinding="file"}}
                        {{else}}
                            {{#view App.FileView contentBinding="file"}}
                                <span class="ui-icon ui-icon-document" style="display:inline-block"></span>
                                <span>{{file.name}}</span>
                            {{/view}}
                        {{/if}}
                        </li>
                    {{/each}}
                </ul>
            {{/if}}
        </script>
        <script type="text/x-handlebars" data-template-name="root-template">
            <div id="viewer" class="viewer">
                {{view App.FolderView folderBinding="App.root"}}
            </div>
            {{view Ember.TextField class="selected_file" valueBinding="App.selectedFile.path"}}
            <button {{bindAttr disabled="App.selectedFile.isInvalid"}} onclick="Crea.invoke('confirm', App.selectedFile.path);">Confirm</button>
            <button onclick="Crea.invoke('cancel');">Cancel</button>
        </script>
        <div id="handles" onmousedown="Crea.startDrag();">
            <h2 class="tab-title">File Chooser</h2>
        </div>
        <div id="content">
        </div>

        <script type="text/javascript">
            App = Ember.Application.create();

            $(document).ready(function() {
                App.FolderView = Ember.View.extend({
                    templateName: 'folder-template',
                    folder: null
                });

                App.File = Ember.Object.extend({
                    name: '',
                    path: '',
                    isFolder: false,
                    files: null,
                    isCollapsed: true,
                    init: function() {
                        this.files = Ember.ArrayController.create({content: []});
                    },
                    showChildren: function() {
                        return this.isFolder && !this.isCollapsed;
                    }.property('isFolder', 'isCollapsed')
                });

                App.FileView = Ember.View.extend({
                    content: null,
                    click: function() {
                        if (this.content.isFolder) {
                            this.content.set("isCollapsed", !this.content.get('isCollapsed'))
                        }
                        App.selectedFile.set('path', this.content.path);
                    }
                });

                App.folders = {};
                App.fileTypes = [];

                App.RootView = Ember.View.extend({
                    templateName: 'root-template'
                });
                var view = App.RootView.create();
                view.appendTo('#content');

                App.selectedFile = Ember.Object.create({
                    path: "",
                    isInvalid: function() {
                        for (var i = 0; i < App.fileTypes.length; ++i) {
                            var extension = App.fileTypes[i];
                            if (this.path.indexOf(extension, this.path.length - extension.length) !== -1) {
                                return false;
                            }
                        }
                        return true;
                    }.property('path')
                });

                populate();
            });

            Crea.resize(300,500); //TODO: not dynamic based on item count
        </script>
        </div>
    </body>
</html>