var Paragraph = Backbone.Model.extend({
    defaults : {
       text: null,
    }
 });
 
 var Chunk = Backbone.Model.extend({
    defaults : {
       orig: null,
       comment: null,
       name: ''
    }
 });
 
 var Text = Backbone.Collection.extend({
    model: Chunk,
 
    defaults: {
       name: null
    }
 
 });
 
 ParagraphView = Backbone.View.extend({
    tagname : "div",
    
    initialize : function () {
       console.log('asd');
       _(this).bindAll('render');
 
       this.model.bind('change:text', this.render);
    },
 
    render : function () {
       var model = this.model,
           self = this;
       $(this.model.get('text')).each( function() {
          $(self.el).append($('<p></p>').text(this));
       });
       return this;
    }
 });
 
 ChunkView = Backbone.View.extend({
   tagName : "div",
   className : "paragraph",
 
   events: {
      "click .button": "flip",
      //"click .comment": "nothing",
   },
 
   nothing : function() {
      return false
   },
 
   flip : function() {
      console.log('hello');
      $(this.el).children('.comment').toggleClass('hidden');
      $(this.el).children('.orig').toggleClass('expand');
   },
  
   initialize : function() {
     this.number = ChunkView.number++;
 
     this.render = _.bind(this.render, this); 
     this.flip = _.bind(this.flip, this); 
  
 
     this.origView = new ParagraphView({
        model: this.model.get('orig'),
        className: 'orig expand'
     });
 
     this.commView = new ParagraphView({
        model: this.model.get('comment'),
        className: 'comment hidden'
     });
 
   },
 
   render : function() {
     var el = $(this.el)
     
     console.log(this.model.get('name'));
     if (this.model.get('name') != '')
        var anchor = $('<a></a>').attr('name', this.number);

        el.append(anchor.append('<h2><a class="button">(toggle commentary)</a>' + this.model.get('name') + '</h2>'));

 
        var navitem = $('<a>'+this.model.get('name')+'</a>').attr('href', '#'+this.number);
        $('#nav').append('<li></li>').append(navitem);
 
     el.append(this.origView.render().el);
     el.append(this.commView.render().el);
  
     return this;
   }
 });
 ChunkView.number=0;
 
 TextView = Backbone.View.extend({
    initialize: function() {
       _(this).bindAll('add', 'remove');
 
       this._views = [];
 
       this.collection.each(this.add);
    },
 
    add : function(chunk) {
       var chunkv = new ChunkView({
          model: chunk
       });
 
       this._views.push(chunkv);
 
       if (this._rendered) {
          $(this.el).append(chunkv.render().el);
       }
    },
 
    render : function() {
       var self = this;
 
       $(this.el).empty();
 
       _(this._views).each(function(chunkv) {
          console.log(chunkv);
          $(self.el).append(chunkv.render().el);
       });
       this._rendered = true;
    }
 });