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