//// exigenc r1
//// by Christopher Clay <canvas@c3o.org>
////
//// The code in this file is dedicated to the Public Domain
//// http://creativecommons.org/licenses/publicdomain/
////

////some global vars
//var canvas, c, canvastemp, ctemp, canvassel, csel, canvasundo, cundo, wsp, imgd, co, check;
//var iface = { dragging:false, resizing:false, status:null, xy:null, txy:null }
//var prefs = { pretty:false, controlpoints:false }


//window.onload = function() { 	

//	wsp = document.getElementById('workspace');
//	//set up canvas
//	canvas = document.getElementById('canvas');
//	if(canvas.getContext) {
//		c = canvas.getContext("2d");	
//		iface.status = document.getElementById('status').firstChild;
//		iface.xy = document.getElementById('xy').firstChild;
//		iface.txy = document.getElementById('txy').firstChild;
//	
//		//set up defaults
//		c.tool = new tool.pencil(); 
//		c.lineWidth = 4;
//		c.strokeStyle = '#000';	
//		c.fillStyle = '#FFF';
//		c.tertStyle = '#DDD';
//		c.strokeFill = 8; //outline shapes
//		prefs.pretty = document.getElementById('pretty').checked;
//		prefs.controlpoints = document.getElementById('controlpoints').checked;

//		c.fillRect(0, 0, canvas.width, canvas.height); //fill with background color (=not transparent)
//    //alert(getPixel(0, 0));

//		//set up overlay canvas (for preview when drawing lines, rects etc)
//		canvastemp = document.getElementById("canvastemp");
//		ctemp = canvastemp.getContext("2d");	

//		//set up selection canvas (invisible, used for selections)
//		canvassel = document.getElementById("canvassel");
//		csel = canvassel.getContext("2d");

//		//set up undo canvas (invisible)
//		canvasundo = document.getElementById("canvasundo");
//		cundo = canvasundo.getContext("2d");

//		//draw title bar gradient
//		gradientcanvas = document.getElementById('gradient');
//		if(gradientcanvas.getContext){
//			var g = gradientcanvas.getContext('2d');
//			grad = g.createLinearGradient(0, 0, 200, 15);	
//			grad.addColorStop(0, '#036');
//			grad.addColorStop(1, '#ACF');
//			g.fillStyle = grad;
//			g.fillRect(0, 0, 300, 17);
//		}

//		//set up events
//		window.onmouseup = bodyUp;
//		window.onmousemove = bodyMove;
//		//window.onkeydown = shortcuts;
//		canvas.onmousedown = canvastemp.onmousedown = c_down;
//		canvas.onmousemove = canvastemp.onmousemove = c_move;
//		canvas.onmouseout = canvastemp.onmouseout = c_out;
//		canvas.onmouseup = canvastemp.onmouseup = c_up;
//		canvas.touchstart =  canvastemp.touchstart = c_up;
//		if(document.location.search) {
//		  paint.open(document.location.search.substring(1));
//		}

//	/*	wsp.addEventListener('touchend', function(event){
//			console.log("touchend",event)

//			if (event.targetTouches.length == 1) { 
//				canvas = document.getElementById('canvas');
//				if(canvas.getContext) {
//					c = canvas.getContext("2d");	
//					iface.status = document.getElementById('status').firstChild;
//					iface.xy = document.getElementById('xy').firstChild;
//					iface.txy = document.getElementById('txy').firstChild;
//				
//					//set up defaults
//					c.tool = new tool.pencil(); 
//					c.lineWidth = 4;
//					c.strokeStyle = '#000';	
//					c.fillStyle = '#FFF';
//					c.tertStyle = '#DDD';
//					c.strokeFill = 8; //outline shapes
//					prefs.pretty = document.getElementById('pretty').checked;
//					prefs.controlpoints = document.getElementById('controlpoints').checked;
//			
//					c.fillRect(0, 0, canvas.width, canvas.height); //fill with background color (=not transparent)
//				//alert(getPixel(0, 0));
//			
//					//set up overlay canvas (for preview when drawing lines, rects etc)
//					canvastemp = document.getElementById("canvastemp");
//					ctemp = canvastemp.getContext("2d");	
//			
//					//set up selection canvas (invisible, used for selections)
//					canvassel = document.getElementById("canvassel");
//					csel = canvassel.getContext("2d");
//			
//					//set up undo canvas (invisible)
//					canvasundo = document.getElementById("canvasundo");
//					cundo = canvasundo.getContext("2d");
//			
//					//draw title bar gradient
//					gradientcanvas = document.getElementById('gradient');
//					if(gradientcanvas.getContext){
//						var g = gradientcanvas.getContext('2d');
//						grad = g.createLinearGradient(0, 0, 200, 15);	
//						grad.addColorStop(0, '#036');
//						grad.addColorStop(1, '#ACF');
//						g.fillStyle = grad;
//						g.fillRect(0, 0, 300, 17);
//					}
//	  let onmouseupPosTouch = bodyUpTouch( event.touches[0],canvas);
//					window.onmouseup = onmouseupPosTouch;
//					let bodyTouch = bodyMoveTouch(event)
//					window.onmousemove = bodyTouch;
//				let mousePosTouch = getxyTouch( event.touches[0],canvas);
//			   console.log("tousch",mousePosTouch );
//			   canvas.onmousedown = canvastemp.onmousedown = mousePosTouch;
//			   let moveTouch = c_moveTouch(event)
//			   canvas.onmousemove = canvastemp.onmousemove = moveTouch;
//			   let outTouch = c_outTousch(event)
//		       canvas.onmouseout = canvastemp.onmouseout = outTouch;
//			   let uptTocuch = c_upTouch(event)
//			   canvas.onmouseup = canvastemp.onmouseup = uptTocuch;			
//		       canvas.onmouseup = canvastemp.onmouseup = uptTocuch;
//			   if(document.location.search) {
//				paint.open(document.location.search.substring(1));
//			  }
//	  
//			var touch = event.targetTouches[0]; 
//		
//			}
//		}
//		})

//		wsp.addEventListener('mouseup', function(event){
//			console.log("mouseup",event)
//		})

//	
//		wsp.addEventListener('touchstart', function(event){
//			//Comprobamos si hay varios eventos del mismo tipo
//			if (event.targetTouches.length == 1) { 
//				canvas = document.getElementById('canvas');
//				if(canvas.getContext) {
//					c = canvas.getContext("2d");	
//					iface.status = document.getElementById('status').firstChild;
//					iface.xy = document.getElementById('xy').firstChild;
//					iface.txy = document.getElementById('txy').firstChild;
//				
//					//set up defaults
//					c.tool = new tool.pencil(); 
//					c.lineWidth = 4;
//					c.strokeStyle = '#000';	
//					c.fillStyle = '#FFF';
//					c.tertStyle = '#DDD';
//					c.strokeFill = 8; //outline shapes
//					prefs.pretty = document.getElementById('pretty').checked;
//					prefs.controlpoints = document.getElementById('controlpoints').checked;
//			
//					c.fillRect(0, 0, canvas.width, canvas.height); //fill with background color (=not transparent)
//				//alert(getPixel(0, 0));
//			
//					//set up overlay canvas (for preview when drawing lines, rects etc)
//					canvastemp = document.getElementById("canvastemp");
//					ctemp = canvastemp.getContext("2d");	
//			
//					//set up selection canvas (invisible, used for selections)
//					canvassel = document.getElementById("canvassel");
//					csel = canvassel.getContext("2d");
//			
//					//set up undo canvas (invisible)
//					canvasundo = document.getElementById("canvasundo");
//					cundo = canvasundo.getContext("2d");
//			
//					//draw title bar gradient
//					gradientcanvas = document.getElementById('gradient');
//					if(gradientcanvas.getContext){
//						var g = gradientcanvas.getContext('2d');
//						grad = g.createLinearGradient(0, 0, 200, 15);	
//						grad.addColorStop(0, '#036');
//						grad.addColorStop(1, '#ACF');
//						g.fillStyle = grad;
//						g.fillRect(0, 0, 300, 17);
//					}
//	  let onmouseupPosTouch = bodyUpTouch( event.touches[0],canvas);
//					window.onmouseup = onmouseupPosTouch;
//					let bodyTouch = bodyMoveTouch(event)
//					window.onmousemove = bodyTouch;
//				let mousePosTouch = getxyTouch( event.touches[0],canvas);
//			   console.log("tousch",mousePosTouch );
//			   canvas.onmousedown = canvastemp.onmousedown = mousePosTouch;
//			   let moveTouch = c_moveTouch(event)
//			   canvas.onmousemove = canvastemp.onmousemove = moveTouch;
//			   let outTouch = c_outTousch(event)
//		       canvas.onmouseout = canvastemp.onmouseout = outTouch;
//			   let uptTocuch = c_upTouch(event)
//			   canvas.onmouseup = canvastemp.onmouseup = uptTocuch;			
//		       canvas.onmouseup = canvastemp.onmouseup = uptTocuch;
//			   if(document.location.search) {
//				paint.open(document.location.search.substring(1));
//			  }
//	  
//			var touch = event.targetTouches[0]; 
//		
//			}
//		}
//			}, false);*/
//	
//	} else { //go away, IE!
//	
//    document.getElementById('overlaybg').style.display = 'block';	
//    document.getElementById('overlay').style.display = 'block';	
//    
//	}

