From af3bcc67ddb31f51eb640abaa8788c9e547c3c00 Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Fri, 9 Aug 2013 16:05:52 +0000
Subject: [PATCH] clip panel: change wording, update formatting, check values
 on submit

---
 source/Ox.UI/js/Video/ClipPanel.js | 43 +++++++++++++++++++++++-------
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/source/Ox.UI/js/Video/ClipPanel.js b/source/Ox.UI/js/Video/ClipPanel.js
index 6b3e01c9..0eb03e88 100644
--- a/source/Ox.UI/js/Video/ClipPanel.js
+++ b/source/Ox.UI/js/Video/ClipPanel.js
@@ -67,7 +67,7 @@ Ox.ClipPanel = function(options, self) {
                 {},
                 {id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length},
                 {id: 'join', title: Ox._('Join Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length},
-                {id: 'dereference', title: Ox._('Make Selected Clips Static'), disabled: !self.options.editable || !self.options.selected.length}
+                {id: 'replace', title: Ox._('Make Selected Clips Editable'), disabled: !self.options.editable || !self.options.selected.length}
             ],
             title: 'set',
             tooltip: Ox._('Options'),
@@ -243,8 +243,11 @@ Ox.ClipPanel = function(options, self) {
                     {
                         align: 'right',
                         editable: isEditable,
-                        format: function(value) {
-                            return Ox.formatDuration(value, 3);
+                        format: function(value, data) {
+                            return (
+                                isEditable(data) ? ['', '']
+                                : ['<span class="OxLight">', '</span>']
+                            ).join(Ox.formatDuration(value, 3));
                         },
                         id: 'in',
                         operator: '+',
@@ -255,8 +258,11 @@ Ox.ClipPanel = function(options, self) {
                     {
                         align: 'right',
                         editable: isEditable,
-                        format: function(value) {
-                            return Ox.formatDuration(value, 3);
+                        format: function(value, data) {
+                            return (
+                                isEditable(data) ? ['', '']
+                                : ['<span class="OxLight">', '</span>']
+                            ).join(Ox.formatDuration(value, 3));
                         },
                         id: 'out',
                         operator: '+',
@@ -267,8 +273,11 @@ Ox.ClipPanel = function(options, self) {
                     {
                         align: 'right',
                         editable: isEditable,
-                        format: function(value) {
-                            return Ox.formatDuration(value, 3);
+                        format: function(value, data) {
+                            return (
+                                isEditable(data) ? ['', '']
+                                : ['<span class="OxLight">', '</span>']
+                            ).join(Ox.formatDuration(value, 3));
                         },
                         id: 'duration',
                         operator: '+',
@@ -365,9 +374,25 @@ Ox.ClipPanel = function(options, self) {
                 that.triggerEvent('sort', self.options.sort);
             },
             submit: function(data) {
+                var value = self.$list.value(data.id);
                 data.value = Ox.parseDuration(data.value);
-                self.$list.value(data.id, data.key, data.value);
-                that.triggerEvent('edit', data);
+                if (
+                    (data.key == 'in' && data.value < value.out)
+                    || (data.key == 'out' && data.value > value['in'])
+                    || (data.key == 'duration' && data.value > 0)
+                ) {
+                    self.$list.value(data.id, data.key, data.value);
+                    if (data.key == 'in') {
+                        self.$list.value(data.id, 'duration', value.out - data.value);
+                    } else if (data.key == 'out') {
+                        self.$list.value(data.id, 'duration', data.value - value['in']);
+                    } else if (data.key == 'duration') {
+                        self.$list.value(data.id, 'out', value['in'] + data.value);
+                    }
+                    that.triggerEvent('edit', data);
+                } else {
+                    self.$list.value(data.id, data.key, value[data.key]);
+                }
             }
         });
         return $list;