fixed a couple of bugs in panel event system...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui/editor.js

@@ -9,6 +9,25 @@
 
 /*********************************************************************/
 
+function _setupPanel(panel){
+	return panel
+		.on('panelClosing', function(){
+			if($('.panel').length <= 1){
+				toggleEditor('off')
+			}
+		})
+		.on('newPanel', function(evt, panel){
+			_setupPanel(panel)
+		})
+		// make clicks on unfocusable elements remove focus...
+		.click(function(){
+			if(event.target != $('.panel :focus')[0]){
+				$('.panel :focus').blur()
+			}
+		})
+}
+
+
 var toggleEditor = createCSSClassToggler(
 		'.viewer', 
 		'.editor-visible',
@@ -19,7 +38,7 @@ var toggleEditor = createCSSClassToggler(
 				// create the editor if this is first init...
 				if(ed.length == 0){
 					$('.viewer')
-						.append(makeEditorControls('.current.image')
+						.append(_setupPanel(makeEditorControls('.current.image'))
 							//.draggable('option', 'snap', '.viewer')
 							.css({
 								// prevent the editor from moving under 
@@ -28,18 +47,9 @@ var toggleEditor = createCSSClassToggler(
 								'margin-top': '20px',
 								top: '50px',
 								left: '5px',
-							})
+							}))
 							// XXX add handlers for saving data to images...
 							// XXX
-							// make clicks on unfocusable elements remove focus...
-							.on('panelClosing', function(){
-								toggleEditor('off')
-							})
-							.click(function(){
-								if(event.target != $('.panel :focus')[0]){
-									$('.panel :focus').blur()
-								}
-							}))
 						// setup the event to update the editor...
 						.on('focusingImage', function(){
 							if(toggleEditor('?') == 'on'){
@@ -58,7 +68,7 @@ var toggleEditor = createCSSClassToggler(
 
 			// hide...
 			} else {
-				ed.hide()
+				ed.remove()
 			}
 		})
 

ui/lib/panels.js

@@ -25,7 +25,7 @@ function makePanel(title, open, editable_title, remove_on_empty){
 				.click(function(){
 					panel
 						.trigger('panelClosing')
-						.hide()
+						.remove()
 					return false
 				})
 				.html('×')))
@@ -65,19 +65,22 @@ function makePanel(title, open, editable_title, remove_on_empty){
 				console.log('stop (outside: '+_outside+')')
 				// do this only when dropping outside the panel...
 				if(_outside){
-					makePanel()
+					var new_panel = makePanel()
 						// XXX adjust this to scale...
 						// XXX adjust this to parent offset...
 						.css(ui.offset)
 						.appendTo(panel.parent())
-						.find('.panel-content')
+					new_panel.find('.panel-content')
 							.append(ui.item)
 					_outside = false
+					panel.trigger('newPanel', [new_panel])
 				}
 
 				// remove the panel when it runs out of sub-panels...
 				if(remove_on_empty && panel.find('.sub-panel').length == 0){
-					panel.remove()
+					panel
+						.trigger('panelClosing')
+						.remove()
 				}
 			},
 			// XXX are these the correct events???