From 49f1951622d14880eb013435f12011d68de3d47a Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Sat, 30 Nov 2013 05:10:01 +0400
Subject: [PATCH] split editor into html demo, js and css...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/experiments/editor.css  | 270 +++++++++++++++++
 ui/experiments/editor.html | 606 +------------------------------------
 ui/experiments/editor.js   | 355 ++++++++++++++++++++++
 3 files changed, 628 insertions(+), 603 deletions(-)
 create mode 100755 ui/experiments/editor.css
 create mode 100755 ui/experiments/editor.js

diff --git a/ui/experiments/editor.css b/ui/experiments/editor.css
new file mode 100755
index 00000000..0604d140
--- /dev/null
+++ b/ui/experiments/editor.css
@@ -0,0 +1,270 @@
+.panel {
+	display: inline-block;
+	min-width: 200px;
+	max-width: 450px;
+
+	font-size: 12px;
+
+	border: solid 2px silver;
+	border-radius: 4px;
+
+	background: white;
+	box-shadow: 5px 5px 30px -5px rgba(0, 0, 0, 0.5);
+	opacity: 0.95;
+
+	overflow: visible;
+}
+.panel summary {
+	padding-left: 3px;
+	background: silver
+}
+.panel summary::-webkit-details-marker {
+	color: gray;
+}
+.panel .close-button {
+	display: inline-block;
+	position: absolute;
+	right: 5px;
+	cursor: hand;
+}
+.panel .close-button:hover {
+	font-weight: bold;
+	color: red;
+	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+}
+.panel button,
+.panel details,
+.panel .state {
+	margin: 1px;
+	font-size: 11px;
+	border: solid 1px #aaa;
+	border-radius: 4px;
+	/* needed for dragging */
+	background: white;
+}
+.panel details {
+	margin: 3px;
+	border: solid 1px silver;
+	box-shadow: none;
+}
+.panel details summary {
+	background: #ddd;
+	/*
+	background: white;
+	box-shadow: 0px 0px 50px -5px rgba(0, 0, 0, 0.4);
+	*/
+}
+.panel .sub-panel-content {
+	margin: 10px;
+}
+
+.panel button:active,
+.panel .state:active {
+	background: silver;
+}
+
+
+/* main controls */
+.panel .control {
+	white-space:nowrap;
+}
+.panel .control .title {
+	display: inline-block;
+	width: 60px;
+	cursor: move;
+}
+.panel .control .slider {
+	-webkit-appearance: none !important;
+	width: 150px;
+	height: 3px;
+	border: solid 1px #ccc;
+	border-radius: 2px;
+	background: white;
+}
+.panel .control.at-default .slider {
+}
+.panel .control .slider::-webkit-slider-thumb {
+	-webkit-appearance: none !important;
+	height: 13px;
+	width: 13px;
+	/*border: solid 1px gray;*/
+	border: solid 2px #aaa;
+	border-radius: 50%;
+	background: white;
+	box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
+}
+.panel .control.at-default .slider::-webkit-slider-thumb {
+	opacity: 0.5;
+}
+.panel .control .value {
+	-webkit-appearance: none !important;
+	display: inline-block;
+	width: 25px;
+	text-align: right;
+	font-size: 11px;
+	margin-left: 5px;
+	margin-right: 5px;
+	border: none;
+	border-radius: 2px;
+	background: transparent;
+}
+.panel .control input::-webkit-outer-spin-button,
+.panel .control input::-webkit-inner-spin-button {
+	-webkit-appearance: none !important;
+}
+.panel .control .reset {
+	visibility: hidden;
+	border: solid 1px transparent;
+}
+.panel .control:hover button.reset {
+	visibility: visible;
+}
+.panel .control .reset:hover {
+	border: solid 1px silver;
+}
+
+
+/* Snapshots */
+.panel .state {
+	display: inline-block;
+	margin: 1px;
+	padding-left: 5px;
+	padding-right: 5px;
+}
+.panel .state.ui-draggable-dragging {
+	box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.4);
+}
+.panel .states {
+	min-height: 30px;
+}
+
+
+/* misc */
+.panel hr {
+	border: none;
+	border-top: solid 1px silver;
+}
+
+
+
+/* dark theme */
+.dark .panel {
+	border: solid 2px #333;
+	background: black;
+	color: silver;
+	box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5);
+}
+.dark .panel summary {
+	background: #333;
+}
+.dark .panel summary::-webkit-details-marker {
+	color: #555;
+}
+.dark .panel button,
+.dark .panel .state,
+.dark .panel details {
+	border: solid 1px #333;
+	/* needed for dragging */
+	background: #080808;
+	color: #888;
+}
+.dark .panel details {
+	border: solid 1px #333;
+}
+.dark .panel details summary {
+	background: #333;
+	color: silver;
+}
+.dark .panel .state:active,
+.dark .panel button:active {
+	background: #222;
+}
+.dark .panel .control .slider {
+	border: solid 1px #555;
+	background: black;
+}
+.dark .panel .control.at-default .slider {
+}
+.dark .panel .control .slider::-webkit-slider-thumb {
+	border: solid 2px #aaa;
+	background: black;
+	box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.5);
+}
+.dark .panel .control.at-default .slider::-webkit-slider-thumb {
+	border: solid 1px gray;
+	opacity: 0.5;
+}
+.dark .panel .control .value {
+	border: none;
+	background: transparent;
+	color: gray;
+}
+.dark .panel .control .reset:hover {
+	border: solid 1px #333;
+}
+.dark .panel hr {
+	border: none;
+	border-top: solid 1px #333;
+}
+
+
+/* gray theme */
+
+.gray .panel {
+	border: solid 2px #444;
+	background: #333;
+	color: silver;
+	box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5);
+}
+.gray .panel summary {
+	background: #444;
+}
+.gray .panel summary::-webkit-details-marker {
+	color: #555;
+}
+.gray .panel button,
+.gray .panel .state,
+.gray .panel details {
+	border: solid 1px #444;
+	/* needed for dragging */
+	background: #333;
+	color: #888;
+}
+.gray .panel details {
+	border: solid 1px #454545;
+}
+.gray .panel details summary {
+	background: #444;
+	color: silver;
+}
+.gray .panel .state:active,
+.gray .panel button:active {
+	background: #444;
+}
+.gray .panel .control .slider {
+	border: solid 1px #555;
+	background: #222;
+}
+.gray .panel .control.at-default .slider {
+}
+.gray .panel .control .slider::-webkit-slider-thumb {
+	border: solid 2px #aaa;
+	background: #333;
+}
+.gray .panel .control.at-default .slider::-webkit-slider-thumb {
+	border: solid 1px gray;
+	opacity: 0.5;
+}
+.gray .panel .control .value {
+	border: none;
+	background: transparent;
+	color: gray;
+}
+.gray .panel .control .reset:hover {
+	border: solid 1px #444;
+}
+.gray .panel hr {
+	border: none;
+	border-top: solid 1px #444;
+}
+
diff --git a/ui/experiments/editor.html b/ui/experiments/editor.html
index a3d5612b..7b5b68a8 100755
--- a/ui/experiments/editor.html
+++ b/ui/experiments/editor.html
@@ -1,625 +1,25 @@
 <html>
