breakSlide.js

CmdUtils.CreateCommand({
  names: ["breakSlide"],
  author: {
    name: "Christian Sonne",
    email: "cers@geeksbynature.dk",
    homepage: "http://geeksbynature.dk/",
  },
  license: "GPL",
  homepage: "http://geeksbynature.dk/",
  execute: function() {
    var document = CmdUtils.getDocumentInsecure();
    var window = CmdUtils.getWindow();
    
    var img = document.createElement("img");
    var el = document.getElementById("r1c1");
    var bg = window.getComputedStyle(el,"").backgroundImage;
    img.src = bg.substring(5,bg.length-2);
    var c = document.createElement("canvas");
    c.height = img.height;
    c.width = img.width;
    var ctx = c.getContext('2d');
    ctx.drawImage(img,0,0);
    var grid = [];
    for (var r = 1; r < 4; r++) {
      var row = [];
      for (var c = 1; c < 4; c++) {
        var cell = document.getElementById("r"+r+"c"+c);
        var style = window.getComputedStyle(cell, "");
        var pos = style.backgroundPosition.split(" ")[1];
        var data = ctx.getImageData(0, Math.abs(parseInt(pos)), 120, 40);
        row.push({t: data.data.slice(0, 4*data.width),
                  b: data.data.slice((data.height-1)*4*data.width)});
      }
      grid.push(row);
    }
    function calc_fitness(t,m,b) {
      const THRESHOLD = 5;
      var fitness = 0;
      for (var i = 0; i < t.t.length; i += 4) {
        var u = (t.b[i]+t.b[i+1]+t.b[i+2])/3,
            l = (m.t[i]+m.t[i+1]+m.t[i+2])/3;
        if (Math.abs(u-l) < THRESHOLD && u+l < 500)
            fitness++;
        var u = (m.b[i]+m.b[i+1]+m.b[i+2])/3,
            l = (b.t[i]+b.t[i+1]+b.t[i+2])/3;
        if (Math.abs(u-l) < THRESHOLD && u+l < 500)
            fitness++;
      }
      return fitness;
    };

    function find_solution(grid) {
      var paths = [];
      for (var t = 0; t < 3; t++) {
        for (var m = 0; m < 3; m++) {
          for (var b = 0; b < 3; b++) {
            paths.push({path:    [t,m,b],
                        fitness: calc_fitness(grid[0][t], grid[1][m], grid[2][b])})
          }
        }
      }
      return paths.sort(function(a,b){return a.fitness-b.fitness;}).pop();
    };
    
    var solution = find_solution(grid);
    for (var i = 1; i < 4; i++) {
      var row = document.getElementById("row"+i);
      row.style.left = (120-solution.path[i-1]*120)+"px";
      document.querySelector("#slider"+i+" a").style.left=(100-solution.path[i-1]*50)+"%";
    }
  }
});