some changes to files view

source/Ox.UI/js/Form/Ox.Checkbox.js

@@ -107,6 +107,11 @@ Ox.Checkbox = function(options, self) {
         return that;
     }
 
+    // fixme: added for forms, duplicated, checked() shouldn't be neccessary
+    that.value = function() {
+        return self.options.checked;
+    }
+
     return that;
 
 };

source/Ox.UI/js/Video/Ox.FilesView.js

@@ -18,6 +18,8 @@ Ox.FilesView = function(options, self) {
             })
             .options(options || {});
 
+    self.selected = [];
+
     self.$toolbar = new Ox.Bar({
         size: 24
     });
@@ -152,10 +154,115 @@ Ox.FilesView = function(options, self) {
             select: selectFiles
         });
 
-    self.$instancesList = new Ox.Element()
+    self.$instancesList = Ox.Element()
         .html('No files selected');
 
-    that.$element = new Ox.SplitPanel({
+    self.$movieLabel = Ox.Label({
+            textAlign: 'center',
+            title: 'Move Selected Files to Another Movie',
+            width: 240
+        })
+        .css({margin: '8px'});
+
+    ['title', 'director', 'year', 'id'].forEach(function(key) {
+        self['$' + key + 'Input'] = Ox.Input({
+            clear: true,
+            id: key,
+            label: key == 'id' ? 'ID' : Ox.toTitleCase(key),
+            labelWidth: 64,
+            width: 240
+        })
+        .bindEvent({
+            change: function(data) {
+                var conditions;
+                if (data.value.length) {
+                    if (key == 'id') {
+                        conditions = [{key: 'id', value: data.value, operator: '='}]
+                    } else {
+                        conditions = Ox.map(['title', 'director', 'year'], function(key) {
+                            var value = self['$' + key + 'Input'].options('value')
+                            return value.length ? {key: key, value: value, operator: '='} : null;
+                        })
+                    }
+                    pandora.api.find({
+                        keys: ['title', 'director', 'year', 'id'],
+                        query: {
+                            conditions: conditions,
+                            operator: '&'
+                        },
+                        range: [0, 2]
+                    }, function(result) {
+                        var length = result.data.items.length;
+                        if (length == 0) {
+                            if (key != 'id') {
+                                self.$idInput.options({value: ''});
+                            }
+                        } else if (result.data.items.length == 1) {
+                            ['title', 'director', 'year', 'id'].forEach(function(key) {
+                                self['$' + key + 'Input'].options({
+                                    value: key == 'director'
+                                        ? result.data.items[0][key].join(', ')
+                                        : result.data.items[0][key]
+                                });
+                            });
+                        } else {
+                            self.$idInput.options({value: ''});
+                        }
+                    })
+                }
+            }
+        });
+    });
+
+    self.$checkbox = Ox.Checkbox({
+        checked: false,
+        id: 'go',
+        title: 'Go to this movie after moving files', // fixme: wrong, can be 'Go to video' etc
+        width: 240
+    });
+
+    self.$movieForm = Ox.Form({
+            items: [
+                self.$titleInput,
+                self.$directorInput,
+                self.$yearInput,
+                self.$idInput,
+                self.$checkbox
+            ],
+            width: 240
+        })
+        .css({margin: '8px'});
+
+    self.$clearButton = Ox.Button({
+            title: 'Clear',
+            width: 116
+        })
+        .css({margin: '0 4px 4px 8px'})
+        .bindEvent({
+            click: function() {
+                ['title', 'director', 'year', 'id'].forEach(function(key) {
+                    self['$' + key + 'Input'].options({value: ''})
+                });
+            }
+        });
+
+    self.$moveButton = Ox.Button({
+            disabled: true,
+            title: 'Move',
+            width: 116
+        })
+        .css({margin: '0 4px 4px 4px'});
+
+    self.$moviePanel = Ox.Element()
+        .append(self.$movieLabel)
+        .append(self.$movieForm)
+        .append(self.$clearButton)
+        .append(self.$moveButton);
+
+    that.$element = Ox.SplitPanel({
+            elements: [
+                {
+                    element: Ox.SplitPanel({
                         elements: [
                             {
                                 element: self.$toolbar,
@@ -170,14 +277,30 @@ Ox.FilesView = function(options, self) {
                             }
                         ],
                         orientation: 'vertical'
+                    })
+                },
+                {
+                    collapsible: true,
+                    element: self.$moviePanel,
+                    size: 256
+                }
+            ],
+            orientation: 'horizontal'
         });
 
     function openFiles(event, data) {
-        Ox.print('........', JSON.stringify(self.$filesList.value(data.ids[0], 'instances'))
+        Ox.print('........', JSON.stringify(self.$filesList.value(data.ids[0], 'instances')))
     }
 
-    function selectFiles(event, data) {
-        Ox.print('........', JSON.stringify(self.$filesList.value(data.ids[0], 'instances'))
+    function selectFiles(data) {
+        self.selected = data.ids;
+        updateForm();
+    }
+
+    function updateForm() {
+        self.$moveButton.options({
+            disabled: self.selected.length === 0
+        });
     }
 
     return that;