splitpanel rewrite

build/css/ox.ui.classic.css

@@ -25,7 +25,7 @@ Bars
     background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
 }
-.OxThemeClassic .OxResizebar > .OxLine {
+.OxThemeClassic .OxSeparator > .OxLine {
     background: rgb(208, 208, 208);
 }
 

build/css/ox.ui.css

@@ -1229,18 +1229,6 @@ Panels
 }
 
 .OxSplitPanel {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    overflow: hidden;
-}
-.OxSplitPanel > div {
-    position: absolute;
-}
-
-.OxSplitPanel2 {
     display: box;
     display: -moz-box;
     display: -webkit-box;
@@ -1249,52 +1237,52 @@ Panels
     -mox-box-flex: 0;
     -webkit-box-flex: 0;
 }
-.OxSplitPanel2.OxHorizontal {
+.OxSplitPanel.OxHorizontal {
     box-orient: horizontal;
     -moz-box-orient: horizontal;
     -webkit-box-orient: horizontal;
 }
-.OxSplitPanel2.OxVertical {
+.OxSplitPanel.OxVertical {
     box-orient: vertical;
     -moz-box-orient: vertical;
     -webkit-box-orient: vertical;
 }
-.OxSplitPanel2 > * {
+.OxSplitPanel > * {
     box-flex: 0;
     -mox-box-flex: 0;
     -webkit-box-flex: 0;    
 }
-.OxSplitPanel2 > .OxSeparator {
+.OxSplitPanel > .OxSeparator {
     display: -webkit-box;
     position: relative;
     z-index: 2;
 }
-.OxSplitPanel2 > .OxSeparator > * {
+.OxSplitPanel > .OxSeparator > * {
     -webkit-box-flex: 0;    
 }
-.OxSplitPanel2 > .OxSeparator > .OxLine {
+.OxSplitPanel > .OxSeparator > .OxLine {
     background-color: black;
 }
-.OxSplitPanel2.OxHorizontal > .OxSeparator {
+.OxSplitPanel.OxHorizontal > .OxSeparator {
     width: 5px;
     margin: 0 -2px 0 -2px;
     cursor: ew-resize;
 }
-.OxSplitPanel2.OxHorizontal > .OxSeparator > .OxLine {
+.OxSplitPanel.OxHorizontal > .OxSeparator > .OxLine {
     width: 1px;
 }
-.OxSplitPanel2.OxHorizontal > .OxSeparator > .OxSpace {
+.OxSplitPanel.OxHorizontal > .OxSeparator > .OxSpace {
     width: 2px;
 }
-.OxSplitPanel2.OxVertical > .OxSeparator {
+.OxSplitPanel.OxVertical > .OxSeparator {
     height: 5px;
     margin: -2px 0 -2px 0;
     cursor: ns-resize;
 }
-.OxSplitPanel2.OxVertical > .OxSeparator > .OxLine {
+.OxSplitPanel.OxVertical > .OxSeparator > .OxLine {
     height: 1px;
 }
-.OxSplitPanel2.OxVertical > .OxSeparator > .OxSpace {
+.OxSplitPanel.OxVertical > .OxSeparator > .OxSpace {
     height: 2px;
 }
 /*

build/css/ox.ui.modern.css

@@ -27,7 +27,7 @@ Bars
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(64, 64, 64)), to(rgb(32, 32, 32)));
 }
 
-.OxThemeModern .OxResizebar > .OxLine {
+.OxThemeModern .OxSeparator > .OxLine {
     background: rgb(48, 48, 48);
 }
 

build/js/ox.ui.js

@@ -11170,7 +11170,7 @@ requires
         return that;
     };
 
-    Ox.SplitPanel2 = function(options, self) {
+    Ox.SplitPanel = function(options, self) {
 
         var self = self || {},
             that = new Ox.Element('div', self)
@@ -11180,7 +11180,7 @@ requires
                 })
                 .options(options)
                 .addClass(
-                    'OxSplitPanel2 Ox' + Ox.toTitleCase(self.options.orientation)
+                    'OxSplitPanel Ox' + Ox.toTitleCase(self.options.orientation)
                 );
 
         Ox.extend(self, {
@@ -11318,13 +11318,16 @@ requires
 
         function setPercent(pos) {
             var element = self.options.elements[pos],
-                flex = element.size.replace('%', ''),
+                flex = (
+                    element.size == 'auto' ? self.autoPercent : element.size
+                ).replace('%', ''),
                 css = {
                     boxFlex: flex,
                     MozBoxFlex: flex,
                     WebkitBoxFlex: flex
                 };
             css[self.dimensions[0]] = '';
+            Ox.print('setPercent', css)
             element.element.css(css);
         }
 
@@ -11349,6 +11352,27 @@ requires
             });
         }
 
+        that.replaceElement = function(pos, element) {
+            var $element = self.options.elements[pos].element;
+            $element.replaceWith(self.options.elements[pos].element = element);
+            if (Ox.isNumber(self.options.elements[pos].size)) {
+                setPixels(pos);
+            } else {
+                setPercent(pos);
+            }
+            return that;
+        };
+
+        that.resizeElement = function(pos, size) {
+            var element = self.options.elements[pos];
+            element.size = size;
+            if (Ox.isNumber(element.size)) {
+                setPixels(pos);
+            } else {
+                setPercent(pos);
+            }
+        }
+
         that.toggle = function(pos) {
             var css = {},
                 element = self.options.elements[pos],
@@ -11395,7 +11419,7 @@ requires
             resize
             toggle
     */
-    Ox.SplitPanel = function(options, self) {
+    Ox._SplitPanel = function(options, self) {
         var self = self || {},
             that = new Ox.Element({}, self) // fixme: Container
                 .defaults({