Init

2 files changed, 2134 insertions, 0 deletions

diff --git a/static/js/tegaki/tegaki.css b/static/js/tegaki/tegaki.css
new file mode 100644
index 0000000..d2e3591
--- /dev/null
+++ b/static/js/tegaki/tegaki.css
@@ -0,0 +1,187 @@
+@font-face {
+  font-family: 'tegaki';
+  src: url('data:application/octet-stream;base64,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') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.tegaki-icon:before {
+  font-size: 10px;
+  width: 10px;
+  font-family: 'tegaki';
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+  display: inline-block;
+  text-align: center;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1em;
+}
+
+.tegaki-cancel:before { content: '\e800'; } /* '' */
+.tegaki-plus:before { content: '\e801'; } /* '' */
+.tegaki-minus:before { content: '\e802'; } /* '' */
+.tegaki-eye:before { content: '\e803'; } /* '' */
+.tegaki-down-open:before { content: '\e804'; } /* '' */
+.tegaki-up-open:before { content: '\e805'; } /* '' */
+.tegaki-level-down:before { content: '\e806'; } /* '' */
+
+#tegaki {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #a3b1bf;
+  color: #000;
+  font-family: arial, sans-serif;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  overflow: auto;
+  z-index: 9999;
+  image-rendering: optimizeSpeed;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+}
+
+#tegaki-debug {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+#tegaki-debug canvas {
+  width: 75px;
+  height: 75px;
+  display: block;
+  border: 1px solid black;
+}
+
+.tegaki-backdrop {
+  overflow: hidden;
+}
+
+.tegaki-hidden {
+  display: none !important;
+}
+
+.tegaki-strike {
+  text-decoration: line-through;
+}
+
+#tegaki-cnt {
+  left: 50%;
+  top: 50%;
+  position: absolute;
+}
+
+#tegaki-cnt.tegaki-overflow-x {
+  left: 10px;
+  margin-left: 0 !important;
+}
+
+#tegaki-cnt.tegaki-overflow-y {
+  top: 10px;
+  margin-top: 0 !important;
+}
+
+.tegaki-tb-btn {
+  margin-left: 10px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.tegaki-tb-btn:hover {
+  color: #007FFF;
+}
+
+.tegaki-tb-btn:focus {
+  color: #007FFF;
+  outline: none;
+}
+
+#tegaki-menu-bar {
+  font-size: 12px;
+  white-space: nowrap;
+  position: absolute;
+  right: 0;
+}
+
+#tegaki-canvas {
+  -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+  background: #FFFAFA;
+}
+
+#tegaki-layers {
+  display: inline-block;
+  font-size: 0;
+}
+
+#tegaki-finish-btn {
+  font-weight: bold;
+}
+
+.tegaki-ctrlgrp {
+  margin-bottom: 5px;
+}
+
+.tegaki-label {
+  font-size: 10px;
+}
+
+.tegaki-label:after {
+  content: ' ' attr(data-value);
+}
+
+#tegaki-ghost-layer,
+.tegaki-layer {
+  position: absolute;
+  left: 0;
+}
+
+#tegaki-ctrl {
+  position: absolute;
+  display: inline-block;
+  width: 80px;
+  padding-left: 5px;
+  font-size: 14px;
+}
+
+#tegaki-color {
+  padding: 0;
+  border: 0;
+  display: block;
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+}
+
+#tegaki-layer-grp span {
+  font-size: 12px;
+  margin-right: 3px;
+  cursor: pointer;
+}
+
+#tegaki-layer-grp span:hover {
+  color: #007FFF;
+}
+
+#tegaki-color::-moz-focus-inner {
+  border: none;
+  padding: 0;
+}
+
+#tegaki-alpha,
+#tegaki-size {
+  width: 90%;
+  margin: auto;
+}
+
+#tegaki-ctrl select {
+  font-size: 11px;
+  width: 100%;
+}
diff --git a/static/js/tegaki/tegaki.js b/static/js/tegaki/tegaki.js
new file mode 100644
index 0000000..3d38d00
--- /dev/null
+++ b/static/js/tegaki/tegaki.js
@@ -0,0 +1,1947 @@
+var TegakiBrush = {
+  brushFn: function(x, y) {
+    var i, ctx, dest, data, len, kernel;
+    
+    x = 0 | x;
+    y = 0 | y;
+    
+    ctx = Tegaki.ghostCtx;
+    dest = ctx.getImageData(x, y, this.brushSize, this.brushSize);
+    data = dest.data;
+    kernel = this.kernel;
+    len = kernel.length;
+    
+    i = 0;
+    while (i < len) {
+      data[i] = this.rgb[0]; ++i;
+      data[i] = this.rgb[1]; ++i;
+      data[i] = this.rgb[2]; ++i;
+      data[i] += kernel[i] * (1.0 - data[i] / 255); ++i;
+    }
+    
+    ctx.putImageData(dest, x, y);
+  },
+  
+  commit: function() {
+    Tegaki.activeCtx.drawImage(Tegaki.ghostCanvas, 0, 0);
+    Tegaki.ghostCtx.clearRect(0, 0,
+      Tegaki.ghostCanvas.width, Tegaki.ghostCanvas.height
+    );
+  },
+  
+  draw: function(posX, posY, pt) {
+    var offset, mx, my, fromX, fromY, dx, dy, err, derr, step, stepAcc;
+    
+    offset = this.center;
+    step = this.stepSize;
+    stepAcc = this.stepAcc;
+    
+    if (pt === true) {
+      this.stepAcc = 0;
+      this.posX = posX; 
+      this.posY = posY;
+      this.brushFn(posX - offset, posY - offset);
+      return;
+    }
+    
+    fromX = this.posX;
+    fromY = this.posY;
+    
+    if (fromX < posX) { dx = posX - fromX; mx = 1; }
+    else { dx = fromX - posX; mx = -1; }
+    if (fromY < posY) { dy = posY - fromY; my = 1; }
+    else { dy = fromY - posY; my = -1; }
+    
+    err = (dx > dy ? dx : -dy) / 2;
+    
+    dx = -dx;
+    
+    while (true) {
+      ++stepAcc;
+      if (stepAcc > step) {
+        this.brushFn(fromX - offset, fromY - offset);
+        stepAcc = 0;
+      }
+      if (fromX === posX && fromY === posY) {
+        break;
+      }
+      derr = err;
+      if (derr > dx) { err -= dy; fromX += mx; }
+      if (derr < dy) { err -= dx; fromY += my; }
+    }
+    
+    this.stepAcc = stepAcc;
+    this.posX = posX; 
+    this.posY = posY;
+  },
+  
+  generateBrush: function() {
+    var i, size, r, brush, ctx, dest, data, len, sqd, sqlen, hs, col, row,
+      ecol, erow, a;
+    
+    size = this.size * 2;
+    r = size / 2;
+    
+    brush = T$.el('canvas');
+    brush.width = brush.height = size;
+    ctx = brush.getContext('2d');
+    dest = ctx.getImageData(0, 0, size, size);
+    data = dest.data;
+    len = size * size * 4;
+    sqlen = Math.sqrt(r * r);
+    hs = Math.round(r);
+    col = row = -hs;
+    
+    i = 0;
+    while (i < len) {
+      if (col >= hs) {
+        col = -hs;
+        ++row;
+        continue;
+      }
+      
+      ecol = col;
+      erow = row;
+      
+      if (ecol < 0) { ecol = -ecol; }
+      if (erow < 0) { erow = -erow; }
+      
+      sqd = Math.sqrt(ecol * ecol + erow * erow);
+      
+      if (sqd > sqlen) {
+        a = 0;
+      }
+      else {
+        a = sqd / sqlen;
+        a = (Math.exp(1 - 1 / a) / a);
+        a = 255 - ((0 | (a * 100 + 0.5)) / 100) * 255;
+      }
+      
+      if (this.alphaDamp) {
+        a *= this.alpha * this.alphaDamp;
+      }
+      else {
+        a *= this.alpha;
+      }
+      
+      data[i + 3] = a;
+      
+      i += 4;
+      
+      ++col;
+    }
+    
+    ctx.putImageData(dest, 0, 0);
+    
+    this.center = r;
+    this.brushSize = size;
+    this.brush = brush;
+    this.kernel = data;
+  },
+  
+  setSize: function(size, noBrush) {
+    this.size = size;
+    if (!noBrush) this.generateBrush();
+    this.stepSize = Math.floor(this.size * this.step);
+  },
+  
+  setAlpha: function(alpha, noBrush) {
+    this.alpha = alpha;
+    if (!noBrush) this.generateBrush();
+  },
+  
+  setColor: function(color, noBrush) {
+    this.rgb = Tegaki.hexToRgb(color);
+    if (!noBrush) this.generateBrush();
+  },
+  
+  set: function() {
+    this.setAlpha(this.alpha, true);
+    this.setSize(this.size, true);
+    this.setColor(Tegaki.toolColor, true);
+    this.generateBrush();
+  }
+};
+
+var TegakiPen = {
+  init: function() {
+    this.size = 4;
+    this.alpha = 0.5;
+    this.step = 0.1;
+    this.stepAcc = 0;
+  },
+  
+  draw: TegakiBrush.draw,
+  
+  commit: TegakiBrush.commit,
+  
+  brushFn: TegakiBrush.brushFn,
+  
+  generateBrush: function() {
+    var size, r, brush, ctx;
+    
+    size = this.size;
+    r = size / 2;
+    
+    brush = T$.el('canvas');
+    brush.width = brush.height = size;
+    ctx = brush.getContext('2d');
+    ctx.globalAlpha = this.alpha;
+    ctx.beginPath();
+    ctx.arc(r, r, r, 0, Tegaki.TWOPI, false);
+    ctx.fillStyle = '#000000';
+    ctx.fill();
+    ctx.closePath();
+    
+    this.center = r;
+    this.brushSize = size;
+    this.brush = brush;
+    this.kernel = ctx.getImageData(0, 0, this.brushSize, this.brushSize).data;
+  },
+  
+  setSize: TegakiBrush.setSize,
+  
+  setAlpha: TegakiBrush.setAlpha,
+  
+  setColor: TegakiBrush.setColor,
+  
+  set: TegakiBrush.set
+};
+
+var TegakiPipette = {
+  size: 1,
+  alpha: 1,
+  noCursor: true,
+  
+  draw: function(posX, posY) {
+    var c, ctx;
+    
+    if (true) {
+      ctx = Tegaki.flatten().getContext('2d');
+    }
+    else {
+      ctx = Tegaki.activeCtx;
+    }
+    
+    c = Tegaki.getColorAt(ctx, posX, posY);
+    
+    Tegaki.setToolColor(c);
+    Tegaki.updateUI('color');
+  }
+};
+
+var TegakiAirbrush = {
+  init: function() {
+    this.size = 32;
+    this.alpha = 0.5;
+    this.alphaDamp = 0.2;
+    this.step = 0.25;
+    this.stepAcc = 0;
+  },
+  
+  draw: TegakiBrush.draw,
+  
+  commit: TegakiBrush.commit,
+  
+  brushFn: TegakiBrush.brushFn,
+  
+  generateBrush: TegakiBrush.generateBrush,
+  
+  setSize: TegakiBrush.setSize,
+  
+  setAlpha: TegakiBrush.setAlpha,
+  
+  setColor: TegakiBrush.setColor,
+  
+  set: TegakiBrush.set
+};
+
+var TegakiPencil = {
+  init: function() {
+    this.size = 1;
+    this.alpha = 1.0;
+    this.step = 0.25;
+    this.stepAcc = 0;
+  },
+  
+  draw: TegakiBrush.draw,
+  
+  commit: TegakiBrush.commit,
+  
+  brushFn: function(x, y) {
+    var i, ctx, dest, data, len, kernel, a;
+    
+    x = 0 | x;
+    y = 0 | y;
+    
+    ctx = Tegaki.ghostCtx;
+    dest = ctx.getImageData(x, y, this.brushSize, this.brushSize);
+    data = dest.data;
+    kernel = this.kernel;
+    len = kernel.length;
+    
+    a = this.alpha * 255;
+    
+    i = 0;
+    while (i < len) {
+      data[i] = this.rgb[0]; ++i;
+      data[i] = this.rgb[1]; ++i;
+      data[i] = this.rgb[2]; ++i;
+      if (kernel[i] > 0) {
+        data[i] = a;
+      }
+      ++i;
+    }
+    
+    ctx.putImageData(dest, x, y);
+  },
+  
+  generateBrush: TegakiPen.generateBrush,
+  
+  setSize: TegakiBrush.setSize,
+  
+  setAlpha: TegakiBrush.setAlpha,
+  
+  setColor: TegakiBrush.setColor,
+  
+  set: TegakiBrush.set
+};
+
+var TegakiEraser = {
+  init: function() {
+    this.size = 8;
+    this.alpha = 1.0;
+    this.step = 0.25;
+    this.stepAcc = 0;
+  },
+  
+  draw: TegakiBrush.draw,
+  
+  brushFn: function(x, y) {
+    var i, ctx, dest, data, len, kernel;
+    
+    x = 0 | x;
+    y = 0 | y;
+    
+    ctx = Tegaki.activeCtx;
+    dest = ctx.getImageData(x, y, this.brushSize, this.brushSize);
+    data = dest.data;
+    kernel = this.kernel;
+    len = kernel.length;
+    
+    for (i = 3; i < len; i += 4) {
+      if (kernel[i] > 0) {
+        data[i] = 0;
+      }
+    }
+    
+    ctx.putImageData(dest, x, y);
+  },
+  
+  generateBrush: TegakiPen.generateBrush,
+  
+  setSize: TegakiBrush.setSize,
+  
+  setAlpha: TegakiBrush.setAlpha,
+  
+  setColor: TegakiBrush.setColor,
+  
+  set: TegakiBrush.set
+};
+
+var TegakiDodge = {
+  init: function() {
+    this.size = 24;
+    this.alpha = 0.25;
+    this.alphaDamp = 0.05;
+    this.step = 0.25;
+    this.stepAcc = 0;
+  },
+  
+  brushFn: function(x, y) {
+    var i, a, aa, ctx, dest, data, len, kernel;
+    
+    x = 0 | x;
+    y = 0 | y;
+    
+    ctx = Tegaki.activeCtx;
+    dest = ctx.getImageData(x, y, this.brushSize, this.brushSize);
+    data = dest.data;
+    kernel = this.kernel;
+    len = kernel.length;
+    
+    i = 0;
+    while (i < len) {
+      aa = kernel[i + 3] * 0.3;
+      a = 1 + kernel[i + 3] / 255;
+      data[i] = data[i] * a + aa; ++i;
+      data[i] = data[i] * a + aa; ++i;
+      data[i] = data[i] * a + aa; ++i;
+      ++i;
+    }
+    
+    ctx.putImageData(dest, x, y);
+  },
+  
+  draw: TegakiBrush.draw,
+  
+  generateBrush: TegakiBrush.generateBrush,
+  
+  setSize: TegakiBrush.setSize,
+  
+  setAlpha: TegakiBrush.setAlpha,
+  
+  setColor: TegakiBrush.setColor,
+  
+  set: TegakiBrush.set
+};
+
+var TegakiBurn = {
+  init: TegakiDodge.init,
+  
+  brushFn: function(x, y) {
+    var i, a, ctx, dest, data, len, kernel;
+    
+    x = 0 | x;
+    y = 0 | y;
+    
+    ctx = Tegaki.activeCtx;
+    dest = ctx.getImageData(x, y, this.brushSize, this.brushSize);
+    data = dest.data;
+    kernel = this.kernel;
+    len = kernel.length;
+    
+    i = 0;
+    while (i < len) {
+      a = 1 - kernel[i + 3] / 255;
+      data[i] = data[i] * a; ++i;
+      data[i] = data[i] * a; ++i;
+      data[i] = data[i] * a; ++i;
+      ++i;
+    }
+    
+    ctx.putImageData(dest, x, y);
+  },
+  
+  draw: TegakiBrush.draw,
+  
+  generateBrush: TegakiDodge.generateBrush,
+  
+  setSize: TegakiBrush.setSize,
+  
+  setAlpha: TegakiBrush.setAlpha,
+  
+  setColor: TegakiBrush.setColor,
+  
+  set: TegakiBrush.set
+};
+
+var TegakiBlur = {
+  init: TegakiDodge.init,
+  
+  brushFn: function(x, y) {
+    var i, j, ctx, src, size, srcData, dest, destData, lim, kernel,
+      sx, sy, r, g, b, a, aa, acc, kx, ky;
+    
+    x = 0 | x;
+    y = 0 | y;
+    
+    size = this.brushSize;
+    ctx = Tegaki.activeCtx;
+    src = ctx.getImageData(x, y, size, size);
+    srcData = src.data;
+    dest = ctx.createImageData(size, size);
+    destData = dest.data;
+    kernel = this.kernel;
+    lim = size - 1;
+    
+    for (sx = 0; sx < size; ++sx) {
+      for (sy = 0; sy < size; ++sy) {
+        r = g = b = a = acc = 0;
+        i = (sy * size + sx) * 4;
+        if (kernel[(sy * size + sx) * 4 + 3] === 0
+          || sx === 0 || sy === 0 || sx === lim || sy === lim) {
+          destData[i] = srcData[i]; ++i;
+          destData[i] = srcData[i]; ++i;
+          destData[i] = srcData[i]; ++i;
+          destData[i] = srcData[i];
+          continue;
+        }
+        for (kx = -1; kx < 2; ++kx) {
+          for (ky = -1; ky < 2; ++ky) {
+            j = ((sy - ky) * size + (sx - kx)) * 4;
+            aa = srcData[j + 3];
+            acc += aa;
+            r += srcData[j] * aa; ++j;
+            g += srcData[j] * aa; ++j;
+            b += srcData[j] * aa; ++j;
+            a += srcData[j];
+          }
+        }
+        destData[i] = r / acc; ++i;
+        destData[i] = g / acc; ++i;
+        destData[i] = b / acc; ++i;
+        destData[i] = a / 9;
+      }
+    }
+    
+    ctx.putImageData(dest, x, y);
+  },
+  
+  draw: TegakiBrush.draw,
+  
+  generateBrush: TegakiDodge.generateBrush,
+  
+  setSize: TegakiBrush.setSize,
+  
+  setAlpha: TegakiBrush.setAlpha,
+  
+  setColor: TegakiBrush.setColor,
+  
+  set: TegakiBrush.set
+};
+
+var TegakiHistory = {
+  maxSize: 10,
+  
+  undoStack: [],
+  redoStack: [],
+  
+  pendingAction: null,
+  
+  clear: function() {
+    this.undoStack = [];
+    this.redoStack = [];
+    this.pendingAction = null;
+  },
+  
+  push: function(action) {
+    this.undoStack.push(action);
+    
+    if (this.undoStack.length > this.maxSize) {
+      this.undoStack.shift();
+    }
+    
+    if (this.redoStack.length > 0) {
+      this.redoStack = [];
+    }
+  },
+  
+  undo: function() {
+    var action;
+    
+    if (!this.undoStack.length) {
+      return;
+    }
+    
+    action = this.undoStack.pop();
+    action.undo();
+    
+    this.redoStack.push(action);
+  },
+  
+  redo: function() {
+    var action;
+    
+    if (!this.redoStack.length) {
+      return;
+    }
+    
+    action = this.redoStack.pop();
+    action.redo();
+    
+    this.undoStack.push(action);
+  }
+};
+
+var TegakiHistoryActions = {
+  Draw: function(layerId) {
+    this.canvasBefore = null;
+    this.canvasAfter = null;
+    this.layerId = layerId;
+  },
+  
+  DestroyLayers: function(indices, layers) {
+    this.indices = indices;
+    this.layers = layers;
+    this.canvasBefore = null;
+    this.canvasAfter = null;
+    this.layerId = null;
+  },
+  
+  AddLayer: function(layerId) {
+    this.layerId = layerId;
+  },
+  
+  MoveLayer: function(layerId, up) {
+    this.layerId = layerId;
+    this.up = up;
+  }
+};
+
+TegakiHistoryActions.Draw.prototype.addCanvasState = function(canvas, type) {
+  if (type) {
+    this.canvasAfter = T$.copyCanvas(canvas);
+  }
+  else {
+    this.canvasBefore = T$.copyCanvas(canvas);
+  }
+};
+
+TegakiHistoryActions.Draw.prototype.exec = function(type) {
+  var i, layer;
+  
+  for (i in Tegaki.layers) {
+    layer = Tegaki.layers[i];
+    
+    if (layer.id === this.layerId) {
+      layer.ctx.clearRect(0, 0, layer.canvas.width, layer.canvas.height);
+      layer.ctx.drawImage(type ? this.canvasAfter: this.canvasBefore, 0, 0);
+    }
+  }
+};
+
+TegakiHistoryActions.Draw.prototype.undo = function() {
+  this.exec(0);
+};
+
+TegakiHistoryActions.Draw.prototype.redo = function() {
+  this.exec(1);
+};
+
+TegakiHistoryActions.DestroyLayers.prototype.undo = function() {
+  var i, ii, len, layers, idx, layer, frag;
+  
+  layers = new Array(len);
+  
+  for (i = 0; (idx = this.indices[i]) !== undefined; ++i) {
+    layers[idx] = this.layers[i];
+  }
+  
+  i = ii = 0;
+  len = Tegaki.layers.length + this.layers.length;
+  frag = T$.frag();
+  
+  while (i < len) {
+    if (!layers[i]) {
+      layer = layers[i] = Tegaki.layers[ii];
+      Tegaki.layersCnt.removeChild(layer.canvas);
+      ++ii;
+    }
+    
+    if (this.layerId && layer.id === this.layerId) {
+      layer.ctx.clearRect(0, 0, layer.canvas.width, layer.canvas.height);
+      layer.ctx.drawImage(this.canvasBefore, 0, 0);
+    }
+    
+    frag.appendChild(layers[i].canvas);
+    
+    ++i;
+  }
+  
+  Tegaki.layersCnt.insertBefore(frag, Tegaki.canvas.nextElementSibling);
+  
+  Tegaki.layers = layers;
+  
+  Tegaki.setActiveLayer();
+  
+  Tegaki.rebuildLayerCtrl();
+};
+
+TegakiHistoryActions.DestroyLayers.prototype.redo = function() {
+  var i, layer, ids = [];
+  
+  for (i = 0; layer = this.layers[i]; ++i) {
+    ids.push(layer.id);
+  }
+  
+  if (this.layerId) {
+    ids.push(this.layerId);
+    Tegaki.mergeLayers(ids);
+  }
+  else {
+    Tegaki.deleteLayers(ids);
+  }
+};
+
+TegakiHistoryActions.MoveLayer.prototype.undo = function() {
+  Tegaki.setActiveLayer(this.layerId);
+  Tegaki.moveLayer(this.layerId, !this.up);
+};
+
+TegakiHistoryActions.MoveLayer.prototype.redo = function() {
+  Tegaki.setActiveLayer(this.layerId);
+  Tegaki.moveLayer(this.layerId, this.up);
+};
+
+TegakiHistoryActions.AddLayer.prototype.undo = function() {
+  Tegaki.deleteLayers([this.layerId]);
+  Tegaki.layerIndex--;
+};
+
+TegakiHistoryActions.AddLayer.prototype.redo = function() {
+  Tegaki.addLayer();
+  Tegaki.setActiveLayer();
+};
+
+var T$ = {
+  docEl: document.documentElement,
+  
+  id: function(id) {
+    return document.getElementById(id);
+  },
+  
+  cls: function(klass, root) {
+    return (root || document).getElementsByClassName(klass);
+  },
+  
+  on: function(o, e, h) {
+    o.addEventListener(e, h, false);
+  },
+  
+  off: function(o, e, h) {
+    o.removeEventListener(e, h, false);
+  },
+  
+  el: function(name) {
+    return document.createElement(name);
+  },
+  
+  frag: function() {
+    return document.createDocumentFragment();
+  },
+  
+  extend: function(destination, source) {
+    for (var key in source) {
+      destination[key] = source[key];
+    }
+  },
+  
+  selectedOptions: function(el) {
+    var i, opt, sel;
+    
+    if (el.selectedOptions) {
+      return el.selectedOptions;
+    }
+    
+    sel = [];
+    
+    for (i = 0; opt = el.options[i]; ++i) {
+      if (opt.selected) {
+        sel.push(opt);
+      }
+    }
+    
+    return sel;
+  },
+  
+  copyCanvas: function(source) {
+    var canvas = T$.el('canvas');
+    canvas.width = source.width;
+    canvas.height = source.height;
+    canvas.getContext('2d').drawImage(source, 0, 0);
+    
+    return canvas;
+  }
+};
+
+var TegakiStrings = {
+  // Messages
+  badDimensions: 'Invalid dimensions.',
+  promptWidth: 'Canvas width in pixels',
+  promptHeight: 'Canvas height in pixels',
+  confirmDelLayers: 'Delete selected layers?',
+  errorMergeOneLayer: 'You need to select at least 2 layers.',
+  confirmMergeLayers: 'Merge selected layers?',
+  errorLoadImage: 'Could not load the image.',
+  noActiveLayer: 'No active layer.',
+  hiddenActiveLayer: 'The active layer is not visible.',
+  confirmCancel: 'Are you sure? Your work will be lost.',
+  confirmChangeCanvas: 'Changing the canvas will clear all layers and history.',
+  
+  // UI
+  color: 'Color',
+  size: 'Size',
+  alpha: 'Opacity',
+  layers: 'Layers',
+  addLayer: 'Add layer',
+  delLayers: 'Delete layers',
+  mergeLayers: 'Merge layers',
+  showHideLayer: 'Toggle visibility',
+  moveLayerUp: 'Move up',
+  moveLayerDown: 'Move down',
+  tool: 'Tool',
+  changeCanvas: 'Change canvas',
+  blank: 'Blank',
+  newCanvas: 'New',
+  undo: 'Undo',
+  redo: 'Redo',
+  close: 'Close',
+  finish: 'Finish',
+  
+  // Tools
+  pen: 'Pen',
+  pencil: 'Pencil',
+  airbrush: 'Airbrush',
+  pipette: 'Pipette',
+  dodge: 'Dodge',
+  burn: 'Burn',
+  blur: 'Blur',
+  eraser: 'Eraser'
+};
+
+var Tegaki = {
+  VERSION: '0.0.1',
+  
+  bg: null,
+  cnt: null,
+  canvas: null,
+  ctx: null,
+  layers: [],
+  layersCnt: null,
+  ghostCanvas: null,
+  ghostCtx: null,
+  activeCtx: null,
+  activeLayer: null,
+  layerIndex: null,
+  
+  isPainting: false,
+  isErasing: false,
+  isColorPicking: false,
+  
+  offsetX: 0,
+  offsetY: 0,
+  
+  TWOPI: 2 * Math.PI,
+  
+  tools: {
+    pencil: TegakiPencil,
+    pen: TegakiPen,
+    airbrush: TegakiAirbrush,
+    pipette: TegakiPipette,
+    dodge: TegakiDodge,
+    burn: TegakiBurn,
+    blur: TegakiBlur,
+    eraser: TegakiEraser
+  },
+  
+  tool: null,
+  toolColor: '#000000',
+  
+  bgColor: '#ffffff',
+  maxSize: 32,
+  maxLayers: 25,
+  baseWidth: null,
+  baseHeight: null,
+  
+  onDoneCb: null,
+  onCancelCb: null,
+  
+  open: function(opts) {
+    var bg, cnt, el, el2, tool, lbl, btn, ctrl, canvas, grp, self = Tegaki;
+    
+    if (self.bg) {
+      self.resume();
+      return;
+    }
+    
+    if (opts.bgColor) {
+      self.bgColor = opts.bgColor;
+    }
+    
+    self.onDoneCb = opts.onDone;
+    self.onCancelCb = opts.onCancel;
+    
+    cnt = T$.el('div');
+    cnt.id = 'tegaki-cnt';
+    
+    canvas = T$.el('canvas');
+    canvas.id = 'tegaki-canvas';
+    canvas.width = self.baseWidth = opts.width;
+    canvas.height = self.baseHeight = opts.height;
+    
+    el = T$.el('div');
+    el.id = 'tegaki-layers';
+    el.appendChild(canvas);
+    self.layersCnt = el;
+    
+    cnt.appendChild(el);
+    
+    ctrl = T$.el('div');
+    ctrl.id = 'tegaki-ctrl';
+    
+    // Colorpicker
+    grp = T$.el('div');
+    grp.className = 'tegaki-ctrlgrp';
+    el = T$.el('input');
+    el.id = 'tegaki-color';
+    el.value = self.toolColor;
+    try {
+      el.type = 'color';
+    } catch(e) {
+      el.type = 'text';
+    }
+    lbl = T$.el('div');
+    lbl.className = 'tegaki-label';
+    lbl.textContent = TegakiStrings.color;
+    grp.appendChild(lbl);
+    T$.on(el, 'change', self.onColorChange);
+    grp.appendChild(el);
+    ctrl.appendChild(grp);
+    
+    // Size control
+    grp = T$.el('div');
+    grp.className = 'tegaki-ctrlgrp';
+    el = T$.el('input');
+    el.id = 'tegaki-size';
+    el.min = 1;
+    el.max = self.maxSize;
+    el.type = 'range';
+    lbl = T$.el('div');
+    lbl.className = 'tegaki-label';
+    lbl.textContent = TegakiStrings.size;
+    grp.appendChild(lbl);
+    T$.on(el, 'change', self.onSizeChange);
+    grp.appendChild(el);
+    ctrl.appendChild(grp);
+    
+    // Alpha control
+    grp = T$.el('div');
+    grp.className = 'tegaki-ctrlgrp';
+    el = T$.el('input');
+    el.id = 'tegaki-alpha';
+    el.min = 0;
+    el.max = 1;
+    el.step = 0.01;
+    el.type = 'range';
+    lbl = T$.el('div');
+    lbl.className = 'tegaki-label';
+    lbl.textContent = TegakiStrings.alpha;
+    grp.appendChild(lbl);
+    T$.on(el, 'change', self.onAlphaChange);
+    grp.appendChild(el);
+    ctrl.appendChild(grp);
+    
+    // Layer control
+    grp = T$.el('div');
+    grp.className = 'tegaki-ctrlgrp';
+    grp.id = 'tegaki-layer-grp';
+    el = T$.el('select');
+    el.id = 'tegaki-layer';
+    el.multiple = true;
+    el.size = 3;
+    lbl = T$.el('div');
+    lbl.className = 'tegaki-label';
+    lbl.textContent = TegakiStrings.layers;
+    grp.appendChild(lbl);
+    T$.on(el, 'change', self.onLayerChange);
+    grp.appendChild(el);
+    el = T$.el('span');
+    el.title = TegakiStrings.addLayer;
+    el.className = 'tegaki-icon tegaki-plus';
+    T$.on(el, 'click', self.onLayerAdd);
+    grp.appendChild(el);
+    el = T$.el('span');
+    el.title = TegakiStrings.delLayers;
+    el.className = 'tegaki-icon tegaki-minus';
+    T$.on(el, 'click', self.onLayerDelete);
+    grp.appendChild(el);
+    el = T$.el('span');
+    el.id = 'tegaki-layer-visibility';
+    el.title = TegakiStrings.showHideLayer;
+    el.className = 'tegaki-icon tegaki-eye';
+    T$.on(el, 'click', self.onLayerVisibilityChange);
+    grp.appendChild(el);
+    el = T$.el('span');
+    el.id = 'tegaki-layer-merge';
+    el.title = TegakiStrings.mergeLayers;
+    el.className = 'tegaki-icon tegaki-level-down';
+    T$.on(el, 'click', self.onMergeLayers);
+    grp.appendChild(el);
+    el = T$.el('span');
+    el.id = 'tegaki-layer-up';
+    el.title = TegakiStrings.moveLayerUp;
+    el.setAttribute('data-up', '1');
+    el.className = 'tegaki-icon tegaki-up-open';
+    T$.on(el, 'click', self.onMoveLayer);
+    grp.appendChild(el);
+    el = T$.el('span');
+    el.id = 'tegaki-layer-down';
+    el.title = TegakiStrings.moveLayerDown;
+    el.className = 'tegaki-icon tegaki-down-open';
+    T$.on(el, 'click', self.onMoveLayer);
+    grp.appendChild(el);
+    ctrl.appendChild(grp);
+    
+    // Tool selector
+    grp = T$.el('div');
+    grp.className = 'tegaki-ctrlgrp';
+    el = T$.el('select');
+    el.id = 'tegaki-tool';
+    for (tool in Tegaki.tools) {
+      el2 = T$.el('option');
+      el2.value = tool;
+      el2.textContent = TegakiStrings[tool];
+      el.appendChild(el2);
+    }
+    lbl = T$.el('div');
+    lbl.className = 'tegaki-label';
+    lbl.textContent = TegakiStrings.tool;
+    grp.appendChild(lbl);
+    T$.on(el, 'change', self.onToolChange);
+    grp.appendChild(el);
+    ctrl.appendChild(grp);
+    
+    cnt.appendChild(ctrl);
+    
+    el = T$.el('div');
+    el.id = 'tegaki-menu-bar';
+    
+    if (opts.canvasOptions) {
+      btn = T$.el('select');
+      btn.id = 'tegaki-canvas-select';
+      btn.title = TegakiStrings.changeCanvas;
+      btn.innerHTML = '<option value="0">' + TegakiStrings.blank + '</option>';
+      opts.canvasOptions(btn);
+      T$.on(btn, 'change', Tegaki.onCanvasSelected);
+      T$.on(btn, 'focus', Tegaki.onCanvasSelectFocused);
+      el.appendChild(btn);
+    }
+    
+    btn = T$.el('span');
+    btn.className = 'tegaki-tb-btn';
+    btn.textContent = TegakiStrings.newCanvas;
+    T$.on(btn, 'click', Tegaki.onNewClick);
+    el.appendChild(btn);
+    
+    btn = T$.el('span');
+    btn.className = 'tegaki-tb-btn';
+    btn.textContent = TegakiStrings.undo;
+    T$.on(btn, 'click', Tegaki.onUndoClick);
+    el.appendChild(btn);
+    
+    btn = T$.el('span');
+    btn.className = 'tegaki-tb-btn';
+    btn.textContent = TegakiStrings.redo;
+    T$.on(btn, 'click', Tegaki.onRedoClick);
+    el.appendChild(btn);
+    
+    btn = T$.el('span');
+    btn.className = 'tegaki-tb-btn';
+    btn.textContent = TegakiStrings.close;
+    T$.on(btn, 'click', Tegaki.onCancelClick);
+    el.appendChild(btn);
+    
+    btn = T$.el('span');
+    btn.id = 'tegaki-finish-btn';
+    btn.className = 'tegaki-tb-btn';
+    btn.textContent = TegakiStrings.finish;
+    T$.on(btn, 'click', Tegaki.onDoneClick);
+    el.appendChild(btn);
+    
+    cnt.appendChild(el);
+    
+    bg = T$.el('div');
+    bg.id = 'tegaki';
+    self.bg = bg;
+    bg.appendChild(cnt);
+    document.body.appendChild(bg);
+    document.body.classList.add('tegaki-backdrop');
+    
+    el = T$.el('canvas');
+    el.id = 'tegaki-ghost-layer';
+    el.width = canvas.width;
+    el.height = canvas.height;
+    self.ghostCanvas = el;
+    self.ghostCtx = el.getContext('2d');
+    
+    self.cnt = cnt;
+    self.centerCnt();
+    
+    self.canvas = canvas;
+    
+    self.ctx = canvas.getContext('2d');
+    self.ctx.fillStyle = self.bgColor;
+    self.ctx.fillRect(0, 0, opts.width, opts.height);
+    
+    self.addLayer();
+    
+    self.setActiveLayer();
+    
+    self.initTools();
+    
+    self.setTool('pencil');
+    
+    self.updateUI();
+    
+    self.updateCursor();
+    self.updatePosOffset();
+    
+    T$.on(self.bg, 'mousemove', self.onMouseMove);
+    T$.on(self.bg, 'mousedown', self.onMouseDown);
+    T$.on(self.layersCnt, 'contextmenu', self.onDummy);
+    
+    T$.on(document, 'mouseup', self.onMouseUp);
+    T$.on(window, 'resize', self.updatePosOffset);
+    T$.on(window, 'scroll', self.updatePosOffset);
+  },
+  
+  initTools: function() {
+    var tool;
+    
+    for (tool in Tegaki.tools) {
+      (tool = Tegaki.tools[tool]) && tool.init && tool.init();
+    }
+  },
+  
+  hexToRgb: function(hex) {
+    var c = hex.match(/^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i);
+    
+    if (c) {
+      return [
+        parseInt(c[1], 16),
+        parseInt(c[2], 16),
+        parseInt(c[3], 16)
+      ];
+    }
+    
+    return null;
+  },
+  
+  centerCnt: function() {
+    var aabb, cnt;
+    
+    cnt = Tegaki.cnt;
+    aabb = cnt.getBoundingClientRect();
+    
+    if (aabb.width > T$.docEl.clientWidth || aabb.height > T$.docEl.clientHeight) {
+      if (aabb.width > T$.docEl.clientWidth) {
+        cnt.classList.add('tegaki-overflow-x');
+      }
+      if (aabb.height > T$.docEl.clientHeight) {
+        cnt.classList.add('tegaki-overflow-y');
+      }
+    }
+    else {
+      cnt.classList.remove('tegaki-overflow-x');
+      cnt.classList.remove('tegaki-overflow-y');
+    }
+    
+    cnt.style.marginTop = -Math.round(aabb.height / 2) + 'px';
+    cnt.style.marginLeft = -Math.round(aabb.width / 2) + 'px';
+  },
+  
+  getCursorPos: function(e, axis) {
+    if (axis === 0) {
+      return e.clientX + window.pageXOffset + Tegaki.bg.scrollLeft - Tegaki.offsetX;
+    }
+    else {
+      return e.clientY + window.pageYOffset + Tegaki.bg.scrollTop - Tegaki.offsetY;
+    }
+  },
+  
+  resume: function() {
+    Tegaki.bg.classList.remove('tegaki-hidden');
+    document.body.classList.add('tegaki-backdrop');
+    
+    Tegaki.centerCnt();
+    Tegaki.updatePosOffset();
+    
+    T$.on(document, 'mouseup', Tegaki.onMouseUp);
+    T$.on(window, 'resize', Tegaki.updatePosOffset);
+    T$.on(window, 'scroll', Tegaki.updatePosOffset);
+  },
+  
+  hide: function() {
+    Tegaki.bg.classList.add('tegaki-hidden');
+    document.body.classList.remove('tegaki-backdrop');
+    
+    T$.off(document, 'mouseup', Tegaki.onMouseUp);
+    T$.off(window, 'resize', Tegaki.updatePosOffset);
+    T$.off(window, 'scroll', Tegaki.updatePosOffset);
+  },
+  
+  destroy: function() {
+    T$.off(Tegaki.bg, 'mousemove', Tegaki.onMouseMove);
+    T$.off(Tegaki.bg, 'mousedown', Tegaki.onMouseDown);
+    T$.off(Tegaki.layersCnt, 'contextmenu', Tegaki.onDummy);
+    
+    T$.off(document, 'mouseup', Tegaki.onMouseUp);
+    T$.off(window, 'resize', Tegaki.updatePosOffset);
+    T$.off(window, 'scroll', Tegaki.updatePosOffset);
+    
+    Tegaki.bg.parentNode.removeChild(Tegaki.bg);
+    
+    TegakiHistory.clear();
+    
+    document.body.classList.remove('tegaki-backdrop');
+    
+    Tegaki.bg = null;
+    Tegaki.cnt = null;
+    Tegaki.canvas = null;
+    Tegaki.ctx = null;
+    Tegaki.layers = [];
+    Tegaki.layerIndex = 0;
+    Tegaki.activeCtx = null;
+  },
+  
+  flatten: function() {
+    var i, layer, canvas, ctx;
+    
+    canvas = T$.el('canvas');
+    canvas.width = Tegaki.canvas.width;
+    canvas.height = Tegaki.canvas.height;
+    
+    ctx = canvas.getContext('2d');
+    
+    ctx.drawImage(Tegaki.canvas, 0, 0);
+    
+    for (i = 0; layer = Tegaki.layers[i]; ++i) {
+      if (layer.canvas.classList.contains('tegaki-hidden')) {
+        continue;
+      }
+      ctx.drawImage(layer.canvas, 0, 0);
+    }
+    
+    return canvas;
+  },
+  
+  updateUI: function(type) {
+    var i, ary, el, tool = Tegaki.tool;
+    
+    ary = type ? [type] : ['size', 'alpha', 'color'];
+    
+    for (i = 0; type = ary[i]; ++i) {
+      el = T$.id('tegaki-' + type);
+      el.value = type === 'color' ? Tegaki.toolColor : tool[type];
+      
+      if (el.type === 'range') {
+        el.previousElementSibling.setAttribute('data-value', tool[type]);
+      }
+    }
+  },
+  
+  rebuildLayerCtrl: function() {
+    var i, layer, sel, opt;
+    
+    sel = T$.id('tegaki-layer');
+    
+    sel.textContent = '';
+    
+    for (i = Tegaki.layers.length - 1; layer = Tegaki.layers[i]; i--) {
+      opt = T$.el('option');
+      opt.value = layer.id;
+      opt.textContent = layer.name;
+      sel.appendChild(opt);
+    }
+  },
+  
+  getColorAt: function(ctx, posX, posY) {
+    var rgba = ctx.getImageData(posX, posY, 1, 1).data;
+    
+    return '#'
+      + ('0' + rgba[0].toString(16)).slice(-2)
+      + ('0' + rgba[1].toString(16)).slice(-2)
+      + ('0' + rgba[2].toString(16)).slice(-2);
+  },
+  
+  renderCircle: function(r) {
+    var i, canvas, ctx, d, e, x, y, dx, dy, idata, data, c, color;
+    
+    e = 1 - r;
+    dx = 0;
+    dy = -2 * r;
+    x = 0;
+    y = r;
+    d = 33;
+    c = 16;
+    
+    canvas = T$.el('canvas');
+    canvas.width = canvas.height = d;
+    ctx = canvas.getContext('2d');
+    idata = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+    data = idata.data;
+    
+    color = 255;
+    
+    data[(c + (c + r) * d) * 4 + 3] = color;
+    data[(c + (c - r) * d) * 4 + 3] = color;
+    data[(c + r + c * d) * 4 + 3] = color;
+    data[(c - r + c * d) * 4 + 3] = color;
+    
+    while (x < y) {
+      if (e >= 0) {
+        y--;
+        dy += 2;
+        e += dy;
+      }
+      
+      ++x;
+      dx += 2;
+      e += dx;
+      
+      data[(c + x + (c + y) * d) * 4 + 3] = color;
+      data[(c - x + (c + y) * d) * 4 + 3] = color;
+      data[(c + x + (c - y) * d) * 4 + 3] = color;
+      data[(c - x + (c - y) * d) * 4 + 3] = color;
+      data[(c + y + (c + x) * d) * 4 + 3] = color;
+      data[(c - y + (c + x) * d) * 4 + 3] = color;
+      data[(c + y + (c - x) * d) * 4 + 3] = color;
+      data[(c - y + (c - x) * d) * 4 + 3] = color;
+    }
+    
+    if (r > 0) {
+      for (i = 0; i < 3; ++i) {
+        data[(c + c * d) * 4 + i] = 127;
+      }
+      data[(c + c * d) * 4 + i] = color;
+    }
+    
+    ctx.putImageData(idata, 0, 0);
+    
+    return canvas;
+  },
+  
+  setToolSize: function(size) {
+    Tegaki.tool.setSize && Tegaki.tool.setSize(size);
+    Tegaki.updateCursor();
+  },
+  
+  setToolAlpha: function(alpha) {
+    Tegaki.tool.setAlpha && Tegaki.tool.setAlpha(alpha);
+  },
+  
+  setToolColor: function(color) {
+    Tegaki.toolColor = color;
+    Tegaki.tool.setColor && Tegaki.tool.setColor(color);
+    Tegaki.updateCursor();
+  },
+  
+  setTool: function(tool) {
+    tool = Tegaki.tools[tool];
+    Tegaki.tool = tool;
+    tool.set && tool.set();
+  },
+  
+  debugDumpPixelData: function(canvas) {
+    var i, idata, data, len, out, el;
+    
+    idata = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
+    data = idata.data;
+    len = data.length;
+    
+    out = '';
+    
+    for (i = 0; i < len; i += 4) {
+      out += data[i] + ' ' + data[i+1] + ' ' + data[i+2] + ' ' + data[i+3] + '%0a';
+    }
+    
+    el = document.createElement('a');
+    el.href = 'data:,' + out;
+    el.download = 'dump.txt';
+    document.body.appendChild(el);
+    el.click();
+    document.body.removeChild(el);
+  },
+  
+  debugDrawColors: function(sat) {
+    var i, ctx, grad, a;
+    
+    Tegaki.resizeCanvas(360, 360);
+    
+    ctx = Tegaki.activeCtx;
+    a = ctx.globalAlpha;
+    ctx.globalAlpha = 1;
+    
+    ctx.fillStyle = '#000000';
+    ctx.fillRect(0, 0, 360, 360);
+    
+    for (i = 0; i < 360; ++i) {
+      if (sat) {
+        grad = ctx.createLinearGradient(0, 0, 10, 360);
+        grad.addColorStop(0, 'hsl(' + i + ', 0%, ' + '50%)');
+        grad.addColorStop(1, 'hsl(' + i + ', 100%, ' + '50%)');
+        ctx.strokeStyle = grad;
+      }
+      else {
+        ctx.strokeStyle = 'hsl(' + i + ', 100%, ' + '50%)';
+      }
+      ctx.beginPath();
+      ctx.moveTo(i, 0);
+      ctx.lineTo(i, 360);
+      ctx.stroke();
+      ctx.closePath();
+    }
+    
+    if (!sat) {
+      grad = ctx.createLinearGradient(0, 0, 10, 360);
+      grad.addColorStop(0, '#000000');
+      grad.addColorStop(1, 'rgba(0,0,0,0)');
+      ctx.fillStyle = grad;
+      ctx.fillRect(0, 0, 360, 360);
+    }
+    
+    ctx.globalAlpha = a;
+  },
+  
+  onNewClick: function() {
+    var width, height, tmp;
+    
+    width = prompt(TegakiStrings.promptWidth, Tegaki.canvas.width);
+    if (!width) { return; }
+    
+    height = prompt(TegakiStrings.promptHeight, Tegaki.canvas.height);
+    if (!height) { return; }
+    
+    width = +width;
+    height = +height;
+    
+    if (width < 1 || height < 1) {
+      alert(TegakiStrings.badDimensions);
+      return;
+    }
+    
+    tmp = {};
+    Tegaki.copyContextState(Tegaki.activeCtx, tmp);
+    Tegaki.resizeCanvas(width, height);
+    Tegaki.copyContextState(tmp, Tegaki.activeCtx);
+    
+    TegakiHistory.clear();
+    Tegaki.centerCnt();
+    Tegaki.updatePosOffset();
+  },
+  
+  onUndoClick: function() {
+    TegakiHistory.undo();
+  },
+  
+  onRedoClick: function() {
+    TegakiHistory.redo();
+  },
+  
+  onDoneClick: function() {
+    Tegaki.hide();
+    Tegaki.onDoneCb();
+  },
+  
+  onCancelClick: function() {
+    if (!confirm(TegakiStrings.confirmCancel)) {
+      return;
+    }
+    
+    Tegaki.destroy();
+    Tegaki.onCancelCb();
+  },
+  
+  onColorChange: function() {
+    Tegaki.setToolColor(this.value);
+  },
+  
+  onSizeChange: function() {
+    this.previousElementSibling.setAttribute('data-value', this.value);
+    Tegaki.setToolSize(+this.value);
+  },
+  
+  onAlphaChange: function() {
+    this.previousElementSibling.setAttribute('data-value', this.value);
+    Tegaki.setToolAlpha(+this.value);
+  },
+  
+  onLayerChange: function() {
+    var selectedOptions = T$.selectedOptions(this);
+    
+    if (selectedOptions.length > 1) {
+      Tegaki.activeLayer = null;
+    }
+    else {
+      Tegaki.setActiveLayer(+this.value);
+    }
+  },
+  
+  onLayerAdd: function() {
+    TegakiHistory.push(Tegaki.addLayer());
+    Tegaki.setActiveLayer();
+  },
+  
+  onLayerDelete: function() {
+    var i, ary, sel, opt, selectedOptions, action;
+    
+    sel = T$.id('tegaki-layer');
+    
+    selectedOptions = T$.selectedOptions(sel);
+    
+    if (Tegaki.layers.length === selectedOptions.length) {
+      return;
+    }
+    
+    if (!confirm(TegakiStrings.confirmDelLayers)) {
+      return;
+    }
+    
+    if (selectedOptions.length > 1) {
+      ary = [];
+      
+      for (i = 0; opt = selectedOptions[i]; ++i) {
+        ary.push(+opt.value);
+      }
+    }
+    else {
+      ary = [+sel.value];
+    }
+    
+    action = Tegaki.deleteLayers(ary);
+    
+    TegakiHistory.push(action);
+  },
+  
+  onLayerVisibilityChange: function() {
+    var i, ary, sel, opt, flag, selectedOptions;
+    
+    sel = T$.id('tegaki-layer');
+    
+    selectedOptions = T$.selectedOptions(sel);
+    
+    if (selectedOptions.length > 1) {
+      ary = [];
+      
+      for (i = 0; opt = selectedOptions[i]; ++i) {
+        ary.push(+opt.value);
+      }
+    }
+    else {
+      ary = [+sel.value];
+    }
+    
+    flag = !Tegaki.getLayerById(ary[0]).visible;
+    
+    Tegaki.setLayerVisibility(ary, flag);
+  },
+  
+  onMergeLayers: function() {
+    var i, ary, sel, opt, selectedOptions, action;
+    
+    sel = T$.id('tegaki-layer');
+    
+    selectedOptions = T$.selectedOptions(sel);
+    
+    if (selectedOptions.length > 1) {
+      ary = [];
+      
+      for (i = 0; opt = selectedOptions[i]; ++i) {
+        ary.push(+opt.value);
+      }
+    }
+    else {
+      ary = [+sel.value];
+    }
+    
+    if (ary.length < 2) {
+      alert(TegakiStrings.errorMergeOneLayer);
+      return;
+    }
+    
+    if (!confirm(TegakiStrings.confirmMergeLayers)) {
+      return;
+    }
+    
+    action = Tegaki.mergeLayers(ary);
+    
+    TegakiHistory.push(action);
+  },
+  
+  onMoveLayer: function(e) {
+    var id, action, sel;
+    
+    sel = T$.id('tegaki-layer');
+    
+    id = +sel.options[sel.selectedIndex].value;
+    
+    if (action = Tegaki.moveLayer(id, e.target.hasAttribute('data-up'))) {
+      TegakiHistory.push(action);
+    }
+  },
+  
+  onToolChange: function() {
+    Tegaki.setTool(this.value);
+    Tegaki.updateUI();
+    Tegaki.updateCursor();
+  },
+  
+  onCanvasSelected: function() {
+    var img;
+    
+    if (!confirm(TegakiStrings.confirmChangeCanvas)) {
+      this.selectedIndex = +this.getAttribute('data-current');
+      return;
+    }
+    
+    if (this.value === '0') {
+      Tegaki.ctx.fillStyle = Tegaki.bgColor;
+      Tegaki.ctx.fillRect(0, 0, Tegaki.baseWidth, Tegaki.baseHeight);
+    }
+    else {
+      img = T$.el('img');
+      img.onload = Tegaki.onImageLoaded;
+      img.onerror = Tegaki.onImageError;
+      this.disabled = true;
+      img.src = this.value;
+    }
+  },
+  
+  onImageLoaded: function() {
+    var el, tmp = {};
+    
+    el = T$.id('tegaki-canvas-select');
+    el.setAttribute('data-current', el.selectedIndex);
+    el.disabled = false;
+    
+    Tegaki.copyContextState(Tegaki.activeCtx, tmp);
+    Tegaki.resizeCanvas(this.naturalWidth, this.naturalHeight);
+    Tegaki.activeCtx.drawImage(this, 0, 0);
+    Tegaki.copyContextState(tmp, Tegaki.activeCtx);
+    
+    TegakiHistory.clear();
+    Tegaki.centerCnt();
+    Tegaki.updatePosOffset();
+  },
+  
+  onImageError: function() {
+    var el;
+    
+    el = T$.id('tegaki-canvas-select');
+    el.selectedIndex = +el.getAttribute('data-current');
+    el.disabled = false;
+    
+    alert(TegakiStrings.errorLoadImage);
+  },
+  
+  resizeCanvas: function(width, height) {
+    var i, layer;
+    
+    Tegaki.canvas.width = width;
+    Tegaki.canvas.height = height;
+    Tegaki.ghostCanvas.width = width;
+    Tegaki.ghostCanvas.height = height;
+    
+    Tegaki.ctx.fillStyle = Tegaki.bgColor;
+    Tegaki.ctx.fillRect(0, 0, width, height);
+    
+    for (i = 0; layer = Tegaki.layers[i]; ++i) {
+      Tegaki.layersCnt.removeChild(layer.canvas);
+    }
+    
+    Tegaki.activeCtx = null;
+    Tegaki.layers = [];
+    Tegaki.layerIndex = 0;
+    T$.id('tegaki-layer').textContent = '';
+    
+    Tegaki.addLayer();
+    Tegaki.setActiveLayer();
+  },
+  
+  getLayerIndex: function(id) {
+    var i, layer, layers = Tegaki.layers;
+    
+    for (i = 0; layer = layers[i]; ++i) {
+      if (layer.id === id) {
+        return i;
+      }
+    }
+    
+    return -1;
+  },
+  
+  getLayerById: function(id) {
+    return Tegaki.layers[Tegaki.getLayerIndex(id)];
+  },
+  
+  addLayer: function() {
+    var id, cnt, opt, canvas, layer, nodes, last;
+    
+    canvas = T$.el('canvas');
+    canvas.className = 'tegaki-layer';
+    canvas.width = Tegaki.canvas.width;
+    canvas.height = Tegaki.canvas.height;
+    
+    id = ++Tegaki.layerIndex;
+    
+    layer = {
+      id: id,
+      name: 'Layer ' + id,
+      canvas: canvas,
+      ctx: canvas.getContext('2d'),
+      visible: true,
+      empty: true,
+      opacity: 1.0
+    };
+    
+    Tegaki.layers.push(layer);
+    
+    cnt = T$.id('tegaki-layer');
+    opt = T$.el('option');
+    opt.value = layer.id;
+    opt.textContent = layer.name;
+    cnt.insertBefore(opt, cnt.firstElementChild);
+    
+    nodes = T$.cls('tegaki-layer', Tegaki.layersCnt);
+    
+    if (nodes.length) {
+      last = nodes[nodes.length - 1];
+    }
+    else {
+      last = Tegaki.canvas;
+    }
+    
+    Tegaki.layersCnt.insertBefore(canvas, last.nextElementSibling);
+    
+    return new TegakiHistoryActions.AddLayer(id);
+  },
+  
+  deleteLayers: function(ids) {
+    var i, id, len, sel, idx, indices, layers;
+    
+    sel = T$.id('tegaki-layer');
+    
+    indices = [];
+    layers = [];
+    
+    for (i = 0, len = ids.length; i < len; ++i) {
+      id = ids[i];
+      idx = Tegaki.getLayerIndex(id);
+      sel.removeChild(sel.options[Tegaki.layers.length - 1 - idx]);
+      Tegaki.layersCnt.removeChild(Tegaki.layers[idx].canvas);
+      
+      indices.push(idx);
+      layers.push(Tegaki.layers[idx]);
+      
+      Tegaki.layers.splice(idx, 1);
+    }
+    
+    Tegaki.setActiveLayer();
+    
+    return new TegakiHistoryActions.DestroyLayers(indices, layers);
+  },
+  
+  mergeLayers: function(ids) {
+    var i, id, sel, idx, canvasBefore, destId, dest, action;
+    
+    sel = T$.id('tegaki-layer');
+    
+    destId = ids.pop();
+    idx = Tegaki.getLayerIndex(destId);
+    dest = Tegaki.layers[idx].ctx;
+    
+    canvasBefore = T$.copyCanvas(Tegaki.layers[idx].canvas);
+    
+    for (i = ids.length - 1; i >= 0; i--) {
+      id = ids[i];
+      idx = Tegaki.getLayerIndex(id);
+      dest.drawImage(Tegaki.layers[idx].canvas, 0, 0);
+    }
+    
+    action = Tegaki.deleteLayers(ids);
+    action.layerId = destId;
+    action.canvasBefore = canvasBefore;
+    action.canvasAfter = T$.copyCanvas(dest.canvas);
+    
+    Tegaki.setActiveLayer(destId);
+    
+    return action;
+  },
+  
+  moveLayer: function(id, up) {
+    var idx, sel, opt, canvas, tmp, tmpId;
+    
+    sel = T$.id('tegaki-layer');
+    idx = Tegaki.getLayerIndex(id);
+    
+    canvas = Tegaki.layers[idx].canvas;
+    opt = sel.options[Tegaki.layers.length - 1 - idx];
+    
+    if (up) {
+      if (!Tegaki.ghostCanvas.nextElementSibling) { return false; }
+      canvas.parentNode.insertBefore(canvas,
+        Tegaki.ghostCanvas.nextElementSibling.nextElementSibling
+      );
+      opt.parentNode.insertBefore(opt, opt.previousElementSibling);
+      tmpId = idx + 1;
+    }
+    else {
+      if (canvas.previousElementSibling.id === 'tegaki-canvas') { return false; }
+      canvas.parentNode.insertBefore(canvas, canvas.previousElementSibling);
+      opt.parentNode.insertBefore(opt, opt.nextElementSibling.nextElementSibling);
+      tmpId = idx - 1;
+    }
+    
+    Tegaki.updateGhostLayerPos();
+    
+    tmp = Tegaki.layers[tmpId];
+    Tegaki.layers[tmpId] = Tegaki.layers[idx];
+    Tegaki.layers[idx] = tmp;
+    
+    Tegaki.activeLayer = tmpId;
+    
+    return new TegakiHistoryActions.MoveLayer(id, up);
+  },
+  
+  setLayerVisibility: function(ids, flag) {
+    var i, len, sel, idx, layer, optIdx;
+    
+    sel = T$.id('tegaki-layer');
+    optIdx = Tegaki.layers.length - 1;
+    
+    for (i = 0, len = ids.length; i < len; ++i) {
+      idx = Tegaki.getLayerIndex(ids[i]);
+      layer = Tegaki.layers[idx];
+      layer.visible = flag;
+      
+      if (flag) {
+        sel.options[optIdx - idx].classList.remove('tegaki-strike');
+        layer.canvas.classList.remove('tegaki-hidden');
+      }
+      else {
+        sel.options[optIdx - idx].classList.add('tegaki-strike');
+        layer.canvas.classList.add('tegaki-hidden');
+      }
+    }
+  },
+  
+  setActiveLayer: function(id) {
+    var ctx, idx;
+    
+    idx = id ? Tegaki.getLayerIndex(id) : Tegaki.layers.length - 1;
+    
+    if (idx < 0 || idx > Tegaki.maxLayers) {
+      return;
+    }
+    
+    ctx = Tegaki.layers[idx].ctx;
+    
+    if (Tegaki.activeCtx) {
+      Tegaki.copyContextState(Tegaki.activeCtx, ctx);
+    }
+    
+    Tegaki.activeCtx = ctx;
+    Tegaki.activeLayer = idx;
+    T$.id('tegaki-layer').selectedIndex = Tegaki.layers.length - idx - 1;
+    
+    Tegaki.updateGhostLayerPos();
+  },
+  
+  updateGhostLayerPos: function() {
+    Tegaki.layersCnt.insertBefore(
+      Tegaki.ghostCanvas,
+      Tegaki.activeCtx.canvas.nextElementSibling
+    );
+  },
+  
+  copyContextState: function(src, dest) {
+    var i, p, props = [
+      'lineCap', 'lineJoin', 'strokeStyle', 'fillStyle', 'globalAlpha',
+      'lineWidth', 'globalCompositeOperation'
+    ];
+    
+    for (i = 0; p = props[i]; ++i) {
+      dest[p] = src[p];
+    }
+  },
+  
+  updateCursor: function() {
+    var radius;
+    
+    radius = 0 | (Tegaki.tool.size / 2);
+    
+    if (Tegaki.tool.noCursor || radius < 1) {
+      Tegaki.layersCnt.style.cursor = 'default';
+      return;
+    }
+    
+    Tegaki.layersCnt.style.cursor = 'url("'
+      + Tegaki.renderCircle(radius).toDataURL('image/png')
+      + '") 16 16, default';
+  },
+  
+  updatePosOffset: function() {
+    var aabb = Tegaki.canvas.getBoundingClientRect();
+    Tegaki.offsetX = aabb.left + window.pageXOffset + Tegaki.cnt.scrollLeft;
+    Tegaki.offsetY = aabb.top + window.pageYOffset + Tegaki.cnt.scrollTop;
+  },
+  
+  onMouseMove: function(e) {
+    if (Tegaki.isPainting) {
+      Tegaki.tool.draw(Tegaki.getCursorPos(e, 0), Tegaki.getCursorPos(e, 1));
+    }
+    else if (Tegaki.isColorPicking) {
+      TegakiPipette.draw(Tegaki.getCursorPos(e, 0), Tegaki.getCursorPos(e, 1));
+    }
+  },
+  
+  onMouseDown: function(e) {
+    if (e.target.parentNode === Tegaki.layersCnt) {
+      if (Tegaki.activeLayer === null) {
+        alert(TegakiStrings.noActiveLayer);
+        return;
+      }
+      if (!Tegaki.layers[Tegaki.activeLayer].visible) {
+        alert(TegakiStrings.hiddenActiveLayer);
+        return;
+      }
+    }
+    else if (e.target !== Tegaki.bg) {
+      return;
+    }
+    
+    if (e.which === 3 || e.altKey) {
+      Tegaki.isColorPicking = true;
+      TegakiPipette.draw(Tegaki.getCursorPos(e, 0), Tegaki.getCursorPos(e, 1));
+    }
+    else {
+      Tegaki.isPainting = true;
+      TegakiHistory.pendingAction = new TegakiHistoryActions.Draw(
+        Tegaki.layers[Tegaki.activeLayer].id
+      );
+      TegakiHistory.pendingAction.addCanvasState(Tegaki.activeCtx.canvas, 0);
+      Tegaki.tool.draw(Tegaki.getCursorPos(e, 0), Tegaki.getCursorPos(e, 1), true);
+    }
+  },
+  
+  onMouseUp: function(e) {
+    if (Tegaki.isPainting) {
+      Tegaki.tool.commit && Tegaki.tool.commit();
+      TegakiHistory.pendingAction.addCanvasState(Tegaki.activeCtx.canvas, 1);
+      TegakiHistory.push(TegakiHistory.pendingAction);
+      Tegaki.isPainting = false;
+    }
+    else if (Tegaki.isColorPicking) {
+      e.preventDefault();
+      Tegaki.isColorPicking = false;
+    }
+  },
+  
+  onDummy: function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+};
+
+// Bienvenido a Internet
+function topen() {
+  console.log(document.forms["imgform"].dataset.w);
+  console.log(document.forms["imgform"].dataset.h);  
+  Tegaki.open({
+    onDone: function() {
+      document.getElementById('status').innerHTML = 'Subiendo...';
+      document.getElementById('buttons').style.display = 'none';
+      document.getElementById('links').style.display = 'none';
+      document.getElementById('filebase').value = Tegaki.flatten().toDataURL('image/png');
+      document.forms["imgform"].submit();
+    },
+    onCancel: function() { history.back(-1); },
+    width: document.forms["imgform"].dataset.w,
+    height: document.forms["imgform"].dataset.h
+  });
+} 
+window.onload = function() {
+  document.getElementById('topen').addEventListener('click', topen);
+  topen();
+};
\ No newline at end of file