Ox.FormPanel: support setting inital and updating selected panel

source/UI/js/Form/FormPanel.js

@@ -15,11 +15,18 @@ Ox.FormPanel = function(options, self) {
     var that = Ox.Element({}, self)
         .defaults({
             form: [],
-            listSize: 256
+            listSize: 256,
+            section: null
         })
-        .options(options || {});
+        .options(options || {})
+        .update({
+            section: setSection
+        });
 
-    self.section = 0;
+    if (self.options.section === null) {
+        self.options.section = self.options.form[0].id;
+    }
+    self.section = Ox.getIndexById(self.options.form, self.optoins.section);
     self.sectionTitle = self.options.form[self.section].title;
     self.$list = Ox.TableList({
         columns: [
@@ -62,7 +69,7 @@ Ox.FormPanel = function(options, self) {
         }),
         max: 1,
         min: 1,
-        selected: [self.options.form[0].id],
+        selected: [self.options.selected],
         sort: [{key: 'id', operator: '+'}],
         unique: 'id',
         width: self.options.listSize
@@ -130,7 +137,18 @@ Ox.FormPanel = function(options, self) {
         });
     });
 
-    self.$sections[0].show();
+    self.$sections[self.section].show();
+
+    function setSection() {
+        var id = self.options.section,
+            section = Ox.getIndexById(self.options.form, id);
+        if (self.section != section) {
+            self.$sections[self.section].hide();
+            self.section = section;
+            self.$list.options('selected', [id]);
+            self.$sections[self.section].show();
+        }
+    };
 
     that.setElement(Ox.SplitPanel({
         elements: [
@@ -191,13 +209,24 @@ Ox.FormPanel = function(options, self) {
     values <f> values
     @*/
     that.values = function() {
-        var values = {};
-        self.options.form.forEach(function(section, i) {
-            values[section.id] = self.$forms[i].values();
-        });
-        return values;
+        if (arguments.length === 0) {
+            var values = {};
+            self.options.form.forEach(function(section, i) {
+                values[section.id] = self.$forms[i].values();
+            });
+            return values;
+        } else {
+            var sections = arguments[0];
+
+            self.options.form.forEach(function(form, i) {
+                if ((form.id in sections) {
+                    self.$forms[i].values(sections[form.id]);
+                }
+            });
+        }
     };
 
+
     return that;
     
 };