diff --git a/ui/editor.js b/ui/editor.js
index 9162998f..c3d98f7f 100755
--- a/ui/editor.js
+++ b/ui/editor.js
@@ -48,7 +48,10 @@ var toggleEditor = createCSSClassToggler(
 					$('.viewer')
 						.append(makeSidePanel('left'))
 						.append(makeSidePanel('right'))
-						.append(_setupPanel(makeEditorControls('.current.image'))
+						.append(_setupPanel(openGroupedPanels([
+									'Edit: Filters',
+									'Edit: Snapshots'
+								]))
 							//.draggable('option', 'snap', '.viewer')
 							.css({
 								// prevent the editor from moving under 
@@ -58,16 +61,8 @@ var toggleEditor = createCSSClassToggler(
 								top: '50px',
 								left: '5px',
 							}))
-							// XXX add handlers for saving data to images...
-							// XXX
-						// setup the event to update the editor...
-						.on('focusingImage', function(){
-							if(toggleEditor('?') == 'on'){
-								// XXX save previous settings if changes...
-								// XXX
-								reloadControls('.current.image')
-							}
-						})
+						// XXX add handlers for saving data to images...
+						// XXX
 				// show the editor...
 				} else {
 					ed.show()
diff --git a/ui/experiments/panels.html b/ui/experiments/panels.html
index 8cd72efe..1f8c6b8b 100755
--- a/ui/experiments/panels.html
+++ b/ui/experiments/panels.html
@@ -69,9 +69,11 @@ $(function(){
 	makeSubPanel('Test Sub Panel B', $('<h2>Panel B</h2>'), panel, true)
 	makeSubPanel('Test Sub Panel C', $('<h3>Panel C</h3>'), panel, false)
 
-
-	makeFilterPanel(panel, '.moo')
-	makeSnapshotsPanel(panel, '.moo')
+	openGroupedPanels([
+			'Edit: Filters',
+			'Edit: Snapshots'
+		], 
+		panel)
 
 	makeSubPanel('Test Sub Panel D', $('<h2>Panel D</h2>'))
 		.parents('.panel')
@@ -81,7 +83,7 @@ $(function(){
 			})
 
 
-	makePanelController('Test Sub Panel E',
+	Panel('Test Sub Panel E',
 		function(){
 			return $('<h1>Panel E</h1>')
 		},
diff --git a/ui/lib/editor.js b/ui/lib/editor.js
index f6f091a9..d1948970 100755
--- a/ui/lib/editor.js
+++ b/ui/lib/editor.js
@@ -248,94 +248,122 @@ function makeLogRange(text, filter, target){
 
 
 /**********************************************************************
-* Panels...
+* Constructors...
 */
 
-function makeFilterPanel(parent, target, open){
-	return makeSubPanel('Edit: Filters', 
-		$('<div>')
-			.append($('<div class="filter-list"/>')
-				//.append(makeLogRange('Gamma:', 'gamma', target))
-				.append(makeLogRange('Brightness:', 'brightness', target))
-				.append(makeLogRange('Contrast:', 'contrast', target))
-				.append(makeLogRange('Saturation:', 'saturate', target))
-				.append(makeAbsRange('Hue:', 'hue-rotate', target, 
-						-180, 180, 0, 0.5, function(v){ return v+'deg' }))
-				.append(makeAbsRange('Grayscale:', 'grayscale', target))
-				.append(makeAbsRange('Invert:', 'invert', target))
-				.append(makeAbsRange('Sepia:', 'sepia', target))
-				.sortable({
-					axis: 'y',
-				})
-				.on('sortstop', function(){
-					// update image filter order...
-					var img = $(target)
-					img.css('-webkit-filter', sortFilterStr(img.css('-webkit-filter')))
-				}))
-			.append($('<hr>'))
-			.append('<span>Reset: <span>')
-			.append($('<button>Values</button>')
-				.click(function(){
-					$('.reset').click()
-				}))
-			.append($('<button>Order</button>')
-				.click(function(){
-					sortFilterSliders(DEFAULT_FILTER_ORDER)
-				}))
-			.append($('<button>All</button>')
-				.click(function(){
-					$('.reset').click()
-					sortFilterSliders(DEFAULT_FILTER_ORDER)
-				}))
-			.children(),
-		parent, open)
-}
-
-function makeSnapshotsPanel(parent, target, open){
-	return makeSubPanel('Edit: Snapshots', 
-		$('<div>')
-			.append($('<div class="states"/>'))
-			.append($('<hr>'))
-			.append($('<button/>')
-				.click(function(){ saveSnapshot(target) })
-				.text('Save'))
-			.append($('<button/>')
-				.addClass('remove-state-drop-target')
-				.click(function(){ clearSnapshots() })
-				.text('Clear')
-				.droppable({
-					accept: '.state',
-					activate: function(e, ui){
-						$(this).text('Delete')
-					},
-					deactivate: function(e, ui){
-						$(this).text('Clear')
-					},
-					drop: function(e, ui){
-						ui.helper.remove()
-					}
-					
-				}))
-			.children(),
-		parent, open)
+function buildFilterUI(target){
+	return $('<div>')
+		.append($('<div class="filter-list"/>')
+			//.append(makeLogRange('Gamma:', 'gamma', target))
+			.append(makeLogRange('Brightness:', 'brightness', target))
+			.append(makeLogRange('Contrast:', 'contrast', target))
+			.append(makeLogRange('Saturation:', 'saturate', target))
+			.append(makeAbsRange('Hue:', 'hue-rotate', target, 
+					-180, 180, 0, 0.5, function(v){ return v+'deg' }))
+			.append(makeAbsRange('Grayscale:', 'grayscale', target))
+			.append(makeAbsRange('Invert:', 'invert', target))
+			.append(makeAbsRange('Sepia:', 'sepia', target))
+			.sortable({
+				axis: 'y',
+			})
+			.on('sortstop', function(){
+				// update image filter order...
+				var img = $(target)
+				img.css('-webkit-filter', sortFilterStr(img.css('-webkit-filter')))
+			}))
+		.append($('<hr>'))
+		.append('<span>Reset: <span>')
+		.append($('<button>Values</button>')
+			.click(function(){
+				$('.reset').click()
+			}))
+		.append($('<button>Order</button>')
+			.click(function(){
+				sortFilterSliders(DEFAULT_FILTER_ORDER)
+			}))
+		.append($('<button>All</button>')
+			.click(function(){
+				$('.reset').click()
+				sortFilterSliders(DEFAULT_FILTER_ORDER)
+			}))
+		.children()
 }
 
 
-// XXX add panel update events to help save settings...
-function makeEditorControls(target){
-
-	var panel = makePanel()
-
-	// filters...
-	makeFilterPanel(panel, target)
-
-	// snapshots...
-	makeSnapshotsPanel(panel, target)
-
-	return panel
+function buildSnapshotsUI(target){
+	return $('<div>')
+		.append($('<div class="states"/>'))
+		.append($('<hr>'))
+		.append($('<button/>')
+			.click(function(){ saveSnapshot(target) })
+			.text('Save'))
+		.append($('<button/>')
+			.addClass('remove-state-drop-target')
+			.click(function(){ clearSnapshots() })
+			.text('Clear')
+			.droppable({
+				accept: '.state',
+				activate: function(e, ui){
+					$(this).text('Delete')
+				},
+				deactivate: function(e, ui){
+					$(this).text('Clear')
+				},
+				drop: function(e, ui){
+					ui.helper.remove()
+				}
+				
+			}))
+		.children()
 }
 
 
 
+/**********************************************************************
+* Panels...
+*/
+
+Panel('Edit: Filters',
+	// build UI...
+	function(){
+		// XXX hardcoded target is not good...
+		return buildFilterUI('.current.image')
+	},
+	// setup...
+	function(panel){
+		var _editorUpdateor = function(){
+			reloadControls('.current.image')
+		}
+		panel
+			.on('panelOpening', function(){ 
+				// register updater...
+				$('.viewer')
+					.on('focusingImage', _editorUpdateor)
+				// update the editor state in case the target changed...
+				_editorUpdateor()
+			})
+			.on('panelClosing', function(){ 
+				// unregister updater...
+				$('.viewer')
+					.off('focusingImage', _editorUpdateor)
+			})
+	},
+	true)
+
+
+Panel('Edit: Snapshots',
+	// build UI...
+	function(){
+		// XXX hardcoded target is not good...
+		return buildSnapshotsUI('.current.image')
+	},
+	// setup...
+	function(panel){
+		// XXX
+	},
+	true)
+
+
+
 /**********************************************************************
 * vim:set sw=4 ts=4 :												 */
diff --git a/ui/lib/panels.js b/ui/lib/panels.js
index 86a699ca..b488288f 100755
--- a/ui/lib/panels.js
+++ b/ui/lib/panels.js
@@ -23,7 +23,7 @@ var PANEL_HELPER_HIDE_DELAY_NO_ROOT = 100
 // 		...
 // 	}
 //
-// The controller is generated by makePanelController(...) and is called
+// The controller is generated by Panel(...) and is called
 // automatically by openPanel(...)
 var PANELS = {}
 
@@ -441,8 +441,10 @@ function makeSubPanel(title, content, parent, open, content_resizable, close_but
 // XXX this should take the state into consideration while opening panels
 // 		and open panels in specific parents and locations, maybe even with
 // 		other neighbor panels...
+// XXX currently parent is ignored if panel is already created, is this 
+// 		correct???
 // XXX update panel state...
-function openPanel(panel){
+function openPanel(panel, parent, no_blink){
 	var title = typeof(panel) == typeof('str') ? panel : null
 	panel = typeof(panel) == typeof('str')
 		? getPanel(panel)
@@ -454,7 +456,10 @@ function openPanel(panel){
 	if(panel.length == 0){
 		if(title in PANELS){
 			var builder = PANELS[title]
-			panel = builder({ open: true })
+			panel = builder({ 
+				open: true,
+				parent: parent,
+			})
 		}
 
 	// show/open the panel and all it's parents...
@@ -480,10 +485,24 @@ function openPanel(panel){
 		panel.trigger('panelOpening', panel)
 	}
 
-	//return panel
-	// XXX should we be blinking here???
-	// 		...is this the right context for this???
-	return blinkPanel(panel)
+	return no_blink ? panel : blinkPanel(panel)
+}
+
+
+// open a set of sub-panels in one panel...
+//
+// returns the parent panel.
+//
+// NOTE: this will not re-group already opened panels...
+function openGroupedPanels(panels, parent){
+	panels = typeof(panels) == typeof('str') ? [panels] : panels
+	parent = parent == null ? makePanel() : parent
+
+	panels.forEach(function(title){
+		openPanel(title, parent, true)
+	})
+
+	return parent
 }
 
 
@@ -549,7 +568,7 @@ function removePanel(panel){
 //
 // NOTE: this will search an element by title, so if it is not unique 
 // 		an existing element will be returned...
-function makePanelController(title, content_builder, panel_setup, content_resizable){
+function Panel(title, content_builder, panel_setup, content_resizable){
 
 	var controller = function(state){
 		state = state == null ? {} : state