Responder.create('collection', {

  initialize: function(container) {
    this.container = container;
    this.assignByClass(container.parentNode, 'add first last newFile');
    this.assignItems(container); // assignInstances(container, Item) assignComponents createResponders
  },
    
  onClickAdd: function(event) {
    if (!this.add.href) return;
    event.preventDefault();
    
    var collection = this;
    XHR.request(this.add.href, 'POST', function(text) { collection.onCreated(Builder.element(text)) });
  },
  
  onChangeNewFile: function(event) {
    var collection = this;
    Uploads.iframedUpload(this.newFile.form, function(text) { collection.onCreated(Builder.element(text)) });
    this.newFile.value = '';
  },
  
  onCreated: function(element) {
    if (Node.element(element, 'li')) {
      Responder.initializeTree(element);
      this.addItem(new Item(element, this));
    }    
  },
  
  addItem: function(item) {
    Effects.appendAppear(item.container, this.container);
    this.items.push(item);
    this.applyItemClasses();
  },
  
  removeItem: function(item) {
    Effects.fadeRemove(item.container);
    this.items.splice(this.items.indexOf(item), 1);
    this.applyItemClasses();
  },
    
  moveItemBack: function(item) {
    var i = this.items.indexOf(item);
    this.swapItems(i, i - 1);
  },
  
  moveItemForward: function(item) {
    var i = this.items.indexOf(item);
    this.swapItems(i + 1, i);
  },
  
  swapItems: function(i, j) {
    var item, p = this.items[i].position.value, q = this.items[j].position.value;
    
    // Update the DOM
    this.container.insertBefore(this.items[i].container, this.items[j].container);
    
    // Tell the server
    this.items[i].position.value = q;
    this.items[j].position.value = p;
    
    item = this.items[i];
    this.items[i] = this.items[j];
    this.items[j] = item;
    
    Fields.submit(this.items[i].position.form);
    Fields.submit(this.items[j].position.form);
    
    this.applyItemClasses();
  },
  
  assignItems: function(container) {
    this.items = [];
    for (var elements = container.getElementsByTagName('li'), i = 0; i < elements.length; i++) {
      this.items.push(new Item(elements[i], this));
    }    
  },
  
  applyItemClasses: function() {
    if (this.items.length > 0) {
      var first = this.items[0], last = this.items[ this.items.length - 1 ];
      
      if (this.first != first.container) {
        if (this.first) this.removeClass(this.first, 'first');
        this.addClass(first.container, 'first')
      }
      
      if (this.last != last.container) {
        if (this.last) this.removeClass(this.last, 'last');
        this.addClass(last.container, 'last')
      }
    }
  }
});

var Item = Responder.create('_item', {
  initialize: function(container, collection) {
    this.container = container;
    this.assignByClass(container, 'back forward position remove');   
    this.collection = collection;
  },
  
  onClickBack: function(event) {
    event.preventDefault();
    this.collection.moveItemBack(this);
  },
  
  onClickForward: function(event) {
    event.preventDefault();
    this.collection.moveItemForward(this);
  },
  
  onClickRemove: function(event) {
    event.preventDefault();
    if (confirm('Are you sure?')) {
      var item = this;
      XHR.request(this.remove.href, 'DELETE', function(text) {
        item.collection.removeItem(item);
      });
    }
  }
});

Responder.create('prefilled', { // tip fieldTip fieldWithTipValue
  initialize: function(element) {
    this.field = element;
    this.form  = this.field.form;
  },
  
  onSubmitForm: function(event) {
    this.field.value  = '';
  },
  
  onFocusField: function(event) {
    this.field.value  = '';
    this.onFocusField = this.onSubmitForm = function() {};
  }
});


Responder.create('attributes', {

  initialize: function(container) {
    this.attributes = container;
  },
  
  onClickAttributes: function(event) {
    if (Node.element(event.target, 'a')) {
      if (event.ctrlKey) {
        event.preventDefault();
      } else {
        return;
      }
    }

    //var attribute = this._findAttribute(event);
    this.assignContainerByClass(event.target, 'content editor');
    var attribute = (this.content || this.editor || {}).parentNode;

    if (attribute) event.preventDefault();
    
    if (this.editing && (this.editing != attribute)) {
      this._finishEditing();
    }
    
    if (attribute && (attribute != this.editing)) {
      event.preventDefault();
      this.addClass(attribute, 'editing');
      if (this.field = HTMLElement.matchSingle(attribute, '.field')) {
        this.field.focus();
      }
    }
    
    this.content = this.editor = null;
  },
  
  onKeyDownAttributes: function(event) {
    if (this.editing && event.keyCode == 13 && !(Node.element(this.field, 'textarea'))) {
      event.preventDefault();
      this._finishEditing();
    }
  },
  
  _finishEditing: function() {
    Fields.submit(this.editing);
    this.removeClass(this.editing, 'editing');    
  },
  
  _findAttribute: function(event) {
    var node = event.target;
    
    // if target is link or field, return

    while (Node.element(node)) {
      if (HTMLElement.hasClass(node, 'content') ||
          HTMLElement.hasClass(node, 'editor'))  return node.parentNode;
      node = node.parentNode;
    }
  }
});

