define(["ceci"], function(Ceci) {

  var colorBlock = document.createElement("div");
  colorBlock.setAttribute("class", "channel-visualisation");
  colorBlock.innerHTML = "<div class='broadcast-channels'></div>"+
                         "<div class='subscription-channels'></div>";
  var channelBlock = document.createElement("div");
  channelBlock.setAttribute("class", "channel");

  var setChannelIndicator = function(element, type, channel, listener) {
    
    // do we need to add the visualisation block?
    if(!element.querySelector(".channel-visualisation")) {
      element.appendChild(colorBlock.cloneNode(true));
    }
    // get the selector for the element whose color we need to change
    var sel = "." + type + "-channels",
        lsel = sel + " .channel" + (listener ? '.' + listener : ''),
        cblock;

    if(!element.querySelector(lsel)) {
      cblock = channelBlock.cloneNode(true);
      if(listener) {
        cblock.classList.add(listener);
      }
      element.querySelector(sel).appendChild(cblock);
    }

    // set relevant channel color, or remove if disabled
    var channelElement = element.querySelector(lsel);
    
    if(channel === Ceci._emptyChannel) {
      channelElement.parentNode.removeChild(channelElement);
    } else {
      channelElement.setAttribute("color",channel);
    }
  
    //Hide all but the first indicator for this particular color
    //We only want to show one indicator per color
    var indicators  = $(element).find(sel).find(".channel[color="+channel+"]");
    indicators.show();
    if(indicators.length > 1) {
      indicators.hide();
      indicators.filter(":first").show();
    }

  };

  var CeciUI = function(element, def) {
    var elementAttributes = {},
        editableAttributes = [];

    var bindAttributeChanging = function(target, attrName, fallthrough) {
      // value tracking as "real" value
      var v = false,
          get = function() { return v; },
          set = function(v) {
            target.setAttribute(attrName, v);
          };
      Object.defineProperty(target, attrName, { get: get, set: set });

      // feedback and mutation observing based on HTML attribute
      var handler = function(mutations) {
            mutations.forEach(function(mutation) {
              v = target.getAttribute(attrName);
              fallthrough.call(target, v);
            });
          },
          observer = new MutationObserver(handler),
          config = { attributes: true, attributeFilter: [attrName] };
      observer.observe(target, config);
    };

    if (def.editable) {
      Object.keys(def.editable).forEach(function (key) {
        var props = def.editable[key];
        bindAttributeChanging(element, key, props.edit);
        editableAttributes.push(key);
        eak = {};
        Object.keys(props).forEach(function(pkey) {
          if (pkey === "edit") return;
          eak[pkey] = props[pkey];
        })
        elementAttributes[key] = eak;
      });
    }

    element.getEditableAttributes = function() {
      return editableAttributes;
    };

    element.getAttributeDefinition = function(attrName) {
      return elementAttributes[attrName];
    };

    element.onBroadcastChannelChanged = function(channel) {
      setChannelIndicator(element, 'broadcast', channel);
    };

    element.onSubscriptionChannelChanged = function(channel, listener) {
      setChannelIndicator(element, 'subscription', channel, listener);
    };
  }

  // register ourselves with Ceci
  Ceci.reserveKeyword("editable");
  Ceci.registerCeciPlugin("constructor", CeciUI);

  // return this plugin, for good measure
  return CeciUI;
});

@@ -451,21 +451,16 @@
 ener) %7B%0A
-    %0A
     // d
@@ -501,16 +501,16 @@
  block?%0A
+
     if(!
@@ -1026,25 +1026,24 @@
 ock);%0A    %7D%0A
-%0A
     // set r
@@ -1145,13 +1145,8 @@
 l);%0A
-    %0A
     
@@ -1282,371 +1282,36 @@
 nt.s
-etAttribute(%22color%22,channel);%0A    %7D%0A  %0A    //Hide all but the first indicator for this particular color%0A    //We only want to show one indicator per color%0A    var indicators  = $(element).find(sel).find(%22.channel%5Bcolor=%22+channel+%22%5D%22);%0A    indicators.show();%0A    if(indicators.length %3E 1) %7B%0A      indicators.hide();%0A      indicators.filter(%22:first%22).show()
+tyle.color = channel
 ;%0A    %7D%0A
 %0A  %7D
@@ -1306,17 +1306,16 @@
 ;%0A    %7D%0A
-%0A
   %7D;%0A%0A  

Revert "Changed how the colors are set on the channel indicators. Now only displays one indicator per channel color."