title: Coffeescript dynamically create/call a function from a list on select box value change
body: <p>I'm working on adding some image editing tools using the <a href="http://www.pixastic.com/lib/docs/" rel="nofollow">Pixastic library</a>. The idea is that the user can choose an aspect of the image or tool they want from a select box, then the tool will show up below the select box (I'm using <a href="http://ivaynberg.github.com/select2/" rel="nofollow">select2</a>) and the user can edit via a slider. Here's what I have so far:</p>
  
  <pre><code># This seeds the select2 options list   
  imageToolsList = [
      {id: 'bl', text: 'Blur'}
      {id: 'bc', text: 'Brightness/Contrast'}
      {id: 'ca', text: 'Color Adjust (RGB)'}
      ...
  ]
  
  #Creates a select box and calls imageTooler function when the value of the box is changed
  $(".image_tools_select").each -&gt;
      $(@).select2
          placeholder: "Select an adjustment tool."
          data: imageToolsList
      $(@).on("change", (i) -&gt;
          imageTooler JSON.stringify(
              val: i.val
              clipName: $(@).closest('.clip').attr('id')
          )
      )
  
  # The function called on the value that the select box is changed to
  imageTooler = (i) -&gt;
      imageData = jQuery.parseJSON(i)
      iId = imageData.val
      imageClipName = imageData.clipName
      newTool = "&lt;div id=#{iId}&gt;&lt;label&gt;#{iId}&lt;/label&gt;&lt;div class='slider#{iId}'&gt;&lt;/div&gt;&lt;/div&gt;"
      $("##{imageClipName}").find(".imagetoolfields").append newTool
  </code></pre>
  
  <p>This succeeds in appending the name of the editing tool and the correct slider div beneath the select box when a tool is chosen, but what I'd really like is dynamically create a slider function for that particular tool and image (there are multiple images on a page, each with their own editing toolbelt). Here's a slider function that works for a the 'Blur' tool:</p>
  
  <pre><code>$('.sliderbl').slider
      min: 0
      max: 5
      value: 0.5
      step: 0.1
      range: "min"
      slide: (event, ui) -&gt;
          $("#img_snapshot_16").pixastic("blurfast", {amount:ui.value})
  </code></pre>
  
  <p>Is there a way to expand the imageToolsList so that it looks something like:</p>
  
  <pre><code>imageToolsList = [
      {id: 'bl', text: 'Blur', tool: $("##{imageClipName}").pixastic("blurfast", {amount:ui.value}), sliderVals: {min: 0, max: 5, value: 0.5, step: 0.1, range: "min"} }
      ...
  ]
  </code></pre>
  
  <p>and then dynamically create the jQuery slider functions for each tool in <code>imageTooler</code>, as is being done with the div and slider div?</p>