//}
//function bodyMoveTouch(event) {
//	//lets the user move outside the canvas while drawing shapes and lines
//	var e = event.touches[0]
//		if(c.tool.status > 0) { c_move(e); }	
//	
//		if(c.resizing) {	
//			m = getxyTouch(e, document.body);
//			var win = wsp.parentNode.parentNode.parentNode;
//			ctemp.clearRect(0, 0, canvastemp.width, canvastemp.height);
//			ctemp.strokeRect(0, 0, m.x, m.y); //dotted line
//		} else if(iface.dragging) {
//			m = getxyTouch(e, document.body);
//			var win = wsp.parentNode.parentNode.parentNode;
//			win.style.left = e.clientX-c.start.x+'px';
//			win.style.top = e.clientY-c.start.y+'px';
//		} else if(iface.resizing) {
//			m = getxyTouch(e, document.body);
//			var win = wsp.parentNode.parentNode.parentNode;
//			win.style.width = e.clientX-win.offsetLeft+c.start.x+3+'px';
//			win.style.height = e.clientY-win.offsetTop+c.start.y+3+'px';
//			//todo prevent selecting statusbar text.. how?
//		}
//	
//	}

//function c_upTouch(e) {
//	//handles mouseup on the canvas depending on tool selected
//	
//		m = getxyTouch(e.touches[0], canvas);
//	
//		e.stopPropagation();
//		if(iface.dragging || iface.resizing || c.resizing) { bodyUp(e); } //but not if dragging
//	
//		c.tool.up(e);
//		
//		if(c.tool.name != 'select' && c.tool.name != 'eraser' && c.tool.name != 'picker') { //no color switching for these
//			if(e.button == 2 && c.tool.name != 'eraser') { //right: switch stroke & fill back
//				var temp = c.fillStyle;
//				c.fillStyle = c.strokeStyle;
//				c.strokeStyle = temp;
//			}
//			if(e.ctrlKey) { 
//				var temp = c.strokeStyle;
//				c.strokeStyle = c.tertStyle;
//				c.tertStyle = temp;
//			}
//		}
//	
//		//iface.status.innerHTML = 'c_up - status: '+c.tool.status;
//		return false;
//	}
//function bodyUpTouch(e) {
//	//stops drawing even if mouseup happened outside canvas
//	//closes menus if clicking somewhere else
//	
//		if(c.resizing) {
//			c.resizing = false; document.body.style.cursor = 'auto'; canvastemp.style.cursor = canvastemp.lastCursor;
//			m = getxyTouch(e, wsp);
//			clipResize(m.x-3, m.y-3);
//		}
//		if(iface.dragging) { iface.dragging = false; }
//		if(iface.resizing) { iface.resizing = false; document.body.style.cursor = 'auto'; }
//	
//		if(c.tool.name == 'select') { //cancel selection or finalize selection move
//		sel_cancel();
//		}
//	
//		if(c && c.tool.name != 'polygon' && c.tool.status > 0) {
//			c_upTouch(e);
//		}
//		//if(document.getElementById('menubar').className=='open') {
//			//document.getElementById('menubar').className='';
//			//e.stopPropagation();
//		//}
//	
//	}
//	

//function c_upTouch(e) {
//	//handles mouseup on the canvas depending on tool selected
//	
//		m = getxy(e.touches[0], canvas);
//	
//		e.stopPropagation();
//		if(iface.dragging || iface.resizing || c.resizing) { bodyUp(e); } //but not if dragging
//	
//		c.tool.up(e);
//		
//		if(c.tool.name != 'select' && c.tool.name != 'eraser' && c.tool.name != 'picker') { //no color switching for these
//			if(e.button == 2 && c.tool.name != 'eraser') { //right: switch stroke & fill back
//				var temp = c.fillStyle;
//				c.fillStyle = c.strokeStyle;
//				c.strokeStyle = temp;
//			}
//			if(e.ctrlKey) { 
//				var temp = c.strokeStyle;
//				c.strokeStyle = c.tertStyle;
//				c.tertStyle = temp;
//			}
//		}
//	
//		//iface.status.innerHTML = 'c_up - status: '+c.tool.status;
//		return false;
//	}

//function c_upTouch(e) {
//	//handles mouseup on the canvas depending on tool selected
//	
//		m = getxy(e.touches[0], canvas);
//	
//		e.stopPropagation();
//		if(iface.dragging || iface.resizing || c.resizing) { bodyUp(e); } //but not if dragging
//	
//		c.tool.up(e);
//		
//		if(c.tool.name != 'select' && c.tool.name != 'eraser' && c.tool.name != 'picker') { //no color switching for these
//			if(e.button == 2 && c.tool.name != 'eraser') { //right: switch stroke & fill back
//				var temp = c.fillStyle;
//				c.fillStyle = c.strokeStyle;
//				c.strokeStyle = temp;
//			}
//			if(e.ctrlKey) { 
//				var temp = c.strokeStyle;
//				c.strokeStyle = c.tertStyle;
//				c.tertStyle = temp;
//			}
//		}
//	
//		//iface.status.innerHTML = 'c_up - status: '+c.tool.status;
//		return false;
//	}

//function c_outTousch(e) {
//	//var source = e.currentTarget;
//  console.log("Name",c.tool.name);
//	if(c && (c.tool.name=='pencil' || c.tool.name=='eraser' || c.tool.name=='brush') && c.tool.status==1) { 
//		c.tool.disconnected = 1;
//		m = getxy(e.touches[0], canvas);
//		c.tool.draw();
//		//iface.status.innerHTML = 'c_out: '+m.x+'/'+m.y+' '+c.fillStyle;
//	}

//	iface.xy.innerHTML = '&nbsp;';
//}


//function c_upTouch(e) {
//	//handles mouseup on the canvas depending on tool selected
//	
//		m = getxy(e.touches[0], canvas);
//	
//		e.stopPropagation();
//		if(iface.dragging || iface.resizing || c.resizing) { bodyUp(e); } //but not if dragging
//	
//		c.tool.up(e);
//		
//		if(c.tool.name != 'select' && c.tool.name != 'eraser' && c.tool.name != 'picker') { //no color switching for these
//			if(e.button == 2 && c.tool.name != 'eraser') { //right: switch stroke & fill back
//				var temp = c.fillStyle;
//				c.fillStyle = c.strokeStyle;
//				c.strokeStyle = temp;
//			}
//			if(e.ctrlKey) { 
//				var temp = c.strokeStyle;
//				c.strokeStyle = c.tertStyle;
//				c.tertStyle = temp;
//			}
//		}
//	
//		//iface.status.innerHTML = 'c_up - status: '+c.tool.status;
//		return false;
//	}

//function getxyTouch(e, o) {
//	//gets mouse position relative to object o
//	
//		if(c) {
//			var bo = getpos(o);
//			var x = e.clientX - bo.x + wsp.scrollLeft;	//correct for canvas position, workspace scroll offset
//			var y = e.clientY - bo.y + wsp.scrollTop;									
//			x += document.documentElement.scrollLeft;	//correct for window scroll offset
//			y += document.documentElement.scrollTop;									
//			x = (c.zoom) ? x/c.zoom : x; 	//correct for zoom
//			y = (c.zoom) ? y/c.zoom : y;
//			return { x: x-.5, y: y-.5 }; //-.5 prevents antialiasing of stroke lines
//		}
//	}

//	function c_moveTouch(e) {
//		m = getxy(e.touches[0], canvas);
//		e.stopPropagation();
//		if(iface.dragging || iface.resizing || c.resizing) { bodyMove(e); } //don't stop propagation if dragging
//	
//		if(c.tool.status > 0) {
//			console.log("move --00");
//			c.tool.move(e);
//		}
//	
//		if(c.tool.start && c.tool.status > 0) {
//			console.log("move 00");
//			iface.xy.innerHTML = Math.round(c.tool.start.x)+', '+Math.round(c.tool.start.y);
//		} else {
//			console.log("move 01");
//			iface.xy.innerHTML = Math.round(m.x)+', '+Math.round(m.y);
//		}
//		return false;
//	}


//function shortcuts(e) {
//	if(e.keyCode == 46) { //delete
//		if(c.tool.name == 'select' && c.tool.status > 0) { //del selection
//			c.tool.del();
//		}
//	} else if(e.ctrlKey || e.metaKey) {
//		var letter = String.fromCharCode(e.keyCode);
//		switch(letter) {	
//			case 'A':
//        sel_all();
//				break;
//			case 'C':
//				copy();
//				break;
//			case 'V':
//        paste();
//				break;
//			case 'X':
//        cut();
//				break;
//			case 'Z':
//        undo();
//				break;
//		}
//	}
//	return false;
//}

//function sel_all() {
//	selTool(document.getElementById('select'));
//	c.tool.all();
//	e.preventDefault();		
//	e.stopPropagation();
//}

