// Copyright 2010 Daniel Erat
// All rights reserved.

function interpolateColors(rgb1, rgb2, pct) {
  rgb1 = rgb1.charAt(0) == '#' ? rgb1.substring(1, 7) : rgb1;
  var r1 = parseInt(rgb1.substring(0, 2), 16);
  var g1 = parseInt(rgb1.substring(2, 4), 16);
  var b1 = parseInt(rgb1.substring(4, 6), 16);

  rgb2 = rgb2.charAt(0) == '#' ? rgb2.substring(1, 7) : rgb2;
  var r2 = parseInt(rgb2.substring(0, 2), 16);
  var g2 = parseInt(rgb2.substring(2, 4), 16);
  var b2 = parseInt(rgb2.substring(4, 6), 16);

  var newRed = Math.floor(r1 + (r2 - r1) * pct);
  var newGreen = Math.floor(g1 + (g2 - g1) * pct);
  var newBlue = Math.floor(b1 + (b2 - b1) * pct);

  return 'rgb(' + newRed + ', ' + newGreen + ', ' + newBlue + ')';
}

function fillTops() {
  var bgColor = '#000000';
  var cornerRadius = 8;

  var divs = document.getElementsByTagName('div');
  for (var i = 0; i < divs.length; i++) {
    var div = divs[i];
    if (div.className == 'boxtop') {
      while (div.hasChildNodes()) {
        div.removeChild(div.lastChild);
      }

      if (div.parentNode.className == 'navbox') {
        var fgColor = '#3498ff'
        var minWidth = 1;
        var maxWidth = 30;
      } else {
        var fgColor = '#ff9c00';
        var minWidth = 2;
        var maxWidth = 40;
      }

      var totalWidth = div.offsetWidth;
      var usedWidth = 0;
      while (usedWidth < totalWidth) {
        var width = Math.floor(
            minWidth + Math.random() * (maxWidth - minWidth));

        // Make sure that the divs at the ends are at least as wide as
        // the corner radius.
        if (usedWidth == 0 && width < cornerRadius) {
          width = cornerRadius;
        } else {
          var remainingWidth = totalWidth - usedWidth;
          if (remainingWidth - width < cornerRadius) {
            width = remainingWidth;
          }
        }

        var brightness = 0.5 + 0.5 * Math.random();
        var color = interpolateColors(bgColor, fgColor, brightness);

        var newDiv = document.createElement('div');
        newDiv.style.width = width + 'px';
        newDiv.style.backgroundColor = color;
        if (usedWidth == 0) {
          newDiv.className = 'left';
        } else if (usedWidth + width >= totalWidth) {
          newDiv.className = 'right';
        }
        div.appendChild(newDiv);

        usedWidth += width;
      }
    }
  }
}

function updateNavboxOpacity() {
  // How far the user can scroll before the navbox is completely gone.
  var threshold = 60.0;

  var navtitle = document.getElementById('navtitle');
  var navbox = document.getElementById('navbox');

  var scrollX = (document.body && document.body.scrollLeft) ?
      document.body.scrollLeft :
      document.documentElement.scrollLeft;

  navtitle.style.display = (scrollX >= threshold) ? 'none' : 'block';
  navbox.style.display = (scrollX >= threshold) ? 'none' : 'block';

  if (scrollX == 0) {
    navtitle.style.opacity = 1;
    navbox.style.opacity = 1;
  } else {
    var cappedScroll = Math.min(scrollX, threshold);
    var opacity = 1.0 - cappedScroll / threshold;
    navtitle.style.opacity = opacity;
    navbox.style.opacity = opacity;
  }
}

function handleDomLoaded() {
  // The Android and iPhone browsers don't deal particularly well with the
  // navbox effects; onscroll doesn't fire until the end of the scroll
  // action, and the opacity and position change very abrupt (and Android's
  // fixed position implementation seems to be broken).  For those
  // browsers, it's a better experience to just keep the navigation
  // elements in the upper left.
  //
  // (But note that the fixed-width content divs make the pages pretty much
  // unusable on narrow screens.) :-(
  var avoidEffects = (navigator.userAgent.indexOf('Android') != -1 ||
                      navigator.userAgent.indexOf('iPhone') != -1);

  if (avoidEffects) {
    document.getElementById('navtitle').style.position = 'absolute';
    document.getElementById('navbox').style.position = 'absolute';
    window.onresize = function() { handleResize(false) };
  } else {
    window.onscroll = handleScroll;
    window.onresize = function() { handleResize(true) };
  }
  fillTops();
}

function handleScroll() {
  updateNavboxOpacity();
}

function handleResize(updateOpacity) {
  fillTops();
  if (updateOpacity)
    updateNavboxOpacity();
}