img = document.getElementById("slideBg")
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);

function getPixel(x, y){
    return context.getImageData(x, y, 1, 1).data;
}

function deepEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);
  if (keys1.length !== keys2.length) {
    return false;
  }
  for (const key of keys1) {
    const val1 = object1[key];
    const val2 = object2[key];
    const areObjects = isObject(val1) && isObject(val2);
    if (
      areObjects && !deepEqual(val1, val2) ||
      !areObjects && val1 !== val2
    ) {
      return false;
    }
  }
  return true;
}


function make2DArray(w, h, val) {
    var arr = [];
    for(let i = 0; i < h; i++) {
        arr[i] = [];
        for(let j = 0; j < w; j++) {
            arr[i][j] = val;
        }
    }
    return arr;
}

function makeArray(h, val) {
    var arr = [];
    for(let i = 0; i < h; i++) {
        arr[i] = val;
    }
    return arr;
}

function distanceColor(color_1, color_2){
	var s = 0;
	for (let i=0; i<3; i++){
		s += (color_1[i] - color_2[i]) * (color_1[i] - color_2[i])
	}
	return Math.sqrt(s);
}

function isObject(object) {
  return object != null && typeof object === 'object';
}

var imageBlockSize = 68;
yBlockImage = parseInt(document.getElementById("slideBlock").style.top.replace("px", ""))

var averageColor = [0, 0, 0]

var xSlideImage = 0
var ySlideImage = 0

while (!deepEqual(getPixel(xSlideImage, 0), new Uint8ClampedArray([0, 0, 0, 0]))){
	xSlideImage += 1
}

while (!deepEqual(getPixel(0, ySlideImage), new Uint8ClampedArray([0, 0, 0, 0]))){
	ySlideImage += 1
}

for (let x=0; x < xSlideImage; x++){
	for (let y = yBlockImage; y < yBlockImage + imageBlockSize; y++){
		averageColor[0] += getPixel(x, y)[0];
		averageColor[1] += getPixel(x, y)[1];
		averageColor[2] += getPixel(x, y)[2];
	}
}

averageColor[0] /= (xSlideImage * imageBlockSize)
averageColor[1] /= (xSlideImage * imageBlockSize)
averageColor[2] /= (xSlideImage * imageBlockSize)

darkerColor = [73, 60, 54]
darkeraverageColor = [averageColor[0] - darkerColor[0], averageColor[1] - darkerColor[1], averageColor[2] - darkerColor[2]]

var pointArray = make2DArray(ySlideImage, xSlideImage, 0);
for (x=0; x < xSlideImage; x++){
	for (let y = 0; y < ySlideImage; y++){
		pointArray[x][y] = distanceColor(getPixel(x, y), averageColor)
	}
}


for (x=1; x < xSlideImage - 1; x++){
	for (let y = 0; y < ySlideImage - 1; y++){
		pointArray[x][y] += pointArray[x-1][y]
	}
}


prefixPointArray = makeArray(xSlideImage, 0);
for (x=0; x < xSlideImage - 1; x++){
	for (let y = yBlockImage; y < yBlockImage + imageBlockSize; y++){
		prefixPointArray[x] += pointArray[x][y]
	}
}

var bestX = 0;
var bestXValue = 100000000;
for (x=imageBlockSize; x < xSlideImage - 1; x++){
	if (prefixPointArray[x] - prefixPointArray[x - imageBlockSize] < bestXValue){
		bestX = x;
		bestXValue = prefixPointArray[x] - prefixPointArray[x - imageBlockSize];
	}
}