//function sel_cancel() {
//  if(c.tool.status == 2) { c.drawImage(canvassel, Math.floor(ctemp.start.x), Math.floor(ctemp.start.y)); }
//  if(c.tool.status != 4) { canvastemp.style.display='none'; }
//}

//function copy() {
//  if(c.tool.name == 'select' && c.tool.status > 0) {  //copy selection
//		c.tool.copy();
//	}
//}

//function cut() {
//	if(c.tool.name == 'select' && c.tool.status > 0) {  //cut selection
//		c.tool.copy();
//		c.tool.del();
//	}
//}

//function paste() {
//	//todo only if something on canvassel
//	selTool(document.getElementById('select'));
//	c.tool.paste();
//}

//function undo() {
//  if(c.tool.name == 'select') {	//reset all info about current selection
//		activateTempCanvas(); 
//		canvastemp.style.display='none';
//		c.tool.status = 0;
//	}
//	undoLoad();
//}

//function getxy(e, o) {
////gets mouse position relative to object o

//	if(c) {
//		var bo = getpos(o);
//		var x = e.clientX - bo.x + wsp.scrollLeft;	//correct for canvas position, workspace scroll offset
//		var y = e.clientY - bo.y + wsp.scrollTop;									
//		x += document.documentElement.scrollLeft;	//correct for window scroll offset
//		y += document.documentElement.scrollTop;									
//		x = (c.zoom) ? x/c.zoom : x; 	//correct for zoom
//		y = (c.zoom) ? y/c.zoom : y;
//		return { x: x-.5, y: y-.5 }; //-.5 prevents antialiasing of stroke lines
//	}
//}

//function getpos(o) {
////gets position of object o
//	var bo, x, y, b; x = y = 0;
//	if(document.getBoxObjectFor) {	//moz
//		bo = document.getBoxObjectFor(o);
//		x = bo.x; y = bo.y;
//	} else if (o.getBoundingClientRect) { //ie (??)
//		bo = o.getBoundingClientRect();
//		x = bo.left; y = bo.top;
//	} else { //opera, safari etc
//		while(o && o.nodeName != 'BODY') {
//			x += o.offsetLeft;
//			y += o.offsetTop;
//			b = parseInt(document.defaultView.getComputedStyle(o,null).getPropertyValue('border-width'));
//			if(b > 0) { x += b; y +=b; }
//			o = o.offsetParent;
//		}
//	}
//	return { x:x, y:y }
//}


//function zoomTo(level) {
////changes zoom level (by css-sizing canvas)

//	var lastzoom = c.zoom;
//	if(lastzoom) { //to diff zoom level: scale back first
//		canvas.style.width=canvastemp.style.width=canvas.offsetWidth/c.zoom+'px';
//		canvas.style.height=canvastemp.style.height=canvas.offsetHeight/c.zoom+'px';
//		c.zoom=null;
//		//todo: fix scrollbars
//	}
//	if(lastzoom != level && level > 1) {
//		c.zoom=level;
//		canvas.style.width=canvastemp.style.width=level*canvas.offsetWidth+'px';
//		canvas.style.height=canvastemp.style.height=level*canvas.offsetHeight+'px';
//	}
//	
//	//todo: move resize indicator
//}

//var tool = {

//	_shapes: function() {

//		this.down = this._down = function() {
//			undoSave();
//			activateTempCanvas();
//			this.start = { x:m.x, y:m.y } 
//			this.status = 1;
//			c.beginPath();
//		}
//		this._move = function() {
//			ctemp.clearRect(0, 0, canvastemp.width, canvastemp.height);
//			iface.txy.innerHTML = Math.round(m.x-this.start.x)+'x'+Math.round(m.y-this.start.y);
//		}
//		this._up = function() {
//			canvastemp.style.display='none';
//			this.status = 0;
//			iface.txy.innerHTML = '&nbsp;';
//		}

//	},

//	_brushes: function() {

//		this.down = function() {
//			this.last = null;
//			this.cp = null;
//			this.lastcp = null;
//			this.disconnected = null;
//			c.beginPath();

//			undoSave();
//			this.sstart = this.last = { x:m.x, y:m.y } //extra s in sstart to not affect status bar display
//			this.status = 1;
//		}
//		this.move = function(e) { 

//			if(this.disconnected) {	//re-entering canvas: dont draw a line
//				iface.status.innerHTML = 'reentering';
//				this.disconnected = null;
//				this.last = { x:m.x, y:m.y }
//			} else {				//draw connecting line
//				this.draw();
//			}
//			c.moveTo(m.x, m.y);

//		}
//		this.up = function() {
//			if(this.sstart && this.sstart.x == m.x && this.sstart.y == m.y) {
//				drawDot(m.x, m.y, c.lineWidth, c.strokeStyle);
//			}
//			this.sstart = null;
//			this.status = 0;
//		}
//		this.draw = function() {

//			if(prefs.pretty) { 

//				//calculate control point
//				this.cp = { x:m.x, y:m.y } //default: no bezier	
//				var deltax = Math.abs(m.x-this.last.x);
//				var deltay = Math.abs(m.y-this.last.y);
//				if(this.last && (deltax+deltay > 10)) { //long line

//					//had no control point last time: use last vertex
//					var lx = (this.lastcp) ? this.lastcp.x : this.last.x;	//should be last2x?
//					var ly = (this.lastcp) ? this.lastcp.y : this.last.y;
//					var delta2x = this.last.x-lx;	var delta2y = this.last.y-ly;
// 					this.cp = { x:lx+delta2x*1.4, y:ly+delta2y*1.4 }

//				}
//				this.lastcp = { x:this.cp.x, y:this.cp.y }

//				c.bezierCurveTo(this.cp.x, this.cp.y, m.x, m.y, m.x, m.y);  //make pretty curve, first two params =control pt
//				c.stroke();	
//				c.beginPath();
//				if(prefs.controlpoints) { 
//					if(!(this.cp.x==m.x && this.cp.y==m.y)) { drawDot(this.cp.x, this.cp.y, 3, 'blue'); }
//					drawDot(this.last.x, this.last.y, 3, 'red');
//				}

//			} else { //unpretty
//				c.lineTo(m.x, m.y);
//				c.stroke();	
//				c.beginPath();
//				if(prefs.controlpoints) { 
//					drawDot(m.x, m.y, 3, 'red');
//				}
//			}
//				
//			this.last = { x:m.x, y:m.y }	
//		}

//	},



//	pencil: function() {

//		this.name = 'pencil';
//		this.status = 0;
//		this.inherit = tool._brushes; this.inherit();

//		c.lineCap = 'butt';
//		c.lineWidth = 1;

//	},


//	brush: function() {

//		this.name = 'brush';
//		this.status = 0;
//		this.inherit = tool._brushes; this.inherit();

//	},


//	eraser: function() {

//		this.name = 'eraser';
//		this.status = 0;
//		this.inherit = tool._brushes; this.inherit();

//		c.lineCap = 'square';
//		c.lineWidth = 7;
//		c.lastStrokeStyle = c.strokeStyle;
//		c.strokeStyle = c.fillStyle; //'#FFF'; //selCol('#FFF');

//	},


//	line: function() {

//		this.name = 'line';
//		this.status = 0;
//		this.inherit = tool._shapes; this.inherit();

//		c.lineCap = 'round';
//		c.lineWidth = 1;

//		this.move = function(e) {
//			this._move();
//			drawLine(this.start.x, this.start.y, m.x, m.y, e.shiftKey, ctemp);
//		}
//		this.up = function(e) {
//			this._up();
//			drawLine(this.start.x, this.start.y, m.x, m.y, e.shiftKey, c);
//		}

//	},


//	rectangle: function() {

//		this.name = 'rectangle';
//		this.status = 0;
//		this.inherit = tool._shapes; this.inherit();

//		this.move = function(e) {
//			this._move();
//			drawRectangle(this.start.x, this.start.y, m.x, m.y, e.shiftKey, ctemp);
//		}
//		this.up = function(e) {
//			this._up();
//			drawRectangle(this.start.x, this.start.y, m.x, m.y, e.shiftKey, c);
//		}

//	},


//	ellipse: function() {

//		this.name = 'ellipse';
//		this.status = 0;
//		this.inherit = tool._shapes; this.inherit();

//		this.down = function(e) {
//			this._down();
//			this.lastLineWidth = c.lineWidth;
//			if(c.strokeFill == 3) { c.lineWidth+=1.1; ctemp.lineWidth+=1.1; } //hm
//		}
//		this.move = function(e) {
//			this._move();
//			drawEllipse(this.start.x, this.start.y, m.x, m.y, e.shiftKey, ctemp);
//		}
//		this.up = function(e) {
//			this._up();
//			drawEllipse(this.start.x, this.start.y, m.x, m.y, e.shiftKey, c);
//			if(c.strokeFill == 3) { c.lineWidth = this.lastLineWidth; ctemp.lineWidth = this.lastLineWidth; }
//		}

//	},


//	rounded: function() {

//		this.name = 'rounded';
//		this.status = 0;
//		this.inherit = tool._shapes; this.inherit();
//		
//		this.move = function(e) {
//			this._move();
//			drawRounded(this.start.x, this.start.y, m.x, m.y, e.shiftKey, ctemp);
//		}
//		this.up = function(e) {
//			this._up();
//			drawRounded(this.start.x, this.start.y, m.x, m.y, e.shiftKey, c);
//		}

