// Settings ===================
var pixelPerDay = 1;
var imgUrl = "https://jwillmer.de/media/img/2017-04-25-every-day-a-pixel-abstract-painting.jpg";
var startDate = new Date('2000-01-01');


// Code =======================
document.getElementById('pixelPerDay').innerHTML = pixelPerDay;
document.getElementById('startDate').innerHTML = startDate.toLocaleDateString();

var renderSpeed = 86400000; // 1 day
var today = Date.now();
var dayDifference = Math.floor((today - startDate) / (1000*60*60*24))
var img = new Image;

img.onload = function() {
  var canvas = getEmptyCanvas(img.width, img.height);
  var context = canvas.getContext('2d');    
  var hiddenCanvas = setHiddenCanvas(img);  
  var hiddenContext = hiddenCanvas.getContext('2d');
  render(context, hiddenContext);  
}
img.crossOrigin="anonymous";
img.src = imgUrl;


function render(context, hiddenContext) {
    var maxWidth = hiddenContext.canvas.width;
    var maxHeight = hiddenContext.canvas.height;
    var maxPixels = maxWidth * maxHeight;    
    var renderedPixels = 0;  
  
    if(dayDifference > 0) {
        var pastPixels = dayDifference * pixelPerDay;
        var pixelsLeft = maxPixels - pastPixels;
        var preRender = pixelsLeft > 0 ? pastPixels : pixelsLeft;      
        renderPixels(context, hiddenContext, preRender);  
        renderedPixels += preRender;
        console.log(renderedPixels + "/" + maxPixels);
    }
  
    var timer = setInterval(function() {        
      if(renderedPixels < maxPixels){  
        var pixelsLeft = maxPixels - renderedPixels;
        pixelPerDay = pixelsLeft > pixelPerDay ? pixelPerDay : pixelsLeft;
        renderPixels(context, hiddenContext, pixelPerDay);  
        renderedPixels ++;
        console.log(renderedPixels + "/" + maxPixels);
      } else {
        clearInterval(timer);
      }   
      // Break for development
      // clearInterval(timer);
    }, renderSpeed);
}

function renderPixels(context, hiddenContext, amount) {
  for(var n = 0; n < amount; n++){
    renderPixel(context, hiddenContext);
  }
}

function renderPixel(context, hiddenContext) {
  var coordinate = randomEmptyCoordinate(context, hiddenContext);
  var imageData = hiddenContext.getImageData(coordinate[0], coordinate[1], 1, 1);
  context.putImageData(imageData, coordinate[0], coordinate[1]);
  setUsedCoordinate(coordinate);
}

function randomEmptyCoordinate(context, hiddenContext) {
    var maxWidth = hiddenContext.canvas.width;
    var maxHeight = hiddenContext.canvas.height;  
    var x = Math.floor(Math.random() * maxWidth + 1); 
    var y = Math.floor(Math.random() * maxHeight + 1);   
    if(!isNewImageData(x, y)){
      return randomEmptyCoordinate(context, hiddenContext);
    }  
    return [x, y];
}

var imageDataArray = [];
function setUsedCoordinate(item) {
  imageDataArray.push(item);
}

function isNewImageData(x,y) {
  return !isItemInArray(imageDataArray, [x,y]);  
}

function isItemInArray(array, item) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][0] == item[0] && array[i][1] == item[1]) {
            return true;
        }
    }
    return false;
}

function getEmptyCanvas(width, height) {
   var canvas = document.getElementById('canvas');
  canvas.width = width;
  canvas.height = height;
  return canvas;
}

function setHiddenCanvas(img) {
  var canvas = document.getElementById('canvasHidden');
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, img.width, img.height);
  return canvas;  
}