<html>
<head>
<script src="renderer.js"></script>
<script src="dxt-to-rgb565.js"></script>
<script src="../transcoder/build/basis_transcoder.js"></script>
<script type="text/javascript">
function log(s) {
  var div = document.createElement('div');
  div.innerHTML = s;
  document.getElementById('logger').appendChild(div);
}

function logTime(desc, t) {
  log(t + 'ms ' + desc);
}

function isDef(v) {
  return typeof v != 'undefined';
}

function elem(id) {
  return document.getElementById(id);
}

formatTable = function(rows) {
  var colLengths = [];

  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    for (var j = 0; j < row.length; j++) {
      if (colLengths.length <= j) colLengths.push(0);
      if (colLengths[j] < row[j].length) colLengths[j] = row[j].length;
    }
  }

  function formatRow(row) {
    var parts = [];
    for (var i = 0; i < colLengths.length; i++) {
      var s = row.length > i ? row[i] : '';
      var padding = (new Array(1 + colLengths[i] - s.length)).join(' ');
      if (s && s[0] >= '0' && s[0] <= '9') {
        // Right-align numbers.
        parts.push(padding + s);
      } else {
        parts.push(s + padding);
      }
    }
    return parts.join(' | ');
  }

  var width = 0;
  for (var i = 0; i < colLengths.length; i++) {
    width += colLengths[i];
    // Add another 3 for the separator.
    if (i != 0) width += 3;
  }

  var lines = [];
  lines.push(formatRow(rows[0]));
  lines.push((new Array(width + 1)).join('-'));
  for (var i = 1; i < rows.length; i++) {
    lines.push(formatRow(rows[i]));
  }

  return lines.join('\n');
};


function loadArrayBuffer(uri, callback) {
  log('Loading ' + uri + '...');
  var xhr = new XMLHttpRequest();
  xhr.responseType = "arraybuffer";
  xhr.open('GET', uri, true);
  xhr.onreadystatechange = function(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
      callback(xhr.response);
    }
  }
  xhr.send(null);
}

// DXT formats, from:
// http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_s3tc/
COMPRESSED_RGB_S3TC_DXT1_EXT  = 0x83F0;
COMPRESSED_RGBA_S3TC_DXT1_EXT = 0x83F1;
COMPRESSED_RGBA_S3TC_DXT3_EXT = 0x83F2;
COMPRESSED_RGBA_S3TC_DXT5_EXT = 0x83F3;

BASIS_FORMAT = {
  cTFETC1: 0,
	cTFBC1: 1,
	cTFBC4: 2,
	cTFPVRTC1_4_OPAQUE_ONLY: 3,
	cTFBC7_M6_OPAQUE_ONLY: 4,
	cTFETC2: 5,
	cTFBC3: 6,
	cTFBC5: 7,
};

BASIS_FORMAT_NAMES = {};
for (var name in BASIS_FORMAT) {
  BASIS_FORMAT_NAMES[BASIS_FORMAT[name]] = name;
}

DXT_FORMAT_MAP = {};
DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC1] = COMPRESSED_RGB_S3TC_DXT1_EXT;
DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC3] = COMPRESSED_RGBA_S3TC_DXT5_EXT;

var dxtSupported = true;
var drawMode = 0;

var tex, width, height, images, levels, have_alpha, alignedWidth, alignedHeight, format;

function redraw()
{
  if (!width)
	return;

  if (dxtSupported)
  {
	  renderer.drawTexture(tex, alignedWidth, alignedHeight, drawMode);
  }
  else if (format == BASIS_FORMAT.cTFBC1)
  {
	  renderer.drawTexture(tex, alignedWidth, alignedHeight, drawMode);
  }
  else
  {
  	 log('TODO: Implement BC3->RGBA conversion for browsers that don\'t support BC3');
  }
}

