editor.js

String.prototype.twoDigits=function () {return this.replace(/^(.)$/,'0$1')}
var canvasToDataURL;
if (window.extension && extension.online) {
	var screenshot = chrome.extension.getBackgroundPage().screenshot;
}
else{
	screenshot={canvas:true}
}
var shadowDistance=5;
var imageURL,imageId;
if (!localStorage['lastTool']) localStorage['lastTool']='crop';
function editor_obj()
	{
	var theColor='#ff0000',lineWidth=2;
	var canvas,canvasOffset,$canvas,c,canvasData,$canvasData,czindex=5,startX,startY,points=[];
	var scrollBarWidth,scrollBarHeight;
	var scrollLeft,scrollTop;
	var tool={current:'line',status:'ready'};
	var clip={rx1:0,rx2:0,ry1:0,ry2:0};
	var cancel=false;
	var lastX,lastY;
	var firstImage;
	var hr;
	var onlineUrl;
	tool.free={};
	tool.highlight={};
	tool.spray={};
	tool.line={};
	tool.rectangle={};
	tool.full={};
	tool.arrow={};

	tool.star={}
	tool.house={}

	tool.ellipsis={};
	tool.crop={};
	tool.text={};
	tool.undo={};
	tool.redo={};

	var levels=[];
	var currentLevel,currentIndex=-1,maxIndex=-1;
	var imageChanged=true;

	function newLevel(inObj)
		{
		imageChanged=true;
		currentIndex++;
		maxIndex++;
		if (levels.length>currentIndex)
			{
			levels.slice(currentIndex);
			maxIndex=currentIndex;
			}
		if (!inObj) inObj={};
	    var newObject = jQuery.extend(true, {}, inObj);
		newObject.canvas=canvas;
		newObject.c=c;
		newObject=$.extend(true,newObject,clip);
		levels[currentIndex]=newObject;
		currentLevel=newObject;
		currentLevel.active=true;
		currentLevel.color=theColor;
		currentLevel.lineWidth=lineWidth;
//		c.strokeStyle=currentLevel.color;
//		c.fillStyle=currentLevel.color;
		resetButtons();
		return(newObject);
		}

	tool.undo.click=function ()
		{
		imageChanged=true;
		if(currentLevel.type=='delete')	{
			currentLevel.item.add(currentLevel.item.data('img')).fadeIn();
			currentLevel.item.data('deleted',false);
			currentLevel.hide=null;
			currentIndex--;
			currentLevel=levels[currentIndex];
		}
		else if (currentLevel.type=='crop')
			{
			currentIndex--;
			currentLevel=levels[currentIndex];
			if (currentIndex<0)
				{
				clip.rx1=clip.ry1=0;
				clip.ry2=$('#imgFixForLong').height();
				clip.rx2=$('#imgFixForLong').width();
				}
			else
				{
				currentLevel=levels[currentIndex];
				clip.rx1= currentLevel.rx1;
				clip.rx2= currentLevel.rx2;
				clip.ry1= currentLevel.ry1;
				clip.ry2= currentLevel.ry2;
				}
			onResize();
			}
		else
			{
			currentLevel.canvas.style.display='none';
			$(currentLevel.canvas).data('img').hide();
			currentIndex--
			currentLevel=levels[currentIndex];
			}
		changeTool('line');
		//$('canvas.tool:visible:last').hide();
		resetButtons();
		};
	tool.redo.click=function ()
		{
		imageChanged=true;
		currentIndex++;
		currentLevel=levels[currentIndex];
		if (currentLevel.type=='delete'){
			currentLevel.item.add(currentLevel.item.data('img')).fadeOut();
			currentLevel.item.data('deleted',true);
			currentLevel.hide=true;
		}
		else if (currentLevel.type=='crop')
			{
			clip.rx1=currentLevel.rx1;
			clip.rx2=currentLevel.rx2;
			clip.ry1=currentLevel.ry1;
			clip.ry2=currentLevel.ry2;
			onResize();
			}
		else
			{
			currentLevel.canvas.style.display='';
			$(currentLevel.canvas).data('img').show();
		}
		changeTool('line');
		resetButtons();
		};


	function createCanvas()
		{
		$canvas=$('<canvas class=tool style=position:relative></canvas>').appendTo($('#clipper')); //.data('clip-x1', clip.rx1).data('clip-y1', clip.ry1);
		if(true || addimg){
			var newImg= $('<img>').appendTo('#clipper') 
			$canvas.data('img',newImg );
		}

		canvas=$canvas[0];
		c=canvas.getContext('2d');
		canvas.width=$canvasData.width();
		canvas.height=$canvasData.height();
		$canvas.data('level',currentLevel);


		currentLevel.canvas=canvas
		currentLevel.c=c
		$canvas.add(newImg).css({'margin-left':-clip.rx1,'margin-top':-clip.ry1});
		$canvas.add(newImg).css( {position:'absolute','z-index':czindex++,left:0 ,'co':$canvasData.position().left,'top':0 ,'color':$canvasData.offset().top-scrollTop} );
		}
	function clipReload()
		{
		clip.rx1=0;
		clip.rx2=canvasData.width;
		clip.ry1=0;
		clip.ry2=canvasData.height;
		}
	this.createLastCanvas=function(todo,moreParams)
		{
		moreParams=moreParams || {}
		if (imageChanged!=localStorage['pngjpg'])
			{
			//$('#done_preview canvas').remove();
			var done=$('<canvas style=display:none; class=done></canvas>')[0];
			done.width=clip.rx2-clip.rx1;
			done.height=clip.ry2-clip.ry1;

			if($('#border1').hasClass('on')){
				done.width+=10;
				done.height+=10;
			}
			var ctx=done.getContext('2d');
			//ctx.drawImage(canvasData.toDataURL(),-clip.rx1,-clip.ry1);
			// var id=canvasData.getContext('2d').getImageData(clip.rx1,clip.ry1,clip.rx2,clip.ry2);
			// var id=canvasData.getContext('2d').getImageData(clip.rx1,clip.ry1,100,100);
			// ctx.putImageData(id,0,0);

			ctx.drawImage(   $('#imgFixForLong')[0],clip.rx1,clip.ry1,clip.rx2-clip.rx1, clip.ry2-clip.ry1 ,0,0,clip.rx2-clip.rx1, clip.ry2-clip.ry1 )

			for(var i=0;i<=currentIndex;i++)
				{
				if(cancel) {noMoreWait(); return;}
				var thisLevel=levels[i];
				thisLevel.canvasOffset={x:clip.rx1,y:clip.ry1};
				if (thisLevel.type!='crop' && thisLevel.type!='delete' && !thisLevel.hide)
				tool[thisLevel.type].draw({canvas:done,ctx:ctx,data:thisLevel});
				}
			imageChanged=localStorage['pngjpg'];
						if($('#border1').hasClass('on')){
			}
			if($('#border1').hasClass('on'))
				addBorderToCanvas(done);
			document.body.appendChild(done);
			if (localStorage['pngjpg']=='png')
				{
				canvasToDataURL=done.toDataURL();
				}
			else
				{
				canvasToDataURL=done.toDataURL('image/jpeg');
//				imageChanged=localStorage['pngjpg'];
//				je.encode ( ctx.getImageData(0,0,done.width,done.height),90,
//					function (y) {
//						canvasToDataURL=y;
//						createLastCanvas(todo);
//					}  ,true)
//				return;
				}
			}
		if(todo=='toolbar') {
			moreParams(canvasToDataURL);
			return
		}
		//chrome.extension.getBackgroundPage().lastCanvas={ height:canvas.height, width:canvas.width, data:canvasToDataURL};
		//$('#bug2')[canvasToDataURL.length>2000000 ? 'show' : 'hide']();
		//document.getElementById('done_preview').appendChild(this);
		//$('#reloadHelper2').unbind().click(function () {addCopyHelper.apply(canvas);});
		if(todo=='save')
			{
			noMoreWait();
			 if(!!window.webkitIntent && webkitIntent.action=='http://webintents.org/edit')
				 {
					webkitIntent.postResult(canvasToDataURL);
				 }

			else
				 {
				if(true){

					dataURItoBlob=function(dataURI) {
							var binary = atob(dataURI.split(',')[1]);
							var array = [];
							for(var i = 0; i < binary.length; i++) {
								array.push(binary.charCodeAt(i));
							}
							return new Blob([new Uint8Array(array)], {type: 'image/jpeg'})
								}
					x=dataURItoBlob(canvasToDataURL)
					url=URL.createObjectURL(x)

				var filename;
				filename=screenshot.title || screenshot.url;
				filename=filename.replace(/[%&\(\)\\\/\:\*\?\"\<\>\|\/\]]/g,' ');
				// filename+='-' + (new Date).getHours().toString().twoDigits() + (new Date).getMinutes().toString().twoDigits() + (new Date).getSeconds().toString().twoDigits()
				filename+=localStorage['pngjpg']=='png' ? '.png' : '.jpg';

				var evt = document.createEvent("MouseEvents");evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, true, false, false, 0, null);
				a=$('<a></a>').appendTo(document.body);
				a.attr({'href':url,'download':filename})[0].dispatchEvent(evt)
				imageChanged=false;
		//		im=$('<div><img /></div>').find('img').attr('src',url).end().dialog()

				}
				else{
				createFile(function (filename)
						{

						$('#topText').html('<a id=sss href="' + filename  + '">Click here to Open</a>');
		//				$('#topText').html('File Saved!');
						$('#save').add('#toGoogleDrive').add('#print').attr('disabled','');
		//				return true;
						var evt = document.createEvent("MouseEvents");evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, true, false, false, 0, null);
						document.getElementById("sss").dispatchEvent(evt)
						$('#save').add('#toGoogleDrive').add('#open').add('#print').attr('disabled','');
						if(localStorage['autosave']=='true') window.close()
						})
				}
						 }
			}
		if(todo=='share')
			{
			postImage(moreParams);
			}
		if(todo=='open')
			{
			var callback=function(filename)
				{
				window.open(filename,'_topopen')
				if(localStorage['autosave']=='true') window.close()
				}
			createFile(callback)
			$('#share').add('#save').add('#open').add('#print').attr('disabled','');

			}
		if(todo=='toGoogleDrive')
			{
			gDrive();
			imageChanged=true
			noMoreWait();
			}
		if(todo=='print')	{
			imageChanged=false
			$('#toPrintImage').one('load',
					function (){
					noMoreWait();
					if(canvasWidth<700)
						{
						this.width=canvasWidth;
						$(this).css('width','');
						}
					else
						{
						this.width=null;
						$(this).css('width','100%');
						}
					window.print()
					});
			$('#toPrintImage')[0].src=canvasToDataURL;
			}
		}

	this.reloadCanvas=function()
		{
		if(screenshot.url) $('title').html(screenshot.url);
		//document.getElementById('divCanvasData').appendChild(canvasData);
		clipReload();
		onResize();
		//editor.reloadCanvas();
		resetButtons();
		$('#toolbar .button[tag=' + localStorage['lastTool'] + ']').trigger('click');
		}

	this.init=function()
		{

		$("#wColorPicker2_3").wColorPicker({
			theme: "blue",
			mode: "hover",
			showSpeed: 300,
			hideSpeed: 300,
			buttonSize: 26,
			initColor:localStorage['color'] || '#FF0000',
			onSelect:function (a) {
				localStorage['color']=a;
				theColor=a;
			}
		}).on('mousedown',function (e) {e.stopPropagation(); return false});;

		//Dragable and deleteable
		(function(){
		var notRemove=false;
		var myInt;
		var	$this;
		$('#divCanvasData').on('mousemove',function (e) {
			if(tool.status!='ready' && tool.current!='text') {
        return;
      }

      var pos = $('#divCanvasData').position();
      $('canvas').each(function (key, canvas) {
        if (key < 2) {
          return ;
        }
				var cc=$(canvas);
				gc=cc[0].getContext('2d');
				x=e.offsetX + e.target.offsetLeft - cc.position().left+clip.rx1;
				y=e.offsetY + e.target.offsetTop - cc.position().top+clip.ry1;
				var doIt=false;

				if (x>0 && y>0 && x < canvas.width && y < canvas.height && canvas.style.display != "none")	{
					id=gc.getImageData(x,y,1,1).data;
					doIt=0
					for(var i=0;i<4;i++){
						if (id[i]!=0){
							doIt=true;
						}
					}
				}
				if (!doIt) {
          return ;
        }
        cc.css({border:'2px dahed gray'});
        var tcc=cc;



        var closeFn = cc.data('close') || function() {
          tcc.css({border:'none'});
          cc.data('myClose').remove();
          cc.data('myClose', false);
          cc.data('close', false);
        };
        clearTimeout(cc.data('time'));
        var a = setTimeout(closeFn, 3000);
        cc.data('close', closeFn);
        cc.data('time', a);
        if (cc.data('myClose')) {
          return false;
        }
        var $myClose = $('<div class="myClose">&times;</div>').css({
          left:cc.position().left+cc.width()-10-clip.rx1
          ,top:cc.position().top-clip.ry1
          ,zIndex:1000
        });
        $myClose = $myClose.appendTo('#divCanvasData').click(function (e){
          e.stopImmediatePropagation();
          tcc.add(tcc.data('img')).fadeOut();
          $myClose.remove();
        }).mousedown(function (e) {
          e.stopImmediatePropagation();
          newLevel();
          currentLevel.type='delete';
          currentLevel.item=tcc;
          tcc.data('deleted', true);
          tcc.data('level').hide=true
        });

        if ($myClose.position().left>clip.rx2-clip.rx1) {
          $myClose.css('left', clip.rx2-clip.rx1-30);
        }
        if ($myClose.position().top<0) {
          $myClose.css('top', 0);
        }
        cc.data('myClose', $myClose);
        return false;
			});
		});
		$('anvas.tool').on('mousemove',
			function (e) {
				$this=$(this);
//				console.log(e.offsetX,e.offsetY,e)
				x=e.offsetX;
				y=e.offsetY;
				doIt=false;
				for(var i=0;i<4;i++)
					{
					if ($this[0].getContext('2d').getImageData(x,y,x,y).data[i]!=0)
						{
						doIt=true;
						}
					}
				if(!doIt) return;
				$('.myBorder').remove(0);
				if (tool.status=='started') return;
				myBorder=$("<div class=myBorder style='position:relative;border:1px dashed 00eeff;z-index:1000;ursor:move'><div style=position:absolute;width:10;height:10;top:0;right:0;cursor:pointer>X</div></div>").appendTo('#divCanvasData')
				myBorder.css({
					left: $(this).position().left +  $('#divCanvasData').scrollLeft()
					,top: $(this).position().top +  $('#divCanvasData').scrollTop()
					,width:$(this).width()
					,height:$(this).height()
//					,zIndex:this.style.zIndex-1
					})
				myBorder.mouseleave(function()
					{
					//	console.log(e);
					myBorder.remove();
					});

				myBorder.click(function()
					{
					$this.remove();
					myBorder.remove();
					})
				$('div',myBorder).mouseenter(
						function (){tool.status='moving'}
						)
				});
		})()




		canvasData=document.getElementById('canvasId');
		$canvasData=$(canvasData);
		binds();
		resetButtons();
		if(screenshot.webcam){
			editor.webcam=true;
			ctx=$('canvas')[0].getContext('2d')
			canvas=$('canvas')[0];
			img=$('<img />')[0];
			img.onload=function (){
				canvas.width=this.width
				canvas.height=this.height
				firstImage=this;
				ctx.drawImage(this,0,0)
				editor.reloadCanvas();
        screenshot.webcam=null;
			}
			img.src=screenshot.webcam
		}
		if(screenshot.apppick){
			editor.apppick=true;
			ctx=$('canvas')[0].getContext('2d')
			canvas=$('canvas')[0];
			img=$('<img />')[0];
			img.onload=function (){
				canvas.width=this.width
				canvas.height=this.height
				firstImage=this;
				ctx.drawImage(this,0,0)
				editor.reloadCanvas();
				screenshot.apppick=null;
			}
			img.src=screenshot.apppick
		}

		if(location.hash=='#last' && screenshot.canvas)
		{
		canvas=$('canvas')[1];
					img=$('#imgFixForLong')[0];
					img.onload=function (){
						canvas.width=this.width
						canvas.height=this.height
						firstImage=this
						canvas.getContext('2d').drawImage(this,0,0)
						// $(this).css({
						// 	width:this.width,
						// 	height:this.height
						// })
						editor.reloadCanvas();
					}
					try{
					img.src=screenshot.canvas.toDataURL()
						}
						catch(sdfsdf) {return}
					screenshot.callback=null
					delete screenshot.callback
					screenshot.canvas.width=screenshot.canvas.height=1
					screenshot.callback=null
					screenshot.canvas.remove()
					screenshot.canvas=null
					delete screenshot.canvas
		}

		 if(!!window.webkitIntent) {
			ctx=$('canvas')[0].getContext('2d')
			canvas=$('canvas')[0];
			img=$('<img />')[0];
			editor.intent=true;
			img.onload=function (){
				canvas.width=this.width
				canvas.height=this.height
				firstImage=this
				ctx.drawImage(this,0,0)
				editor.reloadCanvas();
			}
			img.src=webkitIntent.data
			if(webkitIntent.action=='http://webintents.org/share' || webkitIntent.action=='http://webintents.org/save' )	 {
				$('#share').trigger('click');
			}
		}


//		if (extension.mac) $('#save').hide();
		}
//**********Text
	tool.text.begin=function (e)
		{
		tool.status='started';
		startX=e.x;
		startY=e.y;
		$('#text_helper').remove();
		$('<div id=text_helper style="position:absolute;border:none">adf</div>').appendTo('#divCanvasData');
		x1=startX;y1=startY;
		x2=e.x;y2=e.y;
		if (x1<x2) {rx1=x1;rx2=x2;} else {rx1=x2;rx2=x1;}
		if (y1<y2) {ry1=y1;ry2=y2;} else {ry1=y2;ry2=y1;}

		$('#text_helper')
		.css({'z-index':10000,
			left:-clip.rx1+rx1-8, //+$canvasData.offset().left,
			top:-clip.ry1+ry1-8, //+$canvasData.offset().top,
			height:clip.ry2-startY
			,width:clip.rx2-startX
		})
		b=['left','top','z-index','width','height','position','font-weight','width','fontWeight'];
		var ta=$('<textarea></textarea>');
		for (i in b)
			{
			ta.css(b[i], $('#text_helper').css(b[i])  );
			}
		ta.css(
			{'background-color':'transparent',
			padding:0,
			margin:0,
			border:'none',
			color:theColor,
			'font-size':'15pt',
			'font-weight':'400'
			});
		ta.mousedown(function  (e) {e.stopImmediatePropagation(); })
		ta.appendTo('#divCanvasData').focus();
		$('#text_helper').remove();
		ta.blur(tool.text.finish);
		};
	tool.text.finish=function ()
		{
		newLevel();
		createCanvas();
		currentLevel.type='text';
		a={
			text:$('textarea').val(),
			font: $('textarea').css('font-size')+ ' ' + $('textarea').css('font-family'),
			'font-size':$('textarea').css('font-size'),
			'font-weight':$('textarea').css('font-weight'),
			lineHeight:$('textarea').css('line-height'),
			width:$('textarea').css('width'),
			x: startX, y:startY,
			direction:$('textarea').css('direction')
		};
		currentLevel=$.extend(currentLevel,a);
		$('textarea').remove();
		tool[tool.current].draw({canvas:canvas,ctx:c,data:currentLevel},'toolcreate');
		tool.status='ready'; $('textarea').unbind('blur');
		};
	tool.text.draw=function(inX,toolcreate)
		{
		inX.ctx.textBaseline='top';
		inX.ctx.strokeStyle=inX.data.color;
		inX.ctx.fillStyle=inX.data.color;
		inX.ctx.font=inX.data.font;
		lineHeight=		inX.ctx.font=parseInt(inX.data['font-size']);
		var lines = inX.data.text.split("\n");
		check=multiFillText(inX.canvas,inX.data.text,null,null,parseInt(lineHeight),parseInt(inX.data.width))
		if(toolcreate)
			{
			enlargeCanvas(inX.canvas,inX.data.x,inX.data.y,10000,10000);
			inX.canvas.width=check.width
			inX.canvas.height=check.height+10
			}

		inX.ctx.textBaseline='top';
		inX.ctx.strokeStyle=inX.data.color;
		inX.ctx.fillStyle=inX.data.color;
		inX.ctx.font=inX.data.font;

//		var multiFillText = function(canvas,text, x, y, lineHeight, fitWidth) {
		context=inX.ctx;
		 context.shadowColor = "black";
		 context.shadowBlur = 0;
		 context.shadowOffsetX = 0;
		 context.shadowOffsetY = 0;
		multiFillText(inX.canvas,inX.data.text,toolcreate? 0:inX.data.x-clip.rx1 ,toolcreate?0:inX.data.y-clip.ry1,parseInt(lineHeight),parseInt(inX.data.width))
		context.shadowOffsetX = 0;
		context.shadowOffsetY = 0;
		context.shadowBlur = 0;
		updateImgFromCanvas();
//		for (a=0; a<lines.length; a++) {
//				inX.ctx.fillStyle='000';
//				inX.ctx.globalAlpha='0.2'
//				inX.ctx.fillText(lines[a],+2, +2+ parseInt(lineHeight)*(a));
//				inX.ctx.globalAlpha='1'
//				inX.ctx.strokeStyle=inX.data.color;
//				inX.ctx.fillStyle=inX.data.color;
//				inX.ctx.fillText(lines[a], 0,  + parseInt(lineHeight)*(a));
//				}

		};
//********crop
	tool.crop.begin=function  (e)
		{
		tool.status='started';
		startX=e.x;
		startY=e.y;
		};
	tool.crop.click=function()
		{
		//clipReload();
		onResize();
		};
	tool.crop.up=function ()
		{
			// currentLevel.type='crop';
		if( ry2-ry1 + rx2-rx1<100) {
			tool.crop.draw()
			return
		}
		clip.rx1=rx1;
		clip.rx2=rx2;
		clip.ry1=ry1;
		clip.ry2=ry2;
		newLevel();
		currentLevel.type='crop';
		tool.crop.draw()
		}
	tool.crop.draw=function (inX)
		{
//		clip.rx1=rx1;
//		clip.rx2=rx2;
//		clip.ry1=ry1;
//		clip.ry2=ry2;
		$('#crop_helper').remove();
//		$('#divCanvasData').css({'width':x2-x1,height:y2-y1})
		onResize();
		$('#divCanvasData').scrollTop(0).scrollLeft(0);
		tool.status='ready';
		//$('#toolbar .button[tag=line]').trigger('click');
		//tool.current='line';
		resetButtons();
		};
	tool.crop.move=function (e)
		{
		x1=startX; y1=startY;
		x2=e.x; y2=e.y;
		if(  $('#divCanvasData').scrollTop() + $('#divCanvasData').height() - e.y < 35){
			$('#divCanvasData')[0].scrollTop+=30;
			e.y+=30;
		}
		if(  $('#divCanvasData').scrollLeft() + $('#divCanvasData').width() - e.x < 35){
			$('#divCanvasData')[0].scrollLeft+=30;
			e.x+=30;
		}
		if(    e.y  - $('#divCanvasData').scrollTop() < 35){
			$('#divCanvasData')[0].scrollTop-=30;
			e.y-=30;
		}
		if(    e.x  - $('#divCanvasData').scrollLeft() < 35){
			$('#divCanvasData')[0].scrollLeft-=30;
			e.x-=30;
		}

		if (x1<x2) {rx1=x1;rx2=x2;} else {rx1=x2;rx2=x1;}
		if (y1<y2) {ry1=y1;ry2=y2;} else {ry1=y2;ry2=y1;}
		$('#crop_helper').remove();
		$('<div id=crop_helper><div id=crop_helper_bottom></div><div id=crop_helper_left></div><div id=crop_helper_top></div><div id=crop_helper_right></div></div>').appendTo('#divCanvasData');
		$('#crop_helper *').css({
				'background-color':'blue',
				'opacity':'0.6',
				'position':'absolute',
				'z-index':10000
				});
		$('#crop_helper_left').css({'ackground-color':'blue',
				left: 0,top:$canvasData.position().top,top:0,
				width:rx1-clip.rx1,height:$canvasData.height()+scrollTop
				});
		$('#crop_helper_top').css({'ackground-color':'red',
				left: rx1-clip.rx1,top:0,
				width:clip.rx2-(rx1-clip.rx1),height:ry1-clip.ry1
				});
		$('#crop_helper_bottom').css({'ackground-color':'yellow',
				left: rx1-clip.rx1,top:ry2-clip.ry1,
				width:clip.rx2-(rx1-clip.rx1),height:clip.ry2-ry2
				});
		$('#crop_helper_right').css({'ackground-color':'green',
				left: rx2-clip.rx1,top:ry1-clip.ry1,
				width:clip.rx2-(rx2-clip.rx1),height:ry2-ry1
				});
		};

	function pos(e) {
		ans ={x:clip.rx1+e.pageX-$('#divCanvasData').offset().left+$('#divCanvasData').scrollLeft(), y:clip.ry1+e.pageY-$('#divCanvasData').offset().top+$('#divCanvasData').scrollTop()};
		if (ans.x<0  || ans.y<0) return (false);
		if (e.pageX> $('#divCanvasData').offset().left+$('#divCanvasData').width()-scrollBarWidth ) return(false);
		if (e.pageY> $('#divCanvasData').offset().top+$('#divCanvasData').height()-scrollBarHeight ) return(false);
		if (e.pageX< $('#divCanvasData').offset().left ) return(false);
		if (e.pageY< $('#divCanvasData').offset().top ) return(false);
		return (ans);
		}

	function canvasAutoResize(e,dif)
		{
		ans=getMinMax();
		$canvas.css({left:ans.x1-dif,top:ans.y1-dif});
		canvas.width=ans.x2-ans.x1+dif*2;
		canvas.height=ans.y2-ans.y1+dif*2;
		c.moveTo(points[0].x-ans.x1,points[0].y-ans.y1);
		return({x1:ans.x1-dif,x2:ans.x2+dif,y1:ans.y1-dif,y2:ans.y2+dif,w:x2-x1,h:y2-y1});
		}
	function getMinMax(points)
		{
		x1=y1=65535;
		x2=y2=0;
		$.each(points,function (a,b)
			{
			if (b.x<x1) x1=b.x;
			if (b.x>x2) x2=b.x;
			if (b.y<y1) y1=b.y;
			if (b.y>y2) y2=b.y;
			});
		return ({x1:x1,x2:x2,y1:y1,y2:y2});
		}
//**********Spray
	tool.spray.begin=function (e)
		{
		tool.status="started";
		newLevel();
		createCanvas();
		currentLevel.type='spray';
		currentLevel.points=[];
		tool.spray.move(e);
		};
	tool.spray.move=function(e)
		{
		for(var j=c.lineWidth*35; j>0; j--) {
			var rndx = e.x + Math.round(Math.random()*(c.lineWidth*15)-(c.lineWidth*2));
			var rndy = e.y+ Math.round(Math.random()*(c.lineWidth*15)-(c.lineWidth*2));
			currentLevel.points.push({x:rndx, y:rndy});
			}
		ans=getMinMax(currentLevel.points);
		enlargeCanvas(canvas,ans.x1,ans.y1,ans.x2,ans.y2);
		tool[tool.current].draw({canvas:canvas,ctx:c,data:currentLevel});
		};
	tool.spray.draw=function (inX)
		{

//		id=inX.ctx.createImageData(inX.canvas.width,inX.canvas.height);
		id=inX.ctx.getImageData(0,0,inX.canvas.width,inX.canvas.height);
		pix=id.data;
		for(var i=0;i<inX.data.points.length;i++)
			{
			thisPoint= parseInt(inX.data.points[i].y-inX.data.canvasOffset.y-1)* inX.canvas.width*4;
			thisPoint+=parseInt(inX.data.points[i].x-inX.data.canvasOffset.x)*4;

			pix[thisPoint]=parseInt(inX.data.color.slice(4,-1).split(',')[0]);
			pix[thisPoint+1]=parseInt(inX.data.color.slice(4,-1).split(',')[1]);
			pix[thisPoint+2]=parseInt(inX.data.color.slice(4,-1).split(',')[2]);	
	}
		var id=inX.ctx.getImageData(0,0,inX.canvas.width,inX.canvas.height);
		var pix=id.data;
		var thisPoint;

		var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(inX.data.color);
		var colors = [
			parseInt(rgb[1], 16),
			parseInt(rgb[2], 16),
			parseInt(rgb[3], 16)
		];
		for(var i=0;i<inX.data.points.length;i++) {
			thisPoint= parseInt(inX.data.points[i].y-inX.data.canvasOffset.y-10)* inX.canvas.width*4;
			thisPoint+=parseInt(inX.data.points[i].x-inX.data.canvasOffset.x-10)*4;

			pix[thisPoint]=colors[0];
			pix[thisPoint+1]=colors[1];
			pix[thisPoint+2]=colors[2];
			pix[thisPoint+3]=255;
		}
		inX.ctx.putImageData(id,0,0);
		updateImgFromCanvas();
	};
	tool.spray.up=function (){tool.status='ready';};
////    Free
	tool.free.up=function (){tool.status='ready';};
	tool.free.begin=function (e)
		{
		tool.status="started";
		newLevel();
		createCanvas();
		currentLevel.type='free';
		currentLevel.points=[];
		tool.free.move(e);
		};
	tool.free.move=function(e)
		{
		currentLevel.points.push({x:e.x,y:e.y});
//		ans=canvasAutoResize(e,2);
		canvas.height=canvas.height+1;
		canvas.height=canvas.height-1;
		ans=getMinMax(currentLevel.points);
		enlargeCanvas(canvas,ans.x1,ans.y1,ans.x2,ans.y2);
		tool[tool.current].draw({canvas:canvas,ctx:c,data:currentLevel});
		};
	tool.free.draw=function(inX)
		{
		context=inX.ctx
		context.shadowBlur = 5;
		context.shadowOffsetX = 5;
		context.shadowOffsetY = 5;
		context.lineWidth=inX.data.lineWidth;

		// inX.ctx.beginPath();
		// inX.ctx.lineWidth=inX.data.lineWidth;

		// inX.ctx.strokeStyle='00';
		// inX.ctx.fillStyle='000';
		// inX.ctx.globalAlpha=0.3;
		// for(var i=1;i<inX.data.points.length;i++)
		// {
		// 	inX.ctx.lineTo(inX.data.points[i].x -inX.data.canvasOffset.x+shadowDistance  ,inX.data.points[i].y -inX.data.canvasOffset.y+shadowDistance);
		// };
		// inX.ctx.stroke();
		// inX.ctx.closePath();
		inX.ctx.beginPath();
		inX.ctx.strokeStyle=inX.data.color;
		inX.ctx.globalAlpha=1;
		inX.ctx.fillStyle=inX.data.color;
		for(var i=1;i<inX.data.points.length;i++)
			{
			inX.ctx.lineTo(inX.data.points[i].x -inX.data.canvasOffset.x  ,inX.data.points[i].y -inX.data.canvasOffset.y);
			};

		inX.ctx.stroke();
		inX.ctx.closePath();

		context.shadowOffsetX = 0;
		context.shadowOffsetY = 0;
		context.shadowBlur = 0;
		updateImgFromCanvas();
		};

		////    highlight
			tool.highlight.up=function (){tool.status='ready';};
			tool.highlight.begin=function (e)
				{
				tool.status="started";
				newLevel();
				createCanvas();
				currentLevel.type='highlight';
				currentLevel.points=[];
				tool.highlight.move(e);
				};
			tool.highlight.move=function(e)
				{
				currentLevel.points.push({x:e.x,y:e.y});
		//		ans=canvasAutoResize(e,2);
				canvas.height=canvas.height+1;
				canvas.height=canvas.height-1;
				ans=getMinMax(currentLevel.points);
				enlargeCanvas(canvas,ans.x1,ans.y1,ans.x2,ans.y2);
				tool[tool.current].draw({canvas:canvas,ctx:c,data:currentLevel});
				};
			tool.highlight.draw=function(inX)
				{
				context=inX.ctx
				context.shadowBlur = 5;
				context.shadowOffsetX = 5;
				context.shadowOffsetY = 5;
				context.globalAlpha=0.45
				inX.ctx.lineWidth=20;

				// inX.ctx.beginPath();
				// inX.ctx.lineWidth=inX.data.lineWidth;

				// inX.ctx.strokeStyle='00';
				// inX.ctx.fillStyle='000';
				// inX.ctx.globalAlpha=0.3;
				// for(var i=1;i<inX.data.points.length;i++)
				// {
				// 	inX.ctx.lineTo(inX.data.points[i].x -inX.data.canvasOffset.x+shadowDistance  ,inX.data.points[i].y -inX.data.canvasOffset.y+shadowDistance);
				// };
				// inX.ctx.stroke();
				// inX.ctx.closePath();
				inX.ctx.beginPath();
				inX.ctx.strokeStyle=inX.data.color;
				inX.ctx.fillStyle=inX.data.color;
				for(var i=1;i<inX.data.points.length;i++)
					{
					inX.ctx.lineTo(inX.data.points[i].x -inX.data.canvasOffset.x  ,inX.data.points[i].y -inX.data.canvasOffset.y);
					};

				inX.ctx.stroke();
				inX.ctx.closePath();

				context.shadowOffsetX = 0;
				context.shadowOffsetY = 0;
				context.shadowBlur = 0;
				updateImgFromCanvas();
				};		
	//line
	tool.line.begin=function (e)
		{
		tool.status="started";
		newLevel();
		createCanvas();
		currentLevel.type='line';
		currentLevel.start={x:e.x,	y:e.y};
		};
	tool.line.move=function(e)
		{
		currentLevel.end={x:e.x,y:e.y};
		canvas.height=canvas.height+1;
		canvas.height=canvas.height-1;
		enlargeCanvas(canvas,currentLevel.start.x,currentLevel.start.y,currentLevel.end.x,currentLevel.end.y);
		tool[tool.current].draw({canvas:canvas,ctx:c,data:currentLevel});
		};
	tool.line.draw=function(inX)
		{
		if (! (inX.data.start && inX.data.end)) return;
		inX.ctx.beginPath();
		inX.ctx.strokeStyle=inX.data.color;
		inX.ctx.fillStyle=inX.data.color;
		inX.ctx.lineWidth=inX.data.lineWidth;
		 drawLine=function(x1,y1,x2,y2,shadow)
			{
			inX.ctx.lineWidth=inX.data.lineWidth;
			if(shadow)
				{
				inX.ctx.strokeStyle='000';
				inX.ctx.globalAlpha=0.2;
				}
			else
				{
				drawLine(x1+shadowDistance,y1+shadowDistance,x2+shadowDistance,y2+shadowDistance,true)
				inX.ctx.strokeStyle=inX.data.color;
				inX.ctx.fillStyle=inX.data.color;
				inX.ctx.globalAlpha=1;
				}
			inX.ctx.beginPath();
			inX.ctx.moveTo(x1,y1);
			inX.ctx.lineTo(x2,y2);
			inX.ctx.stroke();
			inX.ctx.closePath();
			}
				context=inX.ctx
		context.shadowBlur = 5;
		context.shadowOffsetX = 5;
		context.shadowOffsetY = 5;
		drawLine(inX.data.start.x  -inX.data.canvasOffset.x  ,inX.data.start.y -inX.data.canvasOffset.y,
				inX.data.end.x    -inX.data.canvasOffset.x,inX.data.end.y     -inX.data.canvasOffset.y);
		inX.ctx.lineCap='round';
		inX.ctx.stroke();
		inX.ctx.closePath();
				context=inX.ctx
		context.shadowBlur = 0;
		context.shadowOffsetX = 0;
		context.shadowOffsetY = 0;
		updateImgFromCanvas();
		};
	tool.line.up=function () {tool.status='ready';};
	//ellipsis
	var baseElippsimDim=30
	tool.ellipsis.begin=function (e)
		{
		tool.status="started";
		newLevel();
		createCanvas();
		e.x-=baseElippsimDim/2
		e.y-=baseElippsimDim/2
		currentLevel.type='ellipsis';
		currentLevel.start={x:e.x,	y:e.y};
		currentLevel.end={x:e.x+baseElippsimDim,	y:e.y+baseElippsimDim};
		tool.ellipsis.move({x:e.x+baseElippsimDim,y:e.y+baseElippsimDim});
		};

	tool.ellipsis.move=function(e)
		{
		currentLevel.end={x:e.x,y:e.y};
		canvas.height=canvas.height+1;
		canvas.height=canvas.height-1;		
		enlargeCanvas(canvas,currentLevel.start.x,currentLevel.start.y,currentLevel.end.x,currentLevel.end.y);

		tool[tool.current].draw({canvas:canvas,ctx:c,data:currentLevel});
		};
	tool.ellipsis.draw=function(inX)
		{
		if (! (inX.data.start && inX.data.end)) return;
		inX.ctx.beginPath();
		inX.ctx.strokeStyle=inX.data.color;
		inX.ctx.fillStyle=inX.data.color;
		inX.ctx.ellipsisWidth=inX.data.ellipsisWidth;
		 drawEllipsis=function(x1,y1,x2,y2,shadow)
			{
			inX.ctx.lineWidth=inX.data.lineWidth;
			if(shadow)
				{
				return
				inX.ctx.strokeStyle='000';
				inX.ctx.globalAlpha=0.2;
				}
			else
				{
				drawEllipsis(x1+shadowDistance,y1+shadowDistance,x2+shadowDistance,y2+shadowDistance,true)
				inX.ctx.strokeStyle=inX.data.color;
				inX.ctx.fillStyle=inX.data.color;
				inX.ctx.globalAlpha=1;
				}
			inX.ctx.beginPath();

				var KAPPA = 4 * ((Math.sqrt(2) -1) / 3);

				var rx = (x2-x1)/2;
				var ry = (y2-y1)/2;

				var cx = x1+rx;
				var cy = y1+ry;
				var trg=inX.ctx;

				trg.beginPath();
				trg.moveTo(cx, cy - ry);
				trg.bezierCurveTo(cx + (KAPPA * rx), cy - ry,  cx + rx, cy - (KAPPA * ry), cx + rx, cy);
				trg.bezierCurveTo(cx + rx, cy + (KAPPA * ry), cx + (KAPPA * rx), cy + ry, cx, cy + ry);
				trg.bezierCurveTo(cx - (KAPPA * rx), cy + ry, cx - rx, cy + (KAPPA * ry), cx - rx, cy);
				trg.bezierCurveTo(cx - rx, cy - (KAPPA * ry), cx - (KAPPA * rx), cy - ry, cx, cy - ry);

			inX.ctx.stroke();
			inX.ctx.closePath();
			}
		drawEllipsis(inX.data.start.x  -inX.data.canvasOffset.x  ,inX.data.start.y -inX.data.canvasOffset.y,
				inX.data.end.x    -inX.data.canvasOffset.x,inX.data.end.y     -inX.data.canvasOffset.y);
		inX.ctx.ellipsisCap='round';
		inX.ctx.stroke();
		inX.ctx.closePath();
		updateImgFromCanvas();
		};
	tool.ellipsis.up=function () {tool.status='ready';};
	//Rectangle

	var baseRectDim=30
	tool.rectangle.begin=function (e)
		{
		tool.status="started";
		newLevel();
		createCanvas();

		e.x-=baseRectDim/2
		e.y-=baseRectDim/2
		currentLevel.type='rectangle';
		currentLevel.start={x:e.x+15,	y:e.y+15};
		currentLevel.end={x:e.x+baseRectDim,	y:e.y+baseRectDim};
		tool.rectangle.move({x:e.x+baseRectDim,y:e.y+baseRectDim});
		
		};
	tool.rectangle.move=function(e)
		{
		currentLevel.end={x:e.x,y:e.y};
		canvas.height=canvas.height+1;
		canvas.height=canvas.height-1;
		enlargeCanvas(canvas,currentLevel.start.x,currentLevel.start.y,currentLevel.end.x,currentLevel.end.y);
		tool[tool.current].draw({canvas:canvas,ctx:c,data:currentLevel});
		};
	tool.rectangle.draw=function(inX)
		{
		if (! (inX.data.start && inX.data.end)) return;

		function drawRect(x1,y1,x2,y2,shadow)
			{
			inX.ctx.lineWidth=inX.data.lineWidth;
			if(shadow)
				{
				return
				inX.ctx.strokeStyle='000';
				inX.ctx.globalAlpha=0.2;
				}
			else
				{
				drawRect(x1+shadowDistance,y1+shadowDistance,x2+shadowDistance,y2+shadowDistance,true)
				inX.ctx.strokeStyle=inX.data.color;
				inX.ctx.fillStyle=inX.data.color;
				inX.ctx.globalAlpha=1;
				}
			inX.ctx.beginPath();
			inX.ctx.moveTo(x1,y1);
			inX.ctx.lineTo(x1,y2);
			inX.ctx.lineTo(x2,y2);
			inX.ctx.lineTo(x2,y1);
			inX.ctx.lineTo(x1,y1);
			if(inX.data.type=='full')
				inX.ctx.fill()
			else
				inX.ctx.stroke();
			inX.ctx.closePath();
			}
				context=inX.ctx
		context.shadowBlur = 5;
		context.shadowOffsetX = 5;
		context.shadowOffsetY = 5;
		drawRect(inX.data.start.x  -inX.data.canvasOffset.x  ,inX.data.start.y -inX.data.canvasOffset.y,
				inX.data.end.x    -inX.data.canvasOffset.x,inX.data.end.y     -inX.data.canvasOffset.y);
				context=inX.ctx
		context.shadowBlur = 0;
		context.shadowOffsetX = 0;
		context.shadowOffsetY = 0;
		inX.ctx.lineCap='round';
		updateImgFromCanvas()


		};

	function updateImgFromCanvas(){		
		var $i=$(canvas).data('img');
		var $t=$(canvas);
		$i.css({
			'marginTop':$t.css('marginTop'),
			'marginLeft':$t.css('marginLeft'),
			'position':'absolute',
			'left': $t.css('left'),
			'top': $t.css('top'),
			'width': $t.css('width'),
			'height': $t.css('height')
		});
		$i.attr('src', canvas.toDataURL())
	}

	tool.rectangle.up=function () {tool.status='ready';};

	//Full
	tool.full.begin=function (e)
		{
		tool.status="started";
		newLevel();
		createCanvas();
		currentLevel.type='full';
		e.x-=baseRectDim/2
		e.y-=baseRectDim/2
		currentLevel.start={x:e.x+15,	y:e.y+15};
		currentLevel.end={x:e.x+baseRectDim,	y:e.y+baseRectDim};
		tool.full.move({x:e.x+baseRectDim,y:e.y+baseRectDim});
		}
	tool.full.move=tool.rectangle.move;
	tool.full.draw=tool.rectangle.draw
	tool.full.up=tool.rectangle.up;

	//Star
	var baseStarDim=15
	tool.star.begin=function (e)
		{

		tool.status="started";
		newLevel();
		createCanvas();
		currentLevel.type='star';
		currentLevel.start={x:e.x-baseStarDim+15,	y:e.y-baseStarDim+15};
		currentLevel.end={x:e.x+baseStarDim,	y:e.y+baseStarDim};
		tool.star.move(e);
		};
	tool.star.move=function(e)
		{
		currentLevel.end={x:e.x,y:e.y};
		canvas.height=canvas.height+1;
		canvas.height=canvas.height-1;
		enlargeCanvas(	canvas,
			currentLevel.start.x - (currentLevel.end.x - currentLevel.start.x)/2
			,currentLevel.start.y - (currentLevel.end.y - currentLevel.start.y)/2
			,currentLevel.end.x + (currentLevel.end.x - currentLevel.start.x )*2
			,currentLevel.end.y +  (currentLevel.end.y - currentLevel.start.y)*2
		);
		tool[tool.current].draw({canvas:canvas,ctx:c,data:currentLevel});
		};
	tool.star.draw=function(inX)
		{
		if (! (inX.data.start && inX.data.end)) return;

		function drawstar(x1,y1,x2,y2,shadow)
			{
			inX.ctx.lineWidth=inX.data.lineWidth;
			inX.ctx.strokeStyle=inX.data.color;
			inX.ctx.fillStyle=inX.data.color;
			inX.ctx.globalAlpha=1;
			inX.ctx.drawSvg('<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><g>	<path d="M98.88,21.851l23.207,47.022l1.629,3.3l3.642,0.529l51.893,7.541l-37.549,36.602l-2.636,2.569l0.622,3.627l8.864,51.683l-46.414-24.402l-3.258-1.712l-3.257,1.712l-46.414,24.402l8.865-51.683l0.622-3.628l-2.635-2.568L18.51,80.243l51.893-7.541l3.642-0.529l1.629-3.3L98.88,21.851 M98.88,6.034L69.396,65.775l-65.929,9.58l47.707,46.502L39.912,187.52l58.968-31.002l58.969,31.002l-11.262-65.662l47.705-46.502l-65.928-9.58L98.88,6.034L98.88,6.034z"/></g></svg>',
				x1 ,y1  , (x2-x1)*2   ,(y2-y1)*2);
			}
		drawstar(inX.data.start.x  -inX.data.canvasOffset.x  ,inX.data.start.y -inX.data.canvasOffset.y,
				inX.data.end.x    -inX.data.canvasOffset.x,inX.data.end.y     -inX.data.canvasOffset.y);
		updateImgFromCanvas();
		};
	tool.star.up=function () {tool.status='ready';};


//house
	var baseHouseDim=30
	tool.house.begin=function (e)
		{

		tool.status="started";
		newLevel();
		createCanvas();
		currentLevel.type='house';
		currentLevel.start={x:e.x-baseHouseDim/2,	y:e.y-baseHouseDim/2};
		currentLevel.end={x:e.x+baseHouseDim,	y:e.y+baseHouseDim};
		tool.house.move(e);
		};
	tool.house.move=function(e)
		{
		currentLevel.end={x:e.x,y:e.y};
		canvas.height=canvas.height+1;
		canvas.height=canvas.height-1;
		enlargeCanvas(	canvas,
			currentLevel.start.x - (currentLevel.end.x - currentLevel.start.x)/2,
			currentLevel.start.y - (currentLevel.end.y - currentLevel.start.y)/2,
			currentLevel.end.x+ (currentLevel.end.x - currentLevel.start.x ),
			currentLevel.end.y+  (currentLevel.end.y - currentLevel.start.y)
		);
		tool[tool.current].draw({canvas:canvas,ctx:c,data:currentLevel});
		};
	tool.house.draw=function(inX)
		{
		if (! (inX.data.start && inX.data.end)) return;

		function drawhouse(x1,y1,x2,y2,shadow)
			{
			inX.ctx.lineWidth=inX.data.lineWidth*2;
			inX.ctx.strokeStyle=inX.data.color;
			inX.ctx.fillStyle=inX.data.color;
			inX.ctx.globalAlpha=1;
			inX.ctx.drawSvg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" width="200px" height="148.333px" viewBox="0 0 200 148.333" enable-background="new 0 0 200 148.333" xml:space="preserve"><polyline fill="none" stroke="#strokeColor#"  points="32.875,56.208 33.248,56.838 33.248,137.203 168.183,137.203 168.183,56.838 		"/> <polyline  fill="none" stroke="#strokeColor#" points="194.936,77.92 147.189,43.877 99.444,9.833 51.699,43.877 3.952,77.92 		"/>  </svg>'.replace(/#strokeColor#/g,inX.data.color),
				x1 ,y1  , (x2-x1)*2   ,(y2-y1)*2);
			}
		drawhouse(inX.data.start.x  -inX.data.canvasOffset.x  ,inX.data.start.y -inX.data.canvasOffset.y,
				inX.data.end.x    -inX.data.canvasOffset.x,inX.data.end.y     -inX.data.canvasOffset.y);
		updateImgFromCanvas();

		};
	tool.house.up=function () {tool.status='ready';};


	//arrow
	tool.arrow.begin=function (e)
		{
		tool.status="started";
		newLevel();
		createCanvas();
		currentLevel.type='arrow';
		currentLevel.start={x:e.x,	y:e.y};
		};
	tool.arrow.move=function(e)
		{
		currentLevel.end={x:e.x,y:e.y};
		canvas.height=canvas.height+1;
		canvas.height=canvas.height-1;
		// currentLevel.start.x-=30
		// currentLevel.start.y-=30
		enlargeCanvas(canvas,currentLevel.start.x,currentLevel.start.y,currentLevel.end.x,currentLevel.end.y);
		tool[tool.current].draw({canvas:canvas,ctx:c,data:currentLevel});
		};
	tool.arrow.draw=function(inX)
		{
		if (! (inX.data.start && inX.data.end)) return;

		function drawArrow(x1,y1,x2,y2,shadow)
			{
			inX.ctx.lineWidth=inX.data.lineWidth;
			if(shadow)
				{
				inX.ctx.strokeStyle='000';
				inX.ctx.globalAlpha=0.2;
				return
				}
			else
				{
				drawArrow(x1+shadowDistance,y1+shadowDistance,x2+shadowDistance,y2+shadowDistance,true)
				inX.ctx.strokeStyle=inX.data.color;
				inX.ctx.fillStyle=inX.data.color;
				inX.ctx.globalAlpha=1;
				}
			inX.ctx.beginPath();
			inX.ctx.moveTo(x1,y1);
			inX.ctx.lineTo(x2,y2);
			var dy=8
			var dx1=7
			var dx2=7
			var DeltaX = x2 - x1;
			var DeltaY = y2 - y1;
			var L = Math.sqrt(DeltaX*DeltaX + DeltaY*DeltaY);


			inX.ctx.lineTo(x2 - DeltaY * dy / L  - DeltaX * dx1 / L,
			               y2 + DeltaX * dy / L -  DeltaY * dx1 / L);

			inX.ctx.lineTo(x2 + DeltaX * dx2 / L,
		               y2 + DeltaY * dx2 / L);

			inX.ctx.lineTo(x2 + DeltaY * dy / L - DeltaX * dx1 / L,
		               y2 - DeltaX * dy / L - DeltaY * dx1 / L);

			inX.ctx.lineTo(x2, y2);

			inX.ctx.stroke();
			inX.ctx.closePath();
			}

		drawArrow(inX.data.start.x  -inX.data.canvasOffset.x  ,inX.data.start.y -inX.data.canvasOffset.y,
				inX.data.end.x    -inX.data.canvasOffset.x,inX.data.end.y     -inX.data.canvasOffset.y);
		inX.ctx.lineCap='round';
		updateImgFromCanvas();

		};
	tool.arrow.up=function () {tool.status='ready';};
	//
	function drawLevel(inX)
		{
//		offset=enlargeCanvas(currentLevel.startX,currentLevel.startY,currentLevel.lineTo.x,currentLevel.lineTo.y);
//		tool[currentLevel.type].draw(inX.canvas,inX.ctx,currentLevel)
		}
	function enlargeCanvas(canvas,x1,y1,x2,y2)
		{
		if (x1<x2) {rx1=x1;rx2=x2;} else {rx1=x2;rx2=x1;}
		if (y1<y2) {ry1=y1;ry2=y2;} else {ry1=y2;ry2=y1;}
		currentLevel.canvasOffset={x:rx1-7,y:ry1-7};
			$(canvas).css({left:rx1-7,top:ry1-7});
			canvas.width=rx2-rx1+25;
			canvas.height=ry2-ry1+25;

		$(canvas).data('img').css({'left':$(canvas).css('left'),'top':$(canvas).css('top'),'width':canvas.width,'height':canvas.height})
		return({x:rx1,y:ry1});
		}
	function stopTool()
		{
		if (tool.status=='started')
			{
			tryFunc(tool[tool.current].up);
			tryFunc(tool[tool.current].finish);
			}
		}
	function changeTool(inTool)
		{
		if(inTool.type=='undo' && inTool.type=='redo' && inTool.type=='crop') {}
		else
		localStorage['lastTool']=inTool;
		stopTool();
		$('.button [tag=' + inTool + ']').trigger('mousedown');
		tool.current=inTool;
		}

	function tryFunc(inFunc) {if ($.isFunction(inFunc)) inFunc();}


	function onResize()
		{
		if(true)
			{
			canvasWidth=clip.rx2-clip.rx1;
			canvasHeight=clip.ry2-clip.ry1;
			$('#clipper').css({'height':clip.ry2-clip.ry1,'overflow':'hidden','width':clip.rx2-clip.rx1,'position':'absolute'})
			//
			if(firstImage){
			$('#canvasId').attr('height',clip.ry2-clip.ry1);
			$('#canvasId')[0].getContext('2d').drawImage(firstImage,0,0);
			}

			$canvasData.css({
				"margin-left":-clip.rx1,
				"margin-top":-clip.ry1
				});
			$canvasData.css({'clip':'clip.rect(' + clip.ry1 +' ' +clip.rx2+ ' ' + clip.ry2 + ' ' + clip.rx1 + ')'}).css('position','absolute');
			$('canvas').add('#clipper img').not('#canvasId').each(function ()
					{
					$(this).css({'margin-left':-clip.rx1,'margin-top':-clip.ry1});
					});
			}
		else
			{
			$canvasData.css({margin:0,clip:'none'});
			canvasWidth=$canvasData.width();
			canvasHeight=$canvasData.height();
			$('canvas').not('#canvasId').each(function ()
					{
					$(this).css({'margin':0});
					});
			}
		maxWidth=window.innerWidth;
		maxHeight=window.innerHeight- $('#header').height()- $('#fotter').height();

		$('#header').add('#fotter').width(maxWidth);

		divCanvasData=$('#divCanvasData');
    var height = canvasHeight;
    if (height > maxHeight) {
      height = maxHeight;
    }
		divCanvasData.css(
				{
					left:canvasWidth>maxWidth ? 0 : (maxWidth/2)-(canvasWidth/2) ,
					width:canvasWidth>maxWidth ? maxWidth : canvasWidth,
					height:height,
					'overflow-x' : canvasWidth+16<maxWidth ?'hidden' : 'auto',
					'overflow-Y' : canvasHeight<maxHeight ?'hidden' : 'auto',
          'top': '50%',
          'margin-top': ($('#header').height()/2 - height/2) + 'px'
				});
		scrollBarHeight= canvasWidth<maxWidth ? 0 : 16;
		scrollBarWidth= canvasHeight<maxHeight  ? 0 : 16;
		onScroll();

		// window.setTimeout(function(){
		// 	if(lj_get('settings','framebench_tooltip')!='hide' && lj_get('settings','framebench_button')=='yes'){
		// 		lj_set('settings','framebench_tooltip','hide')
		// 		$('.fbtip').remove();$('<div class=fbtip style=z-index:1000;width:330px;height:350px;position:absolute><div style="position:absolute;width:100%"><img src="/images/framebench_tooltip.png"><span class=fbtipblose style=color:blue;cursor:pointer>Close</span></div></div>').hide().appendTo(document.body).position({my:'right+50 top',of:'.fbUpload',at:'middle bottom'}).show().find('.fbtipblose').on('click',function () {$('.fbtip').fadeOut()})
		// 		$(document).one('mouseup',function () {$('.fbtip').fadeOut();})
		// 	}
		// },1000)
	}


	function canBorder(){
		$('#border1').off().on('click',function () {
			$(this).toggleClass('on')
			if($(this).hasClass('on')){
				// $('#cborder').css({marginLeft:'0px',marginTop:'0px',zIndex:1000,top:'0px',left:'0px'}).attr( {'width':$('#clipper').width()+10,'height': $('#clipper').height()+10 });
				//  addBorderToCanvas($('#cborder')[0]);
				//   $('#clipper').height($('#clipper').height()+10)
				//   $('#clipper').width($('#clipper').width()+10)
				//  addBorderToCanvas($('#cborder')[0])
			}
			})
		return !(clip.rx1==0 || clip.ry1==0)
	}
	function resetButtons()
		{
		$('#border1')[canBorder() ? 'show' : 'hide']()
		$('.button[tag=undo]').attr('status', currentIndex>-1 ? 'on' :'Disable');
		$('.button[tag=undo]')[currentIndex>-1 ? 'removeClass' :'addClass']('disable');

		$('.button[tag=redo]').attr('status',maxIndex>currentIndex ? 'on' :'Disable');
		$('.button[tag=redo]')[maxIndex>currentIndex ? 'removeClass' :'addClass']('disable');

		$('#toolbar .button').each(function()	{
			$(this).attr('title', $(this).attr('tag'));
			if ($(this).attr('status')=="on"){
				$(this).attr({'src':'images/drawing/' + $(this).attr('tag')+ ($(this).attr("tag")==tool.current? 'On' : 'Off') + '.png'})
						.css({'cursor':'pointer'});
				$(this)[$(this).attr("tag") ==tool.current ? 'addClass':'removeClass']('on');
				}
			else
				$(this).attr({'src':'images/drawing/' + $(this).attr('tag')+ 'Disable.png'})
						.css({'cursor':'not-allowed'});
			});

		}
	function onScroll()
	{
		scrollLeft=$('#divCanvasData').scrollLeft();
		scrollTop=$('#divCanvasData').scrollTop();
	};

