/*
 * XaoS.js
 * https://github.com/jblang/XaoS.js
 *
 * Copyright (C)2011 John B. Langston III
 * Copyright (C)2001, 2010 Andrea Medeghini
 * Copyright (C)1996, 1997 Jan Hubicka and Thomas Marsh
 *
 * Based on code from XaoS by Jan Hubicka (http://xaos.sf.net)
 * and from JAME by Andrea Medeghini (http://www.fractalwalk.net)
 *
 * This file is part of XaoS.js.
 *
 * XaoS.js is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * XaoS.js is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with XaoS.js.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
var xaos = xaos || {};

xaos.zoom = (function () {
  "use strict";

  const USE_XAOS = true; // Whether to use zooming or recalculate every frame
  const USE_SYMMETRY = true; // Whether to use symmetry when possible
  const USE_SOLIDGUESS = true; // Whether to use solid guessing to avoid calculations
  const RANGES = 2; // Number of ranges to use for sizing approximation data
  const RANGE = 4; // Maximum distance to use for approximation
  const MASK = 0x7; // Mask value for maximum potential source lines
  const DSIZE = RANGES + 1; // Shift value for target lines
  const FPMUL = 64; // Multiplication factor for fixed-point representation
  const FPRANGE = FPMUL * RANGE; // Fixed point range of approximation
  const MAX_PRICE = Number.MAX_VALUE; // Maximum price of uninitialized approximation
  const NEW_PRICE = FPRANGE * FPRANGE; // Price of calculating a new line
  const GUESS_RANGE = 4; // Range to use for solid guessing

  /** A price entry in the approximation table
   * @constructor
   */
  function Price() {
    this.previous = null; // Previous price calculated for the same line
    this.index = 0; // Index of the source for this approximation (-1 means new calculation)
    this.price = MAX_PRICE; // Price calculated for this line
  }

  /** A group of pixels to be moved
   * @constructor
   */
  function Move() {
    this.length = 0; // number of pixels to move
    this.from = 0; // starting offset of pixel source
    this.to = 0; // starting offset of pixel destination
  }

  /** A single row or column of pixels in the image
   * @constructor
   */
  function Line() {
    this.recalculate = false; // whether to recalculate this line
    this.dirty = false; // whether this line needs to be redrawn
    this.isRow = false; // whether this is a row (true) or column (false)
    this.index = 0; // index of row or column within the image
    this.symIndex = 0; // index of pixels to use for symmetry
    this.symTo = 0; // position of pixels this is symmetrical to
    this.symRef = 0; // position of pixels referring to this one
    this.oldPosition = 0.0; // line's old position in the fractal's complex plane
    this.newPosition = 0.0; // line's new position in the fractal's complex plane
    this.priority = 0.0; // calculation priority for this row/column
  }

  /** An image derived from an HTML5 canvas
   * @param canvas - the canvas used to display the image
   * @constructor
   */
  function CanvasImage(canvas) {
    let width = canvas.clientWidth;
    let height = canvas.clientHeight;
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
    } else {
      ctx.clearRect(0, 0, width, height);
    }

    this.canvas = canvas;
    this.context = canvas.getContext("2d");
    this.width = canvas.width;
    this.height = canvas.height;
    this.newImageData = this.context.createImageData(this.width, this.height);
    this.oldImageData = this.context.createImageData(this.width, this.height);
    this.newBuffer = new Uint32Array(this.newImageData.data.buffer);
    this.oldBuffer = new Uint32Array(this.oldImageData.data.buffer);
  }

  /** Swap new and old buffers */
  CanvasImage.prototype.swapBuffers = function () {
    var tmp = this.oldBuffer;
    this.oldBuffer = this.newBuffer;
    this.newBuffer = tmp;
    tmp = this.oldImageData;
    this.newImageData = this.oldImageData;
    this.oldImageData = tmp;
  };

  /** Draw the current image */
  CanvasImage.prototype.paint = function () {
    this.context.putImageData(this.newImageData, 0, 0);
  };

  /** Utility function to make an array of the specified size
   * with the specified initial value. It will do the right thing
   * to create unique items, whether you pass in a prototype, a
   * constructor, or a primitive.
   * @param {number} size - the size of the array.
   * @param initial - the initial value for each entry.
   */
  function makeArray(size, initial) {
    var i,
      data = [];
    for (i = 0; i < size; i++) {
      if (typeof initial === "object") {
        // prototype object
        data[i] = Object.create(initial);
      } else if (typeof initial === "function") {
        // constructor
        data[i] = new initial();
      } else {
        // primitive
        data[i] = initial;
      }
    }
    return data;
  }

  /** Container for all zoom context data for a particular canvas.
   *
   * @param image {CanvasImage} Image on which to draw the fractal.
   * @param fractal {FractalContext} Fractal parameters.
   * @constructor
   */
  function ZoomContext(image, fractal) {
    var size = Math.max(image.width, image.height);
    this.image = image; // the image to draw the fractal on
    this.fractal = fractal; // the fractal formula used for the image
    this.columns = makeArray(image.width, Line); // columns in the fractal image
    this.rows = makeArray(image.height, Line); // rows in the fractal image
    this.sourcePos = makeArray(size + 1, 0); // fixed-point positions for source lines
    this.oldBest = makeArray(size, null); // best prices for previous line
    this.newBest = makeArray(size, null); // best prices for current line
    this.calcPrices = makeArray(size, Price); // prices for calculating new lines
    this.movePrices = makeArray(size << DSIZE, Price); // prices for approximating new lines from exsiting ones
    this.moveTable = makeArray(image.width + 1, Move); // table of pixels to be moved
    this.fillTable = makeArray(image.width + 1, Move); // table of pixels to be filled
    this.queue = makeArray(image.width + image.height, null); // queue of lines to calculate
    this.queueLength = 0; // length of the calculation queue
    this.startTime = 0; // time that the current frame was started
    this.minFPS = 60; // target FPS to maintain
    this.fudgeFactor = 0; // fudge factor used to achieve target FPS
    this.incomplete = false; // flag indicates incomplete calculation
    this.zooming = false; // flag indicates image is currently zooming
  }

  /** Swaps the old and new best prices in the this container. */
  ZoomContext.prototype.swapBest = function () {
    var tmpBest = this.oldBest;
    this.oldBest = this.newBest;
    this.newBest = tmpBest;
  };

  /** Convert fractal viewport from radius and center to x and y start to end ranges */
  ZoomContext.prototype.convertArea = function () {
    var radius = this.fractal.region.radius;
    var center = this.fractal.region.center;
    var aspect = this.image.width / this.image.height;
    var size = Math.max(radius.x, radius.y * aspect);
    return {
      begin: {
        x: center.x - size / 2,
        y: (center.y - size / 2) / aspect,
      },
      end: {
        x: center.x + size / 2,
        y: (center.y + size / 2) / aspect,
      },
    };
  };

  /** Resets line of pixels for fresh calculation
   *
   * @param line - row or column of pixels
   * @param begin - starting fractal cooridnate
   * @param end - ending coordinate
   * @param isRow - whether this is a row or column
   * @returns {number}
   */
  ZoomContext.prototype.initialize = function (lines, begin, end, isRow) {
    var i;
    var p;
    var step = (end - begin) / lines.length;
    var line = null;

    for (i = 0, p = begin; i < lines.length; i++, p += step) {
      line = lines[i];
      line.recalculate = true;
      line.dirty = true;
      line.isRow = isRow;
      line.index = i;
      line.oldPosition = p;
      line.newPosition = p;
      line.symIndex = i;
      line.symTo = -1;
      line.symRef = -1;
    }
    return step;
  };

  /** Calculate price of approximating one line from another
   *
   * @param p1 - position of first line
   * @param p2 - position of second line
   * @returns {number} - price of approximation
   */
  function calcPrice(p1, p2) {
    return (p1 - p2) * (p1 - p2);
  }

  /** Calculate fixed-point representation of each line's old position
   * @param lines - lines to use for calculation
   * @param begin - beginning of floating point range
   * @param end - end of floating point range
   */
  ZoomContext.prototype.calcFixedpoint = function (lines, begin, end) {
    var tofix = (lines.length * FPMUL) / (end - begin);
    var i;
    this.sourcePos[lines.length] = Number.MAX_VALUE;
    for (i = lines.length - 1; i >= 0; i--) {
      this.sourcePos[i] = ((lines[i].oldPosition - begin) * tofix) | 0;
      if (this.sourcePos[i] > this.sourcePos[i + 1]) {
        this.sourcePos[i] = this.sourcePos[i + 1];
      }
    }
  };

  /** Choose the best approximation for lines based on previous frame
   *
   * @param lines - relocation table for rows or columns
   * @param begin - beginning coordinate (x or y)
   * @param end - ending coordinate (x or y)
   * @param newPosition - array of newPosition coordinates on the complex plane
   * @returns {number}
   */
  ZoomContext.prototype.approximate = function (lines, begin, end) {
    var previous = null; // pointer to previous approximation
    var best = null; // pointer to best approximation
    var line = null; // pointer to current line
    var price = 0; // price of current approximation
    var dest; // index of the current destination line
    var idealPos = 0; // ideal position for the current destination
    var maxPos = 0; // maximum valid source position of the current destination
    var source = 0; // index of current source line
    var prevBegin = 0; // index of first potential source for current destination
    var prevEnd = 0; // index of last potential source for current destination
    var currBegin = 0; // index of first potential source for next destination
    var flag = 0;
    var size = lines.length;
    var step = (end - begin) / size;
    var sourcePos = this.sourcePos;

    // Calculate fixed-point positions of all source lines
    this.calcFixedpoint(lines, begin, end);

    for (dest = 0, idealPos = 0; dest < size; dest++, idealPos += FPMUL) {
      this.swapBest();
      maxPos = idealPos - FPRANGE;
      if (maxPos < -FPMUL) {
        maxPos = -FPMUL;
      }
      source = prevBegin;
      while (sourcePos[source] < maxPos) {
        source++;
      }
      currBegin = source;
      maxPos = idealPos + FPRANGE;

      // Find the previous approximation
      if (prevBegin !== prevEnd && source > prevBegin) {
        // Previous line had approximations; use them
        if (source < prevEnd) {
          previous = this.oldBest[source - 1];
        } else {
          previous = this.oldBest[prevEnd - 1];
        }
        price = previous.price;
      } else if (dest > 0) {
        // Previous line had no approximations
        // Use the price of calculating the previous line
        previous = this.calcPrices[dest - 1];
        price = previous.price;
      } else {
        // We're on the first line; no previous prices exists
        previous = null;
        price = 0;
      }

      // Add the price for calculating this line
      price += NEW_PRICE;
      best = this.calcPrices[dest];
      best.price = price;
      best.index = -1;
      best.previous = previous;

      // Try all possible approximations for this line and calculate the best one
      if (prevBegin !== prevEnd) {
        if (source === prevBegin) {
          // We're on the first line so there is no previous line
          if (sourcePos[source] !== sourcePos[source + 1]) {
            previous = this.calcPrices[dest - 1];
            price = previous.price + calcPrice(sourcePos[source], idealPos);
            if (price < best.price) {
              best = this.movePrices[(source << DSIZE) + (dest & MASK)];
              best.price = price;
              best.index = source;
              best.previous = previous;
            }
          }
          this.newBest[source++] = best;
        }
        previous = null;

        // Potential sources for the previous and current line overlap within
        // this range, so we have to calculate every possibility and find the best
        while (source < prevEnd) {
          if (sourcePos[source] !== sourcePos[source + 1]) {
            previous = this.oldBest[source - 1];
            price = previous.price + NEW_PRICE;
            if (price < best.price) {
              best = this.movePrices[((source - 1) << DSIZE) + (dest & MASK)];
              best.price = price;
              best.index = -1;
              best.previous = previous;
              this.newBest[source - 1] = best;
            }
            price = previous.price + calcPrice(sourcePos[source], idealPos);
            if (price < best.price) {
              best = this.movePrices[(source << DSIZE) + (dest & MASK)];
              best.price = price;
              best.index = source;
              best.previous = previous;
            } else if (sourcePos[source] > idealPos) {
              this.newBest[source++] = best;
              break;
            }
          }
          this.newBest[source++] = best;
        }

        // We are past the overlapping area
        if (source > prevBegin) {
          previous = this.oldBest[source - 1];
        } else {
          previous = this.calcPrices[dest - 1];
        }
        price = previous.price + NEW_PRICE;
        if (price < best.price && source > currBegin) {
          best = this.movePrices[((source - 1) << DSIZE) + (dest & MASK)];
          best.price = price;
          best.index = -1;
          best.previous = previous;
          this.newBest[source - 1] = best;
        }
        while (sourcePos[source] < maxPos) {
          if (sourcePos[source] !== sourcePos[source + 1]) {
            price = previous.price + calcPrice(sourcePos[source], idealPos);
            if (price < best.price) {
              best = this.movePrices[(source << DSIZE) + (dest & MASK)];
              best.price = price;
              best.index = source;
              best.previous = previous;
            } else if (sourcePos[source] > idealPos) {
              break;
            }
          }
          this.newBest[source++] = best;
        }
        while (sourcePos[source] < maxPos) {
          this.newBest[source++] = best;
        }
      } else if (sourcePos[source] < maxPos) {
        if (dest > 0) {
          previous = this.calcPrices[dest - 1];
          price = previous.price;
        } else {
          previous = null;
          price = 0;
        }
        while (sourcePos[source] < maxPos) {
          if (sourcePos[source] !== sourcePos[source + 1]) {
            price += calcPrice(sourcePos[source], idealPos);
            if (price < best.price) {
              best = this.movePrices[(source << DSIZE) + (dest & MASK)];
              best.price = price;
              best.index = source;
              best.previous = previous;
            } else if (sourcePos[source] > idealPos) {
              break;
            }
          }
          this.newBest[source++] = best;
        }
        while (sourcePos[source] < maxPos) {
          this.newBest[source++] = best;
        }
      }
      prevBegin = currBegin;
      currBegin = prevEnd;
      prevEnd = source;
    }
    if (begin > lines[0].oldPosition && end < lines[size - 1].oldPosition) {
      flag = 1;
    }
    if (sourcePos[0] > 0 && sourcePos[size - 1] < size * FPMUL) {
      flag = 2;
    }
    for (dest = size - 1; dest >= 0; dest--) {
      line = lines[dest];
      line.symTo = -1;
      line.symRef = -1;
      if (best.index < 0) {
        line.recalculate = true;
        line.dirty = true;
        line.symIndex = line.index;
      } else {
        line.symIndex = best.index;
        line.newPosition = lines[best.index].oldPosition;
        line.recalculate = false;
        line.dirty = false;
      }
      best = best.previous;
    }
    newPositions(lines, begin, end, step, flag);
    return step;
  };

  /** Choose new positions for lines based on calculated prices
   *
   * @param lines
   * @param size
   * @param begin1
   * @param end1
   * @param step
   * @param newPosition
   * @param flag
   */
  function newPositions(lines, begin1, end1, step, flag) {
    var delta = 0;
    var size = lines.length;
    var begin = 0;
    var end = 0;
    var s = -1;
    var e = -1;
    if (begin1 > end1) {
      begin1 = end1;
    }
    while (s < size - 1) {
      e = s + 1;
      if (lines[e].recalculate) {
        while (e < size) {
          if (!lines[e].recalculate) {
            break;
          }
          e++;
        }
        if (e < size) {
          end = lines[e].newPosition;
        } else {
          end = end1;
        }
        if (s < 0) {
          begin = begin1;
        } else {
          begin = lines[s].newPosition;
        }
        if (e === size && begin > end) {
          end = begin;
        }
        if (e - s === 2) {
          delta = (end - begin) * 0.5;
        } else {
          delta = (end - begin) / (e - s);
        }
        switch (flag) {
          case 1:
            for (s++; s < e; s++) {
              begin += delta;
              lines[s].newPosition = begin;
              lines[s].priority =
                1 / (1 + Math.abs(lines[s].oldPosition - begin) * step);
            }
            break;
          case 2:
            for (s++; s < e; s++) {
              begin += delta;
              lines[s].newPosition = begin;
              lines[s].priority = Math.abs(lines[s].oldPosition - begin) * step;
            }
            break;
          default:
            for (s++; s < e; s++) {
              begin += delta;
              lines[s].newPosition = begin;
              lines[s].priority = 1.0;
            }
            break;
        }
      }
      s = e;
    }
  }

  /** Populate symmetry data into relocation table
   *
   * @param lines
   * @param symi
   * @param symPosition
   * @param step
   */
  function prepareSymmetry(lines, symi, symPosition, step) {
    var i;
    var j = 0;
    var tmp;
    var abs;
    var distance;
    var newPosition;
    var size = lines.length;
    var max = size - RANGE - 1;
    var min = RANGE;
    var istart = 0;
    var line = null;
    var otherLine = null;
    var symj = 2 * symi - size;
    symPosition *= 2;
    if (symj < 0) {
      symj = 0;
    }
    distance = step * RANGE;
    for (i = symj; i < symi; i++) {
      line = lines[i];
      if (line.symTo !== -1) {
        continue;
      }
      newPosition = line.newPosition;
      line.symTo = 2 * symi - i;
      if (line.symTo > max) {
        line.symTo = max;
      }
      j = line.symTo - istart > RANGE ? -RANGE : -line.symTo + istart;
      if (line.recalculate) {
        while (j < RANGE && line.symTo + j < size - 1) {
          tmp = symPosition - lines[line.symTo + j].newPosition;
          abs = Math.abs(tmp - newPosition);
          if (abs < distance) {
            if (
              (i === 0 || tmp > lines[i - 1].newPosition) &&
              tmp < lines[i + 1].newPosition
            ) {
              distance = abs;
              min = j;
            }
          } else if (tmp < newPosition) {
            break;
          }
          j++;
        }
      } else {
        while (j < RANGE && line.symTo + j < size - 1) {
          if (line.recalculate) {
            tmp = symPosition - lines[line.symTo + j].newPosition;
            abs = Math.abs(tmp - newPosition);
            if (abs < distance) {
              if (
                (i === 0 || tmp > lines[i - 1].newPosition) &&
                tmp < lines[i + 1].newPosition
              ) {
                distance = abs;
                min = j;
              }
            } else if (tmp < newPosition) {
              break;
            }
          }
          j++;
        }
      }
      line.symTo += min;
      otherLine = lines[line.symTo];
      if (
        min === RANGE ||
        line.symTo <= symi ||
        otherLine.symTo !== -1 ||
        otherLine.symRef !== -1
      ) {
        line.symTo = -1;
        continue;
      }
      if (!line.recalculate) {
        line.symTo = -1;
        if (otherLine.symTo !== -1 || !otherLine.recalculate) {
          continue;
        }
        otherLine.symIndex = line.symIndex;
        otherLine.symTo = i;
        istart = line.symTo - 1;
        otherLine.recalculate = false;
        otherLine.dirty = true;
        line.symRef = line.symTo;
        otherLine.newPosition = symPosition - line.newPosition;
      } else {
        if (otherLine.symTo !== -1) {
          line.symTo = -1;
          continue;
        }
        line.symIndex = otherLine.symIndex;
        istart = line.symTo - 1;
        line.recalculate = false;
        line.dirty = true;
        otherLine.symRef = i;
        line.newPosition = symPosition - otherLine.newPosition;
      }
    }
  }

  /** Optimized array copy using Duff's Device.
   *
   * @param from {Array} source array
   * @param fromOffset {number} offset into source array
   * @param to {Array} idealPos array
   * @param toOffset {number} offset into idealPos array
   * @param length {number} elements to copy
   */
  function arrayCopy(from, fromOffset, to, toOffset, length) {
    var n = length % 8;
    while (n--) {
      to[toOffset++] = from[fromOffset++];
    }
    n = (length / 8) | 0;
    while (n--) {
      to[toOffset++] = from[fromOffset++];
      to[toOffset++] = from[fromOffset++];
      to[toOffset++] = from[fromOffset++];
      to[toOffset++] = from[fromOffset++];
      to[toOffset++] = from[fromOffset++];
      to[toOffset++] = from[fromOffset++];
      to[toOffset++] = from[fromOffset++];
      to[toOffset++] = from[fromOffset++];
    }
  }

  /** Apply previously calculated symmetry to image */
  ZoomContext.prototype.doSymmetry = function () {
    var from_offset = 0;
    var to_offset = 0;
    var i;
    var j = 0;
    var buffer = this.image.newBuffer;
    var bufferWidth = this.image.width;
    for (i = 0; i < this.rows.length; i++) {
      if (this.rows[i].symTo >= 0 && !this.rows[this.rows[i].symTo].dirty) {
        from_offset = this.rows[i].symTo * bufferWidth;
        arrayCopy(buffer, from_offset, buffer, to_offset, bufferWidth);
        this.rows[i].dirty = false;
      }
      to_offset += bufferWidth;
    }
    for (i = 0; i < this.columns.length; i++) {
      if (
        this.columns[i].symTo >= 0 &&
        !this.columns[this.columns[i].symTo].dirty
      ) {
        to_offset = i;
        from_offset = this.columns[i].symTo;
        for (j = 0; j < this.rows.length; j++) {
          buffer[to_offset] = buffer[from_offset];
          to_offset += bufferWidth;
          from_offset += bufferWidth;
        }
        this.columns[i].dirty = false;
      }
    }
  };

  /** Build an optimized move table based on relocation table */
  ZoomContext.prototype.prepareMove = function () {
    var move = null;
    var i = 0;
    var j = 0;
    var s = 0;
    while (i < this.columns.length) {
      if (!this.columns[i].dirty) {
        move = this.moveTable[s];
        move.to = i;
        move.length = 1;
        move.from = this.columns[i].symIndex;
        for (j = i + 1; j < this.columns.length; j++) {
          if (
            this.columns[j].dirty ||
            j - this.columns[j].symIndex !== move.to - move.from
          ) {
            break;
          }
          move.length++;
        }
        i = j;
        s++;
      } else {
        i++;
      }
    }
    move = this.moveTable[s];
    move.length = 0;
  };

  /** Execute moves defined in move table */
  ZoomContext.prototype.doMove = function () {
    var move = null;
    var newOffset = 0;
    var oldOffset = 0;
    var from = 0;
    var to = 0;
    var i;
    var s = 0;
    var length = 0;
    var newBuffer = this.image.newBuffer;
    var oldBuffer = this.image.oldBuffer;
    var bufferWidth = this.image.width;
    for (i = 0; i < this.rows.length; i++) {
      if (!this.rows[i].dirty) {
        s = 0;
        oldOffset = this.rows[i].symIndex * bufferWidth;
        while ((move = this.moveTable[s]).length > 0) {
          from = oldOffset + move.from;
          to = newOffset + move.to;
          length = move.length;
          arrayCopy(oldBuffer, from, newBuffer, to, length);
          s++;
        }
      }
      newOffset += bufferWidth;
    }
  };

  /** Shortcut for prepare and execute move */
  ZoomContext.prototype.movePixels = function () {
    this.prepareMove();
    this.doMove();
  };

  /** Prepare fill table based on relocation table */
  ZoomContext.prototype.prepareFill = function () {
    var fill = null;
    var i;
    var j = 0;
    var k = 0;
    var s = 0;
    var n = 0;
    for (i = 0; i < this.columns.length; i++) {
      if (this.columns[i].dirty) {
        j = i - 1;
        for (
          k = i + 1;
          k < this.columns.length && this.columns[k].dirty;
          k++
        ) {}
        while (i < this.columns.length && this.columns[i].dirty) {
          if (
            k < this.columns.length &&
            (j < i ||
              this.columns[i].newPosition - this.columns[j].newPosition >
                this.columns[k].newPosition - this.columns[i].newPosition)
          ) {
            j = k;
          } else if (j < 0) {
            break;
          }
          n = k - i;
          fill = this.fillTable[s];
          fill.length = n;
          fill.from = j;
          fill.to = i;
          while (n > 0) {
            this.columns[i].newPosition = this.columns[j].newPosition;
            this.columns[i].dirty = false;
            n--;
            i++;
          }
          s++;
        }
      }
    }
    fill = this.fillTable[s];
    fill.length = 0;
  };

  /** Apply fill table */
  ZoomContext.prototype.doFill = function () {
    var fill = null;
    var from_offset = 0;
    var to_offset = 0;
    var from = 0;
    var to = 0;
    var i;
    var j = 0;
    var k = 0;
    var t = 0;
    var s = 0;
    var d = 0;
    var buffer = this.image.newBuffer;
    var bufferWidth = this.image.width;
    for (i = 0; i < this.rows.length; i++) {
      if (this.rows[i].dirty) {
        j = i - 1;
        for (k = i + 1; k < this.rows.length && this.rows[k].dirty; k++) {}
        while (i < this.rows.length && this.rows[i].dirty) {
          if (
            k < this.rows.length &&
            (j < i ||
              this.rows[i].newPosition - this.rows[j].newPosition >
                this.rows[k].newPosition - this.rows[i].newPosition)
          ) {
            j = k;
          } else if (j < 0) {
            break;
          }
          to_offset = i * bufferWidth;
          from_offset = j * bufferWidth;
          if (!this.rows[j].dirty) {
            s = 0;
            while ((fill = this.fillTable[s]).length > 0) {
              from = from_offset + fill.from;
              to = from_offset + fill.to;
              for (t = 0; t < fill.length; t++) {
                d = to + t;
                buffer[d] = buffer[from];
              }
              s++;
            }
          }
          arrayCopy(buffer, from_offset, buffer, to_offset, bufferWidth);
          this.rows[i].newPosition = this.rows[j].newPosition;
          this.rows[i].dirty = true;
          i++;
        }
      } else {
        s = 0;
        from_offset = i * bufferWidth;
        while ((fill = this.fillTable[s]).length > 0) {
          from = from_offset + fill.from;
          to = from_offset + fill.to;
          for (t = 0; t < fill.length; t++) {
            d = to + t;
            buffer[d] = buffer[from];
          }
          s++;
        }
        this.rows[i].dirty = true;
      }
    }
  };

  /** Shortcut to prepare and apply fill table */
  ZoomContext.prototype.fill = function () {
    this.prepareFill();
    this.doFill();
  };

  /** Render line using solid guessing
   *
   * @param row
   */
  ZoomContext.prototype.renderRow = function (row) {
    var buffer = this.image.newBuffer;
    var bufferWidth = this.image.width;
    var newPosition = row.newPosition;
    var r = row.index;
    var offset = r * bufferWidth;
    var i;
    var j;
    var k;
    var n;
    var distl;
    var distr;
    var distu;
    var distd;
    var offsetu;
    var offsetd;
    var offsetl;
    var offsetul;
    var offsetur;
    var offsetdl;
    var offsetdr;
    var rend = r - GUESS_RANGE;
    var length;
    var current;
    if (rend < 0) {
      rend = 0;
    }
    for (i = r - 1; i >= rend && this.rows[i].dirty; i--) {}
    distu = r - i;
    rend = r + GUESS_RANGE;
    if (rend >= this.rows.length) {
      rend = this.rows.length - 1;
    }
    for (j = r + 1; j < rend && this.rows[j].dirty; j++) {}
    distd = j - r;
    if (
      !USE_SOLIDGUESS ||
      i < 0 ||
      j >= this.rows.length ||
      this.rows[i].dirty ||
      this.rows[j].dirty
    ) {
      for (k = 0, length = this.columns.length; k < length; k++) {
        current = this.columns[k];
        if (!this.columns[k].dirty) {
          buffer[offset] = this.fractal.formula(
            current.newPosition,
            newPosition
          );
        }
        offset++;
      }
    } else {
      distr = 0;
      distl = Number.MAX_VALUE / 2;
      offsetu = offset - distu * bufferWidth;
      offsetd = offset + distd * bufferWidth;
      for (k = 0, length = this.columns.length; k < length; k++) {
        current = this.columns[k];
        if (!this.columns[k].dirty) {
          if (distr <= 0) {
            rend = k + GUESS_RANGE;
            if (rend >= this.columns.length) {
              rend = this.columns.length - 1;
            }
            for (j = k + 1; j < rend && this.columns[j].dirty; j++) {
              distr = j - k;
            }
            if (j >= rend) {
              distr = Number.MAX_VALUE / 2;
            }
          }
          if (distr < Number.MAX_VALUE / 4 && distl < Number.MAX_VALUE / 4) {
            offsetl = offset - distl;
            offsetul = offsetu - distl;
            offsetdl = offsetd - distl;
            offsetur = offsetu + distr;
            offsetdr = offsetd + distr;
            n = buffer[offsetl];
            if (
              n == buffer[offsetu] &&
              n == buffer[offsetd] &&
              n == buffer[offsetul] &&
              n == buffer[offsetur] &&
              n == buffer[offsetdl] &&
              n == buffer[offsetdr]
            ) {
              buffer[offset] = n;
            } else {
              buffer[offset] = this.fractal.formula(
                current.newPosition,
                newPosition
              );
            }
          } else {
            buffer[offset] = this.fractal.formula(
              current.newPosition,
              newPosition
            );
          }
          distl = 0;
        }
        offset++;
        offsetu++;
        offsetd++;
        distr--;
        distl++;
      }
    }
    row.recalculate = false;
    row.dirty = false;
  };

  /** Render column using solid guessing
   *
   * @param column
   */
  ZoomContext.prototype.renderColumn = function (column) {
    var buffer = this.image.newBuffer;
    var bufferWidth = this.image.width;
    var newPosition = column.newPosition;
    var r = column.index;
    var offset = r;
    var rend = r - GUESS_RANGE;
    var i;
    var j;
    var k;
    var n;
    var distl;
    var distr;
    var distu;
    var distd;
    var offsetl;
    var offsetr;
    var offsetu;
    var offsetlu;
    var offsetru;
    var offsetld;
    var offsetrd;
    var sumu;
    var sumd;
    var length;
    var current;
    if (rend < 0) {
      rend = 0;
    }
    for (i = r - 1; i >= rend && this.columns[i].dirty; i--) {}
    distl = r - i;
    rend = r + GUESS_RANGE;
    if (rend >= this.columns.length) {
      rend = this.columns.length - 1;
    }
    for (j = r + 1; j < rend && this.columns[j].dirty; j++) {}
    distr = j - r;
    if (
      !USE_SOLIDGUESS ||
      i < 0 ||
      j >= this.columns.length ||
      this.columns[i].dirty ||
      this.columns[j].dirty
    ) {
      for (k = 0, length = this.rows.length; k < length; k++) {
        current = this.rows[k];
        if (!this.rows[k].dirty) {
          buffer[offset] = this.fractal.formula(
            newPosition,
            current.newPosition
          );
        }
        offset += bufferWidth;
      }
    } else {
      distd = 0;
      distu = Number.MAX_VALUE / 2;
      offsetl = offset - distl;
      offsetr = offset + distr;
      for (k = 0, length = this.rows.length; k < length; k++) {
        current = this.rows[k];
        if (!this.rows[k].dirty) {
          if (distd <= 0) {
            rend = k + GUESS_RANGE;
            if (rend >= this.rows.length) {
              rend = this.rows.length - 1;
            }
            for (j = k + 1; j < rend && this.rows[j].dirty; j++) {
              distd = j - k;
            }
            if (j >= rend) {
              distd = Number.MAX_VALUE / 2;
            }
          }
          if (distd < Number.MAX_VALUE / 4 && distu < Number.MAX_VALUE / 4) {
            sumu = distu * bufferWidth;
            sumd = distd * bufferWidth;
            offsetu = offset - sumu;
            offsetlu = offsetl - sumu;
            offsetru = offsetr - sumu;
            offsetld = offsetl + sumd;
            offsetrd = offsetr + sumd;
            n = buffer[offsetu];
            if (
              n == buffer[offsetl] &&
              n == buffer[offsetr] &&
              n == buffer[offsetlu] &&
              n == buffer[offsetru] &&
              n == buffer[offsetld] &&
              n == buffer[offsetrd]
            ) {
              buffer[offset] = n;
            } else {
              buffer[offset] = this.fractal.formula(
                newPosition,
                current.newPosition
              );
            }
          } else {
            buffer[offset] = this.fractal.formula(
              newPosition,
              current.newPosition
            );
          }
          distu = 0;
        }
        offset += bufferWidth;
        offsetl += bufferWidth;
        offsetr += bufferWidth;
        distd--;
        distu++;
      }
    }
    column.recalculate = false;
    column.dirty = false;
  };

  /** Calculate whether we're taking too long to render the fractal to meet the idealPos FPS */
  ZoomContext.prototype.tooSlow = function () {
    var newTime = new Date().getTime(),
      minFPS = this.zooming ? this.minFPS : 10;
    return 1000 / (newTime - this.startTime + this.fudgeFactor) < minFPS;
  };

  /** Prioritize calculation of lines between begin and end
   *
   * @param lines - rows or columns to prioritize
   * @param begin - index of first line to prioritize
   * @param end - index of last line to prioritize
   */
  function calcPriority(lines, begin, end) {
    var middle;
    while (begin < end) {
      middle = begin + ((end - begin) >> 1);
      lines[middle].priority =
        (lines[end].newPosition - lines[middle].newPosition) *
        lines[middle].priority;
      if (lines[middle].symRef !== -1) {
        lines[middle].priority /= 2.0;
      }
      calcPriority(lines, begin, middle);
      begin = middle + 1;
    }
  }

  /** Enqueue all the lines to be recalculated and set their priority
   *
   * @param lines - lines to enqueue for calculation
   */
  ZoomContext.prototype.enqueueCalculations = function (lines) {
    var i;
    var j = 0;
    for (i = 0; i < lines.length; i++) {
      if (lines[i].recalculate) {
        for (j = i; j < lines.length && lines[j].recalculate; j++) {
          this.queue[this.queueLength++] = lines[j];
        }
        if (j === lines.length) {
          j -= 1;
        }
        calcPriority(lines, i, j);
        i = j;
      }
    }
  };

  /** Sort calculation queue according to priority (using quicksort)
   *
   * @param queue
   * @param l
   * @param r
   */
  function sortQueue(queue, l, r) {
    var m = (queue[l].priority + queue[r].priority) / 2.0;
    var tmp = null;
    var i = l;
    var j = r;
    do {
      while (queue[i].priority > m) {
        i++;
      }
      while (queue[j].priority < m) {
        j--;
      }
      if (i <= j) {
        tmp = queue[i];
        queue[i] = queue[j];
        queue[j] = tmp;
        i++;
        j--;
      }
    } while (j >= i);
    if (l < j) {
      sortQueue(queue, l, j);
    }
    if (r > i) {
      sortQueue(queue, i, r);
    }
  }

  /** Process the relocation table */
  ZoomContext.prototype.calculate = function () {
    var i, newTime;
    this.incomplete = false;
    this.queueLength = 0;
    this.enqueueCalculations(this.columns);
    this.enqueueCalculations(this.rows);
    if (this.queueLength > 0) {
      if (this.queueLength > 1) {
        sortQueue(this.queue, 0, this.queueLength - 1);
      }
      for (i = 0; i < this.queueLength; i++) {
        if (this.queue[i].isRow) {
          this.renderRow(this.queue[i]);
        } else {
          this.renderColumn(this.queue[i]);
        }
        if (!this.recalculate && this.tooSlow() && i < this.queueLength) {
          this.incomplete = true;
          this.fill();
          break;
        }
      }
    }
  };

  /** Update newPosition array with newly calculated positions */
  ZoomContext.prototype.updatePosition = function () {
    var k;
    var len;
    for (k = 0, len = this.columns.length; k < len; k++) {
      this.columns[k].oldPosition = this.columns[k].newPosition;
    }
    for (k = 0, len = this.rows.length; k < len; k++) {
      this.rows[k].oldPosition = this.rows[k].newPosition;
    }
  };

  /** Calculate FPS achieved and determine if fudge factor needs adjustment for next frame */
  ZoomContext.prototype.updateFPS = function () {
    var fps = 1000 / (new Date().getTime() - this.startTime);
    if (fps < this.minFPS) {
      this.fudgeFactor++;
    } else if (fps > this.minFPS + 10 && this.fudgeFactor > 0) {
      this.fudgeFactor--;
    }
    console.log(fps + " fps");
  };

  /** Overall fractal drawing workflow, calls other functions */
  ZoomContext.prototype.drawFractal = function (recalculate) {
    var area = this.convertArea();
    var symx = this.fractal.symmetry && this.fractal.symmetry.x;
    var symy = this.fractal.symmetry && this.fractal.symmetry.y;
    var stepx, stepy;
    this.startTime = new Date().getTime();
    this.recalculate = recalculate;
    if (recalculate || !USE_XAOS) {
      stepx = this.initialize(this.columns, area.begin.x, area.end.x, false);
      stepy = this.initialize(this.rows, area.begin.y, area.end.y, true);
    } else {
      stepx = this.approximate(this.columns, area.begin.x, area.end.x);
      stepy = this.approximate(this.rows, area.begin.y, area.end.y);
    }
    if (
      USE_SYMMETRY &&
      typeof symy === "number" &&
      !(area.begin.y > symy || symy > area.end.y)
    ) {
      prepareSymmetry(
        this.rows,
        Math.floor((symy - area.begin.y) / stepy),
        symy,
        stepy
      );
    }
    if (
      USE_SYMMETRY &&
      typeof symx === "number" &&
      !(area.begin.x > symx || symx > area.end.x)
    ) {
      prepareSymmetry(
        this.columns,
        Math.floor((symx - area.begin.x) / stepx),
        symx,
        stepx
      );
    }
    this.image.swapBuffers();
    this.movePixels();
    this.calculate();
    if (
      (USE_SYMMETRY && typeof symx === "number") ||
      typeof symy === "number"
    ) {
      this.doSymmetry();
    }
    this.image.paint();
    this.updatePosition();
    this.updateFPS();
  };

  /** Adjust display region to zoom based on mouse buttons */
  ZoomContext.prototype.updateRegion = function (mouse) {
    var MAXSTEP = 0.008 * 3;
    var MUL = 0.3;
    var area = this.convertArea();
    var x =
      area.begin.x + mouse.x * ((area.end.x - area.begin.x) / this.image.width);
    var y =
      area.begin.y +
      mouse.y * ((area.end.y - area.begin.y) / this.image.height);
    var deltax =
      (mouse.oldx - mouse.x) * ((area.end.x - area.begin.x) / this.image.width);
    var deltay =
      (mouse.oldy - mouse.y) *
      ((area.end.y - area.begin.y) / this.image.height);
    var step;
    var mmul;
    if (mouse.button[1] || (mouse.button[0] && mouse.button[2])) {
      // Pan when middle or left+right buttons are pressed
      step = 0;
    } else if (mouse.button[0]) {
      // Zoom in when left button is pressed
      step = MAXSTEP * 2;
    } else if (mouse.button[2]) {
      // Zoom out when right button is pressed
      step = -MAXSTEP * 2;
    } else {
      this.zooming = false;
      return;
    }
    mmul = Math.pow(1 - step, MUL);
    area.begin.x = x + (area.begin.x - x) * mmul;
    area.end.x = x + (area.end.x - x) * mmul;
    area.begin.y = y + (area.begin.y - y) * mmul;
    area.end.y = y + (area.end.y - y) * mmul;
    this.fractal.region.radius.x = area.end.x - area.begin.x;
    this.fractal.region.radius.y = area.end.y - area.begin.y;
    this.fractal.region.center.x = (area.begin.x + area.end.x) / 2;
    this.fractal.region.center.y =
      ((area.begin.y + area.end.y) / 2) *
      (this.image.width / this.image.height);
    this.zooming = true;
  };

  /** Attaches zoomer to specified canvas */
  return function (canvas, fractal) {
    var image = new CanvasImage(canvas);
    var zoomer = new ZoomContext(image, fractal);
    var mouse = { x: 0, y: 0, button: [false, false, false] };

    function doZoom() {
      zoomer.updateRegion(mouse);
      if (zoomer.zooming || zoomer.incomplete) {
        requestAnimationFrame(doZoom);
        zoomer.drawFractal(false);
      }
    }

    canvas.ontouchstart = function (e) {
      if (e.touches.length < 3) {
        var touch = e.touches[0];
        e.touches.length == 2
          ? (mouse.button[2] = true)
          : (mouse.button[2] = false);
        var mouseEvent = new MouseEvent("mousedown", {
          clientX: touch.clientX,
          clientY: touch.clientY,
        });
        canvas.dispatchEvent(mouseEvent);
      }
    };

    canvas.ontouchend = function (e) {
      var mouseEvent = new MouseEvent("mouseup", {});
      canvas.dispatchEvent(mouseEvent);
    };

    canvas.ontouchmove = function (e) {
      var touch = e.touches[0];
      var mouseEvent = new MouseEvent("mousemove", {
        clientX: touch.clientX,
        clientY: touch.clientY,
      });
      canvas.dispatchEvent(mouseEvent);
    };

    canvas.onmousedown = function (e) {
      mouse.button[e.button] = true;
      mouse.x = e.offsetX || e.clientX - canvas.offsetLeft;
      mouse.y = e.offsetY || e.clientY - canvas.offsetTop;
      mouse.oldx = e.offsetX || e.clientX - canvas.offsetLeft;
      mouse.oldy = e.offsetY || e.clientY - canvas.offsetTop;
      doZoom();
    };

    canvas.onmouseup = function (e) {
      mouse.button[e.button] = false;
    };

    canvas.onmousemove = function (e) {
      mouse.x = e.offsetX || e.clientX - canvas.offsetLeft;
      mouse.y = e.offsetY || e.clientY - canvas.offsetTop;
    };

    canvas.oncontextmenu = function () {
      return false;
    };

    canvas.onmouseout = function () {
      mouse.button = [false, false, false];
    };

    zoomer.drawFractal(true);
  };
})();

