ample_assets 0.0.1

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2011 YOURNAME
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.textile

@@ -0,0 +1,68 @@
+h1. Ample Assets
+
+AmpleAssets is a mountable engine that provides drag & drop file-management for Rails 3.2 applications.
+
+!http://ample.github.com/ample_assets/images/assets.png!
+
+h3. Example Usage
+
+Add the following to your Gemfile and bundle...
+
+<code>
+gem 'ample_assets', :git => 'https://github.com/ample/ample_assets.git'
+</code>
+
+Run the generator to copy over the necessary migrations... 
+
+<code>
+rails g ample_assets:install
+</code>
+
+You'll need to create a foreign_key on the model with which you plan to integrate AmpleAssets. For the purposes of this example, let's assume your model is named @Post@...
+
+<code>rails g migration add_file_id_to_posts file_id:integer</code>
+
+Now you're ready to migrate... 
+
+<code>rake db:migrate</code>
+
+Add the following plugin to your model... 
+
+<pre><code>class Post < ActiveRecord::Base
+  ...
+  has_asset
+  ...
+end</code></pre>
+
+In both of your manifest files (stylesheets & javascripts) require ample_assets, for example...
+
+<pre><code>/**
+ *= require ample_assets
+ */
+</code></pre>
+
+Add the engine to your app's routes.rb file... 
+
+<code>
+mount AmpleAssets::Engine => "/ample_assets", :as => "ample_assets"
+</code>
+
+To invoke the asset toolbar, include the following in any view...
+
+<code>
+<%= assets_toolbar %>
+</code>
+
+To invoke a new drop_target, include the following within a form attached to your model... 
+
+<pre><code><%= form_for current_page do |f| %>
+  <%= f.asset_drop(:file_id) %>
+<% end %>
+</code></pre>
+
+h3. Configuration
+
+<pre><code>AmpleAssets.configure do |config|
+  config.mount_at = YOUR PATH PREFIX
+end
+</code></pre>

data/Rakefile

@@ -0,0 +1,38 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'AmpleAssets'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = true
+  t.ruby_opts << '-rturn'
+end
+
+task :default => :test

data/app/assets/javascripts/ample_assets.js

@@ -0,0 +1 @@
+//= require ./ample_assets/application

data/app/assets/javascripts/ample_assets/application.js

@@ -0,0 +1,18 @@
+// This is a manifest file that'll be compiled into including all the files listed below.
+// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
+// be included in the compiled file accessible from http://example.com/assets/application.js
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+//= require jquery
+//= require jquery-ui
+//= require jquery_ujs
+//= require jquery.ample_panels
+//= require jquery.facebox
+//= require jquery.uploadify
+//= require moustache
+//= require pdfobject
+//= require swfobject
+//= require coffee_cup
+//= require_tree ./classes
+//= require ./files

data/app/assets/javascripts/ample_assets/classes/ample_assets_gravity.js.coffee