//************Binds****************
	function binds()
	{

	$('.linePickerOverlay hr').click(function(){
		lineWidth = parseInt(this.style.height);
		$('.linePickerOverlay').slideUp();
	});
	$('.save-to-pdf').click(createPDF)
	// $('#thumbnail').click(createThumbnails)
	$('#LineWidthPicker').mouseenter(function(){
		var $overlay = $('.linePickerOverlay');
		if (!$overlay.is(":visible")) {
			$overlay.slideDown();
		}
	}).mouseleave(function(){
		$('.linePickerOverlay').slideUp();
	});

	$('.donation').click(function (e) {
    e.preventDefault();
    $('.donation-drop').toggle();
  });
  $('.more-plugins').click(function (e) {
    e.preventDefault();
    $('.more-plugins-drop').toggle();
  });
  $('body').click(function (e) {
    if (!e.isDefaultPrevented()) {
      $('.donation-drop, .more-plugins-drop').hide();
    }
  });

  $(document.body).bind('mousedown', function (e) {
    if (e.button == 0) {
      var dime = pos(e);
      if (!dime) {
        stopTool();
      }
      if (dime && tool.current == 'text') stopTool()
      if (dime && tool.status == 'ready') {
        tool[tool.current].begin(dime);
      }
      if (e.delegateTarget.id == "page-editor") {
        return false;
      }
    }
  });
	$(document.body).bind('mousemove',function (e)
		{
		dime=pos(e);
		$('#divCanvasData').css('default');
		$('#divCanvasData').css('cursor','default');
		if (dime)
			{
			if(tool.status=='ready' || tool.status=='started')
				{
				$('#divCanvasData').css('cursor','crosshair');
				}
			if(tool.status=='started')
				{
				if ($.isFunction (tool[tool.current].move)) tool[tool.current].move( dime);
				}

			}
		});
	$(window).resize(onResize);

	$(document.body).bind('mouseup',function (e)
		{
		dime=pos(e);
//		if (!dime) return;
//		if (dime) if ($.isFunction(tool[tool.current].up)) tryFunc( tool[tool.current].up)
if (tool.current)
		tryFunc( tool[tool.current].up);
		});

//	$(document).bind('keydown','alt+1',function ()
//			{changeTool('free');	});
//
//	$(document).bind('keydown','alt+2',function ()
//			{
//			changeTool('line');
//			});
//	$(document).bind('keydown','alt+3',function ()
//			{
//			changeTool('spray');
//			});
//	$(document).bind('keydown','alt+4',function ()
//			{
//			drawDot(5,2,3,'black');
//			});
//
//	$(document.body).bind('keydown','alt+z',function ()

		$('#toolbar .button').click(function ()
			{
				$this=$(this);
				if ($this.attr('status')=='on')
					{
					changeTool( $this.attr('tag'));
					if ($.isFunction(tool[$this.attr('tag')].click))
						tool[$this.attr('tag')].click();
					$this.attr({'src':'images/drawing/' + $this.attr('tag')+'On.png'});
					$this.addClass('on');
					resetButtons();
					}

			});

	$('#divCanvasData').bind('scroll',onScroll);

	$('#a_share').click(function ()
		{
		postImage();
		});

	$('#save').click(save);
	$('#open').click(open);


	}
