From cae1875f4490ffe06e8078d8449a2d33d608baff Mon Sep 17 00:00:00 2001
From: j <0x006A@0x2620.org>
Date: Sun, 14 Jul 2013 14:56:41 +0000
Subject: [PATCH] pass sort and item updates

---
 source/Ox.UI/js/Video/ClipPanel.js      | 40 +++++++++++++++++++------
 source/Ox.UI/js/Video/VideoEditPanel.js |  6 +++-
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/source/Ox.UI/js/Video/ClipPanel.js b/source/Ox.UI/js/Video/ClipPanel.js
index 93635bdf..2977cbb2 100644
--- a/source/Ox.UI/js/Video/ClipPanel.js
+++ b/source/Ox.UI/js/Video/ClipPanel.js
@@ -19,7 +19,18 @@ Ox.ClipPanel = function(options, self) {
         .options(options || {})
         .update({
             clips: function() {
-                self.$list.options({items: self.options.clips});
+                self.$list.options({
+                    items: Ox.clone(self.options.clips),
+                    sort: self.options.sort,
+                    sortable: isSortable()
+                });
+            },
+            sort: function() {
+                updateSortElement();
+                self.$list.options({
+                    sort: self.options.sort,
+                    sortable: isSortable(),
+                });
             }
         });
 
@@ -74,12 +85,14 @@ Ox.ClipPanel = function(options, self) {
         })
         .bindEvent({
             change: function(data) {
-                that.triggerEvent('sort', [{
+                self.options.sort = [{
                     key: data.value,
                     operator: Ox.getObjectById(
                         self.options.sortOptions, data.value
                     ).operator
-                }]);
+                }];
+                updateSortElement();
+                that.triggerEvent('sort', self.options.sort);
             }
         });
 
@@ -91,10 +104,12 @@ Ox.ClipPanel = function(options, self) {
         })
         .bindEvent({
             click: function() {
-                that.triggerEvent('sort', [{
+                self.options.sort = [{
                     key: self.options.sort[0].key,
                     operator: self.options.sort[0].operator == '+' ? '-' : '+'
-                }]);
+                }];
+                updateSortElement();
+                that.triggerEvent('sort', self.options.sort);
             }
         });
 
@@ -220,7 +235,7 @@ Ox.ClipPanel = function(options, self) {
             columnsRemovable: true,
             columnsResizable: true,
             columnsVisible: true,
-            items: self.options.clips,
+            items: Ox.clone(self.options.clips),
             scrollbarVisible: true,
             sort: self.options.sort,
             sortable: isSortable(),
@@ -253,9 +268,10 @@ Ox.ClipPanel = function(options, self) {
                 that.triggerEvent('select', data);
             },
             sort: function(data) {
-                self.options.sort = self.$list.options('sort');
+                self.options.sort = [data];
+                updateSortElement();
                 self.$list.options({sortable: isSortable()});
-                that.triggerEvent('sort', [data]);
+                that.triggerEvent('sort', self.options.sort);
             },
             submit: function(data) {
                 data.value = Ox.parseDuration(data.value);
@@ -278,7 +294,13 @@ Ox.ClipPanel = function(options, self) {
     }
 
     function updateSortElement() {
-        
+        self.$sortSelect.options({
+            value: self.options.sort[0].key,
+        });
+        self.$orderButton.options({
+            title: getButtonTitle(),
+            tooltip: getButtonTooltip(),
+        });
     }
 
     that.updateItem = function(id, data) {
diff --git a/source/Ox.UI/js/Video/VideoEditPanel.js b/source/Ox.UI/js/Video/VideoEditPanel.js
index 0a1267d4..bbcc5f82 100644
--- a/source/Ox.UI/js/Video/VideoEditPanel.js
+++ b/source/Ox.UI/js/Video/VideoEditPanel.js
@@ -43,7 +43,10 @@ Ox.VideoEditPanel = function(options, self) {
         .options(options || {})
         .update({
             clips: function() {
-                self.$clipPanel.options({clips: Ox.clone(self.options.clips)});
+                self.$clipPanel.options({
+                    clips: Ox.clone(self.options.clips),
+                    sort: self.options.clipSort
+                });
             },
             duration: function() {
                 self.$timeline && self.$timeline.replaceWith(
@@ -252,6 +255,7 @@ Ox.VideoEditPanel = function(options, self) {
                 that.triggerEvent('select', data);
             },
             sort: function(data) {
+                self.options.clipSort = data;
                 that.triggerEvent('sort', data);
             },
             toggle: toggleClips,