Coffeescript code that allows user to choose an Caman image filter from a dropdown list (using select2), creates a slider with the appropriate values for that filter, and then saves the final set of adjustments as a hash that can be sent back to the server and stored for later reference.

CamanImageEditor

camanCache = {}
imageValues = {}

$('.blimage, .largedisplay').each (->
  imgName = $(@).attr('id')
	loc = $(@).html()
	camanCache[imgName] = Caman(loc, "##{imgName}")
	$(@).css('height', '')
	imageValues[imgName] = {}
	)

imageToolsList = [
	{id: 'Opacity', text: 'Opacity'}
	{id: 'Brightness', text: 'Brightness'}
	{id: 'Contrast', text: 'Contrast'}
	{id: 'Exposure', text: 'Exposure'}
	{id: 'Gamma', text: 'Gamma'}
	{id: 'Hue', text: 'Hue'}
	{id: 'Noise', text: 'Noise'}
	{id: 'Saturation', text: 'Saturation'}
	{id: 'Sepia', text: 'Sepia'}
	{id: 'Vibrance', text: 'Vibrance'}
]

changify = (imageClipName) ->
	camanCache[imageClipName].revert ->
		clip = camanCache[imageClipName]
		for id, methods of imageValues when id == imageClipName
			for name, arg of methods
					clip = clip[name](arg)
			clip.render()
	console.log(imageValues)

sliderDef = 
	Brightness: {
		sliderVals: { min: -30, max: 30, value: 0, step: 5, range: "min"}
		tool: (imageClipName) -> 
			(event, ui) ->
				imageValues[imageClipName]["brightness"] = ui.value
				changify(imageClipName)
	}
	Contrast: {
		sliderVals: { min: -100, max: 100, value: 0, step: 10, range: "min"}
		tool: (imageClipName) -> 
			(event, ui) ->
				imageValues[imageClipName]["contrast"] = ui.value
				changify(imageClipName)
	}
	Exposure: {
		sliderVals: { min: -100, max: 100, value: 0, step: 5, range: "min"}
		tool: (imageClipName) -> 
			(event, ui) ->
				imageValues[imageClipName]["exposure"] = ui.value
				changify(imageClipName)
	}
	Gamma: {
		sliderVals: { min: 0, max: 4, value: 1, step: 0.5, range: "min"}
		tool: (imageClipName) -> 
			(event, ui) ->
				imageValues[imageClipName]["gamma"] = ui.value
				changify(imageClipName)
	}
	Hue: {
		sliderVals: { min: 0, max: 100, value: 0, step: 5, range: "min"}
		tool: (imageClipName) -> 
			(event, ui) ->
				imageValues[imageClipName]["hue"] = ui.value
				changify(imageClipName)
	}
	Noise: {
		sliderVals: { min: 0, max: 100, value: 0, step: 5, range: "min"}
		tool: (imageClipName) -> 
			(event, ui) ->
				imageValues[imageClipName]["noise"] = ui.value
				changify(imageClipName)
	}
	Saturation: {
		sliderVals: { min: -100, max: 100, value: 0, step: 5, range: "min"}
		tool: (imageClipName) -> 
			(event, ui) ->
				imageValues[imageClipName]["saturation"] = ui.value
				changify(imageClipName)
	}
	Sepia: {
		sliderVals: { min: 0, max: 100, value: 0, step: 5, range: "min"}
		tool: (imageClipName) -> 
			(event, ui) ->
				imageValues[imageClipName]["sepia"] = ui.value
				changify(imageClipName)
	}
	Vibrance: {
		sliderVals: { min: -100, max: 100, value: 0, step: 5, range: "min"}
		tool: (imageClipName) -> 
			(event, ui) ->
				imageValues[imageClipName]["vibrance"] = ui.value
				changify(imageClipName)
	}
	Opacity: {
		sliderVals: { min: 0, max: 1, value: 1, step: 0.01, range: "min"}
		tool: (imageClipName) -> 
			(event, ui) ->
				console.log("##{imageClipName}")
				$("##{imageClipName}").css('opacity', ui.value)
	}

$(".image_tools_select").each ->
	$(@).select2
		placeholder: "Add an adjustment tool"
		data: imageToolsList
	$(@).on("change", (i) ->
		imageTooler JSON.stringify(
			val: i.val
			clipName: $(@).closest('.clip').attr('id')
		)
	)

imageTooler = (i) ->
	imageData = jQuery.parseJSON(i)
	iId = imageData.val
	imageClipName = imageData.clipName
	createSlider(iId, imageClipName)

createSlider = (id, imageClipName) ->
	newTool 	= "<div id=#{id}><label>#{id}</label><div class='slider#{id}'></div></div>"
	img 			= "img_" + imageClipName
	slide     = sliderDef[id].tool(img)
	args      = $.extend({ }, sliderDef[id].sliderVals, slide: slide)
	$("##{imageClipName}").find(".imagetoolfields").append newTool
	$(".slider#{id}").slider(args)

$(".reset_button").click( ->
	img = "img_" + $(@).closest(".clip").attr('id')
	$("##{img}").css('opacity', 1)
	imageValues[img] = {}
	console.log($("[class^='slider']"))
	$("[class^='slider']").slider("value", 0)
	changify(img)
)