//Finishi binding


	function postImage(service)
		{
		service=service || '';
		(function (){
	//		$(this).hide();
			$('#topText').html('uploading <a href="#" id=a_cancel>Cancel</a>');

			var canvas=$('canvas.done')[0];
			var url= screenshot.url;
			var options= localStorage['options'];

			//canvasToDataURL; //.replace(/^data:image\/(png|jpg);base64,/, "")
			hr=$.ajax({url:'https://www.openscreenshot.com/upload3.asp',type:'post',data:{type:localStorage['pngjpg'],title:screenshot.title,description:screenshot.description,imageUrl:url,options:options,data:canvasToDataURL,service:service},
				complete:
				function (a,b,c) {
						if(cancel) {$('#topText').html('Canceled!');$('#save').add('#toGoogleDrive').add('#print').attr('disabled',null); return;}
						noMoreWait();

/* Fixing the vulnerable that discovered by Google */
						var response=a.responseText.replace(/^\s+|\s+$/g,"");  // remove trailing white space
						if (/"/.test(response) || />/.test(response) || /</.test(response) || /'/.test(response) || response.indexOf("http:") != 0 ) {
							$("#topText").html('Please try again in some minutes. We are working to solve this issue.');
						} else {
							if(cancel) return;
							response=response.split(',');
							imageURL = response[0];
							onlineUrl=imageURL;
							imageDelete=response[1];
							shareService(service,imageURL)
						}
	//					$('#topText').html
	//					('<a target="_new" href=' + imageURL + ' style=font-size:10px;>' + imageURL + '</a><br/><a href="#" id="fb"><img alt="" style="vertical-align:middle" src="images/logo_facebook.png"></a><a href="#" id="gmail"><img alt="" style="vertical-align:middle" src="images/logo_gmail.png"></a><a href="#" id="hotmail"><img alt="" style="vertical-align:middle" src="images/logo_msn.png"></a><a href="#" id="myspace"><img alt="" style="vertical-align:middle" src="images/logo_myspace.png"></a><a href="#" id="twitter"><img alt="" style="vertical-align:middle" src="images/logo_twitter.png"></a>');

						onResize();
						}
						});
			})()
		}