//	},


//	curve: function() {

//		this.name = 'curve';
//		this.status = 0;

//		c.lineCap = 'round';
//		c.lineWidth = 1;

//		this.down = function() {
//			if(this.status==0) { //starting
//				undoSave();
//				activateTempCanvas();
//				this.start = { x:m.x, y:m.y } 
//				this.end = null;
//				this.bezier1 = null;
//				this.status = 5;
//				c.beginPath();
//			} else if(this.status==4 || this.status==2) { //continuing
//				this.status--;
//			}
//		}
//		this.move = function(e) { 
//			if(this.status==5) {

//				ctemp.clearRect(0, 0, canvastemp.width, canvastemp.height);
//				drawLine(this.start.x, this.start.y, m.x, m.y, e.shiftKey, ctemp);
//				ctemp.stroke();
//				iface.txy.innerHTML = Math.round(m.x-this.start.x)+'x'+Math.round(m.y-this.start.y);

//			} else if(this.status == 3 || this.status == 1) {

//				ctemp.clearRect(0, 0, canvastemp.width, canvastemp.height);

//				ctemp.moveTo(this.start.x, this.start.y);
//				var b1x = (this.bezier1) ? this.bezier1.x : m.x;
//				var b1y = (this.bezier1) ? this.bezier1.y : m.y;
//				var b2x = (this.bezier1) ? m.x : this.end.x;
//				var b2y = (this.bezier1) ? m.y : this.end.y;

//				ctemp.bezierCurveTo(b1x, b1y, b2x, b2y, this.end.x, this.end.y);
//				ctemp.stroke();
//				iface.txy.innerHTML = Math.round(this.end.x-this.start.x)+'x'+Math.round(this.end.y-this.start.y);
//			}
//		}
//		this.up = function() {
//			if(this.status==5) { //setting endpoint     // && source.id != 'body'
//				this.end = { x:m.x, y:m.y }
//				this.status = 4;
//			} else if(this.status==3) { //setting bezier1  && source.id != 'body'
//				this.bezier1 = { x:m.x, y:m.y }
//				ctemp.clearRect(0, 0, canvastemp.width, canvastemp.height);
//				ctemp.moveTo(this.start.x, this.start.y);
//				ctemp.bezierCurveTo(m.x, m.y, this.end.x, this.end.y, this.end.x, this.end.y);
//				ctemp.stroke();
//				this.status = 2;
//			} else if(this.status==1) { //setting bezier2  && source.id != 'body'
//				canvastemp.style.display='none';
//				c.moveTo(this.start.x, this.start.y);
//				c.bezierCurveTo(this.bezier1.x, this.bezier1.y,  m.x, m.y, this.end.x, this.end.y);
//				c.stroke();
//				this.status = 0;
//				iface.txy.innerHTML = '&nbsp;';
//			}
//		}
//	
//	},

//	
//	polygon: function() {

//		this.name = 'polygon';
//		this.status = 0;
//		this.points = new Array();

//		this.down = function() {
//			if(this.status==0) { //starting poly
//				undoSave();
//				activateTempCanvas();
//				this.start = { x:m.x, y:m.y } 
//				this.last = null;
//				this.status = 3;
//				this.points = new Array();
//				c.beginPath();
//			} else if(this.status==1) { //adding points
//				this.status = 2;
//			}	
//		}
//		this.move = function(e) { 
//			if(this.status == 3) { //first polyline
//				ctemp.clearRect(0, 0, canvastemp.width, canvastemp.height);
//				drawLine(this.start.x, this.start.y, m.x, m.y, e.shiftKey, ctemp);
//			} else if(this.status == 2) { // next polyline
//				ctemp.clearRect(0, 0, canvastemp.width, canvastemp.height);
//				drawLine(this.last.x, this.last.y, m.x, m.y, e.shiftKey, ctemp);
//			}
//			iface.txy.innerHTML = Math.round(m.x-this.start.x)+'x'+Math.round(m.y-this.start.y);
//		}
//		this.up = function(e) {
//			if(Math.abs(m.x-this.start.x) < 4 && Math.abs(m.y-this.start.y) < 4) { //closing
//				this.close();
//			} else {
//				ctemp.clearRect(0, 0, canvastemp.width, canvastemp.height);
//				var fromx = (this.status==2) ? this.last.x : this.start.x;
//				var fromy = (this.status==2) ? this.last.y : this.start.y;
//				var end = drawLine(fromx, fromy, m.x, m.y, e.shiftKey, c); //TODO cant drawline on c yet...3rd canvas??
//				this.last = { x:m.x, y:m.y };
//				this.points[this.points.length] = { x:m.x, y:m.y };
//				this.status = 1;
//			}
//			trg.stroke();
//		}
//		this.close = function() {
//			if(this.last.x) { // not just started			
//				c.beginPath();
//				c.moveTo(this.start.x, this.start.y);
//				for(var i=0; i<this.points.length; i++) {
//					c.lineTo(this.points[i].x, this.points[i].y);
//				}
//				c.lineTo(this.last.x, this.last.y);
//				c.lineTo(this.start.x, this.start.y);
//				if(c.strokeFill == 2 || c.strokeFill == 3) { c.fill(); }
//				if(c.strokeFill == 1 || c.strokeFill == 3) { c.stroke(); }

//				c.fill();
//			} else {
//				//iface.txy.innerHTML = 'aborted';
//			}
//			canvastemp.style.display='none';
//			this.status = 0;
//		}

//	},


//	airbrush: function() {
//	
//		this.name = 'airbrush';
//		this.status = 0;

//		c.lineCap = 'square';

//		this.down = function() {
//			undoSave();
//			this.drawing = setInterval('c.tool.draw()', 50);
//			this.last = { x:m.x, y:m.y }
//			this.lineCap = 'square';
//			this.status = 1;
//		}
//		this.move = function(e) { 
//			this.last = { x:m.x, y:m.y }
//		}
//		this.up = function(e) {
//			clearInterval(this.drawing);
//			this.status = 0;
//		}
//		
//		this.draw = function() {
//			//iface.txy.innerHTML = this.last.x+'/'+this.last.y;
//			c.save();
//			c.beginPath();
//			c.arc(this.last.x, this.last.y, c.lineWidth*4, 0, Math.PI*2, true);
//			c.clip();
//			for(var i=c.lineWidth*15; i>0; i--) {
//				var rndx = c.tool.last.x + Math.round(Math.random()*(c.lineWidth*8)-(c.lineWidth*4));
//				var rndy = c.tool.last.y + Math.round(Math.random()*(c.lineWidth*8)-(c.lineWidth*4));
//				drawDot(rndx, rndy, 1, c.strokeStyle);
//			}
//			c.restore();
//		}


//	},


//	zoom: function() {

//		this.name = 'zoom';
//		this.status = 0;

//		//c.lastTool = c.tool.name;

//		this.down = function() {
//			zoomTo(c.selectedzoom);
//		}
//		this.move = function() { }
//		this.up = function() { }

//	},

//	picker: function() { 

//		this.name = 'picker';
//		this.status = 0;

//		this.down = function(e) {
//			csel.drawImage(canvas, m.x, m.y, 1, 1, 0, 0, canvassel.width, canvassel.height);
//			var pat = c.createPattern(canvassel, 'repeat');
//      selCol2(pat, e);
//			//selTool(document.getElementById(c.lastTool));
//		}
//		this.move = function() { }
//		this.up = function() { }

//	},
//	
//	
//	floodfill: function() {
//	  
//		this.name = 'floodfill';
//		this.status = 0;
//		
//		this.down = function(e) {
//		    
//  			undoSave();
//		  
//        //var imgd = c.getImageData(0, 0, canvas.width, canvas.height);
//        var x = Math.round(m.x);
//        var y = Math.round(m.y);

