var io = io.connect();
var canvas = {};
var sketch = {};

// get the playground id from a data-attribute generated by the view. Hacky.
var container = document.getElementById('container');
var playgroundid = container.getAttribute('data-playgroundid');

// emit the 'playground up' event with the playgroundid (used as a room for select broadcasting)
io.emit('playground up', playgroundid);

// Listen for the 'code update' event.
io.on('code update', function(data) {
  var id = data.codeid;
  var code = data.code;
  console.log('code received '+id, data);

  updateObject(id, code);
});

io.on('playground full update', function (data) {
  Object.keys(data).forEach(function (k) {
    updateObject(k, data[k]);
  });
});

var resize = function (sketch) {
  sketch.size(window.innerWidth, window.innerHeight);
};

var updateObject = function (id, code) {
  if (!canvas[id]) {
    canvas[id] = document.createElement('canvas');
    canvas[id].setAttribute('id', id);

    document.getElementById('container').appendChild(canvas[id]);
    console.log('canvas created');
  } else {
    console.log('canvas reused');
    sketch[id].exit();
    delete sketch[id];
  }
  sketch[id] = new Processing(canvas[id], code);
  resize(sketch[id]);
};

var resizeTimeout;

window.addEventListener('resize', function () {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(function () {
    Object.keys(sketch).forEach(function (id) {
      resize(sketch[id]);
    });
  }, 1000);
});

var io = io.connect();
var canvas = {};
var sketch = {};

// get the playground id from a data-attribute generated by the view. Hacky.
var container = document.getElementById('container');
var playgroundid = container.getAttribute('data-playgroundid');

// emit the 'playground up' event with the playgroundid (used as a room for select broadcasting)
io.emit('playground up', playgroundid);

// Listen for the 'code update' event.
io.on('code update', function(data) {
  var id = data.codeid;
  var code = data.code;
  console.log('code received '+id, data);

  updateObject(id, code);
});

io.on('playground full update', function (data) {
  Object.keys(data).forEach(function (k) {
    updateObject(k, data[k]);
  });
});

var resize = function (sketch) {
  sketch.size(window.innerWidth, window.innerHeight);
};

var updateObject = function (id, code) {
  if (!canvas[id]) {
    canvas[id] = document.createElement('canvas');
    canvas[id].setAttribute('id', id);

    document.getElementById('container').appendChild(canvas[id]);
    console.log('canvas created');
  } else {
    console.log('canvas reused');
    try {
      sketch[id].exit();
    } catch(e) { }
    delete sketch[id];
  }
  sketch[id] = new Processing(canvas[id], code);
  resize(sketch[id]);
};

var resizeTimeout;

window.addEventListener('resize', function () {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(function () {
    Object.keys(sketch).forEach(function (id) {
      resize(sketch[id]);
    });
  }, 1000);
});

Fix replacing a broken sketch. Closes #15.