/** Create the default XaoS color palette */
xaos.defaultPalette = function () {
  var MAXENTRIES = 65536;
  var segmentsize = 8;
  var setsegments = Math.floor((MAXENTRIES + 3) / segmentsize);
  var nsegments = Math.floor(255 / segmentsize);
  var segments = [
    [0, 0, 0],
    [120, 119, 238],
    [24, 7, 25],
    [197, 66, 28],
    [29, 18, 11],
    [135, 46, 71],
    [24, 27, 13],
    [241, 230, 128],
    [17, 31, 24],
    [240, 162, 139],
    [11, 4, 30],
    [106, 87, 189],
    [29, 21, 14],
    [12, 140, 118],
    [10, 6, 29],
    [50, 144, 77],
    [22, 0, 24],
    [148, 188, 243],
    [4, 32, 7],
    [231, 146, 14],
    [10, 13, 20],
    [184, 147, 68],
    [13, 28, 3],
    [169, 248, 152],
    [4, 0, 34],
    [62, 83, 48],
    [7, 21, 22],
    [152, 97, 184],
    [8, 3, 12],
    [247, 92, 235],
    [31, 32, 16],
  ];
  var i, y;
  var r, g, b;
  var rs, gs, bs;
  var palette = [];

  for (i = 0; i < setsegments; i++) {
    r = segments[i % nsegments][0];
    g = segments[i % nsegments][1];
    b = segments[i % nsegments][2];
    rs = (segments[((i + 1) % setsegments) % nsegments][0] - r) / segmentsize;
    gs = (segments[((i + 1) % setsegments) % nsegments][1] - g) / segmentsize;
    bs = (segments[((i + 1) % setsegments) % nsegments][2] - b) / segmentsize;
    for (y = 0; y < segmentsize; y++) {
      palette.push((255 << 24) | (b << 16) | (g << 8) | r);
      r += rs;
      g += gs;
      b += bs;
    }
  }
  return new Uint32Array(palette);
};

xaos.mandelbrot = {
  symmetry: { x: null, y: 0 },
  region: {
    center: { x: -0.75, y: 0.0 },
    radius: { x: 2.5, y: 2.5 },
    angle: 0,
  },
  z0: { x: 0, y: 0 },
  maxiter: 512,
  bailout: 4,
  formula: function (cr, ci) {
    var maxiter = this.maxiter,
      bailout = this.bailout,
      zr = this.z0.x,
      zi = this.z0.y,
      i = maxiter;

    while (i--) {
      var zr2 = zr * zr;
      var zi2 = zi * zi;

      if (zr2 + zi2 > bailout) {
        return this.palette[(maxiter - i) % this.palette.length];
      }

      zi = ci + 2 * zr * zi;
      zr = cr + zr2 - zi2;
    }

    return this.palette[0];
  },
  palette: xaos.defaultPalette(),
};

xaos.zoom(document.getElementById("canvas"), xaos.mandelbrot);