function dataLoaded(data)
{
  log('Done loading .basis file, decoded header:');

  const { BasisFile, initializeBasis } = Module;
  initializeBasis();

  const startTime = performance.now();

  const basisFile = new BasisFile(new Uint8Array(data));

  width = basisFile.getImageWidth(0, 0);
  height = basisFile.getImageHeight(0, 0);
  images = basisFile.getNumImages();
  levels = basisFile.getNumLevels(0);
  has_alpha = basisFile.getHasAlpha();

  if (!width || !height || !images || !levels) {
    console.warn('Invalid .basis file');
    basisFile.close();
    basisFile.delete();
    return;
  }

  format = BASIS_FORMAT.cTFBC1;
  if (has_alpha)
  {
  	format = BASIS_FORMAT.cTFBC3;

    log('Decoding .basis data to BC3');
  }
  else
  {
  	log('Decoding .basis data to BC1');
  }

  if (!basisFile.startTranscoding()) {
    console.warn('startTranscoding failed');
    basisFile.close();
    basisFile.delete();
    return;
  }

  const dstSize = basisFile.getImageTranscodedSizeInBytes(0, 0, format);
  const dst = new Uint8Array(dstSize);

  if (!basisFile.transcodeImage(dst, 0, 0, format, 1, 0)) {
    console.warn('transcodeImage failed');
    basisFile.close();
    basisFile.delete();
    return;
  }

  const elapsed = performance.now() - startTime;

  basisFile.close();
  basisFile.delete();

  log('width: ' + width);
  log('height: ' + height);
  log('images: ' + images);
  log('first image mipmap levels: ' + levels);
  log('has_alpha: ' + has_alpha);
  logTime('transcoding time', elapsed.toFixed(2));

  alignedWidth = (width + 3) & ~3;
  alignedHeight = (height + 3) & ~3;

  var canvas = elem('canvas');
  canvas.width = alignedWidth;
  canvas.height = alignedHeight;

  if (dxtSupported)
  {
	  tex = renderer.createDxtTexture(dst, alignedWidth, alignedHeight, DXT_FORMAT_MAP[format]);
  }
  else
  {
  	var rgb565Data = dxtToRgb565(new Uint16Array(dst.buffer), 0, alignedWidth, alignedHeight);

	  tex = renderer.createRgb565Texture(rgb565Data, alignedWidth, alignedHeight);
  }

  redraw();
}

function runLoadFile() {
  elem('logger').innerHTML = '';
  loadArrayBuffer(elem('file').value, dataLoaded);
}

function alphaBlend() { drawMode = 0; redraw(); }
function viewRGB() { drawMode = 1; redraw(); }
function viewAlpha() { drawMode = 2; redraw(); }

</script>
</head>
<body>
  <br>
  <div style="font-size: 24pt; font-weight: bold">
    .basis->BC1/BC3 transcoder test
  </div>

  <br>This demo uses the Basis C++ transcoder (compiled to Javascript using Emscripten) to transcode a .basis file to BC1/BC3.
  <br>Thanks to Evan Parker for providing <a href="https://github.com/toji/webgl-texture-utils">webgl-texture-utils</a> and this test bed.
  <br>
  <br>
      .basis file:
      <input id="file" type="text" size=30 value="assets/kodim20.basis"></input>
      <input type="button" value="Run!" onclick="runLoadFile()"></input>
  <br>
  <br>
      <input type="button" value="Alpha blend" onclick="alphaBlend()"></input>
      <input type="button" value="View RGB" onclick="viewRGB()"></input>
	  <input type="button" value="View Alpha" onclick="viewAlpha()"></input>

  <div style="position:absolute; left: 525px; top:130px; font-size: 20pt; font-weight: bold; color: red">
    <div id="nodxt" style="display: none; width: 768px; font-size: 20pt; font-weight: bold; color: red">
      NOTE: Your browser does not support DXT, so using RGB565
      for the texture below.  To get DXT, try Chrome 19+
      (beta channel as of 2012-04-20; graphics card DXT support also required).
    </div>
    <canvas id='canvas'></canvas>
  </div>
  <br><br>
  <div id='logger'></div>
</body>
<script>
  Module.onRuntimeInitialized = () => {
    var gl = elem('canvas').getContext('webgl');
    // Load the DXT extension, and verify it exists.
    if (!gl.getExtension('WEBKIT_WEBGL_compressed_texture_s3tc') && !gl.getExtension('WEBGL_compressed_texture_s3tc')) {
      dxtSupported = false;
      elem('nodxt').style.display = 'block';
    }

    window.renderer = new Renderer(gl);

    elem('file').addEventListener('keydown', function(e) {
      if (e.keyCode == 13) {
        runLoadFile();
      }
    }, false);

    runLoadFile();
  }
</script>
</html>