//**********Drawing///
	function drawDot(x, y, size, col, trg) {

	x = Math.floor(x)+1; //prevent antialiasing of 1px dots
	y = Math.floor(y)+1;

	if(x>0 && y>0) {

		if(!trg) { trg = c; }
		if(col || size) { var lastcol = trg.fillStyle; var lastsize = trg.lineWidth; }
		if(col)  { trg.fillStyle = col;  }
		if(size) { trg.lineWidth = size; }
		if(trg.lineCap == 'round') {
			trg.arc(x, y, trg.lineWidth/2, 0, (Math.PI/180)*360, false);
			trg.fill();
		} else {
			var dotoffset = (trg.lineWidth > 1) ? trg.lineWidth/2 : trg.lineWidth;
			trg.fillRect((x-dotoffset), (y-dotoffset), trg.lineWidth, trg.lineWidth);
		}
		if(col || size) { trg.fillStyle = lastcol; trg.lineWidth = lastsize; }

		}
	}

	function drawLine()
			{
			c.strokeStyle="rgba(0,0,0,0.1)";
			c.moveTo(100,100);
			c.lineTo(300,300);
			c.stroke();
			}

	function save()
		{
		if (localStorage['lastTool']=='text')
			changeTool('line');
		else changeTool(localStorage['lastTool']);
		pleaseWait();
		window.setTimeout(function () {editor.createLastCanvas('save')},0)
		}
	function share()
		{
		if (localStorage['lastTool']=='text')
			changeTool('line');
		else changeTool(localStorage['lastTool']);
		pleaseWait();
		upload();
		}
	function pleaseWait(){
		cancel=false;
		$('#serviceButtons button').attr('disabled','true').css({'cursor':'default','border':'none'});
		$('#topText').html('Working..')
	}
	function noMoreWait(){
		$('#serviceButtons button').attr('disabled',null).css({'cursor':'','border':''});
		$('#topText').html('');
		cancel=false
	}
	function upload(inService){
		if (localStorage['lastTool']=='text')
			changeTool('line');
		else changeTool(localStorage['lastTool']);
		pleaseWait();
		// console.log(imageChanged);
		if(imageChanged!=localStorage['pngjpg'])
			window.setTimeout(function () {editor.createLastCanvas('share',inService)},0)
		else
			window.setTimeout(function () {shareService(inService,onlineUrl)},0)
		noMoreWait();
	}
	function toGoogleDrive()
		{
		if (localStorage['lastTool']=='text')
			changeTool('line');
		else changeTool(localStorage['lastTool']);
		pleaseWait();
		window.setTimeout(function () {editor.createLastCanvas('toGoogleDrive')},0)
		}
	function open()
		{
		if (localStorage['lastTool']=='text')
			changeTool('line');
		else changeTool(localStorage['lastTool']);
		pleaseWait();
		window.setTimeout(function () {editor.createLastCanvas('open')},0)
		}
	function print()
		{
		if (localStorage['lastTool']=='text')
			changeTool('line');
		else changeTool(localStorage['lastTool']);
		pleaseWait();
		window.setTimeout(function () {editor.createLastCanvas('print')},0)
		}

	}