+<link rel="stylesheet" type="text/css" href="editor.css">
 <style>
 
-.panel {
-	display: inline-block;
-	min-width: 200px;
-	max-width: 450px;
-
-	font-size: 12px;
-
-	border: solid 2px silver;
-	border-radius: 4px;
-
-	background: white;
-	box-shadow: 5px 5px 30px -5px rgba(0, 0, 0, 0.5);
-	opacity: 0.95;
-
-	overflow: visible;
-}
-.panel summary {
-	padding-left: 3px;
-	background: silver
-}
-.panel summary::-webkit-details-marker {
-	color: gray;
-}
-.panel .close-button {
-	display: inline-block;
-	position: absolute;
-	right: 5px;
-	cursor: hand;
-}
-.panel .close-button:hover {
-	font-weight: bold;
-	color: red;
-	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-}
-.panel button,
-.panel details,
-.panel .state {
-	margin: 1px;
-	font-size: 11px;
-	border: solid 1px #aaa;
-	border-radius: 4px;
-	/* needed for dragging */
-	background: white;
-}
-.panel details {
-	margin: 3px;
-	border: solid 1px silver;
-	box-shadow: none;
-}
-.panel details summary {
-	background: #ddd;
-	/*
-	background: white;
-	box-shadow: 0px 0px 50px -5px rgba(0, 0, 0, 0.4);
-	*/
-}
-.panel .sub-panel-content {
-	margin: 10px;
-}
-
-.panel button:active,
-.panel .state:active {
-	background: silver;
-}
-
-
-/* main controls */
-.panel .control {
-	white-space:nowrap;
-}
-.panel .control .title {
-	display: inline-block;
-	width: 60px;
-	cursor: move;
-}
-.panel .control .slider {
-	-webkit-appearance: none !important;
-	width: 150px;
-	height: 3px;
-	border: solid 1px #ccc;
-	border-radius: 2px;
-	background: white;
-}
-.panel .control.at-default .slider {
-}
-.panel .control .slider::-webkit-slider-thumb {
-	-webkit-appearance: none !important;
-	height: 13px;
-	width: 13px;
-	/*border: solid 1px gray;*/
-	border: solid 2px #aaa;
-	border-radius: 50%;
-	background: white;
-	box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
-}
-.panel .control.at-default .slider::-webkit-slider-thumb {
-	opacity: 0.5;
-}
-.panel .control .value {
-	-webkit-appearance: none !important;
-	display: inline-block;
-	width: 25px;
-	text-align: right;
-	font-size: 11px;
-	margin-left: 5px;
-	margin-right: 5px;
-	border: none;
-	border-radius: 2px;
-	background: transparent;
-}
-.panel .control input::-webkit-outer-spin-button,
-.panel .control input::-webkit-inner-spin-button {
-	-webkit-appearance: none !important;
-}
-.panel .control .reset {
-	visibility: hidden;
-	border: solid 1px transparent;
-}
-.panel .control:hover button.reset {
-	visibility: visible;
-}
-.panel .control .reset:hover {
-	border: solid 1px silver;
-}
-
-
-/* Snapshots */
-.panel .state {
-	display: inline-block;
-	margin: 1px;
-	padding-left: 5px;
-	padding-right: 5px;
-}
-.panel .state.ui-draggable-dragging {
-	box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.4);
-}
-.panel .states {
-	min-height: 30px;
-}
-
-
-/* misc */
-.panel hr {
-	border: none;
-	border-top: solid 1px silver;
-}
-
-
-
-/* dark theme */
-.dark .panel {
-	border: solid 2px #333;
-	background: black;
-	color: silver;
-	box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5);
-}
-.dark .panel summary {
-	background: #333;
-}
-.dark .panel summary::-webkit-details-marker {
-	color: #555;
-}
-.dark .panel button,
-.dark .panel .state,
-.dark .panel details {
-	border: solid 1px #333;
-	/* needed for dragging */
-	background: #080808;
-	color: #888;
-}
-.dark .panel details {
-	border: solid 1px #333;
-}
-.dark .panel details summary {
-	background: #333;
-	color: silver;
-}
-.dark .panel .state:active,
-.dark .panel button:active {
-	background: #222;
-}
-.dark .panel .control .slider {
-	border: solid 1px #555;
-	background: black;
-}
-.dark .panel .control.at-default .slider {
-}
-.dark .panel .control .slider::-webkit-slider-thumb {
-	border: solid 2px #aaa;
-	background: black;
-	box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.5);
-}
-.dark .panel .control.at-default .slider::-webkit-slider-thumb {
-	border: solid 1px gray;
-	opacity: 0.5;
-}
-.dark .panel .control .value {
-	border: none;
-	background: transparent;
-	color: gray;
-}
-.dark .panel .control .reset:hover {
-	border: solid 1px #333;
-}
-.dark .panel hr {
-	border: none;
-	border-top: solid 1px #333;
-}
-/* local stuff */
-
 body.dark {
 	background: #0a0a0a;
 	color: silver;
 }
 
 