Responder.create('attributesForm', {

  initialize: function(element) {
    this.attributesForm = element;
  },
  
  onSubmitAttributesForm: function(event) {
    event.preventDefault();
  }
});


// A rotating list of images.
// The current item is displayed as a block, the others are hidden. On each change, the previous item is faded out over the top of the new one.
var SlideShow = Responder.create('slideShow', {
  initialize: function(container) {
    var elements = container.getElementsByTagName('li');
    
    if (elements.length > 1) {
      this.items    = elements;
      this.index    = 0;
      this.selected = this.items[this.index];
      
      var object = this; setInterval(function() { object.onInterval() }, 5000);
    }
  },
  
  onInterval: function() {
    this.previous = this.selected;
    this.selected = this.items[ this.index = ((this.index + 1) % this.items.length) ];
    
    HTMLElement.removeClass(this.previous, 'selected');
    HTMLElement.addClass(this.selected, 'selected');
    
    SlideShow.fade(this.previous);
  }
});

SlideShow.fade = function(element) {
  HTMLElement.addClass(element, 'fading');    
  
  new Fx.Opacity(element, { duration: 600, onComplete: function() {
    HTMLElement.removeClass(element, 'fading');
    element.style.opacity    = null
    element.style.filter     = null;
    //element.style.visibility = null;
  } }).custom(1, 0);  
};


Responder.create('imageFile', {
  initialize: function(file) {
    this.file = file;
  },
  
  onChangeFile: function(event) {
    Uploads.iframedUpload(this.file.form, function(text) { Page.updateHTML(null, text) });
    this.file.value = '';
  }
});



// var Dialog = Responder.create('dialog', {
//   initialize: function(element) {
//     
//     this.assignByClass(element, 'background content'); if (!this.background) return;
//     this.container = element;
//     this.page      = document.body;
//     this.effect    = new Fx.Opacity(this.background, { duration: 200 });
//   },
//   
//   onClickPage: function(event) {
//     var link = Node.element(event.target, 'a') || Node.element(event.target.parentNode, 'a');
//     if (link && HTMLElement.hasClass(link, 'popup')) {
//       event.preventDefault();
//       this.onClickPopup(link);
//     }
//   },
//   
//   onClickPopup: function(link) {
//     Page.linkRequestUpdate(this.content, link, 'GET');
//     Dialog.Methods.open(this.effect, this.content);
//   },
//   
//   onClickContainer: function(event) {
//     event.preventDefault();
//     Dialog.Methods.close(this.effect, this.content);
//   }
// });
// 
// Dialog.Methods = {
//   open: function(transition, content) {
//     HTMLElement.addClass(document.documentElement, 'dimmed');
//     transition.options.onComplete = function() { };
//     transition.custom(0, 0.6);
//   },
//   
//   close: function(transition, content) {
//     content.innerHTML = '';
//     transition.options.onComplete = function() { HTMLElement.removeClass(document.documentElement, 'dimmed') };
//     transition.custom(0, 0.6);
//   }
// };


Responder.create('flashNotice', {
  initialize: function(element) {
    setTimeout(function() { Item.fadeRemove(element); }, 2000);
  }
});


Responder.create('wordProcessor', {
	
  initialize: function(container) {

    this.container = container;
		//this.field = container.getElementsByClassName('field')[0];
		//this.saveHtml = container.getElementsByClassName('saveHtml')[0];
		this.assignByClass(container, 'field');
    this.form = this.field.form;
    this.fieldName = this.field.name;
    this.widg = new widgEditor(this.field);
		this.field.name = this.fieldName; //widg stole my fieldName!
		
		// basic sizing
		this.widg.theIframe.style.width = "100%"
		
		this.contentDocument = this.widg.theIframe.contentWindow.document;
		this.IFrame = this.widg.theIframe;
		this.list = this.widg.theToolbar.theList;
  },
  
  onClickContentDocument: function(event) { this.onUpdate(event) },
  onKeyupContentDocument: function(event) { this.onUpdate(event) },
  onMouseoutIFrame:       function(event) { this.onUpdate(event) },
  onClickList:            function(event) { this.onUpdate(event) },
	
	// clean the source
	onUpdate: function(e){
		this.widg.updateWidgInput();
		this.field.value = this.widg.theInput.value;
		return true;
	}

});

Responder.create('linkToFull', {
  initialize: function(link) {
    this.link = link;
  },
  
  onClickLink: function(event) {
    event.preventDefault();
    document.getElementById(this.link.rel).src = this.link.href;
  }
});