From 7633de39589763341ae60510fa8f1c809e71a7c6 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Wed, 30 Nov 2011 15:31:11 +0100
Subject: [PATCH] update ArrayInput

---
 source/Ox.UI/js/Form/Ox.ArrayInput.js | 88 ++++++++++++++-------------
 1 file changed, 46 insertions(+), 42 deletions(-)

diff --git a/source/Ox.UI/js/Form/Ox.ArrayInput.js b/source/Ox.UI/js/Form/Ox.ArrayInput.js
index 33f5a101..7c293719 100644
--- a/source/Ox.UI/js/Form/Ox.ArrayInput.js
+++ b/source/Ox.UI/js/Form/Ox.ArrayInput.js
@@ -33,22 +33,25 @@ Ox.ArrayInput = function(options, self) {
     self.$input = [];
     self.$removeButton = [];
     self.$addButton = [];
+
     self.options.value.forEach(function(value, i) {
         addInput(i, value);
     });
 
-    function addInput(i, value, focus) {
-        Ox.Log('Form', 'add', i)
-        self.$element.splice(i, 0, Ox.Element()
-            .css({height: '16px', marginTop: self.options.label || i > 0 ? '8px' : 0})
-            .data({index: i}));
-        if (i == 0) {
-            self.$element[i].appendTo(that);
+    function addInput(index, value, focus) {
+        Ox.Log('Form', 'add', index)
+        self.$element.splice(index, 0, Ox.Element()
+            .css({
+                height: '16px',
+                marginTop: self.options.label || index > 0 ? '8px' : 0
+            })
+            .data({index: index}));
+        if (index == 0) {
+            self.$element[index].appendTo(that);
         } else {
-            Ox.Log('Form', i, self.$element)
-            self.$element[i].insertAfter(self.$element[i - 1]);
+            self.$element[index].insertAfter(self.$element[index - 1]);
         }
-        self.$input.splice(i, 0, Ox.Input({
+        self.$input.splice(index, 0, Ox.Input({
                 value: value,
                 width: self.options.width - 48
             })
@@ -56,12 +59,15 @@ Ox.ArrayInput = function(options, self) {
             .bindEvent({
                 change: function(data) {
                     self.options.sort && data.value !== '' && sortInputs();
-                    that.triggerEvent('change', {value: that.value()});
+                    self.options.value = that.value();
+                    that.triggerEvent('change', {
+                        value: self.options.value
+                    });
                 }
             })
-            .appendTo(self.$element[i]));
-        focus && self.$input[i].focusInput();
-        self.$removeButton.splice(i, 0, Ox.Button({
+            .appendTo(self.$element[index]));
+        focus && self.$input[index].focusInput();
+        self.$removeButton.splice(index, 0, Ox.Button({
                 title: self.$input.length == 1 ? 'close' : 'remove',
                 type: 'image'
             })
@@ -71,7 +77,10 @@ Ox.ArrayInput = function(options, self) {
                     var index = $(this).parent().data('index');
                     if (self.$input[index].value() !== '') {
                         self.$input[index].options({value: ''});
-                        that.triggerEvent('change', {value: that.value()});
+                        self.options.value = that.value();
+                        that.triggerEvent('change', {
+                            value: self.options.value
+                        });
                     }
                     if (self.$input.length == 1) {
                         self.$input[0].focusInput();
@@ -80,38 +89,33 @@ Ox.ArrayInput = function(options, self) {
                     }
                 }
             })
-            .appendTo(self.$element[i]));
-        self.$addButton.splice(i, 0, Ox.Button({
-                disabled: i == self.options.max - 1,
+            .appendTo(self.$element[index]));
+        self.$addButton.splice(index, 0, Ox.Button({
+                disabled: index == self.options.max - 1,
                 title: 'add',
                 type: 'image'
             })
             .css({float: 'left', marginLeft: '8px'})
             .bind({
                 click: function() {
-                    addInput($(this).parent().data('index') + 1, '', true);
+                    var index = $(this).parent().data('index');
+                    addInput(index + 1, '', true);
                 }
             })
-            .appendTo(self.$element[i]));
-        self.$input.length > 1 && self.$removeButton[0].options({title: 'remove'});
-        self.$input.length == self.options.max && self.$addButton.forEach(function($button) {
-            $button.options({disabled: true});
-        });
-        updateIndices();
+            .appendTo(self.$element[index]));
+        updateInputs();
     }
 
-    function removeInput(i) {
-        Ox.Log('Form', 'remove', i);
-        ['input', 'removeButton', 'addButton', 'element'].forEach(function(element) {
+    function removeInput(index) {
+        Ox.Log('Form', 'remove', index);
+        [
+            'input', 'removeButton', 'addButton', 'element'
+        ].forEach(function(element) {
             var key = '$' + element;
-            self[key][i].remove();
-            self[key].splice(i, 1);
+            self[key][index].remove();
+            self[key].splice(index, 1);
         });
-        self.$input.length == 1 && self.$removeButton[0].options({title: 'close'});
-        self.$input.length == self.options.max - 1 && self.$addButton.forEach(function($button) {
-            $button.options({disabled: false});
-        });
-        updateIndices();
+        updateInputs();
     }
 
     function setWidths() {
@@ -133,16 +137,16 @@ Ox.ArrayInput = function(options, self) {
         });
     }
 
-    function updateIndices() {
+    function updateInputs() {
         self.$element.forEach(function($element, i) {
-            Ox.Log('Form', i, $element)
             $element.data({index: i});
+            self.$removeButton[i].options({
+                title: self.$element.length == 1 ? 'close' : 'remove',
+            });
+            self.$addButton[i].options({
+                disabled: self.$element.length == self.options.max
+            });
         });
-        /*
-        self.$input.forEach(function($input, i) {
-            $input.options({value: i});
-        });
-        */
     }
 
     self.setOption = function(key, value) {