Start work on List class. I'm not quite sure what i'm doing here, but it seems to work.

js/IO.js

@@ -93,18 +93,22 @@ IO.prototype.makeObjects = function() {
     runtime.stage.attachPenLayer(runtime.scene);
     runtime.stage.loadSounds();
     
-    // Create the sprites
+    // Create the sprites and watchers
-    $.each(this.data.children, function(index, obj) {
+    $.each(this.data.children.concat(this.data.lists), function i(index, obj) {
         var newSprite;
-        if(!obj.cmd) {
+        if(!obj.cmd && !obj.listName) { // sprite
             newSprite = new Sprite(obj);
-        } else {
+            if (obj.lists) $.each(obj.lists, i);
+        } else if (!obj.listName) { // watcher
             newSprite = new Reporter(obj);
             runtime.reporters.push(newSprite);
+        } else { // list
+            newSprite = new List(obj);
+            runtime.reporters.push(newSprite);
         }
         runtime.sprites.push(newSprite);
         newSprite.attach(runtime.scene);
-        if (!obj.cmd)
+        if (!obj.cmd && !obj.listName)
             newSprite.loadSounds();
     });
 }

js/Reporter.js

@@ -118,3 +118,51 @@ Reporter.prototype.changeSlider = function() {
     var variable = $(this).attr('data-var');
     target.variables[variable] = newValue;
 }
+
+var List = function(data) {
+    this.contents = data.contents;
+    this.listName = data.listName;
+
+    this.height = data.height;
+    this.width = data.width;
+    this.x = data.x;
+    this.y = data.y;
+    this.z = io.getCount();
+    this.visible = data.visible;
+
+//    this.isPersistent = data.isPersistent;
+
+    this.el = null; // jQuery element for list
+    this.containerEl = null;
+};
+
+List.prototype.attach = function(scene) {
+    this.el = $('<div class="list">');
+    this.el.append('<div class="list-title">'+this.listName);
+    this.containerEl = $('<div style="width:99%">').appendTo(this.el);
+    this.el.append('<div class="list-add">+');
+    this.el.append('<div class="list-length">length: '+this.contents.length);
+    scene.append(this.el);
+    this.update();
+    this.el.css('left', this.x);
+    this.el.css('top', this.y);
+    this.el.width(this.width);
+    this.el.height(this.height);
+    this.el.css('z-index', this.z);
+    this.el.css('display', this.visible ? 'inline-block' : 'none');
+}
+
+List.prototype.update = function(){
+    this.el.css('display', this.visible ? 'inline-block' : 'none');
+    if (!this.visible) return;
+
+    var c = this.containerEl.html(''); // so that it can be used inside the forEach
+    this.contents.forEach(function(val,i){
+        $('<div style="clear:both">').appendTo(c).append('<div class="list-index">'+(i+1),'<div class="list-item">'+val);
+    });
+    this.el.find('.list-length').text('length: '+this.contents.length);
+};
+
+List.prototype.updateLayer = function() {
+    this.el.css('z-index', this.z);
+}

player.css

@@ -91,6 +91,74 @@
     position: absolute;
 }
 
+/* List watcher styles */
+.list {
+    float: left;
+    border-radius: 7px;
+    -webkit-border-radius: 7px;
+    -moz-border-radius: 7px;
+    border-style: solid;
+    border-color: gray;
+    border-width: 2px;
+    background-color: #C1C4C7;
+    padding-left: 3px;
+    font: bold 10px Verdana, sans-serif;
+    position: absolute;
+}
+
+.list .list-title {
+    padding-top: 2px;
+    text-align: center;
+    color: black;
+    font-weight: bold;
+}
+
+.list .list-index {
+    color: rgb(81, 81, 81);
+    float: left;
+    padding: 2px;
+    margin-top: 0px;
+    font: bold 10px Verdana,sans-serif;
+}
+
+.list .list-item {
+    float: left;
+    width: 70%;
+    min-height: 18px; 
+    margin-bottom: 0px;
+    margin-right: 2px;
+    padding-left: 5px;
+    border-color: white;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 4px;
+    background-color: #D94D11;
+    font-size: 10px;
+    color: white;
+    word-wrap: break-word;
+    font: bold 10px Verdana, sans-serif;
+}
+
+.list .list-add {
+   clear: both;
+   background-color: #dedede;
+   width: 12px;
+   height: 12px;
+   border-radius: 12px;
+   margin-top: 12px;
+   color: #707070;
+   font: bold 10px Verdana, sans-serif;
+   text-align: center;
+}
+
+.list .list-length {
+    font-size: 10px;
+    font-weight: normal;
+    margin-top: -12px;
+    text-align: center;
+    color: black;
+}
+
 /* Say/think bubble styles */
 .bubble-container {
     position: absolute;