new ish converter

/*-----*\
| Image |
\*-----*/
var chatDrawCheck=window.setInterval(function () {
    if  (document.getElementById("chatdraw")) {
        window.clearInterval(chatDrawCheck);
        converter();
    }
}, 100);

function converter() {
var drawer = LocalChatDraw.getDrawer();
var canvas = drawer.buffers[0].canvas;
var sidePane = document.querySelector("#sidepane");
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();
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);

//auto palette button
var paletteOptimize = document.createElement("button");
paletteOptimize.innerHTML = "palette thing";
paletteOptimize.type = "checkbox";
//stolen from Trinitro21
paletteOptimize.onclick = function () {
	var i,x;
	var maxHeight = Math.max(z.width / cW,z.height / cH) * cM;
	c2d.drawImage(z, elemX / cW * maxHeight * cR, elemY / cH * maxHeight, scale * maxHeight * cR, scale * maxHeight, 0, 0, cW, cH);
	var data = c2d.getImageData(0, 0, cW, cH);

	var high = [0, 0, 0];
	var low = [255, 255, 255];
	var threshold = [0.8, 0.8, 0.8];
	var palette = [];
	for (x = 0; x < data.data.length; x += 4) {
		for (i = 0; i < 3; i++) {
			high[i] = Math.max(high[i], data.data[x + i]);
			low [i] = Math.min(low [i], data.data[x + i]);
		}
	}
	var chigh = [high[0] - low[0], high[1] - low[1], high[2] - low[2]];
	var prev = [0, 0, 0];
	var prevl = 0;
	for (x = 0; x < data.data.length; x += 4) {
		for (i = 0; i < 3; i++) {
			var t = (data.data[x + i] - low[i]) / chigh[i];
			threshold[i] += (t * (t * (t - threshold[i]) - threshold[i]) - threshold[i]) / 512;
		}
	}

	for (x = 0; x < data.data.length; x += 4) {
		var best = Infinity;
		var lowindex = -1;
		for (i = 0; i < palette.length; i++) {
			var cr = palette[i][0] - data.data[x];
			var cg = palette[i][1] - data.data[x + 1];
			var cb = palette[i][2] - data.data[x + 2];
			var a = Math.sqrt(cr * cr + cg * cg + cb * cb);
			if (a < best) { //get closest color
			    best = a;
			    lowindex = i;
			}
		}
		if (lowindex != -1) {
			var errr = Math.abs(data.data[x    ] - palette[lowindex][0]);
			var errg = Math.abs(data.data[x + 1] - palette[lowindex][1]);
			var errb = Math.abs(data.data[x + 2] - palette[lowindex][2]);
			if ((errr > chigh[0] * threshold[0] || errg > chigh[1] * threshold[1] || errb > chigh[2] * threshold[2]) && palette.length < 4) {
				palette.push([data.data[x], data.data[x + 1], data.data[x + 2]]);
			} else {
				palette[lowindex][0] += (data.data[x    ] - palette[lowindex][0]) / (16384 / best);
				palette[lowindex][1] += (data.data[x + 1] - palette[lowindex][1]) / (16384 / best);
				palette[lowindex][2] += (data.data[x + 2] - palette[lowindex][2]) / (16384 / best);
			}
		} else {
			palette.push([data.data[x], data.data[x + 1], data.data[x + 2]]);
		}
	}

	function setColors(newPalette) {
		for (var i = 0; i < newPalette.length; i++) {
			var button = document.querySelectorAll("#chatdraw button-area button.colorChange")[i];
			var newColorStyle = "rgb(" + newPalette[i].join() + ")";
			swapColor(document.querySelector("#chatdraw canvas"), fillStyleToRgb(button.style.color), newPalette);
			button.style.color = newColorStyle;
		}
		updateImage();
	}

	var chatDrawColors = palette;
	for (x = 0; x < chatDrawColors.length; x++) {
		for (i = 0; i < chatDrawColors[x].length; i++) {
			chatDrawColors[x][i] = Math.floor(chatDrawColors[x][i]);
		}
	}
	setColors(chatDrawColors);
};
sidePane.appendChild(paletteOptimize);

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(event) {
	if (moving) {
		updateMoveBoxPos(event.clientX-offsetX,event.clientY-offsetY);
		updatePreview();
	}
};
moveBoxParent.onmouseup = moveBoxParent.onmouseleave = function() {
	moving = false;
	moveBox.style.cursor = "grab";
	updateImage();
};
moveBoxParent.onwheel = function(event) {
	updateScale(scale + event.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(event) {
	moving = true;
	moveBox.style.cursor = "grabbing";
	offsetX = event.clientX - elemX;
	offsetY = event.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);

//blurring checkbox
var blurring = document.createElement("input");
blurring.type = "checkbox";
blurring.checked = false;
blurring.onchange = function() {
	c2d.webkitImageSmoothingEnabled = c2d.imageSmoothingEnabled = this.checked;
	pc2d.webkitImageSmoothingEnabled = pc2d.imageSmoothingEnabled = this.checked;
	updateImage();
};
sidePane.appendChild(blurring);
sidePane.appendChild(document.createTextNode("Smooth Resize"));

//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(event) {
	if (isImage) {
		var rect = pCanvas.getBoundingClientRect();
		var x = Math.round(event.clientX - rect.left - 1);
		var y = Math.round(event.clientY - rect.top - 1);
		var pixel = pc2d.getImageData(x, y, 1, 1).data;
		if (!pixel[3]) {
		    pixel = [255, 255, 255, 255];
		}
		var button = document.querySelector("#chatdraw button-area button[data-selected=\"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[data-keep=\"true\"] button").addEventListener("click", function() {
	isImage = false;
	moveBoxParent.style.backgroundImage = "";
	pc2d.clearRect(0, 0, cW, cH);
});//x button

var sizeButton = document.querySelector("#chatdraw button-area button[data-width]");

sizeButton.addEventListener("mousedown", function(event) {
	if (event.buttons & 2){
		for (var i = 1; i <= 6; i++){
		    sizeButton.click();
		}
	}
});

sizeButton.addEventListener("contextmenu", function(event) {
	event.preventDefault();
});

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) {
	var dither = ditherSlider.value;
	var i, palette = [];
	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 (i = 0; i < paletteSize; i++) {
        palette.push(fillStyleToRgb(colorButtons[i].style.color));
    }

	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;
				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);
	drawer.Redraw();
	console.log("Image conversion sucessful.");
}
}