-
-/* gray theme */
-
-.gray .panel {
-	border: solid 2px #444;
-	background: #333;
-	color: silver;
-	box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5);
-}
-.gray .panel summary {
-	background: #444;
-}
-.gray .panel summary::-webkit-details-marker {
-	color: #555;
-}
-.gray .panel button,
-.gray .panel .state,
-.gray .panel details {
-	border: solid 1px #444;
-	/* needed for dragging */
-	background: #333;
-	color: #888;
-}
-.gray .panel details {
-	border: solid 1px #454545;
-}
-.gray .panel details summary {
-	background: #444;
-	color: silver;
-}
-.gray .panel .state:active,
-.gray .panel button:active {
-	background: #444;
-}
-.gray .panel .control .slider {
-	border: solid 1px #555;
-	background: #222;
-}
-.gray .panel .control.at-default .slider {
-}
-.gray .panel .control .slider::-webkit-slider-thumb {
-	border: solid 2px #aaa;
-	background: #333;
-}
-.gray .panel .control.at-default .slider::-webkit-slider-thumb {
-	border: solid 1px gray;
-	opacity: 0.5;
-}
-.gray .panel .control .value {
-	border: none;
-	background: transparent;
-	color: gray;
-}
-.gray .panel .control .reset:hover {
-	border: solid 1px #444;
-}
-.gray .panel hr {
-	border: none;
-	border-top: solid 1px #444;
-}
-/* local stuff */
-
 body.gray {
 	background: #333;
 	color: silver;
 }
 
 