@@ -0,0 +1,86 @@
+# **AmpleAssets** is drag and drop file management for Rails applications. 
+# 
+class window.AmpleAssetsGravity extends CoffeeCup
+  
+  default_options: 
+    debug: false
+    uid: false
+    url: "/ample_assets/files/{{ id }}/gravity"
+    min_width: 100
+    min_height: 100
+    max_width: 480
+    max_height: 300  
+  
+  init: ->
+    @log "init()"
+    @handle = $("#asset-gravity-handle")
+    @image = $(".asset-media img")
+    @test()
+  
+  test: ->
+    if @image.width() > 0
+      @html()
+    else
+      @log "@image not loaded"
+      setTimeout (=> @test()), 500
+  
+  html: ->
+    @log "html()"
+    # Don't show this for tiny images
+    return false unless @image.height() > @options.min_width && @image.height() > @options.min_height
+    @gravity = $("#file_attachment_gravity").val() || "c"
+    @gravity_grid =
+      top: @image.height() / 3
+      left: @image.width() / 3
+    @image_pos = @image.position()
+    @image_center =
+      top:  (@image_pos.top  + (@image.height() / 2) - (@handle.height() / 2))
+      left: (@image_pos.left + (@image.width()  / 2) - (@handle.width()  / 2))
+    @handle.css
+      position: "absolute"
+      left: (@image_center.left - @gravity_grid.left) + (@gravity_grid.left * @gravities()[@gravity][0])
+      top:  (@image_center.top  - @gravity_grid.top)  + (@gravity_grid.top  * @gravities()[@gravity][1])
+    @handle.draggable
+      containment: @image
+      grid: [@gravity_grid.left, @gravity_grid.top]
+      scroll: false,
+      start: (event, ui) =>
+        $('div.ui-droppable, textarea.ui-droppable').addClass('asset-inactive-target')
+      stop: (event, ui) =>
+        $('div.ui-droppable, textarea.ui-droppable').removeClass('asset-inactive-target')
+        
+        left = ui.position.left
+        top = ui.position.top
+        
+        # Account for images smaller than max width and/or height. 
+        left = Math.abs(((@options.max_width - @image.width()) / 2) - left) if @image.width() < @options.max_width
+        top = Math.abs(((@options.max_height - @image.height()) / 2) - top) if @image.height() < @options.max_height
+        
+        gravity_pos = [ Math.floor(left / @gravity_grid.left), Math.floor(top / @gravity_grid.top) ]
+        
+        for key, value of @gravities()
+          if value[0] is gravity_pos[0] and value[1] is gravity_pos[1]
+            gravity = key
+            break
+        $("#file_attachment_gravity").val(gravity);
+        @submit(gravity)
+        @log gravity
+    @handle.fadeIn()
+  
+  submit: (gravity) ->
+    @log "submit(#{gravity})"
+    $.post @options.url, { gravity: gravity }, (e) =>
+      $("a[data-uid='#{@options.uid}']").attr('data-gravity',gravity)
+      $('#asset-gravity-notification').show().delay(2500).fadeOut()
+  
+  gravities: ->
+    nw: [ 0, 0 ]
+    n:  [ 1, 0 ]
+    ne: [ 2, 0 ]
+    w:  [ 0, 1 ]
+    c:  [ 1, 1 ]
+    e:  [ 2, 1 ]
+    sw: [ 0, 2 ]
+    s:  [ 1, 2 ]
+    se: [ 2, 2 ]
+  

data/app/assets/javascripts/ample_assets/classes/ample_assets_toolbar.js.coffee

