gistfile1.js

var Todo = new Class({
	Implements: [Options],
	options: {},

	initialize: function(element, options) {
		this.setOptions(options);
		this.element = element;
		this.initFields();
		this.addEventHandlers();
		this.initButtons();
		
	},
	
	initFields: function() {
		this.state = this.element.get('class');	
		this.menu = this.element.getElement('.menu');
	},
	
	addEventHandlers: function() {
	  this.element.addEvent('mouseover', this.onMouseOver.bind(this)).addEvent('mouseout', this.onMouseOut.bind(this));
		this.menu.addClass('invisible');
	},
	
	initButtons: function() {
	  var buttons = this.menu.getChildren('.action');
	  this.buttons = [];
	  buttons.each(function(el){
	    var button = new Todo.Button(el, this);
	    this.buttons.push(button);
	    if (button.getState()==this.state)
	      button.hide();
	  }.bind(this));
	},	
	
	onMouseOver: function() {
		// style manipulations
		this.element.addClass('selected');
		this.menu.removeClass('invisible');	
	},
	
	onMouseOut: function() {
		// style manipulations
		this.element.removeClass('selected');
		this.menu.addClass('invisible');
	},
	
	delete: function() {
	  var el = this.element;
  	el.set('slide', {
      duration: '200ms', 
      complete: function()
      {
        this.destroy();
      }.bind(el)
    }).slide();
	}
	
	
});


Todo.Button = new Class({
  Implements: [Options],
  options: {},
  
  initialize: function(element, todo, opts){
    var el = element;
    this.todo = todo;
    this.setOptions(opts);
    this.element = el;
    // грязные хаки
    el.removeClass('action');
    el.store('state', el.get('class'));    
    el.addEvent('click', function(){
	    var request = new Request({
	      url: el.get('href'),
	      data: {
	        state: el.retrieve('state')  	        
	      },
	      onSuccess: function(response){
	        if (response == "!delete") {
	          todo.delete();
	        } else {
  	        page.createItem(response, el);
	        }
	      }
	    });
      request.PUT();
      return false;
    });
    
    el.addClass('action');
  },
  
  getState: function(){
    return this.element.retrieve('state');
  },
  
  setState: function() {
    this.element.store('state');
  },
  
  hide: function() {
    this.element.addClass('invisible');
  }
});

var Page = new Class({
  Implements: [Options],
  options: {
  },
  
	initialize: function(elements, opts){
	  this.setOptions(opts);
	  this.initItems(elements);
  	this.initForm();
	},
	
	addItem: function(el) {
	  this.items.push(new Todo(el));
	},
	
	createItem: function(response, replace) {
	  var el = new Element('div', {html: response}).getFirst();
    if (replace) {
      console.log(replace);
      el.replaces(replace.getParents()[1]);
    } else {
      $('todo').grab(el, "bottom");
      el.slide('hide');
      el.set('slide', { duration: '200ms'}).slide('in');
    }
    page.addItem(el);
	},
	
	initItems: function(elements) {
	  this.items = [];
  	elements.each(function(el){
  		this.addItem(el);
  	}.bind(this));
	},
	
	initForm: function() {
	  var form = $('newtodo').getElement('form');
	  form.addEvent('submit', function(event) {
	    event.stop();
	    var request = new Request({
	      url: form.action,
	      data: {
	        todo: {
  	        title: form.getElement("[name='todo[title]']").value,
  	        state: form.getElement("[name='todo[state]']").value
	        }
	      },
	      onSuccess: function(response) {
	        this.getElement("[name='todo[title]']").value = '';
	        this.getElement("[name='todo[state]']").value = 'none';
	        page.createItem(response);
	      }.bind(form)
	    });
	    request.POST();
	    return false;
	  }.bind(form));
	}
	
});

addEvent('domready', function(){
	// init todo-items from dom elements
  page = new Page($$('#todo li'));

});