widget.min.js

// Last time updated: 2017-04-29 1:56:46 PM UTC

"use strict";!function(){function addEvent(element,eventType,callback){if(!(eventType.split(" ").length>1))return element.addEventListener?(element.addEventListener(eventType,callback,!1),!0):element.attachEvent?element.attachEvent("on"+eventType,callback):(element["on"+eventType]=callback,this);for(var events=eventType.split(" "),i=0;i<events.length;i++)addEvent(element,events[i],callback)}function find(selector){return document.getElementById(selector)}function getContext(id){var canv=find(id),ctx=canv.getContext("2d");return canv.setAttribute("width",innerWidth),canv.setAttribute("height",innerHeight),ctx.lineWidth=lineWidth,ctx.strokeStyle=strokeStyle,ctx.fillStyle=fillStyle,ctx.font=font,ctx}function drawArrow(mx,my,lx,ly,options){function getOptions(opt){return opt=opt||{},[opt.lineWidth||2,opt.strokeStyle||"#6c96c8",opt.fillStyle||"transparent",opt.globalAlpha||1,opt.globalCompositeOperation||"source-over",opt.lineCap||"round",opt.lineJoin||"round",opt.font||'15px "Arial"']}function handleOptions(opt,isNoFillStroke){opt=opt||getOptions(),context.globalAlpha=opt[3],context.globalCompositeOperation=opt[4],context.lineCap=opt[5],context.lineJoin=opt[6],context.lineWidth=opt[0],context.strokeStyle=opt[1],context.fillStyle=opt[2],context.font=opt[7],isNoFillStroke||(context.stroke(),context.fill())}var arrowSize=10,angle=Math.atan2(ly-my,lx-mx);context.beginPath(),context.moveTo(mx,my),context.lineTo(lx,ly),handleOptions(),context.beginPath(),context.moveTo(lx,ly),context.lineTo(lx-arrowSize*Math.cos(angle-Math.PI/7),ly-arrowSize*Math.sin(angle-Math.PI/7)),context.lineTo(lx-arrowSize*Math.cos(angle+Math.PI/7),ly-arrowSize*Math.sin(angle+Math.PI/7)),context.lineTo(lx,ly),context.lineTo(lx-arrowSize*Math.cos(angle-Math.PI/7),ly-arrowSize*Math.sin(angle-Math.PI/7)),handleOptions()}function endLastPath(){var cache=is;cache.isArc?arcHandler.end():cache.isQuadraticCurve?quadraticHandler.end():cache.isBezierCurve&&bezierHandler.end(),drawHelper.redraw(),textHandler.text&&textHandler.text.length&&(textHandler.appendPoints(),textHandler.onShapeUnSelected()),textHandler.showOrHideTextTools("hide")}function copy(){endLastPath(),dragHelper.global.startingIndex=0,find("copy-last").checked?(copiedStuff=points[points.length-1],setSelection(find("drag-last-path"),"DragLastPath")):(copiedStuff=points,setSelection(find("drag-all-paths"),"DragAllPaths"))}function paste(){endLastPath(),dragHelper.global.startingIndex=0,find("copy-last").checked?(points[points.length]=copiedStuff,dragHelper.global={prevX:0,prevY:0,startingIndex:points.length-1},dragHelper.dragAllPaths(0,0),setSelection(find("drag-last-path"),"DragLastPath")):(dragHelper.global.startingIndex=points.length,points=points.concat(copiedStuff),setSelection(find("drag-all-paths"),"DragAllPaths"))}function hexToR(h){return parseInt(cutHex(h).substring(0,2),16)}function hexToG(h){return parseInt(cutHex(h).substring(2,4),16)}function hexToB(h){return parseInt(cutHex(h).substring(4,6),16)}function cutHex(h){return"#"==h.charAt(0)?h.substring(1,7):h}function clone(obj){if(null===obj||"object"!=typeof obj||"isActiveClone"in obj)return obj;if(obj instanceof Date)var temp=new obj.constructor;else var temp=obj.constructor();for(var key in obj)Object.prototype.hasOwnProperty.call(obj,key)&&(obj.isActiveClone=null,temp[key]=clone(obj[key]),delete obj.isActiveClone);return temp}function hexToRGB(h){return[hexToR(h),hexToG(h),hexToB(h)]}function setSelection(element,prop){endLastPath(),hideContainers(),is.set(prop);var selected=document.getElementsByClassName("selected-shape")[0];selected&&(selected.className=selected.className.replace(/selected-shape/g,"")),element.className||(element.className=""),element.className+=" selected-shape"}function hideContainers(){var additionalContainer=find("additional-container"),colorsContainer=find("colors-container"),markerContainer=find("marker-container"),markerColorContainer=find("marker-fill-colors"),pencilContainer=find("pencil-container"),pencilColorContainer=find("pencil-fill-colors"),lineWidthContainer=find("line-width-container");additionalContainer.style.display=colorsContainer.style.display=markerColorContainer.style.display=markerContainer.style.display=pencilColorContainer.style.display=pencilContainer.style.display=lineWidthContainer.style.display="none"}function preventStopEvent(e){e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation())}function onkeydown(e){if(8==(keyCode=e.which||e.keyCode||0)||46==keyCode)return void isBackKey(e,keyCode);e.metaKey&&(isControlKeyPressed=!0,keyCode=17),isControlKeyPressed||17!==keyCode||(isControlKeyPressed=!0)}function isBackKey(e,keyCode){var doPrevent=!1,d=e.srcElement||e.target;return doPrevent=("INPUT"!==d.tagName.toUpperCase()||"TEXT"!==d.type.toUpperCase()&&"PASSWORD"!==d.type.toUpperCase()&&"FILE"!==d.type.toUpperCase()&&"SEARCH"!==d.type.toUpperCase()&&"EMAIL"!==d.type.toUpperCase()&&"NUMBER"!==d.type.toUpperCase()&&"DATE"!==d.type.toUpperCase())&&"TEXTAREA"!==d.tagName.toUpperCase()||(d.readOnly||d.disabled),doPrevent&&e.preventDefault(),doPrevent}function onkeyup(e){return null!=e.which||null==e.charCode&&null==e.keyCode||(e.which=null!=e.charCode?e.charCode:e.keyCode),13===(keyCode=e.which||e.keyCode||0)&&is.isText?void textHandler.onReturnKeyPressed():8==keyCode||46==keyCode?void(isBackKey(e,keyCode)&&textHandler.writeText(textHandler.lastKeyPress,!0)):isControlKeyPressed&&84===keyCode&&is.isText?void textHandler.showTextTools():(isControlKeyPressed&&90===keyCode&&points.length&&(points.length=points.length-1,drawHelper.redraw(),syncPoints(!(!is.isDragAllPaths&&!is.isDragLastPath))),isControlKeyPressed&&65===keyCode&&(dragHelper.global.startingIndex=0,endLastPath(),setSelection(find("drag-all-paths"),"DragAllPaths")),isControlKeyPressed&&67===keyCode&&points.length&&copy(),isControlKeyPressed&&86===keyCode&&copiedStuff.length&&(paste(),syncPoints(!(!is.isDragAllPaths&&!is.isDragLastPath))),void 0!==e.metaKey&&!1===e.metaKey&&(isControlKeyPressed=!1,keyCode=17),void(17===keyCode&&(isControlKeyPressed=!1)))}function onkeypress(e){null!=e.which||null==e.charCode&&null==e.keyCode||(e.which=null!=e.charCode?e.charCode:e.keyCode),keyCode=e.which||e.keyCode||0,/[a-zA-Z0-9-_ !?|\/'",.=:;(){}\[\]`~@#$%^&*+-]/.test(String.fromCharCode(keyCode))&&textHandler.writeText(String.fromCharCode(keyCode))}function onTextFromClipboard(e){if(is.isText){var pastedText=void 0;window.clipboardData&&window.clipboardData.getData?pastedText=window.clipboardData.getData("Text"):e.clipboardData&&e.clipboardData.getData&&(pastedText=e.clipboardData.getData("text/plain")),pastedText&&pastedText.length&&textHandler.writeText(pastedText)}}function syncPoints(isSyncAll){if(isSyncAll&&(lastPointIndex=0),lastPointIndex!=points.length){for(var pointsToShare=[],i=lastPointIndex;i<points.length;i++)pointsToShare[i-lastPointIndex]=points[i];pointsToShare.length&&syncData({points:pointsToShare||[],startIndex:lastPointIndex}),!pointsToShare.length&&points.length||(lastPointIndex=points.length)}}function syncData(data){window.parent.postMessage({canvasDesignerSyncData:data,uid:uid},"*")}var isControlKeyPressed,is={isLine:!1,isArrow:!1,isArc:!1,isDragLastPath:!1,isDragAllPaths:!1,isRectangle:!1,isQuadraticCurve:!1,isBezierCurve:!1,isPencil:!1,isMarker:!0,isEraser:!1,isText:!1,isImage:!1,set:function(shape){var cache=this;cache.isLine=cache.isArrow=cache.isArc=cache.isDragLastPath=cache.isDragAllPaths=cache.isRectangle=cache.isQuadraticCurve=cache.isBezierCurve=cache.isPencil=cache.isMarker=cache.isEraser=cache.isText=cache.isImage=!1,cache["is"+shape]=!0}},points=[],textarea=find("code-text"),lineWidth=2,strokeStyle="#6c96c8",fillStyle="transparent",globalAlpha=1,globalCompositeOperation="source-over",lineCap="round",font='15px "Arial"',lineJoin="round",context=getContext("main-canvas"),tempContext=getContext("temp-canvas"),common={updateTextArea:function(){var c=common,toFixed=c.toFixed,getPoint=c.getPoint,isAbsolutePoints=find("is-absolute-points").checked,isShortenCode=find("is-shorten-code").checked;isAbsolutePoints&&isShortenCode&&c.absoluteShortened(),isAbsolutePoints&&!isShortenCode&&c.absoluteNOTShortened(toFixed),!isAbsolutePoints&&isShortenCode&&c.relativeShortened(toFixed,getPoint),isAbsolutePoints||isShortenCode||c.relativeNOTShortened(toFixed,getPoint)},toFixed:function(input){return Number(input).toFixed(1)},getPoint:function(pointToCompare,compareWith,prefix){return pointToCompare=pointToCompare>compareWith?prefix+" + "+(pointToCompare-compareWith):pointToCompare<compareWith?prefix+" - "+(compareWith-pointToCompare):prefix},absoluteShortened:function(){var point,output="",length=points.length,i=0;for(i;i<length;i++)point=points[i],output+=this.shortenHelper(point[0],point[1],point[2]);output=output.substr(0,output.length-2),textarea.value="var points = ["+output+"], length = points.length, point, p, i = 0;\n\n"+drawArrow.toString()+"\n\n"+this.forLoop,this.prevProps=null},absoluteNOTShortened:function(toFixed){var i,point,p,tempArray=[];for(i=0;i<points.length;i++)p=points[i],point=p[1],"pencil"===p[0]&&(tempArray[i]=["context.beginPath();\ncontext.moveTo("+point[0]+", "+point[1]+");\ncontext.lineTo("+point[2]+", "+point[3]+");\n"+this.strokeOrFill(p[2])]),"marker"===p[0]&&(tempArray[i]=["context.beginPath();\ncontext.moveTo("+point[0]+", "+point[1]+");\ncontext.lineTo("+point[2]+", "+point[3]+");\n"+this.strokeOrFill(p[2])]),"eraser"===p[0]&&(tempArray[i]=["context.beginPath();\ncontext.moveTo("+point[0]+", "+point[1]+");\ncontext.lineTo("+point[2]+", "+point[3]+");\n"+this.strokeOrFill(p[2])]),"line"===p[0]&&(tempArray[i]=["context.beginPath();\ncontext.moveTo("+point[0]+", "+point[1]+");\ncontext.lineTo("+point[2]+", "+point[3]+");\n"+this.strokeOrFill(p[2])]),"text"===p[0]&&(tempArray[i]=[this.strokeOrFill(p[2])+"\ncontext.fillText("+point[0]+", "+point[1]+", "+point[2]+");"]),"arrow"===p[0]&&(tempArray[i]=["drawArrow("+point[0]+", "+point[1]+", "+point[2]+", "+point[3]+", '"+p[2].join("','")+"');"]),"arc"===p[0]&&(tempArray[i]=["context.beginPath(); \ncontext.arc("+toFixed(point[0])+","+toFixed(point[1])+","+toFixed(point[2])+","+toFixed(point[3])+", 0,"+point[4]+"); \n"+this.strokeOrFill(p[2])]),"rect"===p[0]&&(tempArray[i]=[this.strokeOrFill(p[2])+"\ncontext.strokeRect("+point[0]+", "+point[1]+","+point[2]+","+point[3]+");\ncontext.fillRect("+point[0]+", "+point[1]+","+point[2]+","+point[3]+");"]),"quadratic"===p[0]&&(tempArray[i]=["context.beginPath();\ncontext.moveTo("+point[0]+", "+point[1]+");\ncontext.quadraticCurveTo("+point[2]+", "+point[3]+", "+point[4]+", "+point[5]+");\n"+this.strokeOrFill(p[2])]),"bezier"===p[0]&&(tempArray[i]=["context.beginPath();\ncontext.moveTo("+point[0]+", "+point[1]+");\ncontext.bezierCurveTo("+point[2]+", "+point[3]+", "+point[4]+", "+point[5]+", "+point[6]+", "+point[7]+");\n"+this.strokeOrFill(p[2])]);textarea.value=tempArray.join("\n\n")+this.strokeFillText+"\n\n"+drawArrow.toString(),this.prevProps=null},relativeShortened:function(toFixed,getPoint){var point,p,i=0,length=points.length,output="",x=0,y=0;for(i;i<length;i++)p=points[i],point=p[1],0===i&&(x=point[0],y=point[1]),"text"===p[0]&&(x=point[1],y=point[2]),"pencil"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y")],p[2])),"marker"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y")],p[2])),"eraser"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y")],p[2])),"line"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y")],p[2])),"arrow"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y")],p[2])),"text"===p[0]&&(output+=this.shortenHelper(p[0],[point[0],getPoint(point[1],x,"x"),getPoint(point[2],y,"y")],p[2])),"arc"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),point[2],point[3],point[4]],p[2])),"rect"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y")],p[2])),"quadratic"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y"),getPoint(point[4],x,"x"),getPoint(point[5],y,"y")],p[2])),"bezier"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y"),getPoint(point[4],x,"x"),getPoint(point[5],y,"y"),getPoint(point[6],x,"x"),getPoint(point[7],y,"y")],p[2]));output=output.substr(0,output.length-2),textarea.value="var x = "+x+", y = "+y+", points = ["+output+"], length = points.length, point, p, i = 0;\n\n"+drawArrow.toString()+"\n\n"+this.forLoop,this.prevProps=null},relativeNOTShortened:function(toFixed,getPoint){var i,point,p,length=points.length,output="",x=0,y=0;for(i=0;i<length;i++)p=points[i],point=p[1],0===i&&(x=point[0],y=point[1],"text"===p[0]&&(x=point[1],y=point[2]),output="var x = "+x+", y = "+y+";\n\n"),"arc"===p[0]&&(output+="context.beginPath();\ncontext.arc("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+", "+point[2]+", "+point[3]+", 0, "+point[4]+");\n"+this.strokeOrFill(p[2])),"pencil"===p[0]&&(output+="context.beginPath();\ncontext.moveTo("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+");\ncontext.lineTo("+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+");\n"+this.strokeOrFill(p[2])),"marker"===p[0]&&(output+="context.beginPath();\ncontext.moveTo("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+");\ncontext.lineTo("+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+");\n"+this.strokeOrFill(p[2])),"eraser"===p[0]&&(output+="context.beginPath();\ncontext.moveTo("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+");\ncontext.lineTo("+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+");\n"+this.strokeOrFill(p[2])),"line"===p[0]&&(output+="context.beginPath();\ncontext.moveTo("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+");\ncontext.lineTo("+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+");\n"+this.strokeOrFill(p[2])),"arrow"===p[0]&&(output+="drawArrow("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+", "+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+", '"+p[2].join("','")+"');\n"),"text"===p[0]&&(output+=this.strokeOrFill(p[2])+"\ncontext.fillText("+point[0]+", "+getPoint(point[1],x,"x")+", "+getPoint(point[2],y,"y")+");"),"rect"===p[0]&&(output+=this.strokeOrFill(p[2])+"\ncontext.strokeRect("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+", "+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+");\ncontext.fillRect("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+", "+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+");"),"quadratic"===p[0]&&(output+="context.beginPath();\ncontext.moveTo("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+");\ncontext.quadraticCurveTo("+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+", "+getPoint(point[4],x,"x")+", "+getPoint(point[5],y,"y")+");\n"+this.strokeOrFill(p[2])),"bezier"===p[0]&&(output+="context.beginPath();\ncontext.moveTo("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+");\ncontext.bezierCurveTo("+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+", "+getPoint(point[4],x,"x")+", "+getPoint(point[5],y,"y")+", "+getPoint(point[6],x,"x")+", "+getPoint(point[7],y,"y")+");\n"+this.strokeOrFill(p[2])),i!==length-1&&(output+="\n\n");textarea.value=output+this.strokeFillText+"\n\n"+drawArrow.toString(),this.prevProps=null},forLoop:'for(i; i < length; i++) {\n    p = points[i];\n    point = p[1];\n    context.beginPath();\n\n    if(p[2]) { \n\tcontext.lineWidth = p[2][0];\n\tcontext.strokeStyle = p[2][1];\n\tcontext.fillStyle = p[2][2];\n\tcontext.globalAlpha = p[2][3];\n\tcontext.globalCompositeOperation = p[2][4];\n\tcontext.lineCap = p[2][5];\n\tcontext.lineJoin = p[2][6];\n\tcontext.font = p[2][7];\n    }\n\n    if(p[0] === "line") { \n\tcontext.moveTo(point[0], point[1]);\n\tcontext.lineTo(point[2], point[3]);\n    }\n\n    if(p[0] === "arrow") { \n\tdrawArrow(point[0], point[1], point[2], point[3], p[2]);\n    }\n\n    if(p[0] === "pencil") { \n\tcontext.moveTo(point[0], point[1]);\n\tcontext.lineTo(point[2], point[3]);\n    }\n\n    if(p[0] === "marker") { \n\tcontext.moveTo(point[0], point[1]);\n\tcontext.lineTo(point[2], point[3]);\n    }\n\n    if(p[0] === "text") { \n\tcontext.fillText(point[0], point[1], point[2]);\n    }\n\n    if(p[0] === "eraser") { \n\tcontext.moveTo(point[0], point[1]);\n\tcontext.lineTo(point[2], point[3]);\n    }\n\n    if(p[0] === "arc") context.arc(point[0], point[1], point[2], point[3], 0, point[4]); \n\n    if(p[0] === "rect") {\n\tcontext.strokeRect(point[0], point[1], point[2], point[3]);\n\tcontext.fillRect(point[0], point[1], point[2], point[3]);\n    }\n\n    if(p[0] === "quadratic") {\n\tcontext.moveTo(point[0], point[1]);\n\tcontext.quadraticCurveTo(point[2], point[3], point[4], point[5]);\n    }\n\n    if(p[0] === "bezier") {\n\tcontext.moveTo(point[0], point[1]);\n\tcontext.bezierCurveTo(point[2], point[3], point[4], point[5], point[6], point[7]);\n    }\n\n    context.stroke();\n    context.fill();\n}',strokeFillText:"\n\nfunction strokeOrFill(lineWidth, strokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font) { \n    if(lineWidth) { \n\tcontext.globalAlpha = globalAlpha;\n\tcontext.globalCompositeOperation = globalCompositeOperation;\n\tcontext.lineCap = lineCap;\n\tcontext.lineJoin = lineJoin;\n\tcontext.lineWidth = lineWidth;\n\tcontext.strokeStyle = strokeStyle;\n\tcontext.fillStyle = fillStyle;\n\tcontext.font = font;\n    } \n\n    context.stroke();\n    context.fill();\n}",strokeOrFill:function(p){return this.prevProps&&this.prevProps===p.join(",")?"strokeOrFill();":(this.prevProps=p.join(","),"strokeOrFill('"+p.join("', '")+"');")},prevProps:null,shortenHelper:function(name,p1,p2){var result="['"+name+"', ["+p1.join(", ")+"]";return this.prevProps&&this.prevProps===p2.join(",")||(this.prevProps=p2.join(","),result+=", ['"+p2.join("', '")+"']"),result+"], "}},copiedStuff=[],drawHelper={redraw:function(){tempContext.clearRect(0,0,innerWidth,innerHeight),context.clearRect(0,0,innerWidth,innerHeight);var i,point,length=points.length;for(i=0;i<length;i++)(point=points[i])&&point.length&&this[point[0]]&&this[point[0]](context,point[1],point[2])},getOptions:function(opt){return opt=opt||{},[opt.lineWidth||lineWidth,opt.strokeStyle||strokeStyle,opt.fillStyle||fillStyle,opt.globalAlpha||globalAlpha,opt.globalCompositeOperation||globalCompositeOperation,opt.lineCap||lineCap,opt.lineJoin||lineJoin,opt.font||font]},handleOptions:function(context,opt,isNoFillStroke){opt=opt||this.getOptions(),context.globalAlpha=opt[3],context.globalCompositeOperation=opt[4],context.lineCap=opt[5],context.lineJoin=opt[6],context.lineWidth=opt[0],context.strokeStyle=opt[1],context.fillStyle=opt[2],context.font=opt[7],isNoFillStroke||(context.stroke(),context.fill())},line:function(context,point,options){context.beginPath(),context.moveTo(point[0],point[1]),context.lineTo(point[2],point[3]),this.handleOptions(context,options)},marker:function(context,point,options){context.beginPath(),context.moveTo(point[0],point[1]),context.lineTo(point[2],point[3]),this.handleOptions(context,options)},arrow:function(context,point,options){var mx=point[0],my=point[1],lx=point[2],ly=point[3],arrowSize=arrowHandler.arrowSize;10==arrowSize&&(arrowSize=5*(options?options[0]:lineWidth));var angle=Math.atan2(ly-my,lx-mx);context.beginPath(),context.moveTo(mx,my),context.lineTo(lx,ly),this.handleOptions(context,options),context.beginPath(),context.moveTo(lx,ly),context.lineTo(lx-arrowSize*Math.cos(angle-Math.PI/7),ly-arrowSize*Math.sin(angle-Math.PI/7)),context.lineTo(lx-arrowSize*Math.cos(angle+Math.PI/7),ly-arrowSize*Math.sin(angle+Math.PI/7)),context.lineTo(lx,ly),context.lineTo(lx-arrowSize*Math.cos(angle-Math.PI/7),ly-arrowSize*Math.sin(angle-Math.PI/7)),this.handleOptions(context,options)},text:function(context,point,options){this.handleOptions(context,options),context.fillStyle=textHandler.getFillColor(options[2]),context.fillText(point[0].substr(1,point[0].length-2),point[1],point[2])},arc:function(context,point,options){context.beginPath(),context.arc(point[0],point[1],point[2],point[3],0,point[4]),this.handleOptions(context,options)},rect:function(context,point,options){this.handleOptions(context,options,!0),context.strokeRect(point[0],point[1],point[2],point[3]),context.fillRect(point[0],point[1],point[2],point[3])},image:function(context,point,options){this.handleOptions(context,options,!0);var image=imageHandler.images[point[5]];if(!image){var image=new Image;return image.onload=function(){var index=imageHandler.images.length;imageHandler.lastImageURL=image.src,imageHandler.lastImageIndex=index,imageHandler.images.push(image),context.drawImage(image,point[1],point[2],point[3],point[4])},void(image.src=point[0])}context.drawImage(image,point[1],point[2],point[3],point[4])},quadratic:function(context,point,options){context.beginPath(),context.moveTo(point[0],point[1]),context.quadraticCurveTo(point[2],point[3],point[4],point[5]),this.handleOptions(context,options)},bezier:function(context,point,options){context.beginPath(),context.moveTo(point[0],point[1]),context.bezierCurveTo(point[2],point[3],point[4],point[5],point[6],point[7]),this.handleOptions(context,options)}},dragHelper={global:{prevX:0,prevY:0,ismousedown:!1,pointsToMove:"all",startingIndex:0},mousedown:function(e){isControlKeyPressed&&(copy(),paste(),isControlKeyPressed=!1);var dHelper=dragHelper,g=dHelper.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;if(g.prevX=x,g.prevY=y,g.pointsToMove="all",points.length){var p=points[points.length-1],point=p[1];"line"===p[0]&&(dHelper.isPointInPath(x,y,point[0],point[1])&&(g.pointsToMove="head"),dHelper.isPointInPath(x,y,point[2],point[3])&&(g.pointsToMove="tail")),"arrow"===p[0]&&(dHelper.isPointInPath(x,y,point[0],point[1])&&(g.pointsToMove="head"),dHelper.isPointInPath(x,y,point[2],point[3])&&(g.pointsToMove="tail")),"rect"===p[0]&&(dHelper.isPointInPath(x,y,point[0],point[1])&&(g.pointsToMove="stretch-first"),dHelper.isPointInPath(x,y,point[0]+point[2],point[1])&&(g.pointsToMove="stretch-second"),dHelper.isPointInPath(x,y,point[0],point[1]+point[3])&&(g.pointsToMove="stretch-third"),dHelper.isPointInPath(x,y,point[0]+point[2],point[1]+point[3])&&(g.pointsToMove="stretch-last")),"image"===p[0]&&(dHelper.isPointInPath(x,y,point[1],point[2])&&(g.pointsToMove="stretch-first"),dHelper.isPointInPath(x,y,point[1]+point[3],point[2])&&(g.pointsToMove="stretch-second"),dHelper.isPointInPath(x,y,point[1],point[2]+point[4])&&(g.pointsToMove="stretch-third"),dHelper.isPointInPath(x,y,point[1]+point[3],point[2]+point[4])&&(g.pointsToMove="stretch-last")),"quadratic"===p[0]&&(dHelper.isPointInPath(x,y,point[0],point[1])&&(g.pointsToMove="starting-points"),dHelper.isPointInPath(x,y,point[2],point[3])&&(g.pointsToMove="control-points"),dHelper.isPointInPath(x,y,point[4],point[5])&&(g.pointsToMove="ending-points")),"bezier"===p[0]&&(dHelper.isPointInPath(x,y,point[0],point[1])&&(g.pointsToMove="starting-points"),dHelper.isPointInPath(x,y,point[2],point[3])&&(g.pointsToMove="1st-control-points"),dHelper.isPointInPath(x,y,point[4],point[5])&&(g.pointsToMove="2nd-control-points"),dHelper.isPointInPath(x,y,point[6],point[7])&&(g.pointsToMove="ending-points"))}g.ismousedown=!0},mouseup:function(){var g=this.global;is.isDragLastPath&&(tempContext.clearRect(0,0,innerWidth,innerHeight),context.clearRect(0,0,innerWidth,innerHeight),this.end()),g.ismousedown=!1},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,g=this.global;drawHelper.redraw(),g.ismousedown&&this.dragShape(x,y),is.isDragLastPath&&this.init()},init:function(){if(points.length){var p=points[points.length-1],point=p[1];this.global.ismousedown?tempContext.fillStyle="rgba(255,85 ,154,.9)":tempContext.fillStyle="rgba(255,85 ,154,.4)","quadratic"===p[0]&&(tempContext.beginPath(),tempContext.arc(point[0],point[1],10,2*Math.PI,0,!1),tempContext.arc(point[2],point[3],10,2*Math.PI,0,!1),tempContext.arc(point[4],point[5],10,2*Math.PI,0,!1),tempContext.fill()),"bezier"===p[0]&&(tempContext.beginPath(),tempContext.arc(point[0],point[1],10,2*Math.PI,0,!1),tempContext.arc(point[2],point[3],10,2*Math.PI,0,!1),tempContext.arc(point[4],point[5],10,2*Math.PI,0,!1),tempContext.arc(point[6],point[7],10,2*Math.PI,0,!1),tempContext.fill()),"line"===p[0]&&(tempContext.beginPath(),tempContext.arc(point[0],point[1],10,2*Math.PI,0,!1),tempContext.arc(point[2],point[3],10,2*Math.PI,0,!1),tempContext.fill()),"arrow"===p[0]&&(tempContext.beginPath(),tempContext.arc(point[0],point[1],10,2*Math.PI,0,!1),tempContext.arc(point[2],point[3],10,2*Math.PI,0,!1),tempContext.fill()),"text"===p[0]&&(tempContext.font="15px Verdana",tempContext.fillText(point[0],point[1],point[2])),"rect"===p[0]&&(tempContext.beginPath(),tempContext.arc(point[0],point[1],10,2*Math.PI,0,!1),tempContext.fill(),tempContext.beginPath(),tempContext.arc(point[0]+point[2],point[1],10,2*Math.PI,0,!1),tempContext.fill(),tempContext.beginPath(),tempContext.arc(point[0],point[1]+point[3],10,2*Math.PI,0,!1),tempContext.fill(),tempContext.beginPath(),tempContext.arc(point[0]+point[2],point[1]+point[3],10,2*Math.PI,0,!1),tempContext.fill()),"image"===p[0]&&(tempContext.beginPath(),tempContext.arc(point[1],point[2],10,2*Math.PI,0,!1),tempContext.fill(),tempContext.beginPath(),tempContext.arc(point[1]+point[3],point[2],10,2*Math.PI,0,!1),tempContext.fill(),tempContext.beginPath(),tempContext.arc(point[1],point[2]+point[4],10,2*Math.PI,0,!1),tempContext.fill(),tempContext.beginPath(),tempContext.arc(point[1]+point[3],point[2]+point[4],10,2*Math.PI,0,!1),tempContext.fill())}},isPointInPath:function(x,y,first,second){return x>first-10&&x<first+10&&y>second-10&&y<second+10},getPoint:function(point,prev,otherPoint){return point=point>prev?otherPoint+(point-prev):otherPoint-(prev-point)},getXYWidthHeight:function(x,y,prevX,prevY,oldPoints){return"stretch-first"==oldPoints.pointsToMove&&(x>prevX?(oldPoints.x=oldPoints.x+(x-prevX),oldPoints.width=oldPoints.width-(x-prevX)):(oldPoints.x=oldPoints.x-(prevX-x),oldPoints.width=oldPoints.width+(prevX-x)),y>prevY?(oldPoints.y=oldPoints.y+(y-prevY),oldPoints.height=oldPoints.height-(y-prevY)):(oldPoints.y=oldPoints.y-(prevY-y),oldPoints.height=oldPoints.height+(prevY-y))),"stretch-second"==oldPoints.pointsToMove&&(oldPoints.width=x>prevX?oldPoints.width+(x-prevX):oldPoints.width-(prevX-x),y<prevY?(oldPoints.y=oldPoints.y+(y-prevY),oldPoints.height=oldPoints.height-(y-prevY)):(oldPoints.y=oldPoints.y-(prevY-y),oldPoints.height=oldPoints.height+(prevY-y))),"stretch-third"==oldPoints.pointsToMove&&(x>prevX?(oldPoints.x=oldPoints.x+(x-prevX),oldPoints.width=oldPoints.width-(x-prevX)):(oldPoints.x=oldPoints.x-(prevX-x),oldPoints.width=oldPoints.width+(prevX-x)),oldPoints.height=y<prevY?oldPoints.height+(y-prevY):oldPoints.height-(prevY-y)),oldPoints},dragShape:function(x,y){if(this.global.ismousedown){tempContext.clearRect(0,0,innerWidth,innerHeight),is.isDragLastPath&&this.dragLastPath(x,y),is.isDragAllPaths&&this.dragAllPaths(x,y);var g=this.global;g.prevX=x,g.prevY=y}},end:function(){if(points.length){tempContext.clearRect(0,0,innerWidth,innerHeight);var point=points[points.length-1];drawHelper[point[0]](context,point[1],point[2])}},dragAllPaths:function(x,y){var p,point,g=this.global,prevX=g.prevX,prevY=g.prevY,length=points.length,getPoint=this.getPoint,i=g.startingIndex;for(i;i<length;i++)p=points[i],point=p[1],"line"===p[0]&&(points[i]=[p[0],[getPoint(x,prevX,point[0]),getPoint(y,prevY,point[1]),getPoint(x,prevX,point[2]),getPoint(y,prevY,point[3])],p[2]]),"arrow"===p[0]&&(points[i]=[p[0],[getPoint(x,prevX,point[0]),getPoint(y,prevY,point[1]),getPoint(x,prevX,point[2]),getPoint(y,prevY,point[3])],p[2]]),"text"===p[0]&&(points[i]=[p[0],[point[0],getPoint(x,prevX,point[1]),getPoint(y,prevY,point[2])],p[2]]),"arc"===p[0]&&(points[i]=[p[0],[getPoint(x,prevX,point[0]),getPoint(y,prevY,point[1]),point[2],point[3],point[4]],p[2]]),"rect"===p[0]&&(points[i]=[p[0],[getPoint(x,prevX,point[0]),getPoint(y,prevY,point[1]),point[2],point[3]],p[2]]),"image"===p[0]&&(points[i]=[p[0],[point[0],getPoint(x,prevX,point[1]),getPoint(y,prevY,point[2]),point[3],point[4],point[5]],p[2]]),"quadratic"===p[0]&&(points[i]=[p[0],[getPoint(x,prevX,point[0]),getPoint(y,prevY,point[1]),getPoint(x,prevX,point[2]),getPoint(y,prevY,point[3]),getPoint(x,prevX,point[4]),getPoint(y,prevY,point[5])],p[2]]),"bezier"===p[0]&&(points[i]=[p[0],[getPoint(x,prevX,point[0]),getPoint(y,prevY,point[1]),getPoint(x,prevX,point[2]),getPoint(y,prevY,point[3]),getPoint(x,prevX,point[4]),getPoint(y,prevY,point[5]),getPoint(x,prevX,point[6]),getPoint(y,prevY,point[7])],p[2]])},dragLastPath:function(x,y){var g=this.global,prevX=g.prevX,prevY=g.prevY,p=points[points.length-1],point=p[1],getPoint=this.getPoint,getXYWidthHeight=this.getXYWidthHeight,isMoveAllPoints="all"===g.pointsToMove;if("line"===p[0]&&(("head"===g.pointsToMove||isMoveAllPoints)&&(point[0]=getPoint(x,prevX,point[0]),point[1]=getPoint(y,prevY,point[1])),("tail"===g.pointsToMove||isMoveAllPoints)&&(point[2]=getPoint(x,prevX,point[2]),point[3]=getPoint(y,prevY,point[3])),points[points.length-1]=[p[0],point,p[2]]),"arrow"===p[0]&&(("head"===g.pointsToMove||isMoveAllPoints)&&(point[0]=getPoint(x,prevX,point[0]),point[1]=getPoint(y,prevY,point[1])),("tail"===g.pointsToMove||isMoveAllPoints)&&(point[2]=getPoint(x,prevX,point[2]),point[3]=getPoint(y,prevY,point[3])),points[points.length-1]=[p[0],point,p[2]]),"text"===p[0]&&(("head"===g.pointsToMove||isMoveAllPoints)&&(point[1]=getPoint(x,prevX,point[1]),point[2]=getPoint(y,prevY,point[2])),points[points.length-1]=[p[0],point,p[2]]),"arc"===p[0]&&(point[0]=getPoint(x,prevX,point[0]),point[1]=getPoint(y,prevY,point[1]),points[points.length-1]=[p[0],point,p[2]]),"rect"===p[0]){if(isMoveAllPoints&&(point[0]=getPoint(x,prevX,point[0]),point[1]=getPoint(y,prevY,point[1])),"stretch-first"===g.pointsToMove){var newPoints=getXYWidthHeight(x,y,prevX,prevY,{x:point[0],y:point[1],width:point[2],height:point[3],pointsToMove:g.pointsToMove});point[0]=newPoints.x,point[1]=newPoints.y,point[2]=newPoints.width,point[3]=newPoints.height}if("stretch-second"===g.pointsToMove){var newPoints=getXYWidthHeight(x,y,prevX,prevY,{x:point[0],y:point[1],width:point[2],height:point[3],pointsToMove:g.pointsToMove});point[1]=newPoints.y,point[2]=newPoints.width,point[3]=newPoints.height}if("stretch-third"===g.pointsToMove){var newPoints=getXYWidthHeight(x,y,prevX,prevY,{x:point[0],y:point[1],width:point[2],height:point[3],pointsToMove:g.pointsToMove});point[0]=newPoints.x,point[2]=newPoints.width,point[3]=newPoints.height}"stretch-last"===g.pointsToMove&&(point[2]=getPoint(x,prevX,point[2]),point[3]=getPoint(y,prevY,point[3])),points[points.length-1]=[p[0],point,p[2]]}if("image"===p[0]){if(isMoveAllPoints&&(point[1]=getPoint(x,prevX,point[1]),point[2]=getPoint(y,prevY,point[2])),"stretch-first"===g.pointsToMove){var newPoints=getXYWidthHeight(x,y,prevX,prevY,{x:point[1],y:point[2],width:point[3],height:point[4],pointsToMove:g.pointsToMove});point[1]=newPoints.x,point[2]=newPoints.y,point[3]=newPoints.width,point[4]=newPoints.height}if("stretch-second"===g.pointsToMove){var newPoints=getXYWidthHeight(x,y,prevX,prevY,{x:point[1],y:point[2],width:point[3],height:point[4],pointsToMove:g.pointsToMove});point[2]=newPoints.y,point[3]=newPoints.width,
point[4]=newPoints.height}if("stretch-third"===g.pointsToMove){var newPoints=getXYWidthHeight(x,y,prevX,prevY,{x:point[1],y:point[2],width:point[3],height:point[4],pointsToMove:g.pointsToMove});point[1]=newPoints.x,point[3]=newPoints.width,point[4]=newPoints.height}"stretch-last"===g.pointsToMove&&(point[3]=getPoint(x,prevX,point[3]),point[4]=getPoint(y,prevY,point[4])),points[points.length-1]=[p[0],point,p[2]]}"quadratic"===p[0]&&(("starting-points"===g.pointsToMove||isMoveAllPoints)&&(point[0]=getPoint(x,prevX,point[0]),point[1]=getPoint(y,prevY,point[1])),("control-points"===g.pointsToMove||isMoveAllPoints)&&(point[2]=getPoint(x,prevX,point[2]),point[3]=getPoint(y,prevY,point[3])),("ending-points"===g.pointsToMove||isMoveAllPoints)&&(point[4]=getPoint(x,prevX,point[4]),point[5]=getPoint(y,prevY,point[5])),points[points.length-1]=[p[0],point,p[2]]),"bezier"===p[0]&&(("starting-points"===g.pointsToMove||isMoveAllPoints)&&(point[0]=getPoint(x,prevX,point[0]),point[1]=getPoint(y,prevY,point[1])),("1st-control-points"===g.pointsToMove||isMoveAllPoints)&&(point[2]=getPoint(x,prevX,point[2]),point[3]=getPoint(y,prevY,point[3])),("2nd-control-points"===g.pointsToMove||isMoveAllPoints)&&(point[4]=getPoint(x,prevX,point[4]),point[5]=getPoint(y,prevY,point[5])),("ending-points"===g.pointsToMove||isMoveAllPoints)&&(point[6]=getPoint(x,prevX,point[6]),point[7]=getPoint(y,prevY,point[7])),points[points.length-1]=[p[0],point,p[2]])}},pencilHandler={ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0,tempContext.lineCap="round",pencilDrawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],pencilDrawHelper.getOptions()],t.prevX=x,t.prevY=y},mouseup:function(e){this.ismousedown=!1},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.lineCap="round",pencilDrawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],pencilDrawHelper.getOptions()],t.prevX=x,t.prevY=y)}},pencilLineWidth=document.getElementById("pencil-stroke-style").value,pencilStrokeStyle="#"+document.getElementById("pencil-fill-style").value,pencilDrawHelper=clone(drawHelper);pencilDrawHelper.getOptions=function(){return[pencilLineWidth,pencilStrokeStyle,fillStyle,globalAlpha,globalCompositeOperation,lineCap,lineJoin,font]};var markerHandler={ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0,tempContext.lineCap="round",markerDrawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],markerDrawHelper.getOptions()],t.prevX=x,t.prevY=y},mouseup:function(e){this.ismousedown=!1},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.lineCap="round",markerDrawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],markerDrawHelper.getOptions()],t.prevX=x,t.prevY=y)}},markerLineWidth=document.getElementById("marker-stroke-style").value,markerStrokeStyle="#"+document.getElementById("marker-fill-style").value,markerDrawHelper=clone(drawHelper);markerDrawHelper.getOptions=function(){return[markerLineWidth,markerStrokeStyle,fillStyle,.7,globalCompositeOperation,lineCap,lineJoin,font]};var eraserHandler={ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0,tempContext.lineCap="round",drawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.prevX=x,t.prevY=y},mouseup:function(e){this.ismousedown=!1},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.lineCap="round",drawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.prevX=x,t.prevY=y)}},textHandler={text:"",selectedFontFamily:"Arial",selectedFontSize:"15",onShapeSelected:function(){tempContext.canvas.style.cursor="text",this.x=this.y=this.pageX=this.pageY=0,this.text=""},onShapeUnSelected:function(){this.text="",this.showOrHideTextTools("hide"),tempContext.canvas.style.cursor="default",void 0!==this.blinkCursorInterval&&clearInterval(this.blinkCursorInterval)},getFillColor:function(color){return color=(color||fillStyle).toLowerCase(),"rgba(255, 255, 255, 0)"==color||"transparent"==color||"white"===color?"black":color},writeText:function(keyPressed,isBackKeyPressed){if(is.isText){if(isBackKeyPressed)return textHandler.text=textHandler.text.substr(0,textHandler.text.length-1),void textHandler.fillText(textHandler.text);textHandler.text+=keyPressed,textHandler.fillText(textHandler.text)}},fillText:function(text){if(is.isText){tempContext.clearRect(0,0,tempContext.canvas.width,tempContext.canvas.height);var options=textHandler.getOptions();drawHelper.handleOptions(tempContext,options),tempContext.fillStyle=textHandler.getFillColor(options[2]),tempContext.font=textHandler.selectedFontSize+'px "'+textHandler.selectedFontFamily+'"',tempContext.fillText(text,textHandler.x,textHandler.y)}},blinkCursorInterval:null,index:0,blinkCursor:function(){textHandler.index++,textHandler.index%2==0?textHandler.fillText(textHandler.text+"|"):textHandler.fillText(textHandler.text)},getOptions:function(){var options={font:textHandler.selectedFontSize+'px "'+textHandler.selectedFontFamily+'"',fillStyle:textHandler.getFillColor(),strokeStyle:"#6c96c8",globalCompositeOperation:"source-over",globalAlpha:1,lineJoin:"round",lineCap:"round",lineWidth:2};return font=options.font,options},appendPoints:function(){var options=textHandler.getOptions();points[points.length]=["text",['"'+textHandler.text+'"',textHandler.x,textHandler.y],drawHelper.getOptions(options)]},mousedown:function(e){is.isText&&(textHandler.text.length&&this.appendPoints(),textHandler.x=textHandler.y=0,textHandler.text="",textHandler.pageX=e.pageX,textHandler.pageY=e.pageY,textHandler.x=e.pageX-canvas.offsetLeft-5,textHandler.y=e.pageY-canvas.offsetTop+10,void 0!==textHandler.blinkCursorInterval&&clearInterval(textHandler.blinkCursorInterval),textHandler.blinkCursor(),textHandler.blinkCursorInterval=setInterval(textHandler.blinkCursor,700),this.showTextTools())},mouseup:function(e){},mousemove:function(e){},showOrHideTextTools:function(show){this.fontFamilyBox.style.display="show"==show?"block":"none",this.fontSizeBox.style.display="show"==show?"block":"none",this.fontSizeBox.style.left=this.x+"px",this.fontFamilyBox.style.left=this.fontSizeBox.clientWidth+this.x+"px",this.fontSizeBox.style.top=this.y+"px",this.fontFamilyBox.style.top=this.y+"px"},showTextTools:function(){this.fontFamilyBox&&this.fontSizeBox&&(this.unselectAllFontFamilies(),this.unselectAllFontSizes(),this.showOrHideTextTools("show"),this.eachFontFamily(function(child){child.onclick=function(e){e.preventDefault(),textHandler.showOrHideTextTools("hide"),textHandler.selectedFontFamily=this.innerHTML,this.className="font-family-selected"},child.style.fontFamily=child.innerHTML}),this.eachFontSize(function(child){child.onclick=function(e){e.preventDefault(),textHandler.showOrHideTextTools("hide"),textHandler.selectedFontSize=this.innerHTML,this.className="font-family-selected"}}))},eachFontFamily:function(callback){for(var childs=this.fontFamilyBox.querySelectorAll("li"),i=0;i<childs.length;i++)callback(childs[i])},unselectAllFontFamilies:function(){this.eachFontFamily(function(child){child.className="",child.innerHTML===textHandler.selectedFontFamily&&(child.className="font-family-selected")})},eachFontSize:function(callback){for(var childs=this.fontSizeBox.querySelectorAll("li"),i=0;i<childs.length;i++)callback(childs[i])},unselectAllFontSizes:function(){this.eachFontSize(function(child){child.className="",child.innerHTML===textHandler.selectedFontSize&&(child.className="font-size-selected")})},onReturnKeyPressed:function(){if(textHandler.text&&textHandler.text.length){var fontSize=parseInt(textHandler.selectedFontSize)||15;this.mousedown({pageX:this.pageX,pageY:this.pageY+fontSize+5}),drawHelper.redraw()}},fontFamilyBox:document.querySelector(".fontSelectUl"),fontSizeBox:document.querySelector(".fontSizeUl")},arcHandler={global:{ismousedown:!1,prevX:0,prevY:0,prevRadius:0,isCircleDrawn:!1,isCircledEnded:!0,isClockwise:!1,arcRangeContainer:null,arcRange:null},mousedown:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.prevX=x,g.prevY=y,g.ismousedown=!0},mouseup:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;if(g.ismousedown)if(!g.isCircleDrawn&&g.isCircledEnded){var prevX=g.prevX,prevY=g.prevY,radius=(x-prevX+(y-prevY))/3;g.prevRadius=radius,g.isCircleDrawn=!0,g.isCircleEnded=!1;var angle,c=2*Math.PI*radius/21,xx=prevX>x?prevX-x:x-prevX,yy=prevY>y?prevY-y:y-prevY;angle=(xx+yy)/(2*c),points[points.length]=["arc",[prevX+radius,prevY+radius,radius,angle,1],drawHelper.getOptions()];var arcRange=g.arcRange,arcRangeContainer=g.arcRangeContainer;arcRangeContainer.style.display="block",arcRange.focus(),arcRangeContainer.style.top=y+canvas.offsetTop+20+"px",arcRangeContainer.style.left=x+"px",arcRange.value=2}else g.isCircleDrawn&&!g.isCircleEnded&&this.end();g.ismousedown=!1,this.fixAllPoints()},mousemove:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,ismousedown=g.ismousedown,isCircleDrawn=g.isCircleDrawn,isCircleEnded=g.isCircledEnded;if(ismousedown&&!isCircleDrawn&&isCircleEnded){var prevX=g.prevX,prevY=g.prevY,radius=(x-prevX+(y-prevY))/3;tempContext.clearRect(0,0,2e3,2e3),drawHelper.arc(tempContext,[prevX+radius,prevY+radius,radius,2*Math.PI,!0])}},fixAllPoints:function(){for(var toFixed=this.toFixed,i=0;i<points.length;i++){var point,p=points[i];"arc"===p[0]&&(point=p[1],points[i]=["arc",[toFixed(point[0]),toFixed(point[1]),toFixed(point[2]),toFixed(point[3]),point[4]],p[2]])}},init:function(){var markIsClockwise=find("is-clockwise"),g=this.global;g.arcRangeContainer=find("arc-range-container"),g.arcRange=find("arc-range"),addEvent(markIsClockwise,"change",function(e){if(g.isClockwise=markIsClockwise.checked,g.arcRange.value=arcHandler.toFixed(g.arcRange.value),g.arcRange.focus(),arcHandler.arcRangeHandler(e),points.length){var p=points[points.length-1],point=p[1];tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.arc(tempContext,[point[0],point[1],point[2],point[3],point[4]])}});var arcRange=g.arcRange;addEvent(arcRange,"keydown",this.arcRangeHandler),addEvent(arcRange,"focus",this.arcRangeHandler)},arcRangeHandler:function(e){var g=arcHandler.global,arcRange=g.arcRange,key=e.keyCode,value=+arcRange.value;if(39!=key&&40!=key||(arcRange.value=(value<2?value:1.98)+.02),37!=key&&38!=key||(arcRange.value=(value>0?value:.02)-.02),!key||13==key||39==key||40==key||37==key||38==key){var range=Math.PI*arcHandler.toFixed(value),p=points[points.length-1];if("arc"===p[0]){var point=p[1];points[points.length-1]=["arc",[point[0],point[1],point[2],range,g.isClockwise?1:0],p[2]],drawHelper.redraw()}}},toFixed:function(input){return Number(input).toFixed(1)},end:function(){var g=this.global;g.arcRangeContainer.style.display="none",g.arcRange.value=2,g.isCircleDrawn=!1,g.isCircleEnded=!0,drawHelper.redraw()}};arcHandler.init();var lineHandler={ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["line",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.line(tempContext,[t.prevX,t.prevY,x,y]))}},arrowHandler={ismousedown:!1,prevX:0,prevY:0,arrowSize:10,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["arrow",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.arrow(tempContext,[t.prevX,t.prevY,x,y]))}},rectHandler={ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["rect",[t.prevX,t.prevY,x-t.prevX,y-t.prevY],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.rect(tempContext,[t.prevX,t.prevY,x-t.prevX,y-t.prevY]))}},quadraticHandler={global:{ismousedown:!1,prevX:0,prevY:0,controlPointX:0,controlPointY:0,isFirstStep:!0,isLastStep:!1},mousedown:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.isLastStep||(g.prevX=x,g.prevY=y),g.ismousedown=!0,g.isLastStep&&g.ismousedown&&this.end(x,y)},mouseup:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.ismousedown&&g.isFirstStep&&(g.controlPointX=x,g.controlPointY=y,g.isFirstStep=!1,g.isLastStep=!0)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,g=this.global;tempContext.clearRect(0,0,innerWidth,innerHeight),g.ismousedown&&g.isFirstStep&&drawHelper.quadratic(tempContext,[g.prevX,g.prevY,x,y,x,y]),g.isLastStep&&drawHelper.quadratic(tempContext,[g.prevX,g.prevY,g.controlPointX,g.controlPointY,x,y])},end:function(x,y){var g=this.global;g.ismousedown&&(g.isLastStep=!1,g.isFirstStep=!0,g.ismousedown=!1,x=x||g.controlPointX||g.prevX,y=y||g.controlPointY||g.prevY,points[points.length]=["quadratic",[g.prevX,g.prevY,g.controlPointX,g.controlPointY,x,y],drawHelper.getOptions()])}},bezierHandler={global:{ismousedown:!1,prevX:0,prevY:0,firstControlPointX:0,firstControlPointY:0,secondControlPointX:0,secondControlPointY:0,isFirstStep:!0,isSecondStep:!1,isLastStep:!1},mousedown:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.isLastStep||g.isSecondStep||(g.prevX=x,g.prevY=y),g.ismousedown=!0,g.isLastStep&&g.ismousedown&&this.end(x,y),g.ismousedown&&g.isSecondStep&&(g.secondControlPointX=x,g.secondControlPointY=y,g.isSecondStep=!1,g.isLastStep=!0)},mouseup:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.ismousedown&&g.isFirstStep&&(g.firstControlPointX=x,g.firstControlPointY=y,g.isFirstStep=!1,g.isSecondStep=!0)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,g=this.global;tempContext.clearRect(0,0,innerWidth,innerHeight),g.ismousedown&&g.isFirstStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,x,y,x,y,x,y]),g.ismousedown&&g.isSecondStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,x,y,x,y]),g.isLastStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,g.secondControlPointX,g.secondControlPointY,x,y])},end:function(x,y){var g=this.global;g.ismousedown&&(g.isLastStep=g.isSecondStep=!1,g.isFirstStep=!0,g.ismousedown=!1,g.secondControlPointX=g.secondControlPointX||g.firstControlPointX,g.secondControlPointY=g.secondControlPointY||g.firstControlPointY,x=x||g.secondControlPointX,y=y||g.secondControlPointY,points[points.length]=["bezier",[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,g.secondControlPointX,g.secondControlPointY,x,y],drawHelper.getOptions()])}},zoomHandler={scale:1,up:function(e){this.scale+=.01,this.apply()},down:function(e){this.scale-=.01,this.apply()},apply:function(){tempContext.scale(this.scale,this.scale),context.scale(this.scale,this.scale),drawHelper.redraw()},icons:{up:function(ctx){ctx.font="22px Verdana",ctx.strokeText("+",10,30)},down:function(ctx){ctx.font="22px Verdana",ctx.strokeText("-",15,30)}}},FileSelector=function(){function selectFile(callback,multiple){var file=document.createElement("input");file.type="file",multiple&&(file.multiple=!0),file.accept="image/*",file.onchange=function(){return multiple?file.files.length?void callback(file.files):void console.error("No file selected."):file.files[0]?(callback(file.files[0]),void file.parentNode.removeChild(file)):void console.error("No file selected.")},file.style.display="none",(document.body||document.documentElement).appendChild(file),fireClickEvent(file)}function fireClickEvent(element){var evt=new window.MouseEvent("click",{view:window,bubbles:!0,cancelable:!0,button:0,buttons:0,mozInputSource:1});element.dispatchEvent(evt)}var selector=this;selector.selectSingleFile=selectFile,selector.selectMultipleFiles=function(callback){selectFile(callback,!0)}},imageHandler={lastImageURL:null,lastImageIndex:0,images:[],ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["image",[imageHandler.lastImageURL,t.prevX,t.prevY,x-t.prevX,y-t.prevY,imageHandler.lastImageIndex],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.image(tempContext,[imageHandler.lastImageURL,t.prevX,t.prevY,x-t.prevX,y-t.prevY,imageHandler.lastImageIndex]))}},tools={line:!0,arrow:!0,pencil:!0,marker:!0,dragSingle:!0,dragMultiple:!0,eraser:!0,rectangle:!0,arc:!0,bezier:!0,quadratic:!0,text:!0,image:!0,zoom:!0};if(params.tools)try{var t=JSON.parse(params.tools);tools=t}catch(e){}is.set(window.selectedIcon),window.addEventListener("load",function(){for(var firstMatch,toolBox=document.getElementById("tool-box"),canvasElements=toolBox.getElementsByTagName("canvas"),shape=window.selectedIcon.toLowerCase(),i=0;i<canvasElements.length;i++)firstMatch||-1===(canvasElements[i].id||"").indexOf(shape)||(firstMatch=canvasElements[i]);firstMatch||(window.selectedIcon="Pencil",firstMatch=document.getElementById("pencil-icon")),setSelection(firstMatch,window.selectedIcon)},!1),function(){function getContext(id){var context=find(id).getContext("2d");return context.lineWidth=2,context.strokeStyle="#6c96c8",context}function bindEvent(context,shape){"Pencil"!==shape&&"Marker"!==shape||(lineCap=lineJoin="round"),addEvent(context.canvas,"click",function(){if(textHandler.text.length&&textHandler.appendPoints(),"Text"===shape?textHandler.onShapeSelected():textHandler.onShapeUnSelected(),"Pencil"!==shape&&"Marker"!==shape||(lineCap=lineJoin="round"),dragHelper.global.startingIndex=0,setSelection(this,shape),"drag-last-path"===this.id?(find("copy-last").checked=!0,find("copy-all").checked=!1):"drag-all-paths"===this.id&&(find("copy-all").checked=!0,find("copy-last").checked=!1),"image-icon"===this.id){(new FileSelector).selectSingleFile(function(file){if(file){var reader=new FileReader;reader.onload=function(event){var image=new Image;image.onload=function(){var index=imageHandler.images.length;imageHandler.lastImageURL=image.src,imageHandler.lastImageIndex=index,imageHandler.images.push(image)},image.src=event.target.result},reader.readAsDataURL(file)}})}"pencil-icon"===this.id||"eraser-icon"===this.id||"marker-icon"===this.id?(cache.lineCap=lineCap,cache.lineJoin=lineJoin,lineCap=lineJoin="round"):cache.lineCap&&cache.lineJoin&&(lineCap=cache.lineCap,lineJoin=cache.lineJoin),"eraser-icon"===this.id?(cache.strokeStyle=strokeStyle,cache.fillStyle=fillStyle,cache.lineWidth=lineWidth,strokeStyle="White",fillStyle="White",lineWidth=10):cache.strokeStyle&&cache.fillStyle&&void 0!==cache.lineWidth&&(strokeStyle=cache.strokeStyle,fillStyle=cache.fillStyle,lineWidth=cache.lineWidth)})}function decorateDragLastPath(){var point,i,context=getContext("drag-last-path"),x=10,y=6,line="line",points=[[line,x,y,x+5,y+27],[line,x,y,x+18,y+19],[line,x+17,y+19,x+9,y+20],[line,x+9,y+20,x+5,y+27],[line,x+16,y+22,x+16,y+31],[line,x+12,y+27,x+20,y+27]],length=points.length;for(i=0;i<length;i++)point=points[i],"line"===point[0]&&(context.beginPath(),context.moveTo(point[1],point[2]),context.lineTo(point[3],point[4]),context.closePath(),context.stroke());context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Last",18,12),bindEvent(context,"DragLastPath")}function decorateDragAllPaths(){var point,i,context=getContext("drag-all-paths"),x=10,y=6,line="line",points=[[line,x,y,x+5,y+27],[line,x,y,x+18,y+19],[line,x+17,y+19,x+9,y+20],[line,x+9,y+20,x+5,y+27],[line,x+16,y+22,x+16,y+31],[line,x+12,y+27,x+20,y+27]],length=points.length;for(i=0;i<length;i++)point=points[i],"line"===point[0]&&(context.beginPath(),context.moveTo(point[1],point[2]),context.lineTo(point[3],point[4]),context.closePath(),context.stroke());context.fillStyle="Gray",context.font="10px Verdana",context.fillText("All",20,12),bindEvent(context,"DragAllPaths")}function decorateLine(){var context=getContext("line");context.moveTo(10,15),context.lineTo(30,35),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Line",16,12),bindEvent(context,"Line")}function decorateArrow(){var context=getContext("arrow"),x=10,y=35;context.beginPath(),context.moveTo(x,y),context.lineTo(x+20,y-20),context.stroke(),context.beginPath(),context.moveTo(x+15,y-5),context.lineTo(x+20,y-20),context.stroke(),context.beginPath(),context.moveTo(x+5,y-15),context.lineTo(x+20,y-20),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Arrow",5,12),bindEvent(context,"Arrow")}function decoreZoomUp(){var context=getContext("zoom-up");zoomHandler.icons.up(context),addEvent(context.canvas,"click",function(){zoomHandler.up()})}function decoreZoomDown(){var context=getContext("zoom-down");zoomHandler.icons.down(context),addEvent(context.canvas,"click",function(){zoomHandler.down()})}function decoratePencil(){function hexToRGBA(h,alpha){return"rgba("+hexToRGB(h).join(",")+",1)"}var colors=[["FFFFFF","006600","000099","CC0000","8C4600"],["CCCCCC","00CC00","6633CC","FF0000","B28500"],["666666","66FFB2","006DD9","FF7373","FF9933"],["333333","26FF26","6699FF","CC33FF","FFCC99"],["000000","CCFF99","BFDFFF","FFBFBF","FFFF33"]],context=getContext("pencil-icon");context.lineWidth=5,context.lineCap="round",context.moveTo(35,20),context.lineTo(5,35),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Pencil",6,12),bindEvent(context,"Pencil");var pencilContainer=find("pencil-container"),pencilColorContainer=find("pencil-fill-colors"),strokeStyleText=find("pencil-stroke-style"),pencilColorsList=find("pencil-colors-list"),fillStyleText=find("pencil-fill-style"),pencilSelectedColor=find("pencil-selected-color"),pencilSelectedColor2=find("pencil-selected-color-2"),btnPencilDone=find("pencil-done"),canvas=context.canvas,alpha=.2;pencilStrokeStyle=hexToRGBA(fillStyleText.value,alpha),pencilSelectedColor.style.backgroundColor=pencilSelectedColor2.style.backgroundColor="#"+fillStyleText.value,colors.forEach(function(colorRow){var row="<tr>";colorRow.forEach(function(color){row+='<td style="background-color:#'+color+'" data-color="'+color+'"></td>'}),row+="</tr>",pencilColorsList.innerHTML+=row}),Array.prototype.slice.call(pencilColorsList.getElementsByTagName("td")).forEach(function(td){addEvent(td,"mouseover",function(){var elColor=td.getAttribute("data-color");pencilSelectedColor2.style.backgroundColor="#"+elColor,fillStyleText.value=elColor}),addEvent(td,"click",function(){var elColor=td.getAttribute("data-color");pencilSelectedColor.style.backgroundColor=pencilSelectedColor2.style.backgroundColor="#"+elColor,fillStyleText.value=elColor,pencilColorContainer.style.display="none"})}),addEvent(canvas,"click",function(){hideContainers(),pencilContainer.style.display="block",pencilContainer.style.top=canvas.offsetTop+1+"px",pencilContainer.style.left=canvas.offsetLeft+canvas.clientWidth+"px",fillStyleText.focus()}),addEvent(btnPencilDone,"click",function(){pencilContainer.style.display="none",pencilColorContainer.style.display="none",pencilLineWidth=strokeStyleText.value,pencilStrokeStyle=hexToRGBA(fillStyleText.value,alpha)}),addEvent(pencilSelectedColor,"click",function(){pencilColorContainer.style.display="block"})}function decorateMarker(){function hexToRGBA(h,alpha){return"rgba("+hexToRGB(h).join(",")+","+alpha+")"}var colors=[["FFFFFF","006600","000099","CC0000","8C4600"],["CCCCCC","00CC00","6633CC","FF0000","B28500"],["666666","66FFB2","006DD9","FF7373","FF9933"],["333333","26FF26","6699FF","CC33FF","FFCC99"],["000000","CCFF99","BFDFFF","FFBFBF","FFFF33"]],context=getContext("marker-icon");context.lineWidth=9,context.lineCap="round",context.strokeStyle="green",context.moveTo(35,20),context.lineTo(5,25),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Marker",6,12),bindEvent(context,"Marker");var markerContainer=find("marker-container"),markerColorContainer=find("marker-fill-colors"),strokeStyleText=find("marker-stroke-style"),markerColorsList=find("marker-colors-list"),fillStyleText=find("marker-fill-style"),markerSelectedColor=find("marker-selected-color"),markerSelectedColor2=find("marker-selected-color-2"),btnMarkerDone=find("marker-done"),canvas=context.canvas,alpha=.2;markerStrokeStyle=hexToRGBA(fillStyleText.value,alpha),markerSelectedColor.style.backgroundColor=markerSelectedColor2.style.backgroundColor="#"+fillStyleText.value,colors.forEach(function(colorRow){var row="<tr>";colorRow.forEach(function(color){row+='<td style="background-color:#'+color+'" data-color="'+color+'"></td>'}),row+="</tr>",markerColorsList.innerHTML+=row}),Array.prototype.slice.call(markerColorsList.getElementsByTagName("td")).forEach(function(td){addEvent(td,"mouseover",function(){var elColor=td.getAttribute("data-color");markerSelectedColor2.style.backgroundColor="#"+elColor,fillStyleText.value=elColor}),addEvent(td,"click",function(){var elColor=td.getAttribute("data-color");markerSelectedColor.style.backgroundColor=markerSelectedColor2.style.backgroundColor="#"+elColor,fillStyleText.value=elColor,markerColorContainer.style.display="none"})}),addEvent(canvas,"click",function(){hideContainers(),markerContainer.style.display="block",markerContainer.style.top=canvas.offsetTop+1+"px",markerContainer.style.left=canvas.offsetLeft+canvas.clientWidth+"px",fillStyleText.focus()}),addEvent(btnMarkerDone,"click",function(){markerContainer.style.display="none",markerColorContainer.style.display="none",markerLineWidth=strokeStyleText.value,markerStrokeStyle=hexToRGBA(fillStyleText.value,alpha)}),addEvent(markerSelectedColor,"click",function(){markerColorContainer.style.display="block"})}function decorateEraser(){var context=getContext("eraser-icon");context.lineWidth=9,context.lineCap="round",context.moveTo(35,20),context.lineTo(5,25),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Eraser",6,12),bindEvent(context,"Eraser")}function decorateText(){var context=getContext("text-icon");context.font="22px Verdana",context.strokeText("T",15,30),bindEvent(context,"Text")}function decorateImage(){var context=getContext("image-icon"),image=new Image;image.onload=function(){context.drawImage(image,4,4,32,32),bindEvent(context,"Image")},image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAADFBMVEVYWFhVVVUAAABUVFTqqlXjAAAAA3RSTlMxdACUjPeLAAAATElEQVR42u3SQQrAMAwDQSn7/z+XFExTcOxroN3zgC4STecApy1gpP2gBgZXQMwKwJ23QITYACLlQBC9gAFNwJMXoJhVc7lBA/gsuAArEgqPcT12VgAAAABJRU5ErkJggg=="}function decorateArc(){var context=getContext("arc");context.arc(20,20,16.3,2*Math.PI,0,1),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Arc",10,24),bindEvent(context,"Arc")}function decorateRect(){var context=getContext("rectangle");context.strokeRect(5,5,30,30),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Rect",8,24),bindEvent(context,"Rectangle")}function decorateQuadratic(){var context=getContext("quadratic-curve");context.moveTo(0,0),context.quadraticCurveTo(50,10,30,40),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("quad..",2,24),bindEvent(context,"QuadraticCurve")}function decorateBezier(){var context=getContext("bezier-curve"),x=0,y=4;context.moveTo(x,y),context.bezierCurveTo(x+86,y+16,x-45,y+24,x+48,y+34),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Bezier",10,8),bindEvent(context,"BezierCurve")}function tempStrokeTheLine(context,width,mx,my,lx,ly){context.beginPath(),context.lineWidth=width,context.moveTo(mx,my),context.lineTo(lx,ly),context.stroke()}function decorateLineWidth(){var context=getContext("line-width");tempStrokeTheLine(context,2,5,15,35,15),tempStrokeTheLine(context,3,5,20,35,20),tempStrokeTheLine(context,4,5,26,35,26),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Line",8,12),context.fillText("Width",6,38);var lineWidthContainer=find("line-width-container"),lineWidthText=find("line-width-text"),btnLineWidthDone=find("line-width-done"),canvas=(document.getElementsByTagName("h1")[0],context.canvas);addEvent(canvas,"click",function(){hideContainers(),lineWidthContainer.style.display="block",lineWidthContainer.style.top=canvas.offsetTop+1+"px",lineWidthContainer.style.left=canvas.offsetLeft+canvas.clientWidth+"px",lineWidthText.focus()}),addEvent(btnLineWidthDone,"click",function(){lineWidthContainer.style.display="none",lineWidth=lineWidthText.value})}function decorateColors(){var context=getContext("colors");context.fillStyle="red",context.fillRect(5,3,30,10),context.fillStyle="green",context.fillRect(5,15,30,10),context.fillStyle="blue",context.fillRect(5,27,30,10);var colorsContainer=find("colors-container"),strokeStyleText=find("stroke-style"),fillStyleText=find("fill-style"),btnColorsDone=find("colors-done"),canvas=(document.getElementsByTagName("h1")[0],context.canvas);addEvent(canvas,"click",function(){hideContainers(),colorsContainer.style.display="block",colorsContainer.style.top=canvas.offsetTop+1+"px",colorsContainer.style.left=canvas.offsetLeft+canvas.clientWidth+"px",strokeStyleText.focus()}),addEvent(btnColorsDone,"click",function(){colorsContainer.style.display="none",strokeStyle=strokeStyleText.value,fillStyle=fillStyleText.value})}function decorateAdditionalOptions(){var context=getContext("additional");context.fillStyle="#6c96c8",context.font="35px Verdana",context.fillText("»",10,27),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Extras!",2,38);var additionalContainer=find("additional-container"),btnAdditionalClose=find("additional-close"),canvas=(document.getElementsByTagName("h1")[0],context.canvas),globalAlphaSelect=find("globalAlpha-select"),globalCompositeOperationSelect=find("globalCompositeOperation-select");addEvent(canvas,"click",function(){hideContainers(),additionalContainer.style.display="block",additionalContainer.style.top=canvas.offsetTop+1+"px",additionalContainer.style.left=canvas.offsetLeft+canvas.clientWidth+"px"}),addEvent(btnAdditionalClose,"click",function(){additionalContainer.style.display="none",globalAlpha=globalAlphaSelect.value,globalCompositeOperation=globalCompositeOperationSelect.value,
lineCap=lineCapSelect.value,lineJoin=lineJoinSelect.value})}function btnDesignerPreviewClicked(){codeText.parentNode.style.display="none",optionsContainer.style.display="none",hideContainers(),endLastPath()}function btnCodePreviewClicked(){codeText.parentNode.style.display="block",optionsContainer.style.display="block",codeText.focus(),common.updateTextArea(),setHeightForCodeAndOptionsContainer(),hideContainers(),endLastPath()}function setHeightForCodeAndOptionsContainer(){codeText.style.width=innerWidth-optionsContainer.clientWidth-30+"px",codeText.style.height=innerHeight-40+"px",codeText.style.marginLeft=optionsContainer.clientWidth+"px",optionsContainer.style.height=innerHeight+"px"}var cache={},lineCapSelect=find("lineCap-select"),lineJoinSelect=find("lineJoin-select");find("tool-box").style.height=innerHeight+"px",!0===tools.dragSingle?decorateDragLastPath():document.getElementById("drag-last-path").style.display="none",!0===tools.dragMultiple?decorateDragAllPaths():document.getElementById("drag-all-paths").style.display="none",!0===tools.line?decorateLine():document.getElementById("line").style.display="none",!0===tools.arrow?decorateArrow():document.getElementById("arrow").style.display="none",!0===tools.zoom?(decoreZoomUp(),decoreZoomDown()):(document.getElementById("zoom-up").style.display="none",document.getElementById("zoom-down").style.display="none"),!0===tools.pencil?decoratePencil():document.getElementById("pencil-icon").style.display="none",!0===tools.marker?decorateMarker():document.getElementById("marker-icon").style.display="none",!0===tools.eraser?decorateEraser():document.getElementById("eraser-icon").style.display="none",!0===tools.text?decorateText():document.getElementById("text-icon").style.display="none",!0===tools.image?decorateImage():document.getElementById("image-icon").style.display="none",!0===tools.arc?decorateArc():document.getElementById("arc").style.display="none",!0===tools.rectangle?decorateRect():document.getElementById("rectangle").style.display="none",!0===tools.quadratic?decorateQuadratic():document.getElementById("quadratic-curve").style.display="none",!0===tools.bezier?decorateBezier():document.getElementById("bezier-curve").style.display="none",decorateLineWidth(),decorateColors(),decorateAdditionalOptions();var designPreview=find("design-preview"),codePreview=find("code-preview");window.selectBtn=function(btn,isSkipWebRTCMessage){codePreview.className=designPreview.className="",btn==designPreview?designPreview.className="preview-selected":codePreview.className="preview-selected",!isSkipWebRTCMessage&&window.connection&&connection.numberOfConnectedUsers>=1?connection.send({btnSelected:btn.id}):btn==designPreview?btnDesignerPreviewClicked():btnCodePreviewClicked()},addEvent(designPreview,"click",function(){selectBtn(designPreview),btnDesignerPreviewClicked()}),addEvent(codePreview,"click",function(){selectBtn(codePreview),btnCodePreviewClicked()});var codeText=find("code-text"),optionsContainer=find("options-container"),isAbsolute=find("is-absolute-points");addEvent(find("is-shorten-code"),"change",common.updateTextArea),addEvent(isAbsolute,"change",common.updateTextArea)}();var canvas=tempContext.canvas,isTouch="createTouch"in document;addEvent(canvas,isTouch?"touchstart mousedown":"mousedown",function(e){isTouch&&(e=e.pageX?e:e.touches.length?e.touches[0]:{pageX:0,pageY:0});var cache=is;cache.isLine?lineHandler.mousedown(e):cache.isArc?arcHandler.mousedown(e):cache.isRectangle?rectHandler.mousedown(e):cache.isQuadraticCurve?quadraticHandler.mousedown(e):cache.isBezierCurve?bezierHandler.mousedown(e):cache.isDragLastPath||cache.isDragAllPaths?dragHelper.mousedown(e):cache.isPencil?pencilHandler.mousedown(e):cache.isEraser?eraserHandler.mousedown(e):cache.isText?textHandler.mousedown(e):cache.isImage?imageHandler.mousedown(e):cache.isArrow?arrowHandler.mousedown(e):cache.isMarker&&markerHandler.mousedown(e),drawHelper.redraw(),preventStopEvent(e)}),addEvent(canvas,isTouch?"touchend touchcancel mouseup":"mouseup",function(e){isTouch&&(e=e.pageX?e:e.touches.length?e.touches[0]:{pageX:0,pageY:0});var cache=is;cache.isLine?lineHandler.mouseup(e):cache.isArc?arcHandler.mouseup(e):cache.isRectangle?rectHandler.mouseup(e):cache.isQuadraticCurve?quadraticHandler.mouseup(e):cache.isBezierCurve?bezierHandler.mouseup(e):cache.isDragLastPath||cache.isDragAllPaths?dragHelper.mouseup(e):cache.isPencil?pencilHandler.mouseup(e):cache.isEraser?eraserHandler.mouseup(e):cache.isText?textHandler.mouseup(e):cache.isImage?imageHandler.mouseup(e):cache.isArrow?arrowHandler.mouseup(e):cache.isMarker&&markerHandler.mouseup(e),drawHelper.redraw(),syncPoints(!(!is.isDragAllPaths&&!is.isDragLastPath)),preventStopEvent(e)}),addEvent(canvas,isTouch?"touchmove mousemove":"mousemove",function(e){isTouch&&(e=e.pageX?e:e.touches.length?e.touches[0]:{pageX:0,pageY:0});var cache=is;cache.isLine?lineHandler.mousemove(e):cache.isArc?arcHandler.mousemove(e):cache.isRectangle?rectHandler.mousemove(e):cache.isQuadraticCurve?quadraticHandler.mousemove(e):cache.isBezierCurve?bezierHandler.mousemove(e):cache.isDragLastPath||cache.isDragAllPaths?dragHelper.mousemove(e):cache.isPencil?pencilHandler.mousemove(e):cache.isEraser?eraserHandler.mousemove(e):cache.isText?textHandler.mousemove(e):cache.isImage?imageHandler.mousemove(e):cache.isArrow?arrowHandler.mousemove(e):cache.isMarker&&markerHandler.mousemove(e),preventStopEvent(e)});var keyCode;addEvent(document,"keydown",onkeydown),addEvent(document,"keyup",onkeyup),addEvent(document,"keypress",onkeypress),addEvent(document,"paste",onTextFromClipboard);var uid,lastPointIndex=0;window.addEventListener("message",function(event){if(event.data){if(uid||(uid=event.data.uid),event.data.captureStream)return void webrtcHandler.createOffer(function(sdp){sdp.uid=uid,window.parent.postMessage(sdp,"*")});if(event.data.sdp)return void webrtcHandler.setRemoteDescription(event.data);if(event.data.genDataURL){var dataURL=context.canvas.toDataURL(event.data.format,1);return void window.parent.postMessage({dataURL:dataURL,uid:uid},"*")}if(event.data.undo&&points.length){var index=event.data.index;if("all"===index)return points=[],drawHelper.redraw(),void syncPoints(!0);if(index.numberOfLastShapes){try{points.length-=index.numberOfLastShapes}catch(e){points=[]}return drawHelper.redraw(),void syncPoints(!0)}if(-1===index)return points.length=points.length-1,drawHelper.redraw(),void syncPoints(!0);if(points[index]){for(var newPoints=[],i=0;i<points.length;i++)i!==index&&newPoints.push(points[i]);points=newPoints,drawHelper.redraw(),syncPoints(!0)}}else{if(event.data.syncPoints)return void syncPoints(!0);if(event.data.canvasDesignerSyncData){var d=event.data.canvasDesignerSyncData;if(0!==d.startIndex)for(var i=0;i<d.points.length;i++)points[i+d.startIndex]=d.points[i];else points=d.points;lastPointIndex=points.length,drawHelper.redraw()}}}},!1);var webrtcHandler={createOffer:function(callback){var captureStream=document.getElementById("main-canvas").captureStream(15),peer=this.getPeer();peer.addStream(captureStream),peer.onicecandidate=function(event){event&&!event.candidate&&callback({sdp:peer.localDescription.sdp,type:peer.localDescription.type})},peer.createOffer(function(sdp){peer.setLocalDescription(sdp)},function(){},{mandatory:{OfferToReceiveAudio:!1,OfferToReceiveVideo:!1}})},setRemoteDescription:function(sdp){this.peer.setRemoteDescription(new RTCSessionDescription(sdp))},createAnswer:function(sdp,callback){var peer=this.getPeer();this.setRemoteDescription(sdp),peer.onicecandidate=function(event){event&&!event.candidate&&callback({sdp:peer.localDescription.sdp,type:peer.localDescription.type})},peer.createAnswer(function(sdp){peer.setLocalDescription(sdp)},function(){},{mandatory:{OfferToReceiveAudio:!1,OfferToReceiveVideo:!0}}),peer.onaddstream=function(event){callback(event)}},getPeer:function(){var WebRTC_Native_Peer=window.RTCPeerConnection||window.webkitRTCPeerConnection||window.mozRTCPeerConnection,peer=new WebRTC_Native_Peer(null);return this.peer=peer,peer}}}();