diff --git a/src/js/showimage.js b/src/js/showimage.js
new file mode 100644
index 0000000..294353d
--- /dev/null
+++ b/src/js/showimage.js
@@ -0,0 +1,824 @@
+// Copyright (c) 2009 The Chromium Authors. All rights reserved.  Use of this
+// source code is governed by a BSD-style license that can be found in the
+// LICENSE file.
+
+function isHighVersion() {
+  var version = navigator.userAgent.match(/Chrome\/(\d+)/)[1];
+  return version > 9;
+}
+
+function $(id) {
+  return document.getElementById(id);
+}
+function i18nReplace(id, messageKey) {
+  return $(id).innerHTML = chrome.i18n.getMessage(messageKey);
+}
+UploadUI.init();
+
+var bg = chrome.extension.getBackgroundPage();
+var canvas = new Canvas();
+var photoshop = {
+  canvas: document.createElement("canvas"),
+  tabTitle: '',
+  startX: 0,
+  startY: 0,
+  endX: 0,
+  endY: 0,
+  dragFlag: false,
+  flag: 'rectangle',
+  layerId: 'layer0',
+  canvasId: '',
+  color: '#ff0000',
+  highlightColor: '',
+  lastValidAction: 0,
+  markedArea: [],
+  isDraw: true,
+  offsetX: 0,
+  offsetY: 36,
+  nowHeight: 0,
+  nowWidth: 0,
+  highlightType: 'border',
+  highlightMode: 'rectangle',
+  text: '',
+
+  i18nReplace: i18nReplace,
+
+  initCanvas: function() {
+    $('canvas').width = $('mask-canvas').width = $('photo').style.width =
+        photoshop.canvas.width = bg.screenshot.canvas.width;
+    $('canvas').height = $('mask-canvas').height = $('photo').style.height =
+        photoshop.canvas.height = bg.screenshot.canvas.height;
+    var context = photoshop.canvas.getContext('2d');
+    context.drawImage(bg.screenshot.canvas, 0, 0);
+    context = $('canvas').getContext('2d');
+    context.drawImage(photoshop.canvas, 0, 0);
+    $('canvas').style.display = 'block';
+  },
+
+  init: function() {
+    photoshop.initTools();
+    photoshop.initCanvas();
+    photoshop.tabTitle = bg.screenshot.tab.title;
+    var showBoxHeight = function() {
+      $('showBox').style.height = window.innerHeight - photoshop.offsetY - 1;
+    }
+    setTimeout(showBoxHeight, 50);
+  },
+
+  markCurrentElement: function(element) {
+    if (element && element.parentNode) {
+      var children = element.parentNode.children;
+      for (var i = 0; i < children.length; i++) {
+        var node = children[i];
+        if (node == element) {
+          element.className = 'mark';
+        } else {
+          node.className = '';
+        }
+      }
+    }
+  },
+
+  setHighLightMode: function() {
+    photoshop.highlightType = localStorage.highlightType || 'border';
+    photoshop.color = localStorage.highlightColor || '#FF0000';
+    $(photoshop.layerId).style.border = '2px solid ' + photoshop.color;
+    if (photoshop.highlightType == 'rect') {
+      $(photoshop.layerId).style.backgroundColor = photoshop.color;
+      $(photoshop.layerId).style.opacity = 0.5;
+    }
+    if (photoshop.flag == 'rectangle') {
+      $(photoshop.layerId).style.borderRadius = '0 0';
+    } else if (photoshop.flag == 'radiusRectangle') {
+      $(photoshop.layerId).style.borderRadius = '6px 6px';
+    } else if (photoshop.flag == 'ellipse') {
+      $(photoshop.layerId).style.border = '0';
+      $(photoshop.layerId).style.backgroundColor = '';
+      $(photoshop.layerId).style.opacity = 1;
+    }
+
+  },
+
+  setBlackoutMode: function() {
+    photoshop.color = '#000000';
+    $(photoshop.layerId).style.opacity = 1;
+    $(photoshop.layerId).style.backgroundColor = '#000000';
+    $(photoshop.layerId).style.border = '2px solid #000000';
+  },
+
+  setTextMode: function() {
+    localStorage.fontSize = localStorage.fontSize || '16';
+    photoshop.color = localStorage.fontColor =
+        localStorage.fontColor || '#FF0000';
+    $(photoshop.layerId).setAttribute('contentEditable', true);
+    $(photoshop.layerId).style.border = '1px dotted #333333';
+    $(photoshop.layerId).style.cursor = 'text';
+    $(photoshop.layerId).style.lineHeight = localStorage.fontSize + 'px';
+    $(photoshop.layerId).style.fontSize = localStorage.fontSize + 'px';
+    $(photoshop.layerId).style.color = photoshop.color;
+    $(photoshop.layerId).innerHTML = '<br/>';
+    var layer = $(photoshop.layerId);
+    var id = photoshop.layerId;
+    layer.addEventListener('blur', function() {
+      photoshop.setTextToArray(id);
+    }, true);
+    layer.addEventListener('click', function() {
+      this.style.border = '1px dotted #333333';
+    }, true);
+    layer.addEventListener('mouseout', function() {
+      if (!photoshop.dragFlag) {
+        this.style.borderWidth = 0;
+      }
+    }, false);
+    layer.addEventListener('mousemove', function() {
+      this.style.border = '1px dotted #333333';
+    }, false);
+  },
+
+  setTextToArray: function(id) {
+    var str = $(id).innerText.split("\n");
+    if (photoshop.markedArea.length > 0) {
+      for (var i = photoshop.markedArea.length - 1; i >= 0; i--) {
+        if (photoshop.markedArea[i].id == id) {
+          photoshop.markedArea[i].context = str;
+          break;
+        }
+      }
+      $(id).style.borderWidth = 0;
+    }
+  },
+
+  openOptionPage: function() {
+    chrome.tabs.create({url: chrome.extension.getURL("options.html")});
+  },
+
+  closeCurrentTab: function() {
+    chrome.tabs.getSelected(null, function(tab) {
+      chrome.tabs.remove(tab.id);
+    });
+  },
+
+  finish: function() {
+    var context = $('canvas').getContext('2d');
+    context.drawImage(photoshop.canvas, 0, 0);
+  },
+
+  colorRgba: function(color, opacity) {
+    var sColor = color.toLowerCase();
+    var sColorChange = [];
+    for (var i = 1; i < sColor.length; i += 2) {
+      sColorChange.push(parseInt("0x" + sColor.slice(i,i + 2)));
+    }
+    return "rgba(" + sColorChange.join(",") + "," + opacity + ")";
+  },
+
+  /**
+  * Undo the current operation
+  */
+  toDo: function(element, what) {
+    photoshop.flag = what;
+    photoshop.isDraw = true;
+    photoshop.markCurrentElement(element);
+  },
+
+  setDivStyle: function(x, y) {
+    $(photoshop.layerId).setAttribute("style", "");
+    $(photoshop.layerId).setAttribute("contentEditable", false);
+    switch(photoshop.flag) {
+      case 'rectangle':
+      case 'radiusRectangle':
+      case 'ellipse':
+        photoshop.setHighLightMode();
+        break;
+      case 'redact':
+        photoshop.setBlackoutMode();
+        break;
+      case 'text':
+        photoshop.setTextMode();
+        break;
+      case 'line':
+      case 'arrow':
+        photoshop.drawLineOnMaskCanvas(x, y, x, y, 'lineStart',
+            photoshop.layerId);
+        break;
+      case 'blur':
+        photoshop.createCanvas(photoshop.layerId);
+        break;
+    }
+  },
+
+  /**
+  * Create a layer and set style
+  */
+  createDiv: function() {
+    photoshop.lastValidAction++;
+    photoshop.layerId = 'layer' + photoshop.lastValidAction;
+    if ($(photoshop.layerId)) {
+      photoshop.removeElement(photoshop.layerId);
+    }
+    var divElement = document.createElement('div');
+    divElement.id = photoshop.layerId;
+    divElement.className = 'layer';
+    $('photo').appendChild(divElement);
+    if (photoshop.flag  == 'blur') {
+      photoshop.createCanvas(photoshop.layerId);
+    }
+    return divElement;
+  },
+
+  createCanvas: function(parentId) {
+    photoshop.canvasId = 'cav-' + parentId;
+    if (!$(photoshop.canvasId)) {
+      var cav = document.createElement('canvas');
+      cav.id = photoshop.canvasId;
+      cav.width = 10;
+      cav.height = 10;
+      $(photoshop.layerId).appendChild(cav);
+      return cav;
+    }
+    return $(photoshop.canvasId);
+
+  },
+
+  createCloseButton: function(parent, id, left, top, flag) {
+    var imgElement = document.createElement('img');
+    imgElement.id = id;
+    imgElement.src = 'images/cross.png';
+    imgElement.className = 'closeButton';
+    imgElement.style.left = left - 15 + 'px';
+    if (photoshop.flag == 'line' || photoshop.flag == 'arrow') {
+      imgElement.style.left = left / 2 - 5 + 'px';
+      imgElement.style.top = top / 2 - 5 + 'px';
+    }
+    imgElement.onclick = function() {
+      $(parent).style.display = 'none';
+      photoshop.removeLayer(parent);
+    };
+    $(parent).onmousemove = function() {
+      if (!photoshop.dragFlag) {
+        photoshop.showCloseButton(id);
+        $(parent).style.zIndex = 110;
+        photoshop.isDraw = (flag == 'text' ? false : photoshop.isDraw);
+      }
+    };
+    $(parent).onmouseout = function() {
+      photoshop.hideCloseButton(id);
+      $(parent).style.zIndex = 100;
+      photoshop.isDraw = true;
+    };
+    $(parent).appendChild(imgElement);
+    return imgElement;
+  },
+
+  showCloseButton: function(id) {
+    $(id).style.display = 'block';
+  },
+
+  hideCloseButton: function(id) {
+    $(id).style.display = 'none';
+    photoshop.isDraw = true;
+  },
+
+  removeLayer: function(id) {
+    for (var i = 0; i < photoshop.markedArea.length; i++) {
+      if (photoshop.markedArea[i].id == id) {
+        photoshop.markedArea.splice(i, 1);
+        break;
+      }
+    }
+    photoshop.removeElement(id);
+  },
+
+  /**
+  *  Set the starting point(x,y) when mouse pressed
+  */
+  onMouseDown: function(event) {
+    if (photoshop.isDraw && event.button != 2) {
+      photoshop.startX = event.pageX + $('showBox').scrollLeft -
+          photoshop.offsetX;
+      photoshop.startY = event.pageY + $('showBox').scrollTop -
+          photoshop.offsetY;
+      photoshop.setDivStyle(photoshop.startX, photoshop.startY);
+      photoshop.dragFlag = true;
+
+      $(photoshop.layerId).style.left = photoshop.startX + 'px';
+      $(photoshop.layerId).style.top = photoshop.startY + 'px';
+      $(photoshop.layerId).style.height = 0;
+      $(photoshop.layerId).style.width = 0;
+      $(photoshop.layerId).style.display = 'block';
+    }
+  },
+
+  onMouseUp: function(event) {
+    $('mask-canvas').style.zIndex = 10;
+    photoshop.endX = event.pageX + $('showBox').scrollLeft -
+           photoshop.offsetX;
+      if (photoshop.endX > photoshop.canvas.width) {
+        photoshop.endX = photoshop.canvas.width ;
+      }
+
+      if (photoshop.endX < 0) {
+        photoshop.endX = 0;
+      }
+
+      photoshop.endY = event.pageY + $('showBox').scrollTop -
+           photoshop.offsetY;
+      if (photoshop.endY > photoshop.canvas.height) {
+        photoshop.endY = photoshop.canvas.height ;
+      }
+      if (photoshop.endY < 0) {
+        photoshop.endY = 0;
+      }
+    if (photoshop.isDraw && photoshop.dragFlag && (photoshop.endX !=
+        photoshop.startX || photoshop.endY != photoshop.startY)) {
+      if (photoshop.flag == 'line' || photoshop.flag == 'arrow') {
+        photoshop.drawLineOnMaskCanvas(photoshop.startX, photoshop.startY,
+            photoshop.endX, photoshop.endY, 'drawEnd', photoshop.layerId);
+      } else if (photoshop.flag == 'blur') {
+        canvas.blurImage(photoshop.canvas, $(photoshop.canvasId),
+            photoshop.layerId, photoshop.startX, photoshop.startY,
+            photoshop.endX, photoshop.endY);
+      } else if (photoshop.flag == 'ellipse') {
+        photoshop.drawEllipseOnMaskCanvas(photoshop.endX,
+            photoshop.endY, 'end', photoshop.layerId);
+      }
+      photoshop.markedArea.push({
+        'id': photoshop.layerId,
+        'startX': photoshop.startX,
+        'startY': photoshop.startY,
+        'endX': photoshop.endX,
+        'endY': photoshop.endY,
+        'width': photoshop.nowWidth,
+        'height': photoshop.nowHeight,
+        'flag': photoshop.flag,
+        'highlightType': photoshop.highlightType,
+        'fontSize': localStorage.fontSize,
+        'color': photoshop.color,
+        'context': ''
+      });
+      $(photoshop.layerId).focus();
+      var imageBtnId = 'close_' + photoshop.layerId;
+      photoshop.createCloseButton(photoshop.layerId, imageBtnId,
+          photoshop.nowWidth, photoshop.nowHeight, photoshop.flag);
+      photoshop.createDiv();
+    } else if (photoshop.endX ==
+        photoshop.startX && photoshop.endY == photoshop.startY) {
+      photoshop.removeElement(photoshop.layerId);
+      photoshop.createDiv();
+    }
+    photoshop.dragFlag = false;
+
+  },
+
+  /**
+  * Refresh div‘s height and width when the mouse move
+  */
+  onMouseMove: function(event) {
+    if(photoshop.dragFlag) {
+      $('mask-canvas').style.zIndex = 200;
+      photoshop.endX = event.pageX + $('showBox').scrollLeft -
+           photoshop.offsetX;
+      if (photoshop.endX > photoshop.canvas.width) {
+        photoshop.endX = photoshop.canvas.width ;
+      }
+
+      if (photoshop.endX < 0) {
+        photoshop.endX = 0;
+      }
+
+      photoshop.endY = event.pageY + $('showBox').scrollTop -
+           photoshop.offsetY;
+      if (photoshop.endY > photoshop.canvas.height) {
+        photoshop.endY = photoshop.canvas.height ;
+      }
+      if (photoshop.endY < 0) {
+        photoshop.endY = 0;
+      }
+      photoshop.nowHeight = photoshop.endY - photoshop.startY - 1 ;
+      photoshop.nowWidth = photoshop.endX - photoshop.startX - 1 ;
+
+      if(photoshop.nowHeight < 0) {
+        $(photoshop.layerId).style.top = photoshop.endY + 'px';
+        photoshop.nowHeight = -1 * photoshop.nowHeight;
+      }
+      if(photoshop.nowWidth < 0) {
+        $(photoshop.layerId).style.left = photoshop.endX + 'px';
+        photoshop.nowWidth = -1 * photoshop.nowWidth;
+      }
+
+      $(photoshop.layerId).style.height = photoshop.nowHeight - 3;
+      $(photoshop.layerId).style.width = photoshop.nowWidth - 3;
+      if (photoshop.flag == 'line' || photoshop.flag == 'arrow') {
+        photoshop.drawLineOnMaskCanvas(photoshop.startX, photoshop.startY,
+            photoshop.endX, photoshop.endY, 'lineDrawing', photoshop.layerId);
+      } else if (photoshop.flag == 'blur') {
+        $(photoshop.layerId).style.height = photoshop.nowHeight ;
+        $(photoshop.layerId).style.width = photoshop.nowWidth ;
+        canvas.blurImage(photoshop.canvas, $(photoshop.canvasId),
+            photoshop.layerId, photoshop.startX, photoshop.startY,
+            photoshop.endX, photoshop.endY);
+      } else if (photoshop.flag == 'ellipse') {
+        photoshop.drawEllipseOnMaskCanvas(photoshop.endX,
+            photoshop.endY, 'drawing', photoshop.layerId);
+      }
+    }
+
+  },
+
+  /**
+  * Remove a div
+  */
+  removeElement: function(id) {
+    if($(id)) {
+      $(id).parentNode.removeChild($(id));
+    }
+  },
+
+  /**
+  * Use fillStyle, fillText and fillRect functions to draw rectangles,
+  * and render to canvas
+  */
+  draw: function() {
+    var context = $('canvas').getContext('2d');
+    for (var j = 0; j < photoshop.markedArea.length; j++) {
+      var mark = photoshop.markedArea[j];
+      var x = (mark.startX < mark.endX) ? mark.startX : mark.endX;
+      var y = (mark.startY < mark.endY) ? mark.startY : mark.endY;
+      var width = mark.width;
+      var height = mark.height;
+      var color = mark.color;
+      switch(mark.flag) {
+        case 'rectangle':
+          if (mark.highlightType == 'border') {
+            canvas.drawStrokeRect(context, color, x, y, width, height, 2);
+          } else {
+            var color = changeColorToRgba(color, 0.5);
+            canvas.drawFillRect(context, color, x, y, width, height);
+          }
+          break;
+        case 'radiusRectangle':
+          canvas.drawRoundedRect(
+              context, color, x, y, width, height, 6, mark.highlightType);
+          break;
+        case 'ellipse':
+          x = (mark.startX + mark.endX) / 2;
+          y = (mark.startY + mark.endY) / 2;
+          var xAxis = Math.abs(mark.endX - mark.startX) / 2;
+          var yAxis = Math.abs(mark.endY - mark.startY) / 2;
+          canvas.drawEllipse(
+              context, color, x, y, xAxis, yAxis, 3, mark.highlightType);
+          break;
+        case 'redact':
+          canvas.drawFillRect(context, color, x, y, width, height);
+          break;
+        case 'text':
+          for (var i = 0; i < mark.context.length; i++) {
+            canvas.setText(
+                context, mark.context[i], color, mark.fontSize, 'arial',
+                mark.fontSize, x, y + mark.fontSize * i, width);
+          }
+          break;
+        case 'blur':
+          var imageData = context.getImageData(
+              x, y, photoshop.markedArea[j].width,
+              photoshop.markedArea[j].height);
+          imageData = canvas.boxBlur(
+              imageData, photoshop.markedArea[j].width,
+              photoshop.markedArea[j].height, 10);
+          context.putImageData(
+              imageData, x, y, 0, 0, photoshop.markedArea[j].width,
+              photoshop.markedArea[j].height);
+          break;
+        case 'line':
+          canvas.drawLine(
+              context, color, 'round', 2,
+              mark.startX, mark.startY, mark.endX, mark.endY);
+          break;
+        case 'arrow':
+          canvas.drawArrow(
+              context, color, 2, 4, 10, 'round',
+              mark.startX, mark.startY, mark.endX, mark.endY);
+          break;
+      }
+    }
+  },
+
+  drawLineOnMaskCanvas: function(startX, startY, endX, endY, type, layerId) {
+    var ctx = $('mask-canvas').getContext('2d');
+    ctx.clearRect(0, 0, $('mask-canvas').width, $('mask-canvas').height);
+    if (type == 'drawEnd') {
+      var offset = 20;
+      var width = Math.abs(endX - photoshop.startX) > 0 ?
+          Math.abs(endX - photoshop.startX): 0;
+      var height = Math.abs(endY - photoshop.startY) > 0 ?
+          Math.abs(endY - photoshop.startY): 0;
+      var offsetLeft = parseInt($(layerId).style.left);
+      var offsetTop = parseInt($(layerId).style.top);
+      startX = startX - offsetLeft + offset / 2;
+      startY = startY - offsetTop + offset / 2;
+      endX = endX - offsetLeft + offset / 2;
+      endY = endY - offsetTop + offset / 2;
+      $(layerId).style.left = offsetLeft - offset / 2;
+      $(layerId).style.top = offsetTop - offset / 2;
+      var cavCopy = photoshop.createCanvas(layerId);
+      cavCopy.width = width + offset;
+      cavCopy.height = height + offset;
+      ctx = cavCopy.getContext('2d');
+    }
+    if (localStorage.lineType == 'line') {
+      canvas.drawLine(ctx, localStorage.lineColor, 'round', 2,
+        startX, startY, endX, endY);
+    } else {
+      canvas.drawArrow(ctx, localStorage.lineColor, 2, 4, 10, 'round',
+          startX, startY, endX, endY)
+    }
+
+  },
+
+  createColorPadStr: function(element, type) {
+    var colorList = ['#000000', '#0036ff', '#008000', '#dacb23', '#d56400',
+      '#c70000', '#be00b3', '#1e2188', '#0090ff', '#22cc01', '#ffff00',
+      '#ff9600', '#ff0000', '#ff008e', '#7072c3', '#49d2ff', '#9dff3d',
+      '#ffffff', '#ffbb59', '#ff6b6b', '#ff6bbd'];
+
+    var div = document.createElement("div");
+    div.id = "colorpad";
+    element.appendChild(div);
+
+    for(var i = 0; i < colorList.length; i++) {
+      var a = document.createElement("a");
+      var color = colorList[i];
+      a.id = color;
+      a.title = color;
+      a.style.backgroundColor = color;
+      if (color == '#ffffff') {
+        a.style.border = "1px solid #444";
+        a.style.width = "12px"
+        a.style.height = "12px";
+      }
+      a.addEventListener('click', function(e) {
+        photoshop.colorPadPick(e.target.id, type);
+        return false;
+      });
+      div.appendChild(a);
+    }
+  },
+
+  colorPadPick: function(color, type) {
+    photoshop.color = color;
+    if(type == 'highlight') {
+      localStorage.highlightColor = color;
+      photoshop.setHighlightColorBoxStyle(color);
+    } else if(type == 'text') {
+      localStorage.fontColor = color;
+      $('fontColorBox').style.backgroundColor = color;
+    } else if (type == 'line') {
+      localStorage.lineColor = color;
+      photoshop.setLineColorBoxStyle();
+    } else if (type == 'ellipse') {
+      $('ellipseBox').style.borderColor = color;
+    }
+  },
+
+  setHighlightColorBoxStyle: function(color) {
+    var highlightColorBox = $('highlightColorBox');
+    highlightColorBox.style.borderColor = color;
+    localStorage.highlightType = localStorage.highlightType || 'border';
+    if (localStorage.highlightType == 'border') {
+      highlightColorBox.style.background = '#ffffff';
+      highlightColorBox.style.opacity = 1;
+      $('borderMode').className = 'mark';
+      $('rectMode').className = '';
+    } else if (localStorage.highlightType == 'rect') {
+      highlightColorBox.style.background = color;
+      highlightColorBox.style.opacity = 0.5;
+      $('borderMode').className = '';
+      $('rectMode').className = 'mark';
+    }
+    if (photoshop.flag == 'rectangle') {
+      highlightColorBox.style.borderRadius = '0 0';
+    } else if (photoshop.flag == 'radiusRectangle') {
+      highlightColorBox.style.borderRadius = '3px 3px';
+    } else if (photoshop.flag == 'ellipse') {
+      highlightColorBox.style.borderRadius = '12px 12px';
+    }
+    photoshop.markCurrentElement($(photoshop.flag));
+  },
+
+  setBlackoutColorBoxStyle: function() {
+    localStorage.blackoutType = localStorage.blackoutType || 'redact';
+    if (localStorage.blackoutType == 'redact') {
+      $('blackoutBox').className = 'rectBox';
+      $('redact').className = 'mark';
+      $('blur').className = '';
+    } else if (localStorage.blackoutType == 'blur') {
+      $('blackoutBox').className = 'blurBox';
+      $('redact').className = '';
+      $('blur').className = 'mark';
+    }
+  },
+
+  setFontSize: function(size) {
+    var id = 'size_' + size;
+    localStorage.fontSize = size;
+    $('size_10').className = '';
+    $('size_16').className = '';
+    $('size_18').className = '';
+    $('size_32').className = '';
+    $(id).className = 'mark';
+  },
+
+  setLineColorBoxStyle: function() {
+    localStorage.lineType = localStorage.lineType || 'line';
+    photoshop.color = localStorage.lineColor =
+        localStorage.lineColor || '#FF0000';
+    var ctx = $('lineIconCav').getContext('2d');
+    ctx.clearRect(0, 0, 14, 14);
+    if (localStorage.lineType == 'line') {
+      $('straightLine').className = 'mark';
+      $('arrow').className = '';
+      canvas.drawLine(ctx, photoshop.color, 'round', 2, 1, 13, 13, 1);
+    } else if (localStorage.lineType == 'arrow') {
+      $('straightLine').className = '';
+      $('arrow').className = 'mark';
+      canvas.drawArrow(ctx, photoshop.color, 2, 4, 7, 'round',1, 13, 13, 1);
+    }
+
+  },
+
+  initTools: function() {
+    photoshop.i18nReplace('tHighlight', 'highlight');
+    photoshop.i18nReplace('tRedact', 'redact');
+    photoshop.i18nReplace('redactText', 'solid_black');
+    photoshop.i18nReplace('tText', 'text');
+    photoshop.i18nReplace('tSave', 'save');
+    photoshop.i18nReplace('tClose', 'close');
+    photoshop.i18nReplace('border', 'border');
+    photoshop.i18nReplace('rect', 'rect');
+    photoshop.i18nReplace('blurText', 'blur');
+    photoshop.i18nReplace('lineText', 'line');
+    photoshop.i18nReplace('size_10', 'size_small');
+    photoshop.i18nReplace('size_16', 'size_normal');
+    photoshop.i18nReplace('size_18', 'size_large');
+    photoshop.i18nReplace('size_32', 'size_huge');
+    var fontSize = localStorage.fontSize = localStorage.fontSize || 16;
+    if (fontSize != 10 && fontSize != 16 && fontSize != 18 && fontSize != 32) {
+      localStorage.fontSize = 16;
+    }
+    localStorage.highlightMode = photoshop.flag =
+        localStorage.highlightMode || 'rectangle';
+    localStorage.highlightColor = localStorage.highlightColor || '#FF0000';
+    localStorage.fontColor = localStorage.fontColor || '#FF0000';
+    localStorage.highlightType = photoshop.highlightType =
+        localStorage.highlightType || 'border';
+    localStorage.blackoutType = localStorage.blackoutType || 'redact';
+    localStorage.lineType = localStorage.lineType || 'line';
+    localStorage.lineColor = localStorage.lineColor || '#FF0000';
+    photoshop.setHighlightColorBoxStyle(localStorage.highlightColor);
+    $('fontColorBox').style.backgroundColor =
+        localStorage.fontColor || '#FF0000';
+    $('btnHighlight').addEventListener('click', function() {
+      photoshop.toDo(this, localStorage.highlightMode);
+      photoshop.setHighlightColorBoxStyle(localStorage.highlightColor);
+    }, false);
+
+    $('btnBlackout').addEventListener('click', function() {
+      photoshop.toDo(this, localStorage.blackoutType);
+      photoshop.setBlackoutColorBoxStyle();
+    }, false);
+
+    $('btnText').addEventListener('click', function() {
+      photoshop.toDo(this, 'text');
+    }, false);
+
+    $('btnLine').addEventListener('click', function() {
+      photoshop.toDo(this, localStorage.lineType);
+      photoshop.setLineColorBoxStyle();
+    }, false);
+
+
+
+    photoshop.setHighlightColorBoxStyle(localStorage.highlightColor);
+    $('borderMode').addEventListener('click', function() {
+      localStorage.highlightType = 'border';
+    }, false);
+    $('rectMode').addEventListener('click', function() {
+      localStorage.highlightType = 'rect';
+    }, false);
+    $('rectangle').addEventListener('click', function() {
+      localStorage.highlightMode = photoshop.flag = 'rectangle';
+      photoshop.markCurrentElement(this);
+    }, false);
+    $('radiusRectangle').addEventListener('click', function() {
+      localStorage.highlightMode = photoshop.flag = 'radiusRectangle';
+      photoshop.markCurrentElement(this);
+    }, false);
+    $('ellipse').addEventListener('click', function() {
+      localStorage.highlightMode = photoshop.flag = 'ellipse';
+      photoshop.markCurrentElement(this);
+    }, false);
+    photoshop.setBlackoutColorBoxStyle();
+    $('redact').addEventListener('click', function() {
+      localStorage.blackoutType = 'redact';
+    }, false);
+    $('blur').addEventListener('click', function() {
+      localStorage.blackoutType = 'blur';
+    }, false);
+
+    photoshop.setLineColorBoxStyle();
+
+    photoshop.createColorPadStr($('highlightColorPad'), 'highlight');
+    photoshop.createColorPadStr($('fontColorPad'), 'text');
+    photoshop.createColorPadStr($('lineColorPad'), 'line');
+
+    $('straightLine').addEventListener('click', function() {
+      localStorage.lineType = 'line';
+      photoshop.setLineColorBoxStyle();
+    }, false);
+    $('arrow').addEventListener('click', function() {
+      localStorage.lineType = 'arrow';
+      photoshop.setLineColorBoxStyle();
+    }, false);
+
+    photoshop.setFontSize(localStorage.fontSize);
+    $('size_10').addEventListener('click', function() {
+      photoshop.setFontSize(10);
+    }, false);
+    $('size_16').addEventListener('click', function() {
+      photoshop.setFontSize(16);
+    }, false);
+    $('size_18').addEventListener('click', function() {
+      photoshop.setFontSize(18);
+    }, false);
+    $('size_32').addEventListener('click', function() {
+      photoshop.setFontSize(32);
+    }, false);
+  },
+
+  drawEllipseOnMaskCanvas: function(endX, endY, type, layerId) {
+    var ctx = $('mask-canvas').getContext('2d');
+    ctx.clearRect(0, 0, $('mask-canvas').width, $('mask-canvas').height);
+    var x = (photoshop.startX + endX) / 2;
+    var y = (photoshop.startY + endY) / 2;
+    var xAxis = Math.abs(endX - photoshop.startX) / 2;
+    var yAxis = Math.abs(endY - photoshop.startY) / 2;
+    canvas.drawEllipse(ctx, photoshop.color, x, y, xAxis, yAxis, 3,
+        photoshop.highlightType);
+    if (type == 'end') {
+      var offsetLeft = parseInt($(layerId).style.left);
+      var offsetTop = parseInt($(layerId).style.top);
+      var startX = photoshop.startX - offsetLeft ;
+      var startY = photoshop.startY - offsetTop ;
+      var newEndX = photoshop.endX - offsetLeft ;
+      var newEndY = photoshop.endY - offsetTop ;
+      x = (startX + newEndX) / 2;
+      y = (startY + newEndY) / 2;
+      xAxis = Math.abs(newEndX - startX) / 2;
+      yAxis = Math.abs(newEndY - startY) / 2;
+      var cavCopy = photoshop.createCanvas(layerId);
+      cavCopy.width = Math.abs(endX - photoshop.startX);
+      cavCopy.height = Math.abs(endY - photoshop.startY);
+      var ctxCopy = cavCopy.getContext('2d');
+      canvas.drawEllipse(ctxCopy, photoshop.color, x, y,
+          xAxis, yAxis, 3, photoshop.highlightType);
+      ctx.clearRect(0, 0, $('mask-canvas').width, $('mask-canvas').height);
+    }
+  },
+
+  showTip: function(className, message, delay) {
+    delay = delay || 2000;
+    var div = document.createElement('div');
+    div.className = className;
+    div.innerHTML = message;
+    document.body.appendChild(div);
+    div.style.left = (document.body.clientWidth - div.clientWidth) / 2 + 'px';
+    window.setTimeout(function() {
+      document.body.removeChild(div);
+    }, delay);
+  }
+};
+
+photoshop.init();
+$('photo').addEventListener('mousemove', photoshop.onMouseMove, true);
+$('photo').addEventListener('mousedown', photoshop.onMouseDown, true);
+$('photo').addEventListener('mouseup', photoshop.onMouseUp, true);
+document.addEventListener('mouseup', photoshop.onMouseUp, true);
+document.addEventListener('mousemove', photoshop.onMouseMove, true);
+
+$('canvas').addEventListener(
+    'selectstart', function f(e) { return false });
+$('mask-canvas').addEventListener(
+    'selectstart', function f(e) { return false });
+$('btnClose').addEventListener('click', photoshop.closeCurrentTab);
+$('uploadAccountList').addEventListener('click', function(e) {
+  var target = e.target;
+  var classList = Array.prototype.slice.call(target.classList)
+  if (classList.indexOf('accountName') >= 0) {
+    var site = target.dataset.site;
+    var userId = target.dataset.userId;
+    UploadUI.upload(site, userId);
+  } else if (classList.indexOf('deleteBtn') >= 0) {
+    var accountId = target.dataset.accountId;
+    UploadUI.deleteAccountItem(accountId);
+  }
+});