Responder.create('collection', {
  initialize: function(container) {
    this.collection = container;
    this.assignByClass(container, 'items add');
    this.assignByName(container, 'ids');
  },
  
  // onClickCollection: function(event) {
  //   this.assignContainerByClass(event.target, 'move');
  // },

  onClickAdd: function(event) {
    event.preventDefault();
    Page.linkRequest(this.add, 'POST', this.items);
  }
});

// var Collection = {
//   
// };


Responder.create('item', {
  initialize: function(container) {
    this.container = container;
    this.assignByClass(container, 'id remove'); // left right up down
  },
  
  onClickRemove: function(event) {
    event.preventDefault();
    if (confirm('Are you sure?')) {
      Page.linkRequest(this.remove, 'DELETE', this.container);
    }
  }
});

Responder.create('images', {
  initialize: function(container) {
    this.container = container;
    this.assignByClass(container, 'items newImageFile');
  },
  
  onChangeNewImageFile: function(event) {
    Page.formRequest(this.newImageFile, {}, this.items, this.container);
    this.newImageFile.value = ''; 
  }  
});

Responder.create('image', {
  initialize: function(element) {
    this.image = element;
    this.assignByType(element, 'file');
  },
  
  onChangeFile: function(event) {
    Page.formRequest(this.file.form, {}, this.image, this.image);
    this.file.value = '';
  }
});


Responder.create('move', {
  initialize: function(element) {
    this.link = element;
    
    if (HTMLElement.hasClass(element, 'left') || HTMLElement.hasClass(element, 'up')) {
      this.move = Item.back;
    }
    if (HTMLElement.hasClass(element, 'right') || HTMLElement.hasClass(element, 'down')) {
      this.move = Item.forward;
    }
  },

  onClickLink: function(event) {
    event.preventDefault();
    
    this.assignElements(this.link);
    this.move(this.item);
        
    var parameters = {};
    parameters[this.collectionIdsField.name] = this.collectionIdsField.value = Collection.ids(this.container).join(' ');
    
    Page.formRequest(this.collectionIdsField.form, parameters, this.container);
  },
  
  assignElements: function(link) {
    this.item = this.item
      || Item.containing(link);
    this.container = this.container
      || this.item.parentNode;
    this.collectionIdsField = this.collectionIdsField 
      || Collection.idsField(this.item.parentNode);
  }
});


// Artificially turns any element into a button
// When the user clicks on a .content element within the container, a click is registered on the .target element.
// (This JS method works for Safari and IE. For Firefox there is a CSS version - see controls.css)
Responder.create('button', {
  initialize: function(container) {
    this.container = container;
    this.assignByClass(container, 'target area');
    this.area = this.area || container;
    
    if (/firefox\/3/i.test(navigator.userAgent)) {
      this.target.style.right = null;
      this.target.style.left  = 0;
    }
  },
  
  onClickTarget: function(event) {
    event.stopPropagation();
  },
  
  //onMouseOverTarget: function(event) { this.addClass(this.container, 'over')},
  
  onClickArea: function(event) {
    event.preventDefault();
    if (this.target) this.target.click();
  }
});


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();
  }
});

var Fields = {
  
  submit: function(container) {
    //var test = function(node) { return Node.element(node, 'form') };
    //var form = test(container) || Node.find(container, 'parentNode', test);
    var firstField = HTMLElement.matchSingle(container, '.field');

    if (firstField) {
      Page.formRequest(firstField.form, Fields.serialize(container), container, container);
    }
  },
  
  backup: function(container) {
    this._each(container, function(element) { element._value = element.value });
  },
  
  restore: function(container) {
    this._each(container, function(element) { element.value = element._value });
  },
  
  serialize: function(container) {
    var object = {};
    this._each(container, function(element) {
      if (!element.disabled && (element.checked || !element.form[element.name].length)) {
        object[element.name] = element.value;
      }
    });
    return object;
  },
    
  _each: function(container, callback) {
    HTMLElement.matchAll(container, '.field').forEach(callback);
  }
};

// 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);  
};



// 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('flag', {
  initialize: function(element) {
    this.field = element;
  },
  
  onChangeField: function(event) {
    this.field.value = this.field.checked ? '1' : '0';
    Fields.submit(this.field.parentNode);
  }
});