//        var oldColor = getPixel(x, y);
//        if(!oldColor) { alert('Sorry, your browser doesn\'t support flood fill.'); return false; } 
//        if(oldColor == c.strokeStyle) { return; }
//        
//        iface.status.innerHTML = 'Filling... please wait.';
//        iface.xy.innerHTML = oldColor;
//        
//        var stack = [{x:x, y:y}];
//                       
//        //var n = 0;
//        while(popped = stack.pop()) {
//            //n++;
//            //iface.txy.innerHTML = 'while'+n;
//            var x = popped.x;   
//            var y1 = popped.y;
//            while(getPixel(x, y1) == oldColor && y1 >= 0) { y1--; }
//            y1++;
//            var spanLeft = false;
//            var spanRight = false;
//            while(getPixel(x, y1) == oldColor && y1 < canvas.height) {
//                //iface.xy.innerHTML = x+'/'+y1;
//                if(window.opera) { 
//                  co.setPixel(x, y1, c.strokeStyle);
//                } else {
//                  //c.beginPath();
//                  c.fillStyle = c.strokeStyle;
//                  c.fillRect(x, y1, 1, 1);
//                  //drawDot(x, y1, 1, c.strokeStyle, c);
//                  //document.getElementById('info').innerHTML += '<br />'+x+'/'+y1;
//                }
//                if(!spanLeft && x > 0 && getPixel(x-1, y1) == oldColor) {
//                  //break;
//                   stack.push({x:x-1, y:y1});        
//                    spanLeft = true;
//                } else if(spanLeft && x > 0 && getPixel(x-1, y1) != oldColor) {
//                    spanRight = false;
//                } else if(spanRight && x <= 0) { spanRight = false; }
//                if(!spanRight && x < canvas.width-1 && getPixel(x+1, y1) == oldColor) {
//                  //break;
//                  stack.push({x:x+1, y:y1});
//                    spanRight = true;
//                } else if(spanRight && x < canvas.width-1 && getPixel(x+1, y1) != oldColor) {
//                    spanRight = false;
//                } else if(spanRight && x >= canvas.width) { spanRight = false; }
//                y1++;                   
//            }
//        }        
//        
//        
//        if(window.opera) {
//          co.lockCanvasUpdates(false);
//          co.updateCanvas();
//        }
//        //document.getElementById('info').innerHTML = check;
//        
//        iface.status.innerHTML = 'Finished filling.';
//  		  		   
//		}
//		
//    this.move = function() { }
//		this.up = function() { }
//	  
//	},

//	select: function() {

//		this.name = 'select';
//		this.status = 0;

//		//c.lastTool = c.tool.name;
//		c.lineWidth = 1;
//		var dashed = new Image();
//		dashed.src = 'icons/dashed2.gif';
//		c.lastStrokeStyle = c.strokeStyle;
//		c.strokeStyle = c.createPattern(dashed, 'repeat');
//		c.strokeFill = 1;
//		c.beginPath();

//		this.down = function(e) { 
//			if(this.status==0) { //starting select
//				var dashed = new Image(); //doing this here instead of in selTool to ignore user changing color
//				dashed.src = 'icons/dashed2.gif';
//				c.strokeStyle = c.createPattern(dashed, 'repeat');
//				activateTempCanvas();
//				this.start = { x:m.x, y:m.y } 
//				this.status = 4;
//			} else if(this.status==3 || this.status==2) { //moving selection
//				if(intersects(m, this.start, this.dimension)) {
//					this.offset = { x:m.x-this.start.x, y:m.y-this.start.y } 
//					if(this.status == 3 && !e.ctrlKey && !e.shiftKey) { //when first moving (and not in stamp mode), clear original pos and paint on tempcanvas
//						undoSave();
//						var pos = { x:m.x-this.offset.x, y:m.y-this.offset.y }
//						drawRectangle(pos.x-1, pos.y-1, pos.x+this.dimension.x, pos.y+this.dimension.y, null, ctemp);
//						ctemp.drawImage(canvassel, Math.floor(pos.x), Math.floor(pos.y));
//						c.fillRect(this.start.x-.5, this.start.y-.5, this.dimension.x, this.dimension.y);
//					}
//					this.status = 1;
//				} else {  //starting new selection
//					if(this.status < 3) { //actually draw last moved selection to canvas TODO also do this when switching tools
//						c.drawImage(canvassel, Math.floor(this.start.x), Math.floor(this.start.y));
//					}
//					activateTempCanvas();
//					this.start = { x:m.x, y:m.y } 
//					this.status = 4;
//				}
//			}
//		}
//		this.move = function(e) {
//			if(this.status==4) { //selecting

//				ctemp.clearRect(0, 0, canvastemp.width, canvastemp.height);
//				var constrained = { x:constrain(m.x, 0, canvas.width), y:constrain(m.y, 0, canvas.height-5) }
//				drawRectangle(this.start.x-1, this.start.y-1, constrained.x, constrained.y, null, ctemp);
//				iface.txy.innerHTML = Math.round(constrained.x-this.start.x)+'x'+Math.round(constrained.y-this.start.y);	

//			} else if(this.status==1) { //moving selection

//				ctemp.clearRect(0, 0, canvastemp.width, canvastemp.height);
//				var pos = { x:m.x-this.offset.x, y:m.y-this.offset.y }
//				drawRectangle(pos.x-1, pos.y-1, pos.x+this.dimension.x, pos.y+this.dimension.y, null, ctemp);
//				ctemp.drawImage(canvassel, Math.floor(pos.x), Math.floor(pos.y));
//				if(e.shiftKey) { //dupli mode
//					c.drawImage(canvassel, Math.floor(pos.x), Math.floor(pos.y));
//				}
//			} else if(this.start) {
//				if(c.tool.status == 1 || (c.tool.dimension && intersects(m, c.tool.start, c.tool.dimension))) {
//					canvastemp.style.cursor = 'move';
//				} else {
//					canvastemp.style.cursor = '';		
//				}
//			}

//		}
//		this.up = function(e) {
//			if(this.status == 4) { //finished selecting

//				this.status = 3;
//				this.dimension = { x:constrain(m.x, 0, canvas.width)-this.start.x,
//								   y:constrain(m.y, 0, canvas.height)-this.start.y }
//				if(this.dimension.x == 0 && this.dimension.y == 0) { //nothing selected, abort
//					this.status = 0;
//					canvastemp.style.display='none';
//					csel.clearRect(0, 0, canvassel.width, canvassel.height);
//				} else { //save on selection canvas
//					csel.clearRect(0, 0, canvassel.width, canvassel.height);
//					if(this.dimension.x < 0) { this.start.x = this.start.x + this.dimension.x; this.dimension.x *= -1; } //correct for selections not drawn from top left
//					if(this.dimension.y < 0) { this.start.y = this.start.y + this.dimension.y; this.dimension.y *= -1; }
//					//todo check for >max
//					csel.drawImage(canvas, Math.floor(this.start.x), Math.floor(this.start.y), this.dimension.x, this.dimension.y, 0, 0, this.dimension.x, this.dimension.y);
//					csel.dimension = this.dimension;
//				}	
//				iface.txy.innerHTML = '&nbsp;';

//			} else if(this.status == 1) { //finished moving selection
//				this.status = 2;
//				this.start = { x:m.x-this.offset.x, y:m.y-this.offset.y }
//				if(e.ctrlKey) { //stamp mode
//					c.drawImage(canvassel, Math.floor(this.start.x), Math.floor(this.start.y));
//				}
//			}
//		}

//		this.del = function() { 
//			undoSave();
//			c.fillRect(this.start.x-.5, this.start.y-.5, this.dimension.x, this.dimension.y);
//			activateTempCanvas(); 
//			canvastemp.style.display = 'none';
//			this.status = 0;
//		}
//		this.all = function() { 
//			csel.clearRect(0, 0, canvassel.width, canvassel.height);
//			csel.drawImage(canvas, 0, 0);
//			activateTempCanvas();
//			this.start = { x:0.5, y:0.5 }
//			this.dimension = { x:canvas.width, y:canvas.height }		
//			ctemp.strokeRect(0.5, 0.5, canvas.width-1, canvas.height-1);
//			this.status = 3;
//		}
//		this.copy = function() {
//			csel.drawImage(canvas, Math.floor(this.start.x), Math.floor(this.start.y), this.dimension.x, this.dimension.y, 0, 0, this.dimension.x, this.dimension.y);
//			csel.dimension = this.dimension;
//		}
//		this.paste = function() {
//			activateTempCanvas();
//			ctemp.drawImage(canvassel, 0, 0);
//			this.status = 3;
//			this.start = { x:.5, y:.5 }
//			this.dimension = csel.dimension;
//			ctemp.strokeRect(this.start.x-.5, this.start.y-.5, this.dimension.x+.5, this.dimension.y+.5);

//		}

//	}

//}


//function getPixel(x, y) {
// 
//  if(imgd || c.getImageData) {
//    //if(!imgd) {
//    //  imgd = c.getImageData(0, 0, canvas.width, canvas.height);
//    //  alert('getting img data');
//    // }
//    //var pos = (y*canvas.width+x)*4;
//    //if(imgd.data[pos]) {
//    //  var col = 'rgb('+imgd.data[pos]+', '+imgd.data[pos+1]+', '+imgd.data[pos+2]+')'; //rgba: ', '+imgd.data[pos+3]+')';
//    //  check += '<br />'+x+'/'+y+': '+col;
//    //  //drawDot(x, y, 1, 'red', c);   
//    //  return col;
//    //} else {
//      return false;
//    //}
//  } else if (window.opera) {
//    if(!co) { co = canvas.getContext('opera-2dgame');	}
//    col = co.getPixel(x, y);
//    //check += '<br />'+x+'/'+y+': '+col;
//    return col;
//  } else {
//    return false; 
//  }
//  
//}  


//function c_down(e) {
////handles mousedown on the canvas depending on tool selected

//	var source = e.currentTarget;
//	m = getxy(e, canvas);

//	if(c.tool.name != 'select' && c.tool.name != 'eraser' && c.tool.name != 'picker') { //no color switching for these
//		if(e.ctrlKey) {							 //ctrl: switch tert & stroke
//			var temp = c.tertStyle;
//			c.tertStyle = c.strokeStyle;
//			c.strokeStyle = temp;
//		}
//		if(e.button == 2 && c.tool.name != 'eraser') { //right: switch stroke & fill
//			var temp = c.strokeStyle;
//			c.strokeStyle = c.fillStyle;
//			c.fillStyle = temp;
//		}
//	}