@@ -0,0 +1,769 @@
+# **AmpleAssets** is drag and drop file management for Rails applications. 
+# 
+class window.AmpleAssetsToolbar extends CoffeeCup
+  
+  default_options: 
+    debug: false
+    expanded: false
+    id: "ample-assets"
+    handle_text: 'Assets'
+    expanded_height: 180
+    collapsed_height: 0
+    base_url: '/ample_assets'
+    search_url: '/files/search'
+    thumb_url: '/files/thumbs'
+    show_url: '/files/{{ id }}'
+    touch_url: '/files/{{ id }}/touch'
+    gravity_url: '/files/{{ id }}/gravity'
+    onInit: ->
+    onExpand: ->
+    onCollapse: ->
+    panels_options:
+      debug: false
+      width: 950
+      height: 100
+      orientation: 'vertical'
+      key_orientation: 'vertical'
+      keyboard_nav: true
+      auto: false
+      parent: 'div'
+      children: 'div.page'
+    pages_options:
+      interval: 5000
+      width: 81 
+      height: 81
+      enabled: true
+      distance: 10
+      auto: false
+      orientation: 'horizontal'
+      key_orientation: 'horizontal'
+      per_page: 10
+    pages: [
+      { 
+        id: 'recent-assets', 
+        title: 'Recently Viewed',
+        url: '',
+        panels: false
+      }
+    ]
+  
+  # Initialize product toolbar and drop targets. 
+  init: ->
+    @options.onInit()
+    super
+    @setup()
+    @events()
+  
+  # Setup global parameters & class options. 
+  set_options: (opts) ->
+    @current = 0
+    @keys_enabled = true
+    @reloading = false
+    @searching = false
+    @loaded = false
+    super
+  
+  # Build structure and stylize layout of toolbar, setup drag, drop and search logic.
+  # Opens first tab if toolbar is expanded on init.
+  setup: ->
+    id = @options.id
+    layout = Mustache.to_html(@tpl('layout'),{ id: id, pages: @get_pages(), tabs: @get_pages('tab') })
+    @handle = Mustache.to_html(@tpl('handle'),{ id: id, title: @options.handle_text })
+    html = $(layout)
+    $('body').append(html).append(@handle)
+    @style()
+    @drag_drop()
+    @search()
+    @goto(0) if @options.expanded
+  
+  # Set initial styles on toolbar elements.
+  style: ->
+    handle_opts = 
+      position: 'absolute'
+      bottom: 0
+      right: 0
+    $("##{@options.id}-handle").css(handle_opts)
+    
+    @loading = $("##{@options.id}-tabs span.asset-loading")
+    $("##{@options.id} .container").css('height',200)
+    if @options.expanded
+      $("##{@options.id}").css({height:@options.expanded_height});
+  
+  # Reloads tab identified by `i`
+  reload: (i) ->
+    @log "reload(#{i})"
+    @reloading = true
+    if i < @options.pages.length - 1 
+      @empty(i)
+      @options.pages[i]['loaded'] = false
+      @options.pages[i]['pages_loaded'] = false
+      @options.pages[i]['last_request_empty'] = false
+      $(@options.pages[i]['panel_selector']).amplePanels('goto', 0)
+      @goto(i)
+      @enable_panel(i)
+  
+  # Empties the contents of the page identified by `i`
+  empty: (i) ->
+    @log "empty(#{i})"
+    selector = "##{@options.id} .pages .page:nth-child(#{(i+1)})" 
+    selector += " ul" if @options.pages[i]['panels']
+    $(selector).empty()
+  
+  # Hide and deactivate current page, load next page identified by `i`
+  goto: (i) ->
+    @log "goto(#{i})"
+    @show(i)
+    @disable_panels()
+    @activate(i)
+    @load(i) unless @already_loaded(i)
+    @enable_panel(i) if @already_loaded(i)
+  
+  # Hide all pages, show page identified by `i`
+  show: (i) ->
+    $("##{@options.id} .pages .page").hide()
+    $("##{@options.id} .pages .page:nth-child(#{i+1}), ##{@options.id} .pages .page:nth-child(#{i+1}) ul").show()
+  
+  # Implement drag & droppable instances, with appropriate callbacks.
+  drag_drop: ->
+    base_url = @options.base_url
+    thumb_url = @options.thumb_url
+    ref = this
+    
+    # Note the use of liveDraggable here. See extended plugin at the bottom of this file.
+    $(".draggable").liveDraggable
+      appendTo: "body"
+      helper: "clone"
+      start: ->
+        $('div.ui-droppable, textarea.ui-droppable').addClass('asset-drop-target')
+      stop: ->
+        $('div.ui-droppable, textarea.ui-droppable').removeClass('asset-drop-target')
+    
+    $("textarea").droppable
+      activeClass: "asset-notice"
+      hoverClass: "asset-success"
+      drop: (event, ui) ->
+        unless $(ui.helper).data('role') == 'gravity'
+          ref.target_textarea = this
+          ref.resize_modal(ui.draggable)
+    
+    $(".droppable").droppable
+      activeClass: "asset-notice"
+      hoverClass: "asset-success"
+      drop: (event, ui) ->
+        unless $(ui.helper).data('role') == 'gravity'
+          $(this).html ui.draggable.clone()
+          asset_id = $(ui.draggable).attr("id").split("-")[1]
+          $(this).parent().children().first().val asset_id
+          $(this).parent().find('a.asset-remove').removeClass('hide').show()
+  
+  # Build html for modal windows wherein users can resize the asset's dimensions & geometry.
+  # Executes when dropping a file into a textarea. The first argument is the response 
+  # from the droppable callbacks defined above.
+  resize_modal: (el) ->
+    uid = $(el).attr("data-uid")
+    size = $(el).attr("data-size")
+    orientation = $(el).attr("data-orientation")
+    base_url = @options.base_url
+    thumb_url = @options.thumb_url
+    geometry = '100x>'
+    opts = 
+      src: "#{base_url}#{thumb_url}/#{geometry}?uid=#{uid}"
+      orientation: orientation
+      dimensions: size
+      uid: uid
+    html = Mustache.to_html(@tpl('drop'), opts)
+    $.facebox("<div class=\"asset-detail\">#{html}</div>")
+  
+  # Removes active state from all tabs, adds it back for tab identified by `i`
+  activate: (i) ->
+    @log "activate(#{i})"
+    @current = i
+    tabs = $("##{@options.id} a.tab")
+    tabs.removeClass('on')
+    tabs.eq(i).addClass('on')
+  
+  # Highlight & load next tab (right) by incrementing `@current`
+  next: ->
+    if @current < @options.pages.length - 1
+      @log "next()"
+      @current += 1
+      @goto(@current)
+  
+  # Highlight & load previous tab (left) by decrementing `@current`
+  previous: ->
+    unless @current == 0
+      @log "previous()"
+      @current -= 1
+      @goto(@current)
+  
+  # Loops through all pages, generates HTML and returns concatenated string of everything.
+  get_pages: (tpl = 'page') ->
+    html = ''
+    $.each @options.pages, (idx,el) => 
+      el['classes'] = 'first-child' if idx == 0
+      html += Mustache.to_html @tpl(tpl), el
+    html
+  
+  # Expands and collapses asset toolbar.
+  toggle: ->
+    el = $("##{@options.id}")
+    if @options.expanded 
+      @options.expanded = false
+      $('body').animate {'padding-bottom': 0}, "fast"
+      el.animate {height: @options.collapsed_height}, "fast", =>
+        @collapse()
+        @options.onCollapse()
+        el.trigger('collapse')
+    else
+      $("##{@options.id}-handle").hide()
+      @options.expanded = true
+      $('body').animate {'padding-bottom': @options.expanded_height}, "fast"
+      el.animate {height: @options.expanded_height}, "fast", =>
+        @expand()
+        @options.onExpand()
+        el.trigger('expand')
+  
+  # Loads contents of page identified by `i`
+  load: (i) ->
+    @log "load(#{i})"
+    ref = this
+    load_next_page = true 
+    load_next_page = false if @options.pages[i]['last_request_empty']
+    load_next_page = true if @reloading
+    
+    if @options.pages[i]['url'] && load_next_page
+      @loading.show()
+      url = @next_page_url(i)
+      data_type = @options.pages[i]['data_type'] if @options.pages[i]['data_type']
+      $.get url, (response, xhr) ->
+        ref.loading.hide()
+        ref.options.pages[i]['loaded'] = true 
+        # If response is empty, let users know by loading an empty notification.
+        if $.trim(response) == '' || response.length == 0
+          ref.options.pages[i]['last_request_empty'] = true
+          ref.load_empty(i) if ref.reloading || !ref.options.pages[i]['panel_selector']
+        else 
+          switch data_type
+            when "json"
+              # Parse json for requests of that type.
+              ref.load_json i, response
+            when "html"
+            else
+              # Parse html by default or for requests of that specific type.
+              ref.load_html i, response
+      , data_type
+    else
+      # Notify console if we couldn't load a page due to a missing URL.
+      @log "ERROR --> Couldn't load page because there was no url" unless @options.pages[i]['last_request_empty']
+  
+  # For empty requests, insert notification text into page identified by `i`
+  load_empty: (i) ->
+    @log "load_empty(#{i})"
+    empty = Mustache.to_html(@tpl('empty'))
+    @load_html(i, empty)
+    @loading.hide()
+    $('li.empty').css('width',$('.ampn').first().width())
+    $('li.empty a').click =>
+      @goto(@options.pages.length-2)
+  
+  # Load html content returned as `response` by XHR request into page identified by `i`
+  load_html: (i, response) ->
+    @log "load(#{i}) html"
+    selector = "##{@options.id} .pages .page:nth-child(#{(i+1)})" 
+    selector += " ul" if @options.pages[i]['panels'] || @searching
+    $(selector).html(response).show()
+    @panels(i)
+  
+  # Parse `response` as json data and build list-items for each element contained therein.
+  # This method assumes page identified by `i` contains an ample_panels instance.
+  load_json: (i, response) ->
+    @log "load(#{i}) json"
+    panels_loaded = if @options.pages[i]['panel_selector'] then true else false
+    ref = this
+    selector = "##{@options.id} .pages .page:nth-child(#{(i+1)}) ul" 
+    $.each response, (j,el) ->
+      link = ref.build(el)
+      li = $('<li class="file"></li>').append(link)
+      if panels_loaded
+        $(selector).amplePanels('append', li)
+      else
+        $(selector).append(li)
+      ref.load_img(li.find('a'), el.sizes.tn)
+    $(selector).show()
+    @panels(i) unless panels_loaded
+    if @reloading
+      @reloading = false
+      @controls() 
+  
+  # Parse `response` from search results as json data. 
+  load_results: (response) ->
+    @log "load_results()"
+    i = @options.pages.length - 1
+
+    if response.length > 0
+      # Build list-item for each item returned from search query.
+      $.each response, (j,el) =>
+        link = @build(el)
+        li = $('<li class="file"></li>').append(link)
+        $("#asset-results ul").amplePanels('append', li)
+        @load_img(link, el.sizes.tn)
+    else
+      # No results were returned, inject no-results verbiage.
+      no_results = Mustache.to_html(@tpl('no_results'))
+      @load_html(i, no_results)
+      @loading.hide()
+      $('li.empty').css('width',$('.ampn').first().width())
+      
+    @options.pages[i]['panel_selector'] = "#asset-results ul"
+    @active_panel = $(@options.pages[i]['panel_selector'])
+    @searching = false
+    @loading.hide()
+    @controls()
+  
+  # Builds each asset instance with proper attributes. 
+  build: (el) ->
+    ref = this
+    show_url = Mustache.to_html @options.show_url, { id: el.id }
+    link = $("<a href=\"#{@options.base_url}#{show_url}\" draggable=\"true\"></a>")
+      .attr('id',"file-#{el.id}")
+      .attr('data-uid',"#{el.uid}")
+      .attr('data-filename',"#{el.filename}")
+      .attr('data-gravity', el.gravity)
+      .addClass('draggable')
+    if el.document == 'true'
+      link.addClass('document')
+    else
+      link.attr('data-orientation',el.orientation)
+      link.attr('data-size',el.size)
+    link.click ->
+      # Open a modal window on any asset instance's click event.
+      ref.modal_open(el)
+      false
+    link
+  
+  # Opens modal window instance for asset detail. 
+  modal_open: (data) ->
+    @modal_active = true
+    if data.document == 'true'
+      # Asset is a document, so lets instantiate PDFObject for viewing inline.
+      html = Mustache.to_html @tpl('pdf'),
+        filename: data.uid, 
+        id: data.id,
+        mime_type: data.mime_type
+      $.facebox("<div class=\"asset-detail\">#{html}</div>")
+      myPDF = new PDFObject(
+        url: data.url
+        pdfOpenParams:
+          view: "Fit"
+      ).embed("pdf")
+    else
+      # Asset is an image, lets display it inline, according to its orientation. 
+      geometry = if data.orientation == 'portrait' then 'x300>' else '480x>'
+      url = "#{@options.base_url}#{@options.thumb_url}/#{geometry}?uid=#{data.uid}"
+      delete_url = Mustache.to_html @options.show_url, { id: data.id }
+      gravity_url = Mustache.to_html @options.gravity_url, { id: data.id }
+      gravity = $("a[data-uid='#{data.uid}']").first().attr('data-gravity')
+      keywords = ""
+      html = Mustache.to_html @tpl('show'),
+        filename: data.filename, 
+        size: data.size,
+        mime_type: data.mime_type,
+        keywords: keywords,
+        src: url, 
+        orientation: data.orientation, 
+        id: data.id,
+        uid: data.uid,
+        gravity: gravity,
+        delete_url: "#{@options.base_url}#{delete_url}",
+        gravity_url: "#{@options.base_url}#{gravity_url}"
+      $.facebox("<div class=\"asset-detail\">#{html}</div>")
+    # Update the asset timestamp.
+    @touch(data)
+  
+  # Create new image element from `src`, insert into `el` and fadeIn opacity.
+  load_img: (el,src) ->
+    img = new Image()
+    $(img).load(->
+      $(this).hide()
+      $(el).html this
+      $(this).fadeIn()
+    ).attr src: src
+  
+  # Generates the next URL for paginated record sets.
+  next_page_url: (i) ->
+    @options.pages[i]['pages_loaded'] = 0 unless @options.pages[i]['pages_loaded']
+    @options.pages[i]['pages_loaded'] += 1
+    "#{@options.pages[i]['url']}?page=#{@options.pages[i]['pages_loaded']}"
+  
+  # By touching asset records, we update the timestamp value which ensures our recently
+  # viewed tab contains accurate results. Called from `modal_open()`
+  touch: (el) ->
+    @log "touch()"
+    touch_url = Mustache.to_html @options.touch_url, { id: el.id }
+    $.post "#{@options.base_url}#{touch_url}"
+  
+  # Instantiate an amplePanels instance within page `i` if `@options.pages[i]['panels']` is true.
+  panels: (i) ->
+    ref = this
+    if @options.pages[i]['panels']
+      @log "panels(#{i})"
+      el = "##{@options.id} .pages .page:nth-child(#{(i+1)}) ul"
+      @options.pages[i]['panel_selector'] = el
+      @active_panel = el
+      @options.pages[i][''] = $(el).attr('id',"#{@options.pages[i]['id']}-panel")
+      $(el).parent().addClass('panels')
+      @controls()
+      $(el).amplePanels(@options.pages_options)
+        .bind 'slide_horizontal', (e,d,dir) ->
+          ref.load(i) if dir == 'next'
+  
+  # Disable all panels, preventing any loading or key-driven actions from taking place within any amplePanels instance.
+  disable_panels: ->
+    @log "disable_panels()"
+    ref = this
+    @controls(false)
+    $.each @options.pages, (i,el) ->
+      $(ref.options.pages[i]['panel_selector']).amplePanels('disable') if ref.options.pages[i]['panel_selector']
+  
+  # Enable panels instance contained with page identified by `i`. 
+  # This allows key-events and previous/next actions to be executed. 
+  enable_panel: (i) ->  
+    @log "enable_panel(#{i})"
+    if @options.pages[i]['panel_selector']
+      @active_panel = @options.pages[i]['panel_selector']
+      $(@options.pages[i]['panel_selector']).amplePanels('enable') 
+      @controls()
+  
+  # Toggles display of left/right arrows which control amplePanels paging event, determined by `display`.
+  controls: (display=true) ->
+    @log "controls(#{display})"
+    display = false if $(@active_panel).find('li').length < @options.pages_options.per_page
+    switch display
+      when true
+        $('nav.controls').show()
+      when false
+        $('nav.controls').hide()
+  
+  # Evaluates whether URL attached to page `i` has been loaded yet. Returns `boolean`.
+  already_loaded: (i) ->
+    typeof @options.pages[i]['loaded'] == 'boolean' && @options.pages[i]['loaded']
+  
+  # Removes the asset from drop-target identified by `el`.
+  remove: (el) ->
+    parent = $(el).parent()
+    parent.find('.droppable').empty().html('<span>Drag Asset Here</span>')
+    parent.find('input').val('')
+    $(el).hide()
+  
+  # Called upon successful DELETE request for a specific asset. Removes any instances of
+  # asset identified by `id`, closes the modal window and reloads the first tab.
+  delete: (id) ->
+    @log "delete(#{id})"
+    $("a#file-#{id}").parent().remove()
+    $(document).trigger('close.facebox')
+    @reload(0)
+    false
+  
+  # Upon collapse, we disable panels.
+  collapse: ->
+    $("##{@options.id}-handle").css('bottom',-35).show().animate({'bottom': 0},'fast')
+    @disable_panels()
+  
+  # Expands the asset toolbar and reenables the currently loaded tab. 
+  expand: ->
+    @goto(@current)
+  
+  # Setup all associated events.
+  events: ->
+    @modal_events()
+    @global_events()
+    @field_events()
+    @drop_events()
+    @drag_events()
+    @reload_events()
+    @resize_events()
+    @key_events()
+    @tab_events()
+    ref = this
+    # Collapse toolbar
+    $("##{@options.id} a.collapse").live 'click', =>
+      @toggle()
+    # Reload the first tab following a successful upload. 
+    $('body').bind 'ample_uploadify.complete', =>
+      @reload(0)
+    # Bind event to succesful deletion of an asset.
+    $("a.asset-delete").live 'ajax:success', ->
+      id = parseInt $(this).attr('data-id')
+      ref.delete(id)
+    # Bind live event to any asset-remove element.
+    $("a.asset-remove").live 'click', ->
+      ref.remove(this)
+      false
+    # Bind `toggle()` method to toolbar handle.
+    $("##{@options.id}-handle").live 'click', =>
+      @toggle()
+      false
+  
+  # Bind events for global left/right arrows to currently active panel's `previous()` and `next()` methods. 
+  global_events: ->
+    $('a.global.next').click =>
+      $(@active_panel).amplePanels('next')
+    $('a.global.previous').click =>
+      $(@active_panel).amplePanels('previous')
+  
+  # TODO: kill key events during drag?
+  drag_events: ->
+    @log "drag_events()"
+  
+  # Open modal window when clicking an asset contained with a drop-target.
+  drop_events: ->
+    ref = this
+    $('.asset-drop .droppable a').live 'click', ->
+      id = $(this).attr("href")
+      $.get $(this).attr("href"), (response) ->
+        ref.modal_open(response)
+      , 'json'
+      false
+  
+  # Toggle the active state of key_events when user focuses / blurs on textareas or input fields.
+  field_events: ->
+    @log "field_events()"
+    $('textarea, input').live 'blur', =>
+      @keys_enabled = true
+    $('textarea, input').live 'focus', =>
+      @keys_enabled = false
+  
+  # Bind `reload()` method to assets-reload button. 
+  reload_events: ->
+    @log "reload_events()"
+    reload = $('<a href="#" class="assets-reload"><span></span></a>')
+    reload.appendTo('.asset-refresh').click (e) =>
+      @reload(@current)
+  
+  # Builds the markup for an asset dropped into a textarea. 
+  resize_events: ->
+    $('.asset-resize').live 'click', =>
+      constraints = $('#asset-constraints').val()
+      uid = $('#asset-uid').val()
+      width = $('#asset-width').val()
+      height = $('#asset-height').val()
+      alt = $('#asset-alt').val()
+      geometry = "#{width}x#{height}#{constraints}"
+      if constraints == '#' && (width == '' || height == '')
+        alert 'Can\'t resize image using this geometry. Please select another option or supply a value for both width and height.'
+      else 
+        url = encodeURI "#{@options.base_url}#{@options.thumb_url}/#{geometry}?uid=#{uid}"
+        url = url.replace('#','%23')
+        textile = "!#{url}(#{alt})!"
+        html = "<img src=\"#{url}\" alt=\"#{alt}\" />"
+        $(@target_textarea).insertAtCaret (if $(@target_textarea).hasClass('textile') then textile else html)
+        $(document).trigger('close.facebox')
+  
+  # Toggles params when modal window is opened or closed. 
+  modal_events: ->
+    @modal_active = false
+    $(document).bind 'afterClose.facebox', =>
+      @keys_enabled = true
+      @modal_active = false
+    $(document).bind 'loading.facebox', =>
+      @keys_enabled = false
+      @modal_active = true
+  
+  # Setup amplePanels instance for search results and bind search field to methods that 
+  # execute request and parse response. 
+  search: ->
+    @log 'search()'
+    search_url = "#{@options.base_url}#{@options.search_url}"
+    i = ($("##{@options.id} .pages .page").length - 1)
+    ref = this
+    $('#asset-results ul').attr('id','assets-result-list').amplePanels(@options.pages_options)
+    @options.pages[i] = { loaded: true }
+    $('#asset-search').bind 'change', ->
+      $("#asset-results ul").amplePanels('empty')
+      ref.loading.show()
+      ref.controls(false)
+      ref.show(i)
+      ref.activate(i)
+      ref.searching = true
+      $('.asset-results').show()
+      $.post search_url, $(this).serialize(), (response) ->
+        ref.load_results(response)
+      , 'json'
+  
+  # Bind events to tabs. 
+  tab_events: ->
+    tabs = $("##{@options.id} a.tab")
+    ref = this
+    $.each tabs, (idx, el) ->
+      $(this).addClass('on') if idx == 0
+      $(el).click ->
+        ref.goto(idx)
+        false
+  
+  # Controls all user keyboard events. Binds as neccesary and 
+  # prevents interaction when key functions are disabled. 
+  key_events: ->
+    ref = this
+    previous = 37
+    next = 39
+    up = 38
+    down = 40
+    escape = 27
+    
+    # Why does this need to be on keyup?
+    $(document).keyup (e) =>
+      return unless @keys_enabled
+      switch e.keyCode
+        when escape
+          @toggle() unless @modal_active
+      e.stopPropagation();
+    
+    # Keydown events.
+    $(document).keydown (e) =>
+      return unless @keys_enabled
+      if @active_panel
+        switch e.keyCode
+          when previous
+            $(@active_panel).amplePanels('previous')
+          when next
+            $(@active_panel).amplePanels('next')
+          when up
+            @previous()
+          when down
+            @next()
+      e.stopPropagation();
+  
+  # Returns Mustache template for template defined by `view`
+  tpl: (view) ->
+    @tpls()[view]
+  
+  # Returns object containing all Mustache templates.
+  tpls: ->
+    # Layout returns the HTML structure of the main asset toolbar.
+    layout: '
+    <div id="{{ id }}"><div class="background">
+      <a href="#" class="collapse">Close</a>
+      <div class="container">
+        <div id="{{ id }}-tabs" class="tabs">
+          <div class="asset-refresh"></div>
+          <div class="asset-search">
+            <input type="text" id="asset-search" name="q" placeholder="Enter keywords..." />
+            <label for="asset-search">Search</label>
+          </div>
+          {{{ tabs }}}
+          <a href="#" data-role="asset-search-results" class="tab asset-results">Results</a>
+          <span class="asset-loading"></span>
+        </div>
+        <div id="{{ id }}-pages" class="pages">
+          {{{ pages }}}
+          <div id="asset-results" class="page panels">
+            <ul></ul>
+          </div>
+        </div>
+        <nav class="controls">
+          <a href="#" class="global previous">Previous</a>
+          <a href="#" class="global next">Next</a>
+        </nav>
+      </div></div>
+    </div>'
+    # Handle returns HTML for the asset toolbar toggle handle.
+    handle: '<a href="#" id="{{ id }}-handle" class="handle">{{ title }}</a>'
+    # Tab returns HTML for each tab instance. 
+    tab: '<a href="#" data-role="{{ id }}" class="tab {{ classes }}">{{ title }}</a>'
+    # Page returns generic HTML structure for each page.
+    page: '
+    <div id="{{ id }}" class="page">
+      <ul></ul>
+    </div>'
+    # Show represents the HTML used within the modal window detail view for non-document assets.
+    show: '
+    <div class="asset-detail">
+      <div class="asset-media {{ orientation }}">
+        <img src="{{ src }}" />
+      </div>
+      <input id="file_attachment_gravity" name="file[attachment_gravity]" type="hidden" value="{{ gravity }}">
+      <div id="asset-gravity-handle" style="display:none" data-role="gravity"></div>
+      <script type="text/javascript">
+        $(document).ready(function() {
+        	new AmpleAssetsGravity({url: "{{ gravity_url }}", uid: "{{ uid }}"});
+        });
+      </script>
+      <div id="asset-gravity-notification">Asset updated successfully.</div>
+      <a href="{{ delete_url }}" class="asset-delete" data-id="{{ id }}" data-method="delete" data-confirm="Are you sure?" data-remote="true">Delete This Asset?</a>
+      <h3>{{ filename }}</h3><hr />
+      <ul>
+        <li>Original Dimensions: <strong>{{ size }}</strong></li>
+        <li>MimeType: <strong>{{ mime_type }}</strong></li>
+        <li>Orientation: <strong>{{ orientation }}</strong></li>
+      </ul>
+      <p>{{ keywords }}</p>
+    </div>'
+    # PDF represents the HTML used within the modal window detail view for document assets.
+    pdf: '
+    <div class="asset-detail">
+      <div id="pdf" class="asset-media"></div>
+        <a href="{{ delete_url }}" class="asset-delete" data-id="{{ id }}" data-method="delete" data-confirm="Are you sure?" data-remote="true">Delete This Asset?</a>
+        <h3>{{ filename }}</h3><hr />
+        <ul>
+          <li>MimeType: <strong>{{ mime_type }}</strong></li>
+        </ul>
+        <p>{{ keywords }}</p>
+    </div>'
+    # There's no content within this panels instance... 
+    empty: '<li class="empty">Oops. There\'s nothing here. You should <a href="#">upload something</a>.</li>'
+    # Your search query returned an empty result set...
+    no_results: '<li class="empty">Sorry. Your search returned zero results.</li>'
+    # Drop returns HTML used in the modal window resize view. This is used when dropping an asset onto a textarea.
+    drop: '
+    <div class="asset-selection">
+      <div class="asset-media {{ orientation }}">
+        <img src="{{ src }}" />
+      </div>
+      <div class="asset-dimensions">
+        <p><label>Image Dimensions</label> ({{ dimensions }}, {{ orientation }})</p>
+        <p><select id="asset-constraints" name="asset-constraints">
+            <option value="">Maintain aspect ratio</option>
+            <option value="!">Force resize, don\'t maintain aspect ratio</option>
+            <option value=">">Resize only if image larger than this</option>
+            <option value="<">Resize only if image smaller than this</option>
+            <option value="^">Resize to minimum x,y, maintain aspect ratio</option>
+            <option value="#">Resize, crop if necessary to maintain aspect ratio</option>
+           </select></p>
+        <p><input type="hidden" id="asset-dimensions-target" name="asset-dimensions-target" value="" />
+           <input type="hidden" id="asset-uid" name="asset-uid" value="{{ uid }}" />
+           <input type="text" id="asset-width" name="asset-width" value="480" /> <span>x</span> 
+           <input type="text" id="asset-height" name="asset-height" value="" /><br />
+           <input type="text" id="asset-alt" name="asset-alt" value="" placeholder="Alt text" />
+           <input type="submit" id="asset-resize" name="asset-resize" class="asset-resize" value="Insert" /></p>
+        
+      </div>
+      <hr class="space" />
+    </div>'
+    
+
+# Extend draggable to elements added to the DOM after page load. 
+jQuery.fn.liveDraggable = (opts) ->
+  @live "mouseover", ->
+    $(this).data("init", true).draggable opts  unless $(this).data("init")
+    
+# Insert `value` at the cursor position of the currently focused textarea or input field.
+jQuery.fn.insertAtCaret = (value) ->
+  @each (i) ->
+    if document.selection
+      @focus()
+      sel = document.selection.createRange()
+      sel.text = value
+      @focus()
+    else if @selectionStart or @selectionStart is "0"
+      startPos = @selectionStart
+      endPos = @selectionEnd
+      scrollTop = @scrollTop
+      @value = @value.substring(0, startPos) + value + @value.substring(endPos, @value.length)
+      @focus()
+      @selectionStart = startPos + value.length
+      @selectionEnd = startPos + value.length
+      @scrollTop = scrollTop
+    else
+      @value += value
+      @focus()
+