<p> // darkroom.bb.js - implementation of darkroom using backbone.js models

// Model object to represent a Template
var Template = Backbone.Model.extend({
  initialize: function(args) {
    if (!args|| !args.name) { 
      throw Exception("bad args.");
    }
    
    this.set({htmlId: 'template_'+this.cid,
              types: args.template.types || {},
              featured: args.template.featured || {},
              properties: args.template.properties || {},
              weblinks: args.template.weblinks || []
             });
  },
  
  addType: function(typestring) {
    this.types[typestring] = true;
  },
  
  addFeaturedProperty: function(propstring, propconf) {
    var conf = propconf || {};
    this.featured[propstring] = conf;
  },
  
  addWeblink: function(linkName, linkPattern, linkCssClass) {
    this.weblinks.push({'name': linkName,
                        'url_pattern': linkPattern,
                        'clazz': linkCssClass
                       });
  },
});


// Abstract Template View object
var AbstractTemplateView = Backbone.View.extend({
  initialize: function(options) {
    if (!options || !options.model) {
      throw InvalidConstructorArgs();
    }
    
    // Bind 'this' to be the view for all calls into view methods
    _.bindAll(this);
    
    this.model.bind('change:types', this.changeTypes);
    this.model.bind('change:featured', this.changeFeatured);
    this.model.bind('change:properties', this.changeProperties);
    this.model.bind('change:weblinks', this.changeWeblinks);
  }
});


// Specialization of a Template View to render the template source
var TemplateSourceView = AbstractTemplateView.extend({

  initialize: function(options) {
    AbstractTemplateView.prototype.initialize.call(this, options);
    
    var type_fragment = document.createElement("ul");
    type_fragment.id = "type_list";
    
    var weblinks_fragment = document.createElement("ul");
    weblinks_fragment.id = "weblink_list";

    $(this.el).append(type_fragment);
    $(this.el).append(weblinks_fragment);
  },  
        
  changeTypes: function() {
    var type_fragment = document.createElement("ul");
    type_fragment.id = "type_list";
    type_fragment.innerText = "Types";
    var type_map = this.model.get('types');
    console.log(type_list);
    for (typename in type_map) {
      var t = document.createElement("li");
      t.innerText = typename + ": " + type_map[typename];
      type_fragment.appendChild(t);
    }
    
    console.log(type_fragment);
    $(this.el).children("#type_list").replaceWith(type_fragment);
    
    return this;
  },
  
  changeFeatured: function() {
    var featured_fragment = document.createDocumentFragment();
    var featured_list = this.model.get("featured");

    if (featured_list) {
      for (var i = 0; i  0) {
      container.appendChild(featured_fragment);
    }
    
    return this;    
  },  
  
  changeWeblinks: function() {
    var weblink_fragment = document.createElement("ul");
    weblink_fragment.id = "weblink_list";
    weblink_fragment.innerText = "Weblinks";
    var weblink_list = this.model.get("weblinks");
    for (var i = 0; i </p>