//	c.tool.down(e);
//	c.moveTo(m.x, m.y); //?

//	//iface.status.innerHTML = 'c_down: '+m.x+'/'+m.y+' - status:'+c.tool.status+' - source:'+source.id+' - tool:'+c.tool.name;
//	return false;
//}


//function c_up(e) {
////handles mouseup on the canvas depending on tool selected

//	m = getxy(e, canvas);

//	e.stopPropagation();
//	if(iface.dragging || iface.resizing || c.resizing) { bodyUp(e); } //but not if dragging

//	c.tool.up(e);
//	
//	if(c.tool.name != 'select' && c.tool.name != 'eraser' && c.tool.name != 'picker') { //no color switching for these
//		if(e.button == 2 && c.tool.name != 'eraser') { //right: switch stroke & fill back
//			var temp = c.fillStyle;
//			c.fillStyle = c.strokeStyle;
//			c.strokeStyle = temp;
//		}
//		if(e.ctrlKey) { 
//			var temp = c.strokeStyle;
//			c.strokeStyle = c.tertStyle;
//			c.tertStyle = temp;
//		}
//	}

//	//iface.status.innerHTML = 'c_up - status: '+c.tool.status;
//	return false;
//}

//function c_move(e) {
//	m = getxy(e, canvas);
//	e.stopPropagation();
//	if(iface.dragging || iface.resizing || c.resizing) { bodyMove(e); } //don't stop propagation if dragging

//	if(c.tool.status > 0) {
//		c.tool.move(e);
//	}

//	if(c.tool.start && c.tool.status > 0) {
//		iface.xy.innerHTML = Math.round(c.tool.start.x)+', '+Math.round(c.tool.start.y);
//	} else {
//		iface.xy.innerHTML = Math.round(m.x)+', '+Math.round(m.y);
//	}
//	return false;
//}

//function c_out(e) {
//	//var source = e.currentTarget;

//	if(c && (c.tool.name=='pencil' || c.tool.name=='eraser' || c.tool.name=='brush') && c.tool.status==1) { 
//		c.tool.disconnected = 1;
//		m = getxy(e, canvas);
//		c.tool.draw();
//		//iface.status.innerHTML = 'c_out: '+m.x+'/'+m.y+' '+c.fillStyle;
//	}

//	iface.xy.innerHTML = '&nbsp;';
//}



//function activateTempCanvas() {
////resets and shows overlay canvas

//	if(m) { ctemp.moveTo(m.x, m.y); }							//copy context from main
//	ctemp.lineCap = c.lineCap;								
//	ctemp.lineWidth = c.lineWidth;
//	ctemp.strokeStyle = c.strokeStyle;
//	ctemp.fillStyle = c.fillStyle;
//	ctemp.clearRect(0, 0, canvastemp.width, canvastemp.height);	//clear
//	canvastemp.style.display='block';							//show

//}



//function undoSave() {
////sets an undo point
//	//cundo.clearRect(0, 0, canvas.width, canvas.height); //this doesn't help with the bg..
//	if(imgd) { imgd = null; }
//	if(canvas.width != canvasundo.width || canvas.height != canvasundo.height) { 
//		canvasundo.width = canvas.width;
//		canvasundo.height = canvas.height;
//	}
//	cundo.drawImage(canvas, 0, 0);
//}
//function undoLoad() {
////reverts to last undo point
//	if(canvas.width != canvasundo.width || canvas.height != canvasundo.height) { 
//		clipResize(canvasundo.width, canvasundo.height);
//	}
//	//ctemp.clearRect(0, 0, canvas.width, canvas.height);
//	ctemp.drawImage(canvas, 0, 0);
//	//c.clearRect(0, 0, canvas.width, canvas.height);
//	c.drawImage(canvasundo, 0, 0);
//	//cundo.clearRect(0, 0, canvas.width, canvas.height);
//	cundo.drawImage(canvastemp, 0, 0);
//}


//function windowDrag(e) {
//	iface.dragging = true;
//	var win = wsp.parentNode.parentNode.parentNode;
//	var pos = getpos(win);
//	c.start = { x:e.clientX-pos.x+1, y:e.clientY-pos.y+1 };
//}
//function windowResize(e, o) {
//	iface.resizing = true;
//	var pos = getpos(o);
//	c.start = { x:o.offsetWidth+3-(e.clientX-pos.x), y:o.offsetHeight+3-(e.clientY-pos.y) };
//	e.stopPropagation();
//	document.body.style.cursor = 'nw-resize';
//}

//function canvasResize(e) {
//	c.resizing = true;
//	document.body.style.cursor = 'nw-resize';
//	canvastemp.lastCursor = canvastemp.style.cursor;
//	canvastemp.style.cursor = 'nw-resize';
//	activateTempCanvas();
//	var dotted = new Image(); dotted.src = 'icons/dotted.gif';
//	ctemp.strokeStyle = ctemp.createPattern(dotted, 'repeat');
//}


//function clipResize(w, h) { 
////resizes all the canvases by clipping/extending, moves resize handle
//	undoSave();
//	cundo.fillStyle = c.fillStyle; //save
//	canvas.width = canvastemp.width = canvassel.width = w;
//	canvas.height = canvastemp.height = canvassel.height = h;
//	canvas.style.width = canvastemp.style.width = w+'px';
//	canvas.style.height = canvastemp.style.height = h+'px';
//	var cresizer = document.getElementById('canvasresize');
//	cresizer.style.left = w+cresizer.offsetWidth+'px'; cresizer.style.top = h+cresizer.offsetHeight+'px';
//	c.fillStyle = cundo.fillStyle; //restore
//	c.fillRect(0, 0, canvas.width, canvas.height); //so that if expanding it's filled with bg col
//	c.drawImage(canvasundo, 0, 0);
//}


//function bodyMove(e) {
////lets the user move outside the canvas while drawing shapes and lines

//	if(c.tool.status > 0) { c_move(e); }	

//	if(c.resizing) {	
//		m = getxy(e, document.body);
//		var win = wsp.parentNode.parentNode.parentNode;
//		ctemp.clearRect(0, 0, canvastemp.width, canvastemp.height);
//		ctemp.strokeRect(0, 0, m.x, m.y); //dotted line
//	} else if(iface.dragging) {
//		m = getxy(e, document.body);
//		var win = wsp.parentNode.parentNode.parentNode;
//		win.style.left = e.clientX-c.start.x+'px';
//		win.style.top = e.clientY-c.start.y+'px';
//	} else if(iface.resizing) {
//		m = getxy(e, document.body);
//		var win = wsp.parentNode.parentNode.parentNode;
//		win.style.width = e.clientX-win.offsetLeft+c.start.x+3+'px';
//		win.style.height = e.clientY-win.offsetTop+c.start.y+3+'px';
//		//todo prevent selecting statusbar text.. how?
//	}

//}


//function bodyUp(e) {
////stops drawing even if mouseup happened outside canvas
////closes menus if clicking somewhere else

//	if(c.resizing) {
//		c.resizing = false; document.body.style.cursor = 'auto'; canvastemp.style.cursor = canvastemp.lastCursor;
//		m = getxy(e, wsp);
//		clipResize(m.x-3, m.y-3);
//	}
//	if(iface.dragging) { iface.dragging = false; }
//	if(iface.resizing) { iface.resizing = false; document.body.style.cursor = 'auto'; }

//	if(c.tool.name == 'select') { //cancel selection or finalize selection move
//    sel_cancel();
//	}

//	if(c && c.tool.name != 'polygon' && c.tool.status > 0) {
//		c_up(e);
//	}
//	//if(document.getElementById('menubar').className=='open') {
//		//document.getElementById('menubar').className='';
//		//e.stopPropagation();
//	//}

//}

//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(x1, y1, x2, y2, mod, trg) { 

//	if(trg.lineWidth % 2 == 0) { x1 = Math.floor(x1); y1 = Math.floor(y1); x2 = Math.floor(x2); y2 = Math.floor(y2); } //no antialiasing

//	trg.beginPath();
//	trg.moveTo(x1, y1);
//	if(mod) {
//		var dx = Math.abs(x2-x1);
//		var dy = Math.abs(y2-y1);	
//		var dd = Math.abs(dx-dy);
//		if(dx > 0 && dy > 0 && dx != dy) {
//			if(dd < dx && dd < dy) { //diagonal
//				if(dx < dy) {
//					y2 = y1+(((y2-y1)/dy)*dx);
//				} else {
//					x2 = x1+(((x2-x1)/dx)*dy);
//				}
//			} else if(dx < dy) {
//				x2 = x1;
//			} else if(dy < dx) {
//				y2 = y1;
//			}
//		}
//	}
//	trg.lineTo(x2, y2);
//	trg.stroke();
//	trg.beginPath();
//	return { x:x2, y:y2 }
//}

