I don't trust bbcode to not corrupt this

/*=============*\
|░ image thing ░|
\*=============*/setTimeout(function(){

var sidePane=document.querySelector("#sidepane");
var canvas=document.querySelector("#chatdraw canvas");
var c2d=canvas.getContext("2d");
var cW=canvas.width,cH=canvas.height;
var cR=cW/cH; //width to height ratio
var cM=Math.min(cW,cH); //the smaller dimension
////////////////
//IMAGE UPLOAD//
////////////////
var z=new Image(); //best variable name (c) Trinitro 2016
var isImage=false;
//paste box
var pasteImageHere=document.createElement("div");
pasteImageHere.style.width="3.25rem";
pasteImageHere.contentEditable=true;
pasteImageHere.oninput=function(){
	var thing=this.getElementsByTagName("img")[0];
	if (thing) loadImage(thing.src);
	while (this.firstChild) this.removeChild(this.lastChild); //delete everything
};
document.querySelector("#sendpane").appendChild(pasteImageHere);
//file upload button
var fileBrowse=document.createElement("input");
fileBrowse.type="file";
fileBrowse.onchange=function(){
	console.log("User uploaded an image...");
	var reader=new FileReader();
	reader.readAsDataURL(this.files[0]);
	reader.onload=function(){loadImage(this.result)};
};
sidePane.appendChild(fileBrowse);
//image loading
function loadImage(source){
	console.log("Found an image. (assume load failed)");
	z=new Image();
	z.crossOrigin="Anonymous";
	z.onload=function(){
		console.log("Image loaded successfully!");
		moveBoxParent.style.backgroundImage="url('"+source+"')";
		isImage=true;
		updateImage();
	};
	z.src=source;
}
/////////////////
//image editing//
/////////////////
var elemX=0,elemY=0;
var offsetX,offsetY;
var moving=false;
var scale=1;
const mouseSens=200;
//dither slider
var ditherSlider=document.createElement("input");
ditherSlider.type="range";
ditherSlider.min="0";
ditherSlider.max="1";
ditherSlider.step="0.001";
ditherSlider.onchange=function(){updateImage()};
sidePane.appendChild(ditherSlider);
//blurring checkbox
var blurring=document.createElement("input");
blurring.type="checkbox";
blurring.checked=true;
blurring.onchange=function(){
	c2d.webkitImageSmoothingEnabled=c2d.mozImageSmoothingEnabled=c2d.imageSmoothingEnabled=this.checked;
	pc2d.webkitImageSmoothingEnabled=pc2d.mozImageSmoothingEnabled=pc2d.imageSmoothingEnabled=this.checked;
	updateImage();
};
sidePane.appendChild(blurring);
sidePane.appendChild(document.createTextNode("Smooth Resize"));
var updateImageTimeout;
//selection box parent
var moveBoxParent=document.createElement("div");
moveBoxParent.style.width=cW+"px";
moveBoxParent.style.height=cH+"px";
moveBoxParent.style.backgroundSize="contain";
moveBoxParent.style.backgroundRepeat="no-repeat";
moveBoxParent.style.backgroundColor="white";
moveBoxParent.style.border="1px solid black";
moveBoxParent.onmousemove=function(e){
	if (moving){
		updateMoveBoxPos(e.clientX-offsetX,e.clientY-offsetY);
		updatePreview();
	}
};
moveBoxParent.onmouseup=moveBoxParent.onmouseleave=function(){
	moving=false;
	moveBox.style.cursor="grab";
	updateImage();
};
moveBoxParent.onwheel=function(e){
	updateScale(scale+e.deltaY/mouseSens);
	updatePreview();
	window.clearTimeout(updateImageTimeout);
	updateImageTimeout=window.setTimeout(function(){updateImage()},mouseSens);
};
sidepane.appendChild(moveBoxParent);
//selection box
var moveBox=document.createElement("div");
moveBox.style.position="relative";
moveBox.style.border="1px solid red";
moveBox.style.width=cW-2+"px";
moveBox.style.height=cH-2+"px";
moveBox.style.cursor="grab";
moveBox.onmousedown=function(e){
	moving=true;
	moveBox.style.cursor="grabbing";
	offsetX=e.clientX-elemX;
	offsetY=e.clientY-elemY;
};
moveBoxParent.appendChild(moveBox);

//scale slider
var scaleSlider=document.createElement("input");
scaleSlider.type="range";
scaleSlider.min=0.0001;
scaleSlider.max=1;
scaleSlider.step=0.0001;
scaleSlider.value=1;
scaleSlider.oninput=function(){updateScale(this.value)};
scaleSlider.onchange=function(){updateImage()};
sidepane.appendChild(scaleSlider);
//movebox functions
function updateScale(newScale){
	var oldScale=scale;
	scale=Math.min(Math.max(newScale,0.001),1);
	var midX=elemX+oldScale*cW/2;
	var midY=elemY+oldScale*cH/2;
	updateMoveBoxPos(midX-scale*cW/2,midY-scale*cH/2);
	moveBox.style.width=Math.max(scale*cW-2,0)+"px";
	moveBox.style.height=Math.max(scale*cH-2,0)+"px";
	scaleSlider.value=scale;
	if (oldScale!=scale) updatePreview();
}
function updateMoveBoxPos(x,y){
	elemX=Math.min(Math.max(x,0),(1-scale)*cW);
	elemY=Math.min(Math.max(y,0),(1-scale)*cH);
	moveBox.style.left=elemX+"px";
	moveBox.style.top=elemY+"px";
}
//preview/color picker canvas
var pCanvas=document.createElement("canvas");
pCanvas.width=cW;
pCanvas.height=cH;
pCanvas.style.backgroundColor="white";
pCanvas.style.border="1px solid black";
var pc2d=pCanvas.getContext("2d");
pCanvas.onclick=function(e){
	if (isImage){
		var rect=pCanvas.getBoundingClientRect();
		var x=Math.round(e.clientX-rect.left-1);
		var y=Math.round(e.clientY-rect.top-1);
		var pixel=pc2d.getImageData(x,y,1,1).data;
		if (pixel[3]==0) pixel=[255,255,255,255];
		var button=document.querySelector('#chatdraw button-area button[data-selectedcolor="true"]');
		button.style.color=rgbToFillStyle(pixel);
		console.log("Got color "+pixel.join()+" at "+x+","+y);
		updateImage();
	}
};
sidePane.appendChild(pCanvas);
////////////////////
//Image Conversion//
////////////////////
var colorButtons=document.querySelectorAll("#chatdraw button-area button.colorChange");
var paletteSize=colorButtons.length;
var colorWeight=[3,6,1];
document.getElementById("colorPicker").addEventListener("change",function(){updateImage()});
document.querySelector("#chatdraw button-area button").addEventListener("click",function(){
	isImage=false;
	moveBoxParent.style.backgroundImage="";
	pc2d.clearRect(0,0,cW,cH);
});//✖ button
function updateImage(){
	if (isImage){
		updatePreview();
		putImage(z);
	}
}
function updatePreview(){
	if (isImage){
		pc2d.clearRect(0,0,cW,cH);
		var maxHeight=Math.max(z.width/cW,z.height/cH)*cM;
		pc2d.drawImage(z,elemX/cW*maxHeight*cR,elemY/cH*maxHeight,scale*maxHeight*cR,scale*maxHeight,0,0,cW,cH);
	}
}
//the actual converter!
function putImage(img){
	canvas.hidden=true;
	var dither=ditherSlider.value;
	var i,palette=[];
	for(i=0;i<paletteSize;i++) palette.push(fillStyleToRgb(colorButtons[i].style.color));
	c2d.rect(0,0,cW,cH);c2d.fillStyle="white";c2d.fill(); //clear canvas
	var maxHeight=Math.max(img.width/cW,img.height/cH)*cM;
	c2d.drawImage(img,elemX/cW*maxHeight*cR,elemY/cH*maxHeight,scale*maxHeight*cR,scale*maxHeight,0,0,cW,cH);
	var data=c2d.getImageData(0,0,cW,cH);
	for(var x=0,bestIndex,nextErr;x<cW*cH*4;x+=4){
		//find the best color
		var bestDist=Infinity;
		for (i=0;i<paletteSize&&bestDist!==0;i++) {
			for (var j=0,dist=0,color=palette[i];j<3;j++)
				dist+=Math.abs(data.data[x+j]-color[j])*colorWeight[j];
			if (dist<bestDist){bestDist=dist;bestIndex=i}
		}
		//dithering
		if (dither){
			for (i=0;i<3;i++) {
				var err=(data.data[x+i]-palette[bestIndex][i])*dither/3;
				//if (err<0) nextErr=-err; else nextErr=0;
				data.data[x+i]=palette[bestIndex][i];
				data.data[x     +4+i]+=err;   // right
				data.data[x+cW*4-4+i]+=err/2; // bottom left
				data.data[x+cW*4  +i]+=err;   // bottom
				data.data[x+cW*4+4+i]+=err/2; // bottom right
			}
		} else for (i=0;i<3;i++) data.data[x+i]=palette[bestIndex][i];
	}
	c2d.putImageData(data,0,0);
	canvas.hidden=false;
	console.log("Image conversion sucessful.");
}
},2000);