jSketch

(function() {

    var canvases  = document.getElementsByClassName('drawing-canvas');
    var clearBtns = document.getElementsByClassName('clear');
    var undoBtns  = document.getElementsByClassName('undo');
    var redoBtns  = document.getElementsByClassName('redo');
    var dataBtns  = document.getElementsByClassName('data');

    for (var i = 0; i < canvases.length; i++) {
      // Create closure so that we can user inner variables in a dedicated scope.
      (function(i) {

        var sketcher = new Sketchable(canvases[i]);

        clearBtns[i].addEventListener('click', function(e) {
          e.preventDefault();
          sketcher.clear();
          findOutput(e.target).innerHTML = '';
        });

        undoBtns[i].addEventListener('click', function(e) {
          e.preventDefault();
          sketcher.memento.undo();
        });

        redoBtns[i].addEventListener('click', function(e) {
          e.preventDefault();
          sketcher.memento.redo();
        });

        dataBtns[i].addEventListener('click', function(e) {
          e.preventDefault();
          var strokes = sketcher.strokes();
          var p = 'Drawing has '+ strokes.length +' strokes<br>';
          for (var i = 0; i < strokes.length; ++i) {
            p += '<strong>stroke ' + i + ':</strong> ';
            var stroke = strokes[i];
            for (var j = 0; j < stroke.length; ++j) {
              p += '(' + stroke[j][0] +','+ stroke[j][1] + ')';
            }
            p += '<br>';
          }
          findOutput(e.target).innerHTML = p;
        });

      })(i);
    }

    function findOutput(button) {
      return button.parentNode.parentNode.getElementsByClassName('drawing-data')[0];
    };

})();