//function drawEllipse(x1, y1, x2, y2, mod, trg) {
//	//bounding box. this maybe isn't the best idea?
//	 
//	var dx = Math.abs(x2-x1);
//	var dy = Math.abs(y2-y1);
//	
//	if(mod && !(dx==dy)) { 	//shift held down: constrain
//		if(dx < dy) {
//			x2 = x1+(((x2-x1)/dx)*dy);
//		} else {
//  		y2 = y1+(((y2-y1)/dy)*dx);
//		} 
//	}

//  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;

//	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); 

//	if(c.strokeFill == 1 || c.strokeFill == 3) { trg.stroke(); }
//	if(c.strokeFill == 2 || c.strokeFill == 3) { trg.fill();   }
//}


//function drawRectangle(x1, y1, x2, y2, mod, trg) {

//	var dx = Math.abs(x2-x1);
//	var dy = Math.abs(y2-y1);

//	if(mod && dx != dy) {	//shift held down: constrain
//		if(dx < dy) {
//			y2 = y1+(((y2-y1)/dy)*dx);
//		} else {
//			x2 = x1+(((x2-x1)/dx)*dy);
//		}
//	}
//	
//	if(c.strokeFill == 2 || trg.lineWidth % 2 == 0) {    //no antialiasing
//		x1 = Math.floor(x1); y1 = Math.floor(y1); x2 = Math.floor(x2); y2 = Math.floor(y2);
//	}
//	trg.rect(x1, y1, (x2-x1), (y2-y1));
//	if(c.strokeFill == 2 || c.strokeFill == 3) { trg.fill(); }
//	if(c.strokeFill == 1 || c.strokeFill == 3) { trg.stroke(); }

//}

//function drawRounded(x1, y1, x2, y2, mod, trg) {

//	var dx = Math.abs(x2-x1);
//	var dy = Math.abs(y2-y1);

//	if(mod && dx != dy) {	//shift held down: constrain
//		if(dx < dy) {
//			y2 = y1+(((y2-y1)/dy)*dx);
//			dy = dx;
//		} else {
//			x2 = x1+(((x2-x1)/dx)*dy);
//			dx = dy;
//		}
//	}
//	var dmin = (dx < dy) ? dx : dy;
//	var cornersize = (dmin/2 >= 15) ? 15 : dmin/2;
//	
//	var xdir = (x2 > x1) ? cornersize : -1*cornersize;
//	var ydir = (y2 > y1) ? cornersize : -1*cornersize;

//	drawRounded2(trg, x1, x2, y1, y2, xdir, ydir);
//	if(c.strokeFill == 2 || c.strokeFill == 3) { trg.fill(); }
//	if(c.strokeFill == 1 || c.strokeFill == 3) { trg.stroke(); }

//}
//function drawRounded2(trg, x1, x2, y1, y2, xdir, ydir) {
//	trg.beginPath();
//	trg.moveTo(x1, y1+ydir);
//	trg.quadraticCurveTo(x1, y1, x1+xdir, y1);
//	trg.lineTo(x2-xdir, y1);
//	trg.quadraticCurveTo(x2, y1, x2, y1+ydir);
//	trg.lineTo(x2, y2-ydir);
//	trg.quadraticCurveTo(x2, y2, x2-xdir, y2);
//	trg.lineTo(x1+xdir, y2);
//	trg.quadraticCurveTo(x1, y2, x1, y2-ydir);
//	trg.closePath();
//}



//function constrain(n, min, max) {
//	if(n > max) return max;
//	if(n < min) return min;
//	return n;
//}

//function intersects(m, start, dim) {
////checks if m(x,y) is between start(x,y) and start+dim(x,y)
//	if(	m.x >= start.x && m.y >= start.y &&
//		m.x <= (start.x+dim.x) && m.y <= (start.y+dim.y)) {
//		return true;
//	} else {
//		return false;
//	}
//}



//function selCol(o, e, context) {
////context because silly safari doesnt capture right click, apparently.. thus oncontextmenu
////  alert(typeof(o));
//	col = (typeof(o) == 'string') ? o : o.style.backgroundColor;
//  selCol2(col, e, context);
////	if(e) e.preventDefault();

//}

//function selCol2(col, e, context) {
//	if(e && e.ctrlKey) {	//tertiary
//    var whichcanvas = document.getElementById('currcoltert');
//		c.tertStyle = col;
//	} else if(context == 1 || (e && e.button == 2)) { //right
//    var whichcanvas = document.getElementById('currcolback');
//		c.fillStyle = col;
//		ctemp.fillStyle=col;
//		if(c.tool.name=='eraser') { c.strokeStyle = col; }
//	} else {
//    var whichcanvas = document.getElementById('currcolfore');
//		c.strokeStyle=col;
//		ctemp.strokeStyle=col;
//		if(c.lastStrokeStyle) { c.lastStrokeStyle = col; } //allows color changing during select/eraser
//	}
//  
//  if(whichcanvas) {
//    whichcontext = whichcanvas.getContext('2d');
//    whichcontext.fillStyle = col;
//    whichcontext.fillRect(0, 0, whichcanvas.width, whichcanvas.height);
//  }
//  
//	if(e) e.preventDefault();

//}

//function selTool(o) {

//	c.tool.status = 0;
//	canvastemp.style.display='none';
//	var newtool = o.id;
//	iface.status.innerHTML=newtool;

//	document.getElementById('workspace').className = newtool;

//	//button highlighting
//	var toolbarbtns = document.getElementById('buttons').getElementsByTagName('li');
//	for(var i=0; i<toolbarbtns.length;i++) {
//		if(toolbarbtns[i].className == 'sel') { toolbarbtns[i].className=''; }
//	}
//	o.className = 'sel';
//	 
//	//reset color (after eraser and select)
//	if(c.lastStrokeStyle) { selCol(c.lastStrokeStyle); c.lastStrokeStyle = null }
//	
//	if(c.tool.name == 'polygon') { c.tool.close(); }

//	c.lastTool = c.tool.name;
//	c.tool = new tool[newtool]();

//	var newtool = shareSettingsPanels(c.tool.name);

//	//settings panel switching
//	var settingpanels = document.getElementById('settings').getElementsByTagName('div');
//	for(var i=0; i<settingpanels.length;i++) {
//		if(settingpanels[i].style.display == 'block') { settingpanels[i].style.display='none'; }
//	}
//	if(document.getElementById(newtool+'-settings')) {
//		document.getElementById(newtool+'-settings').style.display = 'block';
//		if(newtool != 'zoom') { //cause this would switch back
//			var settingbtns = document.getElementById(newtool+'-settings').childNodes;
//			for(var i=0; i<settingbtns.length;i++) { //reapply last selection
//				if(settingbtns[i].className == 'sel') { settingbtns[i].onclick(); }
//			}
//		}
//	}

//}

//function selSetting(o, sett) {

//	c.tool.status = 0;
//	canvastemp.style.display='none';

//	var newtool = shareSettingsPanels(c.tool.name);
//	
//	if(document.getElementById(newtool+'-settings')) {
//		var settingbtns = document.getElementById(newtool+'-settings').childNodes;
//		for(var i=0; i<settingbtns.length;i++) {
//			if(settingbtns[i].className == 'sel') { settingbtns[i].className=''; }
//		}
//		o.className = 'sel';
//		eval(sett);
//	}

//	if(c.tool.name=='zoom') {	//switch back
//		selTool(document.getElementById(c.lastTool));
//	}
//}

//function shareSettingsPanels(tool) {
//	if(tool=='select' || tool=='text')  { return 'select';  }
//	if(tool=='line'   || tool=='curve') { return 'line'; }
//	if(tool=='rectangle' || tool=='polygon'|| tool=='ellipse' || tool=='rounded') { return 'shape'; }
//	if(tool=='ffselect' || tool=='select'|| tool=='text') { return 'trans'; }
//	return tool;
//}


//function buttonReset(o) {
//	iface.status.innerHTML='&nbsp;';
//	if(o.className=='down') { o.className=''; }  //todo why isn't this working
//}
//function buttonDown(e, o) {
//	if(e.button != 2 && o.className != 'sel') { o.className='down'; } //not on rightclick
//}


//function save(hdd) {
//    
//  if(canvas.toDataURL) {
//    
//    var dataurl = canvas.toDataURL();
//    document.getElementById(hdd).value=dataurl;
//       //overlay('Please right-click/save-as to save your drawing. <a href="#" onclick="overlay_hide()">close</a><br /><img src="'+dataurl+'" title="Please right-click/save-as" />'); 
//       
//  } else {
//  	alert('Sorry, your browser does not implement the toDataURL() method required to save images.');
//  }
//}


//function saveonline(dataurl) {

//	var req = null;
//	iface.status.innerHTML="Saving to server...";

//	if (window.XMLHttpRequest) {
//	  req = new XMLHttpRequest();
//		//if (req.overrideMimeType) { req.overrideMimeType('text/xml'); }
//	} else {
//	  return;
//	}