+
 </style>
 <script src="jquery.js"></script>
 <script src="jquery-ui.js"></script>
+<script src="editor.js"></script>
 <script>
-/*********************************************************************/
-
-// XXX this exists in jli, remove when not needed...
-jQuery.fn.sortChildren = function(func){
-	return $(this).each(function(_, e){
-		return $(e).append($(e).children().detach().get().sort(func))
-	})
-}
-
-
-
-/*********************************************************************/
-
-// XXX make this add new filters in the correct position...
-function updateFilter(e, f, v, order){
-	e = $(e)
-	var state = e
-		.css('-webkit-filter')
-	state = state == 'none' ? '' : state + ' '
-	// update existing filter...
-	if(RegExp(f).test(state)){
-		state = state.replace(RegExp(f+'\\s*\\([^\\)]*\\)'), f+'('+v+')')
-	// add new filter...
-	} else {
-		state += f+'('+v+')'
-		state = sortFilterStr(state, order)
-	}
-	e.css({
-		'-webkit-filter': state,
-	})
-	return v
-}
-function resetFilter(e, f){
-	e = $(e)
-	var state = e
-		.css('-webkit-filter')
-	state = state == 'none' ? '' : state + ' '
-	state = state.replace(RegExp(f+'\\s*\\([^\\)]*\\)'), '').trim()
-	e.css({
-		'-webkit-filter': state,
-	})
-	return e
-}
-function sortFilterStr(state, order){
-	order = order == null ? getSliderOrder() : order
-	state = state.split(/\s+/)
-	state.sort(function(a, b){
-		a = order.indexOf(a.replace(/\(.*/, ''))
-		b = order.indexOf(b.replace(/\(.*/, ''))
-		return a - b
-	})
-	return state.join(' ')
-}
-function getSliderOrder(){
-	return $('.filter-list').sortable('toArray')
-}
-// NOTE: this will return only the set filters...
-function getFilterOrder(target){
-	return $(target)
-		.css('-webkit-filter')
-		.split(/\s*\([^\)]*\)\s*/g)
-		.slice(0, -1)
-}
-function sortFilterSliders(order){
-	return $('.filter-list').sortChildren(function(a, b){
-		a = order.indexOf(a.id)
-		b = order.indexOf(b.id)
-		return a - b
-	})
-}
-
-
-function resetPrevRange(e){
-	e = $(e).prev('input[type=range]')
-	e.val(e.attr('default'))
-		.change()
-}
-
-// XXX order the sliders...
-function loadSliderState(target){
-	var res = $(target)
-		.css('-webkit-filter')
-	var state = res
-		.split(/\s*\(\s*|\s*\)\s*/g)
-		.reverse()
-		.slice(1)
-	// reset sliders do defaults...
-	$('input[type=range]').each(function(i, e){
-		e = $(e)
-		e.val(e.attr('default')).change()
-	})
-	// set the saved values...
-	while(state.length > 0){
-		// XXX avoid using ids...
-		var e = $('[filter='+state.pop()+']')
-		if(e.prop('normalize')){
-			e.val(v2r(parseFloat(state.pop()))).change()
-		} else {
-			e.val(parseFloat(state.pop())).change()
-		}
-	}
-	return res
-}
-
-var DEFAULT_FILTER_ORDER = [
-	'brightness',
-	'contrast',
-	'saturate',
-	'hue-rotate',
-	'grayscale',
-	'invert',
-	'sepia'
-]
-
-function saveState(target){
-	var l = $('.state').last().text()
-	l = l == '' ? 0 : parseInt(l)+1
-	var state = $(target).css('-webkit-filter')
-	$('<div/>')
-		.text(l)
-		.addClass('state')
-		.attr({
-			state: state,
-			sliders: getSliderOrder().join(' ')
-		})
-		// load state...
-		.click(function(){
-			loadSliderState($(target).css('-webkit-filter', state))
-			sortFilterSliders($(this).attr('sliders').split(' '))
-		})
-		.appendTo($('.states'))
-		.draggable({ 
-			revert: 'invalid',
-			revertDuration: 200,
-		})
-}
-function clearStates(){
-	$('.state').remove()
-}
-
-
-function makeAbsRange(text, filter, target, min, max, dfl, step, translate, normalize){
-	min = min == null ? 0 : min
-	max = max == null ? 1 : max
-	dfl = dfl == null ? min : dfl
-	step = step == null ? 0.01 : step
-	translate = translate == null ? function(v){return v} : translate
-	normalize = normalize == null ? false : true
-
-	var elem = $('<div class="control range"></div>')
-		.attr({
-			id: filter,
-		})
-	$('<span class="title"/>')
-		.html(text)
-		.appendTo(elem)
-	var range = $('<input class="slider" type="range">')
-		.attr({
-			filter: filter,
-			min: min,
-			max: max,
-			step: step,
-			default: dfl,
-		})
-		.prop('normalize', normalize)
-		.val(dfl)
-		.change(function(){
-			var val = this.valueAsNumber
-			value.val(val)
-			updateFilter(target, filter, translate(val))
-			if(parseFloat(val) == dfl){
-				elem.addClass('at-default')
-			} else {
-				elem.removeClass('at-default')
-			}
-		})
-		.appendTo(elem)
-	var value = $('<input type="number" class="value"/>')
-		.attr({
-			min: min,
-			max: max,
-			step: step,
-		})
-		.val(dfl)
-		.change(function(){
-			range.val($(this).val()).change()
-		})
-		.appendTo(elem)
-	$('<button class="reset">&times;</button>')
-		.click(function(){
-			range.val(dfl).change()
-			resetFilter(target, filter)
-		})
-		.appendTo(elem)
-	return elem
-}
-function makeLogRange(text, filter, target){
-	return makeAbsRange(text, filter, target, -100, 100, 0, 0.1, r2v, true)
-}
-
-var C = 43.47
-
-function r2v(r){
-	return Math.pow(Math.E, r/C)
-}
-
-function v2r(v){
-	return Math.log(v)*C
-}
-
-function makeControls(target){
-	// tool panel...
-	var panel = $('<details open/>')
-		.addClass('panel')
-		.css({
-			position: 'absolute',
-			top: '100px',
-			left: '100px',
-		})
-		.append($('<summary>Edit</summary>')
-			.append($('<span/>')
-				.addClass('close-button')
-				.click(function(){
-					$(this).parents('.panel').hide()
-					return false
-				})
-				.html('&times;')))
-		.draggable({
-			containment: $('body'),
-			scroll: false,
-		})
-
-	// wrapper for sub-panels...
-	var content = $('<span class="panel-content">')
-		.sortable({
-			forcePlaceholderSize: true,
-			start: function(e, ui){
-				 ui.placeholder.height(ui.helper.outerHeight());
-				 ui.placeholder.width(ui.helper.outerWidth());
-			},
-			opacity: 0.5,
-		})
-		.appendTo(panel)
-
-	// filters...
-	$('<details open/>')
-		.append($('<summary>Filters</summary>'))
-		.append($('<div class="sub-panel-content"/>')
-			.append($('<div class="filter-list"/>')
-				.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('Reset: ')
-			.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)
-				})))
-		.appendTo(content)
-
-	// snapshots...
-	$('<details open/>')
-		.append($('<summary>Snapshots</summary>'))
-		.append($('<div class="sub-panel-content"/>')
-			.append($('<div class="states"/>'))
-			.append($('<hr>'))
-			.append($('<button/>')
-				.click(function(){ saveState(target) })
-				.text('Save'))
-			.append($('<button/>')
-				.addClass('remove-state-drop-target')
-				.click(function(){ clearStates() })
-				.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()
-					}
-					
-				})))
-		.appendTo(content)
-
-	return panel
-}
-
-function reloadControls(target){
-	clearStates()
-	var state = loadSliderState(target)
-
-	// nothing set -- default sort...
-	if(state == 'none'){
-		sortFilterSliders(DEFAULT_FILTER_ORDER)
-
-	// load existing sort state...
-	} else {
-		sortFilterSliders(getFilterOrder(target).concat(DEFAULT_FILTER_ORDER))
-	}
-	// make a snapshot...
-	saveState(target)
-}
-
-
-
-/*********************************************************************/
 
 
 function toggleThemes(){
diff --git a/ui/experiments/editor.js b/ui/experiments/editor.js
new file mode 100755
index 00000000..d742c735
--- /dev/null
+++ b/ui/experiments/editor.js
@@ -0,0 +1,355 @@
+/**********************************************************************
+* 
+* 
+**********************************************************************/
+
+var DEFAULT_FILTER_ORDER = [
+	'brightness',
+	'contrast',
+	'saturate',
+	'hue-rotate',
+	'grayscale',
+	'invert',
+	'sepia'
+]
+
+var SLIDER_SCALE = 43.47
+
+
+
+
+/*********************************************************************/
+
+// XXX this exists in jli, remove when not needed...
+jQuery.fn.sortChildren = function(func){
+	return $(this).each(function(_, e){
+		return $(e).append($(e).children().detach().get().sort(func))
+	})
+}
+
+
+
+/*********************************************************************/
+
+function r2v(r){
+	return Math.pow(Math.E, r/SLIDER_SCALE)
+}
+
+function v2r(v){
+	return Math.log(v)*SLIDER_SCALE
+}
+
+
+
+/*********************************************************************/
+
+// Update filter in target image...
+//
+function updateFilter(e, f, v, order){
+	e = $(e)
+	var state = e
+		.css('-webkit-filter')
+	state = state == 'none' ? '' : state + ' '
+	// update existing filter...
+	if(RegExp(f).test(state)){
+		state = state.replace(RegExp(f+'\\s*\\([^\\)]*\\)'), f+'('+v+')')
+	// add new filter...
+	} else {
+		state += f+'('+v+')'
+		state = sortFilterStr(state, order)
+	}
+	e.css({
+		'-webkit-filter': state,
+	})
+	return v
+}
+function resetFilter(e, f){
+	e = $(e)
+	var state = e
+		.css('-webkit-filter')
+	state = state == 'none' ? '' : state + ' '
+	state = state.replace(RegExp(f+'\\s*\\([^\\)]*\\)'), '').trim()
+	e.css({
+		'-webkit-filter': state,
+	})
+	return e
+}
+
+
+function getSliderOrder(){
+	return $('.filter-list').sortable('toArray')
+}
+// NOTE: this will return only the set filters...
+function getFilterOrder(target){
+	return $(target)
+		.css('-webkit-filter')
+		.split(/\s*\([^\)]*\)\s*/g)
+		.slice(0, -1)
+}
+
+
+function sortFilterStr(state, order){
+	order = order == null ? getSliderOrder() : order
+	state = state.split(/\s+/)
+	state.sort(function(a, b){
+		a = order.indexOf(a.replace(/\(.*/, ''))
+		b = order.indexOf(b.replace(/\(.*/, ''))
+		return a - b
+	})
+	return state.join(' ')
+}
+function sortFilterSliders(order){
+	return $('.filter-list').sortChildren(function(a, b){
+		a = order.indexOf(a.id)
+		b = order.indexOf(b.id)
+		return a - b
+	})
+}
+
+
+// Load state of sliders from target...
+//
+function loadSliderState(target){
+	var res = $(target)
+		.css('-webkit-filter')
+	var state = res
+		.split(/\s*\(\s*|\s*\)\s*/g)
+		.reverse()
+		.slice(1)
+	// reset sliders to defaults...
+	$('input[type=range]').each(function(i, e){
+		e = $(e)
+		e.val(e.attr('default')).change()
+	})
+	// set the saved values...
+	while(state.length > 0){
+		// XXX avoid using ids...
+		var e = $('[filter='+state.pop()+']')
+		if(e.prop('normalize')){
+			e.val(v2r(parseFloat(state.pop()))).change()
+		} else {
+			e.val(parseFloat(state.pop())).change()
+		}
+	}
+	return res
+}
+
+
+function saveSnapshot(target){
+	var l = $('.state').last().text()
+	l = l == '' ? 0 : parseInt(l)+1
+	var state = $(target).css('-webkit-filter')
+	$('<div/>')
+		.text(l)
+		.addClass('state')
+		.attr({
+			state: state,
+			sliders: getSliderOrder().join(' ')
+		})
+		// load state...
+		.click(function(){
+			loadSliderState($(target).css('-webkit-filter', state))
+			sortFilterSliders($(this).attr('sliders').split(' '))
+		})
+		.appendTo($('.states'))
+		.draggable({ 
+			revert: 'invalid',
+			revertDuration: 200,
+		})
+}
+function clearSnapshots(){
+	$('.state').remove()
+}
+
+
+// Re-read filters form target image and reset the controls...
+//
+function reloadControls(target){
+	clearSnapshots()
+	var state = loadSliderState(target)
+
+	// nothing set -- default sort...
+	if(state == 'none'){
+		sortFilterSliders(DEFAULT_FILTER_ORDER)
+
+	// load existing sort state...
+	} else {
+		sortFilterSliders(getFilterOrder(target).concat(DEFAULT_FILTER_ORDER))
+	}
+	// make a snapshot...
+	saveSnapshot(target)
+}
+
+
+
+/**********************************************************************
+* Element constructors...
+*/
+
+function makeAbsRange(text, filter, target, min, max, dfl, step, translate, normalize){
+	min = min == null ? 0 : min
+	max = max == null ? 1 : max
+	dfl = dfl == null ? min : dfl
+	step = step == null ? 0.01 : step
+	translate = translate == null ? function(v){return v} : translate
+	normalize = normalize == null ? false : true
+
+	var elem = $('<div class="control range"></div>')
+		.attr({
+			id: filter,
+		})
+	$('<span class="title"/>')
+		.html(text)
+		.appendTo(elem)
+	var range = $('<input class="slider" type="range">')
+		.attr({
+			filter: filter,
+			min: min,
+			max: max,
+			step: step,
+			default: dfl,
+		})
+		.prop('normalize', normalize)
+		.val(dfl)
+		.change(function(){
+			var val = this.valueAsNumber
+			value.val(val)
+			updateFilter(target, filter, translate(val))
+			if(parseFloat(val) == dfl){
+				elem.addClass('at-default')
+			} else {
+				elem.removeClass('at-default')
+			}
+		})
+		.appendTo(elem)
+	var value = $('<input type="number" class="value"/>')
+		.attr({
+			min: min,
+			max: max,
+			step: step,
+		})
+		.val(dfl)
+		.change(function(){
+			range.val($(this).val()).change()
+		})
+		.appendTo(elem)
+	$('<button class="reset">&times;</button>')
+		.click(function(){
+			range.val(dfl).change()
+			resetFilter(target, filter)
+		})
+		.appendTo(elem)
+	return elem
+}
+function makeLogRange(text, filter, target){
+	return makeAbsRange(text, filter, target, -100, 100, 0, 0.1, r2v, true)
+}
+
+
+function makeControls(target){
+	// tool panel...
+	var panel = $('<details open/>')
+		.addClass('panel')
+		.css({
+			position: 'absolute',
+			top: '100px',
+			left: '100px',
+		})
+		.append($('<summary>Edit</summary>')
+			.append($('<span/>')
+				.addClass('close-button')
+				.click(function(){
+					$(this).parents('.panel').hide()
+					return false
+				})
+				.html('&times;')))
+		.draggable({
+			containment: 'parent',
+			scroll: false,
+		})
+
+	// wrapper for sub-panels...
+	var content = $('<span class="panel-content">')
+		.sortable({
+			forcePlaceholderSize: true,
+			start: function(e, ui){
+				 ui.placeholder.height(ui.helper.outerHeight());
+				 ui.placeholder.width(ui.helper.outerWidth());
+			},
+			opacity: 0.7,
+		})
+		.appendTo(panel)
+
+	// filters...
+	$('<details open/>')
+		.append($('<summary>Filters</summary>'))
+		.append($('<div class="sub-panel-content"/>')
+			.append($('<div class="filter-list"/>')
+				.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('Reset: ')
+			.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)
+				})))
+		.appendTo(content)
+
+	// snapshots...
+	$('<details open/>')
+		.append($('<summary>Snapshots</summary>'))
+		.append($('<div class="sub-panel-content"/>')
+			.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()
+					}
+					
+				})))
+		.appendTo(content)
+
+	return panel
+}
+
+
+
+/**********************************************************************
+* vim set: sw=4 ts=4 :												 */