Event.addBehavior({

  '.trigger:click': function(event) { $(this.id.replace(/\W*trigger$/, '')).toggle(); },
  '#typesetter input.button:click': function(event) {
    new Ajax.Request('/type/preview/' + this.form.font.value + ".js", 
      { asynchronous:true, evalScripts:true, 
        onComplete: function(request){ $('spinner').hide() }, 
        onLoading:  function(request){ $('spinner').show() }, 
        parameters:Form.serialize(this.form)
      }
    );
    event.stopPropagation();
    return false;
  },

  '#pending_order_number_of_users:change': function(event) { this.form.submit(); }

});

var FontsList = {
  sortable: null,
  toggleSortable: function(link, family_id, container_id) {
    link = $(link);
    if($(container_id).hasClassName('sortable')) {
      Sortable.destroy(container_id);
      $(container_id).removeClassName('sortable');
      link.innerHTML = 'Reorder ' + container_id;
      link.className = 'reorder';
      this.saveSortable(family_id, container_id);
    } else {
      this.sortable = Sortable.create(container_id, {handle:'handle'});
      $(container_id).addClassName('sortable');
      link.className = 'reordering';
      link.innerHTML = 'Done Reordering'
    }
  },

  saveSortable: function(family_id, container_id) {
    var query = $$('#'+container_id+' li').inject([], function(qu, li) {
      qu.push('sorted_ids[]=' + li.getAttribute('id').substr(container_id.length));
      return qu;
    }).join('&')

    new Ajax.Request('/admin/families/' + family_id + '/fonts/order', {asynchronous:true, evalScripts:true, parameters:query});
  }
}