/*
 *	Script copyright Alexander Peev, 2011. All rights reserved. ( http://alexanderpeev.com/ )
 *	Use of this script on other websites is forbidden if not explicitly permitted by the author. Please do not hotlink.
 */

var noscr = document.getElementById('noscript');
if(noscr){
	noscr.style.display = 'none';
	noscr.parentNode.removeChild(noscr);
}

			function splitColor(color){
				color = String(color);
				var rgb = [0, 0, 0];
				if(color[0] == '#'){
					if(color.length == 4){
						red = hexdec(color[1]);
						green = hexdec(color[2]);
						blue = hexdec(color[3]);
					}
					else{
						red = hexdec(color.substr(1,2));
						green = hexdec(color.substr(3,2));
						blue = hexdec(color.substr(5,2));
					}
					rgb[0] = red;
					rgb[1] = green;
					rgb[2] = blue;
				}
				else if(color.substr(0,3) == 'rgb'){
					if(color.substr(0,4) == 'rgba')color = color.substr(5);
					else color = color.substr(4);
					color = color.substr(0, (color.length - 1));
					rgb = color.split(',');
					rgb[0]/*red*/ = parseInt(rgb[0]);
					rgb[1]/*green*/ = parseInt(rgb[1]);
					rgb[2]/*blue*/ = parseInt(rgb[2]);
				}
				return rgb;
			}

			function makeColor(rgb){
				return ('rgb(' + String(rgb[0]) + ',' + String(rgb[1]) + ',' + String(rgb[2]) + ')');
			}
			
			var alnum = false;
			
			var canvas = document.getElementById('draw');
			canvas.style.display = 'block';
			var context;
			var toolbar = {
				'brush' : document.getElementById('brush'),
				'eraser' : document.getElementById('eraser'),
				'eyedropper' : document.getElementById('eyedropper'),
				'type' : document.getElementById('type'),
				'typeText' : document.getElementById('typeText'),
				'foreground' : document.getElementById('foreground'),
				'background' : document.getElementById('background'),
				'radius' : document.getElementById('radius'),
				'alpha' : document.getElementById('alpha'),
				'picker' : document.getElementById('picker'),
				'pickerWrap' : document.getElementById('pickerWrap'),
				'pickerBtnOK' : document.getElementById('pickerBtnOK'),
				'pickerBtnCancel' : document.getElementById('pickerBtnCancel'),
				'pickerRed' : document.getElementById('pickerRed'),
				'pickerGreen' : document.getElementById('pickerGreen'),
				'pickerBlue' : document.getElementById('pickerBlue'),
				'pickerGradient' : document.getElementById('pickerGradient'),
				'pickerGradCtx' : undefined,
				'saveBtn' : document.getElementById('save'),
				'revertBtn' : document.getElementById('revert'),
				'downloadBtn' : document.getElementById('download'),
				'dnBox' : document.getElementById('dnBox'),
				'dnCloseBtn' : document.getElementById('dnClose'),
				'dnImage' : document.getElementById('dnImage'),
				'uplink' : document.getElementById('uplink'),
				'saveForm' : document.getElementById('saveForm'),
				'saveData' : document.getElementById('saveData'),
				'saveHeight' : document.getElementById('saveHeight'),
				'saveWidth' : document.getElementById('saveWidth'),
				'saveTarget' : document.getElementById('saveTarget'),
				'loading' : document.getElementById('loading'),
				'fg' : undefined,
				'bg' : undefined,
				'fgc' : undefined,
				'fgc2' : undefined,
				'bgc' : undefined,
				'bgc2' : undefined,
				'intervals' : [undefined, undefined, undefined, undefined],
				'tool' : 0, 
				'picked' : 0, 
				'tempClr' : '#000',
				'textBlinked' : 0,
				'setTool' : function(tool){
					tool = parseInt(tool);
					if(!tool || (String(tool) == 'NaN'))tool = 0;
					toolbar.tool = tool;
					var tools = [toolbar.brush, toolbar.eraser, toolbar.eyedropper, toolbar.type], set = false;
					if((tool < 0) || (tool >= tools.length)){
						tool = 0;
					}
					for(var i = 0; i < tools.length; i++){
						if((tool == i) && !set){
							set = true;
							tools[i].className = 'tool selected';
						}
						else tools[i].className = 'tool';
					}
					toolbar.tool = tool;
					if(!set){
						tool = 0;
						toolbar.tool = 0;
						tools[0].className = 'tool selected';
					}
					if(tool == 3){
						toolbar.blinkText();
					}
					else toolbar.typeText.className = '';
				},
				'blinkText' : function(tool){
					if(toolbar.textBlinked >= 3){
						toolbar.typeText.className = 'selText';
						return;
					}
					++toolbar.textBlinked;
					toolbar.typeText.className = 'selText2';
					var a = function(){toolbar.typeText.className = 'selText3';};
					var b = function(){toolbar.typeText.className = 'selText2';};
					var c = function(){toolbar.typeText.className = 'selText';};
					setTimeout(a, 100);
					setTimeout(b, 200);
					setTimeout(a, 300);
					setTimeout(b, 400);
					setTimeout(c, 500);
				},
				'rebrush' : function(){
					var a = (Math.max(Math.min(parseFloat(toolbar.alpha.value), 100), 1)/100);
					toolbar.fgc = formatColor(toolbar.foreground.style.backgroundColor, a);
					toolbar.fgc2 = formatColor(toolbar.foreground.style.backgroundColor, 0);
					toolbar.bgc = formatColor(toolbar.background.style.backgroundColor, a);
					toolbar.bgc2 = formatColor(toolbar.background.style.backgroundColor, 0);
				},
				'rerad' : function(){
					canvas.radius = Math.max(parseInt(toolbar.radius.value), 1);
				},
				'raInc' : function(){
					toolbar.radius.value = (Math.max(parseInt(toolbar.radius.value), 1) + 1);
					toolbar.rerad();
					if((toolbar.intervals[0] === false) || (toolbar.intervals[0] === undefined)){
						toolbar.intervals[0] = true;
						setTimeout(function(){if(toolbar.intervals[0] === true)toolbar.intervals[0] = setInterval(function(){toolbar.raInc();}, 150)}, 750);
					}
				},
				'raDec' : function(){
					toolbar.radius.value = Math.max((parseInt(toolbar.radius.value) - 1), 1);
					toolbar.rerad();
					if((toolbar.intervals[1] === false) || (toolbar.intervals[1] === undefined)){
						toolbar.intervals[1] = true;
						setTimeout(function(){if(toolbar.intervals[1] === true)toolbar.intervals[1] = setInterval(function(){toolbar.raDec();}, 150)}, 750);
					}
				},
				'opInc' : function(){
					toolbar.alpha.value = Math.min(Math.max((parseInt(toolbar.alpha.value) + 1), 1), 100);
					toolbar.rebrush();
					if((toolbar.intervals[2] === false) || (toolbar.intervals[2] === undefined)){
						toolbar.intervals[2] = true;
						setTimeout(function(){if(toolbar.intervals[2] === true)toolbar.intervals[2] = setInterval(function(){toolbar.opInc();}, 150)}, 750);
					}
				},
				'opDec' : function(){
					toolbar.alpha.value = Math.min(Math.max((parseInt(toolbar.alpha.value) - 1), 1), 100);
					toolbar.rebrush();
					if((toolbar.intervals[3] === false) || (toolbar.intervals[3] === undefined)){
						toolbar.intervals[3] = true;
						setTimeout(function(){if(toolbar.intervals[3] === true)toolbar.intervals[3] = setInterval(function(){toolbar.opDec();}, 150)}, 750);
					}
				},
				'endInterval' : function(){
					for(var e = 0; e < 4; e++){
						if(toolbar.intervals[e] === true)toolbar.intervals[e] = false;
						else if((toolbar.intervals[e] !== false) && (toolbar.intervals[e] !== undefined)){
							clearInterval(toolbar.intervals[e]);
							toolbar.intervals[e] = false;
						}
					}
				},
				'pickerOpen' : function(e){
					if(e == 1){toolbar.picked = 1;toolbar.picker.style.backgroundColor = toolbar.background.style.backgroundColor;}
					else{toolbar.picked = 0;toolbar.picker.style.backgroundColor = toolbar.foreground.style.backgroundColor;}
					toolbar.tempClr = toolbar.picker.style.backgroundColor;
					var rgb = splitColor(toolbar.tempClr);
					toolbar.pickerRed.value = String(rgb[0]);
					if(toolbar.pickerRed.value == 'NaN'){toolbar.pickerRed.value = '0';rgb[0] = 0;}
					toolbar.pickerGreen.value = String(rgb[1]);
					if(toolbar.pickerGreen.value == 'NaN'){toolbar.pickerGreen.value = '0';rgb[1] = 0;}
					toolbar.pickerBlue.value = String(rgb[2]);
					if(toolbar.pickerBlue.value == 'NaN'){toolbar.pickerBlue.value = '0';rgb[2] = 0;}
					toolbar.pickerWrap.style.display = 'block';
				},
				'pickerSelect' : function(){
					var rgb = [Math.min(Math.max(parseInt(toolbar.pickerRed.value), 0), 255), Math.min(Math.max(parseInt(toolbar.pickerGreen.value), 0), 255), Math.min(Math.max(parseInt(toolbar.pickerBlue.value), 0), 255)];
					toolbar.pickerRed.value = String(rgb[0]);
					if(toolbar.pickerRed.value == 'NaN'){toolbar.pickerRed.value = '0';rgb[0] = 0;}
					toolbar.pickerGreen.value = String(rgb[1]);
					if(toolbar.pickerGreen.value == 'NaN'){toolbar.pickerGreen.value = '0';rgb[1] = 0;}
					toolbar.pickerBlue.value = String(rgb[2]);
					if(toolbar.pickerBlue.value == 'NaN'){toolbar.pickerBlue.value = '0';rgb[2] = 0;}
					toolbar.picker.style.backgroundColor = makeColor(rgb);
					toolbar.tempClr = toolbar.picker.style.backgroundColor;
				},
				'pickerSet' : function(color){
					var rgb = splitColor(color);
					toolbar.pickerRed.value = String(rgb[0]);
					if(toolbar.pickerRed.value == 'NaN'){toolbar.pickerRed.value = '0';rgb[0] = 0;}
					toolbar.pickerGreen.value = String(rgb[1]);
					if(toolbar.pickerGreen.value == 'NaN'){toolbar.pickerGreen.value = '0';rgb[1] = 0;}
					toolbar.pickerBlue.value = String(rgb[2]);
					if(toolbar.pickerBlue.value == 'NaN'){toolbar.pickerBlue.value = '0';rgb[2] = 0;}
					toolbar.picker.style.backgroundColor = makeColor(rgb);
					toolbar.tempClr = toolbar.picker.style.backgroundColor;
				},
				'pickerOK' : function(){
					if(toolbar.picked == 1)toolbar.background.style.backgroundColor = toolbar.tempClr;
					else toolbar.foreground.style.backgroundColor = toolbar.tempClr;
					toolbar.pickerWrap.style.display = 'none';
					toolbar.rebrush();
				},
				'pickerCancel' : function(){
					toolbar.pickerWrap.style.display = 'none';
				},
				'pickerGradInit' : function(e){
					toolbar.pickerGradCtx = e.getContext('2d');
					e.ctx = toolbar.pickerGradCtx;
					var g1, g2;
					g1 = toolbar.pickerGradCtx.createLinearGradient(0, (e.height/2), e.width, (e.height/2));
					g1.addColorStop(0, 'rgb(255,0,0)');
					g1.addColorStop(0.17, 'rgb(255,255,0)');
					g1.addColorStop(0.34, 'rgb(0,255,0)');
					g1.addColorStop(0.51, 'rgb(0,255,255)');
					g1.addColorStop(0.68, 'rgb(0,0,255)');
					g1.addColorStop(0.85, 'rgb(255,0,255)');
					g1.addColorStop(1, 'rgb(255,0,0)');
					toolbar.pickerGradCtx.fillStyle = g1;
					toolbar.pickerGradCtx.fillRect(0, 0, e.width, e.height);
					
					g2 = toolbar.pickerGradCtx.createLinearGradient((e.width/2), 0, (e.width/2), e.height);
					g2.addColorStop(0, 'rgba(255,255,255,1)');
					g2.addColorStop(0.5, 'rgba(50%,50%,50%,0)');
					g2.addColorStop(1, 'rgba(0,0,0,1)');
					toolbar.pickerGradCtx.fillStyle = g2;
					toolbar.pickerGradCtx.fillRect(0, 0, e.width, e.height);
				},
				'pickerGrad' : function(e, c, ok){
					if(!e || !c){
						e = toolbar.pickerGradient;
						c = toolbar.pickerGradCtx;
					}
					if(!e.elX || !e.elY || (String(e.elX) == 'NaN') || (String(e.elX) == 'NaN'))return;
					var id = c.getImageData(Math.max(Math.min(e.elX, (e.width-1)), 0), Math.max(Math.min(e.elY, (e.height-1)), 0), 1, 1);
					toolbar.pickerSet('rgb(' + String(id.data[0]) + ',' + String(id.data[1]) + ',' + String(id.data[2]) + ')');
					if(ok)toolbar.pickerOK();
				},
				'startPick' : function(e){
					this.pick = true;
					toolbar.pickerGrad();
				},
				'endPick' : function(e){
					this.pick = false;
				},
				'colorSwap' : function(){
					toolbar.pickerCancel();
					var clr = toolbar.background.style.backgroundColor;
					toolbar.background.style.backgroundColor = toolbar.foreground.style.backgroundColor;
					toolbar.foreground.style.backgroundColor = clr;
					toolbar.rebrush();
				},
				'colorDefault' : function(){
					toolbar.pickerCancel();
					toolbar.foreground.style.backgroundColor = '#000';
					toolbar.background.style.backgroundColor = '#fff';
					toolbar.rebrush();
				},
				'load' : function(){
					if(toolbar.uplink.naturalWidth === undefined){	// These two ifs are a fix for Opera's lack of proper HTMLImageElement support, same reason I left out the width and height attributes in the markup
						toolbar.uplink.naturalWidth = toolbar.uplink.width;
					}
					if(toolbar.uplink.naturalHeight === undefined){
						toolbar.uplink.naturalHeight = toolbar.uplink.height;
					}		
					var x = ((canvas.width/2) - (toolbar.uplink.naturalWidth/2)), y = ((canvas.height/2) - (toolbar.uplink.naturalHeight/2));
					var x2 = Math.abs(x), y2 = Math.abs(y);
					if(x < 0)x = 0;
					else x2 = 0;
					if(y < 0)y = 0;
					else y2 = 0;
					try{
						context.drawImage(toolbar.uplink, x2, y2, Math.min((toolbar.uplink.naturalWidth - x2), canvas.width), Math.min((toolbar.uplink.naturalHeight - y2), canvas.height), x, y, Math.min(toolbar.uplink.naturalWidth, (canvas.width - x)), Math.min(toolbar.uplink.naturalHeight, (canvas.height - y)));
					}catch(e){
						alert(e);
						//alert(toolbar.uplink.complete + ' ' + x2 + ' ' + y2 + ' ' + toolbar.uplink.naturalWidth + ' ' + toolbar.uplink.naturalHeight + ' ' + x + ' ' + y + ' ' + canvas.width + ' ' + canvas.height);
					}
					toolbar.loading.style.display = 'none';
				},
				'save' : function(){
					toolbar.saveHeight.value = canvas.height;
					toolbar.saveWidth.value = canvas.width;
					toolbar.saveData.value = '';
					var src = canvas.toDataURL();
					if(src && (src != 'data:,')){
						//toolbar.dnImage.width = (canvas.width/3);
						//toolbar.dnImage.height = (canvas.height/3);
						//toolbar.dnImage.src = src;
					}
					//var id = context.getImageData(0, 0, canvas.width, canvas.height);
					toolbar.saveData.value = src;
					//toolbar.saveData.value = '';
					//var id = context.getImageData(0, 0, canvas.width, canvas.height);
					//il = id.data.length;
					//for(var i = 0; i < il;){
					//	toolbar.saveData.value += (String.fromCharCode(id.data[i], id.data[(i+1)], id.data[(i+2)], id.data[(i+3)]));
					//	i += 4;
					//	if((i % 10000) == 0){
					//		toolbar;
					//	}
					//}
					toolbar.saveForm.submit();
					toolbar.uplink.src = toolbar.uplink.src;
					toolbar.saveTarget.onload = toolbar.iframeRevert;
					//toolbar.saveTarget.src = 'about:blank';
				},
				'iframeRevert' : function(){
					this.src = 'about:blank';
					this.onload = undefined;
				},
				'revert' : function(){
					context.fillStyle = '#fff';
					context.fillRect(0,0,canvas.width,canvas.height);
					toolbar.load();
				},
				'dnOpen' : function(){
					var src = canvas.toDataURL();
					if(src && (src != 'data:,')){
						toolbar.dnImage.width = (canvas.width/3);
						toolbar.dnImage.height = (canvas.height/3);
						toolbar.dnImage.src = src;
						/*if(document.execCommand){
							toolbar.saveTarget.src = src;
							toolbar.saveTarget.contentWindow.document.execCommand("SaveAs");
						}*/
					}
					toolbar.dnBox.style.display = 'block';
				},
				'dnClose' : function(){
					toolbar.dnBox.style.display = 'none';
				},
				'hotKeys' : function(e){
					if(!e)e = window.event;
					if(!e.charCode)e.charCode = e.which;
					if(document.activeElement && (((document.activeElement.tagName == 'INPUT') && (document.activeElement.type == 'text')) || (document.activeElement.tagName == 'TEXTAREA')))return;
					if((e.charCode == 120) || (e.charCode == 88)){		// x, X
						toolbar.colorSwap();
					}
					if((e.charCode == 100) || (e.charCode == 68)){		// d, D
						toolbar.colorDefault();
					}
					else if((e.charCode == 66) || (e.charCode == 98)){	// b, B
						toolbar.setTool(0);
					}
					else if((e.charCode == 69) || (e.charCode == 101)){	// e, E
						toolbar.setTool(1);
					}
					else if((e.charCode == 73) || (e.charCode == 105)){	// i, I
						toolbar.setTool(2);
					}
					else if((e.charCode == 84) || (e.charCode == 116)){	// t, T
						toolbar.setTool(3);
					}
					else if(e.charCode == 91){	// [
						toolbar.radius.value = Math.max((parseInt(toolbar.radius.value) - 1), 1);
						toolbar.rerad();
					}
					else if(e.charCode == 93){	// ]
						toolbar.radius.value = (parseInt(toolbar.radius.value) + 1);
						toolbar.rerad();
					}
					else if(e.charCode == 123){	// {
						toolbar.radius.value = Math.max((parseInt(toolbar.radius.value) - 5), 1);
						toolbar.rerad();
					}
					else if(e.charCode == 125){	// }
						toolbar.radius.value = (parseInt(toolbar.radius.value) + 5);
						toolbar.rerad();
					}
					else if((e.charCode >= 48) && (e.charCode <= 57)){	// 0 - 9
						var ch = (e.charCode - 48);
						if(ch == 0)toolbar.alpha.value = '100';
						else{
							if(alnum && (parseInt(toolbar.alpha.value) == 100))toolbar.alpha.value = ch;
							else if(alnum)toolbar.alpha.value = (parseInt(toolbar.alpha.value) + ch);
							else toolbar.alpha.value = (ch * 10);
						}
						if(alnum){alnum = false;}
						else{
							alnum = true;
							setTimeout(function(){alnum = false;}, 1000);
						}
						toolbar.rebrush();
					}
					//document.forms['testForm'].log.value = e.charCode + '\n';
				}
			};
			
			var canvasControl = {
				'shift' : {
					'el' : undefined,
					'x1' : 0,
					'x2' : 0,
					'y1' : 0,
					'y2' : 0,
					'i' : 0,
					'i2' : 0,
					'interval' : undefined,
					'start' : function(el){
						canvasControl.shift.el = el;
						canvasControl.shift.x1 = el.lastX;
						canvasControl.shift.y1 = el.lastY;
						canvasControl.shift.x2 = el.elX;
						canvasControl.shift.y2 = el.elY;
						canvasControl.shift.i = 0
						canvasControl.shift.i2 = 0;
						canvasControl.shift.i2 = (Math.max(Math.abs(canvasControl.shift.x1 - canvasControl.shift.x2), Math.abs(canvasControl.shift.y1 - canvasControl.shift.y2)) / ((el.radius > 5)?(el.radius / 3.5):1));
						var int = canvasControl.shift.i2;
						if(int > 1000)int = (2200 / int);
						else int = (1100 / int);
						if(canvasControl.shift.interval){
							clearInterval(canvasControl.shift.interval);
							canvasControl.shift.interval = undefined;
						}
						canvasControl.shift.interval = setInterval(canvasControl.shift.cb, int);
					},
					'cb' : function(){
						++canvasControl.shift.i;
						var k1 = (canvasControl.shift.i / canvasControl.shift.i2), k2 = ((canvasControl.shift.i2 - canvasControl.shift.i) / canvasControl.shift.i2);
						draw(canvasControl.shift.el, ((canvasControl.shift.x1 * k2) + (canvasControl.shift.x2 * k1)), ((canvasControl.shift.y1 * k2) + (canvasControl.shift.y2 * k1)));
						if(canvasControl.shift.i >= canvasControl.shift.i2){
							clearInterval(canvasControl.shift.interval);
							canvasControl.shift.interval = undefined;
						}
					}
				},
				'resize' : function(){
					canvas.oL = canvas.oT = undefined;
				},
				'mousemove' : function(e){
					if (!e) e = window.event;
					if (!this) return;
					if ((this.oL === undefined) || (this.oT === undefined)){
						this.oL = this.offsetLeft;
						this.oT = this.offsetTop;
						if(String(this.oL) == 'NaN')this.oL = 0;
						if(String(this.oT) == 'NaN')this.oT = 0;
						var f = this;
						while((f.offsetParent !== undefined) && (f.offsetParent !== null)){
							f = f.offsetParent;
							if((String(f.offsetLeft) == 'NaN') || (String(f.offsetTop) == 'NaN') || (f.offsetLeft === undefined) || (f.offsetTop === undefined))break;
							this.oL += f.offsetLeft;
							this.oT += f.offsetTop;
						}
					}
					this.elX = ((e.pageX - this.oL) - 1); // - 1
					this.elY = ((e.pageY - this.oT) - 1); // - 1
					if(this.pick && (toolbar.pickerWrap.style.display == 'block')){
						toolbar.pickerGrad(this, this.ctx, false);
					}
					else if(this.draw){
						draw(this);
						//context.fillRect(this.elX,this.elY,1,1);
					}
					else if(this.pick){
						toolbar.pickerGrad(this, context, true);
					}
					//document.forms['testForm'].log.value = 'elX: ' + this.elX + ' ' + 'elY: ' + this.elY + '\n';
				},
				'startdraw' : function(e){
					if(toolbar.pickerWrap.style.display == 'block'){
						this.pick = true;
						toolbar.pickerGrad(this, context, false);
					}
					else if(toolbar.tool == 2){
						this.pick = true;
						toolbar.pickerGrad(this, context, true);
					}
					else{
						if((e.button === undefined) || (e.button == 0)){
							this.draw = true;
							if(e.shiftKey)canvasControl.shift.start(this);
							else draw(this);
						}
					}
				},
				'enddraw' : function(e){
					if(this.draw){
						this.draw = false;
						//this.ctx.save();	// not what I thought
						//++this.saves;
						this.lastX = this.elX;
						this.lastY = this.elY;
					}
					this.pick = this.draw = false;
					e.stopPropagation();
				},
				'stopdraw' : function(e){
					if(!e)return;
					if(e.draw){
						e.draw = false;
						e.lastX = e.elX;
						e.lastY = e.elY;
					}
					e.pick = e.draw = false;
				},
				'init' : function (e, tb) {
					document.getElementById('toolbar').style.display = 'block';
					document.getElementById('topbar').style.display = 'block';
					document.getElementById('loading').style.display = 'block';
					window.onresize = this.resize;
					e.onmouseover = this.mousemove;
					e.onmousemove = this.mousemove;
					e.onmousedown = this.startdraw;
					e.onmouseup = this.enddraw;
					e.height = Math.max(e.clientHeight, (e.clientWidth * 3 / 4));
					e.width = e.clientWidth;
					e.style.height = (String(e.height) + 'px');
					e.style.width = (String(e.width) + 'px');
					e.lastX = 0;
					e.lastY = 0;
					//e.saves = 0;
					
					tb.pickerGradient.onmouseover = this.mousemove;
					tb.pickerGradient.onmousemove = this.mousemove;
					tb.pickerGradient.onmousedown = tb.startPick;
					tb.pickerGradient.onmouseup = tb.endPick;
					//tb.pickerGradient.onclick = tb.pickerGrad;
					tb.pickerWrap.style.display = 'block';
					tb.pickerGradient.height = tb.pickerGradient.clientHeight;
					tb.pickerGradient.width = tb.pickerGradient.clientWidth;
					tb.pickerGradient.style.height = (String(tb.pickerGradient.height) + 'px');
					tb.pickerGradient.style.width = (String(tb.pickerGradient.width) + 'px');
					tb.pickerWrap.style.display = 'none';
					tb.pickerGradInit(tb.pickerGradient);
					
					tb.radius.value = e.radius = 10;
					tb.alpha.value = 100;
					context = canvas.getContext('2d');
					canvas.ctx = context;
					context.fillStyle = '#fff';
					context.fillRect(0,0,e.width,e.height);
					if(!canvas.radius)canvas.radius = 10;
					//tb.alpha.onchange = tb.rebrush;
					tb.alpha.onkeyup = tb.rebrush;
					tb.brush.onclick = function(){toolbar.setTool(0);};
					tb.eraser.onclick = function(){toolbar.setTool(1);};
					tb.eyedropper.onclick = function(){toolbar.setTool(2);};
					tb.type.onclick = function(){toolbar.setTool(3);};
					//tb.radius.onchange = tb.rerad;
					tb.radius.onkeyup = tb.rerad;
					tb.foreground.onclick = function(){toolbar.pickerOpen(0);};
					tb.background.onclick = function(){toolbar.pickerOpen(1);};
					tb.pickerBtnOK.onclick = tb.pickerOK;
					tb.pickerBtnCancel.onclick = tb.pickerCancel;
					tb.pickerRed.onkeyup = tb.pickerSelect;
					tb.pickerGreen.onkeyup = tb.pickerSelect;
					tb.pickerBlue.onkeyup = tb.pickerSelect;
					toolbar.downloadBtn.onclick = toolbar.dnOpen;
					toolbar.dnCloseBtn.onclick = toolbar.dnClose;
					toolbar.revertBtn.onclick = toolbar.revert;
					toolbar.saveBtn.onclick = toolbar.save;
					document.onkeypress = tb.hotKeys;
					//document.body.onmouseup = tb.endInterval();
					window.onload = toolbar.load
					window.onmouseup = function(){canvasControl.stopdraw(canvas);canvasControl.stopdraw(toolbar.pickerGradient);};
					//toolbar.load();
					//toolbar.loading.style.display = 'none';
				},
				'escapePods' : function(tb){
					document.getElementById('toolbar').style.display = 'none';
					document.getElementById('topbar').style.display = 'none';
					document.getElementById('loading').style.display = 'none';
				}
			};
			
			function hexdec(str){
				var res = 0;
				str = str.toLowerCase();
				for(var i = 0; i < str.length; i++){
					res = (res * 16);
					if(str[i] == 'f'){
						res += 15;
					}
					else if(str[i] == 'e'){
						res += 14;
					}
					else if(str[i] == 'd'){
						res += 13;
					}
					else if(str[i] == 'c'){
						res += 12;
					}
					else if(str[i] == 'b'){
						res += 11;
					}
					else if(str[i] == 'a'){
						res += 10;
					}
					else{
						res += parseInt(str[i]);
					}
				}
				return res;
			};
			
			function formatColor(color, alpha){
				color = String(color);
				var red, green, blue;
				if(alpha.constructor != Number)alpha = parseFloat(alpha);
				if(color[0] == '#'){
					if(color.length == 4){
						red = hexdec(color[1] + color[1]);
						green = hexdec(color[2] + color[2]);
						blue = hexdec(color[3] + color[3]);
					}
					else{
						red = hexdec(color.substr(1,2));
						green = hexdec(color.substr(3,2));
						blue = hexdec(color.substr(5,2));
					}
				}
				else if(color.substr(0,3) == 'rgb'){
					if(color.substr(0,4) == 'rgba')color = color.substr(5);
					else color = color.substr(4);
					color = color.substr(0, (color.length - 1));
					var rgb = color.split(',');
					red = parseInt(rgb[0]);
					green = parseInt(rgb[1]);
					blue = parseInt(rgb[2]);
				}
				return ('rgba(' + String(red) + ',' + String(green) + ',' + String(blue) + ',' + String(alpha) + ')');
			};
			
			function draw(el, x, y){
				if(!el)return;
				if(!x || !y){
					x = el.elX;
					y = el.elY;
				}
				if(!el.radius)el.radius = 10;
				if(!toolbar.bgc || !toolbar.bgc2 || !toolbar.fgc || !toolbar.fgc2)toolbar.rebrush();
				if(toolbar.tool == 3){
					context.font = (String(el.radius*2) + 'px sans-serif');
					if(toolbar.typeText.value.length > 0){
						context.fillStyle = toolbar.fgc;
						context.fillText(toolbar.typeText.value, x, y);	//, in optional double maxWidth
					}
				}
				else{
					if(toolbar.tool == 1){
						toolbar.bg = context.createRadialGradient(x, y, 1, x, y, canvas.radius+1);
						toolbar.bg.addColorStop(0, toolbar.bgc);
						toolbar.bg.addColorStop(1, toolbar.bgc2);
						context.fillStyle = toolbar.bg;
					}
					else{
						toolbar.fg = context.createRadialGradient(x, y, 1, x, y, canvas.radius+1);
						toolbar.fg.addColorStop(0, toolbar.fgc);
						toolbar.fg.addColorStop(1, toolbar.fgc2);
						context.fillStyle = toolbar.fg;
					}
					context.fillRect((x - (el.radius+1)), (y - (el.radius+1)), (el.radius+1)*2, (el.radius+1)*2);
				}
			};
			
			if(canvas.toDataURL)canvasControl.init(canvas, toolbar);
			else canvasControl.escapePods(toolbar);