var editor=new editor_obj();
localStorage['captureCount']++;
editor.window=window;
editor.close=window.close;
editor.captureCount=localStorage['captureCount'];
$(function ()
	{
	editor.init();
	//here
	if(extension.online) {
		if (!editor.appick && !editor.webcam && !editor.intent){
			 window.setTimeout( screenshot.createScreenShot,0 )
		}
	}
});

createFile=function(callback)
	{
	var filename;
	filename=screenshot.title || screenshot.url;
	filename=filename.replace(/[%&\(\)\\\/\:\*\?\"\<\>\|\/\]]/g,' ');
	filename+='-' + (new Date).getHours().toString().twoDigits() + (new Date).getMinutes().toString().twoDigits() + (new Date).getSeconds().toString().twoDigits()
	filename+=localStorage['pngjpg']=='png' ? '.png' : '.jpg';


	if(true){
		var x=dataURItoBlob(canvasToDataURL);
		// console.log(x)
		var y=URL.createObjectURL(x);
		callback(y)
	}
	if(!true)
			{
		//New filesaver
		saveAs(	dataURItoBlob(canvasToDataURL),  filename);
		callback('saved')
			}
	else if(!true)
			{
	onInitFs=function (fs) {
		  fs.root.getFile(filename, {create: true}, function(fileEntry) {
			// Create a FileWriter object for our FileEntry (log.txt).
			fileEntry.createWriter(function(fileWriter) {

			  fileWriter.onwriteend = function(e) {
				console.log('Write completed.');
			  };

			  fileWriter.onerror = function(e) {
				console.log('Write failed: ' + e.toString());
			  };
			  // Create a new Blob and write it to log.txt.
//			  var bb = new window.WebKitBlobBuilder(); // Note: window.WebKitBlobBuilder in Chrome 12.
//			  bb.append('Lorem Ipsum');
			  fileWriter.write(dataURItoBlob(canvasToDataURL));

			}, errorHandler);

		  window.setTimeout(function (){callback(fileEntry.toURL())},500);
		  }, errorHandler);
	}
	window.requestFileSystem(window.TEMPORARY, 1024*1024*1024*1024*1024, onInitFs, errorHandler);
		}
	}






///multiline
var multiFillText = function(canvas,text, x, y, lineHeight, fitWidth) {
	var ctx = canvas.getContext('2d');
	var cutOff = 210,
    DEBUG = false;
    var draw = x !== null && y !== null;

    text = text.replace(/(\r\n|\n\r|\r|\n)/g, "\n");
    sections = text.split("\n");

    var i, str, wordWidth, words, currentLine = 0,
        maxHeight = 0,
        maxWidth = 0;

    var printNextLine = function(str) {
        if (draw) {
            ctx.fillText(str, x, y + (lineHeight * currentLine));
        }

        currentLine++;
        wordWidth = ctx.measureText(str).width;
        if (wordWidth > maxWidth) {
            maxWidth = wordWidth;
        }
    };

    for (i = 0; i < sections.length; i++) {
        words = sections[i].split(' ');
        index = 1;

        while (words.length > 0 && index <= words.length) {

            str = words.slice(0, index).join(' ');
            wordWidth = ctx.measureText(str).width;

            if (wordWidth > fitWidth) {
                if (index === 1) {
                    // Falls to this case if the first word in words[] is bigger than fitWidth
                    // so we print this word on its own line; index = 2 because slice is
                    str = words.slice(0, 1).join(' ');
                    words = words.splice(1);
                } else {
                    str = words.slice(0, index - 1).join(' ');
                    words = words.splice(index - 1);
                }

                printNextLine(str);

                index = 1;
            } else {
                index++;
            }
        }

        // The left over words on the last line
        if (index > 0) {
            printNextLine(words.join(' '));
        }


    }

    maxHeight = lineHeight * (currentLine);

    if (DEBUG) {
        ctx.strokeRect(x, y, maxWidth, maxHeight);
    }

    if (!draw) {
        return {
            height: maxHeight,
            width: maxWidth
        };
    }
};
//multiFillText("Many San Franciscans blahblahblahblahblaasdfasdfasdfhblhblaha never travel here, located as it is at the southern edge of the Mission valley, served by only a few city bus lines and perched atop a steep hill, to boot", 0, 0, 15, cutOff);
////multiFillText('blahblahblahblahblahblhblaha sdf ads fa dsf ad', 0, 150, 15, cutOff);
//multiFillText('Right AV Valve - Mitral (Bicuspid) Valve', 0, 150, 15, cutOff);
//multiFillText('right common carotid arteries', 0, 190, 15, cutOff);
//multiFillText("Expressionism can be used to describe various art forms but, in its broadest sense, it is used to describe any art that raises subjective feelings above objective observations. The paintings aim to reflect the artist's state of mind rather than the reality of the external world. The German \nExpressionist movement began in 1905 with artists such as Kirchner and Nolde, who favored the Fauvist style of bright colors but also added stronger linear effects and harsher outlines.", 0, 210, 15, cutOff);
//
//multiFillText('right common\ncarotid arteries', 0, 500, 15, cutOff);​


var googleAuth;
function gDrive(){
	start=function()	{
	$('#topText').html
			('Uploading...');
		googleAuth.authorize(function() {
		// Ready for action
		  googleAuth.getAccessToken();
		  xhr=new XMLHttpRequest();
			xhr.open("POST", "https://www.googleapis.com/upload/drive/v2/files?uploadType=multipart", true);
		 xhr.setRequestHeader('Authorization', 'OAuth ' + googleAuth.getAccessToken())
			var meta = {
			"title": screenshot.title,
			"mimeType": "image/png",
			"description": 'Taken by Screenshot Extension. https://www.openscreenshot.com'
			};
			var bound = 287032396531387;

			var parts = [];
			parts.push('--' + bound);
			parts.push('Content-Type: application/json');
			parts.push('');
			parts.push(JSON.stringify(meta));
			parts.push('--' + bound);
			parts.push('Content-Type: image/png');
			parts.push('Content-Transfer-Encoding: base64');
			parts.push('');
			parts.push(canvasToDataURL.slice(22));
			parts.push('--' + bound + '--');
			xhr.setRequestHeader("Content-Type", "multipart/mixed; boundary=" + bound);
			xhr.onload = function(e){
					console.log("DRIVE OK", this, e);
					e=JSON.parse(this.response);
					if (e.error) {
						googleAuth.clear();
						imageURL=JSON.parse(this.response).id;
						$('#save').add('#print').add('#open').add('#toGoogleDrive').attr('disabled','');
						$('#topText').html
							('Cannot Access;,<a id=trygdrive href=#> try Again</a>.');
						$('#trygdrive').click(gDrive);
					}
					else{
						link=e.alternateLink;
						$('#save').add('#print').add('#open').add('#toGoogleDrive').attr('disabled','');
						chrome.tabs.create({url:link});
						$('#topText').html('');
						$('#save').add('#print').add('#open').add('#toGoogleDrive').attr('disabled','');
							$('#topText').html('');
					xh=new XMLHttpRequest();
					xh.open("POST","https://www.googleapis.com/urlshortener/v1/url?key=AIzaSyC5S6Uxzx6oUxIEHMWZU4eOm7mL6DupChw");
					xh.setRequestHeader('Authorization', 'OAuth ' + googleAuth.getAccessToken());
					xh.setRequestHeader('Content-Type', 'application/json');
					xh.onload=function (e){
						imageURL=JSON.parse(this.response).id;
						$('#save').add('#print').add('#open').add('#toGoogleDrive').attr('disabled','');
						$('#topText').html
								('Saved: <a target="_blank" href=' + imageURL + ' style=font-size:10px;>' + imageURL + '</a><br/>');
						//<a href="#" id="fb"><img alt="" style="vertical-align:middle" src="images/logo_facebook.png"></a><a href="#" id="gmail"><img alt="" style="vertical-align:middle" src="images/logo_gmail.png"></a><a href="#" id="hotmail"><img alt="" style="vertical-align:middle" src="images/logo_msn.png"></a><a href="#" id="myspace"><img alt="" style="vertical-align:middle" src="images/logo_myspace.png"></a><a href="#" id="twitter"><img alt="" style="vertical-align:middle" src="images/logo_twitter.png"></a>');
					}
					xh.send('{"longUrl":"' + link + '"}');
					}

				};
			theParts=parts.join("\r\n");
			xhr.send(theParts);
		});
	}

	// $('#topText').html
	// 		('Authorize');
	// googleAuth = new OAuth2('google', {
	//   client_id: '545443912834-j7vdfe6gar81lu14oatf33tgtlcbi5gq.apps.googleusercontent.com',
	//   client_secret: '213pVJTRShuSGESsRO92G1qV',
	//   api_scope: 'https://www.googleapis.com/auth/drive.install https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/urlshortener https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email'
	// },start);
}

//Hover Menu

function l(a){
	// v=$('textarea').val()
	// $('textarea').val(v + '\r\n' + a)
}
$(function(){
	$('.hovermenu').sethover()
})


$.fn.sethover=function(x){
	this.each(function (){
		new sethover( $(this))
	})

	function sethover(elm){
		var hideTimeout,newDiv,arrow;

		 setoff=function(){
		 	l(elm.length);
			$(elm).off('mouseenter');
		}
		 seton=function(){
			$(elm).on('mouseenter',showHover)
		}

		showHover=function(){
			l('mousenter')
			var $t=$(this);
			//setoff();

			clearTimeoutFN=function (){
				console.log('clear-hide');
				//alert('remove,' + hideTimeout+ ', ' + $(elm).text());
				if(hideTimeout) window.clearTimeout(hideTimeout);
			}
			hideTimeoutFN=function (){
				clearTimeoutFN();
				console.log('set-hide');
				hideTimeout=window.setTimeout(function (){
					hideTimeout=false;
					 arrow.remove();
					newDiv.add(arrow).fadeOut('fast');
					$t.add('newdiv').off('.hovermenu');
					seton();
				},300);
				//alert('create' + hideTimeout + ', ' + $(elm).text());
			};

			this.donthide=function (){
				clearTimeoutFN();
				$t.add(newDiv).off('.hovermenu');
			//	newDiv.slideDown();
			}

			newDiv=$t.data('hover') ||  $(this).find('.menu');

			$t.data('hover',newDiv);

			$(newDiv).add(this).off('.hovermenu').on(
				{
				'mouseleave.hovermenu':hideTimeoutFN,
				'mouseenter.hovermenu':clearTimeoutFN
			})

			$('a',newDiv).on('click',function (){
				//alert('clicked')
				//return false
			});
			newDiv.show();
			newDiv.position({
				my:'right top+10',
				at:'right bottom',
				of:this
			});

			arrow=$('<div class=sss style=position:absolute;background-repeat:no-repeat;width:16px;height:16px;background-image:url(old/nd/ui_top_triangle.png)></div>')
			$(this).find('.sss').remove()
			$(this).append(arrow);
			arrow.position({
				my:'right bottom',
				at:'right-10 top+2',
				of:newDiv
			})

			newDiv=newDiv.add(arrow);
			getH=newDiv.height();
			//newDiv.hide();
			window.hz = window.hz || 10
			newDiv.css({'z-index':window.hz++,overflow:'hidden'})
			// newDiv.animate({height:getH},'fast')
			//newDiv.fadeIn('fast')
		}
		seton();
	}
}


//

var border =[];
$(function(){
	base='//localhost/www.openscreenshot.com/docs/'
	base='nd/';

	border[1]={
		corner: document.createElement('img'),
		down: document.createElement('img'),
		right: document.createElement('img'),
		empty: document.createElement('img')
	}
	// border[1].corner.src = base + 'corner1.png'
	// border[1].down.src = base + 'down1.png'
	// border[1].right.src = base + 'right1.png'
	// border[1].empty.src = base + 'empty.png'
})

function addBorderToCanvas(e) {
    var c, e

    c = e.getContext('2d');

    corner=border[1].corner
    down=border[1].down
    right=border[1].right
    empty=border[1].empty

    c.drawImage(corner, e.width - corner.width, e.height - corner.height)

     for (var i = e.width - corner.width - down.width; i > down.width; i -= down.width)
        c.drawImage(down, i, e.height - down.height)
    for(;i>=0;i--)
    	c.drawImage(empty, i, e.height - down.height)
    for (var i = e.height - corner.width - right.height; i > right.height; i -= right.height)
        c.drawImage(right, e.width - right.width, i)
      for(;i>=0;i--)
    	c.drawImage(empty, e.width - empty.width, i)
}

function addBorderToDiv(e){
    canvas=document.createElement('canvas')
    canvas.width=$(e).width()+15
    canvas.height=$(e).height()+15
    document.body.appendChild(canvas)
    addBorderToCanvas(canvas)
    $(canvas).position(
    	{my:'left bottom',at:'left+15 bottom+15', of:e,
    	collision :'none',
    	within:e
    	})
}










$(function(){
	var plugins_to_show=defaultPlugins.slice();

	staticPlugin=new Toolbar({
		'plugins':plugins_to_show||{},
		'element': document.getElementById('toolbarContainer'),
		'namespace':'editor',
		enlargable:false,
		page_title:screenshot.title,
		page_description:screenshot.description,
		page_url:screenshot.url,
		doNotRenderDefaults: true,
		whiteIcons: true,
		button_size: 20,
		'icon_base':'images/',
		'position':'static',
		'type':'image',
		'theme': true,
		request:function (callback){
			editor.createLastCanvas('toolbar',function (data){
				callback(data)
			})
		},
		requestText:function (callback){
			alert('you asked to get the text');
			callback();
		}
  });

	$('.share').on('click',function (e){
		var x=staticPlugin.getPluginByKey('openscreenshot')
		editor.createLastCanvas('toolbar',function (data){
			x.run(data, e);
		});
	});
	
	$('.save').on('click',function (e){
		var x=staticPlugin.getPluginByKey('save')
		editor.createLastCanvas('toolbar',function (data){
			x.run(data, e)
		})
	});

	$('.save-to-printer').on('click',function (e){
		var x=staticPlugin.getPluginByKey('print')
		editor.createLastCanvas('toolbar',function (data){
			x.run(data, e)
		})
	});

	$('.save-to-clipboard').on('click',function (e){
		var x=staticPlugin.getPluginByKey('copy');
		editor.createLastCanvas('toolbar', function (data){
			x.run(data, e)
		})
	});

	// $('.save-to-thumbnail').on('click', createThumbnails);

	$('.fbUpload').on('click',function (e){
		var x=staticPlugin.getPluginByKey('framebench')
		editor.createLastCanvas('toolbar',function (data){
			x.run(data, e);
		});
	});

	document.addEventListener("keydown", function(e) {
		if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
			e.preventDefault();
			var x=staticPlugin.getPluginByKey('openscreenshot');
			editor.createLastCanvas('toolbar', function (data){
				x.run(data, e)
			});
		}
	}, false);
});

if (location.hash == "#paste") {
  (function (e) {
    var t;
    e.event.fix = function (e) {
      return function (t) {
        t = e.apply(this, arguments);
        if (t.type.indexOf("copy") === 0 || t.type.indexOf("paste") === 0) {
          t.clipboardData = t.originalEvent.clipboardData
        }
        return t
      }
    }(e.event.fix);
    t = {callback: e.noop, matchType: /image.*/};
    return e.fn.pasteImageReader = function (n) {
      if (typeof n === "function") {
        n = {callback: n}
      }
      n = e.extend({}, t, n);
      return this.each(function () {
        var t, r;
        r = this;
        t = e(this);
        return t.bind("paste", function (e) {
          var t, i;
          i = false;
          t = e.clipboardData;
          return Array.prototype.forEach.call(t.types, function (e, s) {
            var o, u;
            if (i) {
              return
            }
            if (e.match(n.matchType) || t.items[s].type.match(n.matchType)) {
              o = t.items[s].getAsFile();
              u = new FileReader;
              u.onload = function (e) {
                return n.callback.call(r, {
                  dataURL: e.target.result,
                  event: e,
                  file: o,
                  name: o.name
                })
              };
              u.readAsDataURL(o);
              return i = true
            }
          })
        })
      })
    }
  })(jQuery);
  
  $(function () {
    $('<center class=paste_modal style="position:absolute;top:150px;width:100%"><br><span style="padding:20px;font-size:40px;border:1px solid black">Press Ctrl+V to paste an image</span></center>').appendTo(document.body);
    $("html").pasteImageReader(function (e, t, n) {
      $(".paste_modal").remove();
      var r = document.createElement("img");
      r.src = e.dataURL, canvas = $("canvas")[1], img = $("#imgFixForLong")[0];
      img.onload = function () {
        canvas.width = this.width, canvas.height = this.height, firstImage = this, canvas.getContext("2d").drawImage(this, 0, 0), editor.reloadCanvas()
      };
      img.src = r.src
    });
  })

};
$(function() {
    if (location.hash == "#capture")
    {
      //background.title = "Screen Capture";
      // $("title").text(background.title);
      //  staticPlugin.page_title = background.title;
        alert("You can capture any window, just make sure it\'s not minimized.\nThis feature is still in a beta, so please contact me and share your experience");
        chrome.desktopCapture.chooseDesktopMedia(["window", "screen"], function(n) {
        n && navigator.webkitGetUserMedia({
            audio: !1,
            video: {
                mandatory: {
                    chromeMediaSource: "desktop",
                    chromeMediaSourceId: n,
                    maxWidth: 3e3,
                    maxHeight: 3e3
                }
            }
        }, function(n) {
			// debugger
            video = document.createElement("video")
			video.src = URL.createObjectURL(arguments[0])
			window.setTimeout(function() {
                cs = document.createElement("canvas")
				cs.width = video.videoWidth
				cs.height = video.videoHeight
				cs.getContext("2d").drawImage(video, 0, 0, cs.width, cs.height)
				// n.stop()
				image = document.createElement("img")
				image.src = cs.toDataURL()
				canvas = $("canvas")[1]
				img = $("#imgFixForLong")[0]
				img.onload = function() {
                    canvas.width = this.width
					canvas.height = this.height
					firstImage = this
					canvas.getContext("2d").drawImage(this, 0, 0)
					editor.reloadCanvas()
                }, img.src = image.src
            }, 500)
        }, function() {})
    	})
	}
});


$(function(){
	window.setTimeout(function(){
		$(document).trigger('resize')
	},100)
});

$(function() {
$('.buttons button').click(function() {
        window.setTimeout(function() {
            checkIfRankNeededAndAndAddRank();
        }, 3000)
    })
})