//	req.onreadystatechange = function() { 
//		if(req.readyState == 4) {
//			if(req.status == 200) {
//				var response = req.responseText;
//        overlay('Your image has been saved as <input size="50" value="http://exigenc.org/'+response+'"> <a href="#" onclick="overlay_hide()">close</a><br /><img src="http://exigenc.org/'+response+'" />'); 
//			}	else {
//				iface.status.innerHTML="Post error code " + req.status + " " + req.statusText;
//			}	
//		} 
//	}; 
//	//req.open("POST", "save.php", true);
//	//req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//	//req.send('u='+dataurl);

//}

//function overlay(content) {
//  var obg = document.getElementById('overlaybg');
//  obg.style.display='block';
//  var o = document.getElementById('overlay');
//  o.innerHTML = content;
//  o.style.display = 'block';
//}
//function overlay_hide() { 
//  var o = document.getElementById('overlay');
//  o.innerHTML = '';
//  o.style.display = 'none';
//  document.getElementById('overlaybg').style.display = 'none';
//}

//function menuOpen(e, o) {
//	iface.txy.innerHTML = o.parentNode.className; //todo remove after fixing menu bug
//	o.parentNode.className = (o.parentNode.className != 'open') ? 'open' : '';
//	e.stopPropagation();
//}


//var paint = {
// 
//  open: function(url) {
////    if(url.indexOf('.') == -1) { url += '.png' }
////    if(url.indexOf('://') == -1) { url = 'http://exigenc.org/'+url; }
////    var src = (url.indexOf('http://exigenc.org/') > -1) ? url.replace('http://exigenc.org', '') : 'open.php?u='+url;
////    var img = document.createElement('img');
////    img.src = src;
////    img.style.visibility='none';
////    iface.status.innerHTML = 'Opening '+src+'...';
////    img.onload = function() {
////      clipResize(this.width, this.height);
////      c.drawImage(this, 0, 0);
////      iface.status.innerHTML = 'Opened '+url+'.';
////    }
////    img.onerror = function() {
////      alert('Error opening '+this.src);
////      iface.status.innerHTML = '';
////    }
//  }
//    
//}
//// 1337, dude.


/*
		El siguiente codigo en JS Contiene mucho codigo
		de las siguietes 3 fuentes:
		https://stipaltamar.github.io/dibujoCanvas/
		https://developer.mozilla.org/samples/domref/touchevents.html - https://developer.mozilla.org/es/docs/DOM/Touch_events
		http://bencentra.com/canvas/signature/signature.html - https://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html
*/
window.onload = function() { 
	window.setTimeout(function(){
	            /*
		El siguiente codigo en JS Contiene mucho codigo
		de las siguietes 3 fuentes:
		https://stipaltamar.github.io/dibujoCanvas/
		https://developer.mozilla.org/samples/domref/touchevents.html - https://developer.mozilla.org/es/docs/DOM/Touch_events
		http://bencentra.com/canvas/signature/signature.html - https://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html
*/
(function() { // Comenzamos una funcion auto-ejecutable

	// Obtenenemos un intervalo regular(Tiempo) en la pamtalla
	window.requestAnimFrame = (function (callback) {
		return window.requestAnimationFrame ||
					window.webkitRequestAnimationFrame ||
					window.mozRequestAnimationFrame ||
					window.oRequestAnimationFrame ||
					window.msRequestAnimaitonFrame ||
					function (callback) {
					 	window.setTimeout(callback, 1000/60);
            // Retrasa la ejecucion de la funcion para mejorar la experiencia
					};
	})();
	var canvas = document.getElementById("draw-canvas");
		console.log("inicio",canvas);
	// Traemos el canvas mediante el id del elemento html
	var ctx = canvas.getContext("2d");


	// Mandamos llamar a los Elemetos interactivos de la Interfaz HTML
//	var drawText = document.getElementById("draw-dataUrl");
	//var drawImage = document.getElementById("draw-image");
	var clearBtn = document.getElementById("ctl00_cph_general_Firma1_bti_limpiar");
		var submitBtn = document.getElementById("ctl00_cph_general_Firma1_bti_guardar");
	clearBtn.addEventListener("click", function (e) {
		// Definimos que pasa cuando el boton draw-clearBtn es pulsado
		clearCanvas(e);
		//drawImage.setAttribute("src", "");
	}, false);
		// Definimos que pasa cuando el boton draw-submitBtn es pulsado
	/*submitBtn.addEventListener("click", function (e) {
	var dataUrl = canvas.toDataURL();
	//drawText.innerHTML = dataUrl;
	//drawImage.setAttribute("src", dataUrl);
	 }, false);*/

	// Activamos MouseEvent para nuestra pagina
	var drawing = false;
	var mousePos = { x:0, y:0 };
	var lastPos = mousePos;
	canvas.addEventListener("mousedown", function (e)
  {
    /*
      Mas alla de solo llamar a una funcion, usamos function (e){...}
      para mas versatilidad cuando ocurre un evento
    */
		/*var tint = document.getElementById("color");*/
		var punta = 3;
		console.log(e);
		drawing = true;
		lastPos = getMousePos(canvas, e);
	}, false);
	canvas.addEventListener("mouseup", function (e)
  {
		drawing = false;
	}, false);
	canvas.addEventListener("mousemove", function (e)
  {
		mousePos = getMousePos(canvas, e);
	}, false);

	// Activamos touchEvent para nuestra pagina
	canvas.addEventListener("touchstart", function (e) {
		mousePos = getTouchPos(canvas, e);
    console.log(mousePos);
    e.preventDefault(); // Prevent scrolling when touching the canvas
		var touch = e.touches[0];
		var mouseEvent = new MouseEvent("mousedown", {
			clientX: touch.clientX,
			clientY: touch.clientY
		});
		canvas.dispatchEvent(mouseEvent);
	}, false);
	canvas.addEventListener("touchend", function (e) {
    e.preventDefault(); // Prevent scrolling when touching the canvas
		var mouseEvent = new MouseEvent("mouseup", {});
		canvas.dispatchEvent(mouseEvent);
	}, false);
  canvas.addEventListener("touchleave", function (e) {
    // Realiza el mismo proceso que touchend en caso de que el dedo se deslice fuera del canvas
    e.preventDefault(); // Prevent scrolling when touching the canvas
    var mouseEvent = new MouseEvent("mouseup", {});
    canvas.dispatchEvent(mouseEvent);
  }, false);
	canvas.addEventListener("touchmove", function (e) {
    e.preventDefault(); // Prevent scrolling when touching the canvas
		var touch = e.touches[0];
		var mouseEvent = new MouseEvent("mousemove", {
			clientX: touch.clientX,
			clientY: touch.clientY
		});
		canvas.dispatchEvent(mouseEvent);
	}, false);

	// Get the position of the mouse relative to the canvas
	function getMousePos(canvasDom, mouseEvent) {
		var rect = canvasDom.getBoundingClientRect();
    /*
      Devuelve el tamaño de un elemento y su posición relativa respecto
      a la ventana de visualización (viewport).
    */
		return {
			x: mouseEvent.clientX - rect.left,
			y: mouseEvent.clientY - rect.top
		};
	}

	// Get the position of a touch relative to the canvas
	function getTouchPos(canvasDom, touchEvent) {
		var rect = canvasDom.getBoundingClientRect();
    console.log(touchEvent);
    /*
      Devuelve el tamaño de un elemento y su posición relativa respecto
      a la ventana de visualización (viewport).
    */
		return {
			x: touchEvent.touches[0].clientX - rect.left, // Popiedad de todo evento Touch
			y: touchEvent.touches[0].clientY - rect.top
		};
	}

	// Draw to the canvas
	function renderCanvas() {
		if (drawing) {
    /*  var tint = document.getElementById("color");*/
      var punta = 3
     // ctx.strokeStyle = tint.value;
      ctx.beginPath();
			ctx.moveTo(lastPos.x, lastPos.y);
			ctx.lineTo(mousePos.x, mousePos.y);
    	ctx.lineWidth = punta;
			ctx.stroke();
      ctx.closePath();
			lastPos = mousePos;
		}
	}

	function clearCanvas(e) {
		e.preventDefault();
		console.log("reset")
		canvas.width = canvas.width;
	}



	// Allow for animation
	(function drawLoop () {
		requestAnimFrame(drawLoop);
		renderCanvas();
	})();

})();

	}
   , 3000)
}

function save(hdd) {
	var canvas = document.getElementById("draw-canvas");
	if(canvas.toDataURL) {
		   
		   var dataurl = canvas.toDataURL();
		   document.getElementById(hdd).value=dataurl;
		      //overlay('Please right-click/save-as to save your drawing. <a href="#" onclick="overlay_hide()">close</a><br /><img src="'+dataurl+'" title="Please right-click/save-as" />'); 
		       
		 } else {
		  	alert('Sorry, your browser does not implement the toDataURL() method required to save images.');
		 }
   
  }

//function save(hdd) {
//    
//  if(canvas.toDataURL) {
//    
//    var dataurl = canvas.toDataURL();
//    document.getElementById(hdd).value=dataurl;
//       //overlay('Please right-click/save-as to save your drawing. <a href="#" onclick="overlay_hide()">close</a><br /><img src="'+dataurl+'" title="Please right-click/save-as" />'); 
//       
//  } else {
//  	alert('Sorry, your browser does not implement the toDataURL() method required to save images.');
//  }
//}}


