avoid leaks by adding custom empty/remove/replaceWith functions to Ox.Element

source/Ox.UI/js/Core/Ox.Element.js

@@ -100,6 +100,7 @@ Ox.Element = function(options, self) {
     var that = new Ox.JQueryElement(
             $(self.options.element || '<div>')
         )
+        .addClass('OxElement')
         .mousedown(mousedown);
 
     if (self.options.tooltip) {
@@ -319,6 +320,14 @@ Ox.Element = function(options, self) {
         return that;
     };
 
+    that.empty = function() {
+        that.$element.children('.OxElement').each(function() {
+            Ox.UI.elements[$(this).data('oxid')].removeElement();
+        });
+        that.$element.empty();
+        return that;
+    };
+
     /*@
     gainFocus <function> Makes an element object gain focus
     () -> <obj> This element object
@@ -369,12 +378,20 @@ Ox.Element = function(options, self) {
     removeElement <function> Removes an element object and its event handler
         () -> <obj> This element
     @*/
-    that.removeElement = function() {
+    that.remove = that.removeElement = function() {
-        that.loseFocus();
+        that.$element.children('.OxElement').each(function() {
+            Ox.UI.elements[$(this).data('oxid')].removeElement();
+        });
+        Ox.Focus.remove(that.id);
         delete self.$eventHandler;
-        that.remove();
-        // fixme: ok to comment out the following line?
         delete Ox.UI.elements[that.id];
+        that.$element.remove();
+        return that;
+    };
+
+    that.replaceWith = function($element) {
+        $element.insertAfter(that);
+        that.remove();
         return that;
     };
 

source/Ox.UI/js/Core/Ox.Focus.js

@@ -20,8 +20,9 @@ Ox.Focus = (function() {
         blur: function(id) {
             var index = stack.indexOf(id);
             if (index > -1 && index == stack.length - 1) {
-                stack.length == 1 ? stack.pop() :
+                stack.length == 1
-                        stack.splice(stack.length - 2, 0, stack.pop());
+                    ? stack.pop()
+                    : stack.splice(stack.length - 2, 0, stack.pop());
                 //$elements[id].removeClass('OxFocus');
                 $('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work
                 stack.length && Ox.UI.elements[stack[stack.length - 1]].addClass('OxFocus');
@@ -48,6 +49,10 @@ Ox.Focus = (function() {
         @*/
         focused: function() {
             return stack.length ? stack[stack.length - 1] : null;
+        },
+        remove: function(id) {
+            var index = stack.indexOf(id);
+            index > -1 && stack.splice(index, 1);
         }
     };
 }());

source/Ox.UI/js/Core/Ox.JQueryElement.js

@@ -19,7 +19,7 @@ Ox.JQueryElement = function($element) {
     that.ox = Ox.VERSION;
     //@ $element <object> The jQuery-wrapped DOM element
     that.$element = $element.data({
-        oxid: that.id
+        oxid: that.id // FIXME: Can this be just "id"?
     });
     // FIXME: the following two lines should make it possible to do
     // $('<div>').appendTo($element) ... check if it works, then replace all

source/Ox.UI/js/Panel/Ox.SplitPanel.js

@@ -46,17 +46,17 @@ Ox.SplitPanel = function(options, self) {
 
     // create elements
     that.$elements = [];
-    self.options.elements.forEach(function(v, i) {
+    self.options.elements.forEach(function(element, i) {
         self.options.elements[i] = Ox.extend({
             collapsible: false,
             collapsed: false,
             resizable: false,
             resize: [],
             size: 'auto'
-        }, v);
+        }, element);
-        that.$elements[i] = v.element
+        that.$elements[i] = element.element
-            .css(self.edges[2], (parseInt(v.element.css(self.edges[2])) || 0) + 'px')
+            .css(self.edges[2], (parseInt(element.element.css(self.edges[2])) || 0) + 'px')
-            .css(self.edges[3], (parseInt(v.element.css(self.edges[3])) || 0) + 'px');
+            .css(self.edges[3], (parseInt(element.element.css(self.edges[3])) || 0) + 'px');
         //alert(v.element.css(self.edges[3]))
     });
 
@@ -198,8 +198,13 @@ Ox.SplitPanel = function(options, self) {
             .css(self.edges[3], (parseInt(element.css(self.edges[3])) || 0) + 'px');
         // fixme: it would be better to call removeElement here,
         // or have a custom replaceElement function that removes event handlers
-        self.options.elements[pos].element.replaceWith(element.$element.$element || element.$element);
+        //self.options.elements[pos].element.replaceWith(element.$element.$element || element.$element)
-        self.options.elements[pos].element = element;
+        //self.options.elements[pos].element = element;
+        ///*
+        self.options.elements[pos].element.replaceWith(
+            self.options.elements[pos].element = element
+        );
+        //*/
         setSizes();
         self.$resizebars.forEach(function($resizebar, i) {
             $resizebar.options({