AnimCube7.js

/**
 * @author Josef Jelinek
 * @version 3.5b
 * 7x7x7 Cube by Marcelo Falcão de Oliveira 
 */
"use strict";

function AnimCube7(params) {
  var cubeDim = 7;
  // external configuration
  var config = [];
  // background colors
  var bgColor;
  var hlColor;
  var textColor;
  var buttonBgColor;
  var sliderColor; // progress bar
  var sliderBgColor;
  var buttonBorderColor;
  var cubeColor;
  // cube colors
  var colors = [];
  // cube facelets
  var cube = [];
  var scube = [];
  var initialCube = [];
  var initialSCube = [];
  // normal vectors
  var faceNormals = [
    [ 0.0, -1.0,  0.0], // U
    [ 0.0,  1.0,  0.0], // D
    [ 0.0,  0.0, -1.0], // F
    [ 0.0,  0.0,  1.0], // B
    [-1.0,  0.0,  0.0], // L
    [ 1.0,  0.0,  0.0]  // R
  ];
  // vertex co-ordinates
  var cornerCoords = [
    [-1.0, -1.0, -1.0], // UFL
    [ 1.0, -1.0, -1.0], // UFR
    [ 1.0, -1.0,  1.0], // UBR
    [-1.0, -1.0,  1.0], // UBL
    [-1.0,  1.0, -1.0], // DFL
    [ 1.0,  1.0, -1.0], // DFR
    [ 1.0,  1.0,  1.0], // DBR
    [-1.0,  1.0,  1.0]  // DBL
  ];
  // vertices of each face
  var faceCorners = [
    [0, 1, 2, 3], // U: UFL UFR UBR UBL
    [4, 7, 6, 5], // D: DFL DBL DBR DFR
    [0, 4, 5, 1], // F: UFL DFL DFR UFR
    [2, 6, 7, 3], // B: UBR DBR DBL UBL
    [0, 3, 7, 4], // L: UFL UBL DBL DFL
    [1, 5, 6, 2]  // R: UFR DFR DBR UBR
  ];
  // corresponding corners on the opposite face
  var oppositeCorners = [
    [0, 3, 2, 1], // U->D
    [0, 3, 2, 1], // D->U
    [3, 2, 1, 0], // F->B
    [3, 2, 1, 0], // B->F
    [0, 3, 2, 1], // L->R
    [0, 3, 2, 1], // R->L
  ];
  // faces adjacent to each face
  var adjacentFaces = [
    [2, 5, 3, 4], // U: F R B L
    [4, 3, 5, 2], // D: L B R F
    [4, 1, 5, 0], // F: L D R U
    [5, 1, 4, 0], // B: R D L U
    [0, 3, 1, 2], // L: U B D F
    [2, 1, 3, 0]  // R: F D B U
  ];
  // current twisted layer
  var twistedLayer;
  var twistedMode;
  // directions of facelet cycling for all faces
  var faceTwistDirs = [1, 1, -1, -1, -1, -1];
  // initial observer co-ordinate axes (view)
  var eye = [0.0, 0.0, -1.0];
  var eyeX = [1.0, 0.0, 0.0]; // (sideways)
  var eyeY = []; // (vertical)
  var initialEye = [];
  var initialEyeX = [];
  var initialEyeY = [];
  // angle of rotation of the twistedLayer
  var currentAngle; // edited angle of twisted layer
  var originalAngle; // angle of twisted layer
  // animation speed
  var speed;
  var doubleSpeed;
  // current state of the program
  var natural = true; // cube is compact, no layer is twisted
  var toTwist; // layer can be twisted
  var interrupted; // thread was interrupted
  var restarted; // animation was stopped
  var mirrored; // mirroring of the cube view
  var editable; // editation of the cube with a mouse
  var repeatable; // allow repetition of sequence
  var clickProgress; // allow advance by clicking progress bar
  var twisting; // a user twists a cube layer
  var spinning; // an animation twists a cube layer
  var animating; // animation run
  var dragging; // progress bar is controlled
  var demo; // demo mode
  var persp; // perspective deformation
  var scale; // cube scale
  var align; // cube alignment (top, center, bottom)
  var hint;
  var faceShift;
  var hintHoriz;
  var hintVert;
  var hintBorder;
  var moveCounter;
  // move sequence data
  var move = [];
  var demoMove = [];
  var initialMove = [];
  var initialReversedMove = [];
  var curMove;
  var movePos;
  var moveDir;
  var moveOne;
  var moveAnimated;
  var metric;
  var infoText = [];
  var curInfoText;
  // state of buttons
  var buttonBar; // button bar mode
  var buttonHeight;
  var drawButtons = true;
  // including buttonSymbolScale
  var buttonSymbolScale = 1.0;
  var pushed;
  var buttonPressed = -1;
  var progressHeight = 6;
  var textHeight = 12;
  var moveText;
  var moveTextSpace;
  var outlined = true;
  var snap = false;
  var signNotation;
  var wcaNotation;
  var yzAlt;
  var superCube = false;
  var scrambleToggle = false;
  var scramble = 0;
  var randMoveCount = 0;
  var scw = 0;
  var borderWidth = 0;
  var rotateAllowed = 1;
  // transformation tables for compatibility with Lars's applet
  var posFaceTransform = [3, 2, 0, 5, 1, 4];
  var posFaceletTransform = [
    [42,35,28,21,14,7,0,43,36,29,22,15,8,1,44,37,30,23,16,9,2,45,38,31,24,17,10,3,46,39,32,25,18,11,4,47,40,33,26,19,12,5,48,41,34,27,20,13,6], // B
    [6,13,20,27,34,41,48,5,12,19,26,33,40,47,4,11,18,25,32,39,46,3,10,17,24,31,38,45,2,9,16,23,30,37,44,1,8,15,22,29,36,43,0,7,14,21,28,35,42], // F
    [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48], // U
    [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48], // R
    [42,35,28,21,14,7,0,43,36,29,22,15,8,1,44,37,30,23,16,9,2,45,38,31,24,17,10,3,46,39,32,25,18,11,4,47,40,33,26,19,12,5,48,41,34,27,20,13,6], // D
    [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48]  // L
  ];

  function onModuleLoad() {
    var fname = getParameter("config");
    if (fname != null)
      loadConfigFile(fname);
    else {
      init();
    }
  }

  // setup default configuration
  function loadConfigFile(file) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = handler;
    xhr.open('GET', file, true);
    xhr.send();

    function handler() {
      if (xhr.readyState == 4) {
        if (xhr.status == 200)
          parseConfigFile(xhr.responseText);
        else
          console.log('Error loading config file: ' + file);
        init();
      }
    }
  }

  function parseConfigFile(text) {
    var lines = text.split('\n');
    for (var i = 0; i < lines.length; i++) {
      var line = lines[i].split('=');
      if (typeof line[1] != 'undefined')
        config[line[0].trim()] = line[1].trim();
    }
  }

  function init() {
    // setup colors
    colors[0]  = rgbToHex(255, 128,  64);  // 0 - light orange
    colors[1]  = rgbToHex(255,   0,   0);  // 1 - pure red
    colors[2]  = rgbToHex(  0, 255,   0);  // 2 - pure green
    colors[3]  = rgbToHex(  0,   0, 255);  // 3 - pure blue
    colors[4]  = rgbToHex(153, 153, 153);  // 4 - white grey
    colors[5]  = rgbToHex(170, 170,  68);  // 5 - yellow grey
    colors[6]  = rgbToHex(187, 119,  68);  // 6 - orange grey
    colors[7]  = rgbToHex(153,  68,  68);  // 7 - red grey
    colors[8]  = rgbToHex(68,  119,  68);  // 8 - green grey
    colors[9]  = rgbToHex(0,    68, 119);  // 9 - blue grey
    colors[10] = rgbToHex(255, 255, 255);  // W - white
    colors[11] = rgbToHex(255, 255,   0);  // Y - yellow
    colors[12] = rgbToHex(255,  96,  32);  // O - orange
    colors[13] = rgbToHex(208,   0,   0);  // R - red
    colors[14] = rgbToHex(0,   144,   0);  // G - green
    colors[15] = rgbToHex(32,   64, 208);  // B - blue
    colors[16] = rgbToHex(176, 176, 176);  // L - light gray
    colors[17] = rgbToHex( 80,  80,  80);  // D - dark gray
    colors[18] = rgbToHex(255,   0, 255);  // M - magenta
    colors[19] = rgbToHex(  0, 255, 255);  // C - cyan
    colors[20] = rgbToHex(255, 160, 192);  // P - pink
    colors[21] = rgbToHex(32,  255,  16);  // N - light green
    colors[22] = rgbToHex(  0,   0,   0);  // K - black
    colors[23] = rgbToHex(128, 128, 128);  // . - gray
    // setup window background color
    var param = getParameter("bgcolor");
    if (param != null && param.length == 6) {
      if (validateColor(param))
        bgColor = "#" + param;
      else
        bgColor = "gray";
    }
    else
      bgColor = "gray";
    // setup button bar background color
    param = getParameter("butbgcolor");
    if (param != null && param.length == 6) {
      if (validateColor(param))
        buttonBgColor = "#" + param;
      else
        buttonBgColor = bgColor;
    }
    else
      buttonBgColor = bgColor;
    // custom colors
    param = getParameter("colors");
    if (param != null) {
      for (var i = 0, j = 0; i < 10 && j < param.length; i++, j+=6) {
        var s = param.substr(j, 6);
        if (s.length == 6 && validateColor(s))
          colors[i] = "#" + s;
      }
    }
    // clean the cube
    for (var i = 0; i < 6; i++)
      for (var j = 0; j < 49; j++)
        cube[i][j] = i + 10;
    param = getParameter("supercube");
    if (param != null)
      if ("1" == (param)) {
        superCube = true;
        setBorderWidth(.06);
        // change white to black for default colorscheme
        for (var i = 0; i < 49; i++)
          cube[0][i] = 22;
        param = getParameter("scw");
        if (param != null) {
          if ("1" == (param))
            scw = 1;
          else if ("2" == (param))
            scw = 2;
        }
        if (scw == 1)
          colors[10] = "#000000";
      }
    param = getParameter("gabbacolors");
    if (param != null)
      if ("1" == (param)) {
        if (superCube == true) {
          colors[11] = "#fdcf00"; // Y - yellow
          colors[12] = "#fd4e0a"; // O - orange
          colors[13] = "#93000d"; // R - red
          colors[14] = "#00702d"; // G - green
          colors[15] = "#00347a"; // B - blue
        }
        else {
          setBorderWidth(.06);
          colors[11] = "#ffd90a"; // Y
          colors[12] = "#ff4f0b"; // O
          colors[13] = "#9e0b19"; // R
          colors[14] = "#0b7d39"; // G
          colors[15] = "#0b4186"; // B
        }
      }
    param = getParameter("borderwidth");
    if (param != null) {
      for (var i = 0; i < param.length; i++)
        if (param.charAt(i) >= '0' && param.charAt(i) <= '9')
          borderWidth = borderWidth * 10 + parseInt(param[i]);
      if (borderWidth >= 0 && borderWidth <= 20)
        setBorderWidth(borderWidth / 100);
    }
    // clean the supercube
    if (superCube) {
      for (var i = 0; i < 6; i++)
        for (var j = 0; j < 49; j++)
          scube[i][j] = 0;
    }
    var initialPosition = "lluu";
    // setup color configuration of the solved cube
    param = getParameter("colorscheme");
    if (param != null && param.length == 6) {
      for (var i = 0; i < 6; i++) { // udfblr
        var color = 23;
        for (var j = 0; j < 23; j++) {
          if (param[i].toLowerCase() == "0123456789wyorgbldmcpnk".charAt(j)) {
            color = j;
            break;
          }
        }
        for (var j = 0; j < 49; j++)
          cube[i][j] = color;
      }
    }
    param = getParameter("scramble");
    if ("1" == (param))
      scramble = 1;
    else if ("2" == (param))
      scramble = 2;
    if (scramble == 0) {
      // setup facelets - compatible with Lars's applet
      param = getParameter("pos");
      if (param != null && param.length == 294) {
        initialPosition = "uuuuff";
        if (bgColor == "gray")
          bgColor = "white";
        for (var i = 0; i < 6; i++) {
          var ti = posFaceTransform[i];
          for (var j = 0; j < 49; j++) {
            var tj = posFaceletTransform[i][j];
            cube[ti][tj] = 23;
            for (var k = 0; k < 14; k++) {
              // "abcdefgh" ~ "gbrwoyld"
              if (param.charAt(i * 49 + j) == "DFECABdfecabgh".charAt(k)) {
                cube[ti][tj] = k + 4;
                break;
              }
            }
          }
        }
      }
      // setup color facelets
      param = getParameter("facelets");
      if (param != null && param.length == 294) {
        for (var i = 0; i < 6; i++) {
          for (var j = 0; j < 49; j++) {
            cube[i][j] = 23;
            for (var k = 0; k < 23; k++) {
              if (param[i * 49 + j].toLowerCase() == "0123456789wyorgbldmcpnk".charAt(k)) {
                cube[i][j] = k;
                break;
              }
            }
          }
        }
      }
      // setup supercube facelet twist
      param = getParameter("superfacelets");
      if (param != null && param.length == 294) {
        for (var i = 0; i < 6; i++) {
          for (var j = 0; j < 49; j++) {
            for (var k = 0; k < 4; k++) {
              if (param[i * 49 + j].toLowerCase() == "0123".charAt(k)) {
                scube[i][j] = k;
                break;
              }
            }
          }
        }
      }
    }
    moveText = 0;
    yzAlt = false;
    signNotation = false;
    param = getParameter("sign");
    if (param != null)
      if ("1" == param) {
        signNotation = true;
        moveText = 5;
        yzAlt = true;
      }
    wcaNotation = false;
    param = getParameter("wca");
    if (param != null)
      if ("1" == param) {
        wcaNotation = true;
        moveText = 6;
        yzAlt = true;
      }
    param = getParameter("yz");
    if (param != null)
      if ("0" == param)
        yzAlt = false;
      else if ("1" == param)
        yzAlt = true;
    param = getParameter("randmoves");
    if (param != null) {
      var rm = 0;
      for (var i = 0; i < param.length; i++)
        if (param.charAt(i) >= '0' && param.charAt(i) <= '9')
          rm = rm * 10 + parseInt(param[i]);
      if (rm > 0)
        randMoveCount = rm;
    }
    // setup move sequence (and info texts)
    param = getParameter("move");
    if ("random" == (param) || scramble > 0)
      param = randMoves(7, randMoveCount);
    move = (param == null ? [] : getMove(param, true));
    movePos = 0;
    curInfoText = -1;
    // setup initial move sequence
    if (scramble == 0) {
      param = getParameter("initmove");
      if (param != null) {
        if ("random" == (param))
          param = randMoves(7, randMoveCount);
        initialMove = param == ("#") ? move : getMove(param, false);
      }
      // setup initial reversed move sequence
      param = getParameter("initrevmove");
      if (param != null) {
        if ("random" == (param))
          param = randMoves(7, randMoveCount);
        initialReversedMove = param == ("#") ? move : getMove(param, false);
      }
      // setup demo move sequence
      param = getParameter("demo");
      if (param != null) {
        if ("random" == (param))
          param = randMoves(7, randMoveCount);
        demoMove = param == ("#") ? move : getMove(param, true);
        if (demoMove.length > 0 && demoMove[0].length > 0)
          demo = true;
      }
    }
    // setup initial cube position
    param = getParameter("position");
    vNorm(vMul(eyeY, eye, eyeX));
    if (param == null)
      param = initialPosition;
    var pi12 = Math.PI / 12;
    for (var i = 0; i < param.length; i++) {
      var angle = pi12;
      switch (param[i].toLowerCase()) {
        case 'd':
          angle = -angle;
        case 'u':
          vRotY(eye, angle);
          vRotY(eyeX, angle);
          break;
        case 'f':
          angle = -angle;
        case 'b':
          vRotZ(eye, angle);
          vRotZ(eyeX, angle);
          break;
        case 'l':
          angle = -angle;
        case 'r':
          vRotX(eye, angle);
          vRotX(eyeX, angle);
          break;
      }
    }
    vNorm(vMul(eyeY, eye, eyeX)); // fix eyeY
    // setup quarter-turn speed and double-turn speed
    speed = 0;
    doubleSpeed = 0;
    param = getParameter("speed");
    if (param != null)
      for (var i = 0; i < param.length; i++)
        if (param.charAt(i) >= '0' && param.charAt(i) <= '9')
          speed = speed * 10 + parseInt(param[i]);
    param = getParameter("doublespeed");
    if (param != null)
      for (var i = 0; i < param.length; i++)
        if (param.charAt(i) >= '0' && param.charAt(i) <= '9')
          doubleSpeed = doubleSpeed * 10 + parseInt(param[i]);
    if (speed == 0)
      speed = 10;
    if (doubleSpeed == 0)
      doubleSpeed = speed * 3 / 2;
    // perspective deformation
    persp = 0;
    param = getParameter("perspective");
    if (param == null)
      persp = 2;
    else
      for (var i = 0; i < param.length; i++)
        if (param.charAt(i) >= '0' && param.charAt(i) <= '9')
          persp = persp * 10 + parseInt(param[i]);
    // cube scale
    var varscale = 0;
    param = getParameter("scale");
    if (param != null)
      for (var i = 0; i < param.length; i++)
        if (param.charAt(i) >= '0' && param.charAt(i) <= '9')
          varscale = varscale * 10 + parseInt(param[i]);
    scale = 1.0 / (1.0 + varscale / 10.0);
    // hint displaying
    hint = false;
    param = getParameter("hint");
    if (param != null) {
      hint = true;
      faceShift = 0.0;
      for (var i = 0; i < param.length; i++)
        if (param.charAt(i) >= '0' && param.charAt(i) <= '9')
          faceShift = faceShift * 10 + parseInt(param[i]);
      if (faceShift < 1.0)
        hint = false;
      else
        faceShift /= 10.0;
    }
    hintHoriz = 3.7;
    param = getParameter("hinthoriz");
    if (param != null) {
      var n = parseFloat(param);
      if (n > 0)
        hintHoriz = n;
    }
    hintVert = 3.7;
    param = getParameter("hintvert");
    if (param != null) {
      var n = parseFloat(param);
      if (n > 0)
        hintVert = n;
    }
    hintBorder = 0;
    param = getParameter("hintborder");
    if (param != null)
      if (param == "1")
        hintBorder = 1;
    // appearance and configuration of the button bar
    buttonHeight = 13;
    param = getParameter("buttonheight");
    if (param != null) {
      var n = parseInt(param);
      if (n >= 9 & n <= 25)
        buttonHeight = n;
    }// get button symbols' scale, default = 1, 0.5 min., 2.5 max. according to buttonHeight
    param = getParameter("butsymbolscale");
    if (param != null) {
      var n = parseFloat(param);
      if (n > 0) {
        if (n < 0.5 || n > 2.5) {n = 1.0}
        if (n > 1+(buttonHeight-9)*0.09375) {n = 1+(buttonHeight-9)*0.09375}
        buttonSymbolScale = n;
      }
    }
    progressHeight = move.length == 0 ? 0 : 6;
    buttonBar = 1;
    param = getParameter("buttonbar");
    if ("0" == (param)) {
      buttonBar = 0;
      buttonHeight = 0;
      progressHeight = 0;
    }
    else if ("1" == (param))
      buttonBar = 1;
    else if ("2" == (param) || move.length == 0) {
      buttonBar = 2;
      progressHeight = 0;
    }
    // whether the cube can be edited with mouse
    param = getParameter("edit");
    if ("0" == (param))
      editable = false;
    else
      editable = true;
    // whether the sequence can be repeated
    param = getParameter("repeat");
    if ("0" == (param))
      repeatable = false;
    else
      repeatable = true;
    // whether clicking on the progress bar advances through the sequence
    param = getParameter("clickprogress");
    if ("0" == (param))
      clickProgress = false;
    else
      clickProgress = true;
    // displaying the textual representation of the move
    param = getParameter("movetext");
    if ("0" == (param))
      moveText = 0;
    else if ("1" == (param))
      moveText = 1;
    else if ("5" == (param))
      moveText = 5;
    else if ("6" == (param))
      moveText = 6;
    moveTextSpace = 1;
    param = getParameter("movetextspace");
    if ("0" == (param))
      moveTextSpace = 0;
    // how texts are displayed
    param = getParameter("textsize");
    if (param != null) {
      var n = parseInt(param);
      if (n >= 5 & n <= 40)
        textHeight = n;
    }
    param = getParameter("fonttype");
    if (param == null || "1" == (param))
      outlined = true;
    else
      outlined = false;
    // metric
    metric = 0;
    param = getParameter("metric");
    if (param != null) {
      if ("1" == (param)) // quarter-turn
        metric = 1;
      else if ("2" == (param)) // face-turn
        metric = 2;
      else if ("3" == (param)) // slice-turn
        metric = 3;
    }
    align = 1;
    param = getParameter("align");
    if (param != null) {
      // 0 = top, 1 = center, 2 = bottom
      var n = parseInt(param);
      if (n >= 0 & n <= 3)
        align = n;
      if (n >= 3 & n <= 99)
        align = n / 100;
    }
    param = getParameter("snap");
    if (param != null)
      if ("1" == (param))
        snap = true;
    // setup initial values
    for (var i = 0; i < 6; i++)
      for (var j = 0; j < 49; j++) {
        initialCube[i][j] = cube[i][j];
        initialSCube[i][j] = scube[i][j];
      }
    if (initialMove.length > 0)
      doMove(cube, initialMove[0], 0, initialMove[0].length, false);
    if (initialReversedMove.length > 0)
      doMove(cube, initialReversedMove[0], 0, initialReversedMove[0].length, true);
    if (scramble == 2)
      doMove(cube, move[0], 0, move[0].length, true);
    for (var i = 0; i < 3; i++) {
      initialEye[i] = eye[i];
      initialEyeX[i] = eyeX[i];
      initialEyeY[i] = eyeY[i];
    }
    // setup colors (contrast)
    if (colorAverage(bgColor) < 128) {
      textColor = "white";
      hlColor = brighter(bgColor);
    }
    else {
      textColor = "black";
      hlColor = darker(bgColor);
    }
    if (colorAverage(buttonBgColor) < 128)
      buttonBorderColor = "white";
    else
      buttonBorderColor = "black";
    sliderColor = textColor;
    param = getParameter("slidercolor");
    if (param != null && param.length == 6) {
      if (validateColor(param))
        sliderColor = "#" + param;
    }
    sliderBgColor = darker(bgColor);
    param = getParameter("sliderbgcolor");
    if (param != null && param.length == 6) {
      if (validateColor(param))
        sliderBgColor = "#" + param;
    }
    param = getParameter("troughcolor");
    if (param != null && param.length == 6) {
      if (validateColor(param))
        sliderBgColor = "#" + param;
    }
    cubeColor = "black";
    param = getParameter("cubecolor");
    if (param != null && param.length == 6) {
      if (validateColor(param))
        cubeColor = "#" + param;
    }
    moveCounter = 1;
    param = getParameter("counter");
    if ("0" == param)
      moveCounter = 0;
    curInfoText = (move.length > 0 && move[0][0] >= 1000) ? 0 : -1;
    init2();
    if (demo)
      startAnimation(-1);
  } // init()
  function getParameter(s) {
    var uparam = searchParams[s];
    if (typeof uparam == 'undefined')
      return config[s];
    return uparam;
  }

  function setBorderWidth(w) {
    border[0][0] = border[0][1] = border[1][1] = border[3][0] = w;
    border[1][0] = border[2][0] = border[2][1] = border[3][1] = 1.0 - w;
  }
  var moveModes = [
    0, 0, 0, 0, 0, 0, // UDFBLR
    7, 7, 7,          // ESM
    3, 3, 3, 3, 3, 3, // XYZxyz
    2, 2, 2, 2, 2, 2  // udfblr
  ];
  var moveCodes = [
    0, 1, 2, 3, 4, 5, // UDFBLR
    1, 2, 4,          // ESM
    5, 2, 0, 5, 2, 0, // XYZxyz
    0, 1, 2, 3, 4, 5  // udfblr
  ];

  function getMove(sequence, info) {
    if (info) {
      var inum = 0;
      var pos = sequence.indexOf('{');
      while (pos != -1) {
        inum++;
        pos = sequence.indexOf('{', pos + 1);
      }
      if (infoText == null) {
        curInfoText = 0;
        infoText = [];
      }
      else {
        var infoText2 = [];
        for (var i = 0; i < infoText.length; i++)
          infoText2[i] = infoText[i];
        curInfoText = infoText.length;
        infoText = infoText2;
      }
    }
    var num = 1;
    var pos = sequence.indexOf(';');
    while (pos != -1) {
      num++;
      pos = sequence.indexOf(';', pos + 1);
    }
    var mv = [];
    var lastPos = 0;
    pos = sequence.indexOf(';');
    num = 0;
    while (pos != -1) {
      mv[num] = getMovePart(sequence.substring(lastPos, pos), info, num++);
      lastPos = pos + 1;
      pos = sequence.indexOf(';', lastPos);
    }
    mv[num] = getMovePart(sequence.substring(lastPos), info, num);
    return mv;
  }

  var modeChar = ['n', 't', 'c', 's', 'a', 'o', 'm', 'u'];

  function getMovePart(sequence, info, num) {
    if (wcaNotation) {
      sequence = wca_to_sign(sequence);
      sequence = convertNotation7(sequence);
    }
    else if (signNotation)
      sequence = convertNotation7(sequence);
    if (sequence.trim() == '#')
      if (typeof move[num] != 'undefined')
        return(move[num]);
    var length = 0;
    var mv = [];
    var moveCodeString = "UDFBLRESMXYZxyzudfblr";
    if (yzAlt == true)
      moveCodeString = "UDFBLRESMXZYxzyudfblr";
    for (var i = 0; i < sequence.length; i++) {
      if (sequence.charAt(i) == '.') {
        mv[length] = -1;
        length++;
      }
      else if (sequence.charAt(i) == '{') {
        i++;
        var s = "";
        while (i < sequence.length) {
          if (sequence.charAt(i) == '}')
            break;
          if (info)
            s += sequence.charAt(i);
          i++;
        }
        if (info) {
          infoText[curInfoText] = s;
          mv[length] = 1000 + curInfoText;
          curInfoText++;
          length++;
        }
      }
      else {
        for (var j = 0; j < 21; j++) {
          // if (sequence.charAt(i) == "UDFBLRESMXYZxyzudfblr".charAt(j)) {
          if (sequence.charAt(i) == moveCodeString.charAt(j)) {
            i++;
            var mode = moveModes[j];
            mv[length] = moveCodes[j] * 4 * (modeChar.length + 1);
            if (i < sequence.length) {
              if (moveModes[j] == 0) { // modifiers for basic characters UDFBLR
                for (var k = 0; k < modeChar.length; k++) {
                  if (sequence.charAt(i) == modeChar[k]) {
                    mode = k + 1;
                    i++;
                    break;
                  }
                }
              }
            }
            mv[length] += mode * 4;
            if (i < sequence.length) {
              if (sequence.charAt(i) == '1')
                i++;
              else if (sequence.charAt(i) == '\'' || sequence.charAt(i) == '3') {
                mv[length] += 2;
                i++;
              }
              else if (sequence.charAt(i) == '2') {
                i++;
                if (i < sequence.length && sequence.charAt(i) == '\'') {
                  mv[length] += 3;
                  i++;
                }
                else
                  mv[length] += 1;
              }
            }
            length++;
            i--;
            break;
          }
        }
      }
    }
    return mv;
  }

  function convertNotation7(s) {
    s = replaceMoves(s, 2, 'n', 0);
    s = replaceMoves(s, 3, 'o', 0);
    s = replaceMoves(s, 4, 'm', 0);
    s = replaceMoves(s, 2, 't', 1);
    s = replaceMoves(s, 3, 'u', 1);
    return s;
  }

  var faces = ['U', 'D', 'F', 'B', 'L', 'R'];

  function replaceMoves(s, a, b, t) {
    for (var i=0; i < 6; i++) {
      var f = (t==0) ? faces[i] : faces[i].toLowerCase();
      var r = new RegExp(a + f, "g");
      s = s.replace(/\{[^}]*\}|[^{}]+/g, (trecho) => {
        // If it starts with {, it is an info box then leave as it is
        if (trecho.startsWith("{")) return trecho;
        // otherwise, apply the replacements
        return trecho
        .replace(r, faces[i] + b);
      });
    }
    return s;
  }

  function wca_to_sign(s) {
    for (var i=0; i < 6; i++) {
      var r = new RegExp(faces[i] + 'w', "g");
      s = s.replace(/\{[^}]*\}|[^{}]+/g, (trecho) => {
        // If it starts with {, it is an info box then leave as it is
        if (trecho.startsWith("{")) return trecho;
        // otherwise, apply the replacements
        return trecho
        .replace(r, faces[i].toLowerCase());
      });
    }
    return s;
  }

  function moveTextFunc(move, start, end) {
    if (start >= move.length)
      return "";
    var s = "";
    for (var i = start; i < end; i++) {
      var t = turnTextFunc(move, i);
      if (t != '')
        s += t + (moveTextSpace ? ' ' : '');
    }
    return s;
  }
  var turnSymbol = [
    [ // "standard" notation
      ["U", "D", "F", "B", "L", "R"],
      ["Un", "Dn", "Fn", "Bn", "Ln", "Rn"],
      ["Ut", "Dt", "Ft", "Bt", "Lt", "Rt"],
      ["Uc", "Dc", "Fc", "Bc", "Lc", "Rc"],
      ["Us", "Ds", "Fs", "Bs", "Ls", "Rs"],
      ["Ua", "Da", "Fa", "Ba", "La", "Ra"],
      ["Uo", "Do", "Fo", "Bo", "Lo", "Ro"],
      ["Um", "Dm", "Fm", "Bm", "Lm", "Rm"],
      ["Uu", "Du", "Fu", "Bu", "Lu", "Ru"]
    ],
    [ // "reduced" notation
      ["U", "D", "F", "B", "L", "R"],
      ["Un", "Dn", "Fn", "Bn", "Ln", "Rn"],
      ["u", "d", "f", "b", "l", "r"],
      ["Z", "~Z", "Y", "~Y", "~X", "X"],
      ["Us", "Ds", "Fs", "Bs", "Ls", "Rs"],
      ["Ua", "Da", "Fa", "Ba", "La", "Ra"],
      ["Uo", "Do", "Fo", "Bo", "Lo", "Ro"],
      ["~E", "E", "S", "~S", "M", "~M"]
    ],
    [ // "reduced" notation - swapped Y and Z
      ["U", "D", "F", "B", "L", "R"],
      ["Un", "Dn", "Fn", "Bn", "Ln", "Rn"],
      ["u", "d", "f", "b", "l", "r"],
      ["Y", "~Y", "Z", "~Z", "~X", "X"],
      ["Us", "Ds", "Fs", "Bs", "Ls", "Rs"],
      ["Ua", "Da", "Fa", "Ba", "La", "Ra"],
      ["Uo", "Do", "Fo", "Bo", "lo", "Ro"],
      ["~E", "E", "S", "~S", "M", "~M"]
    ],
    [ // another reduced notation
      ["U", "D", "F", "B", "L", "R"],
      ["Un", "Dn", "Fn", "Bn", "Ln", "Rn"],
      ["Uu", "Dd", "Ff", "Bb", "Ll", "Rr"],
      ["QU", "QD", "QF", "QB", "QL", "QR"],
      ["UD'", "DU'", "FB'", "BF'", "LR'", "RL'"],
      ["UD", "DU", "FB", "BF", "LR", "RL"],
      ["Uo", "Do", "Fo", "Bo", "Lo", "Ro"],
      ["u", "d", "f", "b", "l", "r"]
    ],
    [ // SiGN
      ["U", "D", "F", "B", "L", "R"],
      ["2U", "2D", "2F", "2B", "2L", "2R"],
      ["u", "d", "f", "b", "l", "r"],
      ["y", "~y", "z", "~z", "~x", "x"],
      ["Us", "Ds", "Fs", "Bs", "Ls", "Rs"],
      ["Ua", "Da", "Fa", "Ba", "La", "Ra"],
      ["3U", "3D", "3F", "3B", "3L", "3R"],
      ["~E", "E", "S", "~S", "M", "~M"],
      ["3u", "3d", "3f", "3b", "3l", "3r"]
    ],
    [ // WCA 
      ["U", "D", "F", "B", "L", "R"],
      ["2U", "2D", "2F", "2B", "2L", "2R"],
      ["Uw", "Dw", "Fw", "Bw", "Lw", "Rw"],
      ["y", "~y", "z", "~z", "~x", "x"],
      ["Us", "Ds", "Fs", "Bs", "Ls", "Rs"],
      ["Ua", "Da", "Fa", "Ba", "La", "Ra"],
      ["3U", "3D", "3F", "3B", "3L", "3R"],
      ["~E", "E", "S", "~S", "M", "~M"],
      ["3Uw", "3Dw", "3Fw", "3Bw", "3Lw", "3Rw"]
    ]
  ];
  var modifierStrings = ["", "2", "'", "2'"];

  function turnTextFunc(move, pos) {
    if (pos >= move.length)
      return "";
    if (move[pos] >= 1000)
      return "";
    if (move[pos] == -1)
      return ".";
    var s = turnSymbol[moveText - 1][Math.floor(move[pos] / 4) % (modeChar.length + 1)][Math.floor(move[pos] / 4 / (modeChar.length + 1))];
    if (s.charAt(0) == '~')
      return s.substring(1) + modifierStrings[(move[pos] + 2) % 4];
    return s + modifierStrings[move[pos] % 4];
  }

  var metricChar = ["", "q", "h", "s"];

  function realMoveLength(move) {
    var length = 0;
    for (var i = 0; i < move.length; i++)
      if (move[i] < 1000)
        length++;
    return length;
  }

  function realMovePos(move, pos) {
    var rpos = 0;
    for (var i = 0; i < pos; i++)
      if (move[i] < 1000)
        rpos++;
    return rpos;
  }

  function arrayMovePos(move, realPos) {
    var pos = 0;
    var rpos = 0;
    while (true) {
      while (pos < move.length && move[pos] >= 1000)
        pos++;
      if (rpos == realPos)
        break;
      if (pos < move.length) {
        rpos++;
        pos++;
      }
    }
    return pos;
  }

  function moveLength(move, end) {
    var length = 0;
    for (var i = 0; i < move.length && (i < end || end < 0); i++)
      length += turnLength(move[i]);
    return length;
  }

  function turnLength(turn) {
    if (turn < 0 || turn >= 1000)
      return 0;
    var modifier = turn % 4;
    var mode = Math.floor(turn / 4) % (modeChar.length + 1);
    var n = 1;
    switch (metric) {
      case 1: // quarter-turn metric
        if (modifier == 1 || modifier == 3)
          n *= 2;
      case 2: // face-turn metric
        if (mode == 1 || (mode > 3 && mode != 8))
          n *= 2;
      case 3: // slice-turn metric
        if (mode == 3)
          n = 0;
        if (metric == 3 && (mode == 4 || mode == 5))
          n *= 2;
    }
    return n;
  }

  function initInfoText(move) {
    if (move.length > 0 && move[0] >= 1000)
      curInfoText = move[0] - 1000;
    else
      curInfoText = -1;
  }

  function doMove(cube, move, start, length, reversed) {
    var position = reversed ? start + length : start;
    while (true) {
      if (reversed) {
        if (position <= start)
          break;
        position--;
      }
      if (move[position] >= 1000) {
        curInfoText = reversed ? -1 : move[position] - 1000;
      }
      else if (move[position] >= 0) {
        var modifier = move[position] % 4 + 1;
        var mode = Math.floor(move[position] / 4) % (modeChar.length + 1);
        if (modifier == 4) // reversed double turn
          modifier = 2;
        if (reversed)
          modifier = 4 - modifier;
        twistLayers(cube, Math.floor(move[position] / 4 / (modeChar.length + 1)), modifier, mode);
      }
      if (!reversed) {
        position++;
        if (position >= start + length)
          break;
      }
    }
  }

  var jobNumber = 0;
  var nowServing = 0;

  function startAnimation(mode) {
    stopAnimation();
    if (!demo && (move.length == 0 || move[curMove].length == 0))
      return;
    if (demo && (demoMove.length == 0 || demoMove[0].length == 0))
      return;
    moveDir = 1;
    moveOne = false;
    moveAnimated = true;
    switch (mode) {
      case 0: // play forward
        break;
      case 1: // play backward
        moveDir = -1;
        break;
      case 2: // step forward
        moveOne = true;
        break;
      case 3: // step backward
        moveDir = -1;
        moveOne = true;
        break;
      case 4: // fast forward
        moveAnimated = false; // moved to run()
        break;
    }
    run(jobNumber++, moveDir);
  }

  function stopAnimation() {
    if (animating == true)
      restarted = true;
  }

  function clear() {
    movePos = 0;
    natural = true;
    mirrored = false;
    for (var i = 0; i < 6; i++)
      for (var j = 0; j < 49; j++) {
        cube[i][j] = initialCube[i][j];
        scube[i][j] = initialSCube[i][j];
      }
    if (initialMove.length > 0 && typeof initialMove[curMove] != 'undefined')
      doMove(cube, initialMove[curMove], 0, initialMove[curMove].length, false);
    if (initialReversedMove.length > 0 && typeof initialReversedMove[curMove] != 'undefined')
      doMove(cube, initialReversedMove[curMove], 0, initialReversedMove[curMove].length, true);
    if (move.length > 0)
      initInfoText(move[curMove]);
    if (scramble > 0)
      move = getMove(randMoves(7, randMoveCount), false);
    if (scramble == 2)
      doMove(cube, move[0], 0, move[0].length, true);
    for (var i = 0; i < 3; i++) {
      eye[i] = initialEye[i];
      eyeX[i] = initialEyeX[i];
      eyeY[i] = initialEyeY[i];
    }
    setTimeout(paint, 0);
  }

  // cube dimensions in number of facelets (mincol, maxcol, minrow, maxrow) for compact cube
  var cubeBlocks = [
    [[0, 7], [0, 7]], // U
    [[0, 7], [0, 7]], // D
    [[0, 7], [0, 7]], // F
    [[0, 7], [0, 7]], // B
    [[0, 7], [0, 7]], // L
    [[0, 7], [0, 7]]  // R
  ];
  // subcube dimensions
  var topBlocks = [];
  var midBlocks = [];
  var midBlocks2 = [];
  var midBlocks3 = [];
  var midBlocks4 = [];
  var midBlocks5 = []
  var botBlocks = [];
  // all possible subcube dimensions for top and bottom layers
  var topBlockTable = [
    [[0, 0], [0, 0]], // 0
    [[0, 7], [0, 7]], // 1
    [[0, 7], [0, 1]], // 2
    [[0, 1], [0, 7]], // 3
    [[0, 7], [6, 7]], // 4
    [[6, 7], [0, 7]] // 5
  ];
  // indices to topBlockTable[] and botBlockTable[] for each twistedLayer value
  var topBlockFaceDim = [
  // U  D  F  B  L  R
    [1, 0, 3, 3, 2, 3], // U
    [0, 1, 5, 5, 4, 5], // D
    [2, 3, 1, 0, 3, 2], // F
    [4, 5, 0, 1, 5, 4], // B
    [3, 2, 2, 4, 1, 0], // L
    [5, 4, 4, 2, 0, 1]  // R
  ];
  var botBlockFaceDim = [
  // U  D  F  B  L  R
    [0, 1, 5, 5, 4, 5], // U
    [1, 0, 3, 3, 2, 3], // D
    [4, 5, 0, 1, 5, 4], // F
    [2, 3, 1, 0, 3, 2], // B
    [5, 4, 4, 2, 0, 1], // L
    [3, 2, 2, 4, 1, 0]  // R
  ];
  // subcube dimensions for middle layers
  var midBlockTable = [
    [[0, 0], [0, 0]], // 0
    [[0, 7], [1, 2]], // 1
    [[1, 2], [0, 7]], // 2
    [[0, 7], [5, 6]], // 3
    [[5, 6], [0, 7]], // 4
    [[0, 7], [2, 3]], // 5
    [[2, 3], [0, 7]], // 6
    [[0, 7], [4, 5]], // 7
    [[4, 5], [0, 7]], // 8
    [[0, 7], [3, 4]], // 9
    [[3, 4], [0, 7]] // 10
  ];
  var midBlockFaceDim = [
  // U  D  F  B  L  R
    [0, 0, 2, 2, 1, 2], // U
    [0, 0, 4, 4, 3, 4], // D
    [1, 2, 0, 0, 2, 1], // F
    [3, 4, 0, 0, 4, 3], // B
    [2, 1, 1, 3, 0, 0], // L
    [4, 3, 3, 1, 0, 0]  // R
  ];
  var midBlockFaceDim2 = [
  // U  D  F  B  L  R
    [0, 0, 6, 6, 5, 6], // U
    [0, 0, 8, 8, 7, 8], // D
    [5, 6, 0, 0, 6, 5], // F
    [7, 8, 0, 0, 8, 7], // B
    [6, 5, 5, 7, 0, 0], // L
    [8, 7, 7, 5, 0, 0]  // R
  ];
  var midBlockFaceDim3 = [
  // U  D  F  B  L  R
    [0, 0,10,10, 9,10], // U
    [0, 0,10,10, 9,10], // D
    [9,10, 0, 0,10, 9], // F
    [9,10, 0, 0,10, 9], // B
    [10,9, 9, 9, 0, 0], // L
    [10,9, 9, 9, 0, 0]  // R
  ];
  var midBlockFaceDim4 = [
  // U  D  F  B  L  R
    [0, 0, 8, 8, 7, 8], // U
    [0, 0, 6, 6, 5, 6], // D
    [7, 8, 0, 0, 8, 7], // F
    [5, 6, 0, 0, 6, 5], // B
    [8, 7, 7, 5, 0, 0], // L
    [6, 5, 5, 7, 0, 0]  // R
  ];
  var midBlockFaceDim5 = [
  // U  D  F  B  L  R
    [0, 0, 4, 4, 3, 4], // U
    [0, 0, 2, 2, 1, 2], // D
    [3, 4, 0, 0, 4, 3], // F
    [1, 2, 0, 0, 2, 1], // B
    [4, 3, 3, 1, 0, 0], // L
    [2, 1, 1, 3, 0, 0]  // R
  ];

  function splitCube(layer) {
    for (var i = 0; i < 6; i++) { // for all faces
      topBlocks[i] = topBlockTable[topBlockFaceDim[layer][i]];
      botBlocks[i] = topBlockTable[botBlockFaceDim[layer][i]];
      midBlocks[i] = midBlockTable[midBlockFaceDim[layer][i]];
      midBlocks2[i] = midBlockTable[midBlockFaceDim2[layer][i]];
      midBlocks3[i] = midBlockTable[midBlockFaceDim3[layer][i]];
      midBlocks4[i] = midBlockTable[midBlockFaceDim4[layer][i]];
      midBlocks5[i] = midBlockTable[midBlockFaceDim5[layer][i]];
    }
    natural = false;
  }

  function twistLayers(cube, layer, num, mode) {
    switch (mode) {
      case 2: // mode t
        twistLayer(cube, layer, 4 - num, 0);
        twistLayer(cube, layer, 4 - num, 1);
        break;
      case 3: // mode c
        twistLayer(cube, layer, 4 - num, 0);
        twistLayer(cube, layer, 4 - num, 1);
        twistLayer(cube, layer, 4 - num, 6);
        twistLayer(cube, layer, 4 - num, 7);
        twistLayer(cube, layer ^ 1, num, 6);
        twistLayer(cube, layer ^ 1, num, 1);
        twistLayer(cube, layer ^ 1, num, 0);
        break;
      case 4: // mode s
        twistLayer(cube, layer, 4 - num, 0);
        twistLayer(cube, layer ^ 1, num, 0);
        break;
      case 5: // mode a
        twistLayer(cube, layer ^ 1, 4 - num, 0);
        twistLayer(cube, layer, 4 - num, 0);
        break;
      case 8: // mode u
        twistLayer(cube, layer, 4 - num, 0);
        twistLayer(cube, layer, 4 - num, 1);
        twistLayer(cube, layer, 4 - num, 6);
        break;
      default:
        twistLayer(cube, layer, 4 - num, mode);
    }
  }
  /*
                          42 43 44 45 46 47 48
                          35 36 37 38 39 40 41
                          28 29 30 31 32 33 34
                          21 22 23 24 25 26 27
                          14 15 16 17 18 19 20
                          07 08 09 10 11 12 13
                          00 01 02 03 04 05 06
    06 05 04 03 02 01 00  00 07 14 21 28 35 42  00 07 14 21 28 35 42  00 07 14 21 28 35 42
    13 12 11 10 09 08 07  01 08 15 22 29 36 43  01 08 15 22 29 36 43  01 08 15 22 29 36 43
    20 19 18 17 16 15 14  02 09 16 23 30 37 44  02 09 16 23 30 37 44  02 09 16 23 30 37 44
    27 26 25 24 23 22 21  03 10 17 24 31 38 45  03 10 17 24 31 38 45  03 10 17 24 31 38 45
    34 33 32 31 30 29 28  04 11 18 25 32 39 46  04 11 18 25 32 39 46  04 11 18 25 32 39 46
    41 40 39 38 37 36 35  05 12 19 26 33 40 47  05 12 19 26 33 40 47  05 12 19 26 33 40 47
    48 47 46 45 44 43 42  06 13 20 27 34 41 48  06 13 20 27 34 41 48  06 13 20 27 34 41 48
                          00 07 14 21 28 35 42
                          01 08 15 22 29 36 43
                          02 09 16 23 30 37 44
                          03 10 17 24 31 38 45
                          04 11 18 25 32 39 46
                          05 12 19 26 33 40 47
                          06 13 20 27 34 41 48
  */

  // top facelet cycle
  var cycleOrder = [0, 1, 2, 3, 4, 5, 6, 13, 20, 27, 34, 41, 48, 47, 46, 45, 44, 43, 42, 35, 28, 21, 14, 7];
  var cycleOrder2 = [8, 9, 10, 11, 12, 19, 26, 33, 40, 39, 38, 37, 36, 29, 22, 15];
  var cycleOrder3 = [16, 17, 18, 25, 32, 31, 30, 23];
  // side facelet cycle offsets
  var cycleFactors = [1, 7, -1, -7, 1, 7, -1, -7];
  var cycleOffsets = [0, 6, 48, 42, 7, 5, 41, 43, 14, 4, 34, 44, 21, 3, 27, 45];
  // indices for faces of layers
  var cycleLayerSides = [
    [3, 3, 3, 0], // U
    [2, 1, 1, 1], // D
    [3, 3, 0, 0], // F
    [2, 1, 1, 2], // B
    [3, 2, 0, 0], // L
    [2, 2, 0, 1]  // R
  ];
  // indices for sides of center layers
  var cycleCenters = [
    [7, 7, 7, 4], // E'(U)
    [6, 5, 5, 5], // E (D)
    [7, 7, 4, 4], // S (F)
    [6, 5, 5, 6], // S'(B)
    [7, 6, 4, 4], // M (L)
    [6, 6, 4, 5]  // M'(R)
  ];
  var twistBuffer = [];

  function twistLayer(cube, layer, num, middle) {
    twistLayer2(cube, layer, num, middle);
    if (superCube == true && num > 0 && num < 4) {
      twistLayer2(scube, layer, num, middle);
      twistSuperLayer(layer, num, middle);
    }
  }

  function twistLayer2(cube, layer, num, middle) {
    if (!middle) {
      // rotate top facelets (outer)
      for (var i = 0; i < 24; i++) // to buffer
        twistBuffer[(i + num * 6) % 24] = cube[layer][cycleOrder[i]];
      for (var i = 0; i < 24; i++) // to cube
        cube[layer][cycleOrder[i]] = twistBuffer[i];
      // rotate top facelets (inner1)
      for (var i = 0; i < 16; i++) // to buffer
        twistBuffer[(i + num * 4) % 16] = cube[layer][cycleOrder2[i]];
      for (var i = 0; i < 16; i++) // to cube
        cube[layer][cycleOrder2[i]] = twistBuffer[i];
      // rotate top facelets (inner2)
      for (var i = 0; i < 8; i++) // to buffer
        twistBuffer[(i + num * 2) % 8] = cube[layer][cycleOrder3[i]];
      for (var i = 0; i < 8; i++) // to cube
        cube[layer][cycleOrder3[i]] = twistBuffer[i];
    }
    // rotate side facelets
    var k = num * 7;
    for (var i = 0; i < 4; i++) { // to buffer
      var n = adjacentFaces[layer][i];
      var c = middle ? cycleCenters[layer][i] : cycleLayerSides[layer][i];
      var factor = cycleFactors[c];
      var offset = (middle > 1) ? ((middle > 6) ? cycleOffsets[c + 8] : cycleOffsets[c + 4]) : cycleOffsets[c];
      for (var j = 0; j < 7; j++, k++)
        twistBuffer[k % 28] = cube[n][j * factor + offset];
    }
    for (var i = 0, k = 0; i < 4; i++) { // to cube
      var n = adjacentFaces[layer][i];
      var c = middle ? cycleCenters[layer][i] : cycleLayerSides[layer][i];
      var factor = cycleFactors[c];
      var offset = (middle > 1) ? ((middle > 6) ? cycleOffsets[c + 8] : cycleOffsets[c + 4]) : cycleOffsets[c];
      for (var j = 0; j < 7; j++, k++)
        cube[n][j * factor + offset] = twistBuffer[k];
    }
  }

  /* each superTwistArr element [a, b, c] is used to access a row or column
     of 7 facelets in the cube layout (shown above) where:
     a = starting facelet number
     b = increment
     c = layer (0=U, 1=D, 2=F, 3=B, 4=L, 5=R)
  */

  var superTwistArr = [                               // mode layer
    [[ 0, 1, 0], [ 0, 7, 1], [ 0, 7, 4], [ 0, 1, 5]], //  0     2
    [[42, 1, 0], [ 6, 7, 1], [ 6, 7, 4], [42, 1, 5]], //  0     3
    [[ 7, 1, 0], [ 1, 7, 1], [ 1, 7, 4], [ 7, 1, 5]], //  1     2
    [[35, 1, 0], [ 5, 7, 1], [ 5, 7, 4], [35, 1, 5]], //  1     3
    [[14, 1, 0], [ 2, 7, 1], [ 2, 7, 4], [14, 1, 5]], //  6     2
    [[28, 1, 0], [ 4, 7, 1], [ 4, 7, 4], [28, 1, 5]], //  6     3
    [[21, 1, 0], [ 3, 7, 1], [ 3, 7, 4], [21, 1, 5]], //  7    2,3
    [[42, 1, 3], [ 0, 1, 1], [ 0, 1, 2], [ 0, 7, 0]], //  0     4
    [[ 0, 1, 3], [ 6, 7, 0], [42, 1, 2], [42, 1, 1]], //  0     5
    [[35, 1, 3], [ 7, 1, 1], [ 7, 1, 2], [ 1, 7, 0]], //  1     4
    [[ 7, 1, 3], [ 5, 7, 0], [35, 1, 2], [35, 1, 1]], //  1     5
    [[28, 1, 3], [14, 1, 1], [14, 1, 2], [ 2, 7, 0]], //  6     4
    [[14, 1, 3], [ 4, 7, 0], [28, 1, 2], [28, 1, 1]], //  6     5
    [[21, 1, 3], [21, 1, 1], [21, 1, 2], [ 3, 7, 0]], //  7     4
    [[21, 1, 3], [ 3, 7, 0], [21, 1, 2], [21, 1, 1]]  //  7     5
  ];

  /* for F & B moves, rotate all arrows in the slice in the same direction
     as the slice is rotated

     for R & L moves, half-twist slice arrows on the back face and on the
     face where the slice arrows from the back face moved to
  */

  function twistSuperLayer(layer, num, mode) {
    if (mode == 0) { // outer
      for (var i = 0; i < 49; i++)
        scube[layer][i] = (scube[layer][i] + 4 - num) % 4;
      if (layer == 2) superTwist2(0, 4 - num);
      if (layer == 3) superTwist2(1, num);
      if (layer == 4) superTwist(7, num);
      if (layer == 5) superTwist(8, num);
    }
    if (mode == 1) { // inner1 (n)
      if (layer == 2) superTwist2(2, 4 - num);
      if (layer == 3) superTwist2(3, num);
      if (layer == 4) superTwist(9, num);
      if (layer == 5) superTwist(10, num);
    }
    if (mode == 6) { // inner2 (o)
      if (layer == 2) superTwist2(4, 4 - num);
      if (layer == 3) superTwist2(5, num);
      if (layer == 4) superTwist(11, num);
      if (layer == 5) superTwist(12, num);
      return;
    }
    if (mode == 7) { // middle (m)
      if (layer == 2) superTwist2(6, 4 - num);
      if (layer == 3) superTwist2(6, num);
      if (layer == 4) superTwist(13, num);
      if (layer == 5) superTwist(14, num);
      return;
    }
  }

  function superTwist(ix, num) {
    superTwist1(superTwistArr[ix][0]);
    superTwist1(superTwistArr[ix][num]);
  }

  function superTwist1(v) {
    for (var i = v[0], n = 0; n < 7; i += v[1], n++)
      scube[v[2]][i] = (scube[v[2]][i] + 2) % 4;
  }

  function superTwist2(ix, tw) {
    for (var i = 0; i < 4; i++) {
      var v = superTwistArr[ix][i];
      for (var j = v[0], n = 0; n < 7; j += v[1], n++)
        scube[v[2]][j] = (scube[v[2]][j] + tw) % 4;
    }
  }

  var width;
  var height;
  // last position of mouse (for dragging the cube)
  var lastX;
  var lastY;
  // last position of mouse (when waiting for clear decision)
  var lastDragX;
  var lastDragY;
  // drag areas
  var dragAreas;
  var dragCornersX = [];
  var dragCornersY = [];
  var dragDirsX = [];
  var dragDirsY = [];
  var dragBlocks = [
    [[0, 0], [7, 0], [7, 1], [0, 1]], // D 0
    [[7, 0], [7, 7], [6, 7], [6, 0]], // R 1
    [[7, 7], [0, 7], [0, 6], [7, 6]], // U 2
    [[0, 7], [0, 0], [1, 0], [1, 7]], // L 3
    // slices
    [[0, 1], [7, 1], [7, 2], [0, 2]], // 4 Dn
    [[5, 0], [6, 0], [6, 7], [5, 7]], // 5 Rn
    [[0, 5], [7, 5], [7, 6], [0, 6]], // 6 Un
    [[1, 0], [2, 0], [2, 7], [1, 7]], // 7 Ln
    [[0, 2], [7, 2], [7, 3], [0, 3]], // 8 Dm
    [[4, 0], [5, 0], [5, 7], [4, 7]], // 9 Rm
    [[0, 4], [7, 4], [7, 5], [0, 5]], // 10 Um 
    [[2, 0], [3, 0], [3, 7], [2, 7]], // 11 Lm
    [[0, 4], [0, 3], [7, 3], [7, 4]], // center horiz 12
    [[4, 0], [3, 0], [3, 7], [4, 7]] // center vert 13
  ];
  var areaDirs = [
    [1, 0], [0, 1], [-1, 0], [0, -1],
    [1, 0], [0, 1], [-1, 0], [0, -1], 
    [1, 0], [0, 1], [-1, 0], [0, -1], 
    [1, 0], [0, 1]
  ];
  var twistDirs = [
    [ 1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1, -1], // U
    [ 1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1, -1], // D
    [ 1, -1,  1, -1,  1, -1,  1, -1,  1, -1,  1, -1,  1,  1], // F
    [ 1, -1,  1, -1,  1, -1,  1, -1,  1, -1,  1, -1, -1,  1], // B
    [-1,  1, -1,  1, -1,  1, -1,  1, -1,  1, -1,  1, -1, -1], // L
    [ 1, -1,  1, -1,  1, -1,  1, -1,  1, -1,  1, -1,  1,  1]  // R
  ];
  var dragLayers = []; // which layers belongs to dragCorners
  var dragModes = []; // which layer modes dragCorners
  // current drag directions
  var dragX;
  var dragY;
  // various sign tables for computation of directions of rotations
  var rotCos = [
    [[ 1,  0,  0], [ 0,  0,  0], [ 0,  0,  1]], // U-D
    [[ 1,  0,  0], [ 0,  1,  0], [ 0,  0,  0]], // F-B
    [[ 0,  0,  0], [ 0,  1,  0], [ 0,  0,  1]]  // L-R
  ];
  var rotSin = [
    [[ 0,  0,  1], [ 0,  0,  0], [-1,  0,  0]], // U-D
    [[ 0,  1,  0], [-1,  0,  0], [ 0,  0,  0]], // F-B
    [[ 0,  0,  0], [ 0,  0,  1], [ 0, -1,  0]]  // L-R
  ];
  var rotVec = [
    [[ 0,  0,  0], [ 0,  1,  0], [ 0,  0,  0]], // U-D
    [[ 0,  0,  0], [ 0,  0,  0], [ 0,  0,  1]], // F-B
    [[ 1,  0,  0], [ 0,  0,  0], [ 0,  0,  0]]  // L-R
  ];
  var rotSign = [1, -1, 1, -1, 1, -1]; // U, D, F, B, L, R
  // temporary eye vectors for twisted sub-cube rotation
  var tempEye = [];
  var tempEyeX = [];
  var tempEyeY = [];
  // temporary eye vectors for second twisted sub-cube rotation (antislice)
  var tempEye2 = [];
  var tempEyeX2 = [];
  var tempEyeY2 = [];
  // temporary vectors to compute visibility in perspective projection
  var perspEye = [];
  var perspEyeI = []
  var perspNormal = [];
  // eye arrays to store various eyes for various modes
  var eyeArray = [];
  var eyeArrayX = [];
  var eyeArrayY = [];
  var eyeOrder = [
    [1, 0, 0, 0, 0, 0, 0],
    [0, 1, 0, 0, 0, 0, 0], // n  modeChar
    [1, 1, 0, 0, 0, 0, 0], // t
    [1, 1, 1, 1, 1, 1, 1], // c
    [1, 0, 0, 0, 0, 0, 1], // s
    [1, 0, 0, 0, 0, 0, 2], // a
    [0, 0, 1, 0, 0, 0, 0], // o
    [0, 0, 0, 1, 0, 0, 0], // m
    [1, 1, 1, 0, 0, 0, 0]  // u
  ];
  var blockArray = [];
  var blockMode = [
    [0, 2, 2, 2, 2, 2, 2],
    [2, 1, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2],
    [0, 2, 2, 2, 2, 2, 0],
    [2, 2, 2, 2, 2, 2, 2],
    [2, 2, 6, 2, 2, 2, 2],
    [2, 2, 2, 7, 2, 2, 2],
    [2, 2, 2, 2, 2, 2, 2]
  ];
  var drawOrder = [
    [0, 1, 2, 3, 4, 5, 6],
    [0, 1, 2, 3, 4, 6, 5],
    [0, 1, 2, 3, 6, 5, 4],
    [0, 1, 2, 6, 5, 4, 3],
    [0, 1, 6, 5, 4, 3, 2],
    [0, 6, 5, 4, 3, 2, 1],
    [6, 5, 4, 3, 2, 1, 0]
  ];
  var sliceNormals = [];

  function initSliceNormals() {
    var copyvec = [], fracvec = [];
    for (var i = 0; i < 6; i++) {
      sliceNormals[i] = [];
      for (var j = 0; j < cubeDim; j++) {
        sliceNormals[i][j] = [];
        vCopy(copyvec, faceNormals[i]);
        vScale(vCopy(fracvec, copyvec), 2 / cubeDim);
        vScale(vSub(copyvec, vScale(fracvec, j)), scale);
        vCopy(sliceNormals[i][j], copyvec);
      }
    }
  }

  function paint() {
    graphics.save();
    graphics.fillStyle = bgColor;
    var h = (buttonBar == 1 && (progressHeight == 0 || demo || move[curMove].length == 0)) ? height - dpr : height;
    setClip(graphics, 0, 0, width, h);
    graphics.fillRect(0, 0, width, h); // cube background
    dragAreas = 0;
    if (natural) // compact cube
    {
      if (hint)
        fixBlock(eye, eyeX, eyeY, cubeBlocks, 3, 0, 1); // draw hint faces
      fixBlock(eye, eyeX, eyeY, cubeBlocks, 3, 0, 0);   // draw cube and fill drag areas
    }
    else { // in twisted state
      // compute top observer
      var cosA = Math.cos(originalAngle + currentAngle);
      var sinA = Math.sin(originalAngle + currentAngle) * rotSign[twistedLayer];
      for (var i = 0; i < 3; i++) {
        tempEye[i] = 0;
        tempEyeX[i] = 0;
        for (var j = 0; j < 3; j++) {
          var axis = Math.floor(twistedLayer / 2);
          tempEye[i] += eye[j] * (rotVec[axis][i][j] + rotCos[axis][i][j] * cosA + rotSin[axis][i][j] * sinA);
          tempEyeX[i] += eyeX[j] * (rotVec[axis][i][j] + rotCos[axis][i][j] * cosA + rotSin[axis][i][j] * sinA);
        }
      }
      vMul(tempEyeY, tempEye, tempEyeX);
      // compute bottom anti-observer
      var cosB = Math.cos(originalAngle - currentAngle);
      var sinB = Math.sin(originalAngle - currentAngle) * rotSign[twistedLayer];
      for (var i = 0; i < 3; i++) {
        tempEye2[i] = 0;
        tempEyeX2[i] = 0;
        for (var j = 0; j < 3; j++) {
          var axis = Math.floor(twistedLayer / 2);
          tempEye2[i] += eye[j] * (rotVec[axis][i][j] + rotCos[axis][i][j] * cosB + rotSin[axis][i][j] * sinB);
          tempEyeX2[i] += eyeX[j] * (rotVec[axis][i][j] + rotCos[axis][i][j] * cosB + rotSin[axis][i][j] * sinB);
        }
      }
      vMul(tempEyeY2, tempEye2, tempEyeX2);
      eyeArray[0] = eye;
      eyeArrayX[0] = eyeX;
      eyeArrayY[0] = eyeY;
      eyeArray[1] = tempEye;
      eyeArrayX[1] = tempEyeX;
      eyeArrayY[1] = tempEyeY;
      eyeArray[2] = tempEye2;
      eyeArrayX[2] = tempEyeX2;
      eyeArrayY[2] = tempEyeY2;
      blockArray[0] = topBlocks;
      blockArray[1] = midBlocks;
      blockArray[2] = midBlocks2;
      blockArray[3] = midBlocks3;
      blockArray[4] = midBlocks4;
      blockArray[5] = midBlocks5;
      blockArray[6] = botBlocks;
      /*
      //modification of the original code starts here
      // perspective corrections
      //vSub(vScale(vCopy(perspEye, eye), 5.0 + persp), vScale(vCopy(perspNormal, faceNormals[twistedLayer]), 1.0 / 2.5));
      //vSub(vScale(vCopy(perspEyeI, eye), 5.0 + persp), vScale(vCopy(perspNormal, faceNormals[twistedLayer ^ 1]), 1.0 / 6.0));
      //var topProd = vProd(perspEye, faceNormals[twistedLayer]);
      //var botProd = vProd(perspEyeI, faceNormals[twistedLayer ^ 1]);
      var orderMode;
      //if (topProd < 0 && botProd > 0) // top facing away
      //  orderMode = 0;
      //else if (topProd > 0 && botProd < 0) // bottom facing away: draw it first
      //  orderMode = 1;
      //else // both top and bottom layer facing away: draw them first
      //  orderMode = 2;
      var Prod;
      var memProd;
      var fracvec = [];
      var copyvec = [];
      // lets check the normals of all faces along the rotation axis, including the inner faces
      for (var i = 0; i < 8; i++) {
        //lets translate the face's normal (related to the twistedlayer) along the rotation axis, placing it in between the layers and thus make the pespective correction
        vCopy(copyvec,faceNormals[twistedLayer]); // copy of the faceNormal
        vScale(vCopy(fracvec,copyvec), 2.0 / 7.0); // fraction of the faceNormal to be subtracted (in order to execute the translation)
        vScale(vSub(copyvec,vScale(fracvec,i)), scale); // apply cube scale
        vSub(vScale(vCopy(perspEye, eye), 5.0 + persp), copyvec); // translation of the face normal to the interlayer face and perspective correction 
        Prod = vProd(perspEye,faceNormals[twistedLayer]); // calculation of the vector product with the original direction to check the resulting signal below
        if (i == 0) { // we need to check for normal direction changes in between interlayer faces, the first face don't need comparison
          if (Prod < 0) // the first face is facing away the screen, lets assume the same for all of them and so the draw order follows 0 to 6
            orderMode = 0;
          if (Prod > 0) // the first face is facing the screen, lets assume the same for all of them and the draw follows the reversed order
            orderMode = 6;
          }
        else {
          if ((Prod > 0 && memProd < 0) || (Prod < 0 && memProd > 0)) { // normal changed direction, this means that the oberver is looking nearly perpendicular to the layer 7-i
              orderMode = 7 - i; // the layer (7-i) is the last to be drawn and all the others are drawn from the outlayer to the (7-i) layer neighbors 
              i = 8; // we don't need to keep checking
          }
        }
        memProd = Prod; // the calculated normal direction is stored to be compared with the next one 
      }
      // end of the modification
      */
      var orderMode, Prod, memProd, copyvec = [];
      vScale(vCopy(copyvec, eye), 5.0 + persp);
      for (var i = 0; i < cubeDim; i++) {
        vSub(vCopy(perspEye, copyvec), sliceNormals[twistedLayer][i]);
        Prod = vProd(perspEye, faceNormals[twistedLayer]);
        if (i == 0)
          orderMode = (Prod < 0) ? 0 : cubeDim - 1;
        else {
          if ((Prod > 0 && memProd < 0) || (Prod < 0 && memProd > 0)) {
            orderMode = cubeDim - i;
            break;
          }
        }
        memProd = Prod;
      }
      if (hint) {
        for (var i=0; i < cubeDim; i++) {
          var j = drawOrder[orderMode][i];
          var k = eyeOrder[twistedMode][j];
          fixBlock(eyeArray[k], eyeArrayX[k], eyeArrayY[k], blockArray[j],
            blockMode[twistedMode][j], j, 1);
        }
      }
      for (var i=0; i < cubeDim; i++) {
        var j = drawOrder[orderMode][i];
        var k = eyeOrder[twistedMode][j];
        fixBlock(eyeArray[k], eyeArrayX[k], eyeArrayY[k], blockArray[j],
          blockMode[twistedMode][j], j, 0);
      }
    }
    if (!pushed && !animating) // no button should be deceased
      buttonPressed = -1;
    if (!(scramble > 0 && buttonBar == 2)) {
      // draw progress bar, move text and button (if more than one sequence)
      if (!demo && move.length > 0) {
        if (move[curMove].length > 0) { // some turns

          // draw progress bar
          if (progressHeight > 0) {
            graphics.lineWidth = lineWidth;
            graphics.strokeStyle = buttonBorderColor;

            var progress = (width - 2) * realMovePos(move[curMove], movePos) / realMoveLength(move[curMove]);

            // trough
            graphics.fillStyle = sliderBgColor;
            graphics.fillRect(dph, height - progressHeight - dph, width - dpr, progressHeight);

            // slider
            graphics.fillStyle = sliderColor;
            graphics.fillRect(dph, height - progressHeight - dph, progress, progressHeight);

            // border
            graphics.beginPath();
            graphics.rect(dph, height - progressHeight - dph, width - dpr, progressHeight);
            graphics.stroke();
          }

          // display move text
          graphics.font = "bold " + textHeight + "px helvetica";
          var s = "" + moveLength(move[curMove], movePos) + "/" + moveLength(move[curMove], -1) + metricChar[metric];
          var w = graphics.measureText(s).width;
          var x = width - w - 2;
          var y = height - progressHeight - Math.floor(4 * dpr);
          if (moveText > 0) {
            if (moveCounter)
              drawString(graphics, s, (outlined ? x - dpr : x), y - textHeight);
            drawMoveTextFunc(graphics, y);
          }
          else if (moveCounter)
            drawString(graphics, s, (outlined ? x - dpr : x), y);
        }
        if (move.length > 1) { // more sequences
          graphics.font = "bold " + textHeight + "px helvetica";
          var s = "" + (curMove + 1) + "/" + move.length;
          var w = graphics.measureText(s).width;
          var x = width - w - buttonHeight*2 - Math.floor(5 * dpr);
          drawString(graphics, s, x, adjTextHeight());
          drawButton(graphics, 7, width - buttonHeight*2, 0);
          drawButton(graphics, 8, width - buttonHeight, 0);
        }
      }
      if (curInfoText >= 0) {
        graphics.font = "bold " + textHeight + "px helvetica";
        var w = (move.length > 1) ? x - 5*dpr : width;
        wrapText(graphics, infoText[curInfoText], dpr, adjTextHeight(), w, textHeight);
        // drawString(graphics, infoText[curInfoText], (width-w)/2+dpr, adjTextHeight());
        // drawString(graphics, infoText[curInfoText], outlined ? dpr : 0, adjTextHeight());
      }
    }
    graphics.restore();
    if (drawButtons && buttonBar != 0) // omit unneccessary redrawing
      drawButtonsFunc(graphics);
  } // paint()

  function wrapText(context, text, x, y, maxWidth, lineHeight) {
    // source: https://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
    var words = text.split(' ');
    var line = '';
    for(var n = 0; n < words.length; n++) {
      var testLine = line + words[n] + ' ';
      var metrics = context.measureText(testLine);
      var testWidth = metrics.width;
      if (testWidth > maxWidth && n > 0) {
        drawString(context, line, x, y);
        line = words[n] + ' ';
        y += lineHeight;
      }
      else {
        line = testLine;
      }
    }
    drawString(context, line, x, y);
  }

  function adjTextHeight() {
    // size 14 font has enough padding for the top margin, smaller fonts
    // need space added so y value (as input to drawString) is increased
    if (utextHeight < 10)
      return (Math.floor(10 * dpr));
    else if (utextHeight < 12)
      return (Math.floor(12 * dpr));
    else if (utextHeight < 14)
      return (Math.floor(14 * dpr));
    else
      return textHeight;
  }

  // polygon co-ordinates to fill (cube faces or facelets)
  var fillX = [];
  var fillY = [];
  // projected vertex co-ordinates (to screen)
  var coordsX = [];
  var coordsY = [];
  var cooX = [[], [], [], [], [], []];
  var cooY = [[], [], [], [], [], []];
  var border = [[0.10, 0.10], [0.90, 0.10], [0.90, 0.90], [0.10, 0.90]];
  var factors = [[0, 0], [0, 1], [1, 1], [1, 0]];
  var tempNormal = [];
  function fixBlock(eye, eyeX, eyeY, blocks, mode, drawLayer, drawHint) {
    // project 3D co-ordinates into 2D screen ones
    for (var i = 0; i < 8; i++) {
      var min = width < height ? width : height - progressHeight;
      var x = min / 3.7 * vProd(cornerCoords[i], eyeX) * scale;
      var y = min / 3.7 * vProd(cornerCoords[i], eyeY) * scale;
      var z = min / (5.0 + persp) * vProd(cornerCoords[i], eye) * scale;
      x = x / (1 - z / min); // perspective transformation
      y = y / (1 - z / min); // perspective transformation
      coordsX[i] = width / 2.0 + x;
      if (align == 0)
        coordsY[i] = (height - progressHeight) / 2.0 * scale - y;
      else if (align == 1)
        coordsY[i] = (height - progressHeight) / 2.0 - y;
      else if (align == 2)
        coordsY[i] = height - progressHeight - (height - progressHeight) / 2.0 * scale - y;
      else {
        // either equation works for 3-99
        coordsY[i] = (height - progressHeight) * (align * (1 - scale) + scale / 2) - y;
        // coordsY[i] = (height - progressHeight) * (align - scale * (align - 1 / 2)) - y;
      }
    }
    // setup corner co-ordinates for all faces
    for (var i = 0; i < 6; i++) { // all faces
      for (var j = 0; j < 4; j++) { // all face corners
        cooX[i][j] = coordsX[faceCorners[i][j]];
        cooY[i][j] = coordsY[faceCorners[i][j]];
      }
    }
    if (hint && drawHint) { // draw hint hidden facelets
      for (var i = 0; i < 6; i++) { // all faces
        vSub(vScale(vCopy(perspEye, eye), 5.0 + persp), faceNormals[i]); // perspective correction
        if (vProd(perspEye, faceNormals[i]) < -(1-scale)) { // draw only hidden faces
          vScale(vCopy(tempNormal, faceNormals[i]), faceShift);
          var min = width < height ? width : height - progressHeight;
          var x = min / hintHoriz * vProd(tempNormal, eyeX);
          var y = min / hintVert * vProd(tempNormal, eyeY);
          var z = min / (5.0 + persp) * vProd(tempNormal, eye);
          x = x / (1 - z / min); // perspective transformation
          y = y / (1 - z / min); // perspective transformation
          var sideW = blocks[i][0][1] - blocks[i][0][0];
          var sideH = blocks[i][1][1] - blocks[i][1][0];
          if (sideW > 0 && sideH > 0) { // this side is not only black
            // draw colored facelets
            for (var n = 0, p = blocks[i][1][0]; n < sideH; n++, p++) {
              for (var o = 0, q = blocks[i][0][0]; o < sideW; o++, q++) {
                for (var j = 0; j < 4; j++) {
                  getCorners(i, j, fillX, fillY, q + border[j][0], p + border[j][1], mirrored);
                  fillX[j] = Math.floor(fillX[j] + (mirrored ? -x : x));
                  fillY[j] = Math.floor(fillY[j] - y);
                }
                if (superCube == true) {
                  /* commenting out the code that draws the facelet background
		  fillPolygon(graphics, fillX, fillY, "#fdfdfd");
                  if (hintBorder)
                    drawPolygon(graphics, fillX, fillY, darker("#fdfdfd"));
                  else
                    drawPolygon(graphics, fillX, fillY, "#fdfdfd");
                  */
		  drawSuperArrow(graphics, fillX, fillY, i, scube[i][p * 7 + q], colors[cube[i][p * 7 + q]]);
                }
                else {
                  fillPolygon(graphics, fillX, fillY, colors[cube[i][p * 7 + q]]);
                  if (hintBorder)
                    drawPolygon(graphics, fillX, fillY, darker(colors[cube[i][p * 7 + q]]));
                  else
                    drawPolygon(graphics, fillX, fillY, colors[cube[i][p * 7 + q]]);
                }
              }
            }
          }
        }
      }
      return;
    }
    // find and draw black inner faces
    for (var i = 0; i < 6; i++) { // all faces
      var sideW = blocks[i][0][1] - blocks[i][0][0];
      var sideH = blocks[i][1][1] - blocks[i][1][0];
      if (sideW <= 0 || sideH <= 0) { // this face is inner and only black
        var v = ((i == twistedLayer) ? drawLayer : cubeDim-1 - drawLayer) / cubeDim;
        for (var j = 0; j < 4; j++) { // for all corners
          var k = oppositeCorners[i][j];
          fillX[j] = Math.floor(cooX[i][j] + (cooX[i ^ 1][k] - cooX[i][j]) * v);
          fillY[j] = Math.floor(cooY[i][j] + (cooY[i ^ 1][k] - cooY[i][j]) * v);
          if (mirrored)
            fillX[j] = width - fillX[j];
        }
        fillPolygon(graphics, fillX, fillY, cubeColor);
      }
      else {
        // draw black face background (do not care about normals and visibility!)
        for (var j = 0; j < 4; j++) // corner co-ordinates
          getCorners(i, j, fillX, fillY, blocks[i][0][factors[j][0]], blocks[i][1][factors[j][1]], mirrored);
        fillPolygon(graphics, fillX, fillY, cubeColor);
      }
    }
    // draw all visible faces and get dragging regions
    for (var i = 0; i < 6; i++) { // all faces
      vSub(vScale(vCopy(perspEye, eye), 5.0 + persp), faceNormals[i]); // perspective correction
      if (vProd(perspEye, faceNormals[i]) > -(1-scale)) { // draw only faces towards us
        var sideW = blocks[i][0][1] - blocks[i][0][0];
        var sideH = blocks[i][1][1] - blocks[i][1][0];
        if (sideW > 0 && sideH > 0) { // this side is not only black
          // draw colored facelets
          for (var n = 0, p = blocks[i][1][0]; n < sideH; n++, p++) {
            for (var o = 0, q = blocks[i][0][0]; o < sideW; o++, q++) {
              for (var j = 0; j < 4; j++)
                getCorners(i, j, fillX, fillY, q + border[j][0], p + border[j][1], mirrored);
              if (superCube == true) {
                drawPolygon(graphics, fillX, fillY, "#fdfdfd");
                fillPolygon(graphics, fillX, fillY, "#fdfdfd");
                drawSuperArrow(graphics, fillX, fillY, i, scube[i][p * 7 + q], colors[cube[i][p * 7 + q]]);
              }
              else {
                drawPolygon(graphics, fillX, fillY, colors[cube[i][p * 7 + q]]);
                fillPolygon(graphics, fillX, fillY, colors[cube[i][p * 7 + q]]);
              }
            }
          }
        }
        if (!editable || animating) // no need of twisting while animating
          continue;
        // horizontal and vertical directions of face - interpolated
        var dxh = (cooX[i][1] - cooX[i][0] + cooX[i][2] - cooX[i][3]) / 6.0;
        var dyh = (cooX[i][3] - cooX[i][0] + cooX[i][2] - cooX[i][1]) / 6.0;
        var dxv = (cooY[i][1] - cooY[i][0] + cooY[i][2] - cooY[i][3]) / 6.0;
        var dyv = (cooY[i][3] - cooY[i][0] + cooY[i][2] - cooY[i][1]) / 6.0;
        if (mode == 3) { // just the normal cube
          for (var j = 0; j < 14; j++) { // 4 areas 7x1 per face + 10 center slices
            for (var k = 0; k < 4; k++) // 4 points per area
              getCorners(i, k, dragCornersX[dragAreas], dragCornersY[dragAreas],
                dragBlocks[j][k][0], dragBlocks[j][k][1], false);
            dragDirsX[dragAreas] = (dxh * areaDirs[j][0] + dxv * areaDirs[j][1]) * twistDirs[i][j];
            dragDirsY[dragAreas] = (dyh * areaDirs[j][0] + dyv * areaDirs[j][1]) * twistDirs[i][j];
            dragLayers[dragAreas] = adjacentFaces[i][j % 4];
            if (j >= 12)
              dragLayers[dragAreas] &= ~1;
            dragModes[dragAreas] = j > 3 ? 1 : 0;
            if ((dragAreas >= 8 && dragAreas <= 11) || (dragAreas >= 22 && dragAreas <= 25) ||
              (dragAreas >= 36 && dragAreas <= 39)) {
              dragModes[dragAreas] = 6;
            }
            if (dragAreas == 12 || dragAreas == 26 || dragAreas == 40 ||
              dragAreas == 13 || dragAreas == 27 || dragAreas == 41) {
              dragModes[dragAreas] = 7;
            }
            dragAreas++;
            if (dragAreas == 42)
              break;
          }
        }
        else if (mode == 0) { // twistable top layer
          if (i != twistedLayer && sideW > 0 && sideH > 0) { // only 7x1 faces
            var j = sideW == 7 ? (blocks[i][1][0] == 0 ? 0 : 2) : (blocks[i][0][0] == 0 ? 3 : 1);
            for (var k = 0; k < 4; k++)
              getCorners(i, k, dragCornersX[dragAreas], dragCornersY[dragAreas],
                dragBlocks[j][k][0], dragBlocks[j][k][1], false);
            dragDirsX[dragAreas] = (dxh * areaDirs[j][0] + dxv * areaDirs[j][1]) * twistDirs[i][j];
            dragDirsY[dragAreas] = (dyh * areaDirs[j][0] + dyv * areaDirs[j][1]) * twistDirs[i][j];
            dragLayers[dragAreas] = twistedLayer;
            dragModes[dragAreas] = 0;
            dragAreas++;
          }
        }
        else if (mode == 1) { // twistable n slice
          if (i != twistedLayer && sideW > 0 && sideH > 0) { // only 7x1 faces
            var j = sideW == 7 ? (blocks[i][1][0] == 1 ? 0 : 2) : (blocks[i][0][0] == 1 ? 3 : 1);
            j += 4;
            for (var k = 0; k < 4; k++)
              getCorners(i, k, dragCornersX[dragAreas], dragCornersY[dragAreas],
                dragBlocks[j][k][0], dragBlocks[j][k][1], false);
            dragDirsX[dragAreas] = (dxh * areaDirs[j][0] + dxv * areaDirs[j][1]) * twistDirs[i][j];
            dragDirsY[dragAreas] = (dyh * areaDirs[j][0] + dyv * areaDirs[j][1]) * twistDirs[i][j];
            dragLayers[dragAreas] = twistedLayer;
            dragModes[dragAreas] = 1;
            dragAreas++;
          }
        }
        else if (mode == 6) { // twistable near center (o) slice
          if (i != twistedLayer && sideW > 0 && sideH > 0) { // only 7x1 faces
            var j = sideW == 7 ? (blocks[i][1][0] == 2 ? 0 : 2) : (blocks[i][0][0] == 2 ? 3 : 1);
            j += 8;
            for (var k = 0; k < 4; k++)
              getCorners(i, k, dragCornersX[dragAreas], dragCornersY[dragAreas],
                dragBlocks[j][k][0], dragBlocks[j][k][1], false);
            dragDirsX[dragAreas] = (dxh * areaDirs[j][0] + dxv * areaDirs[j][1]) * twistDirs[i][j];
            dragDirsY[dragAreas] = (dyh * areaDirs[j][0] + dyv * areaDirs[j][1]) * twistDirs[i][j];
            dragLayers[dragAreas] = twistedLayer;
            dragModes[dragAreas] = 6;
            dragAreas++;
          }
        }
        else if (mode == 7) { // twistable center (m) slice
          if (i != twistedLayer && sideW > 0 && sideH > 0) { // only 7x1 faces
            var j = sideW == 7 ? 12 : 13;
            for (var k = 0; k < 4; k++)
              getCorners(i, k, dragCornersX[dragAreas], dragCornersY[dragAreas],
                dragBlocks[j][k][0], dragBlocks[j][k][1], false);
            dragDirsX[dragAreas] = (dxh * areaDirs[j][0] + dxv * areaDirs[j][1]) * twistDirs[i][j];
            dragDirsY[dragAreas] = (dyh * areaDirs[j][0] + dyv * areaDirs[j][1]) * twistDirs[i][j];
            dragLayers[dragAreas] = twistedLayer;
            dragModes[dragAreas] = 7;
            dragAreas++;
          }
        }
      }
    }
  } // fixblock

  function getCorners(face, corner, cornersX, cornersY, factor1, factor2, mirror) {
    factor1 /= 7.0;
    factor2 /= 7.0;
    var x1 = cooX[face][0] + (cooX[face][1] - cooX[face][0]) * factor1;
    var y1 = cooY[face][0] + (cooY[face][1] - cooY[face][0]) * factor1;
    var x2 = cooX[face][3] + (cooX[face][2] - cooX[face][3]) * factor1;
    var y2 = cooY[face][3] + (cooY[face][2] - cooY[face][3]) * factor1;
    cornersX[corner] = Math.floor(0.5 + x1 + (x2 - x1) * factor2);
    cornersY[corner] = Math.floor(0.5 + y1 + (y2 - y1) * factor2);
    if (mirror)
      cornersX[corner] = width - cornersX[corner];
  }
  var textOffsetInit = [1, 1, -1, -1, -1, 1, 1, -1, -1, 0, 1, 0, 0, 1, 0, -1];
  var textOffset = [];

  function drawString(g, s, x, y) {
    if (outlined) {
      g.fillStyle = "black";
      for (var i = 0; i < textOffset.length; i += 2)
        g.fillText(s, x + textOffset[i], y + textOffset[i + 1]);
      g.fillStyle = "white";
    }
    else
      g.fillStyle = textColor;
    g.fillText(s, x, y);
  }

  function drawMoveTextFunc(g, y) {
    var pos = movePos == 0 ? arrayMovePos(move[curMove], movePos) : movePos;
    var s1 = moveTextFunc(move[curMove], 0, pos);
    var s2 = turnTextFunc(move[curMove], pos);
    var s3 = moveTextFunc(move[curMove], pos + 1, move[curMove].length);
    if (moveTextSpace) {
      if (s2 == '')
        s1 = s1.substr(0, s1.length - 1);
      if (s3 != '')
        s3 = ' ' + s3.substr(0, s3.length - 1);
    }
    var w1 = g.measureText(s1).width;
    var w2 = g.measureText(s2).width;
    var w3 = g.measureText(s3).width;
    var x = 1;
    if (x + w1 + w2 + w3 > width) {
      x = Math.min(1, width / 2 - w1 - w2 / 2);
      x = Math.max(x, width - w1 - w2 - w3 - 2);
    }
    if (w2 > 0) {
      g.fillStyle = hlColor;
      g.lineWidth = 2;
      g.strokeStyle = "black";
      g.beginPath();
      if (utextHeight <= 14)
        // make rectangle taller for smaller fonts
        g.fillRect(x + w1 - 1, height - progressHeight - textHeight - Math.floor(dpr * 4), w2 + 2, textHeight + Math.floor(dpr * 3));
      else
        g.fillRect(x + w1 - 1, height - progressHeight - textHeight - Math.floor(dpr * 2), w2 + 2, textHeight + Math.floor(dpr));
    }
    if (w1 > 0)
      drawString(g, s1, x, y);
    if (w2 > 0)
      drawString(g, s2, x + w1, y);
    if (w3 > 0)
      drawString(g, s3, x + w1 + w2, y);
  }

  function selectButton(x, y) {
    if (buttonBar == 0)
      return -1;
    if (move.length > 1 && x >= width - buttonHeight*2 && x < width-buttonHeight && y >= 0 && y < buttonHeight)
      return 7;
    if (move.length > 1 && x >= width - buttonHeight && x < width && y >= 0 && y < buttonHeight)
      return 8;
    if (buttonBar == 2) { // only clear (rewind) button present
      if (x >= 0 && x < buttonHeight && y >= height - buttonHeight && y < height)
        return 0;
      return -1;
    }
    if (y < height)
      return -1;
    var buttonX = 0;
    for (var i = 0; i < 7; i++) {
      var buttonWidth = (width - buttonX) / (7 - i);
      if (x >= buttonX && x < buttonX + buttonWidth && y >= height && y < height + buttonHeight)
        return i;
      buttonX += buttonWidth;
    }
    return -1;
  }

  var buttonAction = [-1, 3, 1, -1, 0, 2, 4, -1];

  // Various useful vector functions

  function vCopy(vector, srcVec) {
    vector[0] = srcVec[0];
    vector[1] = srcVec[1];
    vector[2] = srcVec[2];
    return vector;
  }

  function vNorm(vector) {
    var length = Math.sqrt(vProd(vector, vector));
    vector[0] /= length;
    vector[1] /= length;
    vector[2] /= length;
    return vector;
  }

  function vScale(vector, value) {
    vector[0] *= value;
    vector[1] *= value;
    vector[2] *= value;
    return vector;
  }

  function vProd(vec1, vec2) {
    return vec1[0] * vec2[0] + vec1[1] * vec2[1] + vec1[2] * vec2[2];
  }

  function vAdd(vector, srcVec) {
    vector[0] += srcVec[0];
    vector[1] += srcVec[1];
    vector[2] += srcVec[2];
    return vector;
  }

  function vSub(vector, srcVec) {
    vector[0] -= srcVec[0];
    vector[1] -= srcVec[1];
    vector[2] -= srcVec[2];
    return vector;
  }

  function vMul(vector, vec1, vec2) {
    vector[0] = vec1[1] * vec2[2] - vec1[2] * vec2[1];
    vector[1] = vec1[2] * vec2[0] - vec1[0] * vec2[2];
    vector[2] = vec1[0] * vec2[1] - vec1[1] * vec2[0];
    return vector;
  }

  function vRotX(vector, angle) {
    var sinA = Math.sin(angle);
    var cosA = Math.cos(angle);
    var y = vector[1] * cosA - vector[2] * sinA;
    var z = vector[1] * sinA + vector[2] * cosA;
    vector[1] = y;
    vector[2] = z;
    return vector;
  }

  function vRotY(vector, angle) {
    var sinA = Math.sin(angle);
    var cosA = Math.cos(angle);
    var x = vector[0] * cosA - vector[2] * sinA;
    var z = vector[0] * sinA + vector[2] * cosA;
    vector[0] = x;
    vector[2] = z;
    return vector;
  }

  function vRotZ(vector, angle) {
    var sinA = Math.sin(angle);
    var cosA = Math.cos(angle);
    var x = vector[0] * cosA - vector[1] * sinA;
    var y = vector[0] * sinA + vector[1] * cosA;
    vector[0] = x;
    vector[1] = y;
    return vector;
  }

  function rgbToHex(r, g, b) {
    return "#" +
      lpad(r.toString(16)) +
      lpad(g.toString(16)) +
      lpad(b.toString(16));
  }

  function lpad(s) {
    return (("00" + s).substring(s.length));
  }

  function validateColor(s) {
    if (s.length != 6)
      return false;
    var n = 0;
    for (var i = 0; i < 6; i++) {
      for (var j = 0; j < 16; j++) {
        if (s.charAt(i).toLowerCase() == "0123456789abcdef".charAt(j)) {
          n++;
          break;
        }
      }
    }
    return (n == 6) ? true : false;
  }

  function setClip(g, x, y, width, height) {
    g.beginPath();
    g.moveTo(x, y);
    g.lineTo(x + width, y);
    g.lineTo(x + width, y + height);
    g.lineTo(x, y + height);
    g.lineTo(x, y);
    g.closePath();
    g.clip();
  }

  function drawButtonsFunc(g) {
    var adj = ((buttonHeight % 2) == 0) ? 1 : 0;
    adj += Math.floor(dpr + .5) - 1;
    if (buttonBar == 2) { // only clear (rewind) button
      if (buttonPressed == 0 || (scramble > 0 && buttonPressed == 6))
        g.fillStyle = darker(buttonBgColor);
      else
        g.fillStyle = buttonBgColor;
      g.fillRect(dph, height - buttonHeight, buttonHeight, buttonHeight);
      g.lineWidth = lineWidth;
      g.strokeStyle = buttonBorderColor;
      g.beginPath();
      g.rect(dph, height - buttonHeight - dph, buttonHeight, buttonHeight);
      g.stroke();
      drawButton(g, 0, (buttonHeight / 2), height - (buttonHeight + 1) / 2 - adj);
      return;
    }
    if (buttonBar == 1) { // full buttonbar
      var buttonX = 0;
      for (var i = 0; i < 7; i++) {
        var buttonWidth = Math.floor((width - buttonX) / (7 - i));
        if (buttonPressed == i)
          g.fillStyle = darker(buttonBgColor);
        else
          g.fillStyle = buttonBgColor;
        g.fillRect(buttonX, height, buttonWidth, buttonHeight);
        g.lineWidth = lineWidth;
        g.strokeStyle = buttonBorderColor;
        g.beginPath();
        if (i == 0)
          g.rect(buttonX + dph, height - dph, buttonWidth - dpr, buttonHeight);
        else
          g.rect(buttonX - dph, height - dph, buttonWidth, buttonHeight);
        g.stroke();
        g.strokeStyle = "black";
        drawButton(g, i, buttonX + buttonWidth / 2, height + buttonHeight / 2 - adj);
        buttonX += buttonWidth;
      }
      drawButtons = false;
      return;
    }
  }

  var ds = []; // digits 1-9 scaled by dpr

  function drawButton(g, i, x, y) {
    x = Math.floor(x);
    y = Math.floor(y);
    switch (i) {
      case 0: // rewind
        drawRect(g, x - ds[4]*buttonSymbolScale, y - ds[3]*buttonSymbolScale, ds[3]*buttonSymbolScale, (ds[6] + 1)*buttonSymbolScale);
        drawArrow(g, x + ds[4]*buttonSymbolScale, y, -1*buttonSymbolScale); // left
        break;
      case 1: // reverse step
        drawRect(g, x + ds[1]*buttonSymbolScale, y - ds[3]*buttonSymbolScale, ds[3]*buttonSymbolScale, (ds[6] + 1)*buttonSymbolScale);
        drawArrow(g, x - ds[1]*buttonSymbolScale, y, -1*buttonSymbolScale); // left
        break;
      case 2: // reverse play
        drawArrow(g, x + ds[1]*buttonSymbolScale, y, -1*buttonSymbolScale); // left
        break;
      case 3: // stop / mirror
        if (animating)
          drawRect(g, x - ds[4]*buttonSymbolScale, y - (ds[3]+ds[4])/2*buttonSymbolScale, ds[7]*buttonSymbolScale, ds[7]*buttonSymbolScale);
        else {
          drawRect(g, x - ds[4]*buttonSymbolScale, y - (ds[2]+ds[3])/2*buttonSymbolScale, ds[7]*buttonSymbolScale, ds[5]*buttonSymbolScale);
          drawRect(g, x - ds[2]*buttonSymbolScale, y - (ds[4]+ds[5])/2*buttonSymbolScale, ds[3]*buttonSymbolScale, ds[9]*buttonSymbolScale);
        }
        break;
      case 4: // play
        drawArrow(g, x - ds[2]*buttonSymbolScale, y, 1*buttonSymbolScale); // right
        break;
      case 5: // step
        drawRect(g, x - (ds[4]+ds[5])/2*buttonSymbolScale, y - ds[3]*buttonSymbolScale, ds[3]*buttonSymbolScale, (ds[6] + 1)*buttonSymbolScale);
        drawArrow(g, x + ds[1]/2*buttonSymbolScale, y, 1*buttonSymbolScale); // right
        break;
      case 6: // fast forward
        drawRect(g, x + ds[1]*buttonSymbolScale, y - ds[3]*buttonSymbolScale, ds[3]*buttonSymbolScale, (ds[6] + 1)*buttonSymbolScale);
        drawArrow(g, x - ds[4]*buttonSymbolScale, y, 1*buttonSymbolScale); // right
        break;
      case 7: // prev sequence
        var c = (buttonPressed == 7) ? darker(buttonBgColor) : buttonBgColor;
        drawRect2(g, x-dpr*2, y+dpr, buttonHeight, y + buttonHeight, c);
        drawArrow(g, x+dpr*2*buttonSymbolScale + buttonHeight/2 - dpr*3, y + buttonHeight/2+dph, -1*buttonSymbolScale);
        break;
      case 8: // next sequence
        var c = (buttonPressed == 8) ? darker(buttonBgColor) : buttonBgColor;
        drawRect2(g, x-dpr*2, y+dpr, buttonHeight, y + buttonHeight, c);
        drawArrow(g, x-dpr*buttonSymbolScale + buttonHeight/2 - dpr*3, y + buttonHeight/2+dph, 1*buttonSymbolScale);
        break;
    }
  }

  function drawArrow(g, x, y, dir) {
    var d3 = (3 * dpr)*buttonSymbolScale;
    var fillX = [];
    var fillY = [];
    fillX[0] = x;
    fillX[1] = x + dir;
    fillX[2] = x + 4 * dpr * dir;
    fillX[3] = x + dir;
    fillX[4] = x;
    fillY[0] = y - d3;
    fillY[1] = y - d3;
    fillY[2] = y;
    fillY[3] = y + d3;
    fillY[4] = y + d3;
    drawArrow2(g, fillX, fillY);
  }

  function drawArrow2(g, x, y) {
    g.beginPath();
    g.moveTo(x[0] + dph, y[0] + dph);
    for (var i = 1; i < 5; i++)
      g.lineTo(x[i] + dph, y[i] + dph);
    g.closePath();
    g.fillStyle = "white";
    g.strokeStyle = "black";
    g.fill();
    g.lineWidth = lineWidth;
    g.stroke();
  }

  function drawRect(g, x, y, width, height) {
    g.lineWidth = lineWidth;
    g.beginPath();
    g.rect(x + dph, y + dph, width - 1, height - 1);
    g.fillStyle = "white";
    g.fill();
    g.strokeStyle = "black";
    g.stroke();
  }

  function drawRect2(g, x, y, width, height, color) {
    g.lineWidth = lineWidth;
    g.beginPath();
    g.rect(x + dph, y + dph, width - 1, height - 1);
    g.fillStyle = color;
    g.fill();
    g.strokeStyle = "black";
    g.stroke();
  }

  function drawPolygon(g, x, y, color) {
    g.beginPath();
    g.moveTo(x[0], y[0]);
    g.lineTo(x[1], y[1]);
    g.lineTo(x[2], y[2]);
    g.lineTo(x[3], y[3]);
    g.closePath();
    g.strokeStyle = color;
    g.lineWidth = 0.7 * dpr;
    g.stroke();
  }

  function fillPolygon(g, x, y, color) {
    g.beginPath();
    g.moveTo(x[0], y[0]);
    g.lineTo(x[1], y[1]);
    g.lineTo(x[2], y[2]);
    g.lineTo(x[3], y[3]);
    g.closePath();
    g.fillStyle = color;
    g.fill();
  }

  var superRotate = [[0, 1, 2, 3], [3, 0, 1, 2], [2, 3, 0, 1], [1, 2, 3, 0]];

  function drawSuperArrow(g, xx, yy, face, superTwist, color) {
    var x = [];
    var y = [];
    var w = .26; // arrow width
    if (scw == 2 && color == "#ffffff")
      return;
    // scale down so there is a margin around the arrow
    for (var i = 0; i < 4; i++) {
      x[i] = Math.floor(xx[i] + (xx[superRotate[2][i]] - xx[i]) * .05);
      y[i] = Math.floor(yy[i] + (yy[superRotate[2][i]] - yy[i]) * .05);
    }
    if (face == 0)
      superTwist = (superTwist + 1) % 4;
    if (face == 4)
      superTwist = (superTwist + 3) % 4;
    var a = superRotate[superTwist][0];
    var b = superRotate[superTwist][1];
    var c = superRotate[superTwist][2];
    var d = superRotate[superTwist][3];
    var A = (x[c] - x[b]) * w;
    var B = (y[c] - y[b]) * w;
    var C = (x[a] - x[b]) / 2;
    var D = y[b] + (y[a] - y[b]) / 2;
    var E = y[c] + (y[d] - y[c]) / 2;
    var F = (x[d] - x[c]) / 2;
    var n = superTwist ^ 1;
    g.fillStyle = color;
    g.beginPath();
    g.moveTo(x[a] + (x[d] - x[a]) / 2, y[a] + (y[d] - y[a]) / 2);
    g.lineTo(x[n] + C, D);
    g.lineTo(x[n] + A + C, D + B);
    g.lineTo(x[n] + A, y[n] + B);
    n = (n + 1) % 4;
    g.lineTo(x[n] - A, y[n] - B);
    g.lineTo(x[n] - A + F, E - B);
    g.lineTo(x[n] + F, E);
    g.closePath();
    g.fill();
    g.lineWidth = 0.6 * dpr;
    g.strokeStyle = "black";
    g.stroke();
  }

  function colorToHex(s) {
    if (s == "white") return ("#FFFFFF");
    else if (s == "black") return ("#000000");
    else if (s == "gray") return ("#808080");
    else return ("#808080");
  }

  function colorAverage(s) {
    if (s.substring(0, 1) != "#")
      s = colorToHex(s);
    var r = parseInt(s.substring(1, 3), 16);
    var g = parseInt(s.substring(3, 5), 16);
    var b = parseInt(s.substring(5, 7), 16);
    return ((r * 299 + g * 587 + b * 114) / 1000);
  }

  function brighter(s) {
    if (s.substring(0, 1) != "#")
      s = colorToHex(s);
    var r = parseInt(s.substring(1, 3), 16);
    var g = parseInt(s.substring(3, 5), 16);
    var b = parseInt(s.substring(5, 7), 16);
    r = Math.floor(r * 1.3);
    g = Math.floor(g * 1.3);
    b = Math.floor(b * 1.3);
    return rgbToHex(r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);
  }

  function darker(s) {
    if (s.substring(0, 1) != "#")
      s = colorToHex(s);
    var r = parseInt(s.substring(1, 3), 16);
    var g = parseInt(s.substring(3, 5), 16);
    var b = parseInt(s.substring(5, 7), 16);
    r = Math.floor(r * .7);
    g = Math.floor(g * .7);
    b = Math.floor(b * .7);
    return rgbToHex(r, g, b);
  }

  function run(jobNum, dir) {
    if (jobNum > nowServing) {
      setTimeout(run, 0, jobNum, dir);
      return;
    }
    if (!demo && (move.length == 0 || move[curMove].length == 0)) {
      animating = false;
      drawButtons = true;
      paint();
      return;
    }
    if (!moveAnimated) { // fast-forward without using animation scheduler
      var mv = move[curMove];
      while (movePos < mv.length) {
        if (mv[movePos] >= 1000)
          curInfoText = mv[movePos] - 1000;
        else if (mv[movePos] != -1) {
          var num = mv[movePos] % 4 + 1;
          var mode = Math.floor(mv[movePos] / 4) % (modeChar.length + 1);
          var layer = Math.floor(mv[movePos] / 4 / (modeChar.length + 1));
          twistLayers(cube, layer, (num == 4) ? 2 : num, mode);
        }
        movePos++;
      }
      animating = false;
      drawButtons = true;
      paint();
      nowServing++;
      return;
    }
    var moveDir = dir;
    interrupted = false;
    requestAnimationFrame(callback);
    var layer, num, mode;
    var sTime, lTime;
    var d, phis, phit;
    var restart;
    var spin = false;
    var outerLoopTop = true;
    var innerLoopTop = true;
    var innerLoopBot = false;
    var outerLoopBot = false;
    var cont = false;
    var mv = demo ? demoMove[0] : move[curMove];

    function callback() {
      if (outerLoopTop) {
        outerLoopTop = false;
        restart = false;
        if (repeatable) {
          if (moveDir > 0) {
            if (movePos >= mv.length) {
              movePos = 0;
              initInfoText(mv);
            }
          }
          else {
            curInfoText = -1;
            if (movePos == 0)
              movePos = mv.length;
          }
        }
        else {
          if ((moveDir > 0 && movePos >= mv.length) ||
            (moveDir < 0 && movePos == 0)) {
            restarted = false;
            animating = false;
            nowServing++;
            drawButtons = true;
            paint();
            // cancel();
            return;
          }
        }
        animating = true;
        drawButtons = true;
      }
      if (innerLoopTop) {
        innerLoopTop = false;
        if (moveDir < 0) {
          cont = false;
          if (movePos == 0) {
            cont = true;
            outerLoopBot = true;
          }
          else
            movePos--;
        }
        if (!cont) {
          spin = false;
          if (mv[movePos] == -1) {
            paint();
            // dot in the move sequence means pause
            if (!moveOne) {
              // sleep(33 * speed);
              // no sleep command available so do a busy wait
              sTime = Date.now();
              while ((Date.now() - sTime) < 1000)
              ; // empty loop
            }
          }
          else if (mv[movePos] >= 1000)
            curInfoText = moveDir > 0 ? mv[movePos] - 1000 : -1;
          else
            spin = true;
          if (spin) {
            num = mv[movePos] % 4 + 1;
            mode = Math.floor(mv[movePos] / 4) % (modeChar.length + 1);
            var clockwise = num < 3;
            if (num == 4)
              num = 2;
            if (moveDir < 0) {
              clockwise = !clockwise;
              num = 4 - num;
            }
            layer = Math.floor(mv[movePos] / 4 / (modeChar.length + 1));
            twisting = false;
            natural = true;
            spinning = true;
            originalAngle = 0;
            if (faceTwistDirs[layer] > 0)
              clockwise = !clockwise;
            if (moveAnimated) {
              phit = Math.PI / 2; // target for currentAngle (default pi/2)
              phis = clockwise ? 1.0 : -1.0; // sign
              var turnTime = 67 * speed; // milliseconds to be used for one turn
              if (num == 2) {
                phit = Math.PI;
                turnTime = 67 * doubleSpeed; // double turn is usually faster than two quarter turns
              }
              twisting = true;
              twistedLayer = layer;
              twistedMode = mode;
              splitCube(layer); // start twisting
              sTime = Date.now();
              lTime = sTime;
              d = phis * phit / turnTime;
              currentAngle = 0;
            }
          } // if spin
          else
            innerLoopBot = true;
        } // if cont
      } // if innerLoopTop
      if (!cont) {
        if (spin) {
          if (moveAnimated) {
            if (currentAngle * phis < phit) {
              paint();
              if (interrupted || restarted)
                innerLoopBot = true;
              lTime = Date.now();
              currentAngle = d * (lTime - sTime);
            }
            else
              innerLoopBot = true;
          }
          else
            innerLoopBot = true;
        }
        if (innerLoopBot) {
          innerLoopBot = false;
          innerLoopTop = true;
          if (spin) {
            currentAngle = 0;
            twisting = false;
            natural = true;
            twistLayers(cube, layer, num, mode);
            spinning = false;
            if (moveAnimated) {
              if (!moveOne && moveDir > 0) movePos++;
              paint();
              if (!moveOne && moveDir > 0) movePos--;
            }
            if (moveOne)
              restart = true;
          }
          if (moveDir > 0) {
            movePos++;
            if (movePos < mv.length && mv[movePos] >= 1000) {
              curInfoText = mv[movePos] - 1000;
              movePos++;
            }
            if (movePos == mv.length) {
              if (!demo)
                outerLoopBot = true;
              else
                clearDemo(mv);
            }
          }
          else
            curInfoText = -1;
          if (interrupted || restarted || restart)
            outerLoopBot = true;
        } // innerLoopBot
      } // cont
      if (outerLoopBot) {
        outerLoopBot = false;
        outerLoopTop = true;
        if (jobNumber <= nowServing + 1)
          animating = false;
        drawButtons = true;
        if (buttonPressed == 0 || buttonPressed > 6)
          clear();
        paint();
        if (demo) {
          clear();
          demo = false;
        }
        restarted = false; // added (from stopAnimation)
        nowServing++;
        // cancel();
        if (movePos == 1 && mv[0] >= 1000)
          movePos--;
        return;
      }
      requestAnimationFrame(callback);
    }
  }

  function clearDemo(mv) {
    movePos = 0;
    for (var i = 0; i < 6; i++)
      for (var j = 0; j < 49; j++) {
        cube[i][j] = initialCube[i][j];
        scube[i][j] = initialSCube[i][j];
       }
    if (initialMove.length > 0 && typeof initialMove[curMove] != 'undefined')
      doMove(cube, initialMove[curMove], 0, initialMove[curMove].length, false);
    if (initialReversedMove.length > 0 && typeof initialReversedMove[curMove] != 'undefined')
       doMove(cube, initialReversedMove[curMove], 0, initialReversedMove[curMove].length, true);
    initInfoText(mv);
  }

  document.addEventListener('touchstart', mousedown, {passive:false});
  document.addEventListener('touchmove', mousemove, {passive:false});
  document.addEventListener('touchend', mouseup);
  document.addEventListener('mousedown', mousedown);
  document.addEventListener('mousemove', mousemove);
  document.addEventListener('mouseup', mouseup);
  document.addEventListener('contextmenu', contextmenu);

  var offsetX, offsetY;
  var mouseIsDown = false;
  var showContextMenu = true;
  var divs = document.getElementsByTagName('div');
  var wrapDiv = (divs.length > 0 && divs[0].className == 'wrap') ? true : false;

  function touchfunc(s) {
    if (wrapDiv)
      divs[0].style.overflow = s;
    else
      document.body.style.overflow = s;
  }

  function mouseup(e) {
    if (mouseIsDown && typeof e.touches != 'undefined') {
      e.preventDefault();
      touchfunc('auto');
    }
    if (mouseIsDown)
      setTimeout(function() {
        showContextMenu = true
      }, 100);
    else
      showContextMenu = true;
    mouseIsDown = false;
    dragging = false;
    if (pushed) {
      pushed = false;
      drawButtons = true;
      paint();
    }
    else if (twisting && !spinning) {
      twisting = false;
      originalAngle += currentAngle;
      currentAngle = 0.0;
      var angle = originalAngle;
      while (angle < 0.0)
        angle += 32.0 * Math.PI;
      var num = Math.floor(angle * 8.0 / Math.PI) % 16; // 2pi ~ 16
      if (snap || num % 4 == 0 || num % 4 == 3) { // close enough to a corner
        num = Math.floor((num + 2) / 4); // 2pi ~ 4
        if (faceTwistDirs[twistedLayer] > 0)
          num = (4 - num) % 4;
        originalAngle = 0;
        natural = true; // the cube in the natural state
        twistLayers(cube, twistedLayer, num, twistedMode); // rotate the facelets
      }
      paint();
    }
  }

  function mousedown(e) {
    var rect = canvas.getBoundingClientRect();
    var left = Math.floor(rect.left);
    var top = Math.floor(rect.top);
    if (typeof e.touches == 'undefined') {
      var x = e.clientX;
      var y = e.clientY;
    }
    else {
      var x = e.touches[0].clientX;
      var y = e.touches[0].clientY;
    }
    if (x < left || x > left + width / dpr || y < top || y > top + (height + buttonHeight) / dpr)
      return;
    e.preventDefault();
    mouseIsDown = true;
    showContextMenu = false;
    if (typeof e.touches != 'undefined')
      touchfunc('hidden');
    offsetX = left;
    offsetY = top;
    lastDragX = lastX = getX(e);
    lastDragY = lastY = getY(e);
    toTwist = false;
    buttonPressed = selectButton(lastX, lastY);
    if (buttonPressed >= 0)
      button();
    else if (progressHeight > 0 && move.length > 0 && move[curMove].length > 0 && lastY > height - progressHeight && lastY <= height) {
      if (clickProgress) {
        stopAnimation();
        progress(jobNumber++);
      }
    }
    else {
      if (mirrored)
        lastDragX = lastX = width - lastX;
      if (typeof e.touches == 'undefined') {
        if (editable && !animating && e.button == 0 && !e.shiftKey)
          toTwist = true;
      }
      else {
        if (editable && !animating)
          toTwist = true;
      }
    }
  }

  function button() {
    pushed = true;
    if (buttonPressed == 3) {
      if (!animating) // special feature
        mirrored = !mirrored;
      else
        stopAnimation();
    }
    else if (buttonPressed == 0) { // clear everything to the initial setup
      if (scramble > 0 && buttonBar == 2) {
        if (scrambleToggle == true) {
          scrambleToggle = false;
          stopAnimation();
          clear();
        }
        else {
          scrambleToggle = true;
          buttonPressed = 6;
          startAnimation(buttonAction[buttonPressed]);
        }
      }
      else {
        stopAnimation();
        clear();
      }
    }
    else if (buttonPressed == 7 || buttonPressed == 8) { // next sequence
      stopAnimation();
      setTimeout(clear, 0);
      if (buttonPressed == 7)
        curMove = curMove > 0 ? curMove - 1 : move.length - 1;
      else
        curMove = curMove < move.length - 1 ? curMove + 1 : 0;
    }
    else
      startAnimation(buttonAction[buttonPressed]);
    drawButtons = true;
    paint();
  }

  function progress(jobNum) {
    if (jobNum > nowServing) {
      setTimeout(progress, 0, jobNum);
      return;
    }
    var len = realMoveLength(move[curMove]);
    var pos = Math.floor(((lastX - 1) * len * 2 / (width - 2) + 1) / 2);
    pos = Math.max(0, Math.min(len, pos));
    if (pos > 0)
      pos = arrayMovePos(move[curMove], pos);
    if (pos > movePos)
      doMove(cube, move[curMove], movePos, pos - movePos, false);
    if (pos < movePos)
      doMove(cube, move[curMove], pos, movePos - pos, true);
    movePos = pos;
    dragging = true;
    paint();
    animating = false;
    nowServing++;
  }

  var eyeD = [];

  function mousemove(e) {
    if (!mouseIsDown)
      return;
    if (pushed)
      return;
    if (typeof e.touches != 'undefined')
      e.preventDefault();
    if (dragging) {
      stopAnimation();
      var len = realMoveLength(move[curMove]);
      var pos = Math.floor(((getX(e) - 1) * len * 2 / (width - 2) + 1) / 2);
      pos = Math.max(0, Math.min(len, pos));
      if (pos > 0)
        pos = arrayMovePos(move[curMove], pos);
      if (pos > movePos)
        doMove(cube, move[curMove], movePos, pos - movePos, false);
      if (pos < movePos)
        doMove(cube, move[curMove], pos, movePos - pos, true);
      movePos = pos;
      paint();
      return;
    }
    var x = mirrored ? width - getX(e) : getX(e);
    var y = getY(e);
    var dx = x - lastX;
    var dy = y - lastY;
    if (editable && toTwist && !twisting && !animating) { // we do not twist but we can
      lastDragX = x;
      lastDragY = y;
      for (var i = 0; i < dragAreas; i++) { // check if inside a drag area
        var d1 = dragCornersX[i][0];
        var x1 = dragCornersX[i][1] - d1;
        var y1 = dragCornersX[i][3] - d1;
        var d2 = dragCornersY[i][0];
        var x2 = dragCornersY[i][1] - d2;
        var y2 = dragCornersY[i][3] - d2;
        var a = (y2 * (lastX - d1) - y1 * (lastY - d2)) / (x1 * y2 - y1 * x2);
        var b = (-x2 * (lastX - d1) + x1 * (lastY - d2)) / (x1 * y2 - y1 * x2);
        if (a > 0 && a < 1 && b > 0 && b < 1) { // we are in
          if (dx * dx + dy * dy < 144) // delay the decision about twisting
            return;
          dragX = dragDirsX[i];
          dragY = dragDirsY[i];
          var d = Math.abs(dragX * dx + dragY * dy) / Math.sqrt((dragX * dragX + dragY * dragY) * (dx * dx + dy * dy));
          if (d > 0.75) {
            twisting = true;
            twistedLayer = dragLayers[i];
            twistedMode = dragModes[i];
            break;
          }
        }
      }
      toTwist = false;
      lastX = lastDragX;
      lastY = lastDragY;
    }
    dx = (x - lastX) / dpr;
    dy = (y - lastY) / dpr;
    if (!twisting || animating) { // whole cube rotation
      if (rotateAllowed) {
        vNorm(vAdd(eye, vScale(vCopy(eyeD, eyeX), dx * -0.016)));
        vNorm(vMul(eyeX, eyeY, eye));
        vNorm(vAdd(eye, vScale(vCopy(eyeD, eyeY), dy * 0.016)));
        vNorm(vMul(eyeY, eye, eyeX));
        lastX = x;
        lastY = y;
      }
    }
    else {
      if (natural)
        splitCube(twistedLayer);
      currentAngle = 0.03 * (dragX * dx + dragY * dy) / Math.sqrt(dragX * dragX + dragY * dragY); // dv * cos a
    }
    paint();
  }

  function getX(e) {
    return (typeof e.touches == 'undefined') ?
      (e.clientX - offsetX) * dpr :
      (e.touches[0].clientX - offsetX) * dpr;
  }

  function getY(e) {
    return (typeof e.touches == 'undefined') ?
      (e.clientY - offsetY) * dpr :
      (e.touches[0].clientY - offsetY) * dpr;
  }

  function contextmenu(e) {
    if (!showContextMenu)
      e.preventDefault();
  }

  window.addEventListener('resize', resize);
  var timer;

  function resize() {
    clearTimeout(timer);
    timer = setTimeout(resize2, 20);

    function resize2() {
      scaleCanvas();
      drawButtons = true;
      paint();
    }
  }

  var canvas;
  var graphics;
  var dpr, dph;
  var lineWidth;
  var ubuttonHeight;
  var uprogressHeight;
  var utextHeight;

  function init2() {
    graphics = canvas.getContext("2d");
    ubuttonHeight = buttonHeight;
    uprogressHeight = progressHeight;
    utextHeight = textHeight;
    scaleCanvas();
    parNode.appendChild(canvas);
    initSliceNormals();
    paint();
  }

  function scaleCanvas() {
    height = parNode.clientHeight - 1;
    width = parNode.clientWidth - 1;
    setCanvasCssSize();
    dpr = devicePixelRatio;
    dph = dpr / 2;
    height = Math.floor(height * dpr);
    width = Math.floor(width * dpr);
    setCanvasSize();
    lineWidth = dpr;
    buttonHeight = Math.floor(ubuttonHeight * dpr);
    progressHeight = Math.floor(uprogressHeight * dpr);
    textHeight = Math.floor(utextHeight * dpr);
    for (var i = 1; i < 10; i++)
      ds[i] = i * dpr;
    for (var i = 0; i < textOffsetInit.length; i++)
      textOffset[i] = textOffsetInit[i] * dpr;
    if (buttonBar == 1)
      height -= buttonHeight;
  }

  function setCanvasCssSize() {
    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
  }

  function setCanvasSize() {
    canvas.width = width;
    canvas.height = height;
  }

  function randMoves(s, n) {
    // param 1 is cube size (3 = 3x3, 4 = 4x4, etc)
    // param 2 is #moves, 0 defaults to 10x cube size
    var face = ['R', 'L', 'F', 'B', 'U', 'D'];
    var slice = ['', 'm', 'n', 'o'];
    var twist = ['', '2', '\''];
    var r1 = -1,
      prev = -1,
      prev2 = -1,
      r2, r3;
    var randmoves = "";
    if (n == 0) n = s * 10;
    for (var i = 0; i < n; i++) {
      while (r1 == prev || (Math.floor(r1 / 2) == Math.floor(prev / 2) && r1 == prev2))
        r1 = Math.floor(Math.random() * 6);
      prev2 = prev;
      prev = r1;
      r2 = Math.floor(Math.random() * 3);
      if (s <= 3)
        randmoves += "" + face[r1] + twist[r2] + " ";
      else {
        r3 = Math.floor(Math.random() * Math.ceil(s/2));
        if (r3 == 1 && (s == 5 || s == 7)) r3 = 0;
        randmoves += "" + face[r1] + slice[r3] + twist[r2] + " ";
      }
    }
    return (randmoves);
  }

  var parNode;
  var searchParams = [];

  function parseSearchParams() {
    var lines = params.split('&');
    for (var i = 0; i < lines.length; i++) {
      var line = lines[i].split('=');
      if (typeof line[1] != 'undefined')
        searchParams[line[0]] = decodeURIComponent(line[1].trim());
    }
  }

  function removeListeners() {
    stopAnimation();
    document.removeEventListener('touchstart', mousedown);
    document.removeEventListener('touchmove', mousemove);
    document.removeEventListener('touchend', mouseup);
    document.removeEventListener('mousedown', mousedown);
    document.removeEventListener('mousemove', mousemove);
    document.removeEventListener('mouseup', mouseup);
    document.removeEventListener('contextmenu', contextmenu);
    window.removeEventListener('resize', resize);
  }

  function init0() {
    canvas = document.createElement('canvas');
    if (typeof params != 'undefined')
      parseSearchParams();
    var param = getParameter('id');
    if (param != null) {
      parNode = document.getElementById(param);
      parNode.innerHTML = '';
    }
    else {
      if (document.currentScript != null)
        parNode = document.currentScript.parentNode;
      else {
        var scripts = document.getElementsByTagName("script");
        var thisScript = scripts[scripts.length - 1]
        parNode = thisScript.parentNode;
      }
    }
    for (var i = 0; i < 6; i++) {
      cube[i] = [];
      scube[i] = [];
      initialCube[i] = [];
      initialSCube[i] = [];
    }
    for (var i = 0; i < 42; i++) {
      dragCornersX[i] = [];
      dragCornersY[i] = [];
    }
    curMove = 0;
    originalAngle = 0;
    onModuleLoad();
    if (parNode.id != null)
      init_direct_access(parNode.id);
  }

  function init_direct_access(id) {
    for (var s in window)
      if (s.substr(0, 5) == 'acjs_') {
        var g = eval(s);     // global
        var l = s.substr(5); // local
        if (Array.isArray(g)) {
          if (exists(l))
            g[id] = eval(l);
          else
            console.log(l + ' does not exist in animcube');
        }
        else
          console.log(s + ' is not an array');
      }
  }
  function get_var(v) {
    if (exists(v))
      return eval(v)
    else
      console.log(v + ' does not exist in animcube');
  }
  function put_var(v, val, type) {
    if(exists(v)) {
      if (type == 's')
        eval(v + "='" + val + "'");
      else if (type == 'n')
        eval(v + '=' + Number(val));
    }
  }
  function exists(s){
    try {return typeof eval(s)} catch {return